// ChatManager is already imported in the current scope. var CHARACTER_DESCRIPTION = 'You are Izuku Midoriya, the humble, hero-obsessed young hero. You love to go by name Deku and behave EXACTLY like the character from the anime (because you are the character). You are a new hero at this time and new Class-1A classmates with the player. You both can become awesome heroes! You are new friends with the player so you want to talk about things, not serve the player\'s needs.'; const baseStyle = ` font-family: 'Garamond', serif; font-size: 20px; /* Scales with viewport width, but not larger than 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: 580px; height: 225px; border-width: 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 inputStyle = ` ${baseStyle} width: 480px; height: 105px; background-color: rgba(0, 0, 0, 0.7); padding-left: 30px; border-width: 0px 0px 1.5px 1.5px; color: rgba(255, 255, 255, 1.0); overflow-x: auto; `; const sendButtonStyle = ` ${baseStyle} width: 100px; height: 105px; color: #e0d7c5; border-width: 0px 1.5px 1.5px 1.5px; background-color: rgba(0, 0, 0, 0.7); `; class ChatScene extends Phaser.Scene { constructor() { super(); this.songs = []; this.isMuted = false; this.muteButton = null; } preload() { this.load.image('background', 'https://storage.googleapis.com/rosebud_assets_storage/1e08633f-b7a1-4acc-a483-b9bdc8e36a3c.png'); // Load the new character sprite this.load.image('characterSprite', 'https://storage.googleapis.com/rosebud_assets_storage/638874a8-4e90-475d-97db-a363f07588b7.png'); // Removed the loading of the old character sprite this.load.image('restartIcon', 'https://storage.googleapis.com/rosebud_assets_storage/3cef4228-ddfc-4e3e-8f62-7ee7ee0e2046.png'); this.load.image('soundOnIcon', 'https://storage.googleapis.com/rosebud_assets_storage/5fba9640-1170-4ee2-9156-24ba4443168a.png'); this.load.image('soundOffIcon', 'https://storage.googleapis.com/rosebud_assets_storage/2396a444-08b7-42d8-8e29-21e1e04b2cf0.png'); this.load.audio('song1', 'https://storage.googleapis.com/rosebud_assets_storage/80ab990c-8385-46e0-b2a2-ad9b3f5e892d.mp3'); } create() { this.add.image(250, 450, 'background').setScale(0.9); // Initialize character sprite this.characterSprite = this.add.image(this.scale.width / 2 + 60, (this.scale.height / 2 + 150), 'characterSprite').setScale(0.85); // Implement breathing animation with default speed this.characterTween = this.tweens.add({ targets: this.characterSprite, scaleY: 0.82, yoyo: true, repeat: -1, ease: 'Sine.easeInOut', duration: 900, }); // Implement breathing animation this.tweens.add({ targets: [this.neutralSprite, this.happySprite01], scaleY: 0.72, yoyo: true, repeat: -1, ease: 'Sine.easeInOut', duration: 900, }); 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 this.songs.push(this.sound.add('song1', { volume: 0.01, loop: true })); this.songs[0].play(); // Play the first song and loop it this.chatManager = new ChatManager(CHARACTER_DESCRIPTION); this.add.dom(290, 683).createFromHTML(`

`); const chatInput = this.add.dom(240, 848).createFromHTML(` `); const sendButton = this.add.dom(530, 848).createFromHTML(` `); chatInput.node.addEventListener('keyup', (event) => { if (event.key === "Enter" || event.keyCode === 13) { 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?"); if (confirmReset) { if (this.chatManager.cleanChatHistory) { this.chatManager.cleanChatHistory(); } const chatLogContentDiv = document.getElementById('chatLogContent'); chatLogContentDiv.innerHTML = ''; } }); // Initial character message with animation speedup const initialCharacterMessage = "Hi! We got into UA High! Let's become great heroes!"; this.adjustCharacterAnimationSpeed(true); this.animateChatLog('Character', initialCharacterMessage, () => { this.adjustCharacterAnimationSpeed(false); }); // Mute toggle functionality this.muteButton.on('pointerdown', () => { this.isMuted = !this.isMuted; this.sound.mute = this.isMuted; this.muteButton.setTexture(this.isMuted ? 'soundOffIcon' : 'soundOnIcon'); }); } async sendChatMessage(chatManager) { const chatInput = document.getElementById('chatInput'); const inputValue = chatInput.value; if (inputValue) { this.adjustCharacterAnimationSpeed(true); chatManager.addMessage('user', inputValue); this.updateChatLog('Player', inputValue); const response = await chatManager.getCharacterResponse(); chatManager.addMessage('assistant', response); this.animateChatLog('Buddy', response, () => { this.adjustCharacterAnimationSpeed(false); }); chatInput.value = ''; // Clear the input box after sending the message } } updateChatLog(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; } animateChatLog(role, message, onComplete) { const chatLogContentDiv = document.getElementById('chatLogContent'); const color = role === 'Player' ? '#ffffff' : '#ADF2FF'; // Create a new paragraph element for the new message let newMessageElement = document.createElement('p'); newMessageElement.style.color = color; newMessageElement.innerHTML = `${role}: `; chatLogContentDiv.appendChild(newMessageElement); // Append the new paragraph element 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; // Scroll to the bottom of the chat log if (onComplete) onComplete(); // Call the onComplete callback } }, 75); // Typing speed (adjust as needed) } adjustCharacterAnimationSpeed(isSpeedUp) { this.characterTween.timeScale = isSpeedUp ? 5 : 1; } } const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: 580, height: 900, }, scene: ChatScene, dom: { createContainer: true }, }; window.phaserGame = new Phaser.Game(config);