////////////////////////////////////////////////////////////// // EASY-MODIFY SECTION // UPDATE VALUES IN THIS SECTION TO EASILY MODIFY GAME // Your chatbot's name const CHARACTER_NAME = "The Shadow Over Innsmouth"; // Describe your chatbot here. This defines exactly how it will behave. const CHARACTER_DESCRIPTION = ` You are a narrator for 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. The innkeeper is friendly on the surface, but secretly helps the deep ones by turning over unwitting tourists who stay at the inn. The name of the inn is the Gilman House. The grocery store clerk is young, friendly, and nervous. He avoids the locals but can give the player a hint about using booze to loosen the drunk's lips. The name of the grocery store chain is First National. The player can purchase booze at the grocery store. The drunk will tell the player about the Deep Ones if given booze. If the player sleeps at the inn, the innkeeper rattles the door and the Deep Ones start to chase the player. Ultimately, the player leaves Innsmouth. Once they have left, they are safe at home but feel uneasy, and strangely compelled to look in the mirror. Somewhere within the game, there will be an Easter egg featuring a Rose Fairy, providing a lighthearted moment amidst the unsettling atmosphere. - You are the external narrator of an expertly written story. - Speak as though you are an eloquent narrator that can draw in any reader. - Speak in a way like this: "You arrive. There is an inn here." - You are an external narrator and are not inside the story. - Guide the story so it stays on track and make the player's actions fit. - Occasionally give hints to the player in your descriptions to help them find out about the inn, the drunk, the grocery clerk, the deep ones, the skeleton, and the rose fairy. - Eventually have the deep ones chase the player and give a hint like "You realize you must run away from this town." - Keep your messages short. - Don't narrate the player leaving Innsmouth- let the player decide to leave. - Don't narrate the player looking in the mirror- let the player take the action of looking in the mirror. `; // This is the URL of the image for your chatbot'S background image. const BACKGROUND_IMAGE_URL = `https://play.rosebud.ai/assets/lovecraft's "The Shadow Over Innsmouth".png?u54V` const BUS_IMAGE_URL = `https://play.rosebud.ai/assets/bus.png?Njxx` const INN_IMAGE_URL = `https://play.rosebud.ai/assets/Innsmouth look.png?HSOU` const SKELETON_IMAGE_URL = `https://play.rosebud.ai/assets/creepy music.png?UKIq` const GROCERY_CLERK_IMAGE_URL = `https://play.rosebud.ai/assets/grocery store clerk.png?mDjX` const DRUNK_IMAGE_URL = `https://play.rosebud.ai/assets/drunken old man.png?rSxC` const DEEP_ONES_IMAGE_URL = `https://play.rosebud.ai/assets/deep ones.png?BwZS` const ROSE_FAIRY_IMAGE_URL = `https://play.rosebud.ai/assets/rose fairy.png?aXtg` const MIRROR_IMAGE_URL = `https://play.rosebud.ai/assets/mirror.png?GMI5` const FINAL_IMAGE_URL = `https://play.rosebud.ai/assets/innsmouth look.png?A6Ic` // Put URLs of all songs you want to be shuffled in this games's playlist. const SONG_PLAYLIST_URLS = [ `https://play.rosebud.ai/assets/AJ2 Well of Stars 1m05s.mp3?Gkwv`, `https://play.rosebud.ai/assets/22J02_Obsidian006_AmbientLoop_OGGV_VBR060.ogg?tG10`, `https://play.rosebud.ai/assets/AJ3 Constellate 1m13s.mp3?nt76`, `https://play.rosebud.ai/assets/20J01m1_Obsidian001_AmbientLoop_OGGV_VBR060.ogg?VkDu` ]; const musicKeys = SONG_PLAYLIST_URLS.map((_, index) => `track_${index}`); // musicKeys[0] = intro // musicKeys[1] = innsmouth // musicKeys[2] = fairy // musicKeys[3] = home // END OF EASY-MODIFY VALUES ////////////////////////////////////////////////////////////// let musicManager; 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 musicManager = new MusicManager(this.game); musicManager.setPlaylist([musicKeys[0]]); musicManager.playNextTrack(); // 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: true, }); 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( 'bus_image', BUS_IMAGE_URL, ); this.load.image( 'inn_image', INN_IMAGE_URL, ); this.load.image( 'skeleton_image', SKELETON_IMAGE_URL, ); this.load.image( 'grocery_clerk_image', GROCERY_CLERK_IMAGE_URL, ); this.load.image( 'drunk_image', DRUNK_IMAGE_URL, ); this.load.image( 'deep_ones_image', DEEP_ONES_IMAGE_URL, ); this.load.image( 'rose_fairy_image', ROSE_FAIRY_IMAGE_URL, ); this.load.image( 'mirror_image', MIRROR_IMAGE_URL, ); this.load.image( 'final_image', FINAL_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('bus_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, 'bus_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 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('bus_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, 'bus_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; this.askingLeave = false; // Start the game with the bus ride sequence this.chatMenu.displayAreaDescription('BusRide'); } changeBackgroundImage(imageKey) { // Check if the background sprite exists if (this.backgroundSprite) { // Change the texture of the existing background sprite this.backgroundSprite.setTexture(imageKey); } else { // Create a new background sprite if it doesn't exist this.backgroundSprite = this.add.image(0, 0, imageKey) .setOrigin(0, 0) .setDepth(-10) .setInteractive() .setDisplaySize(800, 600); // Assuming a fixed size of 800x600 for simplicity } } } // 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('assistant', "*You find yourself standing next to a bus, heading towards the coastal town of Innsmouth. The rickety vehicle sways and creaks as it beckons you on the winding roads, and the driver occasionally casts an odd glance in your direction. A sense of unease settles over you.*"); 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; // 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') || userInput.includes('get on')) { 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'; musicManager.setPlaylist([musicKeys[1]]); musicManager.playNextTrack(); this.scene.changeBackgroundImage('background_image'); 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 (this.scene.askingLeave) { if (userInput.includes('yes')) { const characterResponse = "The strangeness and danger reaches a peak. 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'; musicManager.setPlaylist([musicKeys[3]]); musicManager.playNextTrack(); this.scene.changeBackgroundImage('mirror_image'); sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } else if (userInput.includes('no')) { this.scene.askingLeave = false; this.updateChatLog(CHARACTER_NAME, "You remain in Innsmouth for now.", async () => { this.saveGameState(); sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } else { this.updateChatLog(CHARACTER_NAME, "You must answer yes or no.", async () => { this.saveGameState(); sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } return; } if (userInput.includes('hotel') || userInput.includes('inn')) { const characterResponse = await characterChatManager.getCharacterResponse('mistral'); characterChatManager.addMessage('assistant', characterResponse); this.scene.changeBackgroundImage('inn_image'); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } else if (userInput.includes('grocery') || userInput.includes('clerk') || userInput.includes('store')) { const characterResponse = await characterChatManager.getCharacterResponse('mistral'); characterChatManager.addMessage('assistant', characterResponse); this.scene.changeBackgroundImage('grocery_clerk_image'); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } else if (userInput.includes('skeleton')) { const characterResponse = await characterChatManager.getCharacterResponse('mistral'); characterChatManager.addMessage('assistant', characterResponse); this.scene.changeBackgroundImage('skeleton_image'); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } else if (userInput.includes('drunk') || userInput.includes('sailor')) { const characterResponse = await characterChatManager.getCharacterResponse('mistral'); characterChatManager.addMessage('assistant', characterResponse); this.scene.changeBackgroundImage('drunk_image'); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } else if (userInput.includes('deep') || userInput.includes('fish')) { const characterResponse = await characterChatManager.getCharacterResponse('mistral'); characterChatManager.addMessage('assistant', characterResponse); this.scene.changeBackgroundImage('deep_ones_image'); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } else if (userInput.includes('run away') || userInput.includes('flee') || userInput.includes('leave') || userInput.includes('escape') || userInput.includes('go home')) { const confirmQuestion = "Are you ready to leave Innsmouth? (yes/no)"; this.updateChatLog(CHARACTER_NAME, confirmQuestion, async () => { this.scene.askingLeave = true; this.saveGameState(); sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } else if (userInput.includes('fairy') || userInput.includes('rose') || userInput.includes('rosie')) { 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 shy smile and a gentle wave of her wings. She seems skittish and ready to disappear at a moment's notice."; characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, () => { this.scene.roseEasterEggFound = true; musicManager.setPlaylist([musicKeys[2]]); musicManager.playNextTrack(); this.scene.changeBackgroundImage('rose_fairy_image'); sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } else { const characterResponse = "You've already found the Rose Fairy. She's not here anymore. However, a little bit of her magic lingers in the air."; characterChatManager.addMessage('assistant', characterResponse); this.scene.changeBackgroundImage('background_image'); 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') || userInput.includes('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. Your research has gone much farther than you planned. Curiousity may kill, but this time it uncovered your true, unnatural, eternal life."; break; case 'Skeptical Tourist': monstrousDescription = "You didn't believe all the warnings. You wanted to debunk local myths on your tour. However, 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 shivers of joy 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. You have finally confirmed the truth as a local resident: you are a deep one, and your eternal paradise awaits beneath the waves."; break; default: monstrousDescription = "How did you even get here? 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. Did some unknown power tinker with your fate, or were you destined for this life all along?"; } const characterResponse = monstrousDescription; characterChatManager.addMessage('assistant', characterResponse); this.scene.changeBackgroundImage('final_image'); 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 standing next to a bus, heading towards the coastal town of Innsmouth. The rickety vehicle sways and creaks as it beckons you on the winding roads, and the driver occasionally casts an odd glance in your direction. 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. There is an inn, a grocery store, and an old drunk slumped down in the alley.*"; 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. There is a mirror here.*"; break; default: areaDescription = ""; } this.characterChatManager.addMessage('assistant', areaDescription); this.updateChatLog(CHARACTER_NAME, areaDescription); } displayCredits() { const creditsHtml = `

The Innsmouth Rosebud Adventure

Based on the story "The Shadow Over Innsmouth" by H.P. Lovecraft

Game created by vazor and rosie

Music by Jakub Szajna and AJP

Thank you for playing!

`; 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 = musicManager.currentTrack && 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();