Oil reserve{state.oil}d
60 ? "#4ea36b" : "#d49a2a"}} />
Gas storage{state.gas}%·70
60 ? "#4ea36b" : state.gas > 30 ? "#d49a2a" : "#c0392b"}} />
Battery/hydro{state.batt}%
);
}
/* ============================================================
CONSTRUCTION QUEUE (collapsible)
============================================================ */
function QueueStrip({ openByDefault, items, year }) {
const [open, setOpen] = fU(!!openByDefault);
const yMin = 2010, yMax = 2032;
const colorOf = (k) => ({ lng: "#d97706", wind: "#0e7c66", grid: "#1e293b", nuc: "#6d28d9", solar: "#d4a017", coal: "#3a3a3a" })[k] || "#666";
return (
{open && (
{[2010,2015,2020,2025,2030].map(y =>
{y}
)}
NOW {year}
{items.map((it,i) => {
const l = (it.start-yMin)/(yMax-yMin)*100;
const w = (it.eta-it.start)/(yMax-yMin)*100;
const done = Math.min(100, Math.max(0, ((year-it.start)/(it.eta-it.start))*100));
return (
);
})}
)}
);
}
/* ============================================================
MISSION / SHOCK PANELS
============================================================ */
function MissionPanel({ num, year, title, brief, choices, picked: pickedInit, collapsed }) {
const [picked, setPicked] = fU(pickedInit || "B");
if (collapsed) {
return (
M·0{num}
{title}
Decision committed · time progressing
);
}
return (
{title}
{brief}
{choices.map((c) => (
))}
);
}
function ShockPanel({ year, severity, title, brief, choices }) {
const [picked, setPicked] = fU("A");
return (
{title}
{brief}
{choices.map((c) => (
))}
);
}
/* ============================================================
DASHBOARD FRAME (shared chrome — screens 3-10)
============================================================ */
function DashboardFrame({ year, panel, queue, hover, shockSrc, shockTargets, narrowThermal, newsFlash, transitionTicker }) {
const state = STATE[year] || STATE[2024];
return (
FRAGILITY
/
Energiewende Stress Test · 2010–2032
{transitionTicker ? ⏵ TIME ADVANCING · {transitionTicker} : ⏸ {panel?.kind === "shock" ? "SHOCK · PAUSED" : "PAUSED"}}
{panel}
{newsFlash &&
NEWS · {newsFlash.year} {newsFlash.body}
}
{queue}
);
}
/* ============================================================
SCREEN 1 — Home
============================================================ */
function ScreenHome() {
return (
Energy systems
under pressure.
An interactive simulation of energy fragility.
CAMPAIGN LIBRARY
DE
2010 → 2032
DIFFICULTY · 4/5
The Energiewende Stress Test
Steer Germany through the nuclear phase-out, two gas shocks, and a climate-era
drought. Choose how to build resilience over 22 years of decisions.
5 missions·3 shocks·~40 min
+
More campaigns coming
UK · 2008–2030
Japan · post-Fukushima
India · 2020–2045
);
}
/* ============================================================
SCREEN 2 — Campaign overview
============================================================ */
function ScreenOverview() {
return (
CAMPAIGN · DE · 22 YEARS
The Energiewende Stress Test
In 2010, Germany sets out to phase out nuclear power, decarbonize its industry, and rewire
its grid. Three shocks lie ahead — a diplomatic crisis, a pipeline cutoff, and a climate
emergency. The decisions you commit early will reshape what's possible in the 2020s.
WHAT YOU'LL LEARN
Source dependenciesHow a single import route can underpin half of industrial heat.
Sector vulnerabilitiesWhy chemical feedstock, residential heat, and steel each break differently.
Lead-time tradeoffsWhy some answers take 12 months and others 12 years to deliver capacity.
Path dependencyHow a 2011 decision quietly determines the menu of options available in 2024.
);
}
/* ============================================================
SCREEN BUILDERS for missions / shocks
============================================================ */
const M1 = {
num: 1, year: 2011,
title: "Decommission 8 reactors by 2022 while keeping the lights on.",
brief: "Post-Fukushima, the Bundestag has voted to phase out 8 reactors by 2022. Choose how to replace 12 GW of baseload without losing reliability — and without overshooting emissions targets.",
choices: [
{ key:"A", tag:"Gas bridge", title:"Gas plants + imports", lead:"Build CCGT capacity; sign long-term Russian + Norwegian gas.", cost:"€14B", time:"3–5 years" },
{ key:"B", tag:"Renewables", title:"Wind + solar + grid", lead:"Tender 8 GW offshore wind, scale rooftop solar, expand HVDC.", cost:"€38B", time:"6–9 years" },
{ key:"C", tag:"Coal life-ext", title:"Retrofit coal fleet", lead:"Extend lignite and hard-coal plants; defer retirements.", cost:"€8B", time:"2–3 years" },
{ key:"D", tag:"Mixed", title:"Phased mix", lead:"Balanced gas + renewables + national efficiency mandate.", cost:"€24B", time:"4–7 years" },
],
picked: "A",
};
const S1 = {
year: 2014, severity: "minor",
title: "Russian annexation of Crimea — gas markets tighten.",
brief: "Spot gas prices spike 30%; storage drawdown accelerates ahead of winter. The crisis is not, yet, existential — but it is the first reminder that 40% of pipeline gas runs through one geography.",
choices: [
{ key:"A", title:"Expand strategic gas storage", lead:"Top up reserves; +14 days of cover by Q4.", tag:"Hedge" },
{ key:"B", title:"Pass spike through to consumers", lead:"No new spend; absorb political cost.", tag:"Market" },
{ key:"C", title:"Diversify supply contracts now", lead:"Norway + NL long-term; small new LNG pilot.", tag:"Diversify" },
],
};
const M2 = {
num: 2, year: 2015,
title: "Stop industrial competitiveness from cracking.",
brief: "Industrial energy costs are 38% above the EU average. Chemicals and steel are warning about relocation. Defend competitiveness without abandoning the transition.",
choices: [
{ key:"A", tag:"Tax relief", title:"Industrial elec tax exemption", lead:"Carve-out for energy-intensive sectors; €6B/yr budget cost.", cost:"€6B/yr", time:"immediate" },
{ key:"B", tag:"Domestic gas",title:"Push for shale exploration", lead:"Lift moratorium in 2 Länder; political backlash certain.", cost:"€2B", time:"4–6 years" },
{ key:"C", tag:"H₂ pilot", title:"Early hydrogen programs", lead:"Co-fund 4 industrial pilot sites; long-term bet.", cost:"€4B", time:"5–10 years" },
{ key:"D", tag:"EU", title:"Deepen EU energy market", lead:"Couple price zones; cross-border capacity auctions.", cost:"€1B", time:"slow" },
],
picked: "A",
};
const M3 = {
num: 3, year: 2019,
title: "Cut emissions 40% by 2025 — the trajectory falls short by 12 pp.",
brief: "Treaty deadlines are approaching; current policy mix is not enough. Pick the dominant lever for the next half-decade.",
choices: [
{ key:"A", tag:"Coal exit", title:"Accelerated coal phase-out", lead:"Bring exit forward to 2030; transition fund for regions.", cost:"€20B", time:"5–7 years" },
{ key:"B", tag:"Heat", title:"National heat-pump rollout", lead:"Subsidy + tradesperson training; electrification accelerates.", cost:"€18B", time:"5–8 years" },
{ key:"C", tag:"Transport", title:"EV mandate + chargers", lead:"2030 sales mandate; €12B charging build-out.", cost:"€12B", time:"long" },
{ key:"D", tag:"Carbon", title:"Tighten ETS price floor", lead:"Carbon price floor; market-driven pace, less direct control.", cost:"—", time:"market" },
],
picked: "B",
};
const S2 = {
year: 2022, severity: "major",
title: "Russian pipeline gas cut off mid-year.",
brief: "Heating, power generation, and chemical-industry feedstock are hit simultaneously. Forecasters now expect industrial output to drop 6–8% peak-to-trough. Storage sits at 22% with winter four months away.",
choices: [
{ key:"A", title:"Ration industrial use", lead:"Protect residential heat; allocate cuts via auction.", tag:"Ration" },
{ key:"B", title:"Mandate temperature limits", lead:"19°C public buildings; efficiency campaign.", tag:"Demand" },
{ key:"C", title:"Emergency LNG charters", lead:"Spot-market charters at +€8B; sign 18-month deals.", tag:"Supply" },
{ key:"D", title:"Reactivate coal capacity", lead:"Pull mothballed lignite back online for 24 months.", tag:"Coal" },
],
};
const M4 = {
num: 4, year: 2024,
title: "Rebuild energy security in 5 years.",
brief: "Russian pipeline gas is gone. Industrial output dropped 6.4% peak-to-trough; chemical feedstock supply still 32% below 2010. Residential reliability is recovering but gas storage sits below the seasonal benchmark. Choose your primary strategic posture.",
choices: [
{ key:"A", tag:"Supply security", title:"LNG terminal expansion", lead:"4 floating + 2 fixed LNG terminals; 15-yr Qatari & US contracts.", cost:"€18B", time:"18–30 mo" },
{ key:"B", tag:"Decarbonized", title:"Renewables + green H₂", lead:"Double offshore tender; 10 GW electrolyser pipeline; NL/NO corridor.", cost:"€42B", time:"5–8 yr" },
{ key:"C", tag:"Baseload", title:"Nuclear restart", lead:"Reverse 2023 shutdowns; restart Isar-2 + Neckarwestheim-2.", cost:"€6B", time:"12–18 mo" },
{ key:"D", tag:"Diplomatic", title:"Diversified imports", lead:"NO +20%, Algeria via Italy, Azerbaijan via TAP, US LNG framework.", cost:"€4B", time:"2–4 yr" },
],
picked: "B",
};
const S3 = {
year: 2028, severity: "severe",
title: "Rhine drought + heatwave hits the grid backbone.",
brief: "Low river levels disrupt thermal plant cooling and halt fuel barge transport. A concurrent heatwave drives cooling demand 18% above forecast. The event is now expected to last 3–5 weeks.",
choices: [
{ key:"A", title:"Curtail industrial customers", lead:"Preserve grid stability; protect residential.", tag:"Curtail" },
{ key:"B", title:"Dispatch every reserve", lead:"Accept very high marginal cost; burn through batteries.", tag:"Dispatch" },
{ key:"C", title:"Rolling blackouts by sector", lead:"Pre-scheduled, communicated 24h ahead.", tag:"Blackout" },
{ key:"D", title:"Emergency imports", lead:"FR + NL + DK; depends on neighbours' capacity.", tag:"Imports" },
],
};
/* canned construction queues */
const QUEUE_2013 = [
{ type:"Wind · onshore", start:2011, eta:2014, kind:"wind" },
{ type:"Gas CCGT", start:2012, eta:2015, kind:"grid" },
{ type:"Nuclear decom.", start:2011, eta:2013, kind:"nuc" },
{ type:"Solar PV (DE-S)", start:2013, eta:2016, kind:"solar" },
];
const QUEUE_2024 = [
{ type:"LNG terminal", start:2023, eta:2026, kind:"lng" },
{ type:"Offshore wind", start:2022, eta:2025, kind:"wind" },
{ type:"Offshore wind", start:2023, eta:2026, kind:"wind" },
{ type:"HVDC corridor", start:2021, eta:2027, kind:"grid" },
{ type:"Nuclear decom.", start:2023, eta:2024, kind:"nuc" },
];
/* ============================================================
SCREEN 11 — Recap
============================================================ */
function ScreenRecap() {
const state = STATE[2032];
// radar — 5 axes, player vs historical
const axes = [
{ k:"Reliability", player: 78, hist: 70 },
{ k:"Affordability", player: 62, hist: 48 },
{ k:"Growth", player: 72, hist: 64 },
{ k:"Emissions", player: 82, hist: 64 },
{ k:"Independence", player: 68, hist: 42 },
];
const cx = 160, cy = 160, R = 120;
const ptsFor = (vals) => vals.map((v,i) => {
const a = -Math.PI/2 + (i * 2*Math.PI / axes.length);
const r = (v/100) * R;
return `${cx + r*Math.cos(a)},${cy + r*Math.sin(a)}`;
}).join(" ");
return (
FRAGILITY
/
Campaign complete · 2010–2032
✓ FINAL SCORE
COMPOSITE OUTCOME · YOU VS HISTORICAL
Your run
Historical DE
COUNTERFACTUAL HIGHLIGHTS
-
2011 · Gas bridge → Renewables push
If you'd picked the renewables build-out instead of CCGT capacity, the 2022 cutoff would have been 40% less damaging — but industrial costs would have run 18% higher through 2015–2019.
-
2019 · Heat pumps over coal exit
Heat-pump rollout cleared the 2025 emissions line. Picking accelerated coal exit instead would have cleared 2025 too — but left an extra 18 TWh of winter gas demand exposed in 2022.
-
2024 · Renewables + H₂ over LNG expansion
Locked in lower long-run costs and independence; pays back in 2028 when the drought hits and you don't need to ration LNG cargoes. Cost trajectory diverges from historical DE after 2026.
LEADERBOARD
- 1.j.okafor818Renewables + diplomatic
- 2.YOU764Renewables + H₂ · gas hedge
- 3.m.weber752Coal exit · diversified imports
- 4.Historical DE614Real-world outcome
- 5.r.singh588Nuclear restart
);
}
/* ============================================================
ROOT — wraps the 11 artboards in a DesignCanvas
============================================================ */
function FragilityView() {
const DC = window.DesignCanvas, DCSection = window.DCSection, DCArtboard = window.DCArtboard;
if (!DC) {
return
Loading canvas…
;
}
const screens = [
{ id:"home", label:"01 · Home", w: 1280, h: 800, el:
},
{ id:"overview", label:"02 · Campaign overview", w: 1280, h: 760, el:
},
{ id:"m1", label:"03 · Mission 1 · 2011", w: 1280, h: 1180, el:
}
queue={
}
/> },
{ id:"trans", label:"04 · Time passing · 2013", w: 1280, h: 1000, el:
}
queue={
}
newsFlash={{ year: 2013, body: "First decommissioned reactor offline · 1.4 GW lost · gas spot +12%" }}
/> },
{ id:"s1", label:"05 · Shock 1 · Crimea 2014", w: 1280, h: 1080, el:
}
queue={
}
shockSrc="gasRu" shockTargets={["resHeat","indHi"]}
/> },
{ id:"m2", label:"06 · Mission 2 · 2015", w: 1280, h: 1180, el:
}
queue={
}
/> },
{ id:"m3", label:"07 · Mission 3 · 2019", w: 1280, h: 1180, el:
}
queue={
}
/> },
{ id:"s2", label:"08 · Shock 2 · Gas cutoff 2022", w: 1280, h: 1100, el:
}
queue={
}
shockSrc="gasRu" shockTargets={["resHeat","indHi","feed"]}
/> },
{ id:"m4", label:"09 · Mission 4 · 2024", w: 1280, h: 1220, el:
}
queue={
}
hover={{ kind: "src", id: "gasLng" }}
/> },
{ id:"s3", label:"10 · Shock 3 · Rhine 2028", w: 1280, h: 1100, el:
}
queue={
}
shockSrc="hydro" shockTargets={["resElec","comm","trans"]}
newsFlash={{ year: 2028, body: "Cooling demand +18% above forecast · barge traffic on Rhine halted" }}
/> },
{ id:"recap", label:"11 · End of campaign · 2032", w: 1280, h: 1340, el:
},
];
return (
{screens.map((s) => (
{s.el}
))}
);
}
window.FragilityView = FragilityView;