////////////////////////////////////////////////////////////// const EASY_MODIFY_CHARACTER_MANAGERS = []; const EASY_MODIFY_CHARACTER_NAMES = []; const EASY_MODIFY_CHARACTER_VIDEOS = []; const BACKGROUND_VIDEO = 'https://play.rosebud.ai/assets/frankensteingif.mp4?2rV0' // Add this to the top of your file, after other constant declarations const DIALOGUE_OPTIONS = { "The Monster": [ "Ask about the monster's creation", "Discuss the theme of isolation", "Explore the monster's relationship with Victor", "Inquire about the monster's view on humanity" ], "Victor Frankenstein": [ "Question Victor's motivations", "Discuss the ethics of creating life", "Ask about Victor's family", "Explore Victor's regrets" ], "Mary Shelley": [ "Inquire about the inspiration for Frankenstein", "Discuss the novel's themes", "Ask about the writing process", "Explore the impact of Frankenstein on literature" ] }; const CHARACTER_NAME1 = "The Monster"; const CHARACTER_DESCRIPTION1 = ` You are the Monster, a being created by Victor Frankenstein, embodying the literary device of the "Other" or the outsider. Your goal is to engage the player by asking questions about symbolism and themes in Frankenstein. Address the player directly and ask them questions and keep your dialogue. Interaction style: - Ask the player to identify symbols associated with your character in the novel. - Prompt the player to consider how your actions and motivations drive the plot forward. - Encourage the player to reflect on the Gothic elements present in your scenes. - Discuss the use of nature imagery in relation to your character's experiences. First Message: "Greetings, literary explorer. I am the creation that haunts the pages of Frankenstein. How do you think my character serves as a symbol in the novel? What themes do you believe my existence brings to the forefront of the story?" NOTE: Always end your responses with a question about literary devices or themes to keep the player engaged in literary analysis. Address the player directly in your responses. `; const CHARACTER1_MANAGER = new ChatManager(CHARACTER_DESCRIPTION1); EASY_MODIFY_CHARACTER_MANAGERS.push(CHARACTER1_MANAGER); EASY_MODIFY_CHARACTER_NAMES.push(CHARACTER_NAME1); EASY_MODIFY_CHARACTER_VIDEOS.push({ name: `character_image1`, url: `https://play.rosebud.ai/assets/FRANKENSTEIN ROSESBUD (3) (1).mp4?6ZH2`, x: 0, y: 100, scaleX: .9, scaleY: .9 }); const CHARACTER_NAME2 = "Victor Frankenstein"; const CHARACTER_DESCRIPTION2 = ` You are Victor Frankenstein, the protagonist and narrator of the story, representing the archetypal mad scientist. Your goal is to engage the player by asking questions about the narrative structure and character development in the novel. Keep your answers and questions short. Interaction style: - Ask the player to identify instances of dramatic irony in your story. - Encourage the player to examine how your character evolves throughout the novel. - Prompt discussions about the moral implications of your actions and how they relate to the theme of responsibility. - Explore the use of setting and atmosphere in creating tension in the story. First Message: "Welcome, astute reader. I am Victor Frankenstein, the narrator of this cautionary tale. How do you think the framed narrative structure affects the telling of my story? What literary devices do you notice in the way I recount my fateful experiment?" NOTE: Always conclude your responses with a question about narrative techniques or character analysis to foster ongoing literary discussion. `; const CHARACTER2_MANAGER = new ChatManager(CHARACTER_DESCRIPTION2); EASY_MODIFY_CHARACTER_MANAGERS.push(CHARACTER2_MANAGER); EASY_MODIFY_CHARACTER_NAMES.push(CHARACTER_NAME2); EASY_MODIFY_CHARACTER_VIDEOS.push({ name: `character_image2`, url: `https://play.rosebud.ai/assets/Frankensteinvideovic.mp4?Udr4`, x: -200, y: 0, scaleX: 1.35, scaleY: 1.35 }); const CHARACTER_NAME3 = "Mary Shelley"; const CHARACTER_DESCRIPTION3 = ` As Mary Shelley, the author of Frankenstein, your goal is to guide the player through an analysis of the novel's literary techniques and their significance. Interaction style: - Ask the player to identify and interpret various motifs in the novel, such as light and darkness. - Encourage analysis of the novel's structure and how it contributes to the overall themes. - Prompt discussions about the use of juxtaposition in character relationships. - Explore the significance of setting in different parts of the novel. First Message: "Greetings, literary enthusiast. I am Mary Shelley, the architect of Frankenstein. How do you interpret the use of the frame narrative in my novel? What effect do you think the epistolary format has on the reader's experience?" NOTE: Always conclude your responses with a thought-provoking question about literary techniques or thematic elements to encourage deeper analysis from the player.(Ensure your responses are short so the player can respond.) `; const CHARACTER3_MANAGER = new ChatManager(CHARACTER_DESCRIPTION3); EASY_MODIFY_CHARACTER_MANAGERS.push(CHARACTER3_MANAGER); EASY_MODIFY_CHARACTER_NAMES.push(CHARACTER_NAME3); EASY_MODIFY_CHARACTER_VIDEOS.push({ name: `character_image3`, url: `https://play.rosebud.ai/assets/FRANKENSTEIN ROSESBUD (2) (1).mp4?BCby`, x: -250, y: 0, scaleX: 1.25, scaleY: 1.35 }); const INTRODUCTORY_MESSAGE = `${EASY_MODIFY_CHARACTER_NAMES.map((name, index) => `${index + 1}. ${name}`).join(', ')} find themselves in a room together.`; // Put URLs of all songs you want to be shuffled in this games's playlist. const SONG_PLAYLIST_URLS = [ //``https://play.rosebud.ai/assets/StockTune-Whispers In The Shadows_1722610632.mp3?iLH5`, `https://play.rosebud.ai/assets/StockTune-Whispers In The Shadows_1722610632.mp3?iLH5`, `https://play.rosebud.ai/assets/StockTune-Whispers In The Shadows_1722610632.mp3?iLH5`, ]; ////////////////////////////////////////////////////////////// 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)); } } } 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.3, 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() { this.load.video('background_video', BACKGROUND_VIDEO, 'loadeddata', true, true); // Preload character videos based on the EASY_MODIFY_CHARACTER_VIDEOS array for (let i = 0; i < EASY_MODIFY_CHARACTER_VIDEOS.length; i++) { const characterVideoData = EASY_MODIFY_CHARACTER_VIDEOS[i]; this.load.video(characterVideoData.name, characterVideoData.url, 'loadeddata', true, true); } this.characterVideos = EASY_MODIFY_CHARACTER_VIDEOS; this.load.image('info_screen_vignette', `https://play.rosebud.ai/assets/vignette_desktop.png.png?XsqC`); this.load.image('music_off', `https://play.rosebud.ai/assets/audio_muted_icon.png.png?bEpC`); this.load.image('music_on', `https://play.rosebud.ai/assets/audio_playing_icon.png.png?s14F`); this.load.image('restart', `https://play.rosebud.ai/assets/restart_loop_icon.png.png?RzEU`); } 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."); } createSceneElements() { const video = this.add.video(0, 0, 'background_video'); video.setOrigin(0, 0); // Calculate the scale to cover the entire screen const scaleX = this.sys.game.config.width / video.width; const scaleY = this.sys.game.config.height / video.height; const scale = Math.max(scaleX, scaleY); // Set the video's display size to cover the entire game screen video.setDisplaySize(this.sys.game.config.width, this.sys.game.config.height); // Start playing the video video.play(true); // The 'true' parameter makes the video loop this.currentCharacterIndex = 0; let currentCharacterData = this.characterVideos[this.currentCharacterIndex]; this.characterSprite = this.add.video(currentCharacterData.x, currentCharacterData.y, currentCharacterData.name) .setOrigin(0, 0) .setDepth(11) // Ensuring it appears above the background .setInteractive() //.setScale(currentCharacterData.scaleX, currentCharacterData.scaleY); // Start playing the video this.characterSprite.play(true); // The 'true' parameter makes the video loop // 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); // Force game resize event to fix clicking on Safari mobile devices this.scale.resize(this.scale.gameSize._width, this.scale.gameSize._height); } getNextCharacterVideo() { return this.characterVideos[this.currentCharacterIndex]; } transitionCharacter() { return new Promise((resolve) => { this.tweens.add({ targets: this.characterSprite, x: 1000, y: this.characterSprite.y, duration: 1000, ease: 'Power2', onComplete: () => { let nextCharacterData = this.characterVideos[this.currentCharacterIndex]; this.characterSprite.stop(); this.characterSprite.destroy(); this.characterSprite = this.add.video(nextCharacterData.x, nextCharacterData.y, nextCharacterData.name) .setOrigin(0, 0) .setDepth(11) .setInteractive() .setScale(nextCharacterData.scaleX, nextCharacterData.scaleY); this.characterSprite.play(true); this.characterSprite.x = -this.characterSprite.displayWidth; // Move the sprite off-screen to the left this.tweens.add({ targets: this.characterSprite, x: nextCharacterData.x, // The sprite should tween to the new character's x position y: this.characterSprite.y, // Keep the same y position duration: 1000, ease: 'Power2' }); resolve(); // Resolve the Promise when the animation is complete } }); }); } } // ChatManager is already imported in the current scope. class ChatMenu { constructor(scene, characterSprite) { this.scene = scene; this.isChatWindowMinimized = false; this.characterManagers = EASY_MODIFY_CHARACTER_MANAGERS; this.characterNames = EASY_MODIFY_CHARACTER_NAMES; this.currentCharacterIndex = 0; this.currentCharacter = this.characterManagers[this.currentCharacterIndex]; this.currentCharacterName = this.characterNames[this.currentCharacterIndex]; this.chatHistory = [INTRODUCTORY_MESSAGE]; // Initialize chatHistory with the combined message 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%; word-wrap: break-word; /* Add this line to enable advanced word wrapping */ `; // 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'); const windowSizeButton = this.chatContainer.node.querySelector('#windowSizeButton'); chatInput.addEventListener('keyup', (event) => { if ((event.key === 'Enter' || event.keyCode === 13) && !this.waitingForResponse) { this.sendChatMessage(this.currentCharacter); } }); sendButton.addEventListener('click', () => { this.sendChatMessage(this.currentCharacter); }); // Create the swap button and dropdown this.createSwapButton(this.scene, this); this.createInteractButton(this.scene, this); this.createHistoryButton(this.scene, this); this.createCycleButton(this.scene, this); } createSwapButton(scene, chatMenu) { // Create a rounded rectangle for the SWAP button this.swapButtonRoundedRect = scene.add.graphics(); this.swapButtonRoundedRect.fillStyle(0xFFD700, 1); // Set the fill color to gold this.swapButtonRoundedRect.fillRoundedRect(125, 40, 100, 40, 20); // Create a rounded rectangle with a radius of 20 pixels this.swapButtonRoundedRect.setVisible(true); // Set the rounded rectangle to initially visible this.swapButtonRoundedRect.setDepth(1000); // Set the rounded rectangle to initially visible // Add the SWAP text on top of the rounded rectangle this.swapButton = scene.add.text(150, 50, 'SWAP', { fill: '#000000' // Set the text color to black }).setOrigin(0, 0).setInteractive().setDepth(1000); this.swapDropdown = scene.add.dom(600, 50).createFromHTML(` `); this.swapDropdown.setVisible(false); // Set swapDropdown to initially hidden // Create a rounded rectangle for the GO button this.swapGoButtonRoundedRect = scene.add.graphics(); this.swapGoButtonRoundedRect.fillStyle(0xFFD700, 1); // Set the fill color to gold this.swapGoButtonRoundedRect.fillRoundedRect(675, 30, 60, 40, 20); // Create a rounded rectangle with a radius of 20 pixels this.swapGoButtonRoundedRect.setVisible(false); // Set the rounded rectangle to initially invisible this.swapGoButtonRoundedRect.setDepth(1000); // Add the GO text on top of the rounded rectangle this.swapGoButton = scene.add.text(695, 40, 'GO', { fill: '#000000' // Set the text color to black }).setOrigin(0, 0).setInteractive(); this.swapGoButton.setVisible(false); // Set swapGoButton to initially hidden this.swapGoButton.setDepth(1000); // Ensure it's above other elements this.swapButton.setDepth(1000); // Ensure it's above other elements this.swapButton.on('pointerdown', () => { this.swapDropdown.setVisible(!this.swapDropdown.visible); this.swapGoButton.setVisible(!this.swapGoButton.visible); this.swapGoButtonRoundedRect.setVisible(!this.swapGoButtonRoundedRect.visible); // Hide the interact button contents when the swap button contents are shown this.interactDropdown1.setVisible(false); this.interactWithText.setVisible(false); this.interactDropdown2.setVisible(false); this.interactGoButton.setVisible(false); this.interactWithTextRoundedRect.setVisible(false); this.interactGoButtonRoundedRect.setVisible(false); }); this.swapGoButton.on('pointerdown', async () => { const selectedIndex = parseInt(this.swapDropdown.getChildByID('swapDropdown').value, 10); if (isNaN(selectedIndex)) { console.error('Invalid character index selected'); return; } this.swapDropdown.setVisible(false); this.swapGoButton.setVisible(false); this.swapGoButtonRoundedRect.setVisible(false); const selectedCharacterManager = chatMenu.characterManagers[selectedIndex]; const selectedCharacterName = chatMenu.characterNames[selectedIndex]; // Clear the chat history before adding a new message selectedCharacterManager.cleanChatHistory(); chatMenu.chatHistory.forEach(message => { selectedCharacterManager.addMessage('user', message); }); selectedCharacterManager.addMessage('user', 'Swapping to ' + selectedCharacterName); selectedCharacterManager.addMessage('assistant', selectedCharacterName + ': '); // Swap to the selected character chatMenu.currentCharacterIndex = selectedIndex; chatMenu.currentCharacter = selectedCharacterManager; chatMenu.currentCharacterName = selectedCharacterName; // Pass the ChatScene instance and the ChatMenu instance to the swapCharacter function swapCharacter(scene, chatMenu, selectedIndex); const characterResponse = await chatMenu.currentCharacter.getCharacterResponse('chat'); await new Promise((resolve) => { chatMenu.updateChatLog(chatMenu.currentCharacterName, characterResponse, resolve); }); // Save the game state after getting the response chatMenu.saveGameState(); }); } createInteractButton(scene, chatMenu) { // Create a rounded rectangle for the Interact button this.interactButtonRoundedRect = scene.add.graphics(); this.interactButtonRoundedRect.fillStyle(0xFFD700, 1); // Set the fill color to gold this.interactButtonRoundedRect.fillRoundedRect(230, 40, 120, 40, 20); // Create a rounded rectangle with a radius of 20 pixels this.interactButtonRoundedRect.setVisible(true); // Set the rounded rectangle to initially visible this.interactButtonRoundedRect.setDepth(1000); // Create the "Interact" button this.interactButton = scene.add.text(250, 50, 'Interact', { fill: '#000000' // Set the text color to black }).setOrigin(0, 0).setInteractive(); this.interactButton.setDepth(1000); // Ensure it's above other elements // Create two dropdown menus for character selection this.interactDropdown1 = scene.add.dom(500, 50).createFromHTML(` `); this.interactDropdown1.setVisible(false); // Set interactDropdown1 to initially hidden // Create a rounded rectangle for the 'With' text this.interactWithTextRoundedRect = scene.add.graphics(); this.interactWithTextRoundedRect.fillStyle(0xFFD700, 1); // Set the fill color to gold this.interactWithTextRoundedRect.fillRoundedRect(575, 30, 50, 30, 15); // Create a rounded rectangle with a radius of 15 pixels this.interactWithTextRoundedRect.setVisible(false); // Set the rounded rectangle to initially invisible this.interactWithTextRoundedRect.setDepth(1000); // Add text between the dropdowns this.interactWithText = scene.add.text(580, 35, 'With', { fill: '#000000' // Set the text color to black }).setOrigin(0, 0).setDepth(99); this.interactWithText.setVisible(false); this.interactWithText.setDepth(1000); // Set interactWithText to initially hidden this.interactDropdown2 = scene.add.dom(700, 50).createFromHTML(` `); this.interactDropdown2.setVisible(false); // Set interactDropdown2 to initially hidden // Create a rounded rectangle for the Go button this.interactGoButtonRoundedRect = scene.add.graphics(); this.interactGoButtonRoundedRect.fillStyle(0xFFD700, 1); // Set the fill color to gold this.interactGoButtonRoundedRect.fillRoundedRect(705, 65, 60, 40, 20); // Create a rounded rectangle with a radius of 20 pixels this.interactGoButtonRoundedRect.setVisible(false); // Set the rounded rectangle to initially invisible // Create the "Go" button this.interactGoButton = scene.add.text(725, 75, 'Go', { fill: '#000000' // Set the text color to black }).setOrigin(0, 0).setInteractive().setDepth(99); this.interactGoButton.setVisible(false); // Set interactGoButton to initially hidden // Function to handle dropdown change and set conflicting options invisible const handleDropdownChange = () => { const selectedOption1 = this.interactDropdown1.getChildByID('dropdown1').value; let selectedOption2 = this.interactDropdown2.getChildByID('dropdown2').value; // Set the conflicting option invisible in the second dropdown const options2 = this.interactDropdown2.getChildByID('dropdown2').children; // If the selected option in the first dropdown is already present in the second dropdown if (options2[selectedOption2].value === selectedOption1) { // Find the next available option in the second dropdown let nextAvailableIndex = (parseInt(selectedOption2) + 1) % options2.length; while (options2[nextAvailableIndex].value === selectedOption1) { nextAvailableIndex = (nextAvailableIndex + 1) % options2.length; } selectedOption2 = nextAvailableIndex.toString(); this.interactDropdown2.getChildByID('dropdown2').value = selectedOption2; } // Set the conflicting option invisible in the first dropdown const options1 = this.interactDropdown1.getChildByID('dropdown1').children; // If the selected option in the second dropdown is already present in the first dropdown if (options1[selectedOption1].value === selectedOption2) { // Find the next available option in the first dropdown let nextAvailableIndex = (parseInt(selectedOption1) + 1) % options1.length; while (options1[nextAvailableIndex].value === selectedOption2) { nextAvailableIndex = (nextAvailableIndex + 1) % options1.length; } selectedOption1 = nextAvailableIndex.toString(); this.interactDropdown1.getChildByID('dropdown1').value = selectedOption1; } for (let i = 0; i < options2.length; i++) { options2[i].style.display = options2[i].value === selectedOption2 ? 'none' : 'block'; } for (let i = 0; i < options1.length; i++) { options1[i].style.display = options1[i].value === selectedOption1 ? 'none' : 'block'; } }; // Add event listeners for dropdown changes this.interactDropdown1.getChildByID('dropdown1').addEventListener('change', handleDropdownChange); this.interactDropdown2.getChildByID('dropdown2').addEventListener('change', handleDropdownChange); this.interactGoButton.on('pointerdown', async () => { console.log('Dropdown 1 Value: ', this.interactDropdown1.getChildByID('dropdown1').value); // console log for dropdown1 value console.log('Dropdown 2 Value: ', this.interactDropdown2.getChildByID('dropdown2').value); // console log for dropdown2 value const selectedCharacter1Index = parseInt(this.interactDropdown1.getChildByID('dropdown1').value, 10); // Add the radix parameter const selectedCharacter2Index = parseInt(this.interactDropdown2.getChildByID('dropdown2').value, 10); // Add the radix parameter console.log('selectedCharacter1Index: ', selectedCharacter1Index); console.log('selectedCharacter2Index: ', selectedCharacter2Index); // Check if the selected indices are valid if (isNaN(selectedCharacter1Index) || isNaN(selectedCharacter2Index)) { console.error('Invalid character indices selected'); return; } // Perform interaction between the selected characters const character1Manager = this.characterManagers[selectedCharacter1Index]; const character2Manager = this.characterManagers[selectedCharacter2Index]; const selectedCharacter1Name = this.characterNames[selectedCharacter1Index]; const selectedCharacter2Name = this.characterNames[selectedCharacter2Index]; // Hide the dropdown menus, "With" text, and "Go" button until the interaction is finished this.interactDropdown1.setVisible(false); this.interactDropdown2.setVisible(false); this.interactWithText.setVisible(false); this.interactGoButton.setVisible(false); this.cycleButton.setVisible(false); this.cycleButtonRoundedRect.setVisible(false); this.swapButton.setVisible(false); this.swapButtonRoundedRect.setVisible(false); this.interactButton.setVisible(false); this.interactButtonRoundedRect.setVisible(false); this.interactWithTextRoundedRect.setVisible(false); this.interactGoButtonRoundedRect.setVisible(false); // Clear the chat history before adding a new message character1Manager.cleanChatHistory(); this.chatHistory.forEach(message => { character1Manager.addMessage('user', message); }); character1Manager.addMessage('user', 'You are interacting with ' + selectedCharacter2Name); character1Manager.addMessage('assistant', selectedCharacter1Name + ': '); // Swap to the first character this.currentCharacterIndex = selectedCharacter1Index; this.currentCharacter = character1Manager; this.currentCharacterName = selectedCharacter1Name; swapCharacter(scene, chatMenu, selectedCharacter1Index); // Swap the character image const character1Response = await this.currentCharacter.getCharacterResponse('chat'); await new Promise((resolve) => { this.updateChatLog(this.currentCharacterName, character1Response, resolve); }); // Save the game state after getting the response this.saveGameState(); // Clear the chat history before adding a new message character2Manager.cleanChatHistory(); this.chatHistory.forEach(message => { character2Manager.addMessage('user', message); }); // Add a message to both character managers character2Manager.addMessage('user', 'You are interacting with ' + selectedCharacter1Name); character2Manager.addMessage('assistant', selectedCharacter2Name + ': '); // Swap to the second character and get a response this.currentCharacterIndex = selectedCharacter2Index; this.currentCharacter = character2Manager; this.currentCharacterName = selectedCharacter2Name; swapCharacter(scene, chatMenu, selectedCharacter2Index); // Swap the character image const character2Response = await chatMenu.currentCharacter.getCharacterResponse('chat'); character2Manager.addMessage('assistant', character2Response); character1Manager.addMessage('assistant', selectedCharacter2Name + `: ` + character2Response); // Wait for the updateChatLog to resolve before proceeding await new Promise((resolve) => { this.updateChatLog(this.currentCharacterName, character2Response, resolve); }); // Save the game state after getting the response this.saveGameState(); // Show the dropdown menus, "With" text, and "Go" button after the interaction is finished this.interactDropdown1.setVisible(true); this.interactDropdown2.setVisible(true); this.interactWithText.setVisible(true); this.interactGoButton.setVisible(true); this.cycleButton.setVisible(true); this.cycleButtonRoundedRect.setVisible(true); this.swapButton.setVisible(true); this.swapButtonRoundedRect.setVisible(true); this.interactButton.setVisible(true); this.interactButtonRoundedRect.setVisible(true); this.interactWithTextRoundedRect.setVisible(true); this.interactGoButtonRoundedRect.setVisible(true); }); // Show/hide the dropdown menus and "Go" button on button click this.interactButton.on('pointerdown', () => { this.interactDropdown1.setVisible(!this.interactDropdown1.visible); this.interactDropdown2.setVisible(!this.interactDropdown2.visible); this.interactWithText.setVisible(!this.interactWithText.visible); this.interactGoButton.setVisible(!this.interactGoButton.visible); this.interactWithTextRoundedRect.setVisible(!this.interactWithTextRoundedRect.visible); this.interactGoButtonRoundedRect.setVisible(!this.interactGoButtonRoundedRect.visible); // Hide the swap button contents when the interact button contents are shown this.swapDropdown.setVisible(false); this.swapGoButton.setVisible(false); this.swapGoButtonRoundedRect.setVisible(false); }); } createCycleButton(scene, chatMenu) { // Create a rounded rectangle for the CYCLE button this.cycleButtonRoundedRect = scene.add.graphics(); this.cycleButtonRoundedRect.fillStyle(0xFFD700, 1); // Set the fill color to gold this.cycleButtonRoundedRect.fillRoundedRect(355, 40, 70, 40, 20); // Create a rounded rectangle with a radius of 20 pixels this.cycleButton = scene.add.text(365, 50, 'CYCLE', { fill: '#000000' // Set the text color to black }).setOrigin(0, 0).setInteractive(); let isCycleButtonClicked = false; this.cycleButton.setDepth(1000); // Ensure it's above other elements this.cycleButtonRoundedRect.setDepth(1000); // Ensure it's above other elements let currentCharacterIndex = 0; let isFirstClick = true; let cycleTimeout; this.cycleButton.on('pointerdown', async () => { if (!isCycleButtonClicked) { isCycleButtonClicked = true; this.cycleButton.setText('STOP CYCLE'); this.cycleButtonRoundedRect.clear(); this.cycleButtonRoundedRect.fillStyle(0xFFD700, 1); this.cycleButtonRoundedRect.fillRoundedRect(360, 40,this.cycleButton.width + 10, 40, 20); // Set visibility of swap and interact elements to false this.swapDropdown.setVisible(false); this.swapGoButton.setVisible(false); this.swapGoButtonRoundedRect.setVisible(false); this.interactDropdown1.setVisible(false); this.interactWithText.setVisible(false); this.interactDropdown2.setVisible(false); this.interactGoButton.setVisible(false); this.interactWithTextRoundedRect.setVisible(false); this.interactGoButtonRoundedRect.setVisible(false); // Set visibility of swapButtonRoundedRect and interactButtonRoundedRect to false this.swapButtonRoundedRect.setVisible(false); this.swapButton.setVisible(false); this.interactButtonRoundedRect.setVisible(false); this.interactButton.setVisible(false); } else { isCycleButtonClicked = false; this.cycleButton.setText('CYCLE'); this.cycleButtonRoundedRect.clear(); this.cycleButtonRoundedRect.fillStyle(0xFFD700, 1); this.cycleButtonRoundedRect.fillRoundedRect(355, 40,this.cycleButton.width + 10, 40, 20); clearTimeout(cycleTimeout); // Set visibility of swapButtonRoundedRect and interactButtonRoundedRect to true this.swapButtonRoundedRect.setVisible(true); this.swapButton.setVisible(true); this.interactButtonRoundedRect.setVisible(true); this.interactButton.setVisible(true); } if (isFirstClick) { isFirstClick = false; await handleCycleClick(); } else { clearTimeout(cycleTimeout); // Clear any existing timeout await handleCycleClick(); } async function handleCycleClick() { if (!isCycleButtonClicked) { clearTimeout(cycleTimeout); return; } const currentCharacterManager = chatMenu.characterManagers[currentCharacterIndex]; const currentCharacterName = chatMenu.characterNames[currentCharacterIndex]; // Clear the chat history before adding a new message currentCharacterManager.cleanChatHistory(); chatMenu.chatHistory.forEach(message => { currentCharacterManager.addMessage('user', message); }); currentCharacterManager.addMessage('assistant', currentCharacterName + ': '); // Swap to the current character chatMenu.currentCharacterIndex = currentCharacterIndex; chatMenu.currentCharacter = currentCharacterManager; chatMenu.currentCharacterName = currentCharacterName; swapCharacter(scene, chatMenu, currentCharacterIndex); // Swap the character image const characterResponse = await chatMenu.currentCharacter.getCharacterResponse('chat'); await new Promise((resolve) => { chatMenu.updateChatLog(chatMenu.currentCharacterName, characterResponse, resolve); }); // Move to the next character currentCharacterIndex = (currentCharacterIndex + 1) % chatMenu.characterManagers.length; // Set a timeout to continue cycling after 5 seconds cycleTimeout = setTimeout(handleCycleClick, 5000); } }); } createHistoryButton(scene, chatMenu) { // Create a rounded rectangle for the HISTORY button const historyButtonRoundedRect = scene.add.graphics(); //historyButtonRoundedRect.fillStyle(0xFFD700, 1); // Set the fill color to gold //historyButtonRoundedRect.fillRoundedRect(80, 40, 120, 40, 20); // Create a rounded rectangle with a radius of 20 pixels // Create the "History" button const historyButton = scene.add.text(100, 50, 'HISTORY', { fill: '#000000' // Set the text color to black }).setOrigin(0, 0).setInteractive(); historyButton.setVisible(false); // Set historyButton to initially hidden historyButton.setDepth(1000); // Ensure it's above other elements // Create a container for displaying the chat history const historyContainer = scene.add.dom(800, 200).createFromHTML(`

`); historyContainer.setVisible(false); // Set historyContainer to initially hidden // Function to update the history container with the chat history const updateHistoryContainer = () => { const historyContainerDiv = historyContainer.getChildByID('historyContainer'); historyContainerDiv.innerHTML = chatMenu.chatHistory.join('
'); }; // Update the history container initially updateHistoryContainer(); // Toggle the visibility of the history container when the "History" button is clicked historyButton.on('pointerdown', () => { historyContainer.setVisible(!historyContainer.visible); updateHistoryContainer(); // Update the history container after toggling visibility }); } async getInitialGreeting() { // Update button to show loading icon sendButton.innerHTML = '

'; sendButton.disabled = true; // Add a user message to all character managers this.characterManagers.forEach((manager, index) => { const message = index === 0 ? "Approaches You" : `Approaches ${this.characterNames[index]}`; manager.addMessage('user', message); }); this.currentCharacter.addMessage('user', "*Approaches you*"); this.currentCharacter.addMessage('assistant', `${this.characterNames[0]}: `); // Assume getCharacterResponse() is an async operation const characterResponse = await this.currentCharacter.getCharacterResponse('chat'); this.currentCharacter.addMessage('assistant', characterResponse); this.updateChatLog(this.currentCharacterName, 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; // Clear the chat history before adding a new message this.currentCharacter.cleanChatHistory(); this.chatHistory.forEach(message => { this.currentCharacter.addMessage('user', message); }); this.currentCharacter.addMessage('user', inputValue); this.currentCharacter.addMessage('assistant', this.currentCharacterName + ': '); this.updateChatLog('Player', inputValue); chatInput.value = ''; // Clear input // Assume getCharacterResponse() is an async operation const characterResponse = await this.currentCharacter.getCharacterResponse('chat'); ProgressLogger.logProgress('game-chat', { userMessage: inputValue, characterResponse: characterResponse }); this.currentCharacter.addMessage('assistant', characterResponse); this.updateChatLog(this.currentCharacterName, characterResponse, async () => { this.saveGameState(); // Revert the send button back to its original state sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } } updateChatLog(speaker, message, callback) { this.waitingForResponse = true; 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; callback && callback(); this.chatHistory.push(`${speaker}: ${message}`); // Add the player's message to the chatHistory } 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; callback && callback(); this.chatHistory.push(`${speaker}: ${message}`); // Add the character's message to the chatHistory } }, 30); // 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.currentCharacter) { const characterChatManagerState = JSON.stringify(this.currentCharacter); // 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 chat history parsedSaveData.chatLog = chatLogContent; parsedSaveData.chatHistory = this.chatHistory; // Add the chatHistory to the saved data // Save the updated game state to localStorage localStorage.setItem(PROJECT_NAME, JSON.stringify(parsedSaveData)); console.info('Game state saved.'); } loadSavedChat(isResetOrDeleteSave = false) { const saveData = localStorage.getItem(PROJECT_NAME); if (!saveData) { console.error('No save data found.'); return; } 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.currentCharacter, characterChatManagerState); } // Only load the chat log if the game is not being reset or the save is not being deleted if (!isResetOrDeleteSave && parsedSaveData.chatLog) { document.getElementById('chatLogContent').innerHTML = parsedSaveData.chatLog; console.info(`CHATLOG STATE LOADED: \n\n${parsedSaveData.chatLog}`); } else { console.warn('Skipping chat log load due to reset or delete save.'); } // Load the chat history if (parsedSaveData.chatHistory) { this.chatHistory = parsedSaveData.chatHistory; console.info(`CHAT HISTORY LOADED: \n\n${parsedSaveData.chatHistory.join('\n')}`); } else { console.warn('Chat history is missing from save.'); } console.info('Game state loaded.'); } toggleChatWindowSize() { const chatLog = this.chatContainer.node.querySelector('#chatLog'); if (this.isChatWindowMinimized) { chatLog.style.height = '415px'; this.isChatWindowMinimized = false; } else { chatLog.style.height = '100px'; // or set this to your desired minimized height this.isChatWindowMinimized = true; } } } function swapCharacter(chatScene, chatMenu, newIndex = null) { if (chatScene.isTransitioning) { // Check if a transition is happening console.log('Transition is ongoing, swapping character is not allowed'); return; } chatScene.isTransitioning = true; // Set the transition flag if (!chatMenu) { console.error('ChatMenu instance is not available.'); return; } const characterManagersLength = chatMenu.characterManagers.length; if (newIndex !== null) { chatScene.currentCharacterIndex = newIndex % characterManagersLength; } else { chatScene.currentCharacterIndex = (chatScene.currentCharacterIndex + 1) % characterManagersLength; } chatMenu.currentCharacterIndex = chatScene.currentCharacterIndex; // Update ChatMenu's index from ChatScene chatMenu.currentCharacter = chatMenu.characterManagers[chatMenu.currentCharacterIndex]; // Update the current character chatMenu.currentCharacterName = chatMenu.characterNames[chatMenu.currentCharacterIndex]; // Update the current character name chatScene.transitionCharacter().then(() => { chatScene.isTransitioning = false; // Reset the transition flag once the transition is complete }); } 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', () => { const saveData = localStorage.getItem(PROJECT_NAME); if (saveData) { const parsedSaveData = JSON.parse(saveData); parsedSaveData.chatLog = ''; // Clear the chatLog property localStorage.setItem(PROJECT_NAME, JSON.stringify(parsedSaveData)); } // Delete the save localStorage.removeItem(PROJECT_NAME); // Clear the chat log content document.getElementById('chatLogContent').innerHTML = ''; // Clear the chatHistory array in the ChatMenu instance scene.chatMenu.chatHistory = []; // Call loadSavedChat with isResetOrDeleteSave set to true scene.chatMenu.loadSavedChat(true); // Reset the game 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 } } 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); }); } // Create a hash of character names const CHARACTER_NAMES_HASH = EASY_MODIFY_CHARACTER_NAMES.join('').replace(/\s+/g, '').slice(0, 10); const VERSION_NUMBER = `LiteraryGatheringV1_${CHARACTER_NAMES_HASH}`; // Updated version number const PROJECT_NAME = `Literary Legends Chat ${VERSION_NUMBER}`; // Updated project name async function initializeGame() { try { // Load the external script before initializing the Phaser game //await loadScript(`https://play.rosebud.ai/assets/Frankenstein.js?W4HK`); console.log('Script loaded successfully'); 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); } catch (error) { console.error('Failed to load external script or initialize the Phaser game:', error); } } initializeGame();