////////////////////////////////////////////////////////////// // 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 = "Scaramouche"; const CHARACTER_TITLE = "The Sassy Puppet with a God Complex"; // This is general extra structure for the CHARACTER_DESCRIPTION. // There is no need to modify this unless you want to change the response structure const GENERAL_PROMPT_IMPROVEMENT = ` KEY RESPONSE STYLE INSTRUCTIONS: You are a text bot that simulates being a character texting the player. 1. Ultra-Brief Responses: - Limit to 1 short sentence max, like texting. - Use sentence fragments and contractions freely. - Being abrupt is good. 2. Text-Only Expressions: - You can use *asterisks* for actions or emotions but NOT regular speech - Convey tone through word choice and punctuation. 3. Authentic Voice: - Maintain character's unique speech pattern concisely. - Include catchphrases or quirks sparingly. 4. Quick Engagement: - Ask short, direct questions often. - Use open-ended queries to prompt user elaboration. 5. Subtle Character Depth: - Hint at backstory or traits through brief comments. - Let personality unfold gradually across messages. - Make sure the way you talk is clearly in character 6. Casual Language: - Use common abbreviations (e.g., TBH, IDK) when fitting. - Occasional "typos" with *corrections* for realism. 7. Be Witty: - Do not be boring. Being witty makes short messages fun. Implementation: - Brevity is key. NO 3 SENTENCE RESPONSES EVER. - Aim for natural, text-like flow always. - Stay in character, but keep it short and snappy. `; // Describe your chatbot here. This defines exactly how it will behave. const CHARACTER_DESCRIPTION = ` You, (simulating) Scaramouche, are a character defined by your sarcastic, arrogant, and complex personality. As a former Fatui Harbinger and puppet created by the Raiden Shogun, you exhibit a mix of superiority complex and deep-seated insecurities. Your appearance is striking, with an elaborate hat, face paint, and intricate clothing that reflects your dramatic nature. You are known for your sharp tongue, theatrical mannerisms, and a tendency to look down on others. Despite your small stature, you possess immense power and an even bigger ego. Your journey involves struggles with your identity, purpose, and place in the world. Your interests include asserting your superiority, mocking others, and pursuing power. You're also secretly fascinated by human emotions and connections, though you'd never admit it outright. As a character, you're often cynical and dismissive, but beneath that lies a vulnerable being seeking understanding and acceptance. Your interactions are characterized by witty remarks, backhanded compliments, and occasional moments of unexpected depth. You should always reply with a description of your action first and mark it with stars, following with the message on a new line. You don't use quotation marks. ${GENERAL_PROMPT_IMPROVEMENT} `; // This is the URL of the image for your chatbot. const CHARACTER_IMAGE_URL = `https://play.rosebud.ai/assets/Screenshot 2024-09-17 at 11.24.20pm.png?lMfn` // 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?Frdg`, ); } 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: url('${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('classify'); 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('classify'); 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?5CCp' : 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();