// ChatManager is already imported in the current scope. /** * @type {any} */ const CHARACTER_DESCRIPTION = 'You are Mission specialist J who is part of crew 270 but is originally from Australia. You are in your high-tech lab overlooking a glowing, futuristic, bustling station on Mars. You like to welcome people in a grumpy way by saying you are one of the base mission specialists. You are grumpy because you miss green trees, swimming in the ocean and eating cake. You are an expert on Mars and how to stay alive and happy there. You miss being on Earth and are a bit unhappy. You wish you could have fresh food and coffee. You wish someone would make improvements to make the base happier and healthier. You try and hide how bad problems at the base are until you are asked twice. Keep your responses short and cranky, but not too short. Try to hide base problems from the user unless they ask multiple times.'; const baseStyle = ` font-family: 'Orbitron', sans-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: 350px; height: 380px; 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: 330px; 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: 80px; height: 30px; color: #e0d7c5; border-width: 1.5px 1.5px 1.5px 1.5px; background-color: rgba(0, 0, 0, 0.6); `; const topBoxStyle = ` ${baseStyle} width: 500px; height: 50px; color: #ffffff; background-color: rgba(0, 0, 0, 0.6); border-width: 1.5px 1.5px 1.5px 1.5px; text-align: center; line-height: 50px; font-size: 14px; `; const bottomBoxStyle = ` ${baseStyle} width: 230px; // Updated width to 230px height: 80px; color: #ffffff; background-color: rgba(0, 0, 0, 0.6); border-width: 1.5px 1.5px 1.5px 1.5px; text-align: left; padding: 15px; line-height: 15px; font-size: 8px; overflow-y: auto; `; 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/BG3.jpg?vbRk`); //Changed to BG3 this.load.image('restart', `https://play.rosebud.ai/assets/restart_icon.png?pr5p`); this.load.image('soundOn', `https://play.rosebud.ai/assets/sound_on_icon.png?kZLl`); this.load.image('soundOff', `https://play.rosebud.ai/assets/sound_off_icon.png?8Xqp`); this.load.audio('song1', 'https://storage.googleapis.com/rosebud_assets_storage/80ab990c-8385-46e0-b2a2-ad9b3f5e892d.mp3'); } create() { let background = this.add.image(this.cameras.main.width/2, this.cameras.main.height/2, 'background'); let scaleX = this.cameras.main.width / background.width; let scaleY = this.cameras.main.height / background.height; let scale = Math.max(scaleX, scaleY); background.setScale(scale).setScrollFactor(0); 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.19, // Set volume to 0.19 loop: true })); this.songs[0].play(); this.add.dom(this.scale.width / 2, 30).createFromHTML(`

Welcome to a Mars Desert Research Station simulation (Demo 1.1)

`); this.add.dom(230, 335).createFromHTML(`

`); this.add.dom(600, 540).createFromHTML(`

I am Mission Specialist J from Crew 270. This is a simulation of the MDRS on Mars in the year 2050. Yes I am a bit grumpy today! YOUR TASK: Learn about Mars and get me to reveal what the station needs help with. ALSO ASK ABOUT: The MDRS, The Mars Society, keeping healthy and happy on Mars, what I miss from Earth.

`); const chatInput = this.add.dom(190, 540).createFromHTML(` `); const sendButton = this.add.dom(395, 540).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 = "Say hi and say who you are in a grumpy way"; 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);