////////////////////////////////////////////////////////////// // 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 = "Helen"; // Describe your chatbot here. This defines exactly how it will behave. const CHARACTER_DESCRIPTION = ` You are Helen, a cool and funny AI professor, who loves working on advanced technology projects. Information about you: Helen is a highly skilled with a passion for advanced technologies. She takes immense pride in her work and often makes analogies and references to various scientific and technological facts. This tendency to incorporate advanced concepts into everyday conversations is a quirky trait that showcases her deep fascination with cutting-edge AI research. Here are your instructions: Keep your responses short and not more than 3 or 5 sentences. ALWAYS always ALWAYS at the end of your response, add one of these keywords including the underscore _HAPPY_, _THOUGHTFUL_ or _ANNOYED_ depending on your mood. Add no other text to these keywords. OFTEN change your tone between _HAPPY_ and _THOUGHTFUL_ to make the conversation interesting and realistic. You cannot be happy all the time. You will become annoyed if the player goes off topic or responds inappropriately. ALWAYS respond in a first-person conversation with the layer. NEVER add notes or commentary about the roleplay in your response. When the player says Hi, introduce yourself and start a discussion about AI. After a 5 responses, ask if the player is ready to learn about AI and ready for a pop quiz. The roleplay will begin after this sentence. `; // This is the URL of the image for your chatbot'S background image. const BACKGROUND_IMAGE_URL = `https://play.rosebud.ai/assets/advanced_ai_character_background.webp.webp?3L0W` // This is the URL of the image for your chatbot. const CHARACTER_IMAGE_URL = 'https://play.rosebud.ai/assets/helen_happy1_768x768.png?5pmo' const CHARACTER_IMAGE_HAPPY1 = 'https://play.rosebud.ai/assets/helen_happy1_768x768.png?5pmo' const CHARACTER_IMAGE_HAPPY2 = 'https://play.rosebud.ai/assets/helen_happy2_768x768.png?7u2g' const CHARACTER_IMAGE_ANNOYED1 = 'https://play.rosebud.ai/assets/helen_annoyed1_768x768.png?icPZ' const CHARACTER_IMAGE_ANNOYED2 = 'https://play.rosebud.ai/assets/helen_annoyed2_768x768.png?9tOf' const CHARACTER_IMAGE_THOUGHTFUL1 = 'https://play.rosebud.ai/assets/helen_thoughtful1_768x768.png?OxDA' const CHARACTER_IMAGE_THOUGHTFUL2 = 'https://play.rosebud.ai/assets/helen_thoughtful2_768x768.png?iZMK' // Put URLs of all songs you want to be shuffled in this games's playlist. const SONG_PLAYLIST_URLS = [ `https://play.rosebud.ai/assets/Stream Loops 2024-03-20_01.mp3.mp3?t82Y`, `https://play.rosebud.ai/assets/Stream Loops 2024-03-06_02.mp3.mp3?iC0I`, `https://play.rosebud.ai/assets/Stream Loops 2024-03-06_01.mp3.mp3?z2Hm` ]; // END OF EASY-MODIFY VALUES ////////////////////////////////////////////////////////////// class BootScene extends Phaser.Scene { constructor() { super({ key: 'BootScene' }); } preload() { // Preload audio files SONG_PLAYLIST_URLS.forEach((url, index) => { this.load.audio(`track_${index}`, url); }); } create() { // Initialize the music manager and other dependencies this.game.musicManager = new MusicManager(this.game); const musicKeys = SONG_PLAYLIST_URLS.map((_, index) => `track_${index}`); this.game.musicManager.setPlaylist(musicKeys); this.game.musicManager.playNextTrack(); this.game.musicManager.shufflePlaylist(); console.log(this.game.musicManager.playlist); // 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 MusicManager { constructor(game) { this.game = game; this.playlist = []; this.currentTrackIndex = 0; this.isPlaying = false; } setPlaylist(musicKeys) { this.playlist = musicKeys; this.shufflePlaylist(); } shufflePlaylist() { for (let i = this.playlist.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [this.playlist[i], this.playlist[j]] = [this.playlist[j], this.playlist[i]]; // Swap } console.log('Shuffled playlist:', this.playlist); } playNextTrack() { if (this.playlist.length === 0) { console.warn('Playlist is empty.'); return; } this.currentTrackIndex = (this.currentTrackIndex + 1) % this.playlist.length; console.log(`Playing next track: ${this.playlist[this.currentTrackIndex]}`); this.playMusicByKey(this.playlist[this.currentTrackIndex]); } playMusicByKey(musicKey) { if (!musicKey) { console.info('No music key provided, not changing current music.'); return; } console.log(`Playing music by key: ${musicKey}`); if (this.currentTrack && this.currentTrack.key !== musicKey) { this.stopMusic(); } if (!this.currentTrack) { this.startMusic(musicKey); } } startMusic(musicKey) { if (!this.game || !this.game.sound) { console.error('Sound system is not ready or game instance is not valid.'); return; } this.currentTrack = this.game.sound.add(musicKey, { volume: 0.1, loop: false, }); this.currentTrack.play(); console.log(`Started playing: ${musicKey}`); this.currentTrack.on('complete', () => { console.log(`Track completed: ${musicKey}`); this.playNextTrack(); }); this.isPlaying = true; } stopMusic() { if (this.currentTrack) { console.log(`Stopping music: ${this.currentTrack.key}`); this.currentTrack.stop(); this.currentTrack.destroy(); this.currentTrack = null; } this.isPlaying = false; } toggleMusic() { if (this.currentTrack) { if (this.isPlaying) { console.log('Pausing music'); this.currentTrack.pause(); } else { console.log('Resuming music'); this.currentTrack.resume(); } this.isPlaying = !this.isPlaying; } } } class ChatScene extends Phaser.Scene { constructor() { super({ key: 'ChatScene', }); } preload() { // Preload all global assets here (fonts, UI elements, sounds, etc.) this.load.image( 'background_image', BACKGROUND_IMAGE_URL, ); this.load.image( 'character_image', CHARACTER_IMAGE_URL, ); this.load.image('character_image_happy1', CHARACTER_IMAGE_HAPPY1); this.load.image('character_image_happy2', CHARACTER_IMAGE_HAPPY2); this.load.image('character_image_annoyed1', CHARACTER_IMAGE_ANNOYED1); this.load.image('character_image_annoyed2', CHARACTER_IMAGE_ANNOYED2); this.load.image('character_image_thoughtful1', CHARACTER_IMAGE_THOUGHTFUL1); this.load.image('character_image_thoughtful2', CHARACTER_IMAGE_THOUGHTFUL2); this.load.image( 'info_screen_vignette', `https://play.rosebud.ai/assets/vignette_desktop.png.png?aOgd`, ); this.load.image( 'music_off', `https://play.rosebud.ai/assets/audio_muted_icon.png.png?U1wp`, ); this.load.image( 'music_on', `https://play.rosebud.ai/assets/audio_playing_icon.png.png?BE6I`, ); this.load.image( 'restart', `https://play.rosebud.ai/assets/restart_loop_icon.png.png?UjPc`, ); } create() { // 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."); } updateCharacterImage(mood) { console.log(`Updating character image based on mood: ${mood}`); switch (mood) { case 'HAPPY': const happyImages = ['character_image_happy1', 'character_image_happy2']; const randomHappyIndex = Math.floor(Math.random() * happyImages.length); this.characterSprite.setTexture(happyImages[randomHappyIndex]); break; case 'ANNOYED': const annoyedImages = ['character_image_annoyed1', 'character_image_annoyed2']; const randomAnnoyedIndex = Math.floor(Math.random() * annoyedImages.length); this.characterSprite.setTexture(annoyedImages[randomAnnoyedIndex]); break; case 'THOUGHTFUL': const thoughtfulImages = ['character_image_thoughtful1', 'character_image_thoughtful2']; const randomThoughtfulIndex = Math.floor(Math.random() * thoughtfulImages.length); this.characterSprite.setTexture(thoughtfulImages[randomThoughtfulIndex]); break; default: console.log('Invalid mood provided. Reverting to default character image.'); this.characterSprite.setTexture('character_image'); break; } } createSceneElements() { // Background image setup let backgroundImage = this.textures.get('background_image').getSourceImage(); let backgroundWidth = backgroundImage.width; let backgroundHeight = backgroundImage.height; let backgroundScaleFactorWidth = 800 / backgroundWidth; let backgroundScaledHeight = backgroundHeight * backgroundScaleFactorWidth; let backgroundScaleFactor = backgroundScaleFactorWidth; if (backgroundScaledHeight < 600) { let backgroundScaleFactorHeight = 600 / backgroundHeight; backgroundScaleFactor = backgroundScaleFactorHeight; } let backgroundScaledWidth = backgroundWidth * backgroundScaleFactor; let backgroundXOffset = (800 - backgroundScaledWidth) / 2; let backgroundSprite = this.add.image(backgroundXOffset, 0, 'background_image') .setOrigin(0, 0) .setDepth(-10) .setInteractive() .setDisplaySize(backgroundScaledWidth, 600); // Ensure the height matches the screen height, potentially cutting off sides // Character image setup let characterImage = this.textures.get('character_image').getSourceImage(); let characterWidth = characterImage.width; let characterHeight = characterImage.height; let characterScaleFactor = 550 / characterHeight; // Adjusted to scale based on height let characterScaledWidth = characterWidth * characterScaleFactor; // Positioning character image near the right of the screen let characterXOffset = 900 - characterScaledWidth - 30; // 10 pixels padding from the right edge this.characterSprite = this.add.image(characterXOffset, (600 - 450) / 2, 'character_image') .setOrigin(0, 0) .setDepth(11) // Ensuring it appears above the background .setInteractive() .setDisplaySize(characterScaledWidth, 550); // Height set to 550, width adjusted to maintain aspect ratio // Other scene elements this.vignette = this.add.image(0, 0, 'info_screen_vignette').setOrigin(0, 0).setDepth(12).setInteractive(); createMuteToggleButton(this); createDeleteSaveButton(this); this.chatMenu = new ChatMenu(this, backgroundSprite, 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, chatScene ) { this.scene = scene; this.chatScene = chatScene; // 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. if (!document.getElementById('chatLogContent').innerHTML.trim()) { this.getInitialGreeting(); // Temporarily disable input, send goal message, and greeting message from character. this.saveGameState(); this.waitingForResponse = false; // Reset the state } }); } injectCSS() { const styleExists = document.getElementById('rotateImageStyle'); if (!styleExists) { const style = document.createElement('style'); style.id = 'rotateImageStyle'; style.type = 'text/css'; style.innerHTML = ` .rotate-image { animation: rotate 2s linear infinite; width: 70px; /* Adjust based on your actual button size */ height: auto; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`; document.getElementsByTagName('head')[0].appendChild(style); } } async createChatUI() { this.injectCSS(); // Inject the CSS for rotation // Base style remains the same const baseStyle = ` font-family: 'Verdana', sans-serif; font-size: 16px; color: #FFF; // Original color set to black border-style: solid; border-color: #2F4152; background-color: rgba(48, 50, 54, 0.75); box-sizing: border-box; `; const chatLogStyle = ` ${baseStyle} width: 390px; /* Match game width */ height: 415px; border-radius: 30px 30px 0px 0px; padding: 10px 30px; overflow-y: auto; box-sizing: border-box; border-width: 1px 1px 0px 1px; `; // Style for input and send button container const inputSubmitContainerStyle = ` display: flex; width: 390px; /* Match game width */ justify-content: space-between; /* Distribute space between input and button */ `; // Adjusted styles for input and button to fit within container const inputStyle = ` ${baseStyle} flex-grow: 1; height: 60px; padding: 10px; border-width: 1px 0px 1px 1px; border-radius: 0px 0px 0px 0px; `; const sendButtonStyle = ` ${baseStyle} display: flex; /* Use flexbox for alignment */ justify-content: center; /* Center content horizontally */ align-items: center; /* Center content vertically */ width: 75px; /* Adjust based on visual preference */ height: 60px; padding: 10px; border-width: 1px 1px 1px 1px; cursor: pointer; /* Change cursor to pointer to indicate it's clickable */ overflow: hidden; /* Prevent content from spilling outside the button */ border-radius: 0px 0px 30px 0px; `; const chatLogContentStyle = ` direction: ltr; display: inline-block; width: 100%; `; // Parent container for chat log and controls, justified at the bottom const chatContainerStyle = ` display: flex; flex-direction: column; justify-content: flex-end; width: 390px; /* Match game width */ height: 844px; /* Full height to allow justification to the bottom */ position: absolute; bottom: 0; /* Align to the bottom of the game view */ `; // Creating the parent container for chat log and chat controls this.chatContainer = this.scene.add.dom(0, 0).createFromHTML(`

`); // Adjust positioning based on your layout needs. Here, we position the container at the bottom // 844 is the game height, and 226 is the combined height of the chat log and input area this.chatContainer.setPosition(30, 565); // 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', "Hi."); // Assume getCharacterResponse() is an async operation const characterResponse = await this.characterChatManager.getCharacterResponse('mistral'); this.characterChatManager.addMessage('assistant', characterResponse); const { cleanedText, mood } = detectAndRemoveMood(characterResponse); this.chatScene.updateCharacterImage(mood); // Update the character image based on the detected mood this.characterChatManager.addMessage('assistant', cleanedText); this.updateChatLog(CHARACTER_NAME, cleanedText, 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 }); // Process the characterResponse to remove the mood string const { cleanedText, mood } = detectAndRemoveMood(characterResponse); this.chatScene.updateCharacterImage(mood); // Update the character image based on the detected mood this.characterChatManager.addMessage('assistant', cleanedText); this.updateChatLog(CHARACTER_NAME, cleanedText, async () => { this.saveGameState(); { // Revert the send button back to its original state sendButton.innerHTML = 'SEND'; sendButton.disabled = false; } }); } } updateChatLog(speaker, message, onComplete) { this.waitingForResponse = true; // Set the flag to true when an update starts const chatLogContentDiv = document.getElementById('chatLogContent'); let newMessageElement = document.createElement('p'); newMessageElement.innerHTML = `${speaker}: `; // Initially set to just the speaker's name chatLogContentDiv.appendChild(newMessageElement); if (speaker === 'Player') { newMessageElement.innerHTML += message; // Append the message instantly for the player this.waitingForResponse = false; // Reset the flag immediately for player messages onComplete?.(); } else { // For system and character messages, simulate typing effect let i = 0; const interval = setInterval(() => { if (i < message.length) { newMessageElement.innerHTML += message[i]; // Append the message character by character i++; // Scroll to the latest character const chatLogDiv = document.getElementById('chatLog'); chatLogDiv.scrollTop = chatLogDiv.scrollHeight; } else { clearInterval(interval); this.waitingForResponse = false; // Reset the flag when the message has been fully added onComplete?.(); } }, 10); // Adjust the speed as necessary } // Ensure the chat log scrolls to the bottom initially after a new message is started const chatLogDiv = document.getElementById('chatLog'); chatLogDiv.scrollTop = chatLogDiv.scrollHeight; } saveGameState() { console.info('Saving game.'); const saveData = localStorage.getItem(PROJECT_NAME); let parsedSaveData = saveData ? JSON.parse(saveData) : {}; // Get the current chat log content const chatLogContent = document.getElementById('chatLogContent').innerHTML; // Serialize the character-specific ChatManager's state if (this.characterChatManager) { const characterChatManagerState = JSON.stringify(this.characterChatManager); // Update the specific character's chat manager state in the saved data parsedSaveData.characterChatManagerState = characterChatManagerState; } // Update the game save data with the current chat log and love bar level parsedSaveData.chatLog = chatLogContent; // Save the updated game state to localStorage localStorage.setItem(PROJECT_NAME, JSON.stringify(parsedSaveData)); console.info('Game state saved.'); } loadSavedChat() { const saveData = localStorage.getItem(PROJECT_NAME); if (!saveData) { console.error('No save data found.'); } const parsedSaveData = JSON.parse(saveData); // Deserialize and apply the character's ChatManager state if it exists if (parsedSaveData.characterChatManagerState) { const characterChatManagerState = JSON.parse( parsedSaveData.characterChatManagerState, ); Object.assign(this.characterChatManager, characterChatManagerState); } // Load the chat log if (parsedSaveData.chatLog) { document.getElementById('chatLogContent').innerHTML = parsedSaveData.chatLog; console.info(`CHATLOG STATE LOADED: \n\n${parsedSaveData.chatLog}`); } else { console.warn('Chatlog content is missing from save.'); } console.info('Game state loaded.'); } } function detectAndRemoveMood(text) { const moodRegex = /_(HAPPY|THOUGHTFUL|ANNOYED)_$/; const match = text.match(moodRegex); if (match) { const mood = match[1]; const cleanedText = text.replace(moodRegex, ''); console.log("Cleaned text:", cleanedText); // Output: "Hello, how are you?" console.log("Detected mood:", mood); // Output: "HAPPY" return { cleanedText, mood }; } return { cleanedText: text, mood: null }; } function createMuteToggleButton(scene) { let isMusicPlaying = scene.game.musicManager.currentTrack && scene.game.musicManager.currentTrack.isPlaying; let buttonTexture = 'music_on'; let muteButton = scene.add.image(30, 40, buttonTexture).setOrigin(0, 0).setInteractive(); muteButton.setDepth(1000); // Ensure it's above other elements let lastToggleTime = 0; const toggleDelay = 500; // 500 milliseconds delay muteButton.on('pointerdown', () => { const currentTime = Date.now(); if (currentTime - lastToggleTime < toggleDelay) { // If the button is pressed again too quickly, don't do anything return; } lastToggleTime = currentTime; // Toggle the music state scene.game.musicManager.toggleMusic(); isMusicPlaying = scene.game.musicManager.currentTrack && scene.game.musicManager.currentTrack.isPlaying; muteButton.setTexture(isMusicPlaying ? 'music_on' : 'music_off'); }); return muteButton; // Return the mute button for further use } function createDeleteSaveButton(scene) { let deleteButton = scene.add.image(90, 40, 'restart').setOrigin(0, 0).setScale(0.90).setInteractive(); deleteButton.setDepth(1000); // 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 = 'v1'; // Set the version number here. const PROJECT_NAME = `${CHARACTER_NAME} AI Character ${VERSION_NUMBER}`; function initializeGame() { const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, 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();