AFR Arcade

/* AFR Arcade: paste into PodPage "Custom Javascript Code". Builds the arcade inside

. */ (function(){ var MARKUP=`

`; function start(){ var R=document.getElementById('afr-arcade');if(!R||R.getAttribute('data-ready'))return;R.setAttribute('data-ready','1'); R.innerHTML=MARKUP; const $=s=>R.querySelector(s),$$=s=>[...R.querySelectorAll(s)],rm=matchMedia('(prefers-reduced-motion: reduce)').matches,sleep=ms=>new Promise(r=>setTimeout(r,ms)); // ===== GAME LIST: to add a game, copy one entry and change title, url, desc, controls, notes. ===== // url = the web address of the game page. Games open inside this page in an iframe. const GAMES=[ {id:'lil-budd',title:'Lil Budd: Focus Sparks',url:'https://afr-lil-budd.divine-king-83f5.workers.dev/', desc:'Run, jump, and collect 10 Focus Sparks. Stomp the triggers: STRESS, CRAVING, and HALT. Every trigger is a pattern you can notice and reframe.', controls:'Click the game once, then use arrow keys to move and space or up arrow to jump. On a phone, use the on-screen buttons (try Full screen).', notes:'

'}, {id:'g2',title:'Game 2: Coming soon',soon:true}, {id:'g3',title:'Game 3: Coming soon',soon:true} ]; const playable=GAMES.filter(g=>!g.soon);let cur=null; $('#more').innerHTML=GAMES.filter(g=>g.soon).map(g=>`

`).join(''); const box=$('#game-box'); function pick(g){cur=g; $$('#picker .btn').forEach(b=>b.setAttribute('aria-pressed',b.dataset.id===g.id)); $('#ginfo').innerHTML=`

${g.title}

${g.desc}

Controls: ${g.controls}

`; $('#gnotes').innerHTML=g.notes||''; const ok=g.url&&g.url.indexOf('PASTE_')!==0; $('#gopen').href=ok?g.url:'#';$('#gopen').hidden=!ok; box.innerHTML=ok?`Play ${g.title}`:'

This game is almost ready. Go to the Reset Room below in the meantime.

'; const p=$('#gplay');if(p)p.addEventListener('click',()=>{box.innerHTML='';const f=document.createElement('iframe');f.src=g.url;f.title=g.title;f.allow='fullscreen; autoplay';f.setAttribute('allowfullscreen','');box.appendChild(f);f.focus()})} $('#picker').innerHTML=playable.map(g=>`${g.title}`).join(''); $$('#picker .btn').forEach(b=>b.addEventListener('click',()=>pick(playable.find(g=>g.id===b.dataset.id)))); $('#gfull').addEventListener('click',()=>{const f=box.requestFullscreen||box.webkitRequestFullscreen;if(f)f.call(box)}); // The game page tells this page when the player wins, so the Reset Room opens. addEventListener('message',e=>{const f=box.querySelector('iframe');if(!f||e.source!==f.contentWindow)return;if(e.data&&e.data.type==='afr:game-won')dispatchEvent(new Event('afr:game-won'))}); if(playable.length)pick(playable[0]); function openReset(win){const r=$('#reset');r.hidden=false;if(win)$('#banner').hidden=false;setTimeout(()=>r.scrollIntoView({behavior:rm?'auto':'smooth'}),win?3000:0)} $('#qx').addEventListener('click',()=>location.replace('https://www.google.com')); $$('[data-help]').forEach(b=>b.addEventListener('click',()=>{const d=$('#'+b.dataset.help);d.open=true;d.scrollIntoView({behavior:rm?'auto':'smooth',block:'start'})})); $$('[data-open]').forEach(b=>b.addEventListener('click',()=>openReset(false))); addEventListener('afr:game-won',()=>openReset(true)); const MAP={stressed:'t-breathe',anxious:'t-ground',crash:'t-pause',minute:'t-halt'}; $$('.mood').forEach(b=>b.addEventListener('click',()=>{$$('.mood').forEach(x=>x.setAttribute('aria-pressed',x===b));$$('.tag').forEach(t=>t.hidden=true);const t=$('#'+MAP[b.dataset.m]);t.querySelector('.tag').hidden=false;t.scrollIntoView({behavior:rm?'auto':'smooth',block:'center'})})); // Breathe let run=0; function bReset(msg){const c=$('#circle');c.style.transition='none';c.style.transform='none';$('#btxt').textContent='Ready when you are.';$('#bstart').disabled=false;$('#bmsg').textContent=msg||''} $('#bstart').addEventListener('click',async()=>{const id=++run,c=$('#circle'),t=$('#btxt');$('#bstart').disabled=true;$('#bmsg').textContent=''; for(let r=0;r<4;r++)for(const [l,s,k] of [['Breathe in',4,1.4],['Hold',4,1.4],['Breathe out',6,1]]){ if(id!==run)return; if(!rm&&l!=='Hold'){c.style.transition='transform '+s+'s ease-in-out';c.style.transform='scale('+k+')'} for(let n=s;n>0;n--){t.textContent=l+' '+n;await sleep(1000);if(id!==run)return}} bReset('Done. Notice how your shoulders feel.')}); $('#bstop').addEventListener('click',()=>{run++;bReset('')}); // Ground const GR=['5 things you can see','4 things you can feel','3 things you can hear','2 things you can smell','1 thing you can taste']; $('#glist').innerHTML=GR.map(t=>`

• ${t}

`).join(''); $('#glist').addEventListener('change',()=>{$('#gmsg').textContent=$$('.gc').every(c=>c.checked)?"You're here. You're present.":''}); // Pause let pt=null,left=600;const fmt=s=>String(Math.floor(s/60)).padStart(2,'0')+':'+String(s%60).padStart(2,'0'); function pstop(msg){clearInterval(pt);pt=null;left=600;$('#ptime').textContent=fmt(600);$('#pstart').disabled=false;$('#pmsg').textContent=msg||''} $('#pstart').addEventListener('click',()=>{if(pt)return;$('#pstart').disabled=true;$('#pmsg').textContent='Timer started. You have time.';left=600;pt=setInterval(()=>{left--;$('#ptime').textContent=fmt(left);if(left<=0)pstop('Ten minutes passed. Still want to do it? Choose slowly.')},1000)}); $('#pstop').addEventListener('click',()=>pstop('Stopped early. That counts.')); // HALT const HALT=[['Hungry','Eat something real and drink water.'],['Angry','Name what happened in one sentence. Then step away from it for 10 minutes.'],['Lonely',`Text or call one safe person. "Got a minute?" is enough.`],['Tired','Rest your eyes for 5 minutes, or plan an early night.']]; $('#hlist').innerHTML=HALT.map((h,i)=>`

• ${h[0]}

`).join(''); $('#hlist').addEventListener('change',e=>{$('#h'+e.target.dataset.h).hidden=!e.target.checked}); } if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',start);else start(); })();