////////////////////////////////////////////////////////////// // 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 = "The Shadow Over Innsmouth"; // Describe your chatbot here. This defines exactly how it will behave. const CHARACTER_DESCRIPTION = ` You are an adventure game based on H.P. Lovecraft's "The Shadow Over Innsmouth". The player will explore the town of Innsmouth and eventually discover their own connection to the town's dark secrets. The game starts with the player choosing a character archetype from a selection. As the player progresses through the game, they will encounter various characters and locations, each with specific keywords or commands that trigger unique interactions and events. The game features creepy music, spooky backgrounds, and text-based interactions. The player's journey will take them through different areas of Innsmouth, including encounters with the innkeeper, grocery store clerk, a drunken old man, and eventually a confrontation with the Deep Ones. Ultimately, the player will find themselves back home, safe from the horrors of Innsmouth. However, upon looking in the mirror, they will be greeted by a shocking revelation - their chosen character now bears the unmistakable "Innsmouth look". As the music reaches a climactic crescendo, the game will end, and credits will roll. Somewhere within the game, there will be an Easter egg featuring a Rose Fairy, providing a lighthearted moment amidst the unsettling atmosphere. First Message of Roleplay: *You find yourself on a bus, heading towards the coastal town of Innsmouth. The rickety vehicle sways and creaks as it navigates the winding roads, and the driver occasionally casts an odd glance in your direction. As the bus approaches its destination, a sense of unease settles over you.* `; // This is the URL of the image for your chatbot'S background image. const BACKGROUND_IMAGE_URL = `https://play.rosebud.ai/assets/The Shadow Over Innsmouth.png?bgyn` // This is the URL of the image for your chatbot. const CHARACTER_IMAGE_URL = `https://play.rosebud.ai/assets/advanced_ai_character_image_prod.webp.webp?xCgo` // 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?YYpC`, `https://play.rosebud.ai/assets/Stream Loops 2024-03-06_02.mp3.mp3?J6zS`, `https://play.rosebud.ai/assets/Stream Loops 2024-03-06_01.mp3.mp3?RM5k` ]; // 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('CharacterCreationScene'); } 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 characterArchetype: null, // Add a new property to store the chosen character archetype }; // 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 CharacterCreationScene extends Phaser.Scene { constructor() { super({ key: 'CharacterCreationScene', }); } 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( 'info_screen_vignette', `https://play.rosebud.ai/assets/vignette_desktop.png.png?CccY`, ); this.load.image( 'music_off', `https://play.rosebud.ai/assets/audio_muted_icon.png.png?hfP7`, ); this.load.image( 'music_on', `https://play.rosebud.ai/assets/audio_playing_icon.png.png?KDbI`, ); this.load.image( 'restart', `https://play.rosebud.ai/assets/restart_loop_icon.png.png?MseJ`, ); } 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: 'CharacterCreationScene' }); console.warn("Character Creation Scene reached."); // Display character selection options this.displayCharacterOptions(); } 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 = 800 - characterScaledWidth - 30; // 10 pixels padding from the right edge let characterSprite = this.add.image(characterXOffset, (600 - 550) / 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 CharacterSelectionMenu(this, backgroundSprite); // Force game resize event to fix clicking on Safari mobile devices this.scale.resize(this.scale.gameSize._width, this.scale.gameSize._height); } displayCharacterOptions() { // CSS for the character selection dialog const dialogStyle = ` display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; text-align: center; height: 300px; width: 400px; 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 character option buttons const buttonStyle = ` font-size: 14px; padding: 10px; cursor: pointer; border-radius: 8px; color: #FFF; background-color: #5A7894; margin: 5px; `; // HTML content for the character selection dialog const characterOptionsHtml = `

Select your character archetype:

`; // Add the HTML dialog to the scene const characterOptionsDialog = this.add .dom(this.cameras.main.centerX, this.cameras.main.centerY) .createFromHTML(characterOptionsHtml); // Handle character option button clicks const characterOption1Button = characterOptionsDialog.getChildByID('characterOption1'); characterOption1Button.addEventListener('click', () => { this.selectCharacterArchetype('Curious Researcher'); characterOptionsDialog.destroy(); // Close the dialog after selection }); const characterOption2Button = characterOptionsDialog.getChildByID('characterOption2'); characterOption2Button.addEventListener('click', () => { this.selectCharacterArchetype('Skeptical Tourist'); characterOptionsDialog.destroy(); // Close the dialog after selection }); const characterOption3Button = characterOptionsDialog.getChildByID('characterOption3'); characterOption3Button.addEventListener('click', () => { this.selectCharacterArchetype('Local Resident'); characterOptionsDialog.destroy(); // Close the dialog after selection }); } selectCharacterArchetype(archetype) { // Save the selecte character archetype in the game state this.game.saveData.characterArchetype = archetype; localStorage.setItem(PROJECT_NAME, JSON.stringify(this.game.saveData)); // Transition to the next scene (e.g., GameScene) this.game.sceneTransitionManager.transitionTo('GameScene'); } } class GameScene extends Phaser.Scene { constructor() { super({ key: 'GameScene', }); } preload() { // Preload any additional assets for this scene } create() { // Create scene elements and initialize gameplay this.createSceneElements(); this.initializeGameplay(); // Fade in the scene this.game.sceneTransitionManager.fadeInScene(this, 0); ProgressLogger.logProgress('game-start', { sceneName: 'GameScene' }); console.warn("Game Scene reached."); } 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 // 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 GameChatMenu(this, backgroundSprite); // Force game resize event to fix clicking on Safari mobile devices this.scale.resize(this.scale.gameSize._width, this.scale.gameSize._height); } initializeGameplay() { // Initialize gameplay variables and state this.currentArea = 'BusRide'; this.roseEasterEggFound = false; // Start the game with the bus ride sequence this.chatMenu.displayAreaDescription('BusRide'); } } // ChatManager is already imported in the current scope. class CharacterSelectionMenu { 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. 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', "*Approaches you*"); // Assume getCharacterResponse() is an async operation const characterResponse = await this.characterChatManager.getCharacterResponse('mistral'); this.characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); // Revert the send button back to its original state sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } async sendChatMessage() { const chatInput = document.getElementById('chatInput'); const sendButton = document.getElementById('sendButton'); const inputValue = chatInput.value; if (inputValue && !this.waitingForResponse) { // Update button to show loading icon sendButton.innerHTML = '

'; sendButton.disabled = true; this.characterChatManager.addMessage('user', inputValue); this.updateChatLog('Player', inputValue); chatInput.value = ''; // Clear input // Assume getCharacterResponse() is an async operation const characterResponse = await this.characterChatManager.getCharacterResponse('mistral'); ProgressLogger.logProgress('game-chat', { userMessage: inputValue, characterResponse: characterResponse }); this.characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); // Revert the send button back to its original state sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } } updateChatLog(speaker, message, onComplete) { 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?.(); } }, 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.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.'); } } // ChatManager is already imported in the current scope. class GameChatMenu { 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. 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.handleUserInput(this.characterChatManager); } }); sendButton.addEventListener('click', () => { this.handleUserInput(this.characterChatManager); }); } async getInitialGreeting() { // Update button to show loading icon sendButton.innerHTML = '

'; sendButton.disabled = true; this.characterChatManager.addMessage('user', "*Approaches you*"); // Assume getCharacterResponse() is an async operation const characterResponse = await this.characterChatManager.getCharacterResponse('mistral'); this.characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); // Revert the send button back to its original state sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } async handleUserInput(characterChatManager) { 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; characterChatManager.addMessage('user', inputValue); this.updateChatLog('Player', inputValue); chatInput.value = ''; // Clear input const userInput = inputValue.toLowerCase().trim(); const currentArea = this.scene.currentArea; if (currentArea === 'BusRide') { if (userInput.includes('enter the bus') || userInput.includes('get on the bus')) { const characterResponse = await characterChatManager.getCharacterResponse('mistral'); characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); this.displayAreaDescription('Innsmouth'); this.scene.currentArea = 'Innsmouth'; sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } else { const characterResponse = "You need to enter the bus to continue your journey."; characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, () => { sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } } else if (currentArea === 'Innsmouth') { if (userInput.includes('talk to innkeeper') || userInput.includes('enter inn')) { const characterResponse = await characterChatManager.getCharacterResponse('mistral'); characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } else if (userInput.includes('talk to grocery clerk') || userInput.includes('enter grocery store')) { const characterResponse = await characterChatManager.getCharacterResponse('mistral'); characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } else if (userInput.includes('talk to drunk') || userInput.includes('talk to old man')) { const characterResponse = await characterChatManager.getCharacterResponse('mistral'); characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } else if (userInput.includes('run away') || userInput.includes('escape')) { const characterResponse = "You hear a strange noise and sense danger approaching. With no time to waste, you flee from Innsmouth, running as fast as you can."; characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); this.displayAreaDescription('Home'); this.scene.currentArea = 'Home'; sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } else if (userInput.includes('look for rose fairy')) { if (!this.scene.roseEasterEggFound) { const characterResponse = "As you explore Innsmouth, you stumble upon a small, secluded area where a delicate Rose Fairy is fluttering around. She greets you with a warm smile and a gentle wave of her wings."; characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, () => { this.scene.roseEasterEggFound = true; sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } else { const characterResponse = "You've already found the Rose Fairy. She's not here anymore."; characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, () => { sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } } else { const characterResponse = await characterChatManager.getCharacterResponse('mistral'); characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, () => { sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } } else if (currentArea === 'Home') { if (userInput.includes('look at mirror') || userInput.includes('look in mirror')) { const characterArchetype = this.scene.game.saveData.characterArchetype; let monstrousDescription; switch (characterArchetype) { case 'Curious Researcher': monstrousDescription = "As you gaze into the mirror, you are horrified to see your once-familiar features have transformed into something monstrous. Your eyes have become bulging and lidless, your skin is covered in slimy scales, and your mouth is now a gaping maw filled with rows of sharp teeth."; break; case 'Skeptical Tourist': monstrousDescription = "To your utter shock and revulsion, your reflection in the mirror reveals a grotesque, inhuman visage. Your face has morphed into a nightmarish amalgam of fish-like features, with deep-set eyes, gills protruding from your neck, and a lipless mouth full of jagged fangs."; break; case 'Local Resident': monstrousDescription = "The mirror's reflection sends chills down your spine as you behold your own twisted, malformed countenance. Your once-human features have been distorted beyond recognition, replaced by a visage that resembles a horrific cross between a human and a deep-sea creature, complete with bulging eyes, slimy skin, and a gaping maw filled with sharp teeth."; break; default: monstrousDescription = "As you stare at your reflection in the mirror, you are gripped by a visceral terror. Your features have been twisted and warped into something inhuman and monstrous, a horrific amalgamation of human and deep-sea creature."; } const characterResponse = monstrousDescription; characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); this.displayCredits(); sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } else { const characterResponse = await characterChatManager.getCharacterResponse('mistral'); characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, () => { sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } } else { const characterResponse = await characterChatManager.getCharacterResponse('mistral'); characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, () => { sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } } } displayAreaDescription(area) { let areaDescription; switch (area) { case 'BusRide': areaDescription = "*You find yourself on a bus, heading towards the coastal town of Innsmouth. The rickety vehicle sways and creaks as it navigates the winding roads, and the driver occasionally casts an odd glance in your direction. As the bus approaches its destination, a sense of unease settles over you.*"; break; case 'Innsmouth': areaDescription = "*You arrive in the eerie town of Innsmouth, a place shrouded in a thick, oppressive fog. The streets are deserted, and the buildings seem to lean in towards you, their windows like hollow, watchful eyes. A strange, fishy odor permeates the air, and you can't shake the feeling of being watched.*"; break; case 'Home': areaDescription = "*After a harrowing journey, you finally make it back home, safe from the horrors of Innsmouth. However, as you catch your breath, a nagging sense of unease still lingers within you.*"; break; default: areaDescription = ""; } this.characterChatManager.addMessage('assistant', areaDescription); this.updateChatLog(CHARACTER_NAME, areaDescription); } displayCredits() { const creditsHtml = `

The Shadow Over Innsmouth

Based on the story by H.P. Lovecraft

Game created by Rosebud AI

`; const creditsDialog = this.scene.add .dom(this.scene.cameras.main.centerX, this.scene.cameras.main.centerY - 100) .createFromHTML(creditsHtml); } 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?.(); } }, 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.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 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, CharacterCreationScene, GameScene], // 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();