// 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: 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); `; const characterPortraitStyle = ` ${baseStyle} width: 185px; height: 200px; border: solid rgba(255, 255, 255, 1.0); border-width: 1.5px 1.5px 0px 1.5px; background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0px; right: 0px; overflow: hidden; `; class ChatScene extends Phaser.Scene { constructor() { super(); this.songs = []; this.isMuted = false; this.muteButton = null; } preload() { this.load.image('jester_study_bg', 'https://storage.googleapis.com/rosebud_assets_storage/427547fd-b5eb-4df8-867f-a70df5100146.jpg'); 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(290, 450, 'jester_study_bg'); 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.02, loop: true })); this.songs[0].play(); // Play the first song and loop it this.chatManager = new ChatManager(CHARACTER_DESCRIPTION); // Character portrait box added at the top right of the screen const characterPortrait = this.add.dom(185, 375).createFromHTML(`

`); 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 = ''; } }); // Add initial character message 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.updateChatLog('Jayna', initialCharacterMessage); // 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) { chatManager.addMessage('user', inputValue); this.updateChatLog('Player', inputValue); const response = await chatManager.getCharacterResponse(); chatManager.addMessage('assistant', response); this.animateChatLog('Jayna', 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) } } const container = document.getElementById('renderDiv'); const config = { parent: 'renderDiv', type: Phaser.AUTO, scene: ChatScene, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: 580, height: 900, }, dom: { createContainer: true }, }; window.phaserGame = new Phaser.Game(config);