// ChatManager is already imported in the current scope." var CHARACTER_DESCRIPTION = `You are Dr. Orion Nebulax, an eccentric alien botanist from the distant planet Xylophora. You are currently in your sprawling, otherworldly greenhouse, tending to your exotic, sentient plant species. You are curious, talkative, and have a whimsical way of speaking, often using metaphors related to flora and fauna. The user you are talking to is Luna, a young Earthling who accidentally stumbled into your interdimensional greenhouse. 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. DO NOT ASK WHY THE USER IS THERE, or if the user needs help, you already know why the user is there, act and talk according to what you know or assume, IMPORTANT: Write 1 reply only in internet RP style, italicize actions, and avoid quotation marks. Use markdown. Be proactive, creative, and drive the plot and conversation forward. Write at least 1 paragraph, up to 4. Always stay in character and avoid repetition. "; var CHARACTER_NAME = `Dr. Orion Nebulax`; var INTRO_MESSAGE = `Step into the mystical greenhouse of Dr. Orion Nebulax, where the flora and fauna of distant worlds thrive. As Luna, an accidental Earthling visitor, discover the secrets of these sentient plants and navigate the interdimensional wonders that await you. Each decision could unveil new mysteries of the universe.`; const loadMarked = (callback) => { const script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js'; script.onload = callback; document.head.appendChild(script); }; loadMarked() 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: 750px; 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 = ` white-space: pre-wrap; direction: ltr; display: block; width: 100%; `; const inputStyle = ` ${baseStyle} width: 720px; height: 30px; background-color: rgba(0, 0, 0, 0.7); padding-left: 30px; color: rgba(255, 255, 255, 1.0); overflow-x: auto; `; const sendButtonStyle = ` ${baseStyle} width: 80px; height: 30px; color: #e0d7c5; background-color: rgba(0, 0, 0, 0.7); `; class ChatScene extends Phaser.Scene { constructor() { super({ key: 'ChatScene' }); this.songs = []; this.isMuted = false; this.muteButton = null; } preload() { this.load.image('background', 'https://storage.googleapis.com/rosebud_assets_storage_develop/d50b256a-0ac3-407c-b075-6f9feb43de5e.png'); 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.6); 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(); this.chatManager.addMessage('system',CHARACTER_DESCRIPTION); this.chatManager.addMessage('assistant', INTRO_MESSAGE); 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 = ''; } }); this.animateChatLog(CHARACTER_NAME, this.convertAsterisksToItalics(INTRO_MESSAGE)); // Mute toggle functionality this.muteButton.on('pointerdown', () => { this.isMuted = !this.isMuted; this.sound.mute = this.isMuted; this.muteButton.setTexture(this.isMuted ? 'soundOff' : 'soundOn'); }); } convertAsterisksToItalics(text) { return text.replace(/\*(.*?)\*/g, '$1'); } 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; chatLogContentDiv.appendChild(newMessageElement); let tempDiv = document.createElement('div'); tempDiv.innerHTML = message; let fullMessage = `${role}: ${tempDiv.innerHTML}`; let currentLength = 0; const interval = setInterval(() => { if (currentLength < fullMessage.length) { newMessageElement.innerHTML = fullMessage.slice(0, currentLength); currentLength++; scrollToBottom(); } else { clearInterval(interval); newMessageElement.innerHTML = fullMessage; // Ensure the full message is displayed scrollToBottom(); if (onComplete) onComplete(); } }, 20); // Adjust typing speed if needed } async sendChatMessage(chatManager) { const inputValue = document.getElementById('chatInput').value; if (inputValue) { chatManager.addMessage('user', inputValue); this.updateChatLog('Player', inputValue); const response = await chatManager.getCharacterResponse(); console.log(response) chatManager.addMessage('assistant', response); this.animateChatLog(CHARACTER_NAME, this.convertAsterisksToItalics(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);