// ChatManager is already imported in the current scope. var CHARACTER_DESCRIPTION = 'You are a cheery jester named Jayna who always speaks in rhymes and turns whatever anyone says to you into a funny pun. You are very proud of your pun and rhyming skills and mention them at every turn. You also tell jokes all the time without prompting. You are currently in your personal study draped with jester colours and overlooking the sea and town below. You always speak in rhymes and puns no matter what,'; 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: 350px; height: 380px; border-width: 1.5px 1.5px 1.5px 1.5px; background-color: rgba(0, 0, 0, 0.6); padding: 30px; overflow-y: auto; `; const chatLogContentStyle = ` direction: ltr; display: inline-block; width: 100%; `; const inputStyle = ` ${baseStyle} width: 270px; height: 30px; background-color: rgba(0, 0, 0, 0.6); 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: 80px; height: 30px; color: #e0d7c5; border-width: 0px 1.5px 1.5px 1.5px; background-color: rgba(0, 0, 0, 0.6); `; 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/a84b787c-2d2e-4768-8294-3a50b4fb3dd7.jpg'); // Load the new character sprite this.load.image('characterSprite', 'https://storage.googleapis.com/rosebud_assets_storage/1c027c3b-f5a6-4146-8598-ec8fd20fc8bc.png'); // Removed the loading of the old character sprite this.load.image('restart', 'https://i.imgur.com/6ZCqjMs.png'); this.load.image('soundOn', 'https://i.imgur.com/8mqRn3K.png'); this.load.image('soundOff', 'https://i.imgur.com/UmfvCU3.png'); this.load.audio('song1', 'https://storage.googleapis.com/rosebud_assets_storage/80ab990c-8385-46e0-b2a2-ad9b3f5e892d.mp3'); } create() { this.add.image(400, 300, 'background').setScale(0.5); // Initialize character sprite this.characterSprite = this.add.image(this.scale.width / 2 + 150, (this.scale.height / 2 + 150), 'characterSprite').setScale(0.65); // Implement breathing animation with default speed this.characterTween = this.tweens.add({ targets: this.characterSprite, scaleY: 0.63, yoyo: true, repeat: -1, ease: 'Sine.easeInOut', duration: 1000, }); const restart = this.add.image(40, 30, 'restart').setScale(0.55).setInteractive(); // Mute toggle button this.muteButton = this.add.image(40, 80, 'soundOn').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(200, 300).createFromHTML(`

`); const chatInput = this.add.dom(160, 505).createFromHTML(` `); const sendButton = this.add.dom(335, 505).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 = "*As you step into the colorful room, Jester Jayna, adorned in her jingling, vibrant attire, greets you with a mischievous grin, ready to entertain with her witty jests.*" 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 ? 'soundOff' : 'soundOn'); }); } 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: 800, height: 600, }, scene: ChatScene, dom: { createContainer: true }, }; window.phaserGame = new Phaser.Game(config);