Adminator
1e51ef7def
- Konzept/, didaktik_geografie/, didaktik_simulation/, v2-modules/, v2-platform/ - 12 code-workspace-Files - STATUS-*.md - viele M/D/R-Änderungen an bereits getrackten Files - .gitignore verstärkt: **/.humaninput/, **/secret_keys.txt Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
127 lines
7.2 KiB
JavaScript
127 lines
7.2 KiB
JavaScript
/**
|
|
* Wal Task-Overlay — Mission-System fuer Wal-Sim.
|
|
*/
|
|
(function(){
|
|
'use strict';
|
|
var BASE = (window.WAL_BASE || '/geograsim/App/sims/wal/');
|
|
var TASKS = null;
|
|
var currentIdx = 0;
|
|
|
|
var css = `
|
|
#wal-overlay { position: fixed; inset: 0; background: rgba(26, 38, 32, 0.88); backdrop-filter: blur(8px); z-index: 9000; display: none; align-items: center; justify-content: center; padding: 20px; font-family: 'Hanken Grotesk', system-ui, sans-serif; }
|
|
#wal-overlay.show { display: flex; }
|
|
#wal-modal { background: linear-gradient(145deg, #e8ddc5, #f4ede0); color: #1a2620; border-radius: 16px; padding: 28px 32px; max-width: 580px; width: 100%; max-height: 86vh; overflow-y: auto; border: 2px solid #2d4a3e; box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
|
|
#wal-modal h2 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; color: #2d4a3e; font-size: 22px; margin-bottom: 14px; font-weight: 800; }
|
|
#wal-modal h3 { color: #4a6f5e; font-size: 16px; margin: 14px 0 8px; }
|
|
#wal-modal p, #wal-modal li { font-size: 14px; line-height: 1.6; margin-bottom: 6px; }
|
|
#wal-modal ul { padding-left: 22px; margin-bottom: 10px; }
|
|
#wal-modal .expect { background: rgba(74, 124, 74, 0.15); padding: 10px 14px; border-left: 3px solid #4a7c4a; border-radius: 4px; margin: 10px 0; font-size: 13px; }
|
|
#wal-modal .didaktik { background: rgba(184, 104, 64, 0.12); padding: 10px 14px; border-left: 3px solid #b86840; border-radius: 4px; margin: 10px 0; font-size: 13px; color: #4a3520; }
|
|
#wal-modal button.next { background: linear-gradient(135deg, #2d4a3e, #1f3329); color: #f4ede0; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 15px; margin-top: 12px; }
|
|
#wal-modal button.next:hover { background: linear-gradient(135deg, #1f3329, #1a2620); }
|
|
#wal-modal .quiz-q { background: rgba(255,255,255,0.6); padding: 14px; border-radius: 8px; margin-bottom: 12px; }
|
|
#wal-modal .quiz-q .q-text { font-weight: 700; margin-bottom: 8px; color: #2d4a3e; }
|
|
#wal-modal .quiz-q button.opt { display: block; width: 100%; text-align: left; background: #fff; color: #1a2620; border: 1px solid #b8a987; padding: 8px 12px; border-radius: 6px; margin-bottom: 5px; cursor: pointer; font-family: inherit; font-size: 13px; }
|
|
#wal-modal .quiz-q button.opt:hover { background: #f4ede0; border-color: #2d4a3e; }
|
|
#wal-modal .quiz-q button.opt.correct { background: rgba(74, 124, 74, 0.2); border-color: #4a7c4a; }
|
|
#wal-modal .quiz-q button.opt.wrong { background: rgba(160, 64, 48, 0.2); border-color: #a04030; }
|
|
|
|
#wal-tasklist { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(26, 38, 32, 0.92); backdrop-filter: blur(14px); border: 1px solid #4a6f5e; border-radius: 10px; padding: 8px 14px; color: #f4ede0; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 13px; z-index: 100; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
|
|
#wal-tasklist.show { display: flex; gap: 14px; align-items: center; }
|
|
#wal-tasklist .lbl { font-weight: 700; color: #c9b794; }
|
|
#wal-tasklist button { background: #2d4a3e; color: #f4ede0; border: 1px solid #4a6f5e; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 11px; }
|
|
#wal-tasklist button:hover { background: #4a6f5e; }
|
|
`;
|
|
var s = document.createElement('style'); s.textContent = css; document.head.appendChild(s);
|
|
|
|
function el(tag, cls, html) { var e = document.createElement(tag); if (cls) e.className = cls; if (html != null) e.innerHTML = html; return e; }
|
|
|
|
function showModal(title, body, btnLabel, btnFn) {
|
|
var overlay = document.getElementById('wal-overlay') || (function(){ var o = el('div'); o.id = 'wal-overlay'; document.body.appendChild(o); return o; })();
|
|
overlay.innerHTML = '';
|
|
var modal = el('div'); modal.id = 'wal-modal';
|
|
modal.appendChild(el('h2', null, title));
|
|
modal.appendChild(el('div', null, body));
|
|
var btn = el('button', 'next', btnLabel);
|
|
btn.onclick = function() { overlay.classList.remove('show'); if (btnFn) btnFn(); };
|
|
modal.appendChild(btn);
|
|
overlay.appendChild(modal);
|
|
overlay.classList.add('show');
|
|
}
|
|
|
|
function showTask(idx) {
|
|
if (!TASKS || !TASKS.tasks[idx]) return endGame();
|
|
var t = TASKS.tasks[idx];
|
|
var body = '';
|
|
// Mode-Switch bei Bedarf (krill vs. fracht)
|
|
if (t.mode && window.setMode) window.setMode(t.mode);
|
|
if (t.mode) body += '<div style="background:rgba(74,124,74,0.15);padding:8px 12px;border-radius:6px;margin-bottom:10px;font-size:12px"><b>Modus:</b> ' + (t.mode === 'krill' ? '🦐 Nahrungssuche' : '🚢 Frachtroute') + '</div>';
|
|
if (t.goal) body += '<p><b>Ziel:</b> ' + t.goal + '</p>';
|
|
if (t.expect) body += '<div class="expect">' + t.expect + '</div>';
|
|
if (t.quiz) {
|
|
body += '<h3>Quiz</h3>';
|
|
t.quiz.forEach(function(q, qi) {
|
|
body += '<div class="quiz-q" data-q="' + qi + '"><div class="q-text">' + q.q + '</div>';
|
|
q.a.forEach(function(opt, ai) { body += '<button class="opt" data-q="' + qi + '" data-a="' + ai + '">' + opt + '</button>'; });
|
|
body += '</div>';
|
|
});
|
|
}
|
|
if (t.didaktik) body += '<div class="didaktik">💡 ' + t.didaktik + '</div>';
|
|
showModal(t.title, body, 'Verstanden — los!', function() {
|
|
currentIdx = idx;
|
|
updateTaskList();
|
|
});
|
|
setTimeout(function() {
|
|
document.querySelectorAll('#wal-modal .opt').forEach(function(btn) {
|
|
btn.onclick = function(e) {
|
|
e.stopPropagation();
|
|
var qi = +btn.dataset.q, ai = +btn.dataset.a;
|
|
var correct = t.quiz[qi].correct;
|
|
document.querySelectorAll('#wal-modal .quiz-q[data-q="' + qi + '"] .opt').forEach(function(b, i) {
|
|
if (i === correct) b.classList.add('correct');
|
|
else if (i === ai) b.classList.add('wrong');
|
|
b.disabled = true;
|
|
});
|
|
};
|
|
});
|
|
}, 50);
|
|
}
|
|
|
|
function nextTask() {
|
|
if (currentIdx < TASKS.tasks.length - 1) { currentIdx++; showTask(currentIdx); }
|
|
else endGame();
|
|
}
|
|
|
|
function endGame() {
|
|
showModal(TASKS.ende.title, TASKS.ende.body, '✓ Fertig', function() {
|
|
document.getElementById('wal-tasklist').classList.remove('show');
|
|
});
|
|
}
|
|
|
|
function updateTaskList() {
|
|
var list = document.getElementById('wal-tasklist') || (function(){ var l = el('div'); l.id = 'wal-tasklist'; document.body.appendChild(l); return l; })();
|
|
var t = TASKS.tasks[currentIdx];
|
|
list.innerHTML =
|
|
'<span class="lbl">🐋 ' + (currentIdx + 1) + '/' + TASKS.tasks.length + '</span>' +
|
|
'<span>' + (t.title || '').replace(/^Mission \d+ — /, '') + '</span>' +
|
|
'<button id="wal-show">ansehen</button>' +
|
|
'<button id="wal-next">weiter →</button>';
|
|
list.classList.add('show');
|
|
document.getElementById('wal-show').onclick = function() { showTask(currentIdx); };
|
|
document.getElementById('wal-next').onclick = nextTask;
|
|
}
|
|
|
|
function startOnboarding() {
|
|
if (!TASKS) return;
|
|
showModal(TASKS.onboarding.title, TASKS.onboarding.body, '🌊 Los geht\'s', function() {
|
|
currentIdx = 0;
|
|
showTask(0);
|
|
});
|
|
}
|
|
|
|
fetch(BASE + 'tasks.json').then(function(r){ return r.json(); }).then(function(j) {
|
|
TASKS = j;
|
|
setTimeout(startOnboarding, 800);
|
|
}).catch(function(e){ console.warn('[wal-tasks] load failed', e); });
|
|
})();
|