DesignMySpace - Room Selection

{"name":"Nugget Nightmare","description":"In 'Nugget Nightmare', a seemingly innocent chicken nugget turns into a terrifying monster! Navigate through the eerie McDonald's while avoiding this dastardly deep-fried fiend. Can you escape the nugget's clutches and survive the horror? Get ready for a quirky thrill ride!","photo":null,"view_count":7,"fork_count":0,"expires_at":null,"created_at":"2024-07-29T19:04:13.933620Z","updated_at":"2024-07-29T19:04:13.933620Z","user_id":30,"status":"PRIVATE","parent_id":null,"id":2460,"user":{"photo":null,"email":null,"recess_id":"4547bd3e-5943-d964-5c1f-924c476c0ad3","created_at":"2023-12-22T02:12:08.598364Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"elsiethejippitypro","id":30,"password_hash":null,"updated_at":"2023-12-22T02:12:08.598367Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"\ndocument.body.onload = addRoomSelection;\nvar selectedFurniture = [];\nvar ctx;\n\n\n\nfunction addRoomSelection() {\n var roomSelection = document.createElement('div');\n roomSelection.id = 'roomSelection';\n document.body.appendChild(roomSelection);\n\n var rooms = ['LivingRoom', 'Kitchen', 'Bedroom'];\n rooms.forEach((room) => {\n var div = document.createElement('div');\n div.className = room;\n div.textContent = room;\n div.onclick = function () {\n enterBuildMode(room);\n };\n roomSelection.appendChild(div);\n });\n\n var h1 = document.createElement('h1');\n h1.id = 'roomTitle';\n h1.textContent = 'Select Your Room';\n document.body.appendChild(h1);\n\n var roomDisplay = document.createElement('div');\n roomDisplay.id = 'roomDisplay';\n document.body.appendChild(roomDisplay);\n}\n\nfunction enterBuildMode(room) {\n document.body.innerHTML = \"\";\n selectedFurniture = [];\n\n var h1 = document.createElement('h1');\n h1.id = 'roomTitle';\n h1.textContent = 'Build Mode - ' + room;\n document.body.appendChild(h1);\n\n // Create the room div\n var roomDiv = document.createElement('div');\n roomDiv.id = 'room';\n document.body.appendChild(roomDiv);\n\n // Create the wallpaper div\n var wallpaperDiv = document.createElement('div');\n wallpaperDiv.id = 'wallpaper';\n roomDiv.appendChild(wallpaperDiv);\n\n // Create the floor div\n var floorDiv = document.createElement('div');\n floorDiv.id = 'floor';\n roomDiv.appendChild(floorDiv);\n\n // Create the Change Wallpaper button\n var changeWallpaperButton = document.createElement('button');\n changeWallpaperButton.id = 'changeWallpaper';\n changeWallpaperButton.innerText = 'Change Wallpaper';\n document.body.appendChild(changeWallpaperButton);\n\n // Create the Change Floor button\n var changeFloorButton = document.createElement('button');\n changeFloorButton.id = 'changeFloor';\n changeFloorButton.innerText = 'Change Floor';\n document.body.appendChild(changeFloorButton);\n\n // Add event listeners for the buttons\n changeWallpaperButton.addEventListener('click', function () {\n var color = prompt(\"Enter a color for the wallpaper:\");\n wallpaperDiv.style.background = color;\n });\n\n changeFloorButton.addEventListener('click', function () {\n var color = prompt(\"Enter a color for the floor:\");\n floorDiv.style.background = color;\n });\n\n var canvas = document.createElement('canvas');\n canvas.id = 'furnitureCanvas';\n canvas.width = 600;\n canvas.height = 600;\n document.body.appendChild(canvas);\n ctx = canvas.getContext('2d');\n\n // Draw a rectangle in the canvas\n ctx.beginPath();\n ctx.rect(50, 50, 500, 500);\n ctx.lineWidth = 5;\n ctx.strokeStyle = \"black\";\n ctx.stroke();\n\n var roomSelection = document.createElement('div');\n roomSelection.id = 'roomSelection';\n document.body.appendChild(roomSelection);\n\n var furnitureItems = ['Sofa', 'Table', 'Chair', 'Bed', 'Cabinet'];\n\n furnitureItems.forEach((item) => {\n var div = document.createElement('div');\n div.className = item;\n div.textContent = item;\n div.onclick = function () {\n if (!selectedFurniture.includes(item)) {\n selectedFurniture.push(item);\n displayRoom(room);\n drawFurniture(item);\n }\n };\n document.getElementById('roomSelection').appendChild(div);\n });\n}\ndocument.body.innerHTML = \"\";\nselectedFurniture = [];\n\nvar h1 = document.createElement('h1');\nh1.id = 'roomTitle';\nh1.textContent = 'Build Mode - ' + room;\ndocument.body.appendChild(h1);\n\nvar canvas = document.createElement('canvas');\ncanvas.id = 'furnitureCanvas';\ncanvas.width = 600;\ncanvas.height = 600;\ndocument.body.appendChild(canvas);\nctx = canvas.getContext('2d'); // Assign ctx inside enterBuildMode function\n\n\nctx.beginPath();\nctx.rect(50, 50, 500, 500);\nctx.lineWidth = 5;\nctx.strokeStyle = \"black\";\nctx.stroke();\n\nvar roomSelection = document.createElement('div'); // recreate roomSelection div\nroomSelection.id = 'roomSelection';\ndocument.body.appendChild(roomSelection);\n\nvar furnitureItems = ['Sofa', 'Table', 'Chair', 'Bed', 'Cabinet'];\n\nfurnitureItems.forEach((item) => {\n var div = document.createElement('div');\n div.className = item;\n div.textContent = item;\n div.onclick = function () {\n if (!selectedFurniture.includes(item)) {\n selectedFurniture.push(item);\n displayRoom(room);\n drawFurniture(item);\n }\n };\n document.getElementById('roomSelection').appendChild(div);\n});\n\n\n\nfunction drawFurniture(item) {\n ctx.fillStyle = item === 'Sofa' ? 'yellow'\n : item === 'Table' ? 'purple'\n : item === 'Chair' ? 'orange'\n : item === 'Bed' ? 'pink'\n : 'brown';\n\n var x = 70 + (selectedFurniture.indexOf(item) % 8) * 60; // Calculate x-coordinate \n var y = 70 + Math.floor(selectedFurniture.indexOf(item) / 8) * 60; // Calculate y-coordinate \n\n if (item === 'Sofa' || item === 'Bed') {\n ctx.fillRect(x, y, 50, 30);\n } else if (item === 'Table') {\n ctx.beginPath();\n ctx.arc(x + 25, y + 15, 25, 0, 2 * Math.PI);\n ctx.fill();\n } else if (item === 'Chair') {\n ctx.beginPath();\n ctx.moveTo(x, y);\n ctx.lineTo(x + 30, y + 30);\n ctx.lineTo(x - 30, y + 30);\n ctx.closePath();\n ctx.fill();\n } else {\n ctx.fillRect(x, y, 30, 30);\n }\n}\nfunction displayRoom(room) {\n var roomDisplay = document.getElementById('roomDisplay');\n if (roomDisplay) {\n roomDisplay.textContent = 'You are now in: ' + room;\n }\n}","style.css":"\r\n/* style.css */\r\n.LivingRoom {\r\n width: 100px;\r\n height: 100px;\r\n background-color: red;\r\n}\r\n\r\n.Kitchen {\r\n width: 100px;\r\n height: 100px;\r\n background-color: blue;\r\n}\r\n\r\n.Bedroom {\r\n width: 100px;\r\n height: 100px;\r\n background-color: green;\r\n}\r\n\r\n.Sofa {\r\n width: 50px;\r\n height: 50px;\r\n background-color: yellow;\r\n}\r\n\r\n.Table {\r\n width: 50px;\r\n height: 50px;\r\n background-color: purple;\r\n}\r\n\r\n.Chair {\r\n width: 50px;\r\n height: 50px;\r\n background-color: orange;\r\n}\r\n\r\n.Bed {\r\n width: 50px;\r\n height: 50px;\r\n background-color: pink;\r\n}\r\n\r\n.Cabinet {\r\n width: 50px;\r\n height: 50px;\r\n background-color: brown;\r\n}\r\n\r\n#canvasContainer {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 600px;\r\n border: 1px solid black;\r\n}\r\n\r\n#roomSelection {\r\n position: absolute;\r\n top: 60px;\r\n /* this should be the same as the height of the roomTitle */\r\n left: 0;\r\n}\r\n\r\n#roomTitle {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n height: 50px;\r\n /* adjust as needed */\r\n}\r\n\r\n#room {\r\n width: 500px;\r\n height: 300px;\r\n border: 1px solid black;\r\n position: relative;\r\n overflow: hidden;\r\n /* This will prevent wallpaper and floor from extending outside the room */\r\n}\r\n\r\n#wallpaper {\r\n width: 100%;\r\n height: 70%;\r\n background: lightblue;\r\n /* Replace with your preferred color */\r\n position: absolute;\r\n top: 0;\r\n}\r\n\r\n#floor {\r\n width: 100%;\r\n height: 30%;\r\n background: lightgray;\r\n /* Replace with your preferred color */\r\n position: absolute;\r\n bottom: 0;\r\n}","index.html":"\n\n\n\n\n DesignMySpace - Room Selection\n \n\n\n\n

\n \n

\n\n\n"},"chat_history":[{"deleted":0,"code_id":159607,"input_tokens":null,"id":77973,"project_id":2460,"sender":"human","message":"Let's get started!","created_at":"2024-10-03T14:48:24.784852Z","output_tokens":null},{"deleted":0,"code_id":159607,"input_tokens":null,"id":77974,"project_id":2460,"sender":"ai","message":"Great! Could you tell me a bit more about what you'd like to do with your project? Are you planning to build a game, website, animation, or something else? What features or ideas do you have in mind for 'Nugget Nightmare'?","created_at":"2024-10-03T14:48:24.797952Z","output_tokens":null},{"deleted":0,"code_id":159608,"input_tokens":null,"id":77975,"project_id":2460,"sender":"human","message":"Give me wings of fire book one questions please from chapter 30 31 32 ","created_at":"2024-10-03T14:49:16.310429Z","output_tokens":null},{"deleted":0,"code_id":159608,"input_tokens":null,"id":77976,"project_id":2460,"sender":"ai","message":"I'm here to help with programming-related questions and project development. If you'd like to work on your 'Nugget Nightmare' project or any other programming project, feel free to share the details! If you have any other questions, let me know how I can assist you.","created_at":"2024-10-03T14:49:16.330166Z","output_tokens":null},{"deleted":0,"code_id":159609,"input_tokens":null,"id":77977,"project_id":2460,"sender":"human","message":"Give me wings of fire book one questions please from chapter 30 31 32","created_at":"2024-10-03T14:50:06.207880Z","output_tokens":null},{"deleted":0,"code_id":159609,"input_tokens":null,"id":77978,"project_id":2460,"sender":"ai","message":"I'm here to help with programming and project development. If you're interested in working on a project like 'Nugget Nightmare' or need assistance with any coding tasks, feel free to share the details! If you have any other questions or need help with something else, just let me know how I can assist you.","created_at":"2024-10-03T14:50:06.220370Z","output_tokens":null}],"assets":[],"messages_sent":3,"comments":[],"steps":[]}