`); 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.1, loop: true })); this.songs[0].play(); // Play the first song and loop it this.chatManager = new ChatManager(CHARACTER_DESCRIPTION); this.add.dom(400, 506).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.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 ? 'soundOff' : 'soundOn'); }); } 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) { function scrollToBottom() { const div = document.getElementById('chatLog'); div.scrollTop = div.scrollHeight; }; 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++; scrollToBottom(); } else { clearInterval(interval); const chatLogDiv = document.getElementById('chatLog'); chatLogDiv.scrollTop = chatLogDiv.scrollHeight; if (onComplete) onComplete(); } }, 25); // Adjust typing speed if needed } async sendChatMessage(chatManager) { const inputValue = document.getElementById('chatInput').value; document.getElementById('chatInput').value = ''; if (inputValue) { chatManager.addMessage('user', inputValue); this.animateChatLog('Player', inputValue); const response = await chatManager.getCharacterResponse(); chatManager.addMessage('assistant', response); this.animateChatLog('Jayna', response); } } // Modify sendChessMove to use animateChatLog async sendChessMove(chessMovesPrompt, chatManager) { const inputValue = chessMovesPrompt chatManager.addMessage('user', inputValue); const response = await chatManager.getCharacterResponse(); chatManager.addMessage('assistant', response); this.animateChatLog('Jayna', response); } } 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: 800, height: 600, }, dom: { createContainer: true }, }; window.phaserGame = new Phaser.Game(config);