The Space Race

{"name":"space race","description":"Embark on a whimsical quest with Whimsical Sprite Quest! Help the playful sprites navigate through a magical world filled with surprises and challenges.","photo":null,"view_count":48,"fork_count":5,"expires_at":null,"created_at":"2024-01-26T15:50:57.609926Z","updated_at":"2024-01-30T16:42:06.744287Z","user_id":7,"status":"PRIVATE","parent_id":null,"id":475,"user":{"username":"astrogoose18","id":7,"password_hash":"$2b$12$vP3qRABi/7OSTVJVnQLnt.PMLKDSvfUTL4Y9mCa2gjm9mZzjSXPi2","updated_at":"2023-12-12T14:03:59.340920Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"ethanjelzer@gmail.com","recess_id":"e1eeaa50-7dab-c930-3cfc-58e768624b88","created_at":"2023-12-12T14:03:59.340917Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"","style.css":"","index.html":"\n\n\n\n\n \n \n \n The Space Race\n \n\n\n\n \n \n \n\n \n \n\n

\n\n \n

\n\n \n\n\n\n\n\n"},"chat_history":[{"project_id":475,"message":"add a more credits option at the bottom of the og credits model. when you open it it opens a new modle of other credits. other music: suno chirp bot\nBackground art: mid journey V6\nicons: font awesome","created_at":"2024-01-31T19:35:03.759117Z","output_tokens":null,"deleted":0,"code_id":32611,"sender":"human","input_tokens":null,"id":18697},{"project_id":475,"message":"HTML Changes:\n\n```html\n\n\n\n\n\n```\n\nJavaScript Changes:\n\n```javascript\n// Get the More Credits modal\nvar moreCreditsModal = document.getElementById(\"moreCreditsModal\");\n\n// Get the More Credits button that opens the modal\nvar moreCreditsBtn = document.getElementById(\"moreCreditsBtn\");\n\n// When the user clicks the More Credits button, open the More Credits modal\nmoreCreditsBtn.onclick = function() {\n moreCreditsModal.style.display = \"block\";\n modal.style.display = \"none\"; // Hide the original credits modal\n}\n\n// When the user clicks on (x), close the More Credits modal\nvar moreCreditsClose = moreCreditsModal.getElementsByClassName(\"close\")[0];\nmoreCreditsClose.onclick = function() {\n moreCreditsModal.style.display = \"none\";\n}\n\n// When the user clicks anywhere outside of the More Credits modal, close it\nwindow.onclick = function(event) {\n if (event.target == moreCreditsModal) {\n moreCreditsModal.style.display = \"none\";\n }\n}\n```\n\nExplanation:\n\n- In the HTML, we added a link labeled \"More Credits...\" to the end of the original credits modal. This link will open up a new modal with additional credits when clicked.\n- We created a new modal with the id \"moreCreditsModal\" and populated it with the additional credits.\n- In the JavaScript, we added logic to handle opening and closing the new modal in the same way as the original credits modal. The original credits modal is hidden when the More Credits link is clicked.","created_at":"2024-01-31T19:35:03.765442Z","output_tokens":null,"deleted":0,"code_id":32611,"sender":"ai","input_tokens":null,"id":18698},{"project_id":475,"message":"full script part","created_at":"2024-01-31T19:38:41.469939Z","output_tokens":null,"deleted":0,"code_id":32631,"sender":"human","input_tokens":null,"id":18705},{"project_id":475,"message":"```javascript\nwindow.onload = function() {\n var canvas = document.getElementById('gameScreen');\n var ctx = canvas.getContext('2d');\n \n var img = new Image();\n img.onload = function() {\n var aspectRatio = img.naturalWidth / img.naturalHeight;\n var newWidth = canvas.height * aspectRatio;\n var newHeight = canvas.height;\n if (newWidth > canvas.width) {\n newWidth = canvas.width;\n newHeight = canvas.width / aspectRatio;\n }\n var xOffset = (canvas.width - newWidth) / 2;\n var yOffset = (canvas.height - newHeight) / 2;\n\n ctx.drawImage(img, xOffset, yOffset, newWidth, newHeight);\n }\n\n var race = document.getElementById(\"race\");\n var test = document.getElementById(\"test\");\n var body = document.body;\n\n race.addEventListener(\"mouseover\", function() {\n body.style.backgroundImage = \"url('https://media.discordapp.net/attachments/1172012862194073744/1200481835067650079/output-onlinetools_4.png?ex=65c656d5&is=65b3e1d5&hm=adb5763bd179257a65bd82d5f4d09e3a05925701edbf5bc77d5a63d113deefcf&=&format=webp&quality=lossless&width=1001&height=561')\";\n });\n\n test.addEventListener(\"mouseover\", function() {\n body.style.backgroundImage = \"url('https://media.discordapp.net/attachments/1172012862194073744/1200478703096967208/download_4.png?ex=65c653ea&is=65b3deea&hm=e755250276c6db63486ad00325614d09a7c3a7feedb4db5659744752cffbf83b&=&format=webp&quality=lossless&width=1001&height=561')\";\n });\n\n race.addEventListener(\"mouseout\", function() {\n body.style.backgroundImage = \"\";\n });\n\n test.addEventListener(\"mouseout\", function() {\n body.style.backgroundImage = \"\";\n });\n\n // Get the modal\n var modal = document.getElementById(\"creditsModal\");\n \n // Get the button that opens the modal\n var btn = document.getElementById(\"creditsBtn\");\n\n // Get the element that closes the modal\n var span = modal.getElementsByClassName(\"close\")[0];\n\n // When the user clicks the button, open the modal \n btn.onclick = function() {\n modal.style.display = \"block\";\n }\n\n // When the user clicks on (x), close the modal\n span.onclick = function() {\n modal.style.display = \"none\";\n }\n\n // When the user clicks anywhere outside of the modal, close it\n window.onclick = function(event) {\n if (event.target == modal) {\n modal.style.display = \"none\";\n }\n }\n\n // Get the More Credits modal\n var moreCreditsModal = document.getElementById(\"moreCreditsModal\");\n\n // Get the More Credits button that opens the modal\n var moreCreditsBtn = document.getElementById(\"moreCreditsBtn\");\n\n // When the user clicks the More Credits button, open the More Credits modal\n moreCreditsBtn.onclick = function() {\n moreCreditsModal.style.display = \"block\";\n modal.style.display = \"none\"; // Hide the original credits modal\n }\n\n // When the user clicks on (x), close the More Credits modal\n var moreCreditsClose = moreCreditsModal.getElementsByClassName(\"close\")[0];\n moreCreditsClose.onclick = function() {\n moreCreditsModal.style.display = \"none\";\n }\n\n // When the user clicks anywhere outside of the More Credits modal, close it\n window.onclick = function(event) {\n if (event.target == moreCreditsModal) {\n moreCreditsModal.style.display = \"none\";\n }\n }\n\n// Check if there's a song playing\n if (localStorage.getItem('isPlaying')) {\n // If there's a song playing, continue playing it\n document.getElementById('bgMusic').play();\n } else {\n // If there's no song playing, play the song and set 'isPlaying' to true\n document.getElementById('bgMusic').play();\n localStorage.setItem('isPlaying', true);\n }\n\n // When the user leaves the page, set 'isPlaying' to false\n window.onbeforeunload = function() {\n localStorage.setItem('isPlaying', false);\n }\n}\n```\n\nExplanation:\n\n- This JavaScript code initializes the canvas for the game screen, loads an image, and sets the image as the background of the canvas.\n- It also adds event listeners to the \"race\" and \"test\" elements to change the background image when these elements are hovered over.\n- The code gets the credits modal and the button that opens it, and sets event listeners to open the modal when the button is clicked, and to close the modal when the \"x\" is clicked or when the user clicks outside the modal.\n- It does the same for the More Credits modal.\n- The code checks if there's a song playing. If there is, it continues playing the song. If there isn't, it starts playing the song and sets 'isPlaying' to true in the localStorage.\n- When the user leaves the page, 'isPlaying' is set to false.","created_at":"2024-01-31T19:38:41.477677Z","output_tokens":null,"deleted":0,"code_id":32631,"sender":"ai","input_tokens":null,"id":18706},{"project_id":475,"message":"\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\"\n\nadd a rocket icon for race. A car for test drive and an info logo for creddits","created_at":"2024-01-31T19:46:20.678216Z","output_tokens":null,"deleted":0,"code_id":32650,"sender":"human","input_tokens":null,"id":18715},{"project_id":475,"message":"HTML Changes:\n\n```html\n\n```\n\nExplanation:\n\n- We have added Font Awesome icons to the menu items for Race, Test Drive, and Credits.\n- The `class` attribute with values `fas fa-rocket`, `fas fa-car`, and `fas fa-info-circle` are used to display the rocket, car, and info circle icons respectively.\n- These icons are added before the text for each menu item, separated by a space for readability.\n- This change makes the menu more visually appealing and intuitive by providing a relevant icon for each option.","created_at":"2024-01-31T19:46:20.685220Z","output_tokens":null,"deleted":0,"code_id":32650,"sender":"ai","input_tokens":null,"id":18716},{"project_id":475,"message":"Icons look good, but what happened to the sidebar?","created_at":"2024-01-31T19:47:46.948070Z","output_tokens":null,"deleted":0,"code_id":32656,"sender":"human","input_tokens":null,"id":18721},{"project_id":475,"message":"From the HTML code snippet you provided, it seems that the sidebar has been removed. To bring it back, you need to enclose the main menu and the title inside the `