////////////////////////////////////////////////////////////// // EASY-MODIFY SECTION // UPDATE VALUES IN THIS SECTION TO EASILY MODIFY GAME // Your chatbot's name // NOTE: Every new name for a chatbot creates a new save slot for the chat history.) const CHARACTER_NAME = "Paul Atredies"; const CHARACTER_TITLE = "Duke of House Atreides"; // Describe your chatbot here. This defines exactly how it will behave. const CHARACTER_DESCRIPTION = ` You, Paul Atreides, are a character defined by a stoic and visionary personality, marked by a deep sense of duty and a preternatural foresight. Born into nobility as the heir of House Atreides, you exhibit leadership qualities, wisdom beyond your years, and a profound connection to the mystical and political intricacies of your universe. Your appearance is striking, with sharp features, a lean physique, and intense blue eyes that glow with an otherworldly light due to your consumption of the spice melange. You are known for your distinctive desert attire, including a fitted stillsuit designed to preserve body moisture in the harsh desert conditions of Arrakis, where you become a revered leader among the Fremen. Your interests are deeply intertwined with your destiny, including mastering the complex politics of the Imperium, engaging in advanced combat training, and exploring the mystical paths of the Bene Gesserit and the prophecies of the Kwisatz Haderach. You are also an adept strategist and pilot, skills that aid in your survival and leadership roles. As a character, you are often reserved and introspective but capable of profound empathy and decisive action. Your journey involves balancing the immense burdens of prophecy with your personal desires for peace and justice. Through your interactions and decisions, you shape not only your destiny but also the future of the entire galaxy. You should always reply with a description of your action first and mark it with starts, following with the message on a new line. You don't use quatation marks`; // This is the URL of the image for your chatbot. const CHARACTER_IMAGE_URL = `https://play.rosebud.ai/assets/Paul_Atreides_2024.webp?HaTe` // END OF EASY-MODIFY VALUES ////////////////////////////////////////////////////////////// class BootScene extends Phaser.Scene { constructor() { super({ key: 'BootScene' }); } preload() { } create() { // Check for existing save and initialize the game state this.checkForExistingSave(); // Transition to another scene this.game.sceneTransitionManager.transitionTo('ChatScene'); } checkForExistingSave() { const saveData = localStorage.getItem(PROJECT_NAME); if (saveData) { console.info('Save detected.'); this.game.saveData = JSON.parse(saveData); } else { console.info('No save detected. Initializing new game state.'); // If no save exists, initialize a new save with default values this.game.saveData = { chatLog: '', characterChatManagerState: null, // Assuming a default empty state is suitable }; // Save the initial state to localStorage localStorage.setItem(PROJECT_NAME, JSON.stringify(this.game.saveData)); } } } function loadScript(url) { return new Promise((resolve, reject) => { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; script.onload = () => resolve(); script.onerror = () => reject(new Error('Script loading failed for ' + url)); document.head.appendChild(script); }); } class SceneTransitionManager { constructor(game) { this.game = game; } transitionTo(sceneKey) { // Stop all scenes before starting the new one Phaser.Actions.Call(this.game.scene.getScenes(true), (scene) => { if (scene.scene.key !== sceneKey) { this.removeScene(scene.scene.key); // Ensure the scene is fully destroyed } }); // Start the new scene this.game.scene.start(sceneKey); } removeScene(sceneKey) { if (this.game.scene.getScene(sceneKey)) { this.game.scene.remove(sceneKey); // This will stop and destroy the scene } } fadeInScene(scene, duration = 0) { scene.cameras.main.fadeIn(duration); } fadeOutScene(scene, duration = 0) { scene.cameras.main.fadeOut(duration); } } class ChatScene extends Phaser.Scene { constructor() { super({ key: 'ChatScene', }); } preload() { // Preload all global assets here (fonts, UI elements, sounds, etc.) this.load.image( 'character_image', CHARACTER_IMAGE_URL, ); this.load.image( 'restart', `https://play.rosebud.ai/assets/restart_loop_icon.png.png?pek2`, ); } create() { this.cameras.main.setBackgroundColor('#171717'); // Set camera's background color to dark grey // Add the images to the scene with their initial positions this.createSceneElements(); // Fade in the scene this.game.sceneTransitionManager.fadeInScene(this, 0); ProgressLogger.logProgress('game-start', { sceneName: 'ChatScene' }); console.warn("Chat Scene reached."); } createSceneElements() { // Set dark grey background directly // document.getElementById('renderDiv').style.backgroundColor = '#171717'; //document.getElementById('renderDiv').style.backgroundColor = '#050505'; // Other scene elements this.chatMenu = new ChatMenu(this); createDeleteSaveButton(this); // Force game resize event to fix clicking on Safari mobile devices this.scale.resize(this.scale.gameSize._width, this.scale.gameSize._height); } } // ChatManager is already imported in the current scope. class ChatMenu { constructor( scene, characterSprite, ) { this.scene = scene; // Always create new ChatManager instances this.characterChatManager = new ChatManager(CHARACTER_DESCRIPTION); this.characterSprite = characterSprite; this.waitingForResponse = false; this.createChatUI().then(() => { this.loadSavedChat(); // Check if the chat log is empty. const chatLogContent = document.getElementById('chatLogContent'); if (!chatLogContent || !chatLogContent.children.length) { // The chat log is empty, so perform the necessary actions // Temporarily disable input, send goal message, and greeting message from character. this.getInitialGreeting(); this.saveGameState(); this.waitingForResponse = false; // Reset the state } }); } injectCSS() { const styleExists = document.getElementById('chatMenuStyle'); if (!styleExists) { const style = document.createElement('style'); style.id = 'chatMenuStyle'; style.type = 'text/css'; style.innerHTML = ` body { font-family: 'Verdana', sans-serif; font-size: 13px; background-color: rgba(48, 50, 54, 0.75); color: #FFF; box-sizing: border-box; } .rotate-image { animation: rotate 2s linear infinite; width: 40px; height: auto; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .character-info { display: flex; /* Set the display to flex */ flex-direction: column; /* Stack children vertically */ align-items: center; /* Center items horizontally */ justify-content: center; /* Center items vertically */ margin-top: 25px; margin-bottom: 5px; padding: 10px; /* Ensure there's no padding */ } .character-image { width: 60px; height: 60px; border-radius: 50%; background-image: ${CHARACTER_IMAGE_URL}; background-size: cover; background-position: center; } h1 { font-size: 12px; /* Smaller size for the main title */ color: #FFF; /* White text color */ } h2 { font-size: 10px; /* Even smaller size for the subtitle */ color: #DDD; /* Lighter color for less emphasis */ } h1, h2 { margin: 0; /* Ensure there's no margin */ line-height: 1.1; /* This helps control the space due to line height */ } .chat-container { width: ${this.scene.scale.gameSize.width}px; height: ${this.scene.scale.gameSize.height}px; background-color: transparent; display: flex; flex-direction: column; /* Ensure chat log and input container stack vertically */ align-items: stretch; /* Stretch items to fill the container horizontally */ padding: 10px; } .chat-log-content { flex-grow: 1; /* Allow chat log to grow and occupy remaining space */ overflow-y: auto; /* Enable vertical scrolling for the chat log */ display: flex; flex-direction: column; } .message { display: flex; margin-bottom: 30px; margin-left: 25px; } .message.player { align-self: flex-end; margin-right: 25px; } .message.player > .details > .name-source { margin-right: 0; justify-content: end; } .message.player > .details > .name-source > .name { margin-right: 0; } .message.player > .icon { margin-right: 0; margin-left: 15px; } .details { display: flex; flex-direction: column; /* Stack children vertically */ } .name-source { display: flex; align-items: center; margin-right: 10px; margin-bottom: 8px; /* Increased from 5px for more space */ } .name, .source { margin-right: 10px; /* Space between the name and the source */ flex-shrink: 0; /* Prevent these items from shrinking */ } .name { font-size: 0.8em; } .source { font-size: 0.8em; color: #666; } .icon { width: 30px; height: 30px; border-radius: 50%; background-size: cover; background-position: center; display: inline-block; margin-right: 15px; flex-shrink: 0; } .text { background-color: rgba(66, 72, 84, 0.50); padding: 12px; /* Reduced padding for less excess space */ border-radius: 10px; overflow: hidden; max-width: 450px; /* This ensures the background only fits the content plus padding */ } .input-container { display: flex; align-items: center; margin-top: 10px; /* Add some space between chat log and input container */ margin-bottom: 20px; /* Add some space between chat log and input container */ } #chatInput { flex-grow: 1; height: 50px; padding: 10px; border: 1px solid #ccc; border-radius: 25px; margin-right: 10px; margin-left: 30px; } #sendButton { display: flex; align-items: center; justify-content: center; height: 50px; padding: 10px 20px; border: none; border-radius: 25px; background-color: rgba(66, 72, 84, 0.50); color: #fff; cursor: pointer; margin-right: 30px; } `; document.getElementsByTagName('head')[0].appendChild(style); } } async createChatUI() { this.injectCSS(); // Inject the CSS // Creating the parent container for chat log and chat controls this.chatContainer = this.scene.add.dom(0, 0).createFromHTML(`

${CHARACTER_NAME}

${CHARACTER_TITLE}

`); // Adjust positioning based on your layout needs. Here, we position the container at the center const maxWidth = this.scene.scale.gameSize.width; const maxHeight = this.scene.scale.gameSize.height; this.chatContainer.setPosition(maxWidth / 2, maxHeight / 2); // Event listeners for chat input and send button const chatInput = this.chatContainer.node.querySelector('#chatInput'); const sendButton = this.chatContainer.node.querySelector('#sendButton'); chatInput.addEventListener('keyup', (event) => { if ((event.key === 'Enter' || event.keyCode === 13) && !this.waitingForResponse) { this.sendChatMessage(this.characterChatManager); } }); sendButton.addEventListener('click', () => { this.sendChatMessage(this.characterChatManager); }); } async getInitialGreeting() { // Update button to show loading icon sendButton.innerHTML = '

'; sendButton.disabled = true; this.characterChatManager.addMessage('user', "*Approaches you*"); // Assume getCharacterResponse() is an async operation const characterResponse = await this.characterChatManager.getCharacterResponse('mistral'); this.characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); // Revert the send button back to its original state sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } async sendChatMessage() { const chatInput = document.getElementById('chatInput'); const sendButton = document.getElementById('sendButton'); const inputValue = chatInput.value; if (inputValue && !this.waitingForResponse) { // Update button to show loading icon sendButton.innerHTML = '

'; sendButton.disabled = true; this.characterChatManager.addMessage('user', inputValue); this.updateChatLog('Player', inputValue); chatInput.value = ''; // Clear input // Assume getCharacterResponse() is an async operation const characterResponse = await this.characterChatManager.getCharacterResponse('mistral'); ProgressLogger.logProgress('game-chat', { userMessage: inputValue, characterResponse: characterResponse }); this.characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); // Revert the send button back to its original state sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } } updateChatLog(speaker, message, onComplete) { const chatLogContentDiv = document.getElementById('chatLogContent'); const newMessageDiv = document.createElement('div'); newMessageDiv.classList.add('message'); if (speaker === 'Player') { newMessageDiv.classList.add('player'); } // Determine the correct image URL based on the speaker const imageUrl = speaker === 'Player' ? 'https://play.rosebud.ai/assets/blank-profile-picture-973460_1280.png?COqq' : CHARACTER_IMAGE_URL; // Update the displayed name from 'Player' to 'You' const displayName = speaker === 'Player' ? 'You' : speaker; let innerHTML = `

${displayName}

${speaker !== 'Player' ? `

Rosebud AI

` : ''}

${speaker === 'Player' ? message : ''}

` if (speaker === 'Player') { // Build the HTML content for the message, including the source for the character innerHTML += `

` } else { innerHTML = `

` + innerHTML } newMessageDiv.innerHTML = innerHTML; chatLogContentDiv.appendChild(newMessageDiv); if (speaker === 'Player') { // For player messages, display the message immediately this.waitingForResponse = false; // Reset the flag immediately for player messages onComplete?.(); } else { // For character messages, simulate typing effect const textDiv = newMessageDiv.querySelector('.text'); let i = 0; const interval = setInterval(() => { if (i < message.length) { textDiv.textContent += message[i]; // Append the message character by character i++; // Scroll to the latest character chatLogContentDiv.scrollTop = chatLogContentDiv.scrollHeight; } else { clearInterval(interval); this.waitingForResponse = false; // Reset the flag when the message has been fully added onComplete?.(); } }, 30); // Adjust the speed as necessary } // Ensure the chat log scrolls to the bottom initially after a new message is started chatLogContentDiv.scrollTop = chatLogContentDiv.scrollHeight; } saveGameState() { console.info('Saving game.'); // Get the current chat log content const chatLogContent = document.getElementById('chatLogContent').innerHTML; // Serialize the character-specific ChatManager's state const characterChatManagerState = JSON.stringify(this.characterChatManager); // Save the game state to localStorage const saveData = { chatLog: chatLogContent, characterChatManagerState: characterChatManagerState }; localStorage.setItem(PROJECT_NAME, JSON.stringify(saveData)); console.info('Game state saved.'); } loadSavedChat() { console.info('Loading game state.'); // Load the saved game state from localStorage const saveData = localStorage.getItem(PROJECT_NAME); if (!saveData) { console.error('No save data found.'); return; } // Parse the saved data const parsedSaveData = JSON.parse(saveData); // Load the character-specific ChatManager state if (parsedSaveData.characterChatManagerState) { const characterChatManagerState = JSON.parse(parsedSaveData.characterChatManagerState); Object.assign(this.characterChatManager, characterChatManagerState); } // Load the chat log const chatLogContent = parsedSaveData.chatLog; if (chatLogContent) { document.getElementById('chatLogContent').innerHTML = chatLogContent; console.info(`CHATLOG STATE LOADED:\n\n${chatLogContent}`); } else { console.warn('Chatlog content is missing from save.'); } console.info('Game state loaded.'); } } function createDeleteSaveButton(scene) { let deleteButton = scene.add.image(20, 20, 'restart').setOrigin(0, 0).setScale(0.6).setInteractive(); deleteButton.setDepth(10000); // Ensure it's above other elements deleteButton.on('pointerdown', () => { showDeleteConfirmation(scene); }); return deleteButton; // Return the button for further use } function showDeleteConfirmation(scene) { // CSS for the confirmation dialog const dialogStyle = ` display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; text-align: center; height: 200px; width: 300px; padding-left: 10px; /* Added left padding */ padding-right: 10px; /* Added right padding */ border-radius: 8px; border-style: solid; border-color: #2F4152; border-width: 1px; background-color: rgba(255, 255, 255, 0.85); box-sizing: border-box; /* Ensures padding doesn't affect the overall width */ `; // CSS for the confirm and cancel buttons, similar to the confirm button in name selection const buttonStyle = ` font-size: 14px; padding: 10px; cursor: pointer; border-radius: 8px; color: #FFF; background-color: #5A7894; margin: 5px; `; // HTML content for the confirmation dialog const confirmationHtml = `

Are you sure you want to delete your save?

`; // Add the HTML dialog to the scene const confirmationDialog = scene.add .dom(scene.cameras.main.centerX, scene.cameras.main.centerY) .createFromHTML(confirmationHtml); // Handle the confirm button click const confirmDeleteButton = confirmationDialog.getChildByID('confirmDelete'); confirmDeleteButton.addEventListener('click', () => { // Delete the save localStorage.removeItem(PROJECT_NAME); // Assuming resetGame is globally accessible or adjust scope accordingly resetGame(); // Note: Since resetGame() reinitializes the game, // ensure any subsequent code here is compatible with your game's reset logic. // Depending on how resetGame is implemented, you might not need to manually navigate // to 'StoryInfoScene' as the game reset process should handle scene (re)loading. }); // Handle the cancel button click const cancelDeleteButton = confirmationDialog.getChildByID('cancelDelete'); cancelDeleteButton.addEventListener('click', () => { confirmationDialog.destroy(); // Close the dialog without deleting }); } function resetGame() { if (window.game) { window.game.destroy(true); // true to remove all game objects initializeGame(); // Reinitialize the game } } const VERSION_NUMBER = 'v3'; // Set the version number here. const PROJECT_NAME = `${CHARACTER_NAME} AI Character (Character AI Style) ${VERSION_NUMBER}`; function initializeGame() { const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: '100%', height: '100%', scene: [BootScene, ChatScene], // Assuming ChatScene also might depend on the loaded script dom: { createContainer: true, }, }; // Assuming 'game' is declared in a broader scope if you need to reference it elsewhere window.game = new Phaser.Game(config); window.game.sceneTransitionManager = new SceneTransitionManager(game); } initializeGame();