Einheitliche Sim-Kopfzeile (Entwurf B) als Komponente + Lizenz-Datenmodell

- ggs-header.css/.js: schwebende Pillen-Kopfzeile aus vorhandenem .ggs-header-Markup (Kreis-Logo/Titel/Level als eine Pille, eigene SVG-Icons, Tempo-Panel links + Zustandsbutton, Musik-Panel unten, 30% transparente Untermenues, Glossar target=_blank, Lehrplan raus). Enhance-Ansatz: Spiel-Logik (IDs/Klassen, data-speed) bleibt unberuehrt. - Eingebaut in Klima 2D/3D, Fluss, Logistik (Auto-Tempo), Energiemanager, Kofferdetektiv 3D. - admin-licenses.html: Datenmodell-Sektion (licenses-Tabelle, Lebenszyklus Generiert->Eingeloest->Zugewiesen, Beziehungen, Jahr->Schuljahr->Code). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-08-25 14:06:41 +02:00
parent 362aaba883
commit 502f271f36
9 changed files with 601 additions and 6 deletions
@@ -35,6 +35,33 @@
    .toolbar{display:flex;gap:.4rem;margin-bottom:.8rem;flex-wrap:wrap}
    .msg{font-size:.72rem;padding:.4rem .6rem;border-radius:6px;margin-top:.5rem}
    .msg.ok{background:#dceadd;color:#5a8a5e}
+    /* ---- Datenmodell-Sektion ---- */
+    .dm-lead{font-size:.74rem;color:#4a4a4a;line-height:1.55;margin-bottom:.6rem}
+    .dm-sub{font-size:.6rem;font-weight:800;color:#4a7c8a;text-transform:uppercase;letter-spacing:.05em;margin:1.2rem 0 .5rem}
+    .dm-note{font-size:.66rem;color:#8a6a2a;background:#fdf6e3;border:1px solid #efe0b8;border-radius:6px;padding:.45rem .6rem;margin-top:.5rem;line-height:1.5}
+    .dm-flow{display:flex;gap:.4rem;align-items:stretch;flex-wrap:wrap}
+    .dm-step{flex:1;min-width:190px;background:#f7f6f3;border-radius:8px;border-left:4px solid #c4a97a;padding:.65rem .75rem}
+    .dm-step.s-pool{border-left-color:#b8b2a6}
+    .dm-step.s-redeem{border-left-color:#4a7c8a}
+    .dm-step.s-assign{border-left-color:#5a8a5e}
+    .dm-step .s-top{display:flex;align-items:center;gap:.4rem;margin-bottom:.35rem}
+    .dm-step .s-n{width:18px;height:18px;border-radius:50%;background:#4a7c8a;color:#fff;font-size:.62rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
+    .dm-step.s-pool .s-n{background:#b8b2a6}
+    .dm-step.s-assign .s-n{background:#5a8a5e}
+    .dm-step .s-t{font-size:.74rem;font-weight:800;color:#2f3b3f}
+    .dm-step .s-who{font-size:.6rem;font-weight:700;color:#8a8a8a;text-transform:uppercase;letter-spacing:.03em}
+    .dm-step .s-d{font-size:.68rem;color:#4a4a4a;line-height:1.45;margin-top:.15rem}
+    .dm-step code{font-family:'Courier New',monospace;font-size:.66rem;background:rgba(0,0,0,.05);padding:.05rem .3rem;border-radius:4px;color:#c85c4a}
+    .dm-arrow{display:flex;align-items:center;justify-content:center;color:#c4a97a;font-size:1.4rem;font-weight:900;padding:0 .1rem}
+    .dm-er{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;font-size:.68rem}
+    .dm-ent{background:#fff;border:1.5px solid #4a7c8a;color:#4a7c8a;border-radius:6px;padding:.3rem .55rem;font-weight:800;font-family:'Courier New',monospace}
+    .dm-ent.e-lic{background:#4a7c8a;color:#fff}
+    .dm-rel{color:#8a8a8a;display:flex;flex-direction:column;align-items:center;line-height:1;font-family:'Courier New',monospace;font-size:.58rem}
+    .dm-rel b{color:#c4a97a;font-size:1.1rem}
+    .dm-derive{background:#f7f6f3;border-radius:8px;padding:.7rem .8rem;font-size:.7rem;line-height:1.7}
+    .dm-derive .d-code{font-family:'Courier New',monospace;font-weight:800;color:#4a7c8a;letter-spacing:.04em}
+    .dm-derive .d-hi{background:#e8c547;color:#4a4a4a;padding:.02rem .28rem;border-radius:4px;font-weight:800}
+    td.mono{font-family:'Courier New',monospace;font-size:.68rem;color:#c85c4a}
  </style>
 </head>
 <body>
@@ -104,6 +131,73 @@
      <button class="btn btn-outline" id="btn-next" onclick="nextPage()">Weiter →</button>
    </div>
  </div>
+
+  <!-- ============ Datenmodell-Referenz ============ -->
+  <div class="card">
+    <div class="card-h">📐 Datenmodell — Lizenznummern</div>
+    <p class="dm-lead">Eine Lizenz = <b>ein Sitzplatz für eine:n Schüler:in in einem Schuljahr</b>. Der Admin erzeugt einen Vorrat an Codes, eine Lehrperson <b>löst</b> Codes ein (sie werden ihrem Konto zugeordnet) und <b>weist</b> sie dann einzelnen Schüler:innen zu. Alles steht in <b>einer</b> Tabelle <span class="code">licenses</span> — die drei Zustände ergeben sich allein aus zwei Feldern: <span class="code">teacher_id</span> und <span class="code">student_id</span>.</p>
+
+    <div class="dm-sub">Tabelle „licenses"</div>
+    <table>
+      <tr><th>Spalte</th><th>Typ</th><th>Bedeutung</th></tr>
+      <tr><td class="mono">id</td><td>INT · PK</td><td>Interne ID</td></tr>
+      <tr><td class="mono">code</td><td>VARCHAR · UNIQUE</td><td>Der Lizenzcode, Format <span class="code">XXXX-XXXX-XXXX-JAHR</span></td></tr>
+      <tr><td class="mono">school_year</td><td>VARCHAR</td><td>Schuljahr, z.&nbsp;B. „26/27" — aus dem Jahr abgeleitet</td></tr>
+      <tr><td class="mono">teacher_id</td><td>FK → teachers</td><td>Einlösende Lehrperson · <b>NULL = noch im Pool</b></td></tr>
+      <tr><td class="mono">student_id</td><td>FK → students</td><td>Platz-Inhaber:in · <b>NULL = noch frei</b></td></tr>
+      <tr><td class="mono">redeemed_at</td><td>TIMESTAMP · NULL</td><td>Zeitpunkt des Einlösens durch die Lehrperson</td></tr>
+      <tr><td class="mono">created_at</td><td>TIMESTAMP</td><td>Erstellung (Admin-Generierung)</td></tr>
+    </table>
+
+    <div class="dm-sub">Lebenszyklus &amp; Einlösen</div>
+    <div class="dm-flow">
+      <div class="dm-step s-pool">
+        <div class="s-top"><span class="s-n">1</span><span class="s-t">Generiert</span></div>
+        <div class="s-who">Admin</div>
+        <div class="s-d"><code>teacher_id</code> = NULL · <code>student_id</code> = NULL. Frisch erzeugter Code im Pool.<br>Aktion: <code>generate</code></div>
+      </div>
+      <div class="dm-arrow">→</div>
+      <div class="dm-step s-redeem">
+        <div class="s-top"><span class="s-n">2</span><span class="s-t">Eingelöst</span></div>
+        <div class="s-who">Lehrperson</div>
+        <div class="s-d"><code>teacher_id</code> gesetzt · <code>redeemed_at</code> = jetzt · <code>student_id</code> noch NULL. Code gehört nun der Lehrperson.<br>Aktion: <code>redeem</code> / <code>redeem_batch</code></div>
+      </div>
+      <div class="dm-arrow">→</div>
+      <div class="dm-step s-assign">
+        <div class="s-top"><span class="s-n">3</span><span class="s-t">Zugewiesen</span></div>
+        <div class="s-who">Lehrperson</div>
+        <div class="s-d"><code>student_id</code> gesetzt. Der Platz ist von einer konkreten Person belegt.<br>Aktion: <code>assign</code> / <code>auto_assign</code></div>
+      </div>
+    </div>
+    <div class="dm-note">⚠️ In der Statistik oben zählt <b>„Frei"</b> = <span class="code">student_id IS NULL</span> — also auch schon <b>eingelöste</b>, aber noch nicht zugewiesene Codes. <b>„Zugewiesen"</b> = <span class="code">student_id</span> gesetzt. Ob ein freier Code schon einer Lehrperson gehört, sieht man an <span class="code">teacher_id</span> / <span class="code">redeemed_at</span>.</div>
+
+    <div class="dm-sub">Beziehungen</div>
+    <div class="dm-er" style="margin-bottom:.5rem">
+      <span class="dm-ent e-lic">licenses</span>
+      <span class="dm-rel"><b>→</b>teacher_id</span>
+      <span class="dm-ent">teachers</span>
+    </div>
+    <div class="dm-er">
+      <span class="dm-ent e-lic">licenses</span>
+      <span class="dm-rel"><b>→</b>student_id</span>
+      <span class="dm-ent">students</span>
+      <span class="dm-rel"><b>→</b>class_id</span>
+      <span class="dm-ent">classes</span>
+      <span class="dm-rel"><b>→</b>teacher_id</span>
+      <span class="dm-ent">teachers</span>
+    </div>
+    <p class="dm-lead" style="margin-top:.5rem"><span class="code">licenses.teacher_id</span> merkt sich die <b>einlösende</b> Lehrperson, <span class="code">licenses.student_id</span> den <b>Platz-Inhaber</b>. Über <span class="code">students.class_id → classes.teacher_id</span> hängt jede:r Schüler:in ohnehin an einer Klasse einer Lehrperson — der direkte <span class="code">teacher_id</span>-Eintrag macht aber auch <b>eingelöste, noch nicht zugewiesene</b> Codes eindeutig einer Lehrperson zuordenbar.</p>
+
+    <div class="dm-sub">Jahr → Schuljahr → Code</div>
+    <div class="dm-derive">
+      Eingabe beim Generieren: <b>Jahr</b> = <span class="d-code">2026</span> (Kalenderjahr, in dem das Schuljahr <b>beginnt</b>).<br>
+      → <b>school_year</b> = „letzte 2 Ziffern" &nbsp;<span class="d-code">26</span>&nbsp; / &nbsp;<span class="d-code">26+1</span>&nbsp; = <span class="d-hi">26/27</span><br>
+      → <b>Code-Suffix</b> = das volle Jahr: <span class="d-code">-2026</span><br>
+      → <b>Zeichen-Alphabet</b> (ohne Verwechsler): <span class="code">A–Z ohne I,O</span> + <span class="code">2–9</span> (kein 0, kein 1)<br>
+      → 3 Blöcke à 4 Zeichen + Jahr &nbsp;⟶&nbsp; Beispiel: <span class="d-code">K7QF-3M9P-RT2W-2026</span> &nbsp;·&nbsp; Schuljahr <span class="d-hi">26/27</span>
+    </div>
+    <div class="dm-note" style="background:#eef4f6;border-color:#cfe0e6;color:#3a5b64">Das <b>Jahr</b> steckt fest im Code (Suffix) und bestimmt <b>school_year</b>. Für ein neues Schuljahr wird ein neuer Vorrat generiert; Filter/Export laufen über <span class="code">school_year</span>.</div>
+  </div>
 </div>

 <script>