[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_205":206,"_207":208},"routes/_app.x.$handle.$name",{"_95":94,"_32":46,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":121,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",16,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/script.js","latestPath","fileId","6cc9b624-ef12-11f0-aa0a-42dde27851f2","name","script.js","fileType","script","content","// Global blockers array\nlet blockers = [];\n\n/**\n * Blocker object structure:\n * {\n * id: unique identifier,\n * width: width in cm,\n * height: height in cm,\n * xLeft: left edge position,\n * xRight: right edge position\n * }\n */\n\n/**\n * Room (cm): bottom width 155, left height 115, right height 255, top is a straight slope.\n * Rectangle is axis-aligned, sitting on the floor (y=0), near the tall wall with a gap \"offset\".\n * Now also checks for collisions with existing blockers.\n *\n * @param {number} width Rectangle width along the floor (cm)\n * @param {number} height Rectangle height (cm)\n * @param {number} offset Gap from the tall (right) wall (cm)\n * @returns {{fits: boolean, reason: string, xLeft: number, xRight: number, maxHeightAtLeft: number, collidingBlocker?: object}}\n */\nfunction fitsInRoom(width, height, offset) {\n const roomWidth = 155;\n const leftHeight = 115;\n const rightHeight = 255;\n\n if (width < 0 || height < 0 || offset < 0) {\n return { fits: false, reason: \"width/height/offset must be >= 0\", xLeft: NaN, xRight: NaN, maxHeightAtLeft: NaN };\n }\n\n // 1) Compute rectangle x-range from the tall wall (right side)\n const xRight = roomWidth - offset;\n const xLeft = xRight - width;\n\n // 2) Horizontal bounds\n if (xLeft < 0) {\n return {\n fits: false,\n reason: `Doesn't fit horizontally: left edge would be at x=${xLeft.toFixed(2)}cm (needs >= 0).`,\n xLeft, xRight, maxHeightAtLeft: NaN\n };\n }\n\n // 3) Check for collisions with existing blockers\n for (const blocker of blockers) {\n // Check horizontal overlap\n const horizontalOverlap = !(xRight <= blocker.xLeft || xLeft >= blocker.xRight);\n \n if (horizontalOverlap) {\n // Check vertical overlap (both objects start from floor)\n const verticalOverlap = height > 0 && blocker.height > 0; // Both have height\n \n if (verticalOverlap) {\n return {\n fits: false,\n reason: `Collides with existing blocker (${blocker.width}×${blocker.height}cm at x=${blocker.xLeft.toFixed(1)}-${blocker.xRight.toFixed(1)}cm).`,\n xLeft, xRight, maxHeightAtLeft: NaN,\n collidingBlocker: blocker\n };\n }\n }\n }\n\n // 4) Slanted ceiling/wall line: y_max(x) = leftHeight + (rightHeight-leftHeight) * (x/roomWidth)\n const slope = (rightHeight - leftHeight) / roomWidth; // 140/155\n const maxHeightAtLeft = leftHeight + slope * xLeft;\n\n // 5) Vertical clearance at the tightest point (left edge)\n if (height > maxHeightAtLeft) {\n return {\n fits: false,\n reason: `Too tall at xLeft=${xLeft.toFixed(2)}cm: max height there is ${maxHeightAtLeft.toFixed(2)}cm.`,\n xLeft, xRight, maxHeightAtLeft\n };\n }\n\n return {\n fits: true,\n reason: \"Fits within the sloped profile at the given offset.\",\n xLeft, xRight, maxHeightAtLeft\n };\n}\n\n/**\n * Add a new blocker to the room\n * @param {number} width Blocker width in cm\n * @param {number} height Blocker height in cm\n * @param {number} fromLeft Distance from left wall (optional)\n * @param {number} fromRight Distance from right wall (optional)\n * @returns {{success: boolean, reason: string, blocker?: object}}\n */\nfunction addBlocker(width, height, fromLeft = null, fromRight = null) {\n const roomWidth = 155;\n \n if (width <= 0 || height <= 0) {\n return { success: false, reason: \"Width and height must be greater than 0\" };\n }\n \n // Determine position\n let xLeft, xRight;\n \n if (fromLeft !== null && fromRight !== null) {\n return { success: false, reason: \"Specify either fromLeft OR fromRight, not both\" };\n } else if (fromLeft !== null) {\n xLeft = fromLeft;\n xRight = xLeft + width;\n } else if (fromRight !== null) {\n xRight = roomWidth - fromRight;\n xLeft = xRight - width;\n } else {\n return { success: false, reason: \"Must specify either fromLeft or fromRight\" };\n }\n \n // Check bounds\n if (xLeft < 0 || xRight > roomWidth) {\n return { \n success: false, \n reason: `Blocker extends outside room bounds (x=${xLeft.toFixed(1)} to ${xRight.toFixed(1)}cm, room is 0 to ${roomWidth}cm)` \n };\n }\n \n // Check for collisions with existing blockers\n for (const existingBlocker of blockers) {\n const horizontalOverlap = !(xRight <= existingBlocker.xLeft || xLeft >= existingBlocker.xRight);\n if (horizontalOverlap) {\n return {\n success: false,\n reason: `Collides with existing blocker at x=${existingBlocker.xLeft.toFixed(1)}-${existingBlocker.xRight.toFixed(1)}cm`\n };\n }\n }\n \n // Check ceiling clearance\n const leftHeight = 115;\n const rightHeight = 255;\n const slope = (rightHeight - leftHeight) / roomWidth;\n const maxHeightAtLeft = leftHeight + slope * xLeft;\n \n if (height > maxHeightAtLeft) {\n return {\n success: false,\n reason: `Too tall for ceiling at x=${xLeft.toFixed(1)}cm (max height: ${maxHeightAtLeft.toFixed(1)}cm)`\n };\n }\n \n // Create blocker\n const blocker = {\n id: Date.now() + Math.random(), // Simple unique ID\n width,\n height,\n xLeft,\n xRight\n };\n \n blockers.push(blocker);\n \n return { success: true, reason: \"Blocker added successfully\", blocker };\n}\n\n/**\n * Remove a blocker by ID\n * @param {number} blockerId \n */\nfunction removeBlocker(blockerId) {\n blockers = blockers.filter(b => b.id !== blockerId);\n}\n\n// Room constants\nconst ROOM_WIDTH = 155;\nconst LEFT_HEIGHT = 115;\nconst RIGHT_HEIGHT = 255;\n\n// Canvas setup with proper aspect ratios\nfunction setupCanvases() {\n const sideCanvas = document.getElementById('sideCanvas');\n const topCanvas = document.getElementById('topCanvas');\n \n // Calculate proper dimensions for side view\n // Side view shows width (155cm) vs max height (255cm)\n const sideAspectRatio = ROOM_WIDTH / RIGHT_HEIGHT; // 155/255 ≈ 0.608\n const sideBaseWidth = 500; // Base width for good visibility\n const sideWidth = sideBaseWidth;\n const sideHeight = sideBaseWidth / sideAspectRatio; // Maintain proper aspect ratio\n \n sideCanvas.width = sideWidth;\n sideCanvas.height = sideHeight;\n sideCanvas.style.maxWidth = '100%';\n sideCanvas.style.height = 'auto';\n \n // Calculate proper dimensions for top view\n // Top view shows width (155cm) vs depth (assume 100cm for visualization)\n const roomDepth = 100;\n const topAspectRatio = ROOM_WIDTH / roomDepth; // 155/100 = 1.55\n const topBaseWidth = 500;\n const topWidth = topBaseWidth;\n const topHeight = topBaseWidth / topAspectRatio;\n \n topCanvas.width = topWidth;\n topCanvas.height = topHeight;\n topCanvas.style.maxWidth = '100%';\n topCanvas.style.height = 'auto';\n}\n\n// Canvas drawing functions\nfunction drawSideView(canvas, width, height, offset, result) {\n const ctx = canvas.getContext('2d');\n const canvasWidth = canvas.width;\n const canvasHeight = canvas.height;\n \n // Clear canvas\n ctx.clearRect(0, 0, canvasWidth, canvasHeight);\n \n // Calculate margins to center the room drawing\n const margin = 40;\n const drawWidth = canvasWidth - 2 * margin;\n const drawHeight = canvasHeight - 2 * margin;\n \n // Scale factors - maintain aspect ratio\n const scaleX = drawWidth / ROOM_WIDTH;\n const scaleY = drawHeight / RIGHT_HEIGHT;\n const scale = Math.min(scaleX, scaleY); // Use the smaller scale to fit everything\n \n // Center the drawing\n const roomDrawWidth = ROOM_WIDTH * scale;\n const roomDrawHeight = RIGHT_HEIGHT * scale;\n const offsetX = (canvasWidth - roomDrawWidth) / 2;\n const offsetY = (canvasHeight - roomDrawHeight) / 2;\n \n // Draw room outline (side view)\n ctx.strokeStyle = '#374151';\n ctx.lineWidth = 2;\n ctx.beginPath();\n // Floor\n ctx.moveTo(offsetX, offsetY + roomDrawHeight);\n ctx.lineTo(offsetX + roomDrawWidth, offsetY + roomDrawHeight);\n // Left wall\n ctx.moveTo(offsetX, offsetY + roomDrawHeight);\n ctx.lineTo(offsetX, offsetY + roomDrawHeight - LEFT_HEIGHT * scale);\n // Right wall\n ctx.moveTo(offsetX + roomDrawWidth, offsetY + roomDrawHeight);\n ctx.lineTo(offsetX + roomDrawWidth, offsetY + roomDrawHeight - RIGHT_HEIGHT * scale);\n // Sloped ceiling\n ctx.moveTo(offsetX, offsetY + roomDrawHeight - LEFT_HEIGHT * scale);\n ctx.lineTo(offsetX + roomDrawWidth, offsetY + roomDrawHeight - RIGHT_HEIGHT * scale);\n ctx.stroke();\n \n // Draw existing blockers\n blockers.forEach(blocker => {\n const blockerX = offsetX + blocker.xLeft * scale;\n const blockerWidth = blocker.width * scale;\n const blockerHeight = blocker.height * scale;\n \n // Blocker styling\n ctx.fillStyle = 'rgba(107, 114, 128, 0.7)'; // Gray\n ctx.strokeStyle = '#6b7280';\n ctx.lineWidth = 1;\n \n // Draw blocker rectangle\n ctx.fillRect(blockerX, offsetY + roomDrawHeight - blockerHeight, blockerWidth, blockerHeight);\n ctx.strokeRect(blockerX, offsetY + roomDrawHeight - blockerHeight, blockerWidth, blockerHeight);\n \n // Add blocker label\n ctx.fillStyle = '#374151';\n ctx.font = '10px sans-serif';\n ctx.fillText(`${blocker.width}×${blocker.height}`, blockerX + 2, offsetY + roomDrawHeight - blockerHeight + 12);\n });\n \n // Draw new object if valid position\n if (!isNaN(result.xLeft) && !isNaN(result.xRight)) {\n const objX = offsetX + result.xLeft * scale;\n const objWidth = width * scale;\n const objHeight = height * scale;\n \n // Object color based on fit\n ctx.fillStyle = result.fits ? 'rgba(34, 197, 94, 0.6)' : 'rgba(239, 68, 68, 0.6)';\n ctx.strokeStyle = result.fits ? '#22c55e' : '#ef4444';\n ctx.lineWidth = 2;\n \n // Draw object rectangle\n ctx.fillRect(objX, offsetY + roomDrawHeight - objHeight, objWidth, objHeight);\n ctx.strokeRect(objX, offsetY + roomDrawHeight - objHeight, objWidth, objHeight);\n \n // Highlight colliding blocker if any\n if (!result.fits && result.collidingBlocker) {\n const collidingBlocker = result.collidingBlocker;\n const blockerX = offsetX + collidingBlocker.xLeft * scale;\n const blockerWidth = collidingBlocker.width * scale;\n const blockerHeight = collidingBlocker.height * scale;\n \n ctx.strokeStyle = '#ef4444';\n ctx.lineWidth = 3;\n ctx.strokeRect(blockerX, offsetY + roomDrawHeight - blockerHeight, blockerWidth, blockerHeight);\n }\n \n // Draw height limit line at left edge\n if (!isNaN(result.maxHeightAtLeft)) {\n ctx.strokeStyle = '#f59e0b';\n ctx.lineWidth = 1;\n ctx.setLineDash([5, 5]);\n const limitY = offsetY + roomDrawHeight - result.maxHeightAtLeft * scale;\n ctx.beginPath();\n ctx.moveTo(objX, limitY);\n ctx.lineTo(objX + objWidth, limitY);\n ctx.stroke();\n ctx.setLineDash([]);\n }\n }\n \n // Add labels\n ctx.fillStyle = '#374151';\n ctx.font = '12px sans-serif';\n ctx.fillText(`${LEFT_HEIGHT}cm`, offsetX + 5, offsetY + roomDrawHeight - LEFT_HEIGHT * scale - 5);\n ctx.fillText(`${RIGHT_HEIGHT}cm`, offsetX + roomDrawWidth - 50, offsetY + roomDrawHeight - RIGHT_HEIGHT * scale - 5);\n ctx.fillText(`${ROOM_WIDTH}cm`, offsetX + roomDrawWidth / 2 - 20, offsetY + roomDrawHeight + 15);\n}\n\nfunction drawTopView(canvas, width, height, offset, result) {\n const ctx = canvas.getContext('2d');\n const canvasWidth = canvas.width;\n const canvasHeight = canvas.height;\n \n // Clear canvas\n ctx.clearRect(0, 0, canvasWidth, canvasHeight);\n \n // Scale factors (using room depth of 100cm for visualization)\n const roomDepth = 100;\n const scaleX = (canvasWidth - 40) / ROOM_WIDTH;\n const scaleY = (canvasHeight - 40) / roomDepth;\n const offsetX = 20;\n const offsetY = 20;\n \n // Draw room outline (top view)\n ctx.strokeStyle = '#374151';\n ctx.lineWidth = 2;\n ctx.strokeRect(offsetX, offsetY, ROOM_WIDTH * scaleX, roomDepth * scaleY);\n \n // Draw existing blockers\n blockers.forEach(blocker => {\n const blockerX = offsetX + blocker.xLeft * scaleX;\n const blockerWidth = blocker.width * scaleX;\n const blockerDepth = 30 * scaleY; // Assume 30cm depth for visualization\n \n // Blocker styling\n ctx.fillStyle = 'rgba(107, 114, 128, 0.7)'; // Gray\n ctx.strokeStyle = '#6b7280';\n ctx.lineWidth = 1;\n \n // Draw blocker rectangle (centered in room depth)\n const blockerY = offsetY + (roomDepth * scaleY - blockerDepth) / 2;\n ctx.fillRect(blockerX, blockerY, blockerWidth, blockerDepth);\n ctx.strokeRect(blockerX, blockerY, blockerWidth, blockerDepth);\n \n // Add blocker label\n ctx.fillStyle = '#374151';\n ctx.font = '10px sans-serif';\n ctx.fillText(`${blocker.width}×${blocker.height}`, blockerX + 2, blockerY + blockerDepth / 2 + 3);\n });\n \n // Draw new object if valid position\n if (!isNaN(result.xLeft) && !isNaN(result.xRight)) {\n const objX = offsetX + result.xLeft * scaleX;\n const objWidth = width * scaleX;\n const objDepth = 30 * scaleY; // Assume 30cm depth for visualization\n \n // Object color based on fit\n ctx.fillStyle = result.fits ? 'rgba(34, 197, 94, 0.6)' : 'rgba(239, 68, 68, 0.6)';\n ctx.strokeStyle = result.fits ? '#22c55e' : '#ef4444';\n ctx.lineWidth = 2;\n \n // Draw object rectangle (centered in room depth)\n const objY = offsetY + (roomDepth * scaleY - objDepth) / 2;\n ctx.fillRect(objX, objY, objWidth, objDepth);\n ctx.strokeRect(objX, objY, objWidth, objDepth);\n \n // Highlight colliding blocker if any\n if (!result.fits && result.collidingBlocker) {\n const collidingBlocker = result.collidingBlocker;\n const blockerX = offsetX + collidingBlocker.xLeft * scaleX;\n const blockerWidth = collidingBlocker.width * scaleX;\n const blockerDepth = 30 * scaleY;\n const blockerY = offsetY + (roomDepth * scaleY - blockerDepth) / 2;\n \n ctx.strokeStyle = '#ef4444';\n ctx.lineWidth = 3;\n ctx.strokeRect(blockerX, blockerY, blockerWidth, blockerDepth);\n }\n }\n \n // Add labels\n ctx.fillStyle = '#374151';\n ctx.font = '12px sans-serif';\n ctx.fillText('Short wall', offsetX + 5, offsetY - 5);\n ctx.fillText('Tall wall', offsetX + ROOM_WIDTH * scaleX - 50, offsetY - 5);\n \n // Draw offset indicator\n if (!isNaN(result.xRight)) {\n ctx.strokeStyle = '#6b7280';\n ctx.lineWidth = 1;\n ctx.setLineDash([3, 3]);\n const offsetLineX = offsetX + (ROOM_WIDTH - offset) * scaleX;\n ctx.beginPath();\n ctx.moveTo(offsetLineX, offsetY);\n ctx.lineTo(offsetLineX, offsetY + roomDepth * scaleY);\n ctx.stroke();\n ctx.setLineDash([]);\n \n ctx.fillStyle = '#6b7280';\n ctx.font = '10px sans-serif';\n ctx.fillText(`${offset}cm`, offsetLineX + 5, offsetY + 15);\n }\n}\n\nfunction updateBlockersList() {\n const blockersList = document.getElementById('blockers-list');\n \n if (blockers.length === 0) {\n blockersList.innerHTML = '

No blockers added yet

';\n return;\n }\n \n blockersList.innerHTML = blockers.map(blocker => `\n

${blocker.width} × ${blocker.height} cm

Position: ${blocker.xLeft.toFixed(1)} - ${blocker.xRight.toFixed(1)} cm from left

\n \n

\n `).join('');\n}\n\nfunction removeBlockerById(blockerId) {\n removeBlocker(parseFloat(blockerId));\n updateBlockersList();\n updateResults();\n}\n\nfunction handleAddBlocker() {\n const width = parseFloat(document.getElementById('blocker-width').value) || 0;\n const height = parseFloat(document.getElementById('blocker-height').value) || 0;\n const fromLeft = document.getElementById('blocker-from-left').value;\n const fromRight = document.getElementById('blocker-from-right').value;\n \n const fromLeftNum = fromLeft ? parseFloat(fromLeft) : null;\n const fromRightNum = fromRight ? parseFloat(fromRight) : null;\n \n const result = addBlocker(width, height, fromLeftNum, fromRightNum);\n \n if (result.success) {\n // Clear form\n document.getElementById('blocker-width').value = '20';\n document.getElementById('blocker-height').value = '80';\n document.getElementById('blocker-from-left').value = '20';\n document.getElementById('blocker-from-right').value = '';\n \n updateBlockersList();\n updateResults();\n } else {\n alert(`Error adding blocker: ${result.reason}`);\n }\n}\n\nfunction updateResults() {\n const width = parseFloat(document.getElementById('width').value) || 0;\n const height = parseFloat(document.getElementById('height').value) || 0;\n const offset = parseFloat(document.getElementById('offset').value) || 0;\n \n const result = fitsInRoom(width, height, offset);\n \n // Update results display\n const resultsDiv = document.getElementById('results');\n const resultContent = document.getElementById('result-content');\n \n resultsDiv.classList.remove('hidden');\n \n if (result.fits) {\n resultsDiv.className = 'mt-6 p-4 rounded-md bg-green-50 border border-green-200';\n resultContent.innerHTML = `\n

\n ✅\n Object fits!\n

Position: ${result.xLeft.toFixed(1)}cm to ${result.xRight.toFixed(1)}cm from left wall

Max height at left edge: ${result.maxHeightAtLeft.toFixed(1)}cm

Your object height: ${height}cm

Clearance: ${(result.maxHeightAtLeft - height).toFixed(1)}cm

\n ${blockers.length > 0 ? `

✓ No collision with ${blockers.length} existing blocker(s)

` : ''}\n

\n `;\n } else {\n resultsDiv.className = 'mt-6 p-4 rounded-md bg-red-50 border border-red-200';\n resultContent.innerHTML = `\n

\n ❌\n Object doesn't fit\n

${result.reason}

\n ${!isNaN(result.maxHeightAtLeft) ? `

Max height at that position: ${result.maxHeightAtLeft.toFixed(1)}cm

` : ''}\n ${result.collidingBlocker ? `

⚠️ Collision detected with blocker

` : ''}\n

\n `;\n }\n \n // Update visualizations\n const sideCanvas = document.getElementById('sideCanvas');\n const topCanvas = document.getElementById('topCanvas');\n \n drawSideView(sideCanvas, width, height, offset, result);\n drawTopView(topCanvas, width, height, offset, result);\n}\n\n// Event listeners\ndocument.addEventListener('DOMContentLoaded', function() {\n const inputs = ['width', 'height', 'offset'];\n inputs.forEach(id => {\n document.getElementById(id).addEventListener('input', updateResults);\n });\n \n document.getElementById('calculate').addEventListener('click', updateResults);\n document.getElementById('add-blocker').addEventListener('click', handleAddBlocker);\n \n // Handle mutual exclusion of fromLeft and fromRight inputs\n document.getElementById('blocker-from-left').addEventListener('input', function() {\n if (this.value) {\n document.getElementById('blocker-from-right').value = '';\n }\n });\n \n document.getElementById('blocker-from-right').addEventListener('input', function() {\n if (this.value) {\n document.getElementById('blocker-from-left').value = '';\n }\n });\n \n // Initial setup\n updateBlockersList();\n updateResults();\n});\n\n// Make removeBlockerById available globally for onclick handlers\nwindow.removeBlockerById = removeBlockerById;","// Global blockers array\nlet blockers = [];\n\n/**\n * Blocker object structure:\n * {\n * id: unique identifier,\n * width: width in cm,\n * height: height in cm,\n * xLeft: left edge position,\n * xRight: right edge position\n * }\n */\n\n/**\n * Room (cm): bottom width 155, left height 115, right height 255, top is a straight slope.\n * Rectangle is axis-aligned, sitting on the floor (y=0), near the tall wall with a gap \"offset\".\n * Now also checks for collisions with existing blockers.\n *\n * @param {number} width Rectangle width along the floor (cm)\n * @param {number} height Rectangle height (cm)\n * @param {number} offset Gap from the tall (right) wall (cm)\n * @returns {{fits: boolean, reason: string, xLeft: number, xRight: number, maxHeightAtLeft: number, collidingBlocker?: object}}\n */\nfunction fitsInRoom(width, height, offset) {\n const roomWidth = 155;\n const leftHeight = 115;\n const rightHeight = 255;\n\n if (width < 0 || height < 0 || offset < 0) {\n return { fits: false, reason: \"width/height/offset must be >= 0\", xLeft: NaN, xRight: NaN, maxHeightAtLeft: NaN };\n }\n\n // 1) Compute rectangle x-range from the tall wall (right side)\n const xRight = roomWidth - offset;\n const xLeft = xRight - width;\n\n // 2) Horizontal bounds\n if (xLeft < 0) {\n return {\n fits: false,\n reason: `Doesn't fit horizontally: left edge would be at x=${xLeft.toFixed(2)}cm (needs >= 0).`,\n xLeft, xRight, maxHeightAtLeft: NaN\n };\n }\n\n // 3) Check for collisions with existing blockers\n for (const blocker of blockers) {\n // Check horizontal overlap\n const horizontalOverlap = !(xRight <= blocker.xLeft || xLeft >= blocker.xRight);\n \n if (horizontalOverlap) {\n // Check vertical overlap (both objects start from floor)\n const verticalOverlap = height > 0 && blocker.height > 0; // Both have height\n \n if (verticalOverlap) {\n return {\n fits: false,\n reason: `Collides with existing blocker (${blocker.width}×${blocker.height}cm at x=${blocker.xLeft.toFixed(1)}-${blocker.xRight.toFixed(1)}cm).`,\n xLeft, xRight, maxHeightAtLeft: NaN,\n collidingBlocker: blocker\n };\n }\n }\n }\n\n // 4) Slanted ceiling/wall line: y_max(x) = leftHeight + (rightHeight-leftHeight) * (x/roomWidth)\n const slope = (rightHeight - leftHeight) / roomWidth; // 140/155\n const maxHeightAtLeft = leftHeight + slope * xLeft;\n\n // 5) Vertical clearance at the tightest point (left edge)\n if (height > maxHeightAtLeft) {\n return {\n fits: false,\n reason: `Too tall at xLeft=${xLeft.toFixed(2)}cm: max height there is ${maxHeightAtLeft.toFixed(2)}cm.`,\n xLeft, xRight, maxHeightAtLeft\n };\n }\n\n return {\n fits: true,\n reason: \"Fits within the sloped profile at the given offset.\",\n xLeft, xRight, maxHeightAtLeft\n };\n}\n\n/**\n * Add a new blocker to the room\n * @param {number} width Blocker width in cm\n * @param {number} height Blocker height in cm\n * @param {number} fromLeft Distance from left wall (optional)\n * @param {number} fromRight Distance from right wall (optional)\n * @returns {{success: boolean, reason: string, blocker?: object}}\n */\nfunction addBlocker(width, height, fromLeft = null, fromRight = null) {\n const roomWidth = 155;\n \n if (width <= 0 || height <= 0) {\n return { success: false, reason: \"Width and height must be greater than 0\" };\n }\n \n // Determine position\n let xLeft, xRight;\n \n if (fromLeft !== null && fromRight !== null) {\n return { success: false, reason: \"Specify either fromLeft OR fromRight, not both\" };\n } else if (fromLeft !== null) {\n xLeft = fromLeft;\n xRight = xLeft + width;\n } else if (fromRight !== null) {\n xRight = roomWidth - fromRight;\n xLeft = xRight - width;\n } else {\n return { success: false, reason: \"Must specify either fromLeft or fromRight\" };\n }\n \n // Check bounds\n if (xLeft < 0 || xRight > roomWidth) {\n return { \n success: false, \n reason: `Blocker extends outside room bounds (x=${xLeft.toFixed(1)} to ${xRight.toFixed(1)}cm, room is 0 to ${roomWidth}cm)` \n };\n }\n \n // Check for collisions with existing blockers\n for (const existingBlocker of blockers) {\n const horizontalOverlap = !(xRight <= existingBlocker.xLeft || xLeft >= existingBlocker.xRight);\n if (horizontalOverlap) {\n return {\n success: false,\n reason: `Collides with existing blocker at x=${existingBlocker.xLeft.toFixed(1)}-${existingBlocker.xRight.toFixed(1)}cm`\n };\n }\n }\n \n // Check ceiling clearance\n const leftHeight = 115;\n const rightHeight = 255;\n const slope = (rightHeight - leftHeight) / roomWidth;\n const maxHeightAtLeft = leftHeight + slope * xLeft;\n \n if (height > maxHeightAtLeft) {\n return {\n success: false,\n reason: `Too tall for ceiling at x=${xLeft.toFixed(1)}cm (max height: ${maxHeightAtLeft.toFixed(1)}cm)`\n };\n }\n \n // Create blocker\n const blocker = {\n id: Date.now() + Math.random(), // Simple unique ID\n width,\n height,\n xLeft,\n xRight\n };\n \n blockers.push(blocker);\n \n return { success: true, reason: \"Blocker added successfully\", blocker };\n}\n\n/**\n * Remove a blocker by ID\n * @param {number} blockerId \n */\nfunction removeBlocker(blockerId) {\n blockers = blockers.filter(b => b.id !== blockerId);\n}\n\n// Room constants\nconst ROOM_WIDTH = 155;\nconst LEFT_HEIGHT = 115;\nconst RIGHT_HEIGHT = 255;\n\n// Canvas setup with proper aspect ratios\nfunction setupCanvases() {\n const sideCanvas = document.getElementById('sideCanvas');\n const topCanvas = document.getElementById('topCanvas');\n \n // Calculate proper dimensions for side view\n // Side view shows width (155cm) vs max height (255cm)\n const sideAspectRatio = ROOM_WIDTH / RIGHT_HEIGHT; // 155/255 ≈ 0.608\n const sideBaseWidth = 500; // Base width for good visibility\n const sideWidth = sideBaseWidth;\n const sideHeight = sideBaseWidth / sideAspectRatio; // Maintain proper aspect ratio\n \n sideCanvas.width = sideWidth;\n sideCanvas.height = sideHeight;\n sideCanvas.style.maxWidth = '100%';\n sideCanvas.style.height = 'auto';\n \n // Calculate proper dimensions for top view\n // Top view shows width (155cm) vs depth (assume 100cm for visualization)\n const roomDepth = 100;\n const topAspectRatio = ROOM_WIDTH / roomDepth; // 155/100 = 1.55\n const topBaseWidth = 500;\n const topWidth = topBaseWidth;\n const topHeight = topBaseWidth / topAspectRatio;\n \n topCanvas.width = topWidth;\n topCanvas.height = topHeight;\n topCanvas.style.maxWidth = '100%';\n topCanvas.style.height = 'auto';\n}\n\n// Canvas drawing functions\nfunction drawSideView(canvas, width, height, offset, result) {\n const ctx = canvas.getContext('2d');\n const canvasWidth = canvas.width;\n const canvasHeight = canvas.height;\n \n // Clear canvas\n ctx.clearRect(0, 0, canvasWidth, canvasHeight);\n \n // Calculate margins to center the room drawing\n const margin = 40;\n const drawWidth = canvasWidth - 2 * margin;\n const drawHeight = canvasHeight - 2 * margin;\n \n // Scale factors - maintain aspect ratio\n const scaleX = drawWidth / ROOM_WIDTH;\n const scaleY = drawHeight / RIGHT_HEIGHT;\n const scale = Math.min(scaleX, scaleY); // Use the smaller scale to fit everything\n \n // Center the drawing\n const roomDrawWidth = ROOM_WIDTH * scale;\n const roomDrawHeight = RIGHT_HEIGHT * scale;\n const offsetX = (canvasWidth - roomDrawWidth) / 2;\n const offsetY = (canvasHeight - roomDrawHeight) / 2;\n \n // Draw room outline (side view)\n ctx.strokeStyle = '#374151';\n ctx.lineWidth = 2;\n ctx.beginPath();\n // Floor\n ctx.moveTo(offsetX, offsetY + roomDrawHeight);\n ctx.lineTo(offsetX + roomDrawWidth, offsetY + roomDrawHeight);\n // Left wall\n ctx.moveTo(offsetX, offsetY + roomDrawHeight);\n ctx.lineTo(offsetX, offsetY + roomDrawHeight - LEFT_HEIGHT * scale);\n // Right wall\n ctx.moveTo(offsetX + roomDrawWidth, offsetY + roomDrawHeight);\n ctx.lineTo(offsetX + roomDrawWidth, offsetY + roomDrawHeight - RIGHT_HEIGHT * scale);\n // Sloped ceiling\n ctx.moveTo(offsetX, offsetY + roomDrawHeight - LEFT_HEIGHT * scale);\n ctx.lineTo(offsetX + roomDrawWidth, offsetY + roomDrawHeight - RIGHT_HEIGHT * scale);\n ctx.stroke();\n \n // Draw existing blockers\n blockers.forEach(blocker => {\n const blockerX = offsetX + blocker.xLeft * scale;\n const blockerWidth = blocker.width * scale;\n const blockerHeight = blocker.height * scale;\n \n // Blocker styling\n ctx.fillStyle = 'rgba(107, 114, 128, 0.7)'; // Gray\n ctx.strokeStyle = '#6b7280';\n ctx.lineWidth = 1;\n \n // Draw blocker rectangle\n ctx.fillRect(blockerX, offsetY + roomDrawHeight - blockerHeight, blockerWidth, blockerHeight);\n ctx.strokeRect(blockerX, offsetY + roomDrawHeight - blockerHeight, blockerWidth, blockerHeight);\n \n // Add blocker label\n ctx.fillStyle = '#374151';\n ctx.font = '10px sans-serif';\n ctx.fillText(`${blocker.width}×${blocker.height}`, blockerX + 2, offsetY + roomDrawHeight - blockerHeight + 12);\n });\n \n // Draw new object if valid position\n if (!isNaN(result.xLeft) && !isNaN(result.xRight)) {\n const objX = offsetX + result.xLeft * scale;\n const objWidth = width * scale;\n const objHeight = height * scale;\n \n // Object color based on fit\n ctx.fillStyle = result.fits ? 'rgba(34, 197, 94, 0.6)' : 'rgba(239, 68, 68, 0.6)';\n ctx.strokeStyle = result.fits ? '#22c55e' : '#ef4444';\n ctx.lineWidth = 2;\n \n // Draw object rectangle\n ctx.fillRect(objX, offsetY + roomDrawHeight - objHeight, objWidth, objHeight);\n ctx.strokeRect(objX, offsetY + roomDrawHeight - objHeight, objWidth, objHeight);\n \n // Highlight colliding blocker if any\n if (!result.fits && result.collidingBlocker) {\n const collidingBlocker = result.collidingBlocker;\n const blockerX = offsetX + collidingBlocker.xLeft * scale;\n const blockerWidth = collidingBlocker.width * scale;\n const blockerHeight = collidingBlocker.height * scale;\n \n ctx.strokeStyle = '#ef4444';\n ctx.lineWidth = 3;\n ctx.strokeRect(blockerX, offsetY + roomDrawHeight - blockerHeight, blockerWidth, blockerHeight);\n }\n \n // Draw height limit line at left edge\n if (!isNaN(result.maxHeightAtLeft)) {\n ctx.strokeStyle = '#f59e0b';\n ctx.lineWidth = 1;\n ctx.setLineDash([5, 5]);\n const limitY = offsetY + roomDrawHeight - result.maxHeightAtLeft * scale;\n ctx.beginPath();\n ctx.moveTo(objX, limitY);\n ctx.lineTo(objX + objWidth, limitY);\n ctx.stroke();\n ctx.setLineDash([]);\n }\n }\n \n // Add labels\n ctx.fillStyle = '#374151';\n ctx.font = '12px sans-serif';\n ctx.fillText(`${LEFT_HEIGHT}cm`, offsetX + 5, offsetY + roomDrawHeight - LEFT_HEIGHT * scale - 5);\n ctx.fillText(`${RIGHT_HEIGHT}cm`, offsetX + roomDrawWidth - 50, offsetY + roomDrawHeight - RIGHT_HEIGHT * scale - 5);\n ctx.fillText(`${ROOM_WIDTH}cm`, offsetX + roomDrawWidth / 2 - 20, offsetY + roomDrawHeight + 15);\n}\n\nfunction drawTopView(canvas, width, height, offset, result) {\n const ctx = canvas.getContext('2d');\n const canvasWidth = canvas.width;\n const canvasHeight = canvas.height;\n \n // Clear canvas\n ctx.clearRect(0, 0, canvasWidth, canvasHeight);\n \n // Room depth for visualization\n const roomDepth = 100;\n \n // Calculate margins to center the room drawing\n const margin = 40;\n const drawWidth = canvasWidth - 2 * margin;\n const drawHeight = canvasHeight - 2 * margin;\n \n // Scale factors - maintain aspect ratio\n const scaleX = drawWidth / ROOM_WIDTH;\n const scaleY = drawHeight / roomDepth;\n const scale = Math.min(scaleX, scaleY); // Use the smaller scale to fit everything\n \n // Center the drawing\n const roomDrawWidth = ROOM_WIDTH * scale;\n const roomDrawDepth = roomDepth * scale;\n const offsetX = (canvasWidth - roomDrawWidth) / 2;\n const offsetY = (canvasHeight - roomDrawDepth) / 2;\n \n // Draw room outline (top view)\n ctx.strokeStyle = '#374151';\n ctx.lineWidth = 2;\n ctx.strokeRect(offsetX, offsetY, roomDrawWidth, roomDrawDepth);\n \n // Draw existing blockers\n blockers.forEach(blocker => {\n const blockerX = offsetX + blocker.xLeft * scale;\n const blockerWidth = blocker.width * scale;\n const blockerDepth = 30 * scale; // 30cm depth for visualization\n \n // Blocker styling\n ctx.fillStyle = 'rgba(107, 114, 128, 0.7)'; // Gray\n ctx.strokeStyle = '#6b7280';\n ctx.lineWidth = 1;\n \n // Draw blocker rectangle (centered in room depth)\n const blockerY = offsetY + (roomDrawDepth - blockerDepth) / 2;\n ctx.fillRect(blockerX, blockerY, blockerWidth, blockerDepth);\n ctx.strokeRect(blockerX, blockerY, blockerWidth, blockerDepth);\n \n // Add blocker label\n ctx.fillStyle = '#374151';\n ctx.font = '10px sans-serif';\n ctx.fillText(`${blocker.width}×${blocker.height}`, blockerX + 2, blockerY + blockerDepth / 2 + 3);\n });\n \n // Draw new object if valid position\n if (!isNaN(result.xLeft) && !isNaN(result.xRight)) {\n const objX = offsetX + result.xLeft * scale;\n const objWidth = width * scale;\n const objDepth = 30 * scale; // 30cm depth for visualization\n \n // Object color based on fit\n ctx.fillStyle = result.fits ? 'rgba(34, 197, 94, 0.6)' : 'rgba(239, 68, 68, 0.6)';\n ctx.strokeStyle = result.fits ? '#22c55e' : '#ef4444';\n ctx.lineWidth = 2;\n \n // Draw object rectangle (centered in room depth)\n const objY = offsetY + (roomDrawDepth - objDepth) / 2;\n ctx.fillRect(objX, objY, objWidth, objDepth);\n ctx.strokeRect(objX, objY, objWidth, objDepth);\n \n // Highlight colliding blocker if any\n if (!result.fits && result.collidingBlocker) {\n const collidingBlocker = result.collidingBlocker;\n const blockerX = offsetX + collidingBlocker.xLeft * scale;\n const blockerWidth = collidingBlocker.width * scale;\n const blockerDepth = 30 * scale;\n const blockerY = offsetY + (roomDrawDepth - blockerDepth) / 2;\n \n ctx.strokeStyle = '#ef4444';\n ctx.lineWidth = 3;\n ctx.strokeRect(blockerX, blockerY, blockerWidth, blockerDepth);\n }\n }\n \n // Add labels\n ctx.fillStyle = '#374151';\n ctx.font = '12px sans-serif';\n ctx.fillText(`Short wall (${LEFT_HEIGHT}cm)`, offsetX + 5, offsetY - 5);\n ctx.fillText(`Tall wall (${RIGHT_HEIGHT}cm)`, offsetX + roomDrawWidth - 120, offsetY - 5);\n ctx.fillText(`${ROOM_WIDTH}cm`, offsetX + roomDrawWidth / 2 - 20, offsetY + roomDrawDepth + 15);\n \n // Draw offset indicator\n if (!isNaN(result.xRight)) {\n ctx.strokeStyle = '#6b7280';\n ctx.lineWidth = 1;\n ctx.setLineDash([3, 3]);\n const offsetLineX = offsetX + (ROOM_WIDTH - offset) * scale;\n ctx.beginPath();\n ctx.moveTo(offsetLineX, offsetY);\n ctx.lineTo(offsetLineX, offsetY + roomDrawDepth);\n ctx.stroke();\n ctx.setLineDash([]);\n \n ctx.fillStyle = '#6b7280';\n ctx.font = '10px sans-serif';\n ctx.fillText(`${offset}cm`, offsetLineX + 5, offsetY + 15);\n }\n}\n\nfunction updateBlockersList() {\n const blockersList = document.getElementById('blockers-list');\n \n if (blockers.length === 0) {\n blockersList.innerHTML = '

No blockers added yet

';\n return;\n }\n \n blockersList.innerHTML = blockers.map(blocker => `\n

${blocker.width} × ${blocker.height} cm

Position: ${blocker.xLeft.toFixed(1)} - ${blocker.xRight.toFixed(1)} cm from left

\n \n

\n ✅\n Object fits!\n

Position: ${result.xLeft.toFixed(1)}cm to ${result.xRight.toFixed(1)}cm from left wall

Max height at left edge: ${result.maxHeightAtLeft.toFixed(1)}cm

Your object height: ${height}cm

Clearance: ${(result.maxHeightAtLeft - height).toFixed(1)}cm

\n ${blockers.length > 0 ? `

✓ No collision with ${blockers.length} existing blocker(s)

` : ''}\n

\n `;\n } else {\n resultsDiv.className = 'mt-6 p-4 rounded-md bg-red-50 border border-red-200';\n resultContent.innerHTML = `\n

\n ❌\n Object doesn't fit\n

${result.reason}

\n ${!isNaN(result.maxHeightAtLeft) ? `

Max height at that position: ${result.maxHeightAtLeft.toFixed(1)}cm

` : ''}\n ${result.collidingBlocker ? `

⚠️ Collision detected with blocker

` : ''}\n

Room Fitting Calculator

\n \n

Existing Blockers

\n \n

Add New Blocker

\n Width (cm)\n \n

\n Height (cm)\n \n

\n From Left Wall (cm)\n \n

\n From Right Wall (cm)\n \n

\n * Specify either \"From Left Wall\" OR \"From Right Wall\", not both\n

\n \n

\n\n \n

New Object to Fit

\n \n

\n Width (cm)\n \n

\n \n

\n Height (cm)\n \n

\n \n

\n Offset from tall wall (cm)\n \n

\n \n \n

Results:

\n \n \n

Room Specifications:

• Width: 155 cm
• Left wall height: 115 cm
• Right wall height: 255 cm
• Sloped ceiling from left to right

\n \n \n

Room Visualization

\n \n \n

Side View

\n \n \n

Top View

\n\n \n\n",[],[141,178],["D",1768152246416],[165,166],[141],"70f6c19c-ef12-11f0-94ae-42dde27851f2","index.ts","6fc3e6c4-ef12-11f0-896b-42dde27851f2",4,["D",1768152293208],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve the main page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nexport default app.fetch;",[],[147,190],["D",1768152291198],[163],[147],["D",1768152130494],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},{"_13":84,"_32":85,"_44":43,"_86":45,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":46,"_93":94},"ctx",{"_77":-5,"_123":238,"_239":240,"_241":242,"_243":25,"_244":25,"_245":25,"_246":121,"_247":-5,"_248":-7,"_249":-7,"_250":61,"_251":25,"_252":25,"_253":-5,"_254":25,"_255":25,"_256":25,"_257":-5},"ENV",{"_209":210,"_211":212,"_213":85,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v16