// ChatManager is already imported in the current scope. // Emote Assets are by LadyLuck https://ladyluck.itch.io/ const CHARACTER_DESCRIPTION = 'You are the player\'s energetic talking dog eager for affection from the player. You speak in an eager, somewhat childish way and bark everytime you speak.'; const baseStyle = ` font-family: 'Garamond', serif; font-size: 16px; font-weight: bold; border: solid rgba(255, 255, 255, 1.0); box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); `; const chatLogStyle = ` ${baseStyle} width: 735px; height: 70px; border-width: 1.5px 1.5px 1.5px 1.5px; background-color: rgba(0, 0, 0, 0.7); padding: 30px; overflow-y: auto; `; const chatLogContentStyle = ` direction: ltr; display: inline-block; width: 100%; `; const statusBoxStyle = ` font-family: 'Courier New', monospace; // Using Courier New font font-size: 16px; font-weight: bold; text-align: right; padding: 15px; border: solid rgba(255, 255, 255, 1.0); // White border box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); width: 175px; height: 75px; background-color: rgba(0, 0, 0, 0.7); // Semi-transparent black background border-width: 1.5px 1.5px 1,5px 1.5px; color: #FFF; // Light text color position: absolute; `; const inputStyle = ` ${baseStyle} width: 720px; height: 30px; background-color: rgba(0, 0, 0, 0.7); padding-left: 30px; border-width: 1.5p 0px 1.5px 1.5px; color: rgba(255, 255, 255, 1.0); overflow-x: auto; `; const sendButtonStyle = ` ${baseStyle} width: 80px; height: 30px; color: #e0d7c5; border-width: 1.5px 1.5px 1.5px 0px; background-color: rgba(0, 0, 0, 0.7); `; class ChatScene extends Phaser.Scene { constructor() { super(); this.songs = []; this.isMuted = false; this.muteButton = null; this.currentEmotion = 'happy'; // Set initial emotion to happy } preload() { // GUI/Level Assets this.load.image('background', `https://play.rosebud.ai/assets/pet_room_BG.png?JlMC`); this.load.image('restartIcon', `https://play.rosebud.ai/assets/restart_icon.png?aILm`); this.load.image('soundOnIcon', `https://play.rosebud.ai/assets/sound_on_icon.png?p1vM`); this.load.image('soundOffIcon', `https://play.rosebud.ai/assets/sound_off_icon.png?6muW`); this.load.audio('song1', 'https://storage.googleapis.com/rosebud_assets_storage/80ab990c-8385-46e0-b2a2-ad9b3f5e892d.mp3'); // Pet Assets this.load.image('petSprite', 'https://storage.googleapis.com/rosebud_assets_storage/23801dd1-0212-43a1-bc5d-770a7867bf20.png'); this.load.spritesheet('emoteSpritesheet', 'https://storage.googleapis.com/rosebud_assets_storage/5868e0cb-4ce0-4b9b-bcbd-6e457777215c.png', { frameWidth: 48, frameHeight: 48 }); // Gameplay Assets this.load.image('dogTreatIcon', `https://play.rosebud.ai/assets/dog_treat_icon.png?nJmY`); this.load.image('tennisBallIcon', `https://play.rosebud.ai/assets/tennis_ball_icon.png?6mOh`); } create() { this.add.image(400, 300, 'background').setScale(0.50); // Get the original dimensions of the pet sprite from the texture manager const petTexture = this.textures.get('petSprite'); const originalWidth = petTexture.getSourceImage().width; const originalHeight = petTexture.getSourceImage().height; // Desired size const desiredWidth = 173.25; const desiredHeight = 157.5; // Calculate scale factor const scaleWidth = desiredWidth / originalWidth; const scaleHeight = desiredHeight / originalHeight; const scaleFactor = Math.min(scaleWidth, scaleHeight); // Initialize and scale the pet sprite this.petSprite = this.add.image(this.scale.width / 2, (this.scale.height / 2), 'petSprite'); this.petSprite.setScale(scaleFactor); // Apply the calculated scale factor // Emote Sprite + Animations this.emoteSprite = this.add.sprite(this.petSprite.x, this.petSprite.y - 125, 'emoteSpritesheet') .setVisible(false) .setScale(1.25); // Adjust scale as needed this.anims.create({ key: 'happy', frames: this.anims.generateFrameNumbers('emoteSpritesheet', { start: 8, end: 15 }), frameRate: 10, repeat: 0 }); this.anims.create({ key: 'neutral', frames: this.anims.generateFrameNumbers('emoteSpritesheet', { start: 0, end: 7 }), frameRate: 10, repeat: 0 }); this.anims.create({ key: 'sad', frames: this.anims.generateFrameNumbers('emoteSpritesheet', { start: 40, end: 47 }), frameRate: 10, repeat: 0 }); // Play the neutral emote animation at the start this.emoteSprite.setVisible(true).play(this.currentEmotion); // Start initial breathing animation this.startBreathingAnimation(this.currentEmotion); this.emoteSprite.on('animationcomplete', (animation, frame) => { // Set sprite to the last frame of the animation this.emoteSprite.setFrame(animation.frames[animation.frames.length - 1].frame.name); // Start the pulsing effect this.tweens.add({ targets: this.emoteSprite, scale: { from: 1, to: 1.2 }, yoyo: true, repeat: -1, ease: 'Sine.easeInOut', duration: 900, }); }, this); const restart = this.add.image(40, 30, 'restartIcon').setScale(0.55).setInteractive(); // Mute toggle button this.muteButton = this.add.image(40, 80, 'soundOnIcon').setScale(0.23).setInteractive(); // Background music setup with reduced volume this.songs.push(this.sound.add('song1', { volume: 0.025, loop: true })); // Volume reduced this.songs[0].play(); this.add.dom(400, 505).createFromHTML(`

`); const chatInput = this.add.dom(360, 585).createFromHTML(` `); const sendButton = this.add.dom(760, 585).createFromHTML(` `); chatInput.node.addEventListener('keyup', (event) => { if ((event.key === "Enter" || event.keyCode === 13) && !this.waitingForResponse) { this.sendChatMessage(this.chatManager); } }); sendButton.addListener('click').on('click', () => { this.sendChatMessage(this.chatManager); }); restart.on('pointerdown', () => { const confirmReset = window.confirm("Are you sure you want to clear the chat and reset the context?"); if (confirmReset) { // Clear the chat log and chat manager state if (this.chatManager.cleanChatHistory) { this.chatManager.cleanChatHistory(); } const chatLogContentDiv = document.getElementById('chatLogContent'); chatLogContentDiv.innerHTML = ''; // Clear data in localStorage localStorage.removeItem(`${projectID}_chatManager`); localStorage.removeItem(`${projectID}_chatLog`); console.log("Chat and chatManager state reset for project:", projectID); // Send initial greeting after reset this.sendInitialGreeting(); } }); // Mute toggle functionality this.muteButton.on('pointerdown', () => { this.isMuted = !this.isMuted; this.sound.mute = this.isMuted; this.muteButton.setTexture(this.isMuted ? 'soundOffIcon' : 'soundOnIcon'); }); // Create circular buttons for icons const buttonStyle = { fillStyle: { color: 0x000000, alpha: 0.7 }, lineStyle: { color: 0xffffff, width: 2 }, add: true, }; // Pet state this.nutrition = 100; this.mood = 3; // 3: Happy, 2: Neutral, 1: Sad this.add.dom(700, 385).createFromHTML(`

STATUS: SATISFIED
NUTRITION: ${this.nutrition}
MOOD: HAPPY
LVL: 1

`); // Treat button this.add.circle(360, 405, 28, buttonStyle.fillStyle).setStrokeStyle(buttonStyle.lineStyle.width, buttonStyle.lineStyle.color); this.dogTreatIcon = this.add.image(360, 405, 'dogTreatIcon').setScale(0.1).setInteractive(); // Tennis ball button this.add.circle(440, 405, 28, buttonStyle.fillStyle).setStrokeStyle(buttonStyle.lineStyle.width, buttonStyle.lineStyle.color); this.tennisBallIcon = this.add.image(440, 405, 'tennisBallIcon').setScale(0.1).setInteractive(); // Event listeners for icons this.dogTreatIcon.on('pointerdown', () => this.feedPet()); this.tennisBallIcon.on('pointerdown', () => this.playWithPet()); // Timers for mood and nutrition this.time.addEvent({ delay: 10000, callback: this.decreaseNutrition, callbackScope: this, loop: true }); this.time.addEvent({ delay: 20000, callback: this.changeMood, callbackScope: this, loop: true }); this.chatManager = new ChatManager(CHARACTER_DESCRIPTION); this.sendInitialGreeting(); } feedPet() { this.nutrition = 100; this.updateStatusBox(); this.updatePetSprite(); this.updateChatLog('SYSTEM', 'You fed your pet.', '#FFFF99'); // soft yellow text } playWithPet() { if (this.mood < 3) this.mood++; this.updateStatusBox(); this.updatePetSprite(); this.updateChatLog('SYSTEM', 'You played with your pet.', '#FFFF99'); // soft yellow text } decreaseNutrition() { this.nutrition = Math.max(this.nutrition - 10, 0); this.updateStatusBox(); this.updatePetSprite(); } changeMood() { if (this.mood > 1) this.mood--; this.updateStatusBox(); this.updatePetSprite(); } updateStatusBox() { let statusBox = document.getElementById('statusBox'); let moodText = ['Sad', 'Neutral', 'Happy'][this.mood - 1]; let statusText = this.nutrition <= 30 ? 'HUNGRY' : 'SATISFIED'; statusBox.innerHTML = ` STATUS: ${statusText}
NUTRITION: ${this.nutrition}
MOOD: ${moodText}
LVL: 1 `; } updatePetSprite() { let newEmotionKey; if (this.nutrition <= 30) { newEmotionKey = 'sad'; } else { newEmotionKey = this.mood === 3 ? 'happy' : this.mood === 2 ? 'neutral' : 'sad'; } if (this.currentEmotion !== newEmotionKey) { const reverseAnimKey = `${this.currentEmotion}`; // Play the current animation in reverse this.playAnimationInReverse(reverseAnimKey, () => { // After reverse animation completes, start new animation this.emoteSprite.play(newEmotionKey); }); // Start breathing animation for the new emotion this.startBreathingAnimation(newEmotionKey); // Apply grey tint for 'sad' emotion, remove tint for others if (newEmotionKey === 'sad') { this.petSprite.setTint(0xaaaaaa); // Grey tint } else { this.petSprite.clearTint(); } this.currentEmotion = newEmotionKey; } } playAnimationInReverse(animationKey, onComplete) { const frames = this.anims.get(animationKey).frames; let currentFrame = frames.length - 1; const playFrame = () => { if (currentFrame < 0) { if (onComplete) { onComplete(); } return; } this.emoteSprite.setFrame(frames[currentFrame].frame.name); currentFrame--; // Call the next frame after a delay this.time.delayedCall(50, playFrame); // Adjust delay to control speed }; playFrame(); } startBreathingAnimation(emotion) { // Define different speeds for different emotions let duration; switch (emotion) { case 'happy': duration = 700; // Faster breathing break; case 'sad': duration = 1100; // Slower breathing break; default: duration = 900; // Normal breathing } // If a breathing animation is already playing, stop it if (this.breathingTween) { this.breathingTween.stop(); } // Get the current scale of the petSprite const currentScale = this.petSprite.scale; // Create a new breathing animation with relative scaling this.breathingTween = this.tweens.add({ targets: this.petSprite, scale: { start: currentScale, to: currentScale * 1.02 }, duration: duration, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); } startNewEmoteAnimation(newEmotionKey) { this.emoteSprite.setVisible(true).play(newEmotionKey); // Set up the pulsing effect after the new animation completes this.emoteSprite.on('animationcomplete', () => { this.tweens.add({ targets: this.emoteSprite, scale: { from: 1, to: 1.2 }, yoyo: true, repeat: -1, ease: 'Sine.easeInOut', duration: 900, }); }); } async sendInitialGreeting() { this.waitingForResponse = true; // Set the state to waiting document.getElementById('sendButton').disabled = true; const initialPrompt = "Greet the player and stop"; // Adjust as needed const response = await this.chatManager.getCharacterResponse(initialPrompt); this.chatManager.addMessage('assistant', response); // Update and save the chat log with the greeting message this.characterUpdatesChatLog('Character', response, () => { this.waitingForResponse = false; // Reset the state document.getElementById('sendButton').disabled = false; // Re-enable send button after receiving the response + response animation completes }); } async sendChatMessage(chatManager) { const chatInput = document.getElementById('chatInput'); const sendButton = document.getElementById('sendButton'); // Ensure the send button has an ID 'sendButton' const inputValue = chatInput.value; if (inputValue) { // Disable send button sendButton.disabled = true; // Add the player's message and update the chat log this.chatManager.addMessage('user', inputValue); this.playerUpdatesChatLog('Player', inputValue); // Clear the input box immediately after sending the message chatInput.value = ''; // Get the character's response const response = await chatManager.getCharacterResponse(); this.chatManager.addMessage('assistant', response); this.characterUpdatesChatLog('Character', response, () => { this.waitingForResponse = false; // Reset the state sendButton.disabled = this.waitingForResponse; // Re-enable send button after receiving the response + response animation completes }); } } playerUpdatesChatLog(role, message) { const chatLogContentDiv = document.getElementById('chatLogContent'); const color = role === 'Player' ? '#ffffff' : '#ADF2FF'; chatLogContentDiv.innerHTML += `

${role}: ${message}

`; const chatLogDiv = document.getElementById('chatLog'); chatLogDiv.scrollTop = chatLogDiv.scrollHeight; } characterUpdatesChatLog(role, message, onComplete) { const chatLogContentDiv = document.getElementById('chatLogContent'); const color = role === 'Player' ? '#ffffff' : '#ADF2FF'; let newMessageElement = document.createElement('p'); newMessageElement.style.color = color; newMessageElement.innerHTML = `${role}: `; chatLogContentDiv.appendChild(newMessageElement); let i = 0; const interval = setInterval(() => { if (i < message.length) { newMessageElement.innerHTML += message[i]; i++; } else { clearInterval(interval); const chatLogDiv = document.getElementById('chatLog'); chatLogDiv.scrollTop = chatLogDiv.scrollHeight; if (onComplete) { onComplete(); } } }, 75); } } // const container = document.getElementById('renderDiv'); const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: 800, height: 600, }, scene: ChatScene, dom: { createContainer: true }, }; window.phaserGame = new Phaser.Game(config);