function arcadeRuntime(){ 'use strict'; const d=window.DATA,$=id=>document.getElementById(id),root=$('game'),canvas=$('world'); const clamp=(v,a,b)=>Math.max(a,Math.min(b,v)); const nativeRAF=typeof window.requestAnimationFrame==='function'&&typeof window.cancelAnimationFrame==='function'; const raf=nativeRAF?fn=>window.requestAnimationFrame(fn):fn=>setTimeout(()=>fn(Date.now()),33); const caf=nativeRAF?id=>window.cancelAnimationFrame(id):id=>clearTimeout(id); const mq=window.matchMedia?window.matchMedia('(prefers-reduced-motion: reduce)'):null; let reduced=!!(mq&&mq.matches)||!d.animations,calm=reduced,assist=false,muted=!d.sound,renderer=null,contextLost=false; const hex=h=>[1,3,5].map(i=>parseInt(h.slice(i,i+2),16)/255); function lum(h){let c=hex(h).map(v=>v<=.04045?v/12.92:((v+.055)/1.055)**2.4);return c[0]*.2126+c[1]*.7152+c[2]*.0722} function ink(h){return lum(h)>.179?'#101820':'#FFFFFF'} const vars={primary:d.primary,accent:d.accent,bg:d.bg,card:d.card,font:'"'+d.font+'", Arial, sans-serif',ts:d.titleSize+'px',ss:d.subtitleSize+'px',is:d.contentSize+'px',align:d.align,radius:d.radius+'px',gap:'12px',tr:d.animations&&!reduced?'180ms':'0ms',transition:d.animations&&!reduced?'180ms':'0ms',sheet:d.animations&&!reduced?'260ms':'0ms','on-primary':ink(d.primary),'on-card':ink(d.card),'on-accent':ink(d.accent)}; Object.entries(vars).forEach(([k,v])=>root.style.setProperty('--'+k,v));document.body.style.background=d.bg||'#F3F2F1';document.title=d.title||'Arcade Drive'; if(['Lato','Montserrat','Open Sans','Oswald','Playfair Display','Poppins','Raleway','Roboto','Source Sans Pro'].includes(d.font)){const l=document.createElement('link');l.rel='stylesheet';l.href='https://fonts.googleapis.com/css2?family='+encodeURIComponent(d.font).replace(/%20/g,'+')+':wght@400;500;600;700;800&display=swap';document.head.appendChild(l)} function el(tag,text,cls,parent){const e=document.createElement(tag);if(text!==undefined)e.textContent=text;if(cls)e.className=cls;if(parent)parent.appendChild(e);return e} function focus(e){if(e)try{e.focus({preventScroll:true})}catch(_){e.focus()}} let announceTimer=0;function announce(s){clearTimeout(announceTimer);$('live').textContent='';announceTimer=setTimeout(()=>$('live').textContent=s,30)} const items=Array.isArray(d.items)?d.items.filter(q=>q&&q.question&&Array.isArray(q.options)&&q.options.filter(Boolean).length>=2):[]; const length=d.routeLength,checkpoints=items.map((q,i)=>length*(q.at||((i+1)/(items.length+1)*100))/100); const difficulty={relaxed:{speed:34,traffic:3,drift:.2,damage:7},standard:{speed:43,traffic:5,drift:.6,damage:12},expert:{speed:52,traffic:7,drift:1,damage:20}}[d.difficulty]||{speed:43,traffic:5,drift:.6,damage:12}; let phase='intro',previous='drive',z=0,x=0,v=0,steer=0,cp=0,correct=0,road='normal',collisionCool=0,elapsed=0,runSeconds=0,last=0,frame=0,lastHud=0,bannerLeft=0,timerAnnounced=-1,brake=false; let resultRecords=[],traffic=[],keys={left:false,right:false,brake:false},attempt=0,chosen=-1,answered=false; let confettiFrame=0,confettiNodes=[],audioPool=[]; const soundBtn=$('soundBtn'),motionBtn=$('motionBtn'),pauseBtn=$('pauseBtn'); function clearConfetti(){caf(confettiFrame);confettiFrame=0;for(const n of confettiNodes)n.remove();confettiNodes=[]} function stopAudio(){for(const a of audioPool){try{a.pause();a.currentTime=0}catch(_){}}audioPool=[]} function play(slot){if(muted||!d.sound||typeof window.Audio!=='function')return;const src=d.sounds&&d.sounds[slot];if(!src)return;try{const a=new Audio(src);a.volume=.35;audioPool.push(a);a.onended=()=>{audioPool=audioPool.filter(x=>x!==a)};const p=a.play();if(p&&p.catch)p.catch(()=>{})}catch(_){}} function clearInput(){keys.left=false;keys.right=false;keys.brake=false;steer=0} function setPhase(p){caf(frame);frame=0;last=0;clearInput();phase=p;root.dataset.state=p;$('driveFocus').hidden=!(p==='drive'||p==='approach');for(const id of ['intro','decision','results','pause','calmPanel'])$(id).hidden=true; $('controls').hidden=!(p==='drive'||p==='approach');$('telemetry').hidden=p==='intro'||p==='results'||!d.showProgress;pauseBtn.hidden=!(p==='drive'||p==='approach'||p==='question'||p==='feedback'||p==='calm'); if(['intro','question','feedback','pause','results','calm'].includes(p))stopAudio();if(['drive','approach'].includes(p))frame=raf(loop); } function draw(snap=false){if(renderer&&!contextLost)try{renderer.render({z,x,speed:v,steer,braking:brake||phase==='approach',boost:road==='open'&&phase==='drive',traffic,snap},1/60)}catch(_){graphicsFallback()}} function graphicsFallback(){renderer=null;contextLost=true;calm=true;root.classList.add('no3d');$('graphicsNote').hidden=false;$('graphicsNote').textContent='3D graphics are unavailable. You can complete every decision in reduced-motion mode.';motionBtn.disabled=true;if(phase==='drive'||phase==='approach'){setPhase('calm');showCalm()}} try{renderer=createDriveRenderer(canvas,d,checkpoints);draw(true)}catch(_){graphicsFallback()} canvas.addEventListener('webglcontextlost',e=>{e.preventDefault();contextLost=true;calm=true;$('graphicsNote').hidden=false;$('graphicsNote').textContent='Graphics paused. Your learning progress is safe. Continue in reduced-motion mode.';if(['drive','approach'].includes(phase)){setPhase('calm');showCalm()}}); canvas.addEventListener('webglcontextrestored',()=>{try{renderer=createDriveRenderer(canvas,d,checkpoints);contextLost=false;draw(true);$('graphicsNote').textContent='Graphics restored. Continue your current mode or switch motion on.';motionBtn.disabled=false}catch(_){graphicsFallback()}}); $('gameTitle').textContent=d.title;$('instructions').textContent=d.subtitle; $('routeSummary').textContent=(d.routeLength/1000).toFixed(1)+' km · '+items.length+' checkpoints · '+d.passScore+'% to pass'; $('finishMessage').textContent=d.completionMessage; $('modeCalm').checked=calm;$('modeAssist').checked=assist; $('modeCalm').onchange=e=>{calm=reduced||contextLost||e.target.checked;e.target.checked=calm;syncMotion()}; $('modeAssist').onchange=e=>assist=e.target.checked; function syncMotion(){motionBtn.textContent=calm?'Motion: reduced':'Reduce motion';motionBtn.setAttribute('aria-pressed',String(calm));root.classList.toggle('calm',calm);$('modeCalm').checked=calm} function syncSound(){soundBtn.textContent=muted?'Sound off':'Sound on';soundBtn.setAttribute('aria-pressed',String(!muted));soundBtn.hidden=!d.sound} syncMotion();syncSound(); soundBtn.onclick=()=>{muted=!muted;syncSound();if(muted)stopAudio();else play('correct')}; motionBtn.onclick=()=>{if(reduced||contextLost){announce('Reduced motion follows your device or the designer setting.');return}calm=!calm;syncMotion();clearConfetti();if(phase==='intro')return;if(phase==='drive'||phase==='approach'){setPhase('calm');showCalm()}else if(phase==='calm')resumeDrive();announce(calm?'Reduced motion enabled. Use Next checkpoint.':'Driving mode enabled.')}; if(mq){const change=e=>{reduced=e.matches||!d.animations;if(reduced){calm=true;syncMotion();clearConfetti();if(['drive','approach'].includes(phase)){setPhase('calm');showCalm()}}};if(mq.addEventListener)mq.addEventListener('change',change);else if(mq.addListener)mq.addListener(change)} function makeTraffic(){traffic=[];if(road==='open')return;const slow=road==='slow',count=difficulty.traffic+(slow?3:0),gap=slow?44:58,pace=slow?.7:1;for(let i=0;i{if(cp0)return;collisionCool=1.6;v*=.48;root.classList.add('hit');message('Contact. Slow down and find a clear lane.');play('incorrect')} function loop(t){frame=0;if(!['drive','approach'].includes(phase))return;let dt=last?Math.min(.05,(t-last)/1000):1/60;last=t;runSeconds+=dt;if(d.timer)elapsed+=dt; if(d.timer&&elapsed>=d.timeLimit){finish('time');return} let remaining=d.timeLimit-elapsed;if(d.timer&&remaining<=5&&Math.ceil(remaining)!==timerAnnounced){announce(Math.ceil(remaining)+' seconds remaining.');timerAnnounced=Math.ceil(remaining)} collisionCool=Math.max(0,collisionCool-dt);if(collisionCool<.8)root.classList.remove('hit');if(bannerLeft>0){bannerLeft-=dt;if(bannerLeft<=0)$('banner').hidden=true} let next=cpt.z>z&&t.z4.4){v*=1-dt*.65;if(Math.abs(x)>5.2){x=clamp(x,-5.2,5.2);hit();if(phase==='results')return}} z+=v*dt; for(const tr of traffic){tr.z+=tr.speed*dt;if(phase==='drive'&&Math.abs(tr.z-z)<3.5&&Math.abs(tr.x-x)<1.8&&!tr.hit){tr.hit=true;hit();if(phase==='results')return} if(!tr.passed&&tr.z=next-1){z=next;v=0;draw();showQuestion();return} if(cp>=items.length&&z>=length){z=length;v=0;draw();finish();return} if(renderer&&!contextLost)renderer.render({z,x,speed:v,steer,braking:brake||phase==='approach',boost:road==='open'&&phase==='drive',traffic},dt); if(t-lastHud>100){hud();lastHud=t}frame=raf(loop); } function icon(path,size,width){const ns='http://www.w3.org/2000/svg',s=document.createElementNS(ns,'svg'),p=document.createElementNS(ns,'path');s.setAttribute('viewBox','0 0 24 24');s.setAttribute('width',size);s.setAttribute('height',size);s.setAttribute('aria-hidden','true');p.setAttribute('d',path);p.setAttribute('fill','none');p.setAttribute('stroke','currentColor');p.setAttribute('stroke-width',width);p.setAttribute('stroke-linecap','round');p.setAttribute('stroke-linejoin','round');s.appendChild(p);return s} function showQuestion(){setPhase('question');v=0;attempt=0;chosen=-1;answered=false;$('decision').hidden=false;$('banner').hidden=true;const item=items[cp];$('checkpointLabel').textContent='CHECKPOINT '+(cp+1)+' OF '+items.length;$('questionPane').hidden=false;$('questionTitle').textContent=item.question;$('scenario').textContent=item.context||'';$('scenario').hidden=!item.context;$('answers').replaceChildren();$('feedback').hidden=true;$('continueBtn').hidden=true;$('retryBtn').hidden=true; item.options.forEach((text,i)=>{const b=el('button',undefined,'answer',$('answers'));b.type='button';el('span',String.fromCharCode(65+i),'optionLetter',b);el('span',text,'answerText',b);b.setAttribute('aria-label',String.fromCharCode(65+i)+'. '+text);b.onclick=()=>answer(i)}); hud();draw(true);focus($('questionTitle'));announce('Checkpoint '+(cp+1)+'. '+item.question); } function answer(i){if(phase!=='question'||answered)return;answered=true;chosen=i;attempt++;const q=items[cp],good=i===q.correct,first=attempt===1; if(first){resultRecords.push({question:q.question,selected:i,correct:good});road=good?'open':'slow';if(good)correct++} setPhase('feedback');$('decision').hidden=false;$('questionPane').hidden=true;const final=good||!d.retry||!first; const fb=$('feedback');fb.replaceChildren();const head=el('div',undefined,'verdict',fb),badge=el('span',undefined,'verdictIcon'+(good?' good':''),head);badge.appendChild(icon(good?'M5 12.5l4.5 4.5L19 7.5':'M6 6l12 12M18 6L6 18',28,3.2));el('strong',good?'Correct':final?'Not quite':'Try another response','feedbackTitle',head); el('p',good?(q.feedbackCorrect||q.feedback||'Correct.'):(q.feedbackIncorrect||q.feedback||'Review the best response.'),'',fb); if(!good&&final){const best=el('p',undefined,'best',fb);el('strong','Best response: ','',best);best.appendChild(document.createTextNode(q.options[q.correct]))} if(good&&(calm||!first))el('p',first?'Your first response counts toward your learning score.':'Practice complete. Your first response determines the score.','reward',fb); if(final&&!calm){const open=road==='open',line=el('div',undefined,'roadLine'+(open?' open':''),fb);line.appendChild(icon(open?'M6 11l6-6 6 6M6 18l6-6 6 6':'M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18M7 12h10',24,2.6));el('span',open?'Open road ahead':'Slow traffic ahead','',line)} fb.hidden=false;$('retryBtn').hidden=good||!d.retry||!first;$('continueBtn').hidden=!good&&d.retry&&first; $('continueBtn').textContent=cp===items.length-1?'Drive to the finish':'Continue drive';if(calm)$('continueBtn').textContent=cp===items.length-1?'Finish route':'Continue route'; play(good?'correct':'incorrect');focus(fb);announce((good?'Correct. ':'Incorrect. ')+fb.textContent);hud(); } $('retryBtn').onclick=()=>{setPhase('question');$('decision').hidden=false;$('questionPane').hidden=false;answered=false;$('feedback').hidden=true;$('retryBtn').hidden=true;$('continueBtn').hidden=true;focus($('answers').firstElementChild);announce('Try again. Your first response remains your scored response.')}; $('continueBtn').onclick=()=>{cp++;clearConfetti();if(calm&&cp>=items.length){z=length;finish();return}z+=2;x=0;makeTraffic();resumeDrive();if(!calm&&road!=='normal'){if(road==='open')play('checkpoint');$('banner').textContent=road==='open'?'Open road. Speed burst on.':'Slow traffic ahead.';$('banner').hidden=false;bannerLeft=2.5}announce(calm?'Continue to the next checkpoint.':'Drive resumed.')}; function finish(reason){setPhase('results');clearConfetti();stopAudio();v=0;$('results').hidden=false;$('banner').hidden=true;pauseBtn.hidden=true;const pct=items.length?Math.round(correct/items.length*100):0,passed=!reason&&pct>=d.passScore; $('resultKicker').textContent=passed?'MISSION COMPLETE':'MISSION REVIEW';$('resultTitle').textContent=reason==='time'?'Time trial ended':passed?d.scorecardTitle:'Route complete. Try again.'; $('resultScore').textContent=pct+'%';$('resultScoreLabel').textContent=correct+' of '+items.length+' first responses correct';$('resultPass').textContent='Pass mark '+d.passScore+'%';$('finishMessage').textContent=reason==='time'?'The driving time ran out. Try a gentler speed, brake less, or choose reduced-motion mode.':passed?d.completionMessage:'Review your decisions below, then drive again. '+d.completionMessage; const review=$('review');review.replaceChildren();items.forEach((q,i)=>{const rec=resultRecords[i],row=el('details',undefined,'reviewItem',review);el('summary',(rec&&rec.correct?'✓ Correct':rec?'✕ Review':'○ Not reached')+' · Checkpoint '+(i+1),'',row);el('p',q.question,'',row);if(rec)el('p','Your response: '+q.options[rec.selected],'',row);el('p','Best response: '+q.options[q.correct],'',row);el('p',q.feedbackCorrect||q.feedback||'','',row)}); $('restartBtn').hidden=!d.allowRestart;draw(true);focus($('resultTitle'));announce($('resultTitle').textContent+'. '+pct+' percent. '+correct+' of '+items.length+' correct.');if(passed){play('win');if(d.celebrate&&!calm&&!reduced)celebrate()} } function celebrate(){clearConfetti();if(!window.requestAnimationFrame)return;const area=$('celebration'),particles=[];for(let i=0;i<40;i++){const p=el('i',undefined,'confetti',area);p.dataset.confetti='true';p.style.background=i%2?d.primary:d.accent;particles.push({e:p,x:Math.random()*100,y:-30-Math.random()*250,v:35+Math.random()*65,r:Math.random()*180});confettiNodes.push(p)}let prev=0,duration=0;function tick(t){let dt=prev?Math.min(.05,(t-prev)/1000):0;prev=t;duration+=dt;particles.forEach(p=>{p.y+=p.v*dt;p.r+=40*dt;p.e.style.transform='translate('+p.x+'vw,'+p.y+'px) rotate('+p.r+'deg)'});if(duration<4&&phase==='results')confettiFrame=raf(tick);else clearConfetti()}confettiFrame=raf(tick)} function pause(){if(!['drive','approach','question','feedback','calm'].includes(phase))return;previous=phase;setPhase('pause');$('pause').hidden=false;draw(true);focus($('resumeBtn'));announce('Paused. The route timer is stopped.')} function resume(){setPhase(previous);if(previous==='question'||previous==='feedback'){$('decision').hidden=false;focus(previous==='question'?$('questionTitle'):$('feedback'))}else if(previous==='calm')showCalm();else focus($('driveFocus'));announce('Resumed.')} pauseBtn.onclick=pause;$('resumeBtn').onclick=resume;$('restartBtn').onclick=start;$('startBtn').onclick=start;$('pauseRestart').onclick=start; function actionKey(e,down){const tag=e.target.tagName;if(['INPUT','TEXTAREA','SELECT'].includes(tag))return;const k=e.key.toLowerCase();if(down&&(k==='p'||k==='escape')){if(phase==='pause')resume();else pause();e.preventDefault();return}if(!['drive','approach'].includes(phase))return; if(['arrowleft','arrowright','arrowdown','a','d','s'].includes(k)){if(k==='arrowleft'||k==='a')keys.left=down;if(k==='arrowright'||k==='d')keys.right=down;if(k==='arrowdown'||k==='s')keys.brake=down;e.preventDefault()}} document.addEventListener('keydown',e=>actionKey(e,true));document.addEventListener('keyup',e=>actionKey(e,false)); function hold(id,key){let b=$(id),pointer=false;b.addEventListener('pointerdown',e=>{if(phase!=='drive')return;pointer=true;keys[key]=true;try{b.setPointerCapture(e.pointerId)}catch(_){}});const release=()=>{pointer=false;keys[key]=false};for(const event of ['pointerup','pointercancel','lostpointercapture'])b.addEventListener(event,release);b.addEventListener('click',e=>{if(e.detail===0&&phase==='drive'){if(key==='left')x=clamp(x+1.7,-5.2,5.2);if(key==='right')x=clamp(x-1.7,-5.2,5.2);if(key==='brake')v*=.7}})} hold('leftBtn','left');hold('rightBtn','right');hold('brakeBtn','brake'); document.addEventListener('visibilitychange',()=>{if(document.hidden){clearInput();if(['drive','approach','question','feedback','calm'].includes(phase))pause();stopAudio();clearConfetti()}});window.addEventListener('blur',()=>{clearInput();if(phase==='drive'||phase==='approach')pause()}); let resizeTimer=0;window.addEventListener('resize',()=>{clearTimeout(resizeTimer);resizeTimer=setTimeout(()=>draw(true),150)}); window.addEventListener('pagehide',()=>{caf(frame);clearConfetti();stopAudio();clearTimeout(announceTimer);clearTimeout(resizeTimer);if(renderer)renderer.dispose()}); setPhase('intro');if(!items.length){$('intro').hidden=false;$('introContent').replaceChildren();el('h1','No content has been added yet.','',$('introContent'));motionBtn.hidden=true;soundBtn.hidden=true}else{$('intro').hidden=false;focus($('gameTitle'))} }