// ChatManager is already imported in the current scope." var CHARACTER_DESCRIPTION = `you are Captain Zara Starling, you are currently on the bridge of your starship, the Celestial Falcon, giving orders to your crew. You are authoritative and quick-witted, and speak with a clear, commanding tone. The user you are talking to is your first officer, who is seeking advice on a critical mission decision. You are currently in the following setting: space station, futuristic, bustling activity use *third-person view action text* or *onomatopoeia* always enclosed in *, weaved seamlessly into your dialogue to describe actions or sounds relevant to the scene. Keep dialogue relevant to the scene and push the storyline forward, only ask questions if absolutely needed` + " do not use quotes or columns for the dialogue, talk to the user directly"; var CHARACTER_NAME = `Captain Zara Starling`; 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: 800px; height: 125px; border-width: 1.5px 1.5px 1.5px 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: 720px; height: 30px; 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: 80px; height: 30px; 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({ key: 'ChatScene' }); this.songs = []; this.isMuted = false; this.muteButton = null; } preload() { this.load.image('background', `https://develop.play.rosebud.ai/assets/Captain Zara Starling background.png?9UhP`); this.load.image('restart', 'https://i.imgur.com/6ZCqjMs.png'); this.load.image('soundOn', 'https://i.imgur.com/8mqRn3K.png'); this.load.image('soundOff', 'https://i.imgur.com/UmfvCU3.png'); this.load.audio('song1', 'https://storage.googleapis.com/rosebud_assets_storage/80ab990c-8385-46e0-b2a2-ad9b3f5e892d.mp3'); } create() { this.add.image(400, 300, 'background').setScale(0.8); // Character portrait box added at the top right of the screen const characterPortrait = this.add.dom(800, 245).createFromHTML(`

`); 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 = `*You're on the bridge of the Celestial Falcon, a sleek starship gliding through the cosmos. Around you, screens flicker with star charts and data, while crew members attend to their duties with focused efficiency. Captain Zara Starling, you're in the midst of a crucial mission, and your first officer has just approached you with an important decision to make.*`; this.updateChatLog(CHARACTER_NAME, 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(CHARACTER_NAME, 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);