The Crypt v. You

HTML

<main><header><small>THE CRYPT COURT · CASE 004</small><h1>The Crypt v. <em>You</em></h1><p>Charged with opening four pumpkins without asking.</p></header><section id="jury" aria-label="The four jurors"></section><section class="bench"><small id="phase"></small><h2 id="headline"></h2><p id="story" aria-live="polite"></p><div id="play"></div></section><section id="record"><h3>Court record</h3><p id="summary"></p></section><footer><button id="undo">Undo</button><button id="reset">Reset trial</button><span id="saved">Progress saved between visits</span></footer><p class="credit">A child remix of <a href="https://widgets.arkheos.ai/community/widgets/7ec75d35-30e4-4b7a-9354-831b3548cd77" target="_blank" rel="noopener">Pumpkin Crypt Clicker</a> by ArkheOS. Original monster illustrations retained.</p></main>

CSS

*{box-sizing:border-box}body{margin:0;background:#141020;color:#f8e7cd;font:14px system-ui,sans-serif}main{max-width:820px;margin:auto;padding:24px 18px;background:radial-gradient(ellipse at top,#392839,transparent 65%),#141020;border:1px solid #614253;border-radius:20px}header{text-align:center}small{font-size:10px;letter-spacing:2px;color:#c4a0b8}h1{font: bold 38px Georgia,serif;margin:12px 0}em{color:#ffb45d;font-weight:normal}header p{color:#cdb0bf}#jury{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:24px 0 16px}.juror{background:#251b2e;border:1px solid #614253;border-radius:12px;overflow:hidden;text-align:center;padding:8px}.juror svg{width:100%;height:115px}.juror b{font: bold 15px Georgia,serif;display:block}.priority{font-size:11px;color:#c6aabb;margin:8px 0;min-height:30px}.vote{padding:7px;border-radius:6px;background:#443040;font-weight:bold;font-size:11px}.free{background:#294c41;color:#c8f8cf}.guilty{background:#642d40;color:#ffd4cb}.reason{font-size:11px;line-height:1.5;min-height:48px;color:#e2c5d0}.bench{background:linear-gradient(#302233,#221926);border:1px solid #75505b;padding:20px;border-radius:12px;border-top:5px solid #ac714b}h2{font:28px Georgia,serif;margin:10px 0}#story{line-height:1.6;color:#dcc4cd}.choices{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0}button{font:inherit;cursor:pointer;color:#f8e7cd;border:1px solid #705062;border-radius:9px;background:#3d2a40;padding:12px;min-height:44px;text-align:left;touch-action:manipulation}button strong{display:block;color:#ffd092;margin-bottom:5px}button span{font-size:12px;line-height:1.5;display:block}button[aria-pressed=true]{border-color:#ffbd66;background:#62422e}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #ffd092;outline-offset:3px}.primary{background:#f5b466;color:#211524;font-weight:bold;text-align:center;border-color:#ffce8b;width:100%;margin-top:8px}.hint{font-size:12px;color:#cbb0bd}.stamp{font:bold 30px Georgia,serif;color:#ffbf74}#record{padding:5px 4px}h3{font:18px Georgia,serif}#summary{font-size:12px;color:#cdb0bf;line-height:1.6}footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap}footer button{font-size:12px;padding:9px}#saved{font-size:10px;color:#bb9dad;margin-left:auto}.credit{font-size:10px;color:#ae92a6;line-height:1.7;margin-bottom:0}a{color:#ebbc8d}@media(max-width:560px){#jury{grid-template-columns:1fr 1fr}.juror svg{height:95px}h1{font-size:30px}.choices{grid-template-columns:1fr}.reason{min-height:0}main{padding:18px 12px}.bench{padding:16px}}

JavaScript

(()=>{
'use strict';
const bridge=typeof WidgetCanvas!=='undefined'?WidgetCanvas:null,$=id=>document.getElementById(id),key='pumpkin-crypt-court-child-v1',copy=x=>JSON.parse(JSON.stringify(x));
const beasts=[{name:'Wickling',color:'#a595df'},{name:'Mossmaw',color:'#95b77b'},{name:'Count Cinder',color:'#de8393'},{name:'Moonmoth',color:'#7bbec9'}];
function svg(body){return '<svg viewBox="0 0 300 250" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">'+body+'</svg>';}
function face(i){const c=beasts[i].color;let body='';
if(i===0)body='<path d="M87 91 Q58 54 78 42 L116 74 M187 73 L225 40 Q244 58 215 95" fill="#66508e" stroke="#1b142b" stroke-width="5"/><path d="M147 61 Q127 41 146 21 Q150 37 161 44 Q172 59 155 64" fill="#ffce6d"/><path d="M77 126 Q73 67 148 67 Q226 64 225 131 L244 194 L203 183 L183 204 L150 188 L121 206 L99 183 L64 195Z" fill="'+c+'" stroke="#20162e" stroke-width="5"/><ellipse cx="116" cy="114" rx="18" ry="22" fill="#261d39"/><ellipse cx="183" cy="114" rx="18" ry="22" fill="#261d39"/><circle cx="122" cy="106" r="6" fill="#ffe6a8"/><circle cx="177" cy="106" r="6" fill="#ffe6a8"/><path d="M112 153 Q150 180 190 145 Q160 199 112 153" fill="#302039"/><path d="M135 164 L142 179 L150 169" fill="#fff1ce"/>';
if(i===1)body='<path d="M99 85 Q58 66 69 35 Q100 32 116 78 M181 75 Q195 29 225 37 Q235 69 205 91" fill="#577951" stroke="#1b3029" stroke-width="5"/><path d="M74 115 Q69 75 115 71 L186 73 Q229 75 229 127 L223 174 Q213 203 149 202 Q82 202 77 174Z" fill="'+c+'" stroke="#21392e" stroke-width="5"/><path d="M85 93 Q111 74 130 90 M172 89 Q198 75 220 96" fill="none" stroke="#426449" stroke-width="13"/><ellipse cx="114" cy="117" rx="12" ry="18" fill="#1f372c"/><ellipse cx="189" cy="117" rx="12" ry="18" fill="#1f372c"/><circle cx="118" cy="112" r="4" fill="#e9ffac"/><circle cx="185" cy="112" r="4" fill="#e9ffac"/><path d="M97 151 Q150 138 205 152 Q195 190 150 183 Q105 189 97 151" fill="#253c2d"/><path d="M113 151 L120 171 L129 150 M168 148 L178 170 L188 151" fill="#efddb1"/><path d="M138 75 Q117 52 137 42 Q155 44 157 71 Q169 37 187 49 Q190 67 157 78" fill="#abc878"/>';
if(i===2)body='<path d="M78 133 L38 167 L95 206 L149 187 L206 207 L262 167 L221 131" fill="#5e284b" stroke="#21162d" stroke-width="5"/><path d="M91 95 L66 69 L64 123 L82 134 M209 96 L235 68 L236 124 L220 137" fill="'+c+'" stroke="#3d2436" stroke-width="5"/><path d="M83 122 Q77 68 147 64 Q220 63 219 123 Q225 178 150 192 Q77 178 83 122" fill="'+c+'" stroke="#3d2436" stroke-width="5"/><path d="M85 105 Q75 52 148 55 Q225 52 217 105 L188 83 L151 104 L114 82Z" fill="#34243b"/><path d="M102 120 L133 124 M168 124 L198 118" stroke="#432137" stroke-width="6" stroke-linecap="round"/><path d="M115 150 Q150 172 190 146" fill="none" stroke="#492239" stroke-width="6"/><path d="M123 154 L129 175 L141 160 M169 159 L181 173 L184 150" fill="#fff2dc"/><path d="M151 190 L137 207 L162 218 L174 204Z" fill="#f6bd6b"/>';
if(i===3)body='<path d="M135 132 Q59 47 34 85 Q11 116 73 145 Q11 170 51 203 Q96 220 139 157 M166 132 Q241 47 266 85 Q289 116 227 145 Q289 170 249 203 Q204 220 161 157" fill="#47738e" stroke="#233148" stroke-width="5"/><path d="M112 132 Q66 82 48 106 Q49 128 112 145 M187 132 Q234 82 252 106 Q251 128 188 145" fill="#e4b976"/><path d="M102 166 L65 183 L115 180 M198 166 L235 183 L185 180" fill="none" stroke="#80bbc9" stroke-width="8"/><path d="M128 84 Q120 46 96 43 M171 84 Q181 46 204 43" fill="none" stroke="#91d2d3" stroke-width="5" stroke-linecap="round"/><circle cx="96" cy="43" r="7" fill="#ffd48a"/><circle cx="204" cy="43" r="7" fill="#ffd48a"/><ellipse cx="150" cy="138" rx="46" ry="62" fill="'+c+'" stroke="#253c50" stroke-width="5"/><ellipse cx="131" cy="123" rx="9" ry="15" fill="#20304a"/><ellipse cx="169" cy="123" rx="9" ry="15" fill="#20304a"/><circle cx="133" cy="118" r="3" fill="#fff4cb"/><circle cx="167" cy="118" r="3" fill="#fff4cb"/><path d="M138 153 Q150 165 163 153" fill="none" stroke="#294158" stroke-width="4" stroke-linecap="round"/><path d="M146 91 L156 104 L149 114 L141 103Z" fill="#ffe0a1"/>';
return svg('<ellipse cx="150" cy="220" rx="90" ry="12" fill="#0e0b1870"/>'+body);}

const evidence=[
{title:'Scratches inside the shell',text:'The residents were trying to get out.',points:[2,0,0,1],reactions:['Those marks are mine. I wanted out.','Escape marks do not mend my garden.','An exit still requires an invitation.','A cramped shell is no place to dream.']},
{title:'Your three gentle knocks',text:'You announced each opening, three taps at a time.',points:[0,0,2,1],reactions:['Knocking is less fun than bursting in.','Politeness does not repair roots.','Three knocks? Proper crypt etiquette.','A warning lets a sleeper wake gently.']},
{title:'A damaged pumpkin vine',text:'Admit the harm; show what needs repairing.',points:[0,2,0,0],reactions:['At least you are honest.','You noticed the roots. That matters.','Damage is a serious admission.','Broken vines make restless nights.']},
{title:'The moonlit collection',text:'All four are together and free of their shells.',points:[1,0,0,2],reactions:['Freedom and company. Excellent.','A collection is no substitute for a garden.','You cannot collect a Count.','We can finally dream together.']}];
const defenses=[
{title:'Rescue, not robbery',text:'I opened the shells to free their residents.',points:[2,0,-1,1]},
{title:'Make amends',text:'I will mend the vines and ask before opening another.',points:[0,2,2,0]},
{title:'Moonlit misunderstanding',text:'I thought three knocks were an invitation to hatch.',points:[1,0,1,2]}];
const priorities=['Values freedom','Protects the garden','Demands etiquette','Protects peaceful sleep'];
const fresh=()=>({schema:1,phase:'evidence',exhibits:[],defense:null,revealed:0,actionCount:0,ending:''});
let s=fresh(),history=[];
function valid(x){return x&&x.schema===1&&['evidence','defense','votes','verdict'].includes(x.phase)&&Array.isArray(x.exhibits)&&x.exhibits.length<=2&&x.exhibits.every(i=>Number.isInteger(i)&&i>=0&&i<4)&&new Set(x.exhibits).size===x.exhibits.length&&(x.defense===null||Number.isInteger(x.defense)&&x.defense>=0&&x.defense<3)&&Number.isInteger(x.revealed)&&x.revealed>=0&&x.revealed<=4&&Number.isInteger(x.actionCount)&&x.actionCount>=0&&typeof x.ending==='string';}
function restore(p){if(!p||p.game!==key||!valid(p.current))return;s=copy(p.current);history=(p.history||[]).filter(valid).slice(-40).map(copy);draw();}
function votes(){return beasts.map((b,i)=>{const score=s.exhibits.reduce((n,e)=>n+evidence[e].points[i],0)+(s.defense===null?0:defenses[s.defense].points[i]);return score>=3;});}
function outcome(){const n=votes().filter(Boolean).length;return n>=3?'acquitted':n===2?'hung':'guilty';}
function save(){const packet={game:key,current:copy(s),history:copy(history)};try{localStorage.setItem(key,JSON.stringify(packet));}catch{}if(bridge){try{Promise.resolve(bridge.setState(packet)).catch(()=>$('saved').textContent='Save unavailable this visit');Promise.resolve(bridge.setContext({game:'Pumpkin Crypt Court',parent:'7ec75d35-30e4-4b7a-9354-831b3548cd77',phase:s.phase,evidence:s.exhibits.map(i=>evidence[i].title),defense:s.defense===null?null:defenses[s.defense].title,votes:votes().slice(0,s.revealed),verdict:s.phase==='verdict'?outcome():null,ending:s.ending})).catch(()=>{});}catch{}}}
function change(fn){history.push(copy(s));history=history.slice(-40);fn();draw();save();}
function choice(i,data,selected){return '<button data-choice="'+i+'" aria-pressed="'+selected+'"><strong>'+data.title+'</strong><span>'+data.text+'</span></button>';}
function draw(){
const v=votes();$('jury').innerHTML=beasts.map((b,i)=>{const shown=i<s.revealed;const reasons=shown?(v[i]?'Your evidence and defense meet my concern.':'Your evidence and defense leave my concern unanswered.'):s.exhibits.length?evidence[s.exhibits[s.exhibits.length-1]].reactions[i]:'I will hear your evidence.';
return '<article class="juror">'+face(i)+'<b>'+b.name+'</b><p class="priority">'+priorities[i]+'</p><div class="vote '+(shown?(v[i]?'free':'guilty'):'')+'">'+(shown?(v[i]?'NOT GUILTY':'GUILTY'):'VOTE SEALED')+'</div><p class="reason">'+reasons+'</p></article>';}).join('');
$('undo').disabled=!history.length;
$('summary').textContent='Evidence: '+(s.exhibits.map(i=>evidence[i].title).join(' + ')||'None admitted')+' · Defense: '+(s.defense===null?'Not chosen':defenses[s.defense].title)+(s.revealed?' · '+s.revealed+'/4 votes read':'')+(s.ending?' · '+s.ending:'');
let play='';
if(s.phase==='evidence'){
$('phase').textContent='01 / PRESENT EVIDENCE';$('headline').textContent='What belongs in the record?';$('story').textContent='The jurors say you opened their pumpkins. Present exactly two exhibits. Read their reactions before committing; each has a different concern.';
play='<div class="choices">'+evidence.map((e,i)=>choice(i,e,s.exhibits.includes(i))).join('')+'</div><p class="hint">'+s.exhibits.length+'/2 exhibits admitted. Select an admitted exhibit to withdraw it.</p><button class="primary" id="next" '+(s.exhibits.length!==2?'disabled':'')+'>Rest the evidence →</button>';
}else if(s.phase==='defense'){
$('phase').textContent='02 / CHOOSE A DEFENSE';$('headline').textContent='Your closing argument';$('story').textContent='Choose what you stand by. A juror votes not guilty when the exhibits and argument satisfy their concern. Three or four not-guilty votes acquit; two produce a hung jury; zero or one convicts.';
play='<div class="choices">'+defenses.map((d,i)=>choice(i,d,s.defense===i)).join('')+'</div><button class="primary" id="next" '+(s.defense===null?'disabled':'')+'>Submit defense & call the jury →</button>';
}else if(s.phase==='votes'){
$('phase').textContent='03 / READ THE VOTES';$('headline').textContent=s.revealed?'The jury speaks':'The candles fall silent';$('story').textContent=s.revealed?beasts[s.revealed-1].name+' votes '+(v[s.revealed-1]?'not guilty.':'guilty.'):'Your evidence is sealed. Call each juror and watch their vote appear.';
play='<button class="primary" id="next">'+(s.revealed<4?'Read '+beasts[s.revealed].name+'’s vote':'Enter the verdict')+' →</button>';
}else{
const o=outcome();$('phase').textContent='04 / VERDICT';$('headline').textContent={acquitted:'Acquitted · the crypt opens',hung:'Hung jury · another hearing',guilty:'Guilty · mend what you opened'}[o];
$('story').textContent={acquitted:'The court grants a pumpkin-opening permit. Knock three times to open the celebration pumpkin.',hung:'Two jurors vote each way. The pumpkins stay sealed. You may petition for a new hearing and try another evidence-and-defense combination.',guilty:'Your pumpkin-opening privileges are suspended. Complete three repairs to the crypt garden to earn a new hearing.'}[o];
play='<p class="stamp">'+v.filter(Boolean).length+'–'+(4-v.filter(Boolean).length)+' <small>NOT GUILTY / GUILTY</small></p>';
if(o==='acquitted')play+='<button class="primary" id="action" '+(s.actionCount>=3?'disabled':'')+'>Celebration pumpkin · knock '+Math.min(s.actionCount,3)+'/3</button><p class="hint">'+(s.actionCount>=3?'A golden pumpkin opens. All four jurors share a moonlit feast!':'Your permit allows you to open this pumpkin.')+'</p>';
if(o==='guilty')play+='<button class="primary" id="action" '+(s.actionCount>=3?'disabled':'')+'>'+['Replant the broken vine','Water the crypt roots','Mend the pumpkin bed','Service complete'][Math.min(s.actionCount,3)]+' · '+Math.min(s.actionCount,3)+'/3</button>';
if(o==='hung'||o==='guilty'&&s.actionCount>=3||o==='acquitted'&&s.actionCount>=3)play+='<button id="rehear" class="primary">'+(o==='acquitted'?'Play another trial':'Petition for a new hearing')+'</button>';
}
$('play').innerHTML=play;
document.querySelectorAll('[data-choice]').forEach(b=>b.onclick=()=>{const i=Number(b.dataset.choice);if(s.phase==='evidence'){if(!s.exhibits.includes(i)&&s.exhibits.length===2)return;change(()=>{s.exhibits=s.exhibits.includes(i)?s.exhibits.filter(e=>e!==i):s.exhibits.concat(i);});}else if(s.phase==='defense')change(()=>s.defense=i);});
if($('next'))$('next').onclick=()=>change(()=>{if(s.phase==='evidence'&&s.exhibits.length===2)s.phase='defense';else if(s.phase==='defense'&&s.defense!==null)s.phase='votes';else if(s.phase==='votes'){if(s.revealed<4)s.revealed++;else s.phase='verdict';}});
if($('action'))$('action').onclick=()=>{if(s.actionCount>=3)return;change(()=>{s.actionCount++;if(s.actionCount===3)s.ending=outcome()==='acquitted'?'Moonlit feast unlocked':'Garden repaired; hearing earned';});};
if($('rehear'))$('rehear').onclick=()=>change(()=>s=fresh());
}
$('undo').onclick=()=>{if(history.length){s=history.pop();draw();save();}};
$('reset').onclick=()=>change(()=>s=fresh());
draw();try{restore(JSON.parse(localStorage.getItem(key)));}catch{}
if(bridge){try{const initial=bridge.getState();if(initial&&typeof initial.then==='function')initial.then(restore).catch(()=>{});else restore(initial);bridge.setControlsPosition('top-right');bridge.setResetEnabled(false);bridge.setSharingEnabled(false);}catch{}}
window.addEventListener('widgetcanvas:restore',e=>restore(e.detail));
})();