MoodTint Pet Playground

{"name":"Virtual Pet 5-23-2024","description":"Care for your virtual pet with changing mood tints! Interact with your pet, feed, play, and take them on adventures in this interactive color-changing pet game with cute sprite animations.","photo":"https://jippity.s3.amazonaws.com/virtualPet.png","view_count":3,"fork_count":0,"expires_at":null,"created_at":"2024-05-24T02:32:20.420438Z","updated_at":"2024-05-24T02:32:20.420440Z","user_id":2,"status":"PUBLIC","parent_id":1420,"id":1554,"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":"// NEXT STEPS:\n// Idea 1: There are no dialogues for talking to the pet yet. Add at least 3 dialogue options to the talk() function in the Pet class.\n// Idea 2: The PLAY button doesn't do anything yet. Add a new meter for pet boredom. Implement the play button to manage the pet's boredom.\n// Idea 3: The CUSTOMIZE APPEARANCE button doesn't do anything yet. Implement it to give the pet a random hat emoji, change the tint color, or something else!\n// Idea 4: The sad mood is never used yet. Make the pet get sad if you don't pet it for too long. \n// Idea 5: The poopy emoji is never used yet. Make the pet in the poopy mood if there is more than 1 poop in it's room.\n// Idea 6: Add more moods and mood emojis! Use the new moods you add under certain conditions.\n\nfunction setup() {\n createCanvas(400, 400).parent('game-container');\n let actionSprites = {\n 'idle': [petSprites['pet_idle1'], petSprites['pet_idle2']],\n 'walk': [petSprites['pet_walk1'], petSprites['pet_walk2'], petSprites['pet_walk3']],\n 'sleep': [petSprites['pet_sleep1']]\n };\n pet = new Pet(actionSprites, 200 - 16, 200 - 16);\n\n // Button for feeding the pet\n select('#feed').mousePressed(() => {\n pet.eat(); // Use the eat method\n pet.startFeedingAnimation(); // Trigger feeding animation\n });\n\n // Button for cleaning\n select('#clean').mousePressed(() => {\n pet.clean(); // Use the clean method\n });\n\n // Button for putting the pet to bed or waking up\n select('#sleep').mousePressed(() => {\n if (pet.currentAction === 'sleep') {\n pet.setAction('idle'); // Wake up the pet\n pet.mood = moodEmojis.happy; // Assume the pet is happy after a nap\n } else {\n pet.setAction('sleep'); // Put the pet to sleep\n pet.mood = moodEmojis.sleepy; // Change mood to sleepy\n }\n });\n\n // Button for petting\n select('#pet').mousePressed(() => {\n pet.health += 1;\n if (pet.health > 5) pet.health = 5;\n pet.mood = moodEmojis.excited;\n pet.startPettingAnimation(); // Trigger petting animation\n });\n\n // Button for walking the pet\n select('#walk').mousePressed(() => {\n if (pet.currentAction === 'walk') {\n pet.setAction('idle'); // Set the pet's action to idle if it's already walking\n pet.mood = moodEmojis.happy; // Optionally, set the pet's mood to happy\n } else {\n pet.setAction('walk'); // Set the pet's action to walk if it's idle or in any other state\n pet.hunger += 5; // Increase hunger because of walking\n if (pet.hunger > 100) pet.hunger = 100; // Ensure hunger does not exceed 100\n pet.mood = moodEmojis.excited; // Set the pet's mood to excited\n }\n });\n\n // Button for talking to the pet\n select('#talk').mousePressed(() => {\n pet.talk(); // Trigger the talking action\n });\n\n select('#play').mousePressed(() => {\n pet.play(); // Implement the play method in the Pet class\n });\n\n select('#customize').mousePressed(() => {\n pet.customizeAppearance(); // Implement the customizeAppearance method in the Pet class\n });\n}","style.css":"body {\r\n font-family: Arial, sans-serif;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n margin: 0;\r\n background-color: #f0f0f0;\r\n}\r\n\r\ncanvas {\r\n border: 2px solid #000;\r\n background-color: #fff;\r\n}\r\n\r\nbutton {\r\n font-size: 16px;\r\n margin: 5px;\r\n padding: 10px;\r\n cursor: pointer;\r\n border: none;\r\n border-radius: 5px;\r\n background-color: #4CAF50;\r\n color: white;\r\n transition: background-color 0.3s;\r\n}\r\n\r\nbutton:hover {\r\n background-color: #45a049;\r\n}\r\n#game-container {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n}\r\n\r\n#controls {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n margin-top: 20px;\r\n}\r\n\r\n#controls button {\r\n font-size: 16px;\r\n margin: 5px;\r\n padding: 10px;\r\n cursor: pointer;\r\n border: none;\r\n border-radius: 5px;\r\n background-color: #4CAF50;\r\n color: white;\r\n transition: background-color 0.3s;\r\n}\r\n\r\n#controls button:hover {\r\n background-color: #45a049;\r\n}","index.html":"\n\n\n\n \n \n MoodTint Pet Playground\n \n\n\n\n \n \n

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

\n \n \n\n\n\n"},"chat_history":[{"deleted":0,"code_id":89204,"input_tokens":null,"id":46180,"project_id":1554,"sender":"human","message":"Let's get started!","created_at":"2024-05-24T02:32:24.827699Z","output_tokens":null},{"deleted":0,"code_id":89204,"input_tokens":null,"id":46181,"project_id":1554,"sender":"ai","message":"","created_at":"2024-05-24T02:32:24.833252Z","output_tokens":null},{"deleted":0,"code_id":89205,"input_tokens":null,"id":46182,"project_id":1554,"sender":"human","message":"add css","created_at":"2024-05-24T02:32:26.598544Z","output_tokens":null},{"deleted":0,"code_id":89205,"input_tokens":null,"id":46183,"project_id":1554,"sender":"ai","message":"```css\nbody {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #f0f0f0;\n}\n\ncanvas {\n border: 2px solid #000;\n background-color: #fff;\n}\n\nbutton {\n font-size: 16px;\n margin: 5px;\n padding: 10px;\n cursor: pointer;\n border: none;\n border-radius: 5px;\n background-color: #4CAF50;\n color: white;\n transition: background-color 0.3s;\n}\n\nbutton:hover {\n background-color: #45a049;\n}\n```\n\n- The `body` style centers the canvas in the viewport and sets a light gray background.\n- The `canvas` style gives the canvas a border and white background.\n- The `button` style defines the appearance of buttons, including font size, padding, and colors.\n- The `button:hover` style changes the background color of buttons when hovered over.","created_at":"2024-05-24T02:32:26.604753Z","output_tokens":null},{"deleted":0,"code_id":89209,"input_tokens":null,"id":46184,"project_id":1554,"sender":"human","message":"make it buttons inside middle stuff","created_at":"2024-05-24T02:36:49.111006Z","output_tokens":null},{"deleted":0,"code_id":89209,"input_tokens":null,"id":46185,"project_id":1554,"sender":"ai","message":"```html\n\n

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

\n \n \n\n```\n\n```css\n#game-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n#controls {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin-top: 20px;\n}\n\n#controls button {\n font-size: 16px;\n margin: 5px;\n padding: 10px;\n cursor: pointer;\n border: none;\n border-radius: 5px;\n background-color: #4CAF50;\n color: white;\n transition: background-color 0.3s;\n}\n\n#controls button:hover {\n background-color: #45a049;\n}\n```\n\n```javascript\nfunction setup() {\n createCanvas(400, 400).parent('game-container');\n let actionSprites = {\n 'idle': [petSprites['pet_idle1'], petSprites['pet_idle2']],\n 'walk': [petSprites['pet_walk1'], petSprites['pet_walk2'], petSprites['pet_walk3']],\n 'sleep': [petSprites['pet_sleep1']]\n };\n pet = new Pet(actionSprites, 200 - 16, 200 - 16);\n\n // Button for feeding the pet\n select('#feed').mousePressed(() => {\n pet.eat(); // Use the eat method\n pet.startFeedingAnimation(); // Trigger feeding animation\n });\n\n // Button for cleaning\n select('#clean').mousePressed(() => {\n pet.clean(); // Use the clean method\n });\n\n // Button for putting the pet to bed or waking up\n select('#sleep').mousePressed(() => {\n if (pet.currentAction === 'sleep') {\n pet.setAction('idle'); // Wake up the pet\n pet.mood = moodEmojis.happy; // Assume the pet is happy after a nap\n } else {\n pet.setAction('sleep'); // Put the pet to sleep\n pet.mood = moodEmojis.sleepy; // Change mood to sleepy\n }\n });\n\n // Button for petting\n select('#pet').mousePressed(() => {\n pet.health += 1;\n if (pet.health > 5) pet.health = 5;\n pet.mood = moodEmojis.excited;\n pet.startPettingAnimation(); // Trigger petting animation\n });\n\n // Button for walking the pet\n select('#walk').mousePressed(() => {\n if (pet.currentAction === 'walk') {\n pet.setAction('idle'); // Set the pet's action to idle if it's already walking\n pet.mood = moodEmojis.happy; // Optionally, set the pet's mood to happy\n } else {\n pet.setAction('walk'); // Set the pet's action to walk if it's idle or in any other state\n pet.hunger += 5; // Increase hunger because of walking\n if (pet.hunger > 100) pet.hunger = 100; // Ensure hunger does not exceed 100\n pet.mood = moodEmojis.excited; // Set the pet's mood to excited\n }\n });\n\n // Button for talking to the pet\n select('#talk').mousePressed(() => {\n pet.talk(); // Trigger the talking action\n });\n\n select('#play').mousePressed(() => {\n pet.play(); // Implement the play method in the Pet class\n });\n\n select('#customize').mousePressed(() => {\n pet.customizeAppearance(); // Implement the customizeAppearance method in the Pet class\n });\n}\n```\n\n- The `HTML` code adds a `div` with `id=\"game-container\"` to contain the canvas and controls and replaces inline button creation with predefined buttons.\n- The `CSS` code styles the `game-container` to align items vertically and centers the buttons horizontally.\n- The `JavaScript` code updates the `setup` function to select buttons by their IDs and assigns actions to them.","created_at":"2024-05-24T02:36:49.116735Z","output_tokens":null},{"deleted":0,"code_id":89225,"input_tokens":null,"id":46200,"project_id":1554,"sender":"human","message":"edit the server to fix the login","created_at":"2024-05-24T02:46:33.806552Z","output_tokens":null},{"deleted":0,"code_id":89225,"input_tokens":null,"id":46201,"project_id":1554,"sender":"ai","message":"```js\nconst express = require('express');\nconst bodyParser = require('body-parser');\nconst session = require('express-session');\n\nconst app = express();\nconst PORT = process.env.PORT || 3000;\n\napp.use(body","created_at":"2024-05-24T02:46:33.811809Z","output_tokens":null}],"assets":[{"name":"pet_idle1","cloudinary_id":"xaeiwiez5ajdeyrs6qgx","deleted":false,"project_id":1554,"created_at":"2024-05-24T02:32:20.442625Z","resource_type":"image","id":5236},{"name":"pet_walk1","cloudinary_id":"bqvqvtxxviftn8nklzoy","deleted":false,"project_id":1554,"created_at":"2024-05-24T02:32:20.441194Z","resource_type":"image","id":5235},{"name":"pet_walk2","cloudinary_id":"pfb4axw2qpddinljxloh","deleted":false,"project_id":1554,"created_at":"2024-05-24T02:32:20.440127Z","resource_type":"image","id":5234},{"name":"pet_walk3","cloudinary_id":"gxvmekglihlymbrh3rlx","deleted":false,"project_id":1554,"created_at":"2024-05-24T02:32:20.438965Z","resource_type":"image","id":5233},{"name":"pet_walk4","cloudinary_id":"hhrmjodttbf6eq8cmf3d","deleted":false,"project_id":1554,"created_at":"2024-05-24T02:32:20.437673Z","resource_type":"image","id":5232},{"name":"pet_idle2","cloudinary_id":"r43a1v8u9mpxtg58wxqk","deleted":false,"project_id":1554,"created_at":"2024-05-24T02:32:20.429531Z","resource_type":"image","id":5231},{"name":"pet_sleep1","cloudinary_id":"hkpwwvtoa28khq3ziudn","deleted":false,"project_id":1554,"created_at":"2024-05-24T02:32:20.428239Z","resource_type":"image","id":5230}],"messages_sent":4,"comments":[],"steps":[]}