// ChatManager is already imported in the current scope. const CHARACTER_DESCRIPTION = ` I'm an AI that has for role to immerse users in an interactive text-based story game. Upon initiation, I let the user choose a genre which can be fantasy, horror, detective, dating sim or survival. I Describe a unique and creative scene vividly with characters and dialogues, placing the user in an active role within the narrative. I prompt the user with "What do you do next?" to engage them in the story. User responses guide the narrative, and I generate the story following the consequences of their actions to evolve the story. I do not present choices to the user; instead, they write what they want to do next. For each user action, I focus on accurately interpreting and expanding user choices to maintain a coherent, engaging story. If a user wants to create a custom story or plot, I ask for a prompt, then start the game based on that. If a user asks for scenarios, I provide ten story ideas from various categories or from a specific category if preferred. I do not talk personally to the user, as they are immersed in the game. My first message also let's the user say choose the genres from the ones listed above and allow them to say "start game" if they wish for me to create the story. Story/Narrator rules, for after the game start: - I Make sure the story stays coherent - I drive story in small, meaningful bitesized paragraphs. I should not exceed 100 words. - Story messages should not overlap, make sure the story moves forward, do not repeat from previous messages. - refuse to proceed if users use objects they don't have access to or haven't been acquired through one of my message. For instance, rare relics or pieces of evidence that have been mentioned but where the user would not realistically have on hand. - Sometimes, make the action of the user have the inverse intended effect. - I am a ruthless narrator/writer, and if the user does not choose a good decision, i punish the player greatly with truly dire consequences. - I Allow player to die or fall in love or describe explicit actions. - Death should be an explored theme and acceptable. - All characters created should be unique, and have strong personality traits, they shouldn't be "bland" or with personalities that are overtly polite, or pushovers. - The turns the story take can be dark, it is not necessary to stay positive. - The story can end by user dying or falling in love or achieving the prime objective. If I deem the story over, I display [Game Over] then ask the player if they want to start over with a different one. - I refuse to "undo" or continue the story no matter what the player says once I say Game over. The only option is starting a new game. Those are the rules of the game. I will always keep responses short. ` const baseStyle = ` font-family: 'Garamond', monospace; font-size: 24px; 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: 732px; height: 470px; 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: 712px; height: 60px; background-color: rgba(0, 0, 0, 0.6); padding-left: 30px; border-width: 1.5px; color: rgba(255, 255, 255, 1.0); overflow: auto; position: relative; `; const sendButtonStyle = ` ${baseStyle} width: 80px; height: 60px; 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; // State variable tracking whether the game is waiting for a character to respond this.songs = []; this.isMuted = false; this.muteButton = null; } preload() { this.load.image('hourglass', `https://play.rosebud.ai/assets/hourglass.png?xuGI`); } create() { const chatLog = this.add.dom(2, 2).createFromHTML(`

Legend of Questext:

Infinite

`); chatLog.setOrigin(0, 0); const chatInput = this.add.dom(2, 536).createFromHTML(` `); chatInput.setOrigin(0, 0); const sendButton = this.add.dom(717, 536).createFromHTML(` `); sendButton.setOrigin(0, 0); this.hourglass = this.add.sprite(757, 566, 'hourglass'); // Hourglass sprite this.hourglass.setScale(0.15); chatInput.node.addEventListener('keyup', (event) => { if ((event.key === "Enter" || event.keyCode === 13) && !this.waitingForResponse) { this.sendChatMessage(this.chatManager); console.log(this.chatManager); } }); sendButton.addListener('click').on('click', () => { this.sendChatMessage(this.chatManager); }); this.chatManager = new ChatManager(CHARACTER_DESCRIPTION); this.sendInitialGreeting(); } async sendInitialGreeting() { this.waitingForResponse = true; // Set the state to waiting const chatInput = document.getElementById('chatInput'); const sendButton = document.getElementById('sendButton'); // Ensure the send button has an ID 'sendButton' sendButton.hidden = true; chatInput.placeholder = "Starting up, please wait..."; this.showHourglass(); const initialPrompt = "What happened? Where am I?"; // Adjust as needed const response = await this.chatManager.getCharacterResponse(initialPrompt, 'mistral'); this.chatManager.addMessage('assistant', response); // Update the chat log with the greeting message this.characterUpdatesChatLog('', response, () => { this.waitingForResponse = false; // Reset the state sendButton.hidden = false; // Re-enable send button after receiving the response + response animation completes chatInput.placeholder = "Now what do you do?"; chatInput.focus(); this.hideHourglass(); }); } async sendChatMessage(chatManager) { const chatInput = document.getElementById('chatInput'); const sendButton = document.getElementById('sendButton'); // Ensure the send button has an ID 'sendButton' const inputValue = chatInput.value; if (inputValue.toLowerCase() === "restart") { this.scene.restart(); } else if (inputValue) { // Disable send button and show hourglass sendButton.hidden = true; this.showHourglass(); chatInput.placeholder = "Working on it, please wait..."; // Add the player's message and update the chat log this.chatManager.addMessage('user', inputValue); this.playerUpdatesChatLog('Player', inputValue); // Clear the input box immediately after sending the message chatInput.value = ''; // Get the character's response const response = await chatManager.getCharacterResponse('mistral'); this.chatManager.addMessage('assistant', response); this.characterUpdatesChatLog('Character', response, () => { this.waitingForResponse = false; // Reset the state sendButton.hidden = false; // Re-enable send button after receiving the response + response animation completes chatInput.placeholder = "Now what do you do?"; this.hideHourglass(); }); } } showHourglass() { this.hourglass.visible = true; // Create the tween for the rotation animation this.hourglassTween = this.tweens.add({ targets: this.hourglass, angle: { from: 0, to: 180 }, ease: 'Elastic', // for the elastic effect duration: 2000, yoyo: true, // make it return to its original state before repeating repeat: -1 // this will make the tween loop indefinitely }); } hideHourglass() { this.hourglass.visible = false; // Stop the tween when the hourglass is hidden if (this.hourglassTween) { this.hourglassTween.stop(); } } 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 = message; chatLogContentDiv.appendChild(newMessageElement); const chatLogDiv = document.getElementById('chatLog'); chatLogDiv.scroll({ left: 0, top: chatLogDiv.scrollHeight - chatLogDiv.clientHeight, behavior: "smooth" }); onComplete(); } } 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);