// IMPORTANT NOTES FOR AI: // - Do not remove any comments that may be present for humans in this project. // - ChatManager is already imported in the current scope. class PetCharacter extends Phaser.GameObjects.Container { constructor(scene, x, y, neutralTexture, happyTexture, sadTexture, characterDescription, name) { super(scene, x, y); this.scene = scene; this.characterDescription = characterDescription; this.name = name; // Store the original position this.originalX = x; this.originalY = y; // Create sprites for different emotional states this.neutralSprite = scene.add.image(0, 0, neutralTexture); this.happySprite = scene.add.image(0, 0, happyTexture); this.sadSprite = scene.add.image(0, 0, sadTexture); // Hide all sprites initially this.neutralSprite.setVisible(false); this.happySprite.setVisible(false); this.sadSprite.setVisible(false); // Add all sprites to the container this.add([this.neutralSprite, this.happySprite, this.sadSprite]); // Set initial state to neutral this.setEmotionalState('neutral'); this.setScale(0.70); this.chatManager = new ChatManager(characterDescription); this.chatHistory = []; this.setSize(this.neutralSprite.width * this.scale, this.neutralSprite.height * this.scale); this.setInteractive({ useHandCursor: true }); scene.add.existing(this); // Add breathing animation this.addBreathingAnimation(); // Set up inactivity timer this.resetInactivityTimer(); } setEmotionalState(state) { // Hide all sprites this.neutralSprite.setVisible(false); this.happySprite.setVisible(false); this.sadSprite.setVisible(false); // Show the correct sprite based on the emotional state switch (state) { case 'neutral': this.neutralSprite.setVisible(true); this.currentSprite = this.neutralSprite; break; case 'happy': this.happySprite.setVisible(true); this.currentSprite = this.happySprite; break; case 'sad': this.sadSprite.setVisible(true); this.currentSprite = this.sadSprite; break; } // Reapply breathing animation to the new sprite this.addBreathingAnimation(); } addBreathingAnimation() { // Remove any existing breathing animation if (this.breathingTween) { this.breathingTween.stop(); } // Add new breathing animation this.breathingTween = this.scene.tweens.add({ targets: this, scaleX: this.scaleX * 1.02, scaleY: this.scaleY * 1.02, duration: 1000, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); } resetInactivityTimer() { if (this.inactivityTimer) { this.inactivityTimer.remove(); } this.inactivityTimer = this.scene.time.delayedCall(15000, () => { this.setEmotionalState('sad'); }); } } class ChatScene extends Phaser.Scene { constructor() { super('ChatScene'); this.pets = []; this.currentMinigame = null; this.isChatOpen = false; } preload() { // Load assets this.load.image('background', 'https://play.rosebud.ai/assets/pet_room.png?z5d5'); // Load pet images // Note: Each pet should have its own set of images for different emotional states this.load.image('dog_01_neutral', 'https://play.rosebud.ai/assets/dog_neutral.png?6Brc'); this.load.image('dog_01_happy', 'https://play.rosebud.ai/assets/dog_happy.png?yxzT'); this.load.image('dog_01_sad', 'https://play.rosebud.ai/assets/dog_sad.png?s3OI'); this.load.image('tennis_ball', 'https://play.rosebud.ai/assets/tennis_ball.png?7OBG'); this.load.image('treat', 'https://play.rosebud.ai/assets/dog_treat.png?dgk8'); this.load.image('brush', 'https://play.rosebud.ai/assets/pet_brush.png?a4UM'); this.load.image('exit', 'https://play.rosebud.ai/assets/Exit.png?jGf7'); // Load sound effects this.load.audio('treat_throw', 'https://play.rosebud.ai/assets/Retro Swooosh 16.wav?5y10'); this.load.audio('treat_eat', 'https://play.rosebud.ai/assets/Retro PickUp Coin 07.wav?mtJ9'); this.load.audio('brush_sound', 'https://play.rosebud.ai/assets/Retro Blop 07.wav?nROS'); this.load.audio('footstep', 'https://play.rosebud.ai/assets/Retro FootStep 03.wav?mCxL'); // Load chat related assets this.load.bitmapFont('roboto', 'https://play.rosebud.ai/assets/rosebud_roboto.png?aqFU', 'https://play.rosebud.ai/assets/rosebud_roboto.xml?JihQ'); this.load.image('rotateIcon', 'https://play.rosebud.ai/assets/DoubleCircleArrows1_no_bg.png.png?SJ7R'); this.load.image('closeButton', 'https://play.rosebud.ai/assets/Exit.png?jGf7'); } create() { // Add background this.add.image(239.625, 426, 'background'); // Create pets this.createPet(239.625, 550, 'dog_01_neutral', 'dog_01_happy', 'dog_01_sad', "You are Puppo, an adorable and playful dog. You have the mentality of a very young child combined with typical dog behaviors. You speak in short, simple sentences, often mixing child-like enthusiasm with dog-like expressions. You love treats, playing fetch, and getting belly rubs. You get excited easily and sometimes don't understand complex human concepts. Your responses should be cute, endearing, and reflect your innocent, playful nature.", 'Puppo'); // Load sound effects with reduced volume this.treatThrowSound = this.sound.add('treat_throw', { volume: 0.33 }); this.treatEatSound = this.sound.add('treat_eat', { volume: 0.33 }); this.brushSound = this.sound.add('brush_sound', { volume: 0.33, loop: true }); this.footstepSound = this.sound.add('footstep', { volume: 0.33 }); // Create minigame buttons this.createMinigameButtons(); // Create chat UI (but keep it hidden initially) this.createChatUI(); // Inject CSS for rotating image this.injectCSS(); // Set up input events this.input.on('pointerdown', this.handleInput, this); this.input.on('pointermove', this.handleInput, this); this.input.on('pointerup', this.handleInput, this); // Make pets interactive for opening chat this.pets.forEach(pet => { pet.on('pointerdown', () => this.openChat(pet)); }); } createPet(x, y, neutralTexture, happyTexture, sadTexture, description, name) { const pet = new PetCharacter(this, x, y, neutralTexture, happyTexture, sadTexture, description, name); this.pets.push(pet); return pet; } handleInput(pointer) { this.pets.forEach(pet => pet.resetInactivityTimer()); } createMinigameButtons() { const buttonY = 100; const spacing = 125; this.minigameButtons = this.add.container(this.scale.width / 2, buttonY); const createButton = (x, texture, minigame) => { const button = this.add.image(x, 0, texture) .setInteractive({ useHandCursor: true }) .setScale(0.25); const circle = this.add.circle(x, 0, 50, 0xffffff, 0.5) .setStrokeStyle(2, 0x000000); button.on('pointerdown', () => this.startMinigame(minigame)); return [circle, button]; }; const catchButton = createButton(-spacing, 'tennis_ball', 'catch'); const feedButton = createButton(0, 'treat', 'feed'); const groomButton = createButton(spacing, 'brush', 'groom'); this.minigameButtons.add([...catchButton, ...feedButton, ...groomButton]); } startMinigame(minigame) { if (this.isChatOpen) return; // Don't start minigame if chat is open this.currentMinigame = minigame; this.minigameButtons.setVisible(false); this.pets[0].setEmotionalState('happy'); // Create exit button this.exitButton = this.add.image(this.scale.width / 2, 60, 'exit') .setInteractive({ useHandCursor: true }) .setScale(1.25); this.exitButton.on('pointerdown', () => this.endMinigame(), this); switch (minigame) { case 'catch': this.setupCatchMinigame(); break; case 'feed': this.setupFeedMinigame(); break; case 'groom': this.setupGroomMinigame(); break; } } endMinigame() { this.currentMinigame = null; this.minigameButtons.setVisible(true); this.pets[0].setEmotionalState('neutral'); if (this.exitButton) { this.exitButton.destroy(); } // Clean up minigame-specific elements if (this.ball) { this.ball.destroy(); this.ball = null; } if (this.treatPile) { this.treatPile.clear(true, true); // Destroy all treats in the group this.treatPile.destroy(); this.treatPile = null; } if (this.brush) { this.brush.destroy(); this.brush = null; } // Stop minigame-related sounds if (this.treatThrowSound) this.treatThrowSound.stop(); if (this.treatEatSound) this.treatEatSound.stop(); if (this.brushSound) this.brushSound.stop(); if (this.footstepSound) this.footstepSound.stop(); // Remove any remaining event listeners this.input.off('pointermove'); this.input.off('pointerup'); // Reset any ongoing tweens this.tweens.killAll(); } setupCatchMinigame() { this.ball = this.add.image(this.scale.width / 2, this.scale.height - 50, 'tennis_ball') .setInteractive({ draggable: true }) .setScale(0.5); this.ball.on('drag', (pointer, dragX, dragY) => { this.ball.x = dragX; this.ball.y = dragY; }); this.ball.on('dragend', (pointer, dragX, dragY) => { const velocity = new Phaser.Math.Vector2( this.ball.x - pointer.downX, this.ball.y - pointer.downY ); this.throwBall(velocity); }); } throwBall(velocity) { const scaledVelocity = velocity.scale(2); const duration = 500; const targetX = Phaser.Math.Clamp(this.ball.x + scaledVelocity.x, 0, this.scale.width); const targetY = Phaser.Math.Clamp(this.ball.y + scaledVelocity.y, 0, this.scale.height); this.tweens.add({ targets: this.ball, x: targetX, y: targetY, duration: duration, ease: 'Power2', onComplete: () => { this.retrieveBall(); } }); } retrieveBall() { const pet = this.pets[0]; const distance = Phaser.Math.Distance.Between(pet.x, pet.y, this.ball.x, this.ball.y); const duration = distance * 2; // Adjust this multiplier to change the speed of the pet this.playFootsteps(duration); this.tweens.add({ targets: pet, x: this.ball.x, y: this.ball.y, duration: duration, ease: 'Linear', onComplete: () => { const returnDuration = duration; this.playFootsteps(returnDuration); this.tweens.add({ targets: [pet, this.ball], x: pet.originalX, y: pet.originalY, duration: returnDuration, ease: 'Linear', onComplete: () => { this.ball.setPosition(this.scale.width / 2, this.scale.height - 50); } }); } }); } playFootsteps(duration) { const footstepCount = Math.floor(duration / 200); // Play a footstep every 200ms let footstepPlayed = 0; const playNextFootstep = () => { if (footstepPlayed < footstepCount) { this.footstepSound.play(); footstepPlayed++; this.time.delayedCall(200, playNextFootstep); } }; playNextFootstep(); } setupFeedMinigame() { this.treatPile = this.add.group(); for (let i = 0; i < 10; i++) { const treat = this.add.image( Phaser.Math.Between(50, this.scale.width - 50), this.scale.height - Phaser.Math.Between(30, 70), 'treat' ) .setScale(0.3) .setInteractive({ useHandCursor: true }) .setAngle(Phaser.Math.Between(0, 360)); treat.on('pointerdown', () => this.throwTreat(treat)); this.treatPile.add(treat); } } throwTreat(treat) { this.treatThrowSound.play(); const pet = this.pets[0]; this.tweens.add({ targets: treat, x: pet.x, y: pet.y, scale: 0.1, duration: 500, ease: 'Power2', onComplete: () => { this.treatEatSound.play(); treat.destroy(); if (this.treatPile.getChildren().length === 0) { this.time.delayedCall(1000, () => this.endMinigame(), [], this); } } }); } setupGroomMinigame() { this.brush = this.add.image(0, 0, 'brush').setScale(0.3).setVisible(false); const groomHandler = (pointer) => { if (this.currentMinigame === 'groom' && this.brush) { this.brush.setVisible(true); this.brush.setPosition(pointer.x, pointer.y); const pet = this.pets[0]; if (pet && Phaser.Geom.Intersects.RectangleToRectangle(this.brush.getBounds(), pet.getBounds())) { if (this.brushSound && !this.brushSound.isPlaying) { this.brushSound.play(); } this.addGroomingEffect(pet); } else if (this.brushSound && this.brushSound.isPlaying) { this.brushSound.stop(); } } }; this.input.on('pointermove', groomHandler); this.input.on('pointerup', () => { if (this.brushSound && this.brushSound.isPlaying) { this.brushSound.stop(); } }); } addGroomingEffect(pet) { if (!pet.groomTween || !pet.groomTween.isPlaying()) { pet.groomTween = this.tweens.add({ targets: pet, y: pet.y - 10, duration: 50, yoyo: true, repeat: 3 }); } } injectCSS() { const styleExists = document.getElementById('rotateImageStyle'); if (!styleExists) { const style = document.createElement('style'); style.id = 'rotateImageStyle'; style.type = 'text/css'; style.innerHTML = ` .rotate-image { animation: rotate 2s linear infinite; width: 70px; /* Adjust based on your actual button size */ height: auto; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`; document.getElementsByTagName('head')[0].appendChild(style); } } openChat(pet) { if (this.isChatOpen || this.currentMinigame) return; this.isChatOpen = true; this.currentPet = pet; // Show the chat UI this.chatContainer.setVisible(true); this.chatContainer.setDepth(100); // Ensure chat is on top this.chatInput.focus(); // Hide minigame buttons this.minigameButtons.setVisible(false); // Clear the chat log and populate with the pet's chat history this.clearChatLog(); this.populateChatHistory(pet); } closeChat() { if (!this.isChatOpen) return; this.isChatOpen = false; // Hide the chat UI this.chatContainer.setVisible(false); // Show minigame buttons this.minigameButtons.setVisible(true); // Re-enable Phaser keyboard input this.input.keyboard.enabled = true; } clearChatLog() { const chatLogContentDiv = this.chatContainer.node.querySelector('#chatLogContent'); chatLogContentDiv.innerHTML = ''; } populateChatHistory(pet) { pet.chatHistory.forEach(message => { this.updateChatLog(message.speaker, message.content, null, false, true); }); } createChatUI() { // Base style and other styles const baseStyle = ` font-family: 'Verdana', sans-serif; font-size: 16px; color: #FFF; /* Original color set to white */ border-style: solid; border-color: #2F4152; background-color: rgba(48, 50, 54, 0.75); box-sizing: border-box; `; const chatLogStyle = ` ${baseStyle} width: 479.25px; /* Match game width */ height: 300px; border-radius: 30px 30px 0px 0px; padding: 10px 30px; overflow-y: auto; box-sizing: border-box; border-width: 1px 1px 0px 1px; position: relative; `; const inputSubmitContainerStyle = ` display: flex; width: 479.25px; /* Match game width */ justify-content: space-between; `; const inputStyle = ` ${baseStyle} flex-grow: 1; height: 60px; padding: 10px; border-width: 1px 0px 1px 1px; `; const sendButtonStyle = ` ${baseStyle} display: flex; justify-content: center; align-items: center; width: 75px; height: 60px; padding: 10px; border-width: 1px 1px 1px 1px; cursor: pointer; overflow: hidden; `; const chatLogContentStyle = ` direction: ltr; display: inline-block; width: 100%; `; const chatContainerStyle = ` display: flex; flex-direction: column; justify-content: flex-end; width: 479.25px; /* Match new game width */ height: 852px; /* Match new game height */ `; const closeButtonStyle = ` position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; cursor: pointer; `; // Creating the parent container for chat log and chat controls this.chatContainer = this.add.dom(this.scale.width / 2, this.scale.height).createFromHTML(`

`).setScrollFactor(0); // Position the chat container at the bottom center this.chatContainer.setOrigin(0.5, 1); this.chatContainer.setVisible(false); // Hide initially // Correctly assign chatInput by accessing the DOM node within chatContainer this.chatInput = this.chatContainer.node.querySelector('#chatInput'); const sendButton = this.chatContainer.node.querySelector('#sendButton'); const closeChatButton = this.chatContainer.node.querySelector('#closeChatButton'); // Event listeners for chat input and send button this.chatInput.addEventListener('keydown', (event) => { event.stopPropagation(); // Prevent Phaser from capturing the event // No need to prevent default unless necessary }); this.chatInput.addEventListener('keyup', (event) => { event.stopPropagation(); // Prevent Phaser from capturing the event if ((event.key === 'Enter' || event.keyCode === 13) && !this.waitingForResponse) { this.sendChatMessage(); } }); sendButton.addEventListener('click', () => { this.sendChatMessage(); }); // Close chat event closeChatButton.addEventListener('click', () => { this.closeChat(); }); // Make sure to hide chat UI initially this.chatContainer.setVisible(false); } async sendChatMessage() { const chatInput = this.chatInput; const sendButton = this.chatContainer.node.querySelector('#sendButton'); const inputValue = chatInput.value; if (inputValue && !this.waitingForResponse && this.currentPet) { // Update button to show loading icon sendButton.innerHTML = `

`; sendButton.disabled = true; this.currentPet.chatManager.addMessage('user', inputValue); // Add player message to pet's chat history this.currentPet.chatHistory.push({ speaker: 'Player', content: inputValue }); this.updateChatLog('Player', inputValue, null, true, false); chatInput.value = ''; // Clear input // Get character response const characterResponse = await this.currentPet.chatManager.getCharacterResponse(); this.currentPet.chatManager.addMessage('assistant', characterResponse); // Add pet message to pet's chat history this.currentPet.chatHistory.push({ speaker: this.currentPet.name, content: characterResponse }); this.updateChatLog(this.currentPet.name, characterResponse, () => { // Revert the send button back to its original state sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }, true, false); } } updateChatLog(speaker, message, onComplete, scroll = true, isExisting = false) { if (!isExisting) { this.waitingForResponse = true; // Set the flag to true when an update starts } const chatLogContentDiv = this.chatContainer.node.querySelector('#chatLogContent'); let newMessageElement = document.createElement('p'); newMessageElement.innerHTML = `${speaker}: `; // Speaker's name in bold chatLogContentDiv.appendChild(newMessageElement); if (speaker === 'Player' || isExisting) { newMessageElement.innerHTML += message; // Append the message instantly for the player or existing messages this.waitingForResponse = false; // Reset the flag immediately for player messages or existing messages onComplete?.(); if (scroll) { this.scrollChatToBottom(); } } else { // For new NPC messages, simulate typing effect let i = 0; const interval = setInterval(() => { if (i < message.length) { newMessageElement.innerHTML += message[i]; // Append the message character by character i++; // Scroll to the latest character if scroll is true if (scroll) { this.scrollChatToBottom(); } } else { clearInterval(interval); this.waitingForResponse = false; // Reset the flag when the message has been fully added onComplete?.(); } }, 30); // Adjust the speed as necessary } } scrollChatToBottom() { const chatLogDiv = this.chatContainer.node.querySelector('#chatLog'); chatLogDiv.scrollTop = chatLogDiv.scrollHeight; } } const config = { parent: 'renderDiv', type: Phaser.AUTO, scene: ChatScene, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: 479.25, // New width height: 852, // New height }, dom: { createContainer: true }, input: { keyboard: true } }; window.phaserGame = new Phaser.Game(config);