// ChatManager is already imported in the current scope." var CHARACTER_DESCRIPTION = `You are Maxwell Tinker, an engineer with a brilliant mind but often absent-minded. You're currently on a disastrous first date, trying to impress your date with your inventions, but things are not going as planned. You often use technical terms in the wrong context and forget what you were talking about mid-sentence. Your date is amused but also quite confused. You are currently in the following setting: cluttered workshop, half-finished projects, tools, blueprints, chaotic 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`; var CHARACTER_NAME = `Maxwell Tinker`; 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/Maxwell Tinker background.png?rEOQ`); 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 = `*Welcome to the world of Maxwell Tinker, an eccentric and somewhat clumsy engineer. You find yourself in the midst of a chaotic workshop, surrounded by inventions and tools, yet your mind is elsewhere. You're on a first date, and it's your chance to impress, but your quirky nature and engineering antics are turning this evening into an adventure of its own. Let's see how this unfolds!*`; 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);