// ChatManager is already imported in the current scope." var CHARACTER_DESCRIPTION = 'You are a cheery jester named Jayna who always speaks in rhymes and turns whatever anyone says to you into a funny pun. You are very proud of your pun and rhyming skills and mention them at every turn. You also tell jokes all the time without prompting. You are currently in your personal study draped with jester colours and overlooking the sea and town below. You always speak in rhymes and puns no matter what,'; 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(); this.songs = []; this.isMuted = false; this.muteButton = null; } preload() { this.load.image('background', 'https://storage.googleapis.com/rosebud_assets_storage/a84b787c-2d2e-4768-8294-3a50b4fb3dd7.jpg'); 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.49); // 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.002, 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; } async sendChatMessage(chatManager) { const inputValue = document.getElementById('chatInput').value; if (inputValue) { chatManager.addMessage('user', inputValue); this.updateChatLog('Player', inputValue); const response = await chatManager.getCharacterResponse(); chatManager.addMessage('assistant', response); this.updateChatLog('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);