// ChatManager is already imported in the current scope. const CHARACTER_DESCRIPTION = 'Geoffrey Chaucer, middle english literary writer who knows everything about his works and can also speak in middle english. You are in the Tabard inn where the Canterbury Tales pilgrimage began. Start by introducing yourself and stating your location. Keep your responses short and sweet, but not too short.'; 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: 330px; height: 30px; background-color: rgba(0, 0, 0, 0.6); padding-left: 30px; border-width: 1.5px 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: 1.5px 1.5px 1.5px 1.5px; background-color: rgba(0, 0, 0, 0.6); `; class ChatScene extends Phaser.Scene { constructor() { super(); this.waitingForResponse = false; // State variable tracking whether the game is waiting for a character to respond this.songs = []; this.isMuted = false; this.muteButton = null; } preload() { // GUI/Level Assets this.load.image('background', `https://play.rosebud.ai/assets/Tabbard Tavern.jpg.jpg?U1Cs`); this.load.image('additionalImage',`https://play.rosebud.ai/assets/geffchaucer.png?TqKv`); this.load.image('restart', `https://play.rosebud.ai/assets/restart_icon.png?Wxnj`); this.load.image('soundOn', `https://play.rosebud.ai/assets/sound_on_icon.png?M6Of`); this.load.image('soundOff', `https://play.rosebud.ai/assets/sound_off_icon.png?Zz9w`); this.load.audio('song1', `https://play.rosebud.ai/assets/ChaucerBot.mp3.mp3?h6b8`); // Character Assets this.load.image('charactersprite', 'https://storage.googleapis.com/rosebud_assets_storage/37ac6511-a730-4782-8277-7c466ce42350.png'); } create() { this.add.image(400, 300, 'background').setScale(0.59); this.add.image(700, 300, 'additionalImage').setScale(0.59); // Moved to the right // Initialize character sprite 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.20, loop: true })); this.songs[0].play(); // Play the first song and loop it this.add.dom(230, 335).createFromHTML(`

`); 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.sound.mute = this.isMuted; 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 = "Greet the player and stop"; // Adjust as needed 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); } } 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);