CodeQuest: Terminal Adventure

{"name":"CodeQuest: Terminal Adventure","description":"Embark on a coding adventure with CodeQuest! Step into the shoes of a programmer navigating through a text-based world. Use your coding skills to interact with the environment and complete challenges.","photo":null,"view_count":5,"fork_count":0,"expires_at":null,"created_at":"2024-04-08T03:31:11.976594Z","updated_at":"2024-04-08T03:31:11.976594Z","user_id":2,"status":"PRIVATE","parent_id":null,"id":1079,"user":{"username":"gamerc0der","id":2,"password_hash":null,"updated_at":"2023-12-11T22:13:50.357943Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"a75a82d5-5ae6-41b7-d20f-788415be036d","created_at":"2023-12-11T22:13:50.357940Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"document.getElementById('inputField').addEventListener('keypress', function(e) {\r\n if (e.key === 'Enter') {\r\n const input = this.value;\r\n document.getElementById('output').innerText += `\\n> ${input}`;\r\n this.value = ''; // Clear the input field\r\n }\r\n});\r\n","style.css":"","index.html":"\n\n\n\n \n \n CodeQuest: Terminal Adventure\n \n

\n \n

\n\n\n\n\n \n\n\n\n"},"chat_history":[{"deleted":0,"code_id":62014,"input_tokens":null,"id":34262,"project_id":1079,"sender":"human","message":"Let's get started!","created_at":"2024-04-08T03:31:48.242765Z","output_tokens":null},{"deleted":0,"code_id":62014,"input_tokens":null,"id":34263,"project_id":1079,"sender":"ai","message":"","created_at":"2024-04-08T03:31:48.248577Z","output_tokens":null},{"deleted":0,"code_id":62015,"input_tokens":null,"id":34264,"project_id":1079,"sender":"human","message":"ok create the terminal","created_at":"2024-04-08T03:31:53.575014Z","output_tokens":null},{"deleted":0,"code_id":62015,"input_tokens":null,"id":34265,"project_id":1079,"sender":"ai","message":"```html\n

\n \n

\n```\n- This HTML code creates a `div` element that acts as the terminal.\n- Inside the terminal `div`, there is another `div` with the ID `output` for displaying the terminal output.\n- An `input` element of type `text` with the ID `inputField` is added for the user to enter commands. The `autofocus` attribute automatically focuses this input field when the page loads.\n\n```css\n#terminal {\n background-color: black;\n color: white;\n padding: 20px;\n font-family: monospace;\n}\n\n#inputField {\n width: 100%;\n background-color: black;\n color: lime;\n border: none;\n outline: none;\n}\n```\n- The CSS styles the terminal with a black background and white text, using a monospace font for a classic terminal look.\n- The input field is styled to blend with the terminal's appearance, using a lime color for the text to distinguish input from output. The border and outline are removed to maintain the terminal's aesthetic.\n\n```javascript\ndocument.getElementById('inputField').addEventListener('keypress', function(e) {\n if (e.key === 'Enter') {\n const input = this.value;\n document.getElementById('output').innerText += `\\n> ${input}`;\n this.value = ''; // Clear the input field\n }\n});\n```\n- This JavaScript listens for the `keypress` event on the input field.\n- It checks if the pressed key is `Enter`. If so, it takes the value from the input field and appends it to the output `div`, prefixed with `> ` to signify user input.\n- Finally, it clears the input field to allow for new input.","created_at":"2024-04-08T03:31:53.582845Z","output_tokens":null},{"deleted":0,"code_id":62019,"input_tokens":null,"id":34266,"project_id":1079,"sender":"human","message":"make the terminal fullscreen","created_at":"2024-04-08T03:32:24.891512Z","output_tokens":null},{"deleted":0,"code_id":62019,"input_tokens":null,"id":34267,"project_id":1079,"sender":"ai","message":"```css\nhtml, body {\n margin: 0;\n height: 100%;\n overflow: hidden;\n}\n\n#terminal {\n height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n#output {\n flex-grow: 1;\n overflow-y: auto;\n}\n```\n- Sets the HTML and body elements to have no margin and a height of 100% to allow for full-screen styling without default browser padding/margins.\n- Styles the terminal to take up the full viewport height (`100vh`) and uses `flex` display to organize its children vertically.\n- The `#output` is set to grow to fill the available space and scroll vertically (`overflow-y: auto`) if the content exceeds the terminal's height.","created_at":"2024-04-08T03:32:24.896748Z","output_tokens":null},{"deleted":0,"code_id":62027,"input_tokens":null,"id":34268,"project_id":1079,"sender":"human","message":"add a ton of commands like print add subtract multilply and other math ones and repeat and some programming language stuff","created_at":"2024-04-08T03:33:34.085762Z","output_tokens":null},{"deleted":0,"code_id":62027,"input_tokens":null,"id":34269,"project_id":1079,"sender":"ai","message":"To implement a variety of commands such as `print`, arithmetic operations (`add`, `subtract`, `multiply`), and a `repeat` function, you can extend the JavaScript event listener function. Here's how you could do it:\n\n```javascript\ndocument.getElementById('inputField').addEventListener('keypress', function(e) {\n if (e.key === 'Enter') {\n const input = this.value.trim();\n const outputElement = document.getElementById('output');\n let output = '';\n\n const tokens = input.split(' ');\n const command = tokens[0];\n const args = tokens.slice(1).map(arg => isNaN(Number(arg)) ? arg : Number(arg));\n\n switch (command) {\n case 'print':\n output = args.join(' ');\n break;\n case 'add':\n output = args.reduce((a, b) => a + b, 0);\n break;\n case 'subtract':\n output = args.reduce((a, b) => a - b);\n break;\n case 'multiply':\n output = args.reduce((a, b) => a * b, 1);\n break;\n case 'repeat':\n if (args.length >= 2) {\n output = args.slice(1).join(' ').repeat(args[0]);\n } else {\n output = 'Usage: repeat ';\n }\n break;\n default:\n output = 'Unknown command';\n }\n\n outputElement.innerText += `\\n> ${input}\\n${output}`;\n this.value = ''; // Clear the input field\n }\n});\n```\n- Splits the input string into a command and its arguments. It uses the first token as the command and the rest as arguments.\n- Converts numeric arguments from strings to numbers for arithmetic operations.\n- Implements a `switch` statement to handle different commands:\n - `print`: Outputs the arguments as a string.\n - `add`: Sums all numerical arguments.\n - `subtract`: Subtracts all numerical arguments starting from the first one.\n - `multiply`: Multiplies all numerical arguments.\n - `repeat`: Repeats a given string a specified number of times. It checks if at least two arguments are provided (the number of times to repeat and the string to repeat).\n- For unrecognized commands, it shows \"Unknown command\".\n-","created_at":"2024-04-08T03:33:34.092083Z","output_tokens":null}],"assets":[],"messages_sent":4,"comments":[],"steps":[{"title":"Text-based Interface","step_number":0,"complete":false,"updated_at":"2024-04-08T03:31:11.982369","id":5476,"instruction":"Create a text input field for commands and display the output on the screen like a terminal.","created_at":"2024-04-08T03:31:11.982368","project_id":1079},{"title":"Interactive Environments","step_number":1,"complete":false,"updated_at":"2024-04-08T03:31:11.982435","id":5477,"instruction":"Implement different environments for the player to navigate through using text-based commands.","created_at":"2024-04-08T03:31:11.982434","project_id":1079},{"title":"Puzzle Challenges","step_number":2,"complete":false,"updated_at":"2024-04-08T03:31:11.982477","id":5478,"instruction":"Design coding puzzles and challenges for the player to solve using command-line inputs.","created_at":"2024-04-08T03:31:11.982477","project_id":1079},{"title":"Character Interaction","step_number":3,"complete":false,"updated_at":"2024-04-08T03:31:11.982518","id":5479,"instruction":"Allow the player to interact with characters and objects in the game world through text-based commands.","created_at":"2024-04-08T03:31:11.982518","project_id":1079},{"title":"Score and Progress Tracking","step_number":4,"complete":false,"updated_at":"2024-04-08T03:31:11.982559","id":5480,"instruction":"Implement a scoring system and progress tracking to keep track of the player's success in the game.","created_at":"2024-04-08T03:31:11.982558","project_id":1079},{"title":"Visual Effects","step_number":5,"complete":false,"updated_at":"2024-04-08T03:31:11.982643","id":5481,"instruction":"Add visual effects and animations to enhance the text-based interface and make the game more engaging.","created_at":"2024-04-08T03:31:11.982641","project_id":1079},{"title":"Sound Effects","step_number":6,"complete":false,"updated_at":"2024-04-08T03:31:11.982695","id":5482,"instruction":"Incorporate sound effects to provide auditory feedback and enhance the immersive experience of the game.","created_at":"2024-04-08T03:31:11.982694","project_id":1079},{"title":"Tutorial System","step_number":7,"complete":false,"updated_at":"2024-04-08T03:31:11.982757","id":5483,"instruction":"Create a tutorial system to guide players through the basic commands and mechanics of the game.","created_at":"2024-04-08T03:31:11.982756","project_id":1079}]}