patrick/SLC_Game
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

.

Browse source
This commit is contained in:
breitenbach76 2026-06-06 16:45:43 +02:00
parent 917bf1d613
commit 45e4a2ea74
1 changed files with 58 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

109
04_Tablet-Quiz/app/index.html
View file

@ -116,6 +116,23 @@
.pfad { border:1px solid var(--line); border-left:4px solid var(--transition); border-radius:8px; padding:10px 12px; } .pfad { border:1px solid var(--line); border-left:4px solid var(--transition); border-radius:8px; padding:10px 12px; }
.pfad b { display:block; } .pfad b { display:block; }
/* ---- Minimal Run-Screens ---- */
.sHead{display:flex;align-items:center;gap:10px}
.sHead .sId{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.sTitle{font-size:22px;font-weight:700;line-height:1.25;margin:10px 0 4px}
.caseLine{color:var(--muted);font-size:13px;margin:0 0 22px}
.lead{font-size:16px;margin:0 0 16px}
.todo{margin:0 0 8px;padding-left:22px}
.todo li{margin:8px 0}
.crit{margin:8px 0 0;padding-left:20px;color:var(--muted)}
.crit li{margin:4px 0}
details.det{margin:8px 0 4px;border-top:1px solid var(--line);padding-top:12px}
details.det>summary{cursor:pointer;color:var(--muted);font-size:14px;font-weight:600;list-style:none}
details.det>summary::-webkit-details-marker{display:none}
details.det>summary::before{content:"▸ ";color:var(--muted)}
details.det[open]>summary::before{content:"▾ "}
details.det>div,details.det>p,details.det>ul{margin-top:10px}
.actions { display:flex; gap:10px; align-items:center; margin-top:24px; flex-wrap:wrap; } .actions { display:flex; gap:10px; align-items:center; margin-top:24px; flex-wrap:wrap; }
.actions .spacer { flex:1; } .actions .spacer { flex:1; }
.unclear { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; } .unclear { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; }
@ -1052,13 +1069,9 @@ function renderRun(){
: ``; : ``;
let body = ` let body = `
${loopBanner} ${loopBanner}
${chip} <div class="sHead">${chip}<span class="sId">${st.id}</span></div>
<div class="stationName">${st.name}</div> <h2 class="sTitle">${st.name}</h2>
<div class="stationId">${st.id}</div> <div class="caseLine">Fall: «${acard(S.service,S.change).titel}»</div>`;
<div class="token">Action Card: <b>${USE_CASES[S.service].service}</b>
<span class="ctChip">${CHANGE_TYPES[S.change]}</span>
<div class="ctText"><b>${acard(S.service,S.change).titel}</b> — ${acard(S.service,S.change).text}</div>
</div>`;
if(st.typ==="gate") body += (S.stage==="gateDone") ? renderGateDone(st) : renderGate(st); if(st.typ==="gate") body += (S.stage==="gateDone") ? renderGateDone(st) : renderGate(st);
else body += (S.stage==="reveal") ? renderReveal(st) : renderAct(st); else body += (S.stage==="reveal") ? renderReveal(st) : renderAct(st);
$("#panel").innerHTML = body; $("#panel").innerHTML = body;
@ -1068,46 +1081,39 @@ function renderRun(){
/* Aktivitaet — Takt 1: Handeln am Brett (mit "Zeig mir") */ /* Aktivitaet — Takt 1: Handeln am Brett (mit "Zeig mir") */
function renderAct(st){ function renderAct(st){
return ` return `
<div class="step"> <p class="lead">Handeln am Brett — besprecht und legt ab:</p>
<div class="stepHead"><span class="n">1</span> Handeln am Brett</div> <ol class="todo">
<div class="discuss"> <li>Beteiligte Rollen → Figuren auf die <b>Mulden des Station-Pucks</b></li>
<strong>Besprecht und legt am Brett ab:</strong> <li>RACI klären → dieselben Figuren ins <b>Aktiv-Feld (R·A·C·I)</b></li>
<ul> <li>Artefaktkarte → in die <b>Service-Akte</b></li>
<li><b>1 · Wer ist beteiligt?</b> Die Figuren der beteiligten Rollen auf die <b>Mulden des Station-Pucks</b> stellen.</li> </ol>
<li><b>2 · Wie ist die RACI?</b> Dieselben Figuren ins <b>Aktiv-Feld (R · A · C · I)</b> einsortieren.</li> <details class="det">
<li><b>Was passiert?</b> Kurz klären, was hier für euren Change getan wird.</li> <summary>Zeig mir</summary>
<li><b>Artefakt?</b> Passende <b>Artefaktkarte in die Service-Akte</b> legen (oder Status weiterschieben).</li> <div>${raciTable(st)}<p class="muted" style="margin:8px 0 0"><b>Artefakt:</b> ${st.artefakt}</p></div>
</ul> </details>
<details style="margin-top:10px"> <div class="actions">
<summary style="cursor:pointer;color:var(--muted);font-weight:600">Zeig mir (wenn ihr nicht weiterkommt)</summary> <div class="spacer"></div>
<div style="margin-top:8px">${raciTable(st)}<p style="margin:6px 0 0"><b>Artefakt:</b> ${st.artefakt}</p></div> <button class="primary" id="toReveal">Auflösen →</button>
</details> </div>`;
</div>
</div>
<div class="actions">
<div class="spacer"></div>
<button class="primary" id="toReveal">Auflösen →</button>
</div>`;
} }
/* Aktivitaet — Takt 2: Aufloesung & Abgleich */ /* Aktivitaet — Takt 2: Aufloesung & Abgleich */
function renderReveal(st){ function renderReveal(st){
return ` return `
<div class="step reveal"> <p class="lead">Auflösung — gleicht euer Brett ab:</p>
<div class="stepHead"><span class="n">2</span> Auflösung & Abgleich</div> ${raciTable(st)}
<p>${st.beschreibung}</p> <p class="muted" style="margin-top:10px"><b>Artefakt:</b> ${st.artefakt}</p>
<h4>Umfasst</h4><ul>${st.umfasst.map(u=>`<li>${u}</li>`).join("")}</ul> <details class="det">
<h4>Rollen / RACI</h4>${raciTable(st)} <summary>Worum geht's & was umfasst die Station</summary>
<h4>Artefakt</h4><p>${st.artefakt}</p> <div><p>${st.beschreibung}</p><ul>${st.umfasst.map(u=>`<li>${u}</li>`).join("")}</ul></div>
<p class="muted">Gleicht euer Brett ab — Figuren/Artefakt korrigieren, falls nötig.</p> </details>
</div> <div class="actions">
<div class="actions"> <label class="unclear"><input type="checkbox" id="unclear" ${S.unclear[st.id]?'checked':''}/> War unklar</label>
<label class="unclear"><input type="checkbox" id="unclear" ${S.unclear[st.id]?'checked':''}/> War unklar</label> <div class="spacer"></div>
<div class="spacer"></div> ${S.index < STATIONEN.length-1
${S.index < STATIONEN.length-1 ? `<button class="primary" id="nextStation">Nächste Station →</button>`
? `<button class="primary" id="nextStation">Nächste Station →</button>` : `<button class="primary" id="finish">Durchlauf abschließen</button>`}
: `<button class="primary" id="finish">Durchlauf abschließen</button>`} </div>`;
</div>`;
} }
/* Gate — Entscheidung nach Kriterien */ /* Gate — Entscheidung nach Kriterien */
@ -1117,18 +1123,19 @@ function renderGate(st){
const opts = (st.pfade||[]).map(([n,d],i)=> const opts = (st.pfade||[]).map(([n,d],i)=>
`<button class="choice" data-i="${i}"><b>${n}</b><br><span style="color:var(--muted);font-weight:400">${d}</span></button>`).join(""); `<button class="choice" data-i="${i}"><b>${n}</b><br><span style="color:var(--muted);font-weight:400">${d}</span></button>`).join("");
const revisitNote = (S.revisit && S.revisit[st.id]) const revisitNote = (S.revisit && S.revisit[st.id])
? `<div class="hint ok">↩ Erneute Vorlage nach Nacharbeit — prüft die Kriterien erneut und entscheidet neu.</div>` : ``; ? `<div class="hint ok">↩ Erneute Vorlage nach Nacharbeit — prüft erneut und entscheidet neu.</div>` : ``;
return ` return `
<div class="step">
<div class="stepHead"><span class="n">⛩</span> Gate-Entscheidung</div>
<p>${st.beschreibung}</p>
${revisitNote} ${revisitNote}
<p><b>Entscheidet:</b> ${roleLabel(keeper)}</p> <p class="lead"><b>Entscheidet:</b> ${roleLabel(keeper)}</p>
<h4>Prüft am Brett (Kriterien)</h4>
<ul>${pruef}</ul>
<p class="muted">Liegen die geforderten <b>Artefaktkarten</b> in der Service-Akte? Stehen die <b>Pflicht-Figuren</b> am Gate-Puck? Dann entscheidet:</p>
<div class="choiceGrid">${opts}</div> <div class="choiceGrid">${opts}</div>
</div>`; <details class="det">
<summary>Worum geht's & Prüf-Kriterien</summary>
<div>
<p>${st.beschreibung}</p>
<ul class="crit">${pruef}</ul>
<p class="muted">Artefaktkarten in der Akte? Pflicht-Figuren am Gate-Puck?</p>
</div>
</details>`;
} }
/* Gate — Konsequenz der Entscheidung */ /* Gate — Konsequenz der Entscheidung */