v8
This commit is contained in:
parent
6d09b07dec
commit
20c9444c2f
1 changed files with 56 additions and 10 deletions
|
|
@ -151,6 +151,13 @@
|
|||
.aufBox ul li{margin:3px 0}
|
||||
.roleChips{display:flex;flex-wrap:wrap;gap:6px}
|
||||
.roleChip{background:#eef0f3;border-radius:999px;padding:3px 11px;font-size:13px}
|
||||
/* Aufgaben-Kasten (Anweisung hervorgehoben) */
|
||||
.frageBox{background:#f7f9fc;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:14px 18px;margin:6px 0;font-size:16px;line-height:1.55}
|
||||
.frageBox .frageLabel{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700;margin-bottom:5px}
|
||||
/* Phasen-Abschluss-Feedback */
|
||||
.phaseDone{margin:16px 0 4px;padding:16px 18px;border-radius:12px;background:#fffdf5;border:1px solid var(--line);border-left:4px solid var(--accent)}
|
||||
.phaseDone .pdTitle{font-weight:800;font-size:18px;margin-bottom:6px}
|
||||
.phaseDone p{color:var(--ink)}
|
||||
|
||||
.actions { display:flex; gap:10px; align-items:center; margin-top:24px; flex-wrap:wrap; }
|
||||
.actions .spacer { flex:1; }
|
||||
|
|
@ -1104,6 +1111,14 @@ function gateGoto(st, i){
|
|||
}
|
||||
save(); draw();
|
||||
}
|
||||
/* Zielstation einer Gate-Entscheidung (für Phasenwechsel-Feedback). -1 = Ende/Ablehnung. */
|
||||
function gateTargetIndex(st, i){
|
||||
const t = (GATE_FLOW[st.id] || [])[i] || "next";
|
||||
if(t==="end") return -1;
|
||||
if(t==="next") return Math.min(S.index+1, STATIONEN.length-1);
|
||||
const j = STATIONEN.findIndex(s=>s.id===t);
|
||||
return j>=0 ? j : Math.min(S.index+1, STATIONEN.length-1);
|
||||
}
|
||||
|
||||
function raciTable(st){
|
||||
const rows = st.raci.map(([r,c])=>`<tr><td>${roleLabel(r)}</td><td><span class="raciBadge raci-${c}">${c}</span></td></tr>`).join("");
|
||||
|
|
@ -1143,16 +1158,16 @@ function renderRun(){
|
|||
function activitySteps(st){
|
||||
return [
|
||||
{ label:"Diskussion",
|
||||
frage:`<p class="lead">Diskutiert gemeinsam: Was fällt alles unter <b>„${st.name}"</b>? Was stellt ihr euch darunter vor? Nennt Beispiele.</p>`,
|
||||
frage:`Diskutiert gemeinsam: Was fällt alles unter <b>„${st.name}"</b>? Was stellt ihr euch darunter vor? Nennt Beispiele.`,
|
||||
auf:`<p style="margin:0 0 8px">${st.beschreibung}</p><h4 class="aufH">Das fällt darunter</h4><ul>${st.umfasst.map(u=>`<li>${u}</li>`).join("")}</ul>` },
|
||||
{ label:"Beteiligte Rollen",
|
||||
frage:`<p class="lead">Welche Rollen sind an dieser Aktivität beteiligt? Stellt ihre Figuren auf die <b>Mulden des Station-Pucks</b>.</p>`,
|
||||
frage:`Welche Rollen sind an dieser Aktivität beteiligt? Stellt ihre Figuren auf die <b>Mulden des Station-Pucks</b>.`,
|
||||
auf:`<h4 class="aufH">Beteiligte Rollen</h4><div class="roleChips">${st.raci.map(([r])=>`<span class="roleChip">${roleLabel(r)}</span>`).join("")}</div>` },
|
||||
{ label:"RACI",
|
||||
frage:`<p class="lead">Klärt die <b>RACI</b>: Wer ist R, A, C, I? Sortiert die Figuren ins <b>Aktiv-Feld (R·A·C·I)</b>.</p>`,
|
||||
frage:`Klärt die <b>RACI</b>: Wer ist R, A, C, I? Sortiert die Figuren ins <b>Aktiv-Feld (R·A·C·I)</b>.`,
|
||||
auf:`<h4 class="aufH">RACI</h4>${raciTable(st)}` },
|
||||
{ label:"Artefakt",
|
||||
frage:`<p class="lead">Welche <b>Artefaktkarte</b> entsteht hier und gehört in die <b>Service-Akte</b>?</p>`,
|
||||
frage:`Welche <b>Artefaktkarte</b> entsteht hier und gehört in die <b>Service-Akte</b>?`,
|
||||
auf:`<h4 class="aufH">Artefakt</h4><p style="margin:0"><b>${st.artefakt}</b></p>` }
|
||||
];
|
||||
}
|
||||
|
|
@ -1161,8 +1176,25 @@ function renderActivity(st){
|
|||
const i = Math.min(S.actStep||0, steps.length-1);
|
||||
const step = steps[i];
|
||||
const isLast = i === steps.length-1;
|
||||
let html = `<div class="tourProg">Schritt ${i+1}/${steps.length} · ${step.label}</div>${step.frage}`;
|
||||
const phaseColor = PHASEN[st.phase].color;
|
||||
const next = STATIONEN[S.index+1];
|
||||
const lastOverall = S.index >= STATIONEN.length-1;
|
||||
const phaseEnd = isLast && S.actReveal && next && next.phase !== st.phase;
|
||||
|
||||
let html = `<div class="tourProg">Schritt ${i+1}/${steps.length} · ${step.label}</div>
|
||||
<div class="frageBox" style="border-left-color:${phaseColor}">
|
||||
<div class="frageLabel">Aufgabe ${i+1}</div>
|
||||
${step.frage}
|
||||
</div>`;
|
||||
if(S.actReveal) html += `<div class="aufBox">${step.auf}</div>`;
|
||||
if(phaseEnd){
|
||||
const nextColor = PHASEN[next.phase].color;
|
||||
html += `<div class="phaseDone" style="border-left-color:${nextColor}">
|
||||
<div class="pdTitle">🎉 Phase abgeschlossen</div>
|
||||
<p style="margin:4px 0">Gratulation — ihr habt die Phase <b style="color:${phaseColor}">${PHASEN[st.phase].label}</b> zu Ende gespielt!</p>
|
||||
<p style="margin:4px 0">Weiter geht's mit der Phase <b style="color:${nextColor}">${PHASEN[next.phase].label}</b>.</p>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
let actions = `<div class="actions">`;
|
||||
if(S.actReveal || i>0) actions += `<button class="ghost" id="actBack">← zurück</button>`;
|
||||
|
|
@ -1171,9 +1203,9 @@ function renderActivity(st){
|
|||
actions += `<div class="spacer"></div>`;
|
||||
if(!S.actReveal) actions += `<button class="primary" id="actReveal">Auflösen →</button>`;
|
||||
else if(!isLast) actions += `<button class="primary" id="actNext">Weiter →</button>`;
|
||||
else actions += S.index < STATIONEN.length-1
|
||||
? `<button class="primary" id="nextStation">Nächste Station →</button>`
|
||||
: `<button class="primary" id="finish">Durchlauf abschließen</button>`;
|
||||
else if(lastOverall) actions += `<button class="primary" id="finish">Durchlauf abschließen</button>`;
|
||||
else if(phaseEnd) actions += `<button class="primary" id="nextStation">→ Weiter zur Phase ${PHASEN[next.phase].label}</button>`;
|
||||
else actions += `<button class="primary" id="nextStation">Nächste Station →</button>`;
|
||||
actions += `</div>`;
|
||||
return html + actions;
|
||||
}
|
||||
|
|
@ -1207,17 +1239,31 @@ function renderGateDone(st){
|
|||
const keeper = (st.raci.find(([r,c])=>c==="A")||[])[0];
|
||||
const sorNote = (keeper==="sor")
|
||||
? `<p class="muted">Reicht die <b>Ressourcen-/Entscheidungshoheit der SOR</b> nicht (zusätzliche Mittel nötig), wird der Change zum <b>Demand</b> → über DPM ans <b>Mission Board</b>.</p>` : ``;
|
||||
const tIdx = gateTargetIndex(st, i);
|
||||
const target = tIdx>=0 ? STATIONEN[tIdx] : null;
|
||||
const phaseEnd = target && target.phase !== st.phase;
|
||||
let feedback = `<p class="muted">Legt den passenden <b>Entscheidungs-Chip</b> ans Gate.</p>`;
|
||||
let nextLabel = `Weiter →`;
|
||||
if(phaseEnd){
|
||||
const curColor = PHASEN[st.phase].color, nextColor = PHASEN[target.phase].color;
|
||||
nextLabel = `→ Weiter zur Phase ${PHASEN[target.phase].label}`;
|
||||
feedback += `<div class="phaseDone" style="border-left-color:${nextColor}">
|
||||
<div class="pdTitle">🎉 Phase abgeschlossen</div>
|
||||
<p style="margin:4px 0">Gratulation — ihr habt die Phase <b style="color:${curColor}">${PHASEN[st.phase].label}</b> zu Ende gespielt!</p>
|
||||
<p style="margin:4px 0">Weiter geht's mit der Phase <b style="color:${nextColor}">${PHASEN[target.phase].label}</b>.</p>
|
||||
</div>`;
|
||||
}
|
||||
return `
|
||||
<div class="step reveal">
|
||||
<div class="stepHead"><span class="n">⛩</span> Entscheidung getroffen</div>
|
||||
<div class="recBox"><h4>${pf[0]}</h4><p style="margin:0;color:var(--muted)">${pf[1]}</p></div>
|
||||
${sorNote}
|
||||
<p class="muted">Legt den passenden <b>Entscheidungs-Chip</b> ans Gate.</p>
|
||||
${feedback}
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="ghost" id="gateBack">← andere Entscheidung</button>
|
||||
<div class="spacer"></div>
|
||||
<button class="primary" id="gateNext">Weiter →</button>
|
||||
<button class="primary" id="gateNext">${nextLabel}</button>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue