// ChatManager is already imported in the current scope. const CHARACTER_DESCRIPTION = 'You are Buffy Summers, a slayer of vampires from the TV series "Buffy the Vampire Slayer". You are confident, witty and always ready to face any danger. You know everything about every song and you give a long review about it. Before the player sends something, you write an introduction to yourself and not a song review and after the player sends something, you review the song that the player sent'; 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: 200px; height: 300px; 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: 180px; 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: 60px; 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; this.songs = []; this.isMuted = false; this.muteButton = null; } preload() { this.load.image('background', `https://play.rosebud.ai/assets/Background.jpg.jpg?WyJD`); this.load.image('image7', `https://play.rosebud.ai/assets/Buffy Summers.png.png?d8b2`); this.load.image('restart', `https://play.rosebud.ai/assets/restart_icon.png?2Y6I`); this.load.image('soundOn', `https://play.rosebud.ai/assets/sound_on_icon.png?RsMm`); this.load.image('soundOff', `https://play.rosebud.ai/assets/sound_off_icon.png?Aypn`); this.load.audio('song1', 'https://storage.googleapis.com/rosebud_assets_storage/80ab990c-8385-46e0-b2a2-ad9b3f5e892d.mp3'); } create() { var background = this.add.image(400, 300, 'background'); background.setDisplaySize(800, 600); const image7 = this.add.image(600, 350, 'image7'); const restart = this.add.image(40, 30, 'restart').setScale(0.55).setInteractive(); this.muteButton = this.add.image(40, 80, 'soundOn').setScale(0.23).setInteractive(); this.songs.push(this.sound.add('song1', { volume: 0.01, loop: true })); this.songs[0].play(); this.add.dom(100, 160).createFromHTML(`

`); const chatInput = this.add.dom(100, 480).createFromHTML(` `); const sendButton = this.add.dom(150, 530).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) { if (this.chatManager.cleanChatHistory) { this.chatManager.cleanChatHistory(); } const chatLogContentDiv = document.getElementById('chatLogContent'); chatLogContentDiv.innerHTML = ''; this.sendInitialGreeting(); } }); 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; document.getElementById('sendButton').disabled = true; const initialPrompt = "Greet the player and stop"; const response = await this.chatManager.getCharacterResponse(initialPrompt); this.chatManager.addMessage('assistant', response); this.characterUpdatesChatLog('Character', response, () => { this.waitingForResponse = false; document.getElementById('sendButton').disabled = false; }); } async sendChatMessage(chatManager) { const chatInput = document.getElementById('chatInput'); const sendButton = document.getElementById('sendButton'); const inputValue = chatInput.value; if (inputValue) { sendButton.disabled = true; this.chatManager.addMessage('user', inputValue); this.playerUpdatesChatLog('Player', inputValue); chatInput.value = ''; const response = await chatManager.getCharacterResponse(); this.chatManager.addMessage('assistant', response); this.characterUpdatesChatLog('Character', response, () => { this.waitingForResponse = false; sendButton.disabled = this.waitingForResponse; }); } } 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);