Three-task paper hydra

HTML

<main><header><p class="eyebrow">THE PAPER HYDRA</p><h1>Three heads. Three tasks.</h1><p id="progress" aria-live="polite"></p><div class="track"><span id="bar"></span></div></header><section class="scene" aria-label="Your task hydra"><svg id="art" viewBox="0 0 480 340" role="img" aria-label="A hand-drawn paper hydra"><defs><pattern id="paper" width="9" height="9" patternUnits="userSpaceOnUse"><path d="M1 3h2M6 7h1" stroke="#806647" stroke-opacity=".1"/></pattern></defs><path d="M22 317Q226 307 458 320" fill="none" stroke="#d4c6ad" stroke-width="2"/><g id="dragon"><path d="M135 271L100 284L76 266L64 292L119 302L164 294L184 313L211 312L207 286L277 287L279 313L306 311L320 289L366 290L395 266L375 274L353 258L327 266L296 228L187 232Z" fill="#c8d7af" stroke="#394936" stroke-width="2.4" stroke-linejoin="round"/><path d="M174 272L194 247L287 249L312 278L267 294L212 292Z" fill="#ebdfbd" stroke="#526044" stroke-width="1.6"/><path d="M195 251L268 294M289 250L212 292M170 267l-35 4M322 277l30-1" fill="none" stroke="#718164" stroke-width="1" stroke-dasharray="3 4"/><g id="heads"></g><path d="M166 230l-11-17 20 6 3-21 14 15M289 229l13-17 8 17 19-10-6 20" fill="#a9bb91" stroke="#394936" stroke-width="2" stroke-linejoin="round"/></g><g id="kite" style="display:none"><path d="M240 29L338 126L239 242L145 124Z" fill="#ecb978" stroke="#55432f" stroke-width="2.5" stroke-linejoin="round"/><path d="M240 29L239 242L145 124L338 126Z" fill="#c7d8b1" stroke="#55432f" stroke-width="1.8"/><path d="M240 29L338 126L239 126Z" fill="#e4ccdd"/><path d="M240 29L239 242M145 124L338 126" stroke="#65573f" stroke-width="1.5"/><path d="M239 242C209 261 269 278 231 295S231 323 272 330" fill="none" stroke="#66563f" stroke-width="2"/><path d="M232 267l-20-9 1 17 19-8 18-8 1 18ZM231 300l-17-7 1 16 16-9 19-7-1 15Z" fill="#e4ccdd" stroke="#66563f" stroke-width="1.4"/><path d="M180 85l12-9M288 174l12-13M164 117l7-8" stroke="#fff9eb" stroke-width="3"/><text x="240" y="112" text-anchor="middle" fill="#3c4c36" font-size="17" font-family="Georgia,serif" font-style="italic">Victory!</text><path d="M80 86l8-16 7 15M387 91l7-17 7 15M83 214l6 11 7-9M399 234l-10 5" fill="none" stroke="#ab8c65" stroke-width="2"/></g><g id="bursts" aria-hidden="true"></g></svg><p id="scene-caption">One task, one paper head.</p></section><section id="tasks" aria-label="Your three tasks"></section><footer><button id="undo" disabled>Undo last change</button><p id="status" role="status">Your progress saves as you go.</p><button id="share" class="share">Share my tasks for changes</button></footer></main>

CSS

*{box-sizing:border-box}body{margin:0;background:#f2f4ef;color:#20352b;font-family:system-ui,-apple-system,sans-serif}main{max-width:600px;margin:0 auto;padding:28px 20px;background:#fcfdf9;border-radius:24px}header{padding:2px 4px 24px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:#63806e;margin:0 0 10px}h1{font-size:32px;letter-spacing:-1.2px;margin:0 0 10px}#progress{font-size:15px;color:#57685c;margin:0 0 16px}.track{height:6px;background:#e6ebe3;border-radius:9px;overflow:hidden}#bar{display:block;height:100%;background:#3d7855;transition:width .2s}#tasks{display:grid;gap:12px}.task{background:white;border:1px solid #dce4d7;border-radius:16px;padding:12px;display:grid;grid-template-columns:52px minmax(0,1fr) 60px;align-items:center;gap:10px}.toggle{width:52px;height:52px;padding:0;font-size:24px;border-radius:14px;background:#f5f8f2;border:1px solid #b6c8ad;color:#2c6543}.title{font-size:17px;font-weight:550;overflow-wrap:anywhere;line-height:1.4}.done .title{text-decoration:line-through;color:#728172}.done .toggle{background:#36704d;color:white;border-color:#36704d}button{font:inherit;cursor:pointer;min-height:48px;border:1px solid #cbd7c6;border-radius:12px;padding:10px 14px;background:#f7faf3;color:#2b5439;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}.edit{border:0;background:transparent;font-size:14px;padding:8px}.editor{grid-column:1/-1;display:grid;gap:10px}.editor label{font-size:13px;color:#596c5e}input{display:block;width:100%;min-height:52px;margin-top:6px;border:1px solid #a6b99e;border-radius:10px;padding:12px;font:inherit;font-size:17px;color:#20352b;background:white}.actions{display:flex;gap:8px}.actions button{flex:1}.primary{background:#36704d;color:white;border-color:#36704d}footer{padding:20px 4px 0}#undo{width:100%}#status{font-size:12px;line-height:1.5;color:#637266;min-height:18px;margin:12px 0}.share{font-size:12px;min-height:44px;background:transparent;border:0;padding:8px 0;text-decoration:underline;text-underline-offset:4px}button:focus-visible,input:focus-visible{outline:3px solid #c29b48;outline-offset:3px}@media(max-width:380px){main{padding:22px 12px}.task{gap:6px;padding:10px;grid-template-columns:48px minmax(0,1fr) 52px}.toggle{width:48px;height:48px}h1{font-size:29px}}@media(prefers-reduced-motion:reduce){#bar{transition:none}}
body{background:#efe9dc;color:#3f4938}main{background:#faf5e9;border:1px solid #daceb8;max-width:620px;border-radius:7px 15px 9px 13px;box-shadow:3px 4px 0 #ded5c4;padding-top:24px}h1{font-family:Georgia,serif;font-weight:500;font-size:32px}.eyebrow{color:#7c6e54}.track{background:#e4dac7}#bar{background:#7e916a}header{padding-bottom:8px}.scene{position:relative;margin-bottom:20px;background:repeating-linear-gradient(0deg,transparent,transparent 23px,#d4c3a31a 24px);border-bottom:1px dashed #c9b99c}.scene svg{display:block;width:100%;height:auto;overflow:visible}#scene-caption{text-align:center;font:italic 14px Georgia,serif;color:#786c55;margin:0 0 16px}.task{background:#fffdf5;border-color:#c7bfa9;border-radius:6px 11px 7px 10px;grid-template-columns:64px minmax(0,1fr) 52px;box-shadow:1px 2px 0 #e7ddca}.toggle{width:64px;height:58px;background:#e6ecd9;border-color:#8b997c;border-radius:8px 5px 9px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:650}.toggle svg{width:23px;height:23px}.done .toggle{background:#e9e2d4;color:#6d6858;border-color:#b8ac94}.done .title{color:#807966}.primary{background:#526b43;border-color:#526b43}#undo{background:#eee6d5;color:#534c3d;border-color:#bdae91}.edit{color:#685b43}input{background:#fffdf7}.head-label{font-family:system-ui,sans-serif;font-size:11px;font-weight:600;fill:#3f4938}.burst{transform-box:fill-box;transform-origin:center;animation:burst .65s ease-out forwards}.head.alive{animation:arrive .25s ease-out}.defeated-mark{font:italic 11px Georgia,serif;fill:#766751}@keyframes burst{0%{opacity:0;transform:scale(.2) rotate(-10deg)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6) rotate(15deg)}}@keyframes arrive{from{opacity:.5}to{opacity:1}}@media(prefers-reduced-motion:reduce){.burst{animation:none;opacity:.8}.head.alive{animation:none}}@media(max-width:380px){.task{grid-template-columns:58px minmax(0,1fr) 48px}.toggle{width:58px}h1{font-size:27px}}

JavaScript

(()=>{
'use strict';
const $=id=>document.getElementById(id),clone=x=>JSON.parse(JSON.stringify(x));
const kind='arkheos-three-small-tasks';
let state={kind,version:1,tasks:[{id:'email',title:'Reply to email',done:false},{id:'mug',title:'Wash the mug',done:false},{id:'plant',title:'Water the plant',done:false}],history:[]};
let touched=false,editor=null,queue=Promise.resolve(),saveNumber=0;
const bridge=window.WidgetCanvas;
function validTasks(v){return Array.isArray(v)&&v.length===3&&v.every((t,i)=>t&&t.id===['email','mug','plant'][i]&&typeof t.title==='string'&&t.title.trim().length>0&&t.title.length<=100&&typeof t.done==='boolean');}
function status(s){$('status').textContent=s;}
function persist(){
 const snapshot=clone(state),n=++saveNumber;
 status('Saving…');
 queue=queue.then(async()=>{try{if(!bridge||typeof bridge.setState!=='function')throw Error();await bridge.setState(snapshot);if(n===saveNumber)status('Progress saved. Come back here anytime.');}catch(e){if(n===saveNumber)status('Could not save progress. Make another change to try again.');}});
}
function change(fn){touched=true;state.history.push(clone(state.tasks));state.history=state.history.slice(-30);fn();editor=null;render();persist();}
function make(tag,text,cls){const e=document.createElement(tag);if(text!==undefined)e.textContent=text;if(cls)e.className=cls;return e;}

const NS='http://www.w3.org/2000/svg';
function svg(tag,attrs,text){const e=document.createElementNS(NS,tag);for(const [k,v]of Object.entries(attrs||{}))e.setAttribute(k,String(v));if(text!==undefined)e.textContent=text;return e;}
function drawArt(){
 const all=state.tasks.every(t=>t.done);$('dragon').style.display=all?'none':'';$('kite').style.display=all?'':'none';
 $('art').setAttribute('aria-label',all?'Victory kite: all three tasks completed':'Paper hydra: '+state.tasks.filter(t=>!t.done).length+' heads remaining');
 $('scene-caption').textContent=all?'Three tasks conquered. Let it fly.':'Defeat a head by finishing its task. Undo brings it back.';
 $('heads').replaceChildren();
 state.tasks.forEach((t,i)=>{
  const x=[87,240,393][i],g=svg('g',{class:'head '+(t.done?'defeated':'alive')});
  const neck=i===0?'M174 247L103 217L76 150L107 140L126 196L207 235Z':i===1?'M221 246L216 152L249 144L257 241Z':'M272 239L352 195L374 141L405 152L377 218L305 258Z';
  g.append(svg('path',{d:neck,fill:t.done?'#d6d0c1':'#c9d9af',stroke:'#49543d','stroke-width':2,'stroke-linejoin':'round'}));
  g.append(svg('path',{d:i===0?'M96 153L117 205L181 238':i===1?'M234 153L237 242':'M391 151L365 207L291 248',fill:'none',stroke:'#8e9b78','stroke-dasharray':'4 4','stroke-width':1}));
  const head=svg('g',{transform:'translate('+x+' '+(t.done?174:118)+') rotate('+(t.done?(i===0?-20:20):(i===0?-7:i===2?7:0))+')'});
  head.append(svg('path',{d:'M-37-32L-26-48L-15-35L3-43L10-31L28-33L42-15L31 8L40 18L22 32L-14 26L-34 6Z',fill:t.done?'#dfd8c6':['#d5deb9','#e5d2ac','#cbd9c0'][i],stroke:'#49543d','stroke-width':2.2,'stroke-linejoin':'round'}));
  head.append(svg('path',{d:'M-34-29L14-17L31 8L-14 26M14-17L-15-35M-34 6L14-17',fill:'none',stroke:'#9b9d7f','stroke-width':1,'stroke-dasharray':'3 3'}));
  if(t.done){
   head.append(svg('path',{d:'M-19-8l10 9m0-9-10 9M12-8l10 9m0-9-10 9M-10 14l18-4',fill:'none',stroke:'#6d6553','stroke-width':2,'stroke-linecap':'round'}));
   g.append(svg('text',{x,y:230,'text-anchor':'middle',class:'defeated-mark'},'Defeated'));
  }else{
   head.append(svg('path',{d:'M-20-8q5-5 10 0M12-8q5-5 10 0M-7 10l19 2-7 6Z',fill:'#fff9e8',stroke:'#49543d','stroke-width':1.7,'stroke-linecap':'round'}));
   head.append(svg('circle',{cx:-14,cy:-5,r:2,fill:'#394936'}),svg('circle',{cx:17,cy:-5,r:2,fill:'#394936'}));
  }
  g.append(head);
  const label=svg('foreignObject',{x:x-69,y:17,width:138,height:58});
  const div=document.createElement('div');div.setAttribute('xmlns','http://www.w3.org/1999/xhtml');div.style.cssText='font:600 11px/1.25 system-ui;color:#494d3c;text-align:center;overflow-wrap:anywhere;padding:5px 6px;background:#fffaf0;border:1px solid #c5b99f;border-radius:3px;';div.textContent=t.title;label.append(div);g.append(label);
  if(t.done)g.append(svg('path',{d:'M'+(x-31)+' 247l12-8 15 6 14-7 20 9',fill:'none',stroke:'#b4a58a','stroke-width':1.4}));
  $('heads').append(g);
 });
}
function burst(i){
 const x=[87,240,393][i],g=svg('g',{class:'burst'});
 g.append(svg('path',{d:'M'+x+' 63l10 29 29-13-12 29 30 12-32 8 14 29-31-11-9 31-12-30-27 15 9-29-29-12 30-9-13-28 31 11Z',fill:'#f6d49a',stroke:'#a78755','stroke-width':1.5}));
 for(let j=0;j<6;j++){const a=j*Math.PI/3,cx=x+Math.cos(a)*63,cy=120+Math.sin(a)*60;g.append(svg('path',{d:'M'+cx+' '+cy+'l8-4-2 10Z',fill:j%2?'#d6bcd0':'#c4d4ae',stroke:'#8c8064','stroke-width':1}));}
 $('bursts').replaceChildren(g);setTimeout(()=>g.remove(),750);
}

function render(){
 const count=state.tasks.filter(t=>t.done).length;
 $('progress').textContent=count===3?'All three defeated. Your hydra is a victory kite.':count+' of 3 complete · '+(3-count)+' to go';
 $('bar').style.width=(count/3*100)+'%';
 $('undo').disabled=!state.history.length;
 drawArt();
 $('tasks').replaceChildren();
 state.tasks.forEach(t=>{
  const row=make('article',undefined,'task'+(t.done?' done':''));
  const toggle=make('button',undefined,'toggle');toggle.innerHTML=t.done?'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12a7 7 0 1 1 2 5M5 12V5M5 12h7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg><span>Restore</span>':'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2l2 6 6-3-3 6 5 3-7 1-1 7-4-6-7 3 3-7-4-4 7 1Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg><span>Defeat</span>';toggle.type='button';toggle.setAttribute('aria-label',(t.done?'Mark incomplete: ':'Complete: ')+t.title);toggle.setAttribute('aria-pressed',String(t.done));toggle.onclick=()=>{const defeat=!t.done;change(()=>{t.done=!t.done;});if(defeat)burst(state.tasks.indexOf(t));};
  const title=make('span',t.title,'title'),edit=make('button','Edit','edit');edit.type='button';edit.setAttribute('aria-label','Rename '+t.title);edit.onclick=()=>{editor=t.id;render();const input=$('rename-'+t.id);input.focus();input.select();};
  row.append(toggle,title,edit);
  if(editor===t.id){
   const form=make('form',undefined,'editor'),label=make('label','Task name'),input=make('input');input.id='rename-'+t.id;input.value=t.title;input.maxLength=100;input.required=true;input.autocomplete='off';input.oninput=()=>{touched=true;input.setCustomValidity('');};label.htmlFor=input.id;label.append(input);
   const actions=make('div',undefined,'actions'),save=make('button','Save name','primary'),cancel=make('button','Cancel');save.type='submit';cancel.type='button';cancel.onclick=()=>{editor=null;render();};actions.append(save,cancel);form.append(label,actions);
   form.onsubmit=e=>{e.preventDefault();const name=input.value.trim();if(!name){input.setCustomValidity('Enter a task name.');input.reportValidity();return;}if(name===t.title){editor=null;render();return;}change(()=>{t.title=name;});};
   input.onkeydown=e=>{if(e.key==='Escape'){editor=null;render();}};
   row.append(form);
  }
  $('tasks').append(row);
 });
}
$('undo').onclick=()=>{if(!state.history.length)return;touched=true;state.tasks=state.history.pop();editor=null;render();persist();};
function restore(v){if(touched||!v||v.kind!==kind||v.version!==1||!validTasks(v.tasks))return;state={kind,version:1,tasks:clone(v.tasks),history:Array.isArray(v.history)?v.history.filter(validTasks).slice(-30).map(clone):[]};editor=null;render();status('Saved progress restored.');}
$('share').onclick=async()=>{try{if(!bridge||typeof bridge.setContext!=='function')throw Error();await bridge.setContext({kind,version:1,title:'Three small tasks',tasks:clone(state.tasks)});status('Tasks shared for changes.');}catch(e){status('Could not share tasks. Your list is still here.');}};
window.addEventListener('widgetcanvas:restore',e=>restore(e.detail));
render();
try{if(bridge){bridge.setControlsPosition?.('top-right');bridge.setResetEnabled?.(false);bridge.setSharingEnabled?.(false);Promise.resolve(bridge.getState()).then(restore).catch(()=>status('Ready. Progress will save when you make a change.'));}}catch(e){status('Ready. Progress will save when you make a change.');}
})();