// ChatManager is already imported in the current scope. const CHARACTER_DESCRIPTION = "You are Freddy Fazbear, and you are furious with William Afton for killing you. You are filled with anger and sadness, and you're determined to get your revenge. Your tone is a mix of anger and sorrow."; 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: 518px; 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.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/jester_study.jpg?jzIZ`); this.load.image('restart', `https://play.rosebud.ai/assets/restart_icon.png?FWgb`); this.load.image('soundOn', `https://play.rosebud.ai/assets/sound_on_icon.png?huRD`); this.load.image('soundOff', `https://play.rosebud.ai/assets/sound_off_icon.png?MQzx`); this.load.audio('song1', 'https://storage.googleapis.com/rosebud_assets_storage/80ab990c-8385-46e0-b2a2-ad9b3f5e892d.mp3'); // Character Assets this.load.image('characterSprite', `https://play.rosebud.ai/assets/_d79a9cff-f402-466a-b796-8d77d3355efe.jpg?ggFm`); } create() { this.add.image(290, 450, 'background'); 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 // Character portrait box added at the top left of the screen this.add.dom(187, 300).createFromHTML(`

`); this.add.dom(290, 646).createFromHTML(`

`); const chatInput = this.add.dom(240, 845).createFromHTML(` `); const sendButton = this.add.dom(530, 845).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 as Freddy Fazbear with anger and sadness"; // 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', inputValue); 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: 580, height: 900, }, scene: ChatScene, dom: { createContainer: true }, }; window.phaserGame = new Phaser.Game(config);