Waiting games

Lead: Two mini games for the wait while a bot or agent works. Both run on the ASCII backgrounds. Big Fish turns the ocean into a game you play with your cursor. Bot Race is a typing race against your own bots.

A

Play them

HTML · Waiting games

B

How it would work in the app

Part	Plan
When	While a bot or agent is working, a Play while you wait button sits next to the working line. Nothing starts on its own
Big Fish	Runs on the ocean background (Kelp Forest). Your cursor is the fish. On phones you drag with a finger
Bot Race	Your racer against the bots in the chat, or the bots in the group. Words come from a coding word list
When the work is done	The game pauses and says the reply is ready. Esc or Stop playing leaves at any time
Settings	Settings → Appearance → Background gets Waiting games on or off

C

Decide

Build the games?Build both suggestedBig Fish and Bot Race, behind a Play button while bots work, on all three surfacesOnly Big Fishthe cursor game on the ocean backgroundOnly Bot Racethe typing race against your botsChange them firstreply with what to change

---
title: Waiting games
template: doc
---
Lead: Two mini games for the wait while a bot or agent works. Both run on the ASCII backgrounds. Big Fish turns the ocean into a game you play with your cursor. Bot Race is a typing race against your own bots.

## A Play them
```live h=760 title="Waiting games"
<style>
:root{--bg:#fff;--fill:#f4f4f5;--text:#18181b;--muted:#71717a;--line:#e4e4e7;--acc:#F2A93B}
html.dark{--bg:#17181b;--fill:#222428;--text:#ececee;--muted:#9a9aa3;--line:#2e3036}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif}
.bar{display:flex;gap:12px;align-items:center;margin:4px 0 12px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--fill);border-radius:10px;padding:3px}
.seg button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;padding:5px 12px;border-radius:8px;cursor:pointer}
.seg button.on{background:var(--bg);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.hint{color:var(--muted);font-size:13px}
.stage{position:relative;height:620px;border:1px solid var(--line);border-radius:14px;overflow:hidden;outline:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;gap:10px;font:600 12.5px/1.2 "SF Mono",Menlo,monospace;color:#e6f6fb;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.pill{background:rgba(0,0,0,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:5px 10px}
.banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;pointer-events:none;font:600 15px/1.4 -apple-system,system-ui,sans-serif;background:rgba(0,0,0,.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:14px 20px;border-radius:14px;max-width:80%}
.banner b{display:block;font-size:22px;margin-bottom:4px}
.working{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.88);color:#18181b;border-radius:12px;padding:8px 14px;font-size:13px;display:flex;gap:10px;align-items:center;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.working i{width:8px;height:8px;border-radius:50%;background:#D97757;display:block;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.working button{border:0;background:#18181b;color:#fff;border-radius:8px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer;pointer-events:auto}
</style>
<div class="bar">
  <div class="seg" id="tabs"><button data-g="fish" class="on">Big Fish</button><button data-g="race">Bot Race</button></div>
  <span class="hint" id="hint"></span>
</div>
<div class="stage" id="stage" tabindex="0">
  <canvas id="cv"></canvas>
  <div class="hud" id="hud"></div>
  <div class="banner" id="banner" hidden></div>
  <div class="working"><i></i><span id="wtext">Raven is working… 3 steps left</span><button id="stop">Stop playing</button></div>
</div>

<script>
const TAU=Math.PI*2,FONT='"JetBrains Mono","SF Mono",Menlo,Consolas,monospace';
const cv=document.getElementById('cv'),ctx=cv.getContext('2d'),stage=document.getElementById('stage'),hud=document.getElementById('hud'),banner=document.getElementById('banner');
let W=0,H=0,cw=8,chh=14,C=0,R=0,FS=13;
function fit(){const b=stage.getBoundingClientRect(),d=Math.min(2,devicePixelRatio||1);W=b.width;H=b.height;cv.width=W*d;cv.height=H*d;ctx.setTransform(d,0,0,d,0,0);FS=W<520?11:13;ctx.font=FS+'px '+FONT;cw=ctx.measureText('M').width;chh=FS*1.2;C=Math.ceil(W/cw);R=Math.ceil(H/chh);game&&game.resize&&game.resize()}
const rnd=(a,b)=>a+Math.random()*(b-a);
function bg(stops){const g=ctx.createLinearGradient(0,0,0,H);stops.forEach((c,i)=>g.addColorStop(i/(stops.length-1),c));ctx.globalAlpha=1;ctx.fillStyle=g;ctx.fillRect(0,0,W,H)}
function txt(x,y,s,col,a=1){ctx.globalAlpha=a;ctx.fillStyle=col;ctx.textBaseline='top';for(let i=0;i<s.length;i++)if(s[i]!==' ')ctx.fillText(s[i],(x+i)*cw,y*chh+FS*.1)}
function showBanner(h,sub){banner.innerHTML=`<b>${h}</b>${sub||''}`;banner.hidden=false}

// ---------- Big Fish: your cursor is a fish. Eat smaller fish, avoid bigger ones; eaten = respawn small.
const MIRROR={'>':'<','<':'>','(':')',')':'(','/':'\\','\\':'/'};
const flip=s=>[...s].reverse().map(ch=>MIRROR[ch]||ch).join('');
function fishShape(n){const mid='><'+'('.repeat(n)+'°>';if(n<4)return[mid];const w=mid.length;return['  '+'_'.repeat(n)+'  ',mid,'  '+'‾'.repeat(n)+'  ']}
const FISH_COL=['#fde68a','#fbbf24','#fb923c','#f87171','#e879f9','#94a3b8','#cbd5e1'];
const Fish={
 init(){this.reset(true);this.best=0;this.kelp=[...Array(14)].map(()=>({x:Math.random(),h:rnd(.3,.75),p:rnd(0,TAU)}));this.bub=[...Array(40)].map(()=>({x:Math.random(),y:Math.random(),v:rnd(1.5,3.5)}))},
 reset(first){this.me={x:C/2,y:R/2,tx:C/2,ty:R/2,size:1,xp:0,dir:1,inv:first?0:2};this.score=first?0:this.score;this.npc=[];for(let i=0;i<14;i++)this.spawn(true)},
 spawn(any){const big=Math.random()<.22;const s=Math.max(1,Math.min(7,Math.round(big?rnd(this.me.size+1,this.me.size+4):rnd(1,this.me.size+.6))));const dir=Math.random()<.5?1:-1;
  this.npc.push({x:any?rnd(0,C):(dir>0?-12:C+4),y:rnd(3,R-4),v:rnd(3,8)*(s>5?.7:1)/Math.sqrt(s),dir,s,p:rnd(0,TAU)})},
 resize(){},
 pointer(px,py){this.me.tx=px/cw;this.me.ty=py/chh},
 key(){},
 step(dt,t){const m=this.me;const dx=m.tx-m.x,dy=m.ty-m.y;m.x+=dx*Math.min(1,dt*6);m.y+=dy*Math.min(1,dt*6);if(Math.abs(dx)>.3)m.dir=dx>0?1:-1;m.inv=Math.max(0,m.inv-dt);
  const mw=fishShape(m.size)[Math.min(1,fishShape(m.size).length-1)].length,mh=fishShape(m.size).length;
  for(const f of this.npc){f.x+=f.v*f.dir*dt;f.y+=Math.sin(t*1.3+f.p)*dt*.6;
   const sh=fishShape(f.s),fw=sh[Math.min(1,sh.length-1)].length,fh=sh.length;
   // flee or chase a little
   const ddx=m.x-f.x,ddy=m.y-f.y,dist=Math.hypot(ddx/2,ddy);if(dist<10){if(f.s<m.size){f.y-=Math.sign(ddy)*dt*3}else if(f.s>m.size){f.y+=Math.sign(ddy)*dt*1.5}}
   const hit=Math.abs((m.x)-(f.x+fw/2))<(mw+fw)/2-1&&Math.abs((m.y)-(f.y+fh/2))<(mh+fh)/2-.3;
   if(hit&&!f.dead){if(f.s<m.size){f.dead=true;this.score+=f.s*10;m.xp+=f.s;if(m.xp>=m.size*4&&m.size<7){m.size++;m.xp=0;this.flash={t,txt:'Bigger!'}}}
    else if(f.s>m.size&&m.inv<=0){this.best=Math.max(this.best,this.score);this.flash={t,txt:'Eaten! Back to the start'};this.score=0;this.reset(false);return}}}
  this.npc=this.npc.filter(f=>!f.dead&&f.x>-16&&f.x<C+16);while(this.npc.length<14)this.spawn(false);
  hud.innerHTML=`<span class="pill">Score ${this.score}</span><span class="pill">Size ${m.size} / 7</span><span class="pill">Best ${Math.max(this.best,this.score)}</span>`},
 draw(t){bg(['#1d8aa0','#0f5a70','#062a38']);
  for(let i=0;i<5;i++){const x=(i*.23+.05+Math.sin(t*.1+i)*.03)*C;for(let y=0;y<R*.75;y++)if((y+i)%2===0)txt(x+y*.35,y,'/','#bff3ff',.06*(1-y/(R*.75)))}
  this.bub.forEach(b=>{const y=((b.y*R-t*b.v)%R+R)%R;txt(b.x*C+Math.sin(t*2+b.x*9),y,'o','#bdf2ff',.35)});
  this.kelp.forEach(k=>{const h=k.h*R*.5;for(let i=0;i<h;i++)txt(k.x*C+Math.sin(i*.2+t*1.1+k.p)*(i/h)*2.5,R-1-i,i%2?'(':')','#3fae6a',.75)});
  for(let x=0;x<C;x++)txt(x,R-1,x%3?'_':'.','#c9a96e',.6);
  for(const f of this.npc){const sh=fishShape(f.s).map(l=>f.dir>0?l:flip(l));const big=f.s>this.me.size;sh.forEach((l,j)=>txt(f.x,f.y+j,l,FISH_COL[f.s-1],big?.95:.85));if(big&&Math.hypot((this.me.x-f.x)/2,this.me.y-f.y)<12)txt(f.x+(f.dir>0?sh[0].length:-2),f.y,'!','#ff6b6b',.9)}
  const m=this.me,sh=fishShape(m.size).map(l=>m.dir>0?l:flip(l)),blink=m.inv>0&&Math.floor(t*8)%2;
  if(!blink){const w=sh[Math.min(1,sh.length-1)].length;sh.forEach((l,j)=>txt(m.x-w/2,m.y-sh.length/2+j,l,'#ffffff',1));txt(m.x-1,m.y-sh.length/2-1.2,'you','#ffffff',.55)}
  if(this.flash&&t-this.flash.t<1.4){ctx.globalAlpha=1-(t-this.flash.t)/1.4;ctx.fillStyle='#fff';ctx.font='600 20px -apple-system,system-ui,sans-serif';ctx.textAlign='center';ctx.fillText(this.flash.txt,W/2,H*.28);ctx.textAlign='left';ctx.font=FS+'px '+FONT}
  ctx.globalAlpha=1},
 hint:'Move your cursor to swim. Eat smaller fish to grow; stay away from bigger ones. Get eaten and you start small again.'
};

// ---------- Bot Race: type the words; your bots race you to the finish line.
const WORDS='deploy branch commit merge agent token render prompt stream schema review rebase cache socket widget kernel layout canvas thread signal module vector cursor sprite runtime shader lambda tensor router binary'.split(' ');
const RACERS=[{name:'You',col:'#ffffff',me:true},{name:'Raven',col:'#E07A5F'},{name:'Jev',col:'#2dd4bf'},{name:'Coda',col:'#60A5FA'},{name:'Clawd',col:'#A78BFA'}];
const GOAL=15;
const Race={
 init(){this.newRace()},
 newRace(){this.state='ready';this.done=[];this.typed='';this.err=0;this.words=[...Array(GOAL)].map(()=>WORDS[Math.floor(Math.random()*WORDS.length)]);this.racers=RACERS.map(r=>({...r,pos:0,rate:r.me?0:rnd(.42,.62),jit:rnd(0,9)}));this.idx=0;this.t0=0;this.chars=0;banner.hidden=true;showBanner('Bot Race','Type the word on screen. Each word moves you forward.<br>Start typing to go.')},
 resize(){},pointer(){},
 key(e){if(this.state==='done'){if(e.key==='Enter'){this.newRace()}return}
  if(e.key.length!==1&&e.key!=='Backspace')return;e.preventDefault();
  if(this.state==='ready'){this.state='go';this.t0=performance.now()/1000;banner.hidden=true}
  const w=this.words[this.idx];if(e.key==='Backspace'){this.typed=this.typed.slice(0,-1);return}
  if(e.key===' ')return;const next=this.typed+e.key.toLowerCase();
  if(w.startsWith(next)){this.typed=next;this.chars++;if(next===w){this.idx++;this.typed='';this.racers[0].pos=this.idx/GOAL;if(this.idx>=GOAL)this.finish(this.racers[0])}}else{this.err=performance.now()/1000}},
 finish(r){if(!this.done.includes(r))this.done.push(r);if(r.me||this.done.length===RACERS.length){this.state='done';const place=this.done.indexOf(this.racers[0])+1;const secs=performance.now()/1000-this.t0;const wpm=Math.round(this.chars/5/(secs/60));
  showBanner(place===1?'You won!':place?`You came ${['','1st','2nd','3rd','4th','5th'][place]}`:'The bots won',`${wpm} words per minute · Press Enter to race again`)}},
 step(dt,t){if(this.state!=='go')return;for(const r of this.racers){if(r.me||r.pos>=1)continue;r.pos=Math.min(1,r.pos+dt*r.rate/GOAL*(1+.35*Math.sin(t*1.7+r.jit)));if(r.pos>=1)this.finish(r)}
  const secs=performance.now()/1000-this.t0;hud.innerHTML=`<span class="pill">Word ${Math.min(this.idx+1,GOAL)} / ${GOAL}</span><span class="pill">${Math.round(this.chars/5/Math.max(.1,secs/60))} wpm</span>`},
 draw(t){bg(['#16121f','#221a33']);
  for(let i=0;i<60;i++){const x=(i*37%C),y=(i*53%R);txt(x,y,'.','#c4b5fd',.15+.15*Math.sin(t+i))}
  const top=Math.round(R*.12),laneH=Math.max(2,Math.floor(R*.11)),x0=12,x1=C-6,len=x1-x0;
  this.racers.forEach((r,i)=>{const y=top+i*laneH;txt(1,y,r.name.padEnd(8).slice(0,8),r.col,.9);for(let x=x0;x<x1;x++)txt(x,y+1,x%2?'-':'·','#6b5b8a',.35);
   for(let k=0;k<laneH-1;k++)txt(x1,y+k,k%2?'▒':'█','#ffffff',.5);
   const px=x0+r.pos*len;for(let k=1;k<6;k++)txt(px-k,y,'=','#ffffff',.18*(1-k/6)*(this.state==='go'?1:0));
   const bob=this.state==='go'?Math.round(Math.sin(t*10+i)*.4):0;txt(px,y+bob,r.me?'@>':'█>',r.col,1);if(this.done.includes(r))txt(x1+2,y,'#'+(this.done.indexOf(r)+1),r.col,1)});
  // the word to type
  const w=this.words[this.idx]||'',wy=Math.round(R*.78);ctx.font='600 '+(FS*2.4)+'px '+FONT;ctx.textBaseline='top';const big=ctx.measureText('M').width,sx=W/2-w.length*big/2;const shake=t-this.err<.25?Math.sin(t*90)*4:0;
  for(let i=0;i<w.length;i++){ctx.globalAlpha=1;ctx.fillStyle=i<this.typed.length?'#F2A93B':(t-this.err<.25&&i===this.typed.length?'#f87171':'#ece8ff');ctx.fillText(w[i],sx+i*big+shake,wy*chh)}
  ctx.globalAlpha=.5;ctx.fillStyle='#ece8ff';ctx.font=FS+'px '+FONT;const nx=this.words.slice(this.idx+1,this.idx+4).join('  ');ctx.fillText(nx,W/2-ctx.measureText(nx).width/2,wy*chh+FS*3.4);ctx.globalAlpha=1},
 hint:'Click the game, then type. Each finished word moves your @ forward. Raven, Jev, Coda and Clawd race at their own pace.'
};

let game=null,last=0,clock=0,playing=true;
function pick(g){game=g==='fish'?Fish:Race;document.querySelectorAll('#tabs button').forEach(b=>b.classList.toggle('on',b.dataset.g===g));document.getElementById('hint').textContent=game.hint;banner.hidden=true;hud.innerHTML='';game.init();stage.focus()}
document.querySelectorAll('#tabs button').forEach(b=>b.onclick=()=>pick(b.dataset.g));
stage.addEventListener('pointermove',e=>{const b=stage.getBoundingClientRect();game.pointer(e.clientX-b.left,e.clientY-b.top)});
stage.addEventListener('pointerdown',()=>stage.focus());
stage.addEventListener('keydown',e=>{if(e.key==='Escape'){document.getElementById('stop').click();return}game.key(e)});
document.getElementById('stop').onclick=()=>{playing=!playing;document.getElementById('stop').textContent=playing?'Stop playing':'Play';if(!playing)showBanner('Paused','The background keeps moving. Press Play to go back in.');else banner.hidden=true};
// The agent finishing ends the game politely (simulated here every 90 s).
setInterval(()=>{if(!playing)return;showBanner('Raven is done','Your reply is ready. The game is paused where you left it.');playing=false;document.getElementById('stop').textContent='Play';document.getElementById('wtext').textContent='Raven finished'},90000);
new ResizeObserver(fit).observe(stage);
function loop(now){requestAnimationFrame(loop);const dt=last?Math.min(.05,(now-last)/1000):0;last=now;clock+=dt;if(!game)return;if(playing)game.step(dt,clock);game.draw(clock)}
fit();pick('fish');requestAnimationFrame(loop);
</script>
```

## B How it would work in the app
| Part | Plan |
|---|---|
| When | While a bot or agent is working, a **Play while you wait** button sits next to the working line. Nothing starts on its own |
| Big Fish | Runs on the ocean background (Kelp Forest). Your cursor is the fish. On phones you drag with a finger |
| Bot Race | Your racer against the bots in the chat, or the bots in the group. Words come from a coding word list |
| When the work is done | The game pauses and says the reply is ready. Esc or **Stop playing** leaves at any time |
| Settings | Settings → Appearance → Background gets **Waiting games** on or off |

## C Decide
```ask
Build the games?
* Build both | Big Fish and Bot Race, behind a Play button while bots work, on all three surfaces
- Only Big Fish | the cursor game on the ocean background
- Only Bot Race | the typing race against your bots
- Change them first | reply with what to change
```