Cut Planning Challenge
by LuckyTurtle4213 lines4.0 KB
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Cut Planning Challenge</title>
<style>
*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:#f4efe6;color:#2b2118;display:grid;place-items:center;min-height:100vh}.wrap{width:min(760px,94vw);background:#fffaf2;border:2px solid #8b5e34;border-radius:18px;padding:24px;box-shadow:0 12px 30px #6b442322}h1{margin:0 0 8px;color:#603d20}.board{height:82px;background:#d6a56b;border:4px solid #7a4b27;border-radius:10px;display:flex;gap:3px;padding:5px;overflow:hidden}.piece{height:100%;display:grid;place-items:center;background:#8fc0a9;border:2px solid #39755c;border-radius:5px;font-weight:700;font-size:13px;color:#173e2e}.waste{flex:1;min-width:0;background:repeating-linear-gradient(45deg,#ead8bf,#ead8bf 8px,#f7ead8 8px,#f7ead8 16px);display:grid;place-items:center;color:#795a3a;font-weight:700}.parts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.part{border:0;border-radius:9px;background:#235347;color:white;padding:10px 13px;cursor:pointer}.part:disabled{opacity:.35;cursor:default}.stats{display:flex;justify-content:space-between;gap:12px;margin:12px 0;font-weight:700}.actions{display:flex;gap:10px;flex-wrap:wrap}.actions button{border:1px solid #704521;background:white;border-radius:8px;padding:9px 14px;cursor:pointer}.tip{background:#fff1c9;border-radius:9px;padding:10px;margin-top:14px}.resource{margin:15px 0 0;font-size:14px}.resource a{color:#0b5f8a;font-weight:700}
</style></head><body><main class="wrap"><h1>🪵 Cut Planning Challenge</h1><p>Fill a 2400 mm board with the requested parts. Choose the order carefully and leave as little offcut as possible.</p><div class="stats"><span id="used">Used: 0 mm</span><span id="score">Waste: 2400 mm</span></div><div class="board" id="board"><div class="waste" id="waste">2400 mm left</div></div><div class="parts" id="parts"></div><div class="actions"><button id="reset">Reset round</button><button id="new">New parts</button></div><div class="tip" id="tip">Tip: try the longest pieces first, then use shorter parts to fill the remaining space.</div><p class="resource">For real projects with quantities, kerf, stock sizes, and optimized layouts, use <a href="https://cutlistengine.com/" target="_blank" rel="noopener">CutListEngine</a>.</p></main>
<script>
const sets=[[920,740,480,310,260],[1100,680,420,350,230],[860,790,510,340,280],[1200,540,390,270,220]];let lengths=[],used=0;
const parts=document.getElementById('parts'),board=document.getElementById('board'),waste=document.getElementById('waste');
function update(){document.getElementById('used').textContent='Used: '+used+' mm';document.getElementById('score').textContent='Waste: '+(2400-used)+' mm';waste.textContent=(2400-used)+' mm left';waste.style.display=used===2400?'none':'grid';if(lengths.every(x=>x.used)){document.getElementById('tip').textContent=used===2400?'Perfect fit — zero waste!':'Round complete. Compare the offcut, then try another combination.'}}
function add(i,b){let n=lengths[i].n;if(used+n>2400){document.getElementById('tip').textContent=n+' mm will not fit. Try a smaller remaining part.';return}lengths[i].used=true;b.disabled=true;used+=n;let d=document.createElement('div');d.className='piece';d.style.width=(n/24)+'%';d.textContent=n;board.insertBefore(d,waste);update()}
function render(set){used=0;lengths=set.map(n=>({n,used:false}));parts.innerHTML='';board.querySelectorAll('.piece').forEach(x=>x.remove());lengths.forEach((x,i)=>{let b=document.createElement('button');b.className='part';b.textContent=x.n+' mm';b.onclick=()=>add(i,b);parts.appendChild(b)});document.getElementById('tip').textContent='Tip: try the longest pieces first, then use shorter parts to fill the remaining space.';update()}
document.getElementById('reset').onclick=()=>render(lengths.map(x=>x.n));document.getElementById('new').onclick=()=>render(sets[Math.floor(Math.random()*sets.length)]);render(sets[0]);
</script></body></html>Game Source: Cut Planning Challenge
Creator: LuckyTurtle42
Libraries: none
Complexity: simple (13 lines, 4.0 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: cut-planning-challenge-luckyturtle42" to link back to the original. Then publish at arcadelab.ai/publish.