Farmer-Header v2 nach Thomas-Feedback + Default-Musikplayer
- Header nach oben RECHTS (raus aus dem Leaflet-Zoom oben links), Geld-Anzeige entfernt (steht in linker Sidebar), Emoji aus Titel, Jahr als Badge in die Pille (Konsistenz mit Batch 1), Inter-Font. - Jahr-Leiste + Anbau-Versuch-Spalte nach unten geschoben (unter Header). - Komponente: wiederverwendbarer Default-Musikplayer (data-ggs-music, Klima-Tracks als Plattform-Standard) + Musik-Widget-Styling fuer Sims ohne design-system.css. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -21,6 +21,7 @@
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
flex-wrap: nowrap;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
/* Overlay-Modus: Zeile schwebt über Vollbild-Canvas (Heli, Tourismus …).
|
||||
@@ -247,6 +248,37 @@
|
||||
height: auto;
|
||||
}
|
||||
.ggs-header--float .ggs-pop--music .ggs-music[hidden] { display: inline-flex !important; }
|
||||
/* Musik-Bedienelemente selbst gestalten (auch für Sims ohne design-system.css) */
|
||||
.ggs-header--float .ggs-pop--music .ggs-music-sel {
|
||||
height: 30px;
|
||||
border: 1px solid rgba(0, 0, 0, .12);
|
||||
border-radius: 8px;
|
||||
padding: 0 .5rem;
|
||||
font-size: .78rem;
|
||||
font-weight: 700;
|
||||
color: #1f4e5a;
|
||||
background: #f7f6f3;
|
||||
max-width: 130px;
|
||||
}
|
||||
.ggs-header--float .ggs-pop--music .ggs-music-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: #4a7c8a;
|
||||
color: #fff;
|
||||
font-size: .8rem;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
}
|
||||
.ggs-header--float .ggs-pop--music .ggs-music-btn.playing { background: #5a8a5e; }
|
||||
.ggs-header--float .ggs-pop--music .ggs-music-vol {
|
||||
width: 84px;
|
||||
accent-color: #4a7c8a;
|
||||
}
|
||||
|
||||
/* Schmaler auf iPad-Landscape (Platz sparen) */
|
||||
@media (max-width: 1100px) {
|
||||
|
||||
@@ -87,6 +87,43 @@
|
||||
new MutationObserver(apply).observe(btn, { childList: true, characterData: true, subtree: true });
|
||||
}
|
||||
|
||||
/* Standard-Musikplayer (Klima-Tracks als Plattform-Default) für Sims
|
||||
ohne eigenen Player. Aktiviert per data-ggs-music="default". */
|
||||
// Plattform-Standardmusik (Platzhalter: Klima-Tracks, dort abgelegt)
|
||||
var DEFAULT_TRACKS = [
|
||||
{ label: '🎹 Lounge', file: '/sims/klima/assets/music/piano-lobby.mp3' },
|
||||
{ label: '🌿 Ambient', file: '/sims/klima/assets/music/fingertip-rain.mp3' },
|
||||
{ label: '🌙 Ruhig', file: '/sims/klima/assets/music/limestone-lullaby.mp3' },
|
||||
{ label: '☕ Chill', file: '/sims/klima/assets/music/vibrocoffee-calm.mp3' },
|
||||
{ label: '🎭 Drama', file: '/sims/klima/assets/music/rising-pressure.mp3' }
|
||||
];
|
||||
function buildDefaultMusic() {
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'ggs-music';
|
||||
wrap.id = 'ggs-music';
|
||||
var sel = document.createElement('select');
|
||||
sel.className = 'ggs-music-sel'; sel.id = 'ggs-music-sel'; sel.title = 'Musik wählen';
|
||||
DEFAULT_TRACKS.forEach(function (t) {
|
||||
var o = document.createElement('option'); o.value = t.file; o.textContent = t.label; sel.appendChild(o);
|
||||
});
|
||||
var btn = document.createElement('button');
|
||||
btn.className = 'ggs-music-btn'; btn.id = 'ggs-music-toggle'; btn.type = 'button'; btn.title = 'Play / Pause'; btn.textContent = '▶';
|
||||
var vol = document.createElement('input');
|
||||
vol.type = 'range'; vol.className = 'ggs-music-vol'; vol.id = 'ggs-music-vol';
|
||||
vol.min = 0; vol.max = 100; vol.value = 30; vol.title = 'Lautstärke';
|
||||
wrap.appendChild(sel); wrap.appendChild(btn); wrap.appendChild(vol);
|
||||
|
||||
var audio = new Audio();
|
||||
audio.loop = true; audio.volume = 0.3; audio.src = DEFAULT_TRACKS[0].file;
|
||||
var playing = false;
|
||||
function play() { audio.play().then(function () { playing = true; btn.textContent = '⏸'; btn.classList.add('playing'); }).catch(function () {}); }
|
||||
function pause() { audio.pause(); playing = false; btn.textContent = '▶'; btn.classList.remove('playing'); }
|
||||
btn.addEventListener('click', function (e) { e.stopPropagation(); playing ? pause() : play(); });
|
||||
sel.addEventListener('change', function () { audio.src = sel.value; if (playing) play(); });
|
||||
vol.addEventListener('input', function () { audio.volume = (vol.value || 0) / 100; });
|
||||
return wrap;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------ */
|
||||
function enhance(header, opts) {
|
||||
if (!header || header.hasAttribute('data-ggs-enhanced')) return;
|
||||
@@ -212,7 +249,12 @@
|
||||
});
|
||||
}
|
||||
|
||||
/* --- 5) Musik-Panel (nur wenn #ggs-music vorhanden) ------- */
|
||||
/* --- 5) Musik-Panel ---------------------------------------- */
|
||||
// Default-Player erzeugen, falls die Sim keinen eigenen Player hat
|
||||
var musicSpec = opts.music || header.getAttribute('data-ggs-music');
|
||||
if (musicSpec && !q('#ggs-music') && actions) {
|
||||
actions.appendChild(buildDefaultMusic());
|
||||
}
|
||||
var music = q('#ggs-music');
|
||||
var musicWrap = null;
|
||||
if (music) {
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/fonts/inter.css">
|
||||
<link rel="stylesheet" href="../../assets/css/ggs-header.css">
|
||||
<script src="../../assets/js/ggs-header.js"></script>
|
||||
|
||||
@@ -21,7 +22,7 @@
|
||||
|
||||
/* ===== Topbar ===== */
|
||||
.ggs-topbar {
|
||||
position: absolute; top: 8px; left: 8px; z-index: 1000;
|
||||
position: absolute; top: 8px; right: 8px; left: auto; z-index: 1001;
|
||||
display: flex; gap: 8px; align-items: center; font-size: 13px;
|
||||
}
|
||||
.ggs-topbar a {
|
||||
@@ -42,7 +43,7 @@
|
||||
|
||||
/* ===== Year-Bar ===== */
|
||||
.farmer-year-bar {
|
||||
position: absolute; top: 8px; right: 8px; z-index: 1000;
|
||||
position: absolute; top: 60px; right: 8px; z-index: 1000;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 6px 10px; border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
||||
@@ -125,7 +126,7 @@
|
||||
|
||||
/* ===== Side-Panel (rechts unter Year-Bar) — toggelt zwischen Picker und Report ===== */
|
||||
.farmer-side {
|
||||
position: absolute; right: 8px; top: 76px; z-index: 1000;
|
||||
position: absolute; right: 8px; top: 112px; z-index: 1000;
|
||||
max-height: calc(100dvh - 92px - env(safe-area-inset-bottom));
|
||||
overflow-y: auto;
|
||||
width: 240px;
|
||||
@@ -487,9 +488,9 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ggs-topbar ggs-header" data-ggs-sim="farmer" data-ggs-no-glossar data-ggs-home="/schueler">
|
||||
<h1 class="ggs-header-module">🌾 Landwirtschaft</h1>
|
||||
<div class="farmer-money" id="money-display">0 €</div>
|
||||
<div class="ggs-topbar ggs-header" data-ggs-sim="farmer" data-ggs-no-glossar data-ggs-home="/schueler" data-ggs-music="default">
|
||||
<h1 class="ggs-header-module">Landwirtschaft</h1>
|
||||
<span class="ggs-header-badge">Jahr <span id="year-num">1</span></span>
|
||||
<div class="ggs-header-spacer"></div>
|
||||
<div class="ggs-header-actions">
|
||||
<a href="/schueler" title="Zurück zur Schülerseite">🏠</a>
|
||||
@@ -500,8 +501,6 @@
|
||||
</div>
|
||||
|
||||
<div class="farmer-year-bar">
|
||||
<span class="farmer-year-label">Jahr</span>
|
||||
<span class="farmer-year-num" id="year-num">1</span>
|
||||
<span class="farmer-market" id="market-display" title="Markt-Auftrag dieses Jahres — alle Lieferungen gehen hierher">
|
||||
<span class="farmer-market-label">Markt</span>
|
||||
<span id="market-text">—</span>
|
||||
|
||||
Reference in New Issue
Block a user