\n \n

\n \\u{1f512} Scope\n 50%\n

Lock this dimension

\n \\u{1f512} Time\n 50%\n

Lock this dimension

\n \\u{1f512} Cost\n 50%\n

Lock this dimension

Drag a slider \\u2014 unlocked dimensions compensate. Lock a dimension to fix it.

\n`,\n scripts: `\nconst D = ['scope','time','cost'];\nlet V = {scope:50,time:50,cost:50};\nlet L = {scope:false,time:false,cost:false};\nconst saved = getHS();\nif (saved) { if(saved.v) V=saved.v; if(saved.l) L=saved.l; }\n// Worked example: arrive at an asymmetric state that shows the constraint\nif (!saved) { V = {scope:72, time:40, cost:38}; }\n\nD.forEach(d => document.getElementById('lk-'+d).checked = L[d]);\n\nconst cx=180,cy=175,R=130;\nconst outer = {\n scope:[cx, cy-R],\n time:[cx+R*Math.cos(Math.PI/6), cy+R*Math.sin(Math.PI/6)],\n cost:[cx-R*Math.cos(Math.PI/6), cy+R*Math.sin(Math.PI/6)]\n};\n\nfunction draw() {\n document.getElementById('tri-outer').setAttribute('points', D.map(d=>outer[d].join(',')).join(' '));\n const cen=[cx,cy+8];\n const inner={};\n D.forEach(d => {\n const t=V[d]/100;\n inner[d] = [cen[0]+(outer[d][0]-cen[0])*t, cen[1]+(outer[d][1]-cen[1])*t];\n });\n document.getElementById('tri-inner').setAttribute('points', D.map(d=>inner[d].join(',')).join(' '));\n\n const lo=24;\n document.getElementById('lbl-scope').setAttribute('x',outer.scope[0]);\n document.getElementById('lbl-scope').setAttribute('y',outer.scope[1]-lo);\n document.getElementById('lbl-scope').textContent='Scope';\n document.getElementById('lbl-time').setAttribute('x',outer.time[0]+lo);\n document.getElementById('lbl-time').setAttribute('y',outer.time[1]+lo);\n document.getElementById('lbl-time').textContent='Time';\n document.getElementById('lbl-cost').setAttribute('x',outer.cost[0]-lo);\n document.getElementById('lbl-cost').setAttribute('y',outer.cost[1]+lo);\n document.getElementById('lbl-cost').textContent='Cost';\n\n D.forEach(d => {\n const el=document.getElementById('pct-'+d);\n el.setAttribute('x',inner[d][0]);\n el.setAttribute('y',inner[d][1]+(d==='scope'?-10:18));\n el.textContent=Math.round(V[d])+'%';\n });\n\n const avg=(V.scope+V.time+V.cost)/3;\n const qlbl=document.getElementById('quality-lbl');\n if(avg<35) qlbl.textContent='Quality: Strained';\n else if(avg<50) qlbl.textContent='Quality: Tight';\n else if(avg<60) qlbl.textContent='Quality: Balanced';\n else qlbl.textContent='Quality: Comfortable';\n\n D.forEach(d => {\n document.getElementById('sf-'+d).style.width=V[d]+'%';\n document.getElementById('st-'+d).style.left=V[d]+'%';\n document.getElementById('sv-'+d).textContent=Math.round(V[d])+'%';\n document.getElementById('sg-'+d).classList.toggle('locked', L[d]);\n });\n\n const lc=D.filter(d=>L[d]).length;\n const h=document.getElementById('hint');\n if(lc>=2){\n const f=D.find(d=>!L[d]);\n h.textContent=f ? 'Two locked \\\\u2014 '+f[0].toUpperCase()+f.slice(1)+' absorbs all change.' : 'All three locked \\\\u2014 no flexibility.';\n } else if(lc===1){\n const ld=D.find(d=>L[d]);\n h.textContent=ld[0].toUpperCase()+ld.slice(1)+' is fixed. Drag the others \\\\u2014 they\\\\u2019ll balance each other.';\n } else {\n h.textContent='Drag a slider \\\\u2014 the other two compensate. Lock a dimension to hold it steady.';\n }\n\n setHS({v:V,l:L});\n}\n\nfunction redistribute(changed) {\n const TARGET=150;\n const free=D.filter(d=>d!==changed&&!L[d]);\n if(!free.length) return;\n const total=D.reduce((s,d)=>s+V[d],0);\n const excess=total-TARGET;\n if(Math.abs(excess)<0.1) return;\n const freeTotal=free.reduce((s,d)=>s+V[d],0);\n // Distribute proportionally, then clamp and re-iterate if needed\n let remaining=excess;\n for(let iter=0;iter<5&&Math.abs(remaining)>0.5;iter++){\n const ft=free.reduce((s,d)=>s+V[d],0);\n const shares=free.map(d=>ft>0?V[d]/ft:1/free.length);\n remaining=0;\n free.forEach((d,i)=>{\n const old=V[d];\n const proposed=old-(excess*shares[i]);\n V[d]=Math.max(5,Math.min(95,proposed));\n remaining+=(old-V[d])-(excess*shares[i]);\n });\n // Recalculate excess for next iteration\n const newTotal=D.reduce((s,d)=>s+V[d],0);\n remaining=newTotal-TARGET;\n }\n}\n\n// Lock toggles\nD.forEach(d => {\n document.getElementById('lk-'+d).addEventListener('change', e => {\n L[d]=e.target.checked; draw();\n });\n});\n\n// Pointer-based slider (unified pointer events)\ndocument.querySelectorAll('.slider-track').forEach(track => {\n const d=track.dataset.d;\n function onMove(e) {\n e.preventDefault();\n const r=track.getBoundingClientRect();\n const px=e.clientX;\n V[d]=Math.max(5,Math.min(95,((px-r.left)/r.width)*100));\n redistribute(d);\n draw();\n }\n track.addEventListener('pointerdown', e => {\n if(L[d]) return;\n e.preventDefault();\n track.setPointerCapture(e.pointerId);\n onMove(e);\n const up=()=>{\n track.removeEventListener('pointermove',onMove);\n track.removeEventListener('pointerup',up);\n document.body.style.cursor='';\n };\n document.body.style.cursor='grabbing';\n track.addEventListener('pointermove',onMove);\n track.addEventListener('pointerup',up);\n });\n});\n\ndraw();\n`,\n });\n}\n","deleted","label",[178,160],"pages","permalink","https://www.val.town/x/c15r/mental-models/code/pages/iron-triangle.ts","extension","ts","actionData","errors"]