Add beginner guidance to NetWorker

2026-07-13 22:52:00 +02:00
parent 010a294151
commit 27c409bfb3
3 changed files with 55 additions and 1 deletions
@@ -0,0 +1,53 @@
+(function () {
+  'use strict';
+
+  const view = document.getElementById('nwView');
+  if (!view) return;
+
+  const glossary = `<details><summary>MINI-LEXIKON ÖFFNEN</summary><dl><dt>IP-Adresse</dt><dd>Die Hausnummer eines Geräts im Netzwerk.</dd><dt>Präfix /24</dt><dd>Die ersten drei Zahlenblöcke gehören zum Netz. Bei <code>192.168.10.x/24</code> sind die üblichen Hostadressen <code>.1</code> bis <code>.254</code>.</dd><dt>Gateway</dt><dd>Die Tür aus dem eigenen Netz in ein anderes Netz – meistens die Router-Adresse.</dd><dt>Ping</dt><dd>Ein kurzer Erreichbarkeitstest: Kommt ein Paket vom Startgerät am Ziel an?</dd></dl></details>`;
+
+  function guide(title, body) {
+    const box = document.createElement('aside');
+    box.className = 'nw-guide';
+    box.setAttribute('aria-label', 'NetWorker Lernhilfe');
+    box.innerHTML = `<span class="nw-kicker">WAS MACHE ICH JETZT?</span><h2>${title}</h2>${body}${glossary}`;
+    return box;
+  }
+
+  function renderGuide() {
+    if (view.querySelector('.nw-guide')) return;
+    const hero = view.querySelector('.nw-hero');
+    const briefing = view.querySelector('.nw-brief');
+    const levelHead = view.querySelector('.nw-level-head');
+
+    if (hero) {
+      hero.after(guide('Starte ganz links: Welt 1.', `<p>Du musst kein Netzwerk-Profi sein. Jede Aufgabe zeigt dir nur die Werte, die du ändern darfst. Lies den Netzplan von links nach rechts und teste danach den Paketweg.</p><ol><li><strong>Welt 1:</strong> Geräte im selben Netz verbinden.</li><li><strong>Welt 2:</strong> den Router als Ausgang benutzen.</li><li><strong>Welt 3:</strong> den Weg über zwei Router eintragen.</li></ol><p><strong>Tipp:</strong> Beginne mit „Ein Netz für alle“. Eine falsche Eingabe kann nichts kaputt machen; nach dem Test erklärt die Diagnose, wo das Paket stehen bleibt.</p>`));
+      return;
+    }
+
+    if (briefing) {
+      briefing.querySelector('.nw-rules')?.before(guide('So läuft eine Welt ab.', `<ol><li>Klicke auf <strong>Kalibrierung starten</strong>.</li><li>Ändere nur die Felder im rechten Konfigurationsbereich.</li><li>Klicke auf <strong>Pings testen</strong> und lies die Rückmeldung unter „Ping-Ziele“.</li></ol><p>Du hast pro Level drei Versuche. „Lösung anzeigen“ zeigt den korrekten Plan und bringt dich weiter – ideal, wenn du danach verstehen willst, warum er funktioniert.</p>`));
+      return;
+    }
+
+    if (!levelHead) return;
+    const type = levelHead.querySelector('.nw-kicker')?.textContent || '';
+    let title = 'Erst prüfen, dann ändern.';
+    let body = `<p>Rechts stehen nur die Werte, die in diesem Level verändert werden dürfen. Klicke danach auf <strong>Pings testen</strong>. Die Diagnose sagt dir konkret, was der Paketweg noch blockiert.</p>`;
+
+    if (type.includes('ASSIGN')) {
+      title = 'Geräte in dasselbe Netz bringen.';
+      body = `<p>Vergleiche die IP-Adresse und das Präfix des PCs mit dem Zielgerät. Bei <code>192.168.10.20/24</code> braucht der PC ebenfalls <code>192.168.10</code> am Anfang und das Präfix <code>24</code> – nur die letzte Zahl muss frei und zwischen <code>1</code> und <code>254</code> sein.</p><p><strong>Beispiel:</strong> Zum Server <code>192.168.10.20/24</code> passt etwa <code>192.168.10.10/24</code>.</p>`;
+    } else if (type.includes('FIX')) {
+      title = 'Einen fehlerhaften Wert reparieren.';
+      body = `<p>Ändere nur das Feld rechts, das bearbeitbar ist. Achte auf zwei typische Fallen: Eine Adresse darf im gleichen Netz nicht doppelt vorkommen und bei <code>/24</code> sind <code>.0</code> (Netzadresse) sowie <code>.255</code> (Broadcast) keine Geräteadressen.</p><p>Danach testen – die Diagnose verrät dir, ob der Fehler schon behoben ist.</p>`;
+    } else if (type.includes('ROUTE')) {
+      title = 'Dem Router den Weg zum Ziel zeigen.';
+      body = `<p>PC und Server liegen in verschiedenen Netzen. Der erste Router braucht deshalb eine Route zum <strong>Zielnetz</strong> des Servers und muss sie an den <strong>nächsten Router</strong> weitergeben. Nimm beim Zielnetz die ersten drei Blöcke der Server-IP und ergänze bei <code>/24</code> eine <code>.0</code>.</p><p><strong>Beispiel:</strong> Für <code>10.10.2.20/24</code> lautet das Zielnetz <code>10.10.2.0/24</code>.</p>`;
+    }
+    levelHead.after(guide(title, body));
+  }
+
+  new MutationObserver(renderGuide).observe(view, {childList: true});
+  renderGuide();
+})();