diff --git a/App/sims/sonnensystem/data/observations.json b/App/sims/sonnensystem/data/observations.json index 14890e2..da94f84 100644 --- a/App/sims/sonnensystem/data/observations.json +++ b/App/sims/sonnensystem/data/observations.json @@ -201,7 +201,7 @@ "date": "2026-06-21", "scale": "symbolic", "scene": "normal", - "camera": "side", + "camera": "earth-top", "speed": 66 }, "question": "Wie lange dauert heute der Tag am Nordpol?", @@ -227,7 +227,7 @@ "date": "2026-12-21", "scale": "symbolic", "scene": "normal", - "camera": "side", + "camera": "earth-top", "speed": 66 }, "question": "Wie lang ist heute der Tag am Nordpol?", @@ -255,7 +255,8 @@ "scene": "normal", "camera": "earth", "speed": 87, - "inspect": "moon" + "inspect": "moon", + "moonPhaseStart": "new" }, "question": "Welche Reihenfolge der Mondphasen ist richtig?", "options": [ @@ -306,7 +307,7 @@ "date": "2026-06-21", "scale": "symbolic", "scene": "normal", - "camera": "side", + "camera": "earth-side", "speed": 0, "axisTilt": 23.5 }, @@ -329,7 +330,7 @@ "paused": true, "state": { "date": "2026-06-21", - "camera": "side", + "camera": "earth-side", "axisTilt": 23.5, "speed": 0 } @@ -340,7 +341,7 @@ "paused": true, "state": { "date": "2026-06-21", - "camera": "side", + "camera": "earth-side", "axisTilt": 0, "speed": 0 } @@ -359,7 +360,7 @@ "date": "2026-03-21", "scale": "symbolic", "scene": "normal", - "camera": "overview", + "camera": "earth-side", "speed": 66 }, "question": "Was haben diese beiden Tage gemeinsam?", @@ -373,7 +374,13 @@ ], "correctIndex": 1, "explanation": "Diese Tage heißen Tag-und-Nacht-Gleiche (lateinisch Äquinoktium). Die Sonne steht senkrecht über dem Äquator — überall auf der Erde dauert der Tag genau 12 Stunden, vom Pol bis zum Äquator. Im März beginnt für uns der Frühling, gleichzeitig der Herbst auf der Südhalbkugel.", - "simHint": "Springe zu '🌷 Frühl.' und '🍂 Herbst' und vergleiche die Beleuchtung — in beiden Fällen sind beide Halbkugeln gleich beleuchtet." + "simHint": "Springe zu '🌷 Frühl.' und '🍂 Herbst' und vergleiche die Beleuchtung: in beiden Fällen sind beide Halbkugeln gleich beleuchtet.", + "phases": [ + { "label": "🌷 21. März — Tag-und-Nacht-Gleiche (Frühling)", "duration_s": 5, "paused": true, "state": { "date": "2026-03-21", "camera": "earth-side", "speed": 0 } }, + { "label": "🍂 22. September — Tag-und-Nacht-Gleiche (Herbst)", "duration_s": 5, "paused": true, "state": { "date": "2026-09-22", "camera": "earth-side", "speed": 0 } } + ], + "phasesLoop": true, + "watchHint": "Du siehst die Erde von der Seite. Achte auf die Tag-Nacht-Grenze: An beiden Tagen läuft sie senkrecht genau durch Nordpol und Südpol — deshalb sind beide Halbkugeln gleich beleuchtet und der Tag ist überall 12 Stunden lang." }, { "id": "obs-tag-laenge-vergleich", @@ -436,7 +443,7 @@ "date": "2026-06-21", "scale": "symbolic", "scene": "normal", - "camera": "earth-close", + "camera": "earth-side", "speed": 0 }, "question": "Wann treffen die Sonnenstrahlen die Nordhalbkugel besonders steil — fast senkrecht?", @@ -450,7 +457,13 @@ ], "correctIndex": 0, "explanation": "Am 21. Juni treffen die Sonnenstrahlen die Nordhalbkugel fast senkrecht — auf eine kleine Fläche kommt viel Energie. Das ist der Hauptgrund für die Sommer-Hitze. Am 21. Dezember ist es genau umgekehrt: die Strahlen treffen flach, viel Energie verteilt sich auf eine größere Fläche, es ist kalt.", - "simHint": "Sonnenstrahlen-Toggle einschalten. Sommer und Winter vergleichen — beim Winter laufen die Strahlen schräg über die Nordhalbkugel, im Sommer steil drauf." + "simHint": "Sonnenstrahlen-Toggle einschalten. Sommer und Winter vergleichen: im Winter laufen die Strahlen schräg über die Nordhalbkugel, im Sommer steil drauf.", + "phases": [ + { "label": "☀️ 21. Juni — Strahlen treffen die Nordhalbkugel STEIL (fast senkrecht)", "duration_s": 5, "paused": true, "state": { "date": "2026-06-21", "camera": "earth-side", "speed": 0 } }, + { "label": "❄️ 21. Dezember — Strahlen treffen die Nordhalbkugel FLACH (schräg)", "duration_s": 5, "paused": true, "state": { "date": "2026-12-21", "camera": "earth-side", "speed": 0 } } + ], + "phasesLoop": true, + "watchHint": "Du siehst die Erde von der Seite. Achte auf die gelben Sonnenstrahlen: Im Sommer (21. Juni) treffen sie fast senkrecht auf die Nordhalbkugel, im Winter (21. Dezember) flach und schräg. Steil = viel Energie auf kleiner Fläche = warm." }, { "id": "obs-erde-um-sonne", @@ -468,7 +481,7 @@ "question": "Was bewegt sich worum?", "options": [ "Die Erde steht still, die Sonne wandert um sie", - "Die Erde wandert um die Sonne, der Mond mit ihr", + "Die Erde wandert um die Sonne, während der Mond um die Erde wandert", "Sonne, Erde und Mond stehen alle still", "Der Mond wandert um die Sonne, die Erde steht still", "Die Sonne wandert um den Mond, die Erde mit ihr", @@ -520,14 +533,14 @@ "question": "Wenn die Sonne ein Apfel wäre — wie groß wäre dann die Erde, und wie weit weg vom Apfel?", "options": [ "Wie ein Tennisball, 1 m entfernt", - "Wie eine Murmel, 30 cm entfernt", - "Wie ein Sandkorn (0,7 mm), 8,6 m entfernt — am anderen Ende des Klassenzimmers", + "Wie eine Murmel, 20 km entfernt", + "Wie ein Mohnkorn (≈ 1 mm), rund 8,6 m entfernt (quer durchs Klassenzimmer)", "Wie ein Tischtennisball, 50 cm entfernt", "Wie ein Reiskorn, direkt neben dem Apfel", "Wie ein Apfel, 1 km entfernt" ], "correctIndex": 2, - "explanation": "Die Erde ist 109× kleiner als die Sonne im Durchmesser — bei einer 8-cm-Apfel-Sonne also 0,7 mm. Und der Abstand Erde-Sonne ist 107× so groß wie der Sonnen-Durchmesser — also 8 cm × 107 = 8,6 m. Das All ist gewaltig leer. Wenn die Sonne ein Apfel auf dem Lehrertisch wäre, könntest du die Erde von dort aus überhaupt nicht mehr sehen — sie wäre ein winziges Sandkorn auf der anderen Seite des Klassenzimmers.", + "explanation": "Die Erde ist 109 × kleiner als die Sonne im Durchmesser. Bei einer 8-cm-Apfel-Sonne ist sie also nur knapp 1 mm groß, ungefähr ein Mohnkorn. Und der Abstand von der Erde zur Sonne ist 107 × so groß wie der Sonnendurchmesser, also 8 cm mal 107, das sind 8,6 Meter. Das All ist gewaltig leer: Wäre die Sonne ein Apfel auf dem Lehrertisch, könntest du die Erde von dort aus gar nicht mehr sehen. Sie wäre ein winziges Mohnkorn ganz am anderen Ende des Klassenzimmers.", "simHint": "Im '📏 Reale Abstände'-Modus siehst du diesen Maßstab in der Sim selbst. Zoome heraus — die Erde wird zu einem unsichtbar kleinen Punkt." }, { @@ -541,7 +554,7 @@ "scale": "symbolic", "scene": "normal", "camera": "overview", - "speed": 10, + "speed": 17, "photon": true }, "question": "Wie lange braucht das Sonnenlicht von der Sonne bis zur Erde?", @@ -554,8 +567,9 @@ "1 Jahr" ], "correctIndex": 2, - "explanation": "Sonnenlicht braucht etwa 8 Minuten und 20 Sekunden bis zur Erde. Das heißt: was du gerade als Sonnenstand am Himmel siehst, hat die Sonne vor 8 Minuten verlassen. Wenn die Sonne plötzlich erlöschen würde, würden wir das erst 8 Minuten später bemerken. Vom weitesten Planeten Neptun braucht das Licht 4 Stunden — und vom nächsten Stern (Proxima Centauri) 4 Jahre.", - "simHint": "Im Bereich 'Mondbahn & Visualisierungen' das '💡 Photon zeigen' einschalten. Bei langsamer Geschwindigkeit (🐢 1×) siehst du, wie das Photon braucht — bei höherer Geschwindigkeit nur eine Linie als Pfad." + "explanation": "Sonnenlicht braucht etwa 8 Minuten und 20 Sekunden bis zur Erde. Genau genommen schwankt das ein wenig (zwischen 8 min 11 s und 8 min 29 s), weil die Erdbahn leicht oval ist und die Erde mal näher, mal weiter von der Sonne steht. Das heißt: Was du gerade als Sonnenstand am Himmel siehst, hat die Sonne vor gut 8 Minuten verlassen. Würde die Sonne plötzlich erlöschen, würden wir das erst 8 Minuten später bemerken. Vom weitesten Planeten Neptun braucht das Licht 4 Stunden, und vom nächsten Stern (Proxima Centauri) 4 Jahre.", + "simHint": "Im Bereich 'Mondbahn & Visualisierungen' das '💡 Photon zeigen' einschalten. Bei langsamer Geschwindigkeit (🐢 1×) siehst du, wie lange das Photon unterwegs ist; bei höherer Geschwindigkeit nur eine Linie als Pfad.", + "watchHint": "Beobachte mindestens 30 Sekunden und zähle die Sekunden am Anfang selbst mit. Die Skala unten zeigt die 8 Minuten in 8 Abschnitten (1 Minute pro Feld) — nach einem halben Feld kannst du den Rest schon hochrechnen. Das Photon läuft die ganze Strecke bis zur Erde." } ] } \ No newline at end of file diff --git a/App/sims/sonnensystem/game.html b/App/sims/sonnensystem/game.html index 0da8118..dcf0cb0 100644 --- a/App/sims/sonnensystem/game.html +++ b/App/sims/sonnensystem/game.html @@ -516,6 +516,35 @@ } #obs-close:active { background: #e2e8f0; } + /* Anleitung-Overlay */ + .sn-anl-card { + background: #fff; color: #2a2440; border-radius: 16px; + max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; + box-shadow: 0 16px 48px rgba(20,12,60,0.4); padding: 22px 24px; + text-align: left; animation: snPop 0.35s cubic-bezier(.18,1.4,.6,1); + } + .sn-anl-card h3 { margin: 0 0 4px; color: #3d2c8d; font-size: 1.2rem; text-align: center; font-weight: 800; } + .sn-anl-lead { text-align: center; color: #6b6785; font-size: 0.85rem; margin: 0 0 14px; } + .sn-anl-sec { border-top: 1px solid #ece9f5; padding: 10px 0; } + .sn-anl-sec:first-of-type { border-top: none; padding-top: 2px; } + .sn-anl-sec h4 { margin: 0 0 3px; font-size: 0.97rem; color: #2a2440; font-weight: 700; } + .sn-anl-sec p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: #4a4660; } + + /* Photon-Lichtlaufzeit-Skala (8 Segmente = 8 Minuten) */ + #photon-scale { + position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; + z-index: 30; width: min(440px, 90vw); + background: rgba(15,10,40,0.82); border-radius: 12px; padding: 8px 12px 6px; + color: #fde68a; font-size: 12px; text-align: center; + box-shadow: 0 6px 20px rgba(0,0,0,0.4); + } + #photon-scale .ph-label { font-weight: 700; margin-bottom: 5px; color: #fff; } + #photon-scale .ph-track { position: relative; height: 14px; border-radius: 7px; background: rgba(255,255,255,0.12); overflow: hidden; } + #photon-scale .ph-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, #f59e0b, #fde68a); } + #photon-scale .ph-ticks { position: absolute; inset: 0; pointer-events: none; + background: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1.5px), rgba(255,255,255,0.5) calc(12.5% - 1.5px), rgba(255,255,255,0.5) 12.5%); } + #photon-scale .ph-mins { display: flex; justify-content: space-between; font-size: 10px; color: #cbd5e1; margin-top: 3px; } + #obs-progress { font-size: 12px; color: #6b7280; font-weight: 600; margin-bottom: 4px; @@ -694,6 +723,7 @@ } .sn-onboard-visual svg { width: 100%; max-width: 460px; height: auto; } .sn-onboard-text { + color: #2a2440; font-size: 0.95rem; line-height: 1.55; color: #1f1a3a; margin-bottom: 18px; } @@ -724,7 +754,7 @@ font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: #5a8a5e; margin-bottom: 4px; } - .sn-ff-text { font-size: 0.96rem; line-height: 1.55; margin-bottom: 18px; } + .sn-ff-text { font-size: 0.96rem; line-height: 1.55; margin-bottom: 18px; color: #2a2440; } .sn-ff-text b { color: #3d2c8d; } /* Endscreen Stars + Achievements */ @@ -760,6 +790,11 @@
🌍 Erde
🌙 Mond
+
📆 1. Jan
@@ -979,6 +1014,21 @@ +
@@ -988,6 +1038,7 @@

Titel

Hinführung

+ @@ -1018,6 +1069,7 @@

+
@@ -2110,7 +2162,7 @@ document.querySelectorAll('[data-scene]').forEach(btn => { moonTiltDeg = 0; tiltLabel.textContent = '0.0'; moonInclination.rotation.x = 0; - timeDays = MOON_MONTH_DAYS / 2; // Neumond: Mond zwischen Sonne und Erde + timeDays = moonPhaseTimeDays('new'); // exakt Neumond: Mond genau zwischen Sonne und Erde paused = true; pauseBtn.textContent = '▶'; clearTrail(); @@ -2119,7 +2171,7 @@ document.querySelectorAll('[data-scene]').forEach(btn => { moonTiltDeg = 0; tiltLabel.textContent = '0.0'; moonInclination.rotation.x = 0; - timeDays = 0; // Vollmond: Erde zwischen Sonne und Mond + timeDays = moonPhaseTimeDays('full'); // exakt Vollmond: Erde genau zwischen Sonne und Mond paused = true; pauseBtn.textContent = '▶'; clearTrail(); @@ -2140,6 +2192,22 @@ function applyCameraMode(mode) { if (mode === 'top') { camera.position.set(...SCALE.camTop); controls.target.set(0, 0, 0); + } else if (mode === 'earth-top') { + // Draufsicht auf die Erde (über dem Nordpol) — für Polartag/Polarnacht: + // man sieht, dass der Polbereich bei einer ganzen Erddrehung nie in den + // Schatten (Polartag) bzw. nie ins Licht (Polarnacht) gerät. + earthPivot.getWorldPosition(_earthPos); + const dTop = EARTH_RADIUS * 4.2; + camera.position.set(_earthPos.x, _earthPos.y + dTop, _earthPos.z + 0.001); + controls.target.copy(_earthPos); + } else if (mode === 'earth-side') { + // Nahe Seitenansicht der Erde, quer zur Sonnenrichtung — zeigt, wie STEIL + // oder FLACH die Sonnenstrahlen auf die Halbkugeln treffen und wo die + // Tag-Nacht-Grenze verläuft (Äquinoktium: senkrecht durch beide Pole). + earthPivot.getWorldPosition(_earthPos); + const dES = EARTH_RADIUS * 4; + camera.position.set(_earthPos.x, EARTH_RADIUS * 0.35, _earthPos.z + dES); + controls.target.copy(_earthPos); } else if (mode === 'side') { camera.position.set(...SCALE.camSide); controls.target.set(0, 0, 0); @@ -2583,6 +2651,19 @@ const EPOCH = new Date(CURRENT_YEAR, 0, 1); const MOON_REF_FULLMOON = new Date(2026, 0, 3); const MOON_EPOCH_OFFSET_DAYS = (EPOCH - MOON_REF_FULLMOON) / 86400000; +// Liefert den timeDays-Wert für exakten Neumond ('new') bzw. Vollmond ('full') +// nahe der Referenz `near` (Default: aktueller timeDays). Nutzt die SYNODISCHE +// Phasen-Formel (moonOrbit.rotation.y: 0=Vollmond, π=Neumond), damit Finsternis- +// Szenen und der Mondphasen-Start die ECHTE Konstellation treffen. (Bugfix: die +// Finsternis-Buttons setzten den Mond vorher über den siderischen Monat → schief.) +function moonPhaseTimeDays(phase, near) { + const base = (typeof near === 'number') ? near : timeDays; + const targetFrac = (phase === 'new') ? 0.5 : 0.0; // rotation.y-Anteil + const raw = targetFrac * MOON_SYNODIC_DAYS - MOON_EPOCH_OFFSET_DAYS; + const k = Math.round((base - raw) / MOON_SYNODIC_DAYS); + return raw + k * MOON_SYNODIC_DAYS; +} + function dayToDate(day) { const d = new Date(EPOCH.getTime() + day * 86400000); return d; @@ -3198,6 +3279,8 @@ document.getElementById('photon-toggle').addEventListener('change', (e) => { photonLineEarth.visible = false; photonLineMoon.visible = false; photonLabel.style.display = 'none'; + var _psOff = document.getElementById('photon-scale'); + if (_psOff) _psOff.style.display = 'none'; } }); @@ -3231,6 +3314,8 @@ function updatePhoton() { photonToEarth.visible = false; photonToMoon.visible = false; photonLabel.style.display = 'none'; + const _psFast = document.getElementById('photon-scale'); + if (_psFast) _psFast.style.display = 'none'; photonLineEarth.visible = true; photonLineMoon.visible = true; photonLineEarth.geometry.setFromPoints([ @@ -3253,10 +3338,18 @@ function updatePhoton() { const totalToEarth = PHOTON_TRAVEL_DAYS_AT_1X; const progress = Math.min(elapsed / totalToEarth, 1); - // Photon zur Erde — pulsiert im ersten Viertel des Fluges (progress < 0.25) + // 8-Segment-Skala unten aktualisieren (1 Segment = 1 Minute Lichtlaufzeit). + const _ps = document.getElementById('photon-scale'); + if (_ps) { + _ps.style.display = 'block'; + const _pf = document.getElementById('ph-fill'); + if (_pf) _pf.style.width = (progress * 100).toFixed(1) + '%'; + } + + // Photon zur Erde — pulsiert die GANZE Strecke, damit es sichtbar bleibt. photonToEarth.visible = true; photonToEarth.position.lerpVectors(new THREE.Vector3(0,0,0), _photonEarthPos, progress); - if (progress < 0.25) { + if (progress < 1) { const t = (Date.now() % 600) / 600; const pulse = 1.0 + 0.7 * Math.sin(t * Math.PI * 2); photonToEarth.scale.setScalar(pulse); @@ -3541,6 +3634,7 @@ function obsApplyState(s) { if (s.camera) { const btn = document.querySelector('[data-cam="' + s.camera + '"]'); if (btn) btn.click(); + else if (typeof applyCameraMode === 'function') applyCameraMode(s.camera); } // Date NUR setzen wenn keine Eclipse-Scene aktiv ist (sonst würde // das Eclipse-Datum überschrieben → keine echte Konstellation mehr). @@ -3563,6 +3657,12 @@ function obsApplyState(s) { timeDays = (target - EPOCH) / 86400000; if (typeof clearTrail === 'function') clearTrail(); } + // Mondphase am Start erzwingen (Mondphasen-Aufgabe beginnt bei Neumond, + // passend zur Reihenfolge Neumond→zunehmend→Vollmond→abnehmend). + if (s.moonPhaseStart === 'new' || s.moonPhaseStart === 'full') { + timeDays = moonPhaseTimeDays(s.moonPhaseStart, timeDays); + if (typeof clearTrail === 'function') clearTrail(); + } if (typeof s.speed === 'number') { speedSlider.value = s.speed; applySpeedFromSlider(); @@ -3935,6 +4035,18 @@ function obsOpen() { document.getElementById('obs-open-btn').addEventListener('click', obsOpen); document.getElementById('obs-close').addEventListener('click', obsClose); document.getElementById('obs-close-end').addEventListener('click', obsClose); + +// 📖 Anleitung-Overlay (erklärt das Bedienfeld Schritt für Schritt) +(function(){ + var anl = document.getElementById('sn-anleitung'); + function openAnl(){ if (anl) anl.hidden = false; } + function closeAnl(){ if (anl) anl.hidden = true; } + ['obs-anleitung','obs-anleitung-2'].forEach(function(id){ + var b = document.getElementById(id); if (b) b.addEventListener('click', openAnl); + }); + var c = document.getElementById('snAnlClose'); if (c) c.addEventListener('click', closeAnl); + if (anl) anl.addEventListener('click', function(e){ if (e.target === anl) closeAnl(); }); +})(); document.getElementById('obs-start').addEventListener('click', obsStartSequence); document.getElementById('obs-replay').addEventListener('click', () => { const t = obsState.tasks[obsState.index];