[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_217":218,"_219":220},"routes/_app.x.$handle.$name",{"_94":93,"_31":43,"_102":84,"_26":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":24,"_117":118,"_119":24,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":-5,"_51":-5,"_18":52,"_53":54,"_55":56,"_57":56,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":24},"version",5,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":20,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/styles.css","latestPath","fileId","635b9dde-34e4-11f0-9d2d-9e149126039e","name","styles.css","fileType","content","/* Styles for the House Designer app */\n\n#canvas-container {\n height: calc(100vh - 220px);\n min-height: 500px;\n position: relative;\n}\n\n#design-canvas {\n background-color: #f8f9fa;\n background-image: \n linear-gradient(rgba(200, 200, 200, 0.3) 1px, transparent 1px),\n linear-gradient(90deg, rgba(200, 200, 200, 0.3) 1px, transparent 1px);\n background-size: 50px 50px;\n cursor: crosshair;\n}\n\n.tool-btn {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 8px;\n border: 1px solid #e2e8f0;\n border-radius: 0.25rem;\n background-color: #f8fafc;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.tool-btn:hover {\n background-color: #e2e8f0;\n}\n\n.tool-btn.active {\n background-color: #3b82f6;\n color: white;\n}\n\n.tool-btn .icon {\n font-size: 1.5rem;\n margin-bottom: 4px;\n}\n\n.furniture-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 8px;\n border: 1px solid #e2e8f0;\n border-radius: 0.25rem;\n background-color: #f8fafc;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.furniture-item:hover {\n background-color: #e2e8f0;\n}\n\n.furniture-item .icon {\n font-size: 1.5rem;\n margin-bottom: 4px;\n}\n\n/* Properties panel styles */\n.property-row {\n margin-bottom: 8px;\n}\n\n.property-row label {\n display: block;\n margin-bottom: 4px;\n font-size: 0.875rem;\n color: #4b5563;\n}\n\n.property-row input,\n.property-row select {\n width: 100%;\n padding: 6px;\n border: 1px solid #d1d5db;\n border-radius: 0.25rem;\n}\n\n.property-row input[type=\"color\"] {\n height: 30px;\n}\n\n/* Modal styles */\n.modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.modal-content {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n max-width: 500px;\n width: 100%;\n}\n\n/* Context menu */\n.context-menu {\n position: absolute;\n background: white;\n border: 1px solid #d1d5db;\n border-radius: 4px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n padding: 8px 0;\n z-index: 100;\n}\n\n.context-menu-item {\n padding: 8px 16px;\n cursor: pointer;\n}\n\n.context-menu-item:hover {\n background-color: #f3f4f6;\n}\n\n/* Element handles */\n.element-handle {\n position: absolute;\n width: 10px;\n height: 10px;\n background-color: #3b82f6;\n border: 1px solid white;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n cursor: move;\n z-index: 10;\n}\n\n.resize-handle {\n background-color: #10b981;\n cursor: nwse-resize;\n}\n\n.rotate-handle {\n background-color: #f59e0b;\n cursor: grab;\n}","createdAt",["D",1747681597257],"branchVersion","branchId","d8d5ad12-34e3-11f0-a6f0-9e149126039e","id","d8d55c40-34e3-11f0-a6f0-9e149126039e","laptopown",["D",1747681364854],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","bb7ea790-3377-11f0-994d-f304847156a7","pinnedFileId","3eafba42-34e4-11f0-97ef-9e149126039e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","30a4c1e3-deea-428d-9e1b-7617842b44c1","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":52,"_98":99,"_100":24},"branch",{"_13":83,"_31":84,"_41":40,"_85":42,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":43,"_92":93},"isOwned",7,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","Winner_create","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4RkRQTGp1V1FQNlMwZVcxVHBzMHl5TmF2VyJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_41":42,"_31":43,"_36":213,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":-5,"_51":-5,"_18":52,"_53":54,"_55":56,"_57":56,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":214,"_78":215,"_80":216,"_82":24},"tree",[167,169,172,174],"files",[167,168,169,170,171,172,173,174],"counts",{"_157":60,"_158":132,"_159":60,"_160":161,"_162":163},"contents",[124,125,126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":151,"_31":152,"_29":153,"_131":-5,"_39":40,"_38":154,"_133":56,"_36":155,"_13":60,"_33":143,"_34":-5,"_23":24,"_136":-5,"_26":156},{"_41":145,"_31":146,"_29":147,"_131":-5,"_39":40,"_38":148,"_133":56,"_36":149,"_13":60,"_33":143,"_34":-5,"_23":24,"_136":-5,"_26":150},{"_41":138,"_31":139,"_29":140,"_131":-5,"_39":40,"_38":141,"_133":56,"_36":142,"_13":60,"_33":143,"_34":-5,"_23":24,"_136":-5,"_26":144},{"_41":128,"_31":129,"_29":130,"_131":-5,"_39":40,"_38":132,"_133":56,"_36":134,"_13":60,"_33":20,"_34":135,"_23":24,"_136":-5,"_26":137},"35a70090-34e4-11f0-836c-9e149126039e","README.md","35a70158-34e4-11f0-836c-9e149126039e","parentId",1,"latest",["D",1747681520574],"# House Designer App\n\nA simple web-based application for designing house floor plans.\n\n## Features\n\n- 2D floor plan designer with canvas-based drawing\n- Tools for adding rooms, walls, doors, and windows\n- Basic furniture placement\n- Save and load designs\n- Measurement tools\n\n## Project Structure\n\n- `/backend` - Server-side code and API endpoints\n- `/frontend` - Client-side HTML, CSS, and JavaScript\n- `/shared` - Shared types and utilities\n\n## How to Use\n\n1. Draw walls by clicking and dragging on the canvas\n2. Add doors and windows using the toolbar\n3. Place furniture from the item palette\n4. Save your design using the save button\n5. Load previous designs from the dropdown menu\n\n## Technologies Used\n\n- HTML Canvas for rendering\n- Val Town blob storage for saving designs\n- TypeScript for type safety","label",[129],"44f24820-34e4-11f0-8ae3-9e149126039e","shared","328b745a-362d-4bc6-8d85-b69e5472de75",3,["D",1747681546232],"directory",[139],"580da490-34e4-11f0-8ae3-9e149126039e","frontend","fab1e1e6-decd-4f3e-b8b6-68fbb3be2454",4,["D",1747681578287],[146],"3eafdf5e-34e4-11f0-97ef-9e149126039e","backend","fa997af3-a858-4d97-b5f0-356b1c1fb7f5",2,["D",1747681535733],[152],"pulls","branches","forks","envVars",{"_164":60,"_166":60},"connections",{"_164":60,"_165":60},"count","unfilledCount","emptyCount",{"_41":151,"_31":152,"_29":153,"_131":-5,"_39":40,"_38":154,"_133":56,"_36":210,"_13":60,"_33":143,"_34":-5,"_23":24,"_136":-5,"_176":211,"_26":212},{"_41":204,"_31":205,"_29":54,"_131":153,"_39":40,"_38":154,"_133":24,"_36":206,"_13":60,"_33":183,"_34":207,"_23":24,"_136":-5,"_176":208,"_26":209},{"_41":145,"_31":146,"_29":147,"_131":-5,"_39":40,"_38":148,"_133":56,"_36":201,"_13":60,"_33":143,"_34":-5,"_23":24,"_136":-5,"_176":202,"_26":203},{"_41":194,"_31":195,"_29":196,"_131":147,"_39":40,"_38":148,"_133":56,"_36":197,"_13":60,"_33":20,"_34":198,"_23":24,"_136":-5,"_176":199,"_26":200},{"_41":190,"_31":32,"_29":30,"_131":147,"_39":40,"_38":14,"_133":56,"_36":191,"_13":60,"_33":20,"_34":35,"_23":24,"_136":-5,"_176":192,"_26":193},{"_41":138,"_31":139,"_29":140,"_131":-5,"_39":40,"_38":141,"_133":56,"_36":187,"_13":60,"_33":143,"_34":-5,"_23":24,"_136":-5,"_176":188,"_26":189},{"_41":179,"_31":180,"_29":181,"_131":140,"_39":40,"_38":141,"_133":56,"_36":182,"_13":60,"_33":183,"_34":184,"_23":24,"_136":-5,"_176":185,"_26":186},{"_41":128,"_31":129,"_29":130,"_131":-5,"_39":40,"_38":132,"_133":56,"_36":175,"_13":60,"_33":20,"_34":135,"_23":24,"_136":-5,"_176":177,"_26":178},["D",1747681520574],"children",[],[129],"44f1fece-34e4-11f0-8ae3-9e149126039e","types.ts","44f1ff8c-34e4-11f0-8ae3-9e149126039e",["D",1747681546232],"script","// Types for the house designer app\n\n// Main design object\nexport interface Design {\n id?: string;\n name: string;\n createdAt?: string;\n updatedAt?: string;\n elements: Element[];\n width: number;\n height: number;\n scale: number; // pixels per meter\n}\n\n// Base element type\nexport interface Element {\n id: string;\n type: ElementType;\n x: number;\n y: number;\n rotation: number; // in degrees\n properties: Record;\n}\n\n// Types of elements\nexport enum ElementType {\n WALL = \"wall\",\n DOOR = \"door\",\n WINDOW = \"window\",\n ROOM = \"room\",\n FURNITURE = \"furniture\",\n TEXT = \"text\",\n DIMENSION = \"dimension\"\n}\n\n// Wall element\nexport interface WallElement extends Element {\n type: ElementType.WALL;\n properties: {\n length: number;\n thickness: number;\n color: string;\n };\n}\n\n// Door element\nexport interface DoorElement extends Element {\n type: ElementType.DOOR;\n properties: {\n width: number;\n isOpen: boolean;\n openDirection: \"left\" | \"right\";\n color: string;\n };\n}\n\n// Window element\nexport interface WindowElement extends Element {\n type: ElementType.WINDOW;\n properties: {\n width: number;\n height: number;\n color: string;\n };\n}\n\n// Room element\nexport interface RoomElement extends Element {\n type: ElementType.ROOM;\n properties: {\n width: number;\n height: number;\n name: string;\n color: string;\n floorColor: string;\n };\n}\n\n// Furniture element\nexport interface FurnitureElement extends Element {\n type: ElementType.FURNITURE;\n properties: {\n width: number;\n height: number;\n name: string;\n color: string;\n furnitureType: string;\n };\n}\n\n// Text element\nexport interface TextElement extends Element {\n type: ElementType.TEXT;\n properties: {\n text: string;\n fontSize: number;\n color: string;\n };\n}\n\n// Dimension element\nexport interface DimensionElement extends Element {\n type: ElementType.DIMENSION;\n properties: {\n length: number;\n startX: number;\n startY: number;\n endX: number;\n endY: number;\n color: string;\n };\n}",[],[139,180],["D",1747681546232],[173],[139],"635b9d34-34e4-11f0-9d2d-9e149126039e",["D",1747681597257],[],[146,32],"580d74c0-34e4-11f0-8ae3-9e149126039e","index.html","580d757e-34e4-11f0-8ae3-9e149126039e",["D",1747681578287],"\n\n\n \n \n House Designer\n \n \n \n\n\n

House Designer

\n \n

\n\n

Tools

\n \n \n \n \n \n \n \n \n

\n\n

Properties

\n No element selected\n

\n \n

\n\n

Furniture

\n \n \n \n \n \n \n \n \n

\n\n

\n Grid Size:\n \n

\n Design Name:\n \n

\n \n \n

\n X: 0, Y: 0\n Scale: 1:50\n

\n View Source\n

\n\n \n \n\n \n \n\n \n\n",[],[146,195],["D",1747681578287],[170,171],[146],"3eafb966-34e4-11f0-97ef-9e149126039e","index.ts",["D",1747681535733],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Design } from \"../shared/types.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve the main HTML page with initial data\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Get project info for \"view source\" link\n const projectInfo = parseProject(import.meta.url);\n \n // Get list of saved designs\n const savedDesigns = await blob.list(\"design_\");\n \n // Inject data to avoid extra round-trips\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\n// API endpoint to save a design\napp.post(\"/api/designs\", async c => {\n try {\n const design = await c.req.json() as Design;\n const id = design.id || `design_${Date.now()}`;\n \n await blob.setJSON(id, {\n ...design,\n id,\n updatedAt: new Date().toISOString()\n });\n \n return c.json({ success: true, id });\n } catch (error) {\n return c.json({ success: false, error: error.message }, 500);\n }\n});\n\n// API endpoint to get a design\napp.get(\"/api/designs/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n const design = await blob.getJSON(id);\n \n if (!design) {\n return c.json({ success: false, error: \"Design not found\" }, 404);\n }\n \n return c.json({ success: true, design });\n } catch (error) {\n return c.json({ success: false, error: error.message }, 500);\n }\n});\n\n// API endpoint to list all designs\napp.get(\"/api/designs\", async c => {\n try {\n const designs = await blob.list(\"design_\");\n return c.json({ success: true, designs });\n } catch (error) {\n return c.json({ success: false, error: error.message }, 500);\n }\n});\n\n// API endpoint to delete a design\napp.delete(\"/api/designs/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n await blob.delete(id);\n return c.json({ success: true });\n } catch (error) {\n return c.json({ success: false, error: error.message }, 500);\n }\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[152,205],["D",1747681535733],[168],[152],["D",1747681364854],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":52,"_98":99,"_100":24},{"_13":83,"_31":84,"_41":40,"_85":42,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":43,"_92":93},"ctx",{"_76":-5,"_121":250,"_251":252,"_253":254,"_255":24,"_256":24,"_257":24,"_258":56,"_259":-5,"_260":-7,"_261":-7,"_262":60,"_263":24,"_264":24,"_265":-5,"_266":24,"_267":24,"_268":24,"_269":-5},"ENV",{"_221":222,"_223":224,"_225":84,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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"]

Tools

Properties

Furniture

Save Design

Delete Design

Diff · v5