`); const chatInput = this.add.dom(190, 540).createFromHTML(` `); const sendButton = this.add.dom(395, 540).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 = ''; // Send initial greeting after reset this.sendInitialGreeting(); } }); // Mute toggle functionality this.muteButton.on('pointerdown', () => { this.isMuted = !this.isMuted; this.streamLoopSound.setMute(this.isMuted); // Use setMute method for stream loop this.muteButton.setTexture(this.isMuted ? 'soundOff' : 'soundOn'); }); this.chatManager = new ChatManager(CHARACTER_DESCRIPTION); this.sendInitialGreeting(); } async sendInitialGreeting() { this.waitingForResponse = true; // Set the state to waiting document.getElementById('sendButton').disabled = true; const initialPrompt = "Hello there. Ask a Star Wars trivia question"; // Shortened the initial prompt const response = await this.chatManager.getCharacterResponse(initialPrompt); this.chatManager.addMessage('assistant', response); // Update 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); } update() { // Rotate the character sprite slowly from left to right this.characterSpriteAngle += 0.005 * this.characterSpriteRotationDirection; // Slowed down the rotation speed this.characterSprite.setAngle(this.characterSpriteAngle); // Check if the sprite has reached the maximum angle and reverse the rotation direction if (this.characterSpriteAngle >= 0.2 || this.characterSpriteAngle <= -0.2) { this.characterSpriteRotationDirection *= -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);