geograsim/App/sims/vulkan/task-overlay.js

/**
 * Vulkan Task-Overlay — Lade tasks.json, zeige Onboarding + Aufgabenpanel
 * über der Three.js-Sim. Kein Eingriff in die Sim-Logik, nur DOM-Layer.
 *
 * Glossar-Tooltips: Begriffe mit data-glossar Tag werden klickbar zum Glossar.
 */
(function(){
  'use strict';
  var BASE = (window.VULKAN_BASE || '/geograsim/App/sims/vulkan/');
  var TASKS = null;
  var currentIdx = 0;
  var done = [];

  var css = `
  #vulk-overlay { position: fixed; inset: 0; background: rgba(20, 12, 28, 0.85); backdrop-filter: blur(8px); z-index: 9000; display: none; align-items: center; justify-content: center; padding: 20px; font-family: 'Outfit', system-ui, sans-serif; }
  #vulk-overlay.show { display: flex; }
  #vulk-modal { background: linear-gradient(145deg, #1f1530, #2d1f3e); color: #f5e9d3; border-radius: 16px; padding: 28px 32px; max-width: 580px; width: 100%; max-height: 86vh; overflow-y: auto; border: 1px solid rgba(255, 140, 66, 0.3); box-shadow: 0 16px 48px rgba(0,0,0,0.5); }
  #vulk-modal h2 { font-family: 'Russo One', sans-serif; color: #ff8c42; font-size: 22px; margin-bottom: 16px; }
  #vulk-modal h3 { color: #ffaa55; font-size: 16px; margin: 14px 0 8px; }
  #vulk-modal p, #vulk-modal li { font-size: 14px; line-height: 1.55; margin-bottom: 6px; }
  #vulk-modal ul { padding-left: 20px; margin-bottom: 10px; }
  #vulk-modal .params { background: rgba(0,0,0,0.3); padding: 12px 16px; border-radius: 8px; margin: 12px 0; font-size: 13px; }
  #vulk-modal .params b { color: #ffeb3b; }
  #vulk-modal .szenario { background: rgba(255,140,66,0.08); border-left: 3px solid #ffaa55; padding: 12px 16px; border-radius: 4px; margin-bottom: 14px; font-style: italic; line-height: 1.6; color: #ffd9b3; }
  #vulk-modal h3 { font-family: 'Russo One', sans-serif; }
  #vulk-modal .expect { background: rgba(102, 187, 106, 0.15); padding: 10px 14px; border-left: 3px solid #66bb6a; border-radius: 4px; margin: 10px 0; font-size: 13px; }
  #vulk-modal .didaktik { background: rgba(255, 140, 66, 0.12); padding: 10px 14px; border-left: 3px solid #ff8c42; border-radius: 4px; margin: 10px 0; font-size: 13px; color: #ffd9b3; }
  #vulk-modal button.next { background: linear-gradient(135deg, #ff8c42, #cc4400); color: #fff; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 15px; margin-top: 12px; }
  #vulk-modal button.next:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,140,66,0.4); }
  #vulk-modal .quiz-q { background: rgba(255,255,255,0.05); padding: 14px; border-radius: 8px; margin-bottom: 12px; }
  #vulk-modal .quiz-q .q-text { font-weight: 700; margin-bottom: 8px; color: #ffd9b3; }
  #vulk-modal .quiz-q button.opt { display: block; width: 100%; text-align: left; background: rgba(255,255,255,0.08); color: #f5e9d3; border: 1px solid rgba(255,140,66,0.2); padding: 8px 12px; border-radius: 6px; margin-bottom: 5px; cursor: pointer; font-family: inherit; font-size: 13px; }
  #vulk-modal .quiz-q button.opt:hover { background: rgba(255,140,66,0.2); }
  #vulk-modal .quiz-q button.opt.correct { background: rgba(102, 187, 106, 0.3); border-color: #66bb6a; }
  #vulk-modal .quiz-q button.opt.wrong { background: rgba(255, 87, 87, 0.3); border-color: #ff5757; }

  #vulk-tasklist { position: fixed; top: 10px; right: 10px; width: 280px; background: linear-gradient(145deg, rgba(20,12,28,0.92), rgba(12,8,18,0.95)); backdrop-filter: blur(14px); border: 1px solid rgba(255,140,66,0.25); border-radius: 12px; padding: 10px 14px; font-family: 'Outfit', system-ui, sans-serif; color: #f5e9d3; font-size: 13px; z-index: 100; box-shadow: 0 6px 20px rgba(0,0,0,0.35); display: none; }
  #vulk-tasklist.show { display: block; }
  #vulk-tasklist .hdr { display: flex; justify-content: space-between; align-items: center; font-family: 'Russo One', sans-serif; color: #ff8c42; font-size: 13px; margin-bottom: 6px; }
  #vulk-tasklist .progress { background: rgba(0,0,0,0.4); height: 4px; border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
  #vulk-tasklist .progress-fill { height: 100%; background: linear-gradient(90deg, #ff8c42, #ffeb3b); width: 0%; transition: width 0.4s ease; }
  #vulk-tasklist .task-current { font-weight: 700; color: #ffaa55; line-height: 1.4; margin-bottom: 8px; font-size: 13px; }
  #vulk-tasklist button.show-task { background: rgba(255,140,66,0.2); color: #ffd9b3; border: 1px solid rgba(255,140,66,0.4); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 11px; }
  #vulk-tasklist button.show-task:hover { background: rgba(255,140,66,0.35); }
  `;
  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('vulk-overlay') || (function(){ var o = el('div'); o.id = 'vulk-overlay'; document.body.appendChild(o); return o; })();
    overlay.innerHTML = '';
    var modal = el('div', null); modal.id = 'vulk-modal';
    modal.appendChild(el('h2', null, title));
    var bodyDiv = el('div', null, body);
    modal.appendChild(bodyDiv);
    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 = '';
    // Szenario (historischer Hintergrund)
    if (t.scenario) body += '<div class="szenario">📜 ' + t.scenario + '</div>';
    // Messdaten — was die Sensoren liefern
    if (t.messdaten) {
      body += '<h3>🔬 Messdaten der Sensoren</h3><div class="params">';
      for (var k in t.messdaten) body += '<b>' + k + ':</b> ' + t.messdaten[k] + '<br>';
      body += '</div>';
    }
    // Diagnose — wie soll der Spieler die Sliders einstellen
    if (t.diagnose_soll) {
      body += '<h3>🎚 Stelle die Sliders so ein</h3><div class="params">';
      for (var k2 in t.diagnose_soll) body += '<b>' + k2 + ':</b> ' + t.diagnose_soll[k2] + '<br>';
      body += '</div>';
    }
    // Erwartung
    if (t.vorhersage_soll) body += '<div class="expect"><b>🔮 Erwartete Eruption:</b> ' + t.vorhersage_soll + '</div>';
    // Maßnahmen-Quiz
    if (t.massnahme_frage && t.massnahme_optionen) {
      body += '<h3>🚨 ' + t.massnahme_frage + '</h3>';
      body += '<div class="quiz-q" data-q="0">';
      t.massnahme_optionen.forEach(function(opt, ai) {
        body += '<button class="opt" data-q="0" data-a="' + ai + '">' + opt + '</button>';
      });
      body += '</div>';
    }
    // Auswertung (zunaechst versteckt, wird beim Klick eingeblendet)
    if (t.auswertung) {
      body += '<div id="vulk-auswertung" style="display:none"><h3>📊 Was wirklich passierte</h3><div class="expect">' + t.auswertung + '</div></div>';
    }
    // Didaktik
    if (t.didaktik) body += '<div class="didaktik">💡 ' + t.didaktik + '</div>';
    showModal(t.title, body, 'Mission starten — los!', function() {
      currentIdx = idx;
      updateTaskList();
    });
    // Quiz-Click-Handler (Auswertung einblenden bei Wahl)
    setTimeout(function() {
      document.querySelectorAll('#vulk-modal .opt').forEach(function(btn) {
        btn.onclick = function(e) {
          e.stopPropagation();
          var ai = +btn.dataset.a;
          var correct = t.massnahme_correct;
          document.querySelectorAll('#vulk-modal .opt').forEach(function(b, i) {
            if (i === correct) b.classList.add('correct');
            else if (i === ai) b.classList.add('wrong');
            b.disabled = true;
          });
          // Punkte fuer richtige Antwort
          if (ai === correct) done[idx] = (done[idx] || 0) + 1;
          // Auswertung einblenden
          var ausw = document.getElementById('vulk-auswertung');
          if (ausw) ausw.style.display = 'block';
        };
      });
    }, 50);
  }

  function nextTask() {
    if (!TASKS) return;
    if (currentIdx < TASKS.tasks.length - 1) {
      currentIdx++;
      showTask(currentIdx);
    } else {
      endGame();
    }
  }

  function endGame() {
    if (!TASKS) return;
    showModal(TASKS.ende.title, TASKS.ende.body, '✓ Fertig', function() {
      document.getElementById('vulk-tasklist').classList.remove('show');
    });
  }

  function updateTaskList() {
    var list = document.getElementById('vulk-tasklist');
    if (!list) {
      list = el('div'); list.id = 'vulk-tasklist'; document.body.appendChild(list);
    }
    var t = TASKS.tasks[currentIdx];
    var pct = ((currentIdx + 1) / TASKS.tasks.length) * 100;
    list.innerHTML =
      '<div class="hdr"><span>📋 Aufgabe ' + (currentIdx + 1) + '/' + TASKS.tasks.length + '</span>' +
      '<button class="show-task" id="vulk-next">Weiter →</button></div>' +
      '<div class="progress"><div class="progress-fill" style="width:' + pct + '%"></div></div>' +
      '<div class="task-current">' + (t.title || '').replace(/^Aufgabe \d+ — /, '') + '</div>' +
      '<button class="show-task" id="vulk-show">Aufgabe ansehen</button>';
    list.classList.add('show');
    document.getElementById('vulk-next').onclick = nextTask;
    document.getElementById('vulk-show').onclick = function() { showTask(currentIdx); };
  }

  function startOnboarding() {
    if (!TASKS || !TASKS.onboarding) return;
    showModal(TASKS.onboarding.title, TASKS.onboarding.body, '🚀 Los geht\'s', function() {
      currentIdx = 0;
      showTask(0);
    });
  }

  // Init
  fetch(BASE + 'tasks.json').then(function(r){ return r.json(); }).then(function(j) {
    TASKS = j;
    setTimeout(startOnboarding, 800);
  }).catch(function(e){ console.warn('[vulkan-tasks] load failed', e); });
})();