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","label",[166,64],"frontend","pulls","branches","forks","envVars",{"_174":26,"_176":26},"connections",{"_174":26,"_175":26},"count","unfilledCount","emptyCount",{"_34":221,"_13":220,"_62":213,"_44":-5,"_36":37,"_158":187,"_159":151,"_38":222,"_40":26,"_65":207,"_162":-5,"_66":24,"_164":-5,"_189":223,"_17":224},{"_34":210,"_13":211,"_62":212,"_44":213,"_36":37,"_158":214,"_159":151,"_38":215,"_40":41,"_65":216,"_162":217,"_66":24,"_164":-5,"_189":218,"_17":219},{"_34":205,"_13":166,"_62":157,"_44":-5,"_36":37,"_158":41,"_159":151,"_38":206,"_40":26,"_65":207,"_162":-5,"_66":24,"_164":-5,"_189":208,"_17":209},{"_34":156,"_13":64,"_62":63,"_44":157,"_36":37,"_158":80,"_159":151,"_38":202,"_40":161,"_65":21,"_162":163,"_66":24,"_164":-5,"_189":203,"_17":204},{"_34":192,"_13":193,"_62":194,"_44":157,"_36":37,"_158":195,"_159":151,"_38":196,"_40":197,"_65":198,"_162":199,"_66":24,"_164":-5,"_189":200,"_17":201},{"_34":183,"_13":184,"_62":185,"_44":-5,"_36":37,"_158":120,"_159":151,"_38":186,"_40":187,"_65":21,"_162":188,"_66":24,"_164":-5,"_189":190,"_17":191},"9967f7ca-ef14-11f0-bc29-42dde27851f2","README.md","76bbf232-ef12-11f0-86f7-42dde27851f2",["D",1768153220052],3,"# Room Fitting Calculator\n\nA web application that calculates and visualizes whether objects can fit in a specific room with a sloped ceiling, taking into account existing blockers/obstacles.\n\n## Room Specifications\n\n- **Width**: 155 cm\n- **Left wall height**: 115 cm \n- **Right wall height**: 255 cm\n- **Ceiling**: Straight slope from left to right\n\n## Features\n\n- **Blocker Management**: Add arbitrary blockers with custom dimensions and positioning\n - Define blockers by width, height, and position (from left or right wall)\n - Visual representation in both side and top views\n - Automatic collision detection between blockers\n - Easy removal of existing blockers\n- **Real-time calculation**: Enter object dimensions and see instant results\n- **Visual feedback**: Color-coded results (green = fits, red = doesn't fit)\n- **Collision detection**: Prevents overlapping objects and highlights conflicts\n- **Dual visualization**:\n - Side view showing the sloped ceiling, blockers, and object placement with accurate aspect ratio (155cm width × 255cm max height)\n - Top view showing the floor plan and positioning with proper proportions (155cm × 100cm assumed depth)\n- **Detailed results**: Shows exact positioning, clearance, collision info, and failure reasons\n\n## How to Use\n\n### Adding Blockers\n1. In the \"Existing Blockers\" section, enter the blocker's dimensions\n2. Specify position using either:\n - **From Left Wall**: Distance from the left (short) wall\n - **From Right Wall**: Distance from the right (tall) wall\n3. Click \"Add Blocker\" to place it in the room\n4. Blockers are shown in gray in both visualizations\n5. Remove blockers using the \"Remove\" button\n\n### Testing Object Fit\n1. Enter your object's **width** (cm) - how wide it is along the floor\n2. Enter your object's **height** (cm) - how tall it is\n3. Enter the **offset** (cm) - gap you want from the tall wall\n4. View the results and visualizations\n\n## Visualization Features\n\n- **Accurate Proportions**: Both side and top views maintain the correct aspect ratios based on real room measurements\n- **Responsive Design**: Canvases automatically scale to fit the available space while preserving proportions\n- **Detailed Measurements**: All dimensions are clearly labeled with actual centimeter values\n- **Color-coded Feedback**: Green for objects that fit, red for conflicts, gray for existing blockers\n- **Interactive Elements**: Hover and click interactions for better user experience\n\n## Algorithm\n\nThe application uses a precise geometric calculation that:\n1. Checks for collisions with existing blockers first\n2. Positions the object against the tall wall with the specified offset\n3. Calculates the maximum ceiling height at the object's position\n4. Determines if the object fits within the sloped ceiling constraints\n5. Provides detailed feedback on positioning, clearance, and any conflicts\n\n## Blocker System\n\n- **Collision Detection**: Prevents overlapping blockers and objects\n- **Flexible Positioning**: Position blockers from either wall\n- **Visual Feedback**: Conflicting blockers are highlighted in red\n- **Ceiling Validation**: Blockers must fit under the sloped ceiling\n- **Dynamic Updates**: All visualizations update in real-time\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Hono server serving static files\n├── frontend/\n│ ├── index.html # Main HTML interface with blocker management\n│ └── script.js # Enhanced fitting algorithm with blocker support\n└── README.md\n```\n\nThe core fitting algorithm handles edge cases like negative dimensions, objects extending beyond room boundaries, blocker collisions, and precise height calculations along the sloped ceiling.","children",[],[184],"89550422-ef14-11f0-9b2e-42dde27851f2","script.js","6cc9b624-ef12-11f0-aa0a-42dde27851f2",17,["D",1768153193069],9,"script","// 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 `).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 // Setup canvases with proper aspect ratios\n setupCanvases();\n \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;",[],[166,193],["D",1768153117169],[],[166,64],"5512fae0-ef12-11f0-bed9-42dde27851f2",["D",1768152246416],"directory",[180,181],[166],"70f6c19c-ef12-11f0-94ae-42dde27851f2","index.ts","6fc3e6c4-ef12-11f0-896b-42dde27851f2","a05299ce-158f-4894-8c20-a5ef78b3be0d",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;",[],[220,211],"backend","6fc4049c-ef12-11f0-896b-42dde27851f2",["D",1768152291198],[178],[220],["D",1768152130494],{"_11":12,"_133":69},{"_11":12,"_129":-5,"_68":69,"_30":67,"_130":131,"_132":24},{"_40":120,"_13":16,"_34":37,"_121":87,"_122":-5,"_123":-5,"_124":-5,"_125":-5,"_126":-5,"_127":14,"_128":12},"ctx",{"_52":-5,"_153":262,"_263":264,"_265":266,"_267":24,"_268":24,"_269":24,"_270":151,"_271":-5,"_272":-7,"_273":-7,"_274":26,"_275":24,"_276":24,"_277":-5,"_278":24,"_279":24,"_280":24,"_281":-5},"ENV",{"_233":234,"_235":236,"_237":16,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]

History · index.html