Adminator/geograsim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ggs-header: Tourismustal + Tourismusregion (Batch 2)

Browse Source 
- Komponente: btnHome/⌂-Erkennung (ganzer Header durchsucht), sim-eigener
  Musik-Toggle (btnMusic) -> Musik-Icon, Panel-Optik (blur/shadow/radius)
  gestrippt fuer Sims mit .panel-Leiste.
- Beide Tourismus-Sims: topbar -> ggs-header (Klassen additiv, alle IDs +
  ui.js-Bindings erhalten), Tempo-Popover ueber .ggs-speed, Musik bleibt
  eigenes Panel (btnMusic oeffnet es). ggs-header.css vor style.css fuer
  position:fixed.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Thomas
2026-08-25 17:46:46 +02:00
parent 41731254b1
commit 6009eabca1
4 changed files with 42 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App/assets/css/ggs-header.css
+6
View File
@@ -22,6 +22,12 @@
z-index: 1000;
flex-wrap: nowrap;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
/* Falls die Sim-Leiste ein Panel-Styling mitbringt (blur/shadow/radius):
strippen, damit nur die einzelnen schwebenden Pillen sichtbar sind. */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Overlay-Modus: Zeile schwebt über Vollbild-Canvas (Heli, Tourismus …).
App/assets/js/ggs-header.js
+13 -7
View File
@@ -74,6 +74,8 @@
var RESET_IDS = ['btn-reset', 'btnReset', 'btn-restart', 'btn-neustart'];
var HELP_IDS = ['btn-info', 'btnHelp', 'btn-help', 'btn-anleitung', 'btn-hilfe'];
var GLOSSAR_IDS = ['glossar-btn', 'btn-glossar', 'btnGlossar', 'btnGlossary'];
var MUSIC_IDS = ['btnMusic', 'btnMusik', 'music-toggle-btn']; // sim-eigener Musik-Toggle (öffnet eigenes Panel)
var HOME_IDS = ['btnHome', 'btn-home', 'ggs-home-link'];
/* Glyph-Buttons (Ton), die die Sim per textContent umschaltet:
Icon nach jeder Änderung nachziehen, Mute-Zustand als Icon spiegeln. */
@@ -166,13 +168,16 @@
var tick = header.querySelector('.kw-tick-dot'); if (tick) pille.appendChild(tick);
/* --- 2) Home-Button links neben die Pille ----------------- */
var homeBtn = null;
var acts = header.querySelectorAll('.ggs-header-actions a, .ggs-header-actions button');
for (var h = 0; h < acts.length; h++) {
var a = acts[h];
var href = a.getAttribute('href') || '';
if (a.id === 'btn-info' || a.id === 'btn-sound' || a.id === 'btn-reset' || a.id === 'ggs-lehrplan-link') continue;
if (/schueler|cockpit|\/$/.test(href) || (a.textContent || '').indexOf('🏠') >= 0) { homeBtn = a; break; }
var homeBtn = byIds(header, HOME_IDS);
if (!homeBtn) {
var acts = header.querySelectorAll('a, button');
for (var h = 0; h < acts.length; h++) {
var a = acts[h];
var href = a.getAttribute('href') || '';
var t = a.textContent || '';
if (a.id === 'btn-info' || a.id === 'btn-sound' || a.id === 'btn-reset' || a.id === 'ggs-lehrplan-link') continue;
if (/schueler|cockpit|\/$/.test(href) || t.indexOf('🏠') >= 0 || t.indexOf('⌂') >= 0) { homeBtn = a; break; }
}
}
if (!homeBtn) {
homeBtn = document.createElement('a');
@@ -199,6 +204,7 @@
watchGlyphBtn(soundBtn, function (t) { return /🔇|🔈|🔕|off|aus|mute|stumm/i.test(t) ? 'sound-off' : 'sound'; }, 'Ton an/aus');
setIcon(resetBtn, 'restart', 'Neu starten');
setIcon(byIds(header, GLOSSAR_IDS), 'glossar'); // sim-interner Glossar/Fachinfo-Button
setIcon(byIds(header, MUSIC_IDS), 'music'); // sim-eigener Musik-Toggle (öffnet eigenes Panel)
var lehrplan = q('#ggs-lehrplan-link'); if (lehrplan) lehrplan.style.display = 'none';
/* --- 4) Tempo-Panel (nur wenn .ggs-speed vorhanden) ------- */
App/sims/tourismusregion/game.html
+12 -9
View File
@@ -6,24 +6,27 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Tourismusregion entwickeln – GeoGraSim</title>
<script>/*__TOURISMUSREGION_INJECTION__*/</script>
<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>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas id="map"></canvas>
<header id="topbar" class="panel">
<header id="topbar" class="panel ggs-header" data-ggs-sim="tourismusregion" data-ggs-home="../../schueler.html">
<button id="btnHome" class="icon-btn" title="Zurück zur Übersicht">⌂</button>
<h1>Tourismusregion <span class="subtitle">entwickeln</span></h1>
<h1 class="ggs-header-module">Tourismusregion <span class="subtitle">entwickeln</span></h1>
<div id="waveStatus" class="wave-status">Welle 1 vorbereiten…</div>
<div class="top-right">
<div class="top-right ggs-header-actions">
<div id="clock" class="clock">Welle 1/8</div>
<div class="speed" role="group" aria-label="Zeit">
<button data-speed="0" class="icon-btn speed-btn" title="Pause">⏸</button>
<button data-speed="1" class="icon-btn speed-btn active" title="Normal">1×</button>
<button data-speed="2" class="icon-btn speed-btn" title="Doppelt">2×</button>
<button data-speed="3" class="icon-btn speed-btn" title="Dreifach">3×</button>
<button data-speed="4" class="icon-btn speed-btn" title="Vierfach">4×</button>
<div class="speed ggs-speed" role="group" aria-label="Zeit">
<button data-speed="0" class="icon-btn speed-btn ggs-speed-btn" title="Pause">⏸</button>
<button data-speed="1" class="icon-btn speed-btn ggs-speed-btn active" title="Normal">1×</button>
<button data-speed="2" class="icon-btn speed-btn ggs-speed-btn" title="Doppelt">2×</button>
<button data-speed="3" class="icon-btn speed-btn ggs-speed-btn" title="Dreifach">3×</button>
<button data-speed="4" class="icon-btn speed-btn ggs-speed-btn" title="Vierfach">4×</button>
</div>
<button id="btnLog" class="icon-btn" title="Meldungen">🔔<span id="logBadge" class="badge hidden">0</span></button>
<button id="btnSound" class="icon-btn" title="Sound an/aus">🔊</button>
App/sims/tourismustal/game.html
+11 -8
View File
@@ -6,22 +6,25 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Tourismustal – GeoGraSim</title>
<script>/*__TOURISMUSTAL_INJECTION__*/</script>
<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>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas id="map"></canvas>
<header id="topbar" class="panel">
<header id="topbar" class="panel ggs-header" data-ggs-sim="tourismustal" data-ggs-home="../../schueler.html">
<button id="btnHome" class="icon-btn" title="Zurück zur Übersicht">⌂</button>
<h1><span id="valleyTitle">Tourismustal</span> <span id="sceneName"></span></h1>
<div class="top-right">
<h1 class="ggs-header-module"><span id="valleyTitle">Tourismustal</span> <span id="sceneName"></span></h1>
<div class="top-right ggs-header-actions">
<div id="clock" class="clock"></div>
<div class="speed" role="group" aria-label="Zeitskala">
<button data-speed="0" class="icon-btn speed-btn" title="Pause">⏸</button>
<button data-speed="1" class="icon-btn speed-btn active" title="Normal">1×</button>
<button data-speed="2" class="icon-btn speed-btn" title="Schnell">2×</button>
<button data-speed="4" class="icon-btn speed-btn" title="Sehr schnell">4×</button>
<div class="speed ggs-speed" role="group" aria-label="Zeitskala">
<button data-speed="0" class="icon-btn speed-btn ggs-speed-btn" title="Pause">⏸</button>
<button data-speed="1" class="icon-btn speed-btn ggs-speed-btn active" title="Normal">1×</button>
<button data-speed="2" class="icon-btn speed-btn ggs-speed-btn" title="Schnell">2×</button>
<button data-speed="4" class="icon-btn speed-btn ggs-speed-btn" title="Sehr schnell">4×</button>
</div>
<button id="btnInfoMode" class="icon-btn" title="Meldungs-Modus umschalten">📖</button>
<button id="btnLog" class="icon-btn" title="Meldungen">🔔<span id="logBadge" class="badge hidden">0</span></button>