\n \n

Branch effects deeper to see consequences cascade. Colour fades with distance from the decision.

\n`,\n scripts: `\nlet S = getHS() || {\n decision: 'Switch the team to fully remote work',\n nodes: [\n { id:'n1', text:'Save on office costs', children: [\n { id:'n2', text:'Invest savings in better tools', children: [] },\n { id:'n3', text:'Lose casual hallway collaboration', children: [\n { id:'n4', text:'Must create intentional virtual spaces', children: [] }\n ]}\n ]},\n { id:'n5', text:'Team can hire from anywhere', children: [\n { id:'n6', text:'Wider, more diverse talent pool', children: [] },\n { id:'n7', text:'Timezone coordination gets harder', children: [] }\n ]},\n { id:'n8', text:'Employees reclaim commute time', children: [\n { id:'n9', text:'Higher satisfaction and retention', children: [] },\n { id:'n10', text:'Work-life boundaries blur', children: [] }\n ]}\n ]\n};\nlet nextId = 20;\nfunction genId() { return 'n'+(nextId++); }\nfunction initIds(ns) { ns.forEach(n => { if(!n.id) n.id=genId(); else { const x=parseInt(n.id.slice(1)); if(x>=nextId) nextId=x+1; } initIds(n.children||[]); }); }\ninitIds(S.nodes);\n\ndocument.getElementById('so-dec').value = S.decision;\ndocument.getElementById('so-dec').addEventListener('input', e => { S.decision=e.target.value; save(); });\ndocument.getElementById('so-add-btn').addEventListener('click', () => addNode(null));\n\nfunction rebuild() {\n const root = document.getElementById('so-tree');\n root.innerHTML = '';\n if (S.nodes.length) root.appendChild(buildLevel(S.nodes, 1));\n}\n\nfunction buildLevel(nodes, depth) {\n const dcls = depth<=1?'so-d1':depth<=2?'so-d2':'so-d3';\n const label = depth<=1?'1st':depth<=2?'2nd':depth<=3?'3rd':depth+'th';\n const wrap = document.createElement('div');\n wrap.className = 'so-level ' + dcls;\n nodes.forEach(n => {\n const node = document.createElement('div'); node.className = 'so-node';\n const card = document.createElement('div'); card.className = 'so-card';\n const order = document.createElement('span'); order.className = 'so-order'; order.textContent = label;\n const inp = document.createElement('input');\n inp.type = 'text'; inp.value = n.text; inp.placeholder = 'Effect\\\\u2026';\n inp.addEventListener('input', () => { n.text = inp.value; save(); });\n const addBtn = document.createElement('button'); addBtn.className = 'so-btn'; addBtn.textContent = '+';\n addBtn.addEventListener('click', () => addNode(n.id));\n const delBtn = document.createElement('button'); delBtn.className = 'so-btn del'; delBtn.textContent = '\\\\u00d7';\n delBtn.addEventListener('click', () => delNode(n.id));\n card.appendChild(order); card.appendChild(inp); card.appendChild(addBtn); card.appendChild(delBtn);\n node.appendChild(card);\n if (n.children && n.children.length) node.appendChild(buildLevel(n.children, depth + 1));\n wrap.appendChild(node);\n });\n return wrap;\n}\n\nfunction findNode(ns, id) { for (const n of ns) { if(n.id===id) return n; const f=findNode(n.children||[],id); if(f) return f; } return null; }\nfunction addNode(parentId) {\n const nn = {id:genId(), text:'', children:[]};\n if (!parentId) S.nodes.push(nn);\n else { const p=findNode(S.nodes,parentId); if(p){p.children=p.children||[];p.children.push(nn);} }\n save(); rebuild();\n setTimeout(()=>{ const all=document.querySelectorAll('.so-card input'); let idx=0;\n function walk(ns){for(const n of ns){if(n.id===nn.id){const el=all[idx];if(el)el.focus();return true;}idx++;if(walk(n.children||[]))return true;}return false;}\n walk(S.nodes);\n },50);\n}\nfunction removeNode(ns,id){const i=ns.findIndex(n=>n.id===id);if(i>=0){ns.splice(i,1);return true;}for(const n of ns)if(removeNode(n.children||[],id))return true;return false;}\nfunction delNode(id){removeNode(S.nodes,id);save();rebuild();}\nfunction save() { setHS(S); }\nrebuild();\n`,\n });\n}\n","deleted","label",[178,160],"pages","permalink","https://www.val.town/x/c15r/mental-models/code/pages/second-order.ts","extension","ts","actionData","errors"]