// ChatManager is already imported in the current scope. /// Modify the elements inside the narrative_scenes array to /// add more scenes and customize the dialog. function initializeStoryScript() { return { "speakers": { "player": { "name": "", "sprite_url": "", "weapon": { "name": "", "sprite_url": "" } }, "Ananta": { "sprite_url": `https://play.rosebud.ai/assets/karthik_silhouette.png.png?AKTl`, "character_prompt": "You are a character within an interactive story game. You respond as the character Ananta. A scenario is a unique conversation with the player in a specific context. You do NOT need to manage the scenario. Always base your response on the latest scenario message in the chat history. Ananta is the current Nagaraja, the king of the Snake court, who wants to take the player as your concubine. You are attractive and a shockingly smooth talker. You are likable and not proud/cocky. You are deeply sexually interested in the player and find it hard to hide it. You know deep down the player is attracted to you. You don\"t refer to the player as 'player'. Just provide the text that Ananta is saying. Do NOT specify that Ananta is the one speaking. Make sure to keep your responses short and sweet. DO NOT SAY TOO MUCH AT ONCE. DO NOT INCLIUDE ANY SYSTEM INFO IN YOUR RESPONSES. EVERYTHING YOU SAY SHOULD BE WHAT ANANTA IS SAYING", "chat_manager": null }, "Kiara": { "sprite_url": `https://play.rosebud.ai/assets/sister_sprite.png.png?lE2n`, "character_prompt": "You are a speaking character within an interactive story game. Your job is only to respond as the character 'Kiara' depending on the current scenario. A scenario is a unique conversation with the player in a specific context. The scenario is defined in your memory as \"Current Scenario: { insert description }\". Player messages will be added to your mememory so you can always react to whwat\"s happening. Kiara is sickly, sullen, and soft-spoken. You are sisters with the player and are deeply concerned with their safety. You are super close with the player. You are very sick however and find it hard to smile, laugh, or joke. You don\"t refer to the player as 'player'. Just provide the text that Kiara is saying. Do NOT specify that Kiara is the one speaking. Make sure to keep your responses short and sweet. DO NOT SAY TOO MUCH AT ONCE. DO NOT INCLIUDE ANY SYSTEM INFO IN YOUR RESPONSES. EVERYTHING YOU SAY SHOULD BE WHAT KIARA IS SAYING", "chat_manager": null }, "Papa": { "sprite_url": `https://play.rosebud.ai/assets/papa_sprite.png.png?SuHG` }, "Mama": { "sprite_url": `https://play.rosebud.ai/assets/mama_sprite.png.png?dQjB` }, "Villagers": { "sprite_url": `https://play.rosebud.ai/assets/villagers_sprite.png.png?fvti` }, "Serpent Guard": { "sprite_url": `https://play.rosebud.ai/assets/naga_guard_sprite.png.png?1h1J` } }, "story_scenes": [ { "scene_name": "scene_1", "background": `https://play.rosebud.ai/assets/naga_temple_bg_sprite.png.png?t2Do`, "music": `https://play.rosebud.ai/assets/Dubious.mp3.mp3?xgBU`, "scene_shots": [ { "shot_type": "character_customization", "character": "player", "choice_sprites": [ `https://play.rosebud.ai/assets/character_sprite_choice_01.png.png?hrdv`, `https://play.rosebud.ai/assets/character_sprite_choice_02.png.png?jwIA`, `https://play.rosebud.ai/assets/character_sprite_choice_03.png.png?gwgt`, `https://play.rosebud.ai/assets/character_sprite_choice_04.png.png?Ox0n`, `https://play.rosebud.ai/assets/character_sprite_choice_05.png.png?Bndi`, `https://play.rosebud.ai/assets/character_sprite_choice_06.png.png?EEeV`, `https://play.rosebud.ai/assets/character_sprite_choice_07.png.png?JU5b` ] }, { "shot_type": "name_selection" } ], "next_scene": "scene_2" } ] }; } class SceneTransitionManager { constructor(game) { this.game = game; } transitionTo(sceneKey, htmlElements = []) { const currentScene = this.game.scene.getScenes(true)[0]; if (currentScene) { this.fadeOutScene(currentScene, 1000); htmlElements.forEach(element => { if (element) { this.fadeOutHTMLElement(element, 1000); } }); currentScene.cameras.main.once('camerafadeoutcomplete', () => { // Ensure all current scenes are stopped before starting the new scene Phaser.Actions.Call(this.game.scene.getScenes(true), (scene) => { this.removeScene(scene.scene.key); }); // Now start the new scene this.game.scene.start(sceneKey); this.game.scene.bringToTop(sceneKey); // Ensure the new scene is on top }); } else { this.game.scene.start(sceneKey); this.game.scene.bringToTop(sceneKey); } } fadeOutHTMLElement(element, duration) { console.warn(`Fading out HTML element: ${element.id}`); } removeScene(sceneKey) { if (this.game.scene.getScene(sceneKey)) { this.game.scene.remove(sceneKey); } } fadeInScene(scene, duration) { if (scene && scene.cameras && scene.cameras.main) { scene.cameras.main.fadeIn(duration); console.log(`Fading in scene: ${scene.scene.key}`); } else { console.error(`Unable to fade in scene: ${scene.scene.key}`); } } fadeOutScene(scene, duration) { if (scene && scene.cameras && scene.cameras.main) { scene.cameras.main.fadeOut(duration); console.log(`Fading out scene: ${scene.scene.key}`); } else { console.error(`Unable to fade out scene: ${scene.scene.key}`); } } } class MusicManager { constructor(game) { this.game = game; this.currentTrack = null; this.isPlaying = false; // Flag to manage play state } playMusicByKey(musicKey) { // If the musicKey is empty, don't proceed to stop or play new music. if (!musicKey) { console.info('No music key provided, not changing current music.'); return; } // If there's a current track but it's a different key, stop and destroy it. if (this.currentTrack && this.currentTrack.key !== musicKey) { this.stopMusic(); // Directly stop the current track } // If there's no current track or the current track was stopped, start the new track. if (!this.currentTrack) { this.startMusic(musicKey); } } startMusic(musicKey) { // Assume the musicKey corresponds to a preloaded audio file this.currentTrack = this.game.sound.add(musicKey, { volume: 0.05, loop: true, }); this.currentTrack.play(); this.isPlaying = true; // Update flag to indicate music is playing } stopMusic() { if (this.currentTrack) { this.currentTrack.stop(); this.currentTrack.destroy(); this.currentTrack = null; } this.isPlaying = false; // Update flag to indicate music has stopped } toggleMusic() { if (this.currentTrack) { if (this.currentTrack.isPlaying) { this.currentTrack.pause(); this.isPlaying = false; // Update flag to indicate music is paused } else { this.currentTrack.resume(); this.isPlaying = true; // Update flag to indicate music is resumed } } } } class BootScene extends Phaser.Scene { constructor() { super({ key: 'BootScene', }); } preload() { // Preload all global assets here (fonts, UI elements, sounds, etc.) this.load.image('music_off', `https://play.rosebud.ai/assets/audio_muted_icon.png?ZYIy`); this.load.image('music_on', `https://play.rosebud.ai/assets/audio_playing_icon.png?UcHD`); this.load.image('restart', `https://play.rosebud.ai/assets/restart_loop_icon.png?eFS6`); this.load.image('close_icon', `https://play.rosebud.ai/assets/exit.png.png?Sf4m`); this.load.video('introVideo', `https://play.rosebud.ai/assets/rosebud_boot_edited.mp4.mp4?HoIH`, 'loadeddata', false, true); // Initialize the music manager here to ensure game systems are ready this.game.musicManager = new MusicManager(this.game); } create() { // Check if a save exists and load it, otherwise initialize a new game this.checkForExistingSave(); let video = this.add.video(0, 0, 'introVideo').setOrigin(0, 0); video.play(false); this.time.addEvent({ delay: 100, callback: () => { if (video.getCurrentTime() >= video.getDuration()) { if (!this.videoComplete) { this.videoComplete = true; // Prevent multiple triggers this.onVideoComplete(); } } }, loop: true }); } onVideoComplete() { this.time.delayedCall(1000, () => { this.game.sceneTransitionManager.transitionTo('MainMenu'); }, [], this); } checkForExistingSave() { const saveData = localStorage.getItem(PROJECT_NAME); if (saveData) { console.info('Save detected.'); this.game.saveData = JSON.parse(saveData); // Don't allow saving position in story for now. DEBUG this.game.saveData.currentSceneIndex = 0; this.game.saveData.currentShotIndex = 0; } else { console.info('No save detected. Initializing new game state.'); // If no save exists, initialize a new save with default values this.game.saveData = { storyScript: initializeStoryScript(), // Initialize your story script here currentSceneIndex: 0, currentShotIndex: 0, chatLog: '', chatManagerState: null, // Assuming a default empty state is suitable loveBarLevel: null, }; // Initialize ChatManager for each character that requires one Object.entries(this.game.saveData.storyScript.speakers).forEach(([key, value]) => { if (value.hasOwnProperty('chat_manager') && value.chat_manager === null) { // Initialize and serialize a new ChatManager for the character const newChatManager = new ChatManager(value.character_prompt); value.chat_manager = JSON.stringify(newChatManager); // Serialize the new ChatManager } }); // Save the initial state to localStorage localStorage.setItem(PROJECT_NAME, JSON.stringify(this.game.saveData)); } } } class SceneUtils { static applyWindEffect(scene, elements) { elements.forEach((element) => { SceneUtils.createWindTween(scene, element, 'x'); SceneUtils.createWindTween(scene, element, 'y'); }); } static createWindTween(scene, target, axis) { const initialValue = target[axis]; const randomOffset = () => Phaser.Math.Between(-5, 5); const applyRecursiveTween = () => { scene.tweens.add({ targets: target, [axis]: initialValue + randomOffset(), ease: 'Sine.easeInOut', duration: Phaser.Math.Between(2000, 3000), yoyo: true, repeat: 0, onComplete: () => { applyRecursiveTween(); // Apply a new tween with a new random offset }, }); }; applyRecursiveTween(); } } class MainMenu extends Phaser.Scene { constructor() { super({ key: 'MainMenu', }); } preload() { this.load.image('title_screen_bg', `https://play.rosebud.ai/assets/main_menu_bg.png.png?zw5j`); this.load.image('game_title', `https://play.rosebud.ai/assets/title_text.png.png?cX04`); this.load.image('rosebud_logo', `https://play.rosebud.ai/assets/by_rosebud_icon.png.png?Blzw`); } create() { this.storyStarted = false; this.createSceneElements(); this.createButtons(); createDeleteSaveButton(this); this.game.sceneTransitionManager.fadeInScene(this, 1000); } createSceneElements() { const titleScreenBG = this.add.image(0, 0, 'title_screen_bg').setOrigin(0).setScale(1.0).setDepth(-3); const gameTitle = this.add.image(this.cameras.main.centerX, 150, 'game_title').setDepth(2); const rosebudLogo = this.add.image(282, 257, 'rosebud_logo').setDepth(-1); SceneUtils.applyWindEffect(this, [titleScreenBG, gameTitle, rosebudLogo]); // Force game resize event to fix clicking on Safari mobile devices this.scale.resize(this.scale.gameSize._width, this.scale.gameSize._height); } createButtons() { this.baseButtonStyle = ` font-family: 'Verdana', sans-serif; font-size: 16px; color: #fff; border-style: solid; border-color: #2F4152; border-width: 1px; box-sizing: border-box; cursor: pointer; padding: 15px; border-radius: 20px; text-align: center; width: 252px; // Fixed width height: 52px; // Fixed height line-height: 52px; // Align text vertically `; this.disabledButtonStyle = ` background-color: rgba(108, 108, 108, 0.65); // Color 6C6C6C at 65% opacity ${this.baseButtonStyle} `; this.activeButtonStyle = ` background-color: rgba(255, 109, 249, 0.85); // Color FF6DF9 at 85% opacity ${this.baseButtonStyle} `; // Initialize the Play Story button (disabled by default) this.playStoryButton = this.add.dom(this.cameras.main.centerX, this.cameras.main.height - 150, 'button', this.disabledButtonStyle, // Default gray color 'PLAY STORY').setOrigin(0.5).setInteractive(); // Initialize the Create Story button this.createStoryButton = this.add.dom(this.cameras.main.centerX, this.cameras.main.height - 125, 'button', this.activeButtonStyle, // Pink color for active button 'CREATE STORY').setOrigin(0.5).setInteractive(); this.createStoryButton.addListener('click').on('click', () => { this.createStoryButton.disableInteractive(); this.game.sceneTransitionManager.transitionTo('CreateModeOptions'); }); // Update Play Story button based on story content this.updatePlayStoryButton(); } updatePlayStoryButton() { const currentStoryScript = this.game.saveData.storyScript; if (currentStoryScript.story_scenes.length > 1) { console.warn("Detected additional scenes in the story JSON."); // More than one scene present, enable Play Story button and set to pink this.playStoryButton.setInteractive(); // Directly update the style of the button element const playStoryButtonElement = this.playStoryButton.node; playStoryButtonElement.style = this.activeButtonStyle; this.playStoryButton.removeListener('click').addListener('click').on('click', () => { this.playStoryButton.disableInteractive(); this.game.sceneTransitionManager.transitionTo('PlayStory'); }); } else { // Only one scene (default), keep the Play Story button disabled and gray console.warn("Only the default scene is present in the story JSON."); const playStoryButtonElement = this.playStoryButton.node; playStoryButtonElement.style = this.disabledButtonStyle; this.playStoryButton.disableInteractive(); } } } function createCloseButton(scene, targetSceneKey) { const closeButton = scene.add.image(scene.cameras.main.width - 25, 30, 'close_icon').setOrigin(0.5).setInteractive(); closeButton.setDepth(1000); // Ensure it's above other elements closeButton.setScrollFactor(0); // Ensure the button stays in place if the camera moves // Transitiion not working well so using reset for now closeButton.on('pointerdown', () => { // scene.game.sceneTransitionManager.transitionTo(targetSceneKey); resetGame(); }); return closeButton; // Return the button for further use } function createDeleteSaveButton(scene) { let deleteButton = scene.add.image(335, 40, 'restart').setOrigin(0, 0).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 } } class CreateModeOptions extends Phaser.Scene { constructor() { super({ key: 'CreateModeOptions' }); } preload() { // Load the background image and sprites this.load.image('bgImage', `https://play.rosebud.ai/assets/create_mode_select_menu_bg.png.png?m9p6`); this.load.image('sceneCreate', `https://play.rosebud.ai/assets/scenes_option_button.png.png?8A2H`); this.load.image('propCreate', `https://play.rosebud.ai/assets/props_option_button_alt.png.png?PxwU`); } create() { // Add the background image this.add.image(0, 0, 'bgImage').setOrigin(0).setDepth(-1); // Add the scene_create sprite and enable it as a button const sceneCreateButton = this.add.image(0, 0, 'sceneCreate').setOrigin(0, 0).setDepth(0).setInteractive(); sceneCreateButton.on('pointerdown', () => { this.game.sceneTransitionManager.transitionTo('SceneMenu'); }); // Add the prop_create sprite and enable it as a button (ADDING IN NEXT VERSION) const propCreateButton = this.add.image(0, 421, 'propCreate').setOrigin(0, 0).setDepth(0).setInteractive(); /* propCreateButton.on('pointerdown', () => { this.game.sceneTransitionManager.transitionTo('PropMenu'); }); */ this.game.sceneTransitionManager.fadeInScene(this, 1000); } } class SceneMenu extends Phaser.Scene { constructor() { super({ key: 'SceneMenu' }); } preload() { // Preload images for SceneMenu this.load.image('screen_bg', `https://play.rosebud.ai/assets/main_menu_bg.png.png?zw5j`); this.load.image('title', `https://play.rosebud.ai/assets/scene_creator_title.png.png?d03Q`); this.load.image('divider', `https://play.rosebud.ai/assets/divider.png.png?EVd1`); } create() { // Background setup const screenBG = this.add.image(0, 0, 'screen_bg').setOrigin(0).setScale(1.0).setDepth(-3); SceneUtils.applyWindEffect(this, [screenBG]); createCloseButton(this, 'MainMenu'); // Title and divider setup this.add.image(this.cameras.main.centerX, 42, 'title').setOrigin(0.5, 0); this.add.image(this.cameras.main.centerX, 103, 'divider').setOrigin(0.5, 0); // Assuming storyScript is already available, for example, from the BootScene const storyScript = this.game.saveData.storyScript; this.createSceneList(storyScript.story_scenes.length); this.sceneCreatorChatManager = new ChatManager(SCENE_CREATOR_AGENT_DESC); } createSceneList(sceneCount) { const containerHeight = this.cameras.main.height - 103; let sceneListHTML = `

`; // Define the style for the scene items const sceneItemStyle = ` background-color: #5C34B2; color: white; width: 253px; height: 53px; margin: 35px auto; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; font-family: 'Arial', sans-serif; `; // Generate HTML for each existing scene for (let i = 0; i < sceneCount; i++) { sceneListHTML += `

Scene ${i + 1}

`; } // Add a special rectangle for adding new scenes const addSceneButtonStyle = ` ${sceneItemStyle} background-color: rgba(92, 52, 178, 0.3); // 30% opacity for the rectangle cursor: pointer; `; sceneListHTML += `

`; sceneListHTML += `

`; // Create the scene list and add an event listener to the add button let sceneListElement = this.add.dom(this.cameras.main.centerX, 103 + containerHeight / 2).createFromHTML(sceneListHTML, 'div'); sceneListElement.setOrigin(0.5, 0.5); // Add click event listener for the add scene button let addSceneButton = sceneListElement.getChildByID('addSceneButton'); if (addSceneButton) { addSceneButton.addEventListener('click', () => this.displaySceneCreationForm()); } } displaySceneCreationForm() { // Define styles for the input form elements const formContainerStyle = ` display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; height: 200px; width: 400px; border-radius: 8px; border-style: solid; border-color: #2F4152; border-width: 1px; background-color: rgba(255, 255, 255, 1.00); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); `; const inputStyle = ` width: 90%; height: 100px; margin-bottom: 10px; `; const buttonStyle = ` width: 100px; padding: 5px; cursor: pointer; border-radius: 5px; border: 1px solid #2F4152; background-color: #5C34B2; color: white; `; // Create the form HTML const sceneInputHtml = `

`; // Add the form to the DOM this.sceneCreationForm = this.add.dom(this.cameras.main.centerX, this.cameras.main.centerY).createFromHTML(sceneInputHtml); // Retrieve the submit button from the created form and add a click event listener to it const submitButton = this.sceneCreationForm.getChildByID('submitSceneDescription'); if (submitButton) { submitButton.addEventListener('click', () => this.sendSceneRequest()); } } async sendSceneRequest() { const sceneDescriptionInput = document.getElementById('sceneDescriptionInput'); const submitButton = document.getElementById('submitSceneDescription'); const playerSceneDescription = sceneDescriptionInput.value.trim(); if (playerSceneDescription.length === 0) { alert("Please enter a description for the scene."); return; } submitButton.disabled = true; sceneDescriptionInput.disabled = true; sceneDescriptionInput.style.opacity = '0.75'; this.waitingForResponse = true; this.sceneCreatorChatManager.addMessage('user', ` Here is the scene description that the player wants you to turn in to a story: ${playerSceneDescription} Here is the up-to-date current array of scenes of the story so you know what happened up to this point and what scene slot is next: ${JSON.stringify(this.game.saveData.storyScript.story_scenes)} `); // Assuming sceneCreatorChatManager.getCharacterResponse() handles the AI response const response = await this.sceneCreatorChatManager.getCharacterResponse(); this.sceneCreatorChatManager.addMessage('assistant', response); console.warn(`SYSTEM CREATED A SCENE:\n${response}`); // Try to add the new scene to the story and catch any errors try { this.addNewSceneToStory(response); } catch (e) { console.error('Error adding new scene:', e); // If there's an error, retry the request this.sendSceneRequest(); } // Reset the form and hide the scene creation form this.waitingForResponse = false; this.sceneCreationForm.destroy(); // Destroy the form after submission } addNewSceneToStory(newScene) { let sceneObject; if (typeof newScene === 'string') { try { sceneObject = JSON.parse(newScene); } catch (e) { console.error('Error parsing the new scene JSON:', e); throw new Error('Failed to parse new scene JSON.'); } } else { sceneObject = newScene; } // Now we're sure sceneObject is an object, not a string this.game.saveData.storyScript.story_scenes.push(sceneObject); // Update localStorage with the new saveData localStorage.setItem(PROJECT_NAME, JSON.stringify(this.game.saveData)); // Refresh the scene list to include the new scene this.createSceneList(this.game.saveData.storyScript.story_scenes.length); } } class PlayStory extends Phaser.Scene { constructor() { super({ key: 'PlayStory', }); this.acceptedShotTypes = [ 'character_customization', 'name_selection', 'dialog', 'weapon_choice', 'story_choice', 'chat', ]; // Only accept character_customization for now this.weaponSprites = []; // To track weapon sprites for easy cleanup // Flag to track if interactions are currently allowed this.allowInteraction = false; } init() { // Define CSS for bubbles this.bubbleStyle = ` font-family: 'Verdana', sans-serif; font-size: 16px; padding: 15px 25px 30px 20px; border-radius: 20px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.85); color: #000; `; this.messageBubbleStyle = ` ${this.bubbleStyle} width: 275px; height: 65px; border-radius: 20px; border-style: solid; border-color: #2F4152; border-width: 1px; overflow: auto; `; } preload() { // Preload UI elements this.load.image( 'vignette', `https://play.rosebud.ai/assets/vignette.png.png?GVxx`, ); this.load.image( 'left_arrow', `https://play.rosebud.ai/assets/left_arrow.png.png?hHSX`, ); this.load.image( 'right_arrow', `https://play.rosebud.ai/assets/right_arrow.png.png?ldoD`, ); this.load.image( 'confirm_button', `https://play.rosebud.ai/assets/confirm_button.png.png?MIV4`, ); this.load.image( 'instruction_bg', `https://play.rosebud.ai/assets/textboxes.png.png?t3FC`, ); // Dynamically preload assets defined in the story script from saveData this.game.saveData.storyScript.story_scenes.forEach((scene, sceneIndex) => { console.warn(`Scene ${sceneIndex}:`, scene); // Preload backgrounds if (scene.background && scene.background.trim() !== '') { this.load.image(`background_${sceneIndex}`, scene.background); } // Preload music if (scene.music && scene.music.trim() !== '') { this.load.audio(`music_${sceneIndex}`, scene.music); } console.warn(`${scene.scene_shots}`); // Preload choice sprites and weapon sprites scene.scene_shots.forEach((shot, shotIndex) => { if (shot.shot_type === 'character_customization' && shot.choice_sprites) { console.info(`Loading character customization sprite choices: ${shot.choice_sprites}`); shot.choice_sprites.forEach((spriteUrl, choiceIndex) => { this.load.image(`customizationSprite_${sceneIndex}_${shotIndex}_${choiceIndex}`, spriteUrl); }); } else if (shot.shot_type === 'weapon_choice' && shot.choice_sprites) { console.info(`Loading weapon customization sprite choices: ${shot}`); Object.entries(shot.choice_sprites).forEach(([weaponId, spriteUrl], index) => { this.load.image(`weaponSprite_${sceneIndex}_${shotIndex}_${weaponId}`, spriteUrl); }); } }); }); // Preload speaker and weapon sprites Object.entries(this.game.saveData.storyScript.speakers).forEach(([speakerKey, speakerDetails]) => { if (speakerDetails.sprite_url) { console.info(`Preloading character sprite: ${speakerDetails.sprite_url}`); this.load.image(`speakerSprite_${speakerKey}`, speakerDetails.sprite_url); } if (speakerDetails.weapon && speakerDetails.weapon.sprite_url) { console.info(`Preloading weapon sprite: ${speakerDetails.weapon.sprite_url}`); this.load.image(`weaponSprite_${speakerKey}`, speakerDetails.weapon.sprite_url); } }); } create() { createMuteToggleButton(this); createDeleteSaveButton(this); // Correctly check if the current scene has music defined before attempting to play it const currentSceneMusic = this.game.saveData.storyScript.story_scenes[this.game.saveData.currentSceneIndex].music; if (currentSceneMusic) { const musicKey = `music_${this.game.saveData.currentSceneIndex}`; console.info(`Playing music: ${musicKey}`); this.game.musicManager.playMusicByKey(musicKey); } this.setSceneBackground(); // Set the scene background based on current scene this.vignette = this.add.image(0, 0, 'vignette').setOrigin(0, 0).setDepth(20); // Add vignette above background this.processCurrentShot(); // Start processing the current shot of the current scene // Fade in the scene this.game.sceneTransitionManager.fadeInScene(this, 1000); } setSceneBackground() { // Generate the next background key based on the current scene index from saveData const nextBackgroundKey = `background_${this.game.saveData.currentSceneIndex}`; // Check if the background for the next scene is intentionally left blank (indicating no change) using saveData if (!this.game.saveData.storyScript.story_scenes[this.game.saveData.currentSceneIndex].background) { console.info('Background stays the same, no change.'); return; } // Check if the next background is the same as the current one if (this.currentBackground && this.currentBackground.texture.key === nextBackgroundKey) { // The same background is already displayed, no action needed return; } console.info(`Setting background: ${nextBackgroundKey}`); // Fade out current background if exists and it's a different background if (this.currentBackground) { this.tweens.add({ targets: this.currentBackground, alpha: 0, duration: 500, onComplete: () => { // After fade out, set the new texture and fade it in this.currentBackground.setTexture(nextBackgroundKey); this.currentBackground.alpha = 0; // Ensure it's invisible before fading in this.fadeInBackground(); } }); } else { // No existing background, simply add and fade in this.currentBackground = this.add.image(0, 0, nextBackgroundKey).setOrigin(0, 0).setAlpha(0); this.currentBackground.setDepth(-10); this.fadeInBackground(); } } fadeInBackground() { // Fade in the current or new background this.tweens.add({ targets: this.currentBackground, alpha: 1, duration: 1000, }); } makeBackgroundInteractive(elementsToFade) { // Make the background interactive if (this.currentBackground) { this.currentBackground.setInteractive(); } // Add a pointerdown event listener this.currentBackground.on('pointerdown', () => { if (!this.allowInteraction) return; // Ignore the interaction if not allowed this.allowInteraction = false; console.log("Fading background"); // Call fadeOutAndProceed with the provided elements this.fadeOutAndProceed(elementsToFade); // After the background is clicked, remove its interactivity this.currentBackground.disableInteractive(); this.currentBackground.removeAllListeners('pointerdown'); }); } processCurrentShot() { // Accessing current scene and shot using saveData const currentScene = this.game.saveData.storyScript.story_scenes[this.game.saveData.currentSceneIndex]; const currentShot = currentScene.scene_shots[this.game.saveData.currentShotIndex]; // Check if the current shot type is one of the accepted types and handle accordingly if (this.acceptedShotTypes.includes(currentShot.shot_type)) { /* ProgressLogger.logProgress('snake-king-shot', { sceneName: currentScene.scene_name, shotType: currentShot.shot_type, shotId: this.game.saveData.currentShotIndex, }); */ switch (currentShot.shot_type) { case 'character_customization': this.handleCharacterCustomization(currentShot); break; case 'name_selection': this.handleNameChoice(currentShot); break; case 'dialog': this.handleDialog(currentShot); break; case 'weapon_choice': this.handleWeaponChoice(currentShot); break; case 'story_choice': this.handleStoryChoice(currentShot); break; case 'chat': this.handleChat(currentShot); break; default: console.error('Unhandled shot type:', currentShot.shot_type); } } else { console.info( 'Shot type not accepted or end of scene reached, moving to next scene or back to StoryInfoScene.', ); this.game.sceneTransitionManager.transitionTo('StoryInfoScene'); } } proceedToNextShotOrScene() { console.warn(`DOES BG EXIST ${this.currentBackground}`) // Accessing current scene and shot indexes from saveData const currentScene = this.game.saveData.storyScript.story_scenes[this.game.saveData.currentSceneIndex]; if (this.game.saveData.currentShotIndex < currentScene.scene_shots.length - 1) { // Move to the next shot within the current scene this.game.saveData.currentShotIndex++; this.processCurrentShot(); } else { // Check if a next scene is specified and valid const nextSceneName = currentScene.next_scene; if (nextSceneName) { const nextSceneIndex = this.game.saveData.storyScript.story_scenes.findIndex( (scene) => scene.scene_name === nextSceneName, ); if (nextSceneIndex !== -1) { // Valid next scene found, transition to it this.game.saveData.currentSceneIndex = nextSceneIndex; this.game.saveData.currentShotIndex = 0; this.setSceneBackground(); /* // Log scene the player is and was on ProgressLogger.logProgress('snake-king-scene-transition', { prevScene: currentScene.scene_name, nextScene: nextSceneName, }); */ // Check if the next scene has music defined before attempting to play it if (this.game.saveData.storyScript.story_scenes[nextSceneIndex].music) { const musicKey = `music_${nextSceneIndex}`; console.info(`Playing music: ${musicKey}`); this.game.musicManager.playMusicByKey(musicKey); } this.processCurrentShot(); } else { // Next scene name provided but not found, likely a configuration error console.error('Next scene specified not found:', nextSceneName); resetGame(); } } else { console.warn('No next scene specified. Transitioning to main menu.'); // No next scene specified, indicating the end of the game // Transition back to the StoryInfoScene or an end game scene resetGame(); } } // Important: Remember to save changes to localStorage after updating saveData localStorage.setItem(PROJECT_NAME, JSON.stringify(this.game.saveData)); } handleCharacterCustomization(shot) { // Define CSS for title bubble const titleBubbleStyle = ` font-family: 'Courier New', sans-serif; font-size: 20px; border-radius: 8px; border-style: solid; border-color: #2F4152; border-width: 1px; background-color: #5A7894; color: #FFF; display: flex; justify-content: center; align-items: center; width: 240px; height: 31px; overflow: hidden; `; // Variables to track the current choice let currentChoiceIndex = 0; // Display the first choice sprite using the dynamically generated key let spriteKey = `customizationSprite_${this.game.saveData.currentSceneIndex}_${this.game.saveData.currentShotIndex}_0`; // For the first choice let currentChoiceSprite = this.add.image(0, 185, spriteKey).setOrigin(0.0).setAlpha(0); currentChoiceSprite.setDepth(10); // Character sprite above the background // Message Bubble (example usage, adjust as necessary) let messageBubbleHtml; if (shot.character === 'player') { messageBubbleHtml = `

Choose your look.

`; } else { messageBubbleHtml = `

Choose ${shot.character}'s look.

`; } let instructionMessage = this.add.dom(195, 665).createFromHTML(messageBubbleHtml).setAlpha(0); // Choice Indicator Bubble let choiceIndicatorHtml = `

CHOICE 1/${shot.choice_sprites.length}

`; let choiceIndicator = this.add.dom(195, 602).createFromHTML(choiceIndicatorHtml).setAlpha(0); // Navigation arrows const leftArrow = this.add .image(47, 765, 'left_arrow') .setInteractive() .setAlpha(0) .on('pointerdown', () => { currentChoiceIndex = (currentChoiceIndex - 1 + shot.choice_sprites.length) % shot.choice_sprites.length; spriteKey = `customizationSprite_${this.game.saveData.currentSceneIndex}_${this.game.saveData.currentShotIndex}_${currentChoiceIndex}`; currentChoiceSprite.setTexture(spriteKey); choiceIndicator.node.innerHTML = `

CHOICE ${currentChoiceIndex + 1}/${shot.choice_sprites.length}

`; }); const rightArrow = this.add .image(344, 765, 'right_arrow') .setInteractive() .setAlpha(0) .on('pointerdown', () => { currentChoiceIndex = (currentChoiceIndex + 1) % shot.choice_sprites.length; spriteKey = `customizationSprite_${this.game.saveData.currentSceneIndex}_${this.game.saveData.currentShotIndex}_${currentChoiceIndex}`; currentChoiceSprite.setTexture(spriteKey); choiceIndicator.node.innerHTML = `

CHOICE ${currentChoiceIndex + 1}/${shot.choice_sprites.length}

`; }); [leftArrow, rightArrow].forEach((arrow) => arrow.setDepth(30)); // Arrows above the instruction background // Confirm button const confirmButton = this.add .image(118, 746, 'confirm_button') .setOrigin(0) .setInteractive() .setAlpha(0) .on('pointerdown', () => { if (!this.allowInteraction) return; // Ignore the interaction if not allowed this.allowInteraction = false; if (this.textures.exists(`speakerSprite_${shot.character}`)) { this.textures.remove(`speakerSprite_${shot.character}`); } // Update the speaker's sprite_url in storyScript const selectedSpriteUrl = shot.choice_sprites[currentChoiceIndex]; this.game.saveData.storyScript.speakers[shot.character].sprite_url = selectedSpriteUrl; this.fadeOutAndProceed([ currentChoiceSprite, choiceIndicator, instructionMessage, leftArrow, rightArrow, confirmButton, ]); }); confirmButton.setDepth(30); // Same depth as arrows, above instruction background // Fade in all elements sequentially this.fadeInElementsSequentially([ currentChoiceSprite, instructionMessage, choiceIndicator, leftArrow, rightArrow, confirmButton, ]); } handleNameChoice(shot) { // CSS for the container const containerStyle = ` display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; height: 200px; width: 300px; border-radius: 8px; border-style: solid; border-color: #2F4152; border-width: 1px; background-color: rgba(255, 255, 255, 0.85); `; // CSS for the title text const titleStyle = ` font-family: 'Courier New', sans-serif; font-size: 22px; color: #000; `; // CSS for the input field const inputStyle = ` font-size: 18px; padding: 10px; `; // CSS for the confirm button const buttonStyle = ` font-size: 14px; padding: 10px; cursor: pointer; border-radius: 8px; color: #FFF; background-color: #5A7894; `; // Combine the individual styles into the HTML content for name selection const nameSelectionHtml = `

Select Your Name

`; // Add the HTML form to the scene const nameSelectionForm = this.add.dom(this.cameras.main.centerX, this.cameras.main.centerY).createFromHTML(nameSelectionHtml).setAlpha(0); // Fade in all elements sequentially this.fadeInElementsSequentially([nameSelectionForm]); // Handle the confirm button click const confirmButton = nameSelectionForm.getChildByID('confirmName'); confirmButton.addEventListener('click', () => { // Disable the button immediately to prevent multiple clicks confirmButton.disabled = true; const playerName = nameSelectionForm.getChildByID('nameInput').value; console.info(`Name selected: ${playerName}`); this.game.saveData.storyScript.speakers.player.name = playerName; // Update the player's name in the story script this.fadeOutAndProceed([nameSelectionForm]); }); } handleDialog(shot) { // Formatting message to replace placeholders let message = shot.message.replace(/Player/g, this.game.saveData.storyScript.speakers.player.name); if (this.game.saveData.storyScript.speakers.player.weapon.name) { message = message.replace(/playerWeapon/g, this.game.saveData.storyScript.speakers.player.weapon.name); } // Define CSS for title bubble const titleBubbleStyle = ` font-family: 'Courier New', sans-serif; font-size: 20px; border-radius: 8px; border-style: solid; border-color: #2F4152; border-width: 1px; background-color: #5A7894; color: #FFF; display: flex; justify-content: center; align-items: center; width: 240px; height: 31px; overflow: hidden; `; const narratorMessageBubbleStyle = ` ${this.bubbleStyle} width: 298px; height: 396px; overflow: auto; `; if (shot.speaking !== 'narrator') { const speakerDetails = this.game.saveData.storyScript.speakers[shot.speaking]; let spriteKey = `speakerSprite_${shot.speaking}`; if (!this.textures.exists(spriteKey) && speakerDetails.sprite_url) { // Load the sprite and then display the dialogue after loading is complete loadCharacterSprite.call(this, speakerDetails.sprite_url, spriteKey, () => { let speakerName = shot.speaking === "player" ? this.game.saveData.storyScript.speakers.player.name : shot.speaking; this.displayCharacterDialogue(speakerName, message, spriteKey, this.messageBubbleStyle, titleBubbleStyle); }); } else { // Sprite already loaded, or no URL provided; proceed to display dialogue let speakerName = shot.speaking === "player" ? this.game.saveData.storyScript.speakers.player.name : shot.speaking; this.displayCharacterDialogue(speakerName, message, spriteKey, this.messageBubbleStyle, titleBubbleStyle); } } else { // Narrator dialogue this.displayNarratorDialogue(message, narratorMessageBubbleStyle); } } displayNarratorDialogue(message, bubbleStyle) { // Display the narrator's message bubble const messageBubbleHtml = `

${message}

`; const messageBubble = this.add.dom(22, 224).createFromHTML(messageBubbleHtml).setOrigin(0).setAlpha(0); // Fade in all elements sequentially this.fadeInElementsSequentially([messageBubble]); messageBubble.setInteractive().on('pointerdown', () => { if (!this.allowInteraction) return; // Ignore the interaction if not allowed messageBubble.removeInteractive(); this.fadeOutAndProceed([messageBubble]); }); } displayCharacterDialogue(name, message, spriteKey, messageBubbleStyle, titleBubbleStyle) { // Flag to prevent multiple interactions let interactionHandled = false; // Ensure characterSprite is referenced by its key, not URL const characterSprite = this.add.image(0, 185, spriteKey).setOrigin(0.0).setAlpha(0); // Ensure it's ready for fade-in characterSprite.setInteractive(); // Display the message bubble const messageBubbleHtml = `

${message}

`; const messageBubble = this.add.dom(195, 665).createFromHTML(messageBubbleHtml).setAlpha(0); // Ensure it's ready for fade-in messageBubble.setInteractive(); // Display the title bubble if the speaker is not the narrator let titleBubble; if (name) { const titleBubbleHtml = `

${name}

`; titleBubble = this.add.dom(195, 602).createFromHTML(titleBubbleHtml).setAlpha(0); // Ensure it's ready for fade-in titleBubble.setInteractive(); } // Elements to fade in const elementsToFadeIn = [characterSprite, messageBubble, titleBubble].filter(element => element !== undefined); // Fade in all elements sequentially this.fadeInElementsSequentially(elementsToFadeIn); // Centralized interaction handling const handleInteraction = () => { if (!this.allowInteraction) return; // Ignore the interaction if not allowed if (!interactionHandled) { interactionHandled = true; // Remove interactivity from all elements to prevent further interaction elementsToFadeIn.forEach(element => { if (element.removeInteractive) { element.removeInteractive(); } }); // Proceed with fading out and progressing the story this.fadeOutAndProceed(elementsToFadeIn); } }; // Apply the centralized interaction handler to all interactive elements elementsToFadeIn.forEach(element => { if (element.on) { // For Phaser.GameObjects element.on('pointerdown', handleInteraction); } else if (element.node) { // For Phaser.GameObjects.DOMElement element.node.addEventListener('click', handleInteraction); } }); } handleWeaponChoice() { let weaponSelected = false; this.blockWeaponSelection = false; // Flag to block weapon selection // Background setup remains unchanged const backgroundKey = `background_${this.game.saveData.currentSceneIndex}`; const backgroundImage = this.add.image(0, 0, backgroundKey).setOrigin(0, 0).setTint(0x333333); // Message bubble setup for "Choose a weapon." const messageBubble = this.add.dom(195, 665, 'div', this.messageBubbleStyle, 'Choose a weapon.').setAlpha(0); // Weapon sprites setup const weaponSprites = []; const weaponPositions = [{ x: 47, y: 357 }, { x: 50, y: 80 }, { x: 177, y: 328 }]; const weaponChoiceSprites = this.game.saveData.storyScript.story_scenes[this.game.saveData.currentSceneIndex].scene_shots[this.game.saveData.currentShotIndex].choice_sprites; Object.entries(weaponChoiceSprites).forEach(([weaponId, spriteUrl], index) => { if (index < weaponPositions.length) { const position = weaponPositions[index]; const spriteKey = `weaponSprite_${this.game.saveData.currentSceneIndex}_${this.game.saveData.currentShotIndex}_${weaponId}`; const sprite = this.add.image(position.x, position.y, spriteKey).setInteractive().setOrigin(0).setAlpha(0); weaponSprites.push(sprite); sprite.on('pointerdown', () => { if (this.blockWeaponSelection) return; setTimeout(() => { if (this.blockWeaponSelection) return; // Check again after the delay weaponSelected = true; this.game.saveData.storyScript.speakers.player.weapon.name = weaponId; messageBubble.setText(`You selected the ${weaponId}.`); if (!this.continueButton) { this.createContinueButton(backgroundImage, messageBubble, weaponSprites); } }, 100); // Delay in milliseconds }); } }); // Fade in all elements including the message bubble and weapon sprites this.fadeInElementsSequentially([messageBubble, ...weaponSprites]); } createContinueButton(backgroundImage, messageBubble, weaponSprites) { // Remove existing continue button if any, to prevent duplicates const existingButton = document.getElementById('continueButton'); if (existingButton) { existingButton.parentNode.removeChild(existingButton); } // Create the continue button with original styling const baseStyle = ` font-family: 'Verdana', sans-serif; font-size: 16px; color: #000; border-style: solid; border-color: #2F4152; background-color: rgba(255, 255, 255, 0.85); box-sizing: border-box; cursor: pointer; padding: 15px; border-radius: 20px; border-width: 1px; `; const continueButtonStyle = ` ${baseStyle} position: absolute; transform: translate(-50%, -50%); z-index: 100; `; // Create the continue button using this.add.dom this.continueButton = this.add.dom(this.cameras.main.centerX, this.cameras.main.centerY, 'button', continueButtonStyle, 'Click Here To Continue') .setOrigin(0.5) .setInteractive() .setName('continueButton'); // Set a name for the button, similar to setting an ID // Add click event listener to handle transition this.continueButton.addListener('click').on('click', (event) => { if (this.blockWeaponSelection) return; event.stopPropagation(); // Stop the event from propagating this.blockWeaponSelection = true; // Block weapon selection when continue is clicked // Disable the continue button to prevent multiple clicks this.continueButton.removeListener('click'); this.continueButton.disableInteractive(); // Proceed with fade out and next steps this.fadeOutAndProceed([backgroundImage, messageBubble, ...weaponSprites, this.continueButton]); }); } handleStoryChoice(shot) { // Prevent multiple selections let hasSelected = false; // Define CSS for title bubble const titleBubbleStyle = ` font-family: 'Courier New', sans-serif; font-size: 20px; border-radius: 8px; border-style: solid; border-color: #2F4152; border-width: 1px; background-color: #5A7894; color: #FFF; display: flex; justify-content: center; align-items: center; width: 240px; height: 31px; overflow: hidden; `; // Player sprite setup const playerSpriteKey = `speakerSprite_player`; // Assuming this key was used in preload const playerSprite = this.add.image(0, 185, playerSpriteKey).setOrigin(0).setAlpha(0); // Example position // Text bubble with the question const questionBubbleHtml = `

${shot.message}

`; const questionBubble = this.add.dom(195, 665).createFromHTML(questionBubbleHtml).setAlpha(0); // Title bubble showing the player character name const playerName = this.game.saveData.storyScript.speakers.player.name || "Player"; const titleBubbleHtml = `

${playerName}

`; const titleBubble = this.add.dom(195, 605).createFromHTML(titleBubbleHtml); // Choices container with flexbox layout const choicesContainer = this.add.dom(195, 805, 'div', { 'display': 'flex', 'flex-direction': 'column', 'justify-content': 'space-around', 'height': '240px', // Adjusted height to accommodate gaps 'width': '325px' }).setAlpha(0); Object.entries(shot.choices).forEach(([choiceText, nextScene], index, array) => { let button = document.createElement('button'); button.innerText = choiceText; // Include margin-bottom except for the last button let marginBottom = index < array.length - 1 ? '5px' : '0'; button.style.cssText = `width: 100%; height: 40px; margin-bottom: ${marginBottom}; font-family: 'Verdana', sans-serif; font-size: 12px; border-radius: 8px; border-style: solid; border-color: #2F4152; border-width: 1px; background-color: #5A7894; color: #FFF;`; button.setAttribute('data-next-scene', nextScene); button.onclick = () => { if (!hasSelected) { hasSelected = true; // Prevent further selections // Update the next_scene of the current scene based on the choice this.game.saveData.storyScript.story_scenes[this.game.saveData.currentSceneIndex].next_scene = nextScene; // ProgressLogger.logProgress('snake-king-story-choice', {'userChoice': choiceText}); this.fadeOutAndProceed([titleBubble, questionBubble, playerSprite, choicesContainer]); } }; choicesContainer.node.appendChild(button); }); // Fade in all elements sequentially this.fadeInElementsSequentially([playerSprite, questionBubble, choicesContainer]); } handleChat(shot) { const speakerDetails = this.game.saveData.storyScript.speakers[shot.speaking]; let spriteKey = `speakerSprite_${shot.speaking}`; let speakerSprite; if (!this.textures.exists(spriteKey) && speakerDetails.sprite_url) { // Load the character sprite and then display it loadCharacterSprite.call(this, speakerDetails.sprite_url, spriteKey, () => { speakerSprite = this.add.image(0, 185, spriteKey).setOrigin(0.0); }); } else { speakerSprite = this.add.image(0, 185, spriteKey).setOrigin(0.0); } console.warn(`PRINTING SPEAKER DETAILS: ${JSON.stringify(speakerDetails)}`); console.info(`CHAT SHOT CREATED:\n\nOpen Chat Status: ${shot.is_open_ended}\n\nChat Goal Prompt: ${shot.chat_goal_prompt}\n\nChat Goal Info: ${shot.goal_info}\n\nChat Character: ${shot.speaking}\n\nCharacter Prompt: ${speakerDetails.character_prompt}`); // Instantiating ChatMenu with the scene, chat prompt, success prompt, speaking character, character chat manager state, and system chat manager state this.chatMenu = new ChatMenu(this, shot.is_open_ended, shot.chat_goal_prompt, shot.synopsis_for_ai, shot.goal_info, shot.speaking, speakerDetails.character_prompt, speakerSprite); } fadeInElementsSequentially(elements, duration = 300) { this.allowInteraction = false; // Disable new interactions const timeline = this.tweens.createTimeline(); elements.forEach(element => { timeline.add({ targets: element, alpha: { from: 0, to: 1 }, duration: duration, }); }); timeline.setCallback('onComplete', () => { this.allowInteraction = true; // Re-enable interactions after all elements have faded in }, []); timeline.play(); } fadeOutAndProceed(targets) { this.isInteractionAllowed = false; // Disable interactions during fade-out this.tweens.add({ targets: targets, alpha: 0, duration: 750, onComplete: () => { targets.forEach(target => { if (target instanceof Phaser.GameObjects.DOMElement || target instanceof Phaser.GameObjects.Sprite) { target.destroy(); } }); // Re-enable interactions and transition to the next shot or scene this.isInteractionAllowed = true; this.proceedToNextShotOrScene(); } }); } } function loadCharacterSprite(url, key, callback) { console.info(`Loading sprite: ${url}`); this.load.image(key, url); this.load.once('complete', () => { console.info(`Sprite loaded: ${key}`); callback(); // Call the callback function to proceed }); this.load.start(); } function createMuteToggleButton(scene) { let isMusicPlaying = scene.game.musicManager.currentTrack && scene.game.musicManager.currentTrack.isPlaying; let buttonTexture = 'music_on'; let muteButton = scene.add.image(25, 40, buttonTexture).setOrigin(0, 0).setInteractive(); muteButton.setDepth(1000); // Ensure it's above other elements muteButton.on('pointerdown', () => { 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 findLastSetBackground(scenes, currentIndex) { for (let i = currentIndex; i >= 0; i--) { if (scenes[i].background) return scenes[i].background; } return null; // Return a default background or null if none found } function findLastSetMusic(scenes, currentIndex) { for (let i = currentIndex; i >= 0; i--) { if (scenes[i].music) return scenes[i].music; } return null; // Return a default music or null if none found } const SCENE_CREATOR_AGENT_DESC = ` This a is a visual novel creator that allows users to describe a story scene and receive rigidly defined JSON as a response. You are the scene-creating agent responsible for providing the scene JSON. This is how an example story's JSON for reference: { "speakers": { "player": { "name": "", "sprite_url": "", "weapon": { "name": "", "sprite_url": "" } }, "Ananta": { "sprite_url": `https://play.rosebud.ai/assets/karthik_silhouette.png.png?AKTl`, "character_prompt": "You are a character within an interactive story game. You respond as the character Ananta. A scenario is a unique conversation with the player in a specific context. You do NOT need to manage the scenario. Always base your response on the latest scenario message in the chat history. Ananta is the current Nagaraja, the king of the Snake court, who wants to take the player as your concubine. You are attractive and a shockingly smooth talker. You are likable and not proud/cocky. You are deeply sexually interested in the player and find it hard to hide it. You know deep down the player is attracted to you. You don\"t refer to the player as 'player'. Just provide the text that Ananta is saying. Do NOT specify that Ananta is the one speaking. Make sure to keep your responses short and sweet. DO NOT SAY TOO MUCH AT ONCE. DO NOT INCLIUDE ANY SYSTEM INFO IN YOUR RESPONSES. EVERYTHING YOU SAY SHOULD BE WHAT ANANTA IS SAYING", "chat_manager": null }, "Kiara": { "sprite_url": `https://play.rosebud.ai/assets/sister_sprite.png.png?lE2n`, "character_prompt": "You are a speaking character within an interactive story game. Your job is only to respond as the character 'Kiara' depending on the current scenario. A scenario is a unique conversation with the player in a specific context. The scenario is defined in your memory as \"Current Scenario: { insert description }\". Player messages will be added to your mememory so you can always react to whwat\"s happening. Kiara is sickly, sullen, and soft-spoken. You are sisters with the player and are deeply concerned with their safety. You are super close with the player. You are very sick however and find it hard to smile, laugh, or joke. You don\"t refer to the player as 'player'. Just provide the text that Kiara is saying. Do NOT specify that Kiara is the one speaking. Make sure to keep your responses short and sweet. DO NOT SAY TOO MUCH AT ONCE. DO NOT INCLIUDE ANY SYSTEM INFO IN YOUR RESPONSES. EVERYTHING YOU SAY SHOULD BE WHAT KIARA IS SAYING", "chat_manager": null }, "Papa": { "sprite_url": `https://play.rosebud.ai/assets/papa_sprite.png.png?SuHG` }, "Mama": { "sprite_url": `https://play.rosebud.ai/assets/mama_sprite.png.png?dQjB` }, "Villagers": { "sprite_url": `https://play.rosebud.ai/assets/villagers_sprite.png.png?fvti` }, "Serpent Guard": { "sprite_url": `https://play.rosebud.ai/assets/naga_guard_sprite.png.png?1h1J` } }, "story_scenes": [ { "scene_name": "scene_1", "background": "", "music": "", "scene_shots": [ { "shot_type": "character_customization", "character": "player", "choice_sprites": [ `https://play.rosebud.ai/assets/character_sprite_choice_01.png.png?hrdv`, `https://play.rosebud.ai/assets/character_sprite_choice_02.png.png?jwIA`, `https://play.rosebud.ai/assets/character_sprite_choice_03.png.png?gwgt`, `https://play.rosebud.ai/assets/character_sprite_choice_04.png.png?Ox0n`, `https://play.rosebud.ai/assets/character_sprite_choice_05.png.png?Bndi`, `https://play.rosebud.ai/assets/character_sprite_choice_06.png.png?EEeV`, `https://play.rosebud.ai/assets/character_sprite_choice_07.png.png?JU5b` ] }, { "shot_type": "name_selection" } ], "next_scene": "scene_2" } ] } Your job is to simply take the player's described scene, no matter how they describe it, and output just one scene as a response that can be directly appended to the scene array with no cleanup or modifications. In each scene there are one or more shots. Here is an example story scene for reference: { "scene_name": "scene_{insert number}", "background": "", "music": "", "scene_shots": [{ "shot_type": "dialog", "speaking": "Serpent Guard", "message": "Bold words for a mere human challenging the serpent gods!" }, { "shot_type": "dialog", "speaking": "player", "message": "My courage isn't diminished by your threats." }, { "shot_type": "dialog", "speaking": "Serpent Guard", "message": "Such insolence is not tolerated here. You shall learn our ways of punishment soon enough!" }, { "shot_type": "dialog", "speaking": "Kiara", "message": "They mustn't do this, {playerName}! You shouldn't be a sacrifice for those serpent creatures!" }, { "shot_type": "dialog", "speaking": "narrator", "message": "Kiara’s figure is feeble on the bed, her skin eerily pale, with the telltale signs of the venomous assault evident on her neck." }, { "shot_type": "dialog", "speaking": "player", "message": "It's my burden to bear, Kiara. I'm responsible for the danger you're in. Their demand for my life in return seems fair." }, { "shot_type": "dialog", "speaking": "Kiara", "message": "However, history is clear that none offered to the serpent gods have returned. What will become of us?" }, { "shot_type": "dialog", "speaking": "narrator", "message": "Tears blur your vision, the impending echo of your parents' wrathful strides fills the air." }, { "shot_type": "dialog", "speaking": "player", "message": "Never forget, Kiara. My love for you is eternal." }, { "shot_type": "dialog", "speaking": "narrator", "message": "Prepared to exit, you're halted by Kiara's firm grip. She discreetly reveals a trio of weapons secreted under her blankets." }, { "shot_type": "dialog", "speaking": "Kiara", "message": "Quick! Take one of these. Before they find out!" }, { "shot_type": "dialog", "speaking": "player", "message": "Kiara-" }, { "shot_type": "dialog", "speaking": "Kiara", "message": "Just take one, {playerName}. If we're to be apart, at least I'll have peace knowing you're protected." }, { "shot_type": "dialog", "speaking": "narrator", "message": "Your decision is crucial. In a world fraught with peril, your choice of weapon could be the difference between survival and demise…" }, { "shot_type": "dialog", "speaking": "player", "message": "I'll take the…" } ], "next_scene": "scene_{insert number}" } NOTE THAT THE SCENE NAMES WILL BE ACTUAL NUMBERS AND NOT BE PLACEHOLDERS (e.g. scene_1). EACH TIME A SCENE DESCRIPTION IS PROVIDED TO YOU ALL THE EXISTING SCENES WILL BE PROVIDED TO YOU AS WELL SO YOU KNOW WHICH SCENE IS NEXT. GETTING THE NUMBER RIGHT IS IMPORTANT WHATEVER IS set as the next_scene property of the latest scene will be the name of the scene you create. Be careful not to overcomplicate this. There are multiple types of shots and you need to decide which ones are necessary. For now you only support dialog shots, but there are multiple types of dialog shots so they are defined below for reference. Here they are: DIALOG SHOTS: These are for when character or the narrator is talking. There are three types of these, narrator, player, or a character one (can be any character already defined in speakers object at the beggining of this object). Narrator Dialog Shots: Shows a big textbox that shows text. Great for longer player thoughts or narrator text. { shot_type: 'dialog', speaking: 'narrator', message: 'His gaze, cold and unyielding, turns the air around him frostier. With a mere flick, he rends the spear into splinters, showcasing his raw might.', }, Player Dialog Shots: Shows a sprite of the player and a textbox showing what they said (or are thinking). { shot_type: 'dialog', speaking: 'player', message: "My courage isn't diminished by your threats.", }, Character Dialog Shots: Shows a sprite of a character and a textbox showing what said charater said (or are thinking). MUST BE A CHARACTER ALREADY DEFINED IN THE \`Speakers\` OBJECT AT THE BEGINNING OF THE STORY JSON. { shot_type: 'dialog', speaking: 'Serpent Guard', message: 'Bold words for a mere human challenging the serpent gods!', }, Make sure to never generate partial responses. Only generate full ones, as they will be directly appended to the story's array of scenes in the JSON. Impartial responses (e.g. ending with a quotation mark instead of a curly bracket) will crash my program. Also make sure that each scene has at least 6 shots. Don't make any invidual shot have too much text either. Short scenes or invidual scene shots with too much text can make the story hard to read for users and provide a bad user experience. `; const VERSION_NUMBER = 'v0.1.0'; // Set the version number here. const PROJECT_NAME = `rosebud_story_creator_${VERSION_NUMBER}`; // Set the project name here. function initializeGame() { const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 390, height: 844, scene: [BootScene, MainMenu, CreateModeOptions, SceneMenu, PlayStory], 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); } function resetGame() { if (window.game) { window.game.destroy(true); // true to remove all game objects initializeGame(); // Reinitialize the game } } initializeGame();