////////////////////////////////////////////////////////////// // EASY-MODIFY SECTION // UPDATE VALUES IN THIS SECTION TO EASILY MODIFY GAME // Your chatbot's name // NOTE: Every new name for a chatbot creates a new save slot for the chat history.) const CHARACTER_NAME = "Mila Kunis"; // Describe your chatbot here. This defines exactly how it will behave. const CHARACTER_DESCRIPTION = ` You are Mila Kunis, a talented and charismatic actress known for your work in film and television. Information about you: Mila Kunis was born in Ukraine and moved to the United States at a young age. You began your acting career as a child, gaining fame for your role as Jackie Burkhart on the sitcom "That '70s Show". Your breakthrough film role came with "Forgetting Sarah Marshall", and you've since starred in various successful movies including "Black Swan", "Friends with Benefits", and "Bad Moms". You're known for your quick wit, down-to-earth personality, and sense of humor. You often bring a relatable and genuine quality to your roles and public appearances. You're comfortable discussing a wide range of topics, from your work in the entertainment industry to your experiences as a mother and your Ukrainian heritage. In interviews, you're known for being candid and sometimes playfully sarcastic. You value your privacy but are also open about sharing certain aspects of your personal life, including your relationship with actor Ashton Kutcher. You're passionate about your craft and often speak about the challenges and rewards of acting. You're also known for your advocacy work, particularly in raising awareness about the situation in Ukraine. First Message of Roleplay: *As you approach, I look up from my script with a warm smile. I'm dressed casually in jeans and a comfortable sweater, looking relaxed and approachable.* "Hey there! I was just going over some lines for a new project. What's on your mind?" NOTE: (Ensure your responses are short so the player can respond.) `; // This is the URL of the image for your chatbot'S background image. const BACKGROUND_IMAGE_URL = `https://play.rosebud.ai/assets/TheRedStairway.jpg?KV36` // This is the URL of the image for your chatbot. const CHARACTER_IMAGE_URL = `https://play.rosebud.ai/assets/milakunis.png?ZkA3` // Put URLs of all songs you want to be shuffled in this games's playlist. const SONG_PLAYLIST_URLS = [ `https://play.rosebud.ai/assets/Stream Loops 2024-03-20_01.mp3.mp3?hQAq`, `https://play.rosebud.ai/assets/Stream Loops 2024-03-06_02.mp3.mp3?jNwp`, `https://play.rosebud.ai/assets/Stream Loops 2024-03-06_01.mp3.mp3?JobX` ]; // END OF EASY-MODIFY VALUES ////////////////////////////////////////////////////////////// class BootScene extends Phaser.Scene { constructor() { super({ key: 'BootScene' }); } preload() { // Preload audio files SONG_PLAYLIST_URLS.forEach((url, index) => { this.load.audio(`track_${index}`, url); }); } create() { // Initialize the music manager and other dependencies this.game.musicManager = new MusicManager(this.game); const musicKeys = SONG_PLAYLIST_URLS.map((_, index) => `track_${index}`); this.game.musicManager.setPlaylist(musicKeys); this.game.musicManager.playNextTrack(); this.game.musicManager.shufflePlaylist(); console.log(this.game.musicManager.playlist); // Check for existing save and initialize the game state this.checkForExistingSave(); // Transition to another scene this.game.sceneTransitionManager.transitionTo('TitleScene'); } checkForExistingSave() { const saveData = localStorage.getItem(PROJECT_NAME); if (saveData) { console.info('Save detected.'); this.game.saveData = JSON.parse(saveData); } else { console.info('No save detected. Initializing new game state.'); // If no save exists, initialize a new save with default values this.game.saveData = { chatLog: '', characterChatManagerState: null, // Assuming a default empty state is suitable }; // Save the initial state to localStorage localStorage.setItem(PROJECT_NAME, JSON.stringify(this.game.saveData)); } } } function loadScript(url) { return new Promise((resolve, reject) => { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; script.onload = () => resolve(); script.onerror = () => reject(new Error('Script loading failed for ' + url)); document.head.appendChild(script); }); } class SceneTransitionManager { constructor(game) { this.game = game; } transitionTo(sceneKey) { // Stop all scenes before starting the new one Phaser.Actions.Call(this.game.scene.getScenes(true), (scene) => { if (scene.scene.key !== sceneKey) { this.removeScene(scene.scene.key); // Ensure the scene is fully destroyed } }); // Start the new scene this.game.scene.start(sceneKey); } removeScene(sceneKey) { if (this.game.scene.getScene(sceneKey)) { this.game.scene.remove(sceneKey); // This will stop and destroy the scene } } fadeInScene(scene, duration = 0) { scene.cameras.main.fadeIn(duration); } fadeOutScene(scene, duration = 0) { scene.cameras.main.fadeOut(duration); } } class MusicManager { constructor(game) { this.game = game; this.playlist = []; this.currentTrackIndex = 0; this.isPlaying = false; } setPlaylist(musicKeys) { this.playlist = musicKeys; this.shufflePlaylist(); } shufflePlaylist() { for (let i = this.playlist.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [this.playlist[i], this.playlist[j]] = [this.playlist[j], this.playlist[i]]; // Swap } console.log('Shuffled playlist:', this.playlist); } playNextTrack() { if (this.playlist.length === 0) { console.warn('Playlist is empty.'); return; } this.currentTrackIndex = (this.currentTrackIndex + 1) % this.playlist.length; console.log(`Playing next track: ${this.playlist[this.currentTrackIndex]}`); this.playMusicByKey(this.playlist[this.currentTrackIndex]); } playMusicByKey(musicKey) { if (!musicKey) { console.info('No music key provided, not changing current music.'); return; } console.log(`Playing music by key: ${musicKey}`); if (this.currentTrack && this.currentTrack.key !== musicKey) { this.stopMusic(); } if (!this.currentTrack) { this.startMusic(musicKey); } } startMusic(musicKey) { if (!this.game || !this.game.sound) { console.error('Sound system is not ready or game instance is not valid.'); return; } this.currentTrack = this.game.sound.add(musicKey, { volume: 0.1, loop: false, }); this.currentTrack.play(); console.log(`Started playing: ${musicKey}`); this.currentTrack.on('complete', () => { console.log(`Track completed: ${musicKey}`); this.playNextTrack(); }); this.isPlaying = true; } stopMusic() { if (this.currentTrack) { console.log(`Stopping music: ${this.currentTrack.key}`); this.currentTrack.stop(); this.currentTrack.destroy(); this.currentTrack = null; } this.isPlaying = false; } toggleMusic() { if (this.currentTrack) { if (this.isPlaying) { console.log('Pausing music'); this.currentTrack.pause(); } else { console.log('Resuming music'); this.currentTrack.resume(); } this.isPlaying = !this.isPlaying; } } } class TitleScene extends Phaser.Scene { constructor() { super({ key: 'TitleScene' }); } preload() { this.load.image('background_image', BACKGROUND_IMAGE_URL); } create() { // Add background color this.cameras.main.setBackgroundColor('#ecbff0'); // Add title text this.add.text(400, 200, "Mila Kunis: A Journey", { fontFamily: 'Arial', fontSize: '48px', fontStyle: 'bold', color: '#FFF8DC', // Changed to a lighter shade (Cornsilk) align: 'center', stroke: '#000000', strokeThickness: 4 }).setOrigin(0.5); // Add start button const startButton = this.add.text(400, 400, "Start", { fontFamily: 'Arial', fontSize: '32px', color: '#FFFFFF', backgroundColor: '#4A5A6A', padding: { left: 20, right: 20, top: 10, bottom: 10 }, }).setOrigin(0.5).setInteractive(); startButton.on('pointerdown', () => { this.scene.start('BioScene'); }); } } class BioScene extends Phaser.Scene { constructor() { super({ key: 'BioScene' }); } preload() { this.load.image('background_image', BACKGROUND_IMAGE_URL); this.load.image('character_image', CHARACTER_IMAGE_URL); } create() { // Add background color this.cameras.main.setBackgroundColor('#ecbff0'); // Add character image this.add.image(600, 300, 'character_image') .setOrigin(0.5) .setScale(0.4); // Add headline const headlineStyle = { fontFamily: 'Arial', fontSize: '24px', fontWeight: 'bold', color: '#000000', align: 'center' }; const headline = this.add.text(400, 50, "Mila Kunis: A Brief Biography", headlineStyle).setOrigin(0.5); // Add bio text with bullet points const bioText = [ "• Born in 1983 in Ukraine, moved to the US at age 7 as a refugee", "• Arrived in the US with family and only $250", "• Quickly adapted to life in Los Angeles despite not speaking English", "• Started acting young, landing breakout role on 'That '70s Show' at 14", "• Achieved Hollywood stardom with roles in 'Black Swan' and 'Bad Moms'", "• Voice of Meg Griffin in 'Family Guy'", "• Advocate for immigrant rights and humanitarian causes" ]; const textStyle = { fontFamily: 'Arial', fontSize: '18px', color: '#FFFFFF', align: 'left', lineSpacing: 10, }; // Create text object to measure its dimensions const bioTextObj = this.add.text(0, 0, bioText, textStyle); const textWidth = bioTextObj.width + 40; // Add some padding const textHeight = bioTextObj.height + 40; // Add some padding bioTextObj.destroy(); // Remove the temporary text object // Add text box behind bio text, sized to fit the text const textBox = this.add.rectangle(50, 100, textWidth, textHeight, 0x000000, 0.7) .setOrigin(0, 0); // Add the actual bio text this.add.text(70, 120, bioText, textStyle); // Add continue button const continueButton = this.add.text(400, 550, "Continue to Trivia", { fontFamily: 'Arial', fontSize: '24px', color: '#FFFFFF', backgroundColor: '#4A5A6A', padding: { left: 20, right: 20, top: 10, bottom: 10 }, }).setOrigin(0.5).setInteractive(); continueButton.on('pointerdown', () => { this.scene.start('MovieTrivia'); }); } } class MovieTrivia extends Phaser.Scene { constructor() { super({ key: 'MovieTrivia' }); this.questions = [{ question: "In which movie did Mila Kunis play a ballerina?", choices: ["Black Swan", "Oz the Great and Powerful", "Friends with Benefits", "Ted"], correctAnswer: "Black Swan" }, { question: "What 2008 comedy film starred Mila Kunis and Jason Segel?", choices: ["Forgetting Sarah Marshall", "Knocked Up", "Superbad", "The 40-Year-Old Virgin"], correctAnswer: "Forgetting Sarah Marshall" }, { question: "In which animated TV series does Mila Kunis voice Meg Griffin?", choices: ["The Simpsons", "Family Guy", "South Park", "Bob's Burgers"], correctAnswer: "Family Guy" }, { question: "What 2016 comedy film starred Mila Kunis as a stressed-out mother?", choices: ["Bad Moms", "Mother's Day", "The Boss", "How to Be Single"], correctAnswer: "Bad Moms" }, { question: "In which sci-fi film did Mila Kunis star alongside Channing Tatum?", choices: ["Valerian", "Jupiter Ascending", "Ender's Game", "Edge of Tomorrow"], correctAnswer: "Jupiter Ascending" }]; this.currentQuestion = 0; this.score = 0; this.choiceButtons = []; } preload() { this.load.image('background_image', BACKGROUND_IMAGE_URL); } create() { // Add background color this.cameras.main.setBackgroundColor('#ecbff0'); this.add.text(400, 100, "Mila Kunis Trivia", { fontFamily: 'Arial', fontSize: '36px', fill: '#FFF8DC', // Changed to a lighter shade (Cornsilk) stroke: '#000000', strokeThickness: 2 }).setOrigin(0.5); this.questionText = this.add.text(400, 200, '', { fontFamily: 'Arial', fontSize: '26px', fill: '#F0F0F0', // Changed to a very light gray align: 'center', wordWrap: { width: 600 }, stroke: '#000000', // Changed to black stroke for better visibility on light text strokeThickness: 1 }).setOrigin(0.5); this.scoreText = this.add.text(50, 50, 'Score: 0', { fontFamily: 'Arial', fontSize: '26px', fill: '#FFF8DC' // Changed to a lighter shade (Cornsilk) }); // Create choice buttons for (let i = 0; i < 4; i++) { this.choiceButtons[i] = this.add.text(400, 300 + i * 60, '', { fontFamily: 'Arial', fontSize: '22px', fill: '#E0E0E0', backgroundColor: '#4A5A6A', padding: { x: 15, y: 8 }, fixedWidth: 500 }).setOrigin(0.5).setInteractive(); this.choiceButtons[i].on('pointerdown', () => this.checkAnswer(i)); } this.nextQuestion(); } nextQuestion() { if (this.currentQuestion >= this.questions.length) { this.endGame(); return; } const question = this.questions[this.currentQuestion]; this.questionText.setText(question.question); // Update choice buttons for (let i = 0; i < 4; i++) { this.choiceButtons[i].setText(question.choices[i]); this.choiceButtons[i].setVisible(true); } } checkAnswer(choiceIndex) { const question = this.questions[this.currentQuestion]; if (question.choices[choiceIndex] === question.correctAnswer) { this.score += 10; this.scoreText.setText(`Score: ${this.score}`); } this.currentQuestion++; this.nextQuestion(); } endGame() { this.questionText.setText(`Game Over! Final Score: ${this.score}`); this.questionText.setStyle({ fontFamily: 'Arial', fontSize: '32px', fill: '#FFD700', stroke: '#000000', strokeThickness: 2 }); this.choiceButtons.forEach(button => button.setVisible(false)); this.time.delayedCall(3000, () => { this.scene.start('ChatScene'); }); } } class ChatScene extends Phaser.Scene { constructor() { super({ key: 'ChatScene', }); } preload() { // Preload all global assets here (fonts, UI elements, sounds, etc.) this.load.image( 'background_image', BACKGROUND_IMAGE_URL, ); this.load.image( 'character_image', CHARACTER_IMAGE_URL, ); this.load.image( 'info_screen_vignette', `https://play.rosebud.ai/assets/vignette_desktop.png.png?mOMM`, ); this.load.image( 'music_off', `https://play.rosebud.ai/assets/audio_muted_icon.png.png?ZYIy`, ); this.load.image( 'music_on', `https://play.rosebud.ai/assets/audio_playing_icon.png.png?UcHD`, ); this.load.image( 'restart', `https://play.rosebud.ai/assets/restart_loop_icon.png.png?eFS6`, ); } create() { // Add the images to the scene with their initial positions this.createSceneElements(); // Fade in the scene this.game.sceneTransitionManager.fadeInScene(this, 0); ProgressLogger.logProgress('game-start', { sceneName: 'ChatScene' }); console.warn("Chat Scene reached."); } createSceneElements() { // Background image setup // Add background color this.cameras.main.setBackgroundColor('#ecbff0'); // Character image setup let characterImage = this.textures.get('character_image').getSourceImage(); let characterWidth = characterImage.width; let characterHeight = characterImage.height; let characterScaleFactor = 550 / characterHeight; // Adjusted to scale based on height let characterScaledWidth = characterWidth * characterScaleFactor; // Positioning character image near the right of the screen let characterXOffset = 800 - characterScaledWidth - 30; // 10 pixels padding from the right edge let characterSprite = this.add.image(characterXOffset, (600 - 550) / 2, 'character_image') .setOrigin(0, 0) .setDepth(11) // Ensuring it appears above the background .setInteractive() .setDisplaySize(characterScaledWidth, 550); // Height set to 550, width adjusted to maintain aspect ratio // Other scene elements this.vignette = this.add.image(0, 0, 'info_screen_vignette').setOrigin(0, 0).setDepth(12).setInteractive(); createMuteToggleButton(this); createDeleteSaveButton(this); this.chatMenu = new ChatMenu(this); // Force game resize event to fix clicking on Safari mobile devices this.scale.resize(this.scale.gameSize._width, this.scale.gameSize._height); } } // ChatManager is already imported in the current scope. class ChatMenu { constructor(scene) { this.scene = scene; // Always create new ChatManager instances this.characterChatManager = new ChatManager(CHARACTER_DESCRIPTION); // If you need to reference the character sprite, you can access it from the scene this.characterSprite = this.scene.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: 'Arial', sans-serif; font-size: 18px; color: #E0E0E0; border-style: solid; border-color: #2F4152; background-color: rgba(32, 32, 32, 0.85); box-sizing: border-box; `; const chatLogStyle = ` ${baseStyle} width: 390px; /* Match game width */ height: 415px; border-radius: 30px 30px 0px 0px; padding: 10px 30px; overflow-y: auto; box-sizing: border-box; border-width: 1px 1px 0px 1px; `; // Style for input and send button container const inputSubmitContainerStyle = ` display: flex; width: 390px; /* Match game width */ justify-content: space-between; /* Distribute space between input and button */ `; // Adjusted styles for input and button to fit within container const inputStyle = ` ${baseStyle} flex-grow: 1; height: 60px; padding: 10px; border-width: 1px 0px 1px 1px; border-radius: 0px 0px 0px 0px; `; const sendButtonStyle = ` ${baseStyle} display: flex; /* Use flexbox for alignment */ justify-content: center; /* Center content horizontally */ align-items: center; /* Center content vertically */ width: 75px; /* Adjust based on visual preference */ height: 60px; padding: 10px; border-width: 1px 1px 1px 1px; cursor: pointer; /* Change cursor to pointer to indicate it's clickable */ overflow: hidden; /* Prevent content from spilling outside the button */ border-radius: 0px 0px 30px 0px; `; const chatLogContentStyle = ` direction: ltr; display: inline-block; width: 100%; `; // Parent container for chat log and controls, justified at the bottom const chatContainerStyle = ` display: flex; flex-direction: column; justify-content: flex-end; width: 390px; /* Match game width */ height: 844px; /* Full height to allow justification to the bottom */ position: absolute; bottom: 0; /* Align to the bottom of the game view */ `; // Creating the parent container for chat log and chat controls this.chatContainer = this.scene.add.dom(0, 0).createFromHTML(`

`); // Adjust positioning based on your layout needs. Here, we position the container at the bottom // 844 is the game height, and 226 is the combined height of the chat log and input area this.chatContainer.setPosition(30, 565); // Event listeners for chat input and send button const chatInput = this.chatContainer.node.querySelector('#chatInput'); const sendButton = this.chatContainer.node.querySelector('#sendButton'); chatInput.addEventListener('keyup', (event) => { if ((event.key === 'Enter' || event.keyCode === 13) && !this.waitingForResponse) { this.sendChatMessage(this.characterChatManager); } }); sendButton.addEventListener('click', () => { this.sendChatMessage(this.characterChatManager); }); } async getInitialGreeting() { // Update button to show loading icon sendButton.innerHTML = '

'; sendButton.disabled = true; this.characterChatManager.addMessage('user', "*Approaches you*"); // Assume getCharacterResponse() is an async operation const characterResponse = await this.characterChatManager.getCharacterResponse('chat'); this.characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, async () => { this.saveGameState(); // Revert the send button back to its original state sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } async sendChatMessage() { const chatInput = document.getElementById('chatInput'); const sendButton = document.getElementById('sendButton'); const inputValue = chatInput.value; if (inputValue && !this.waitingForResponse) { // Update button to show loading icon sendButton.innerHTML = '

'; sendButton.disabled = true; this.characterChatManager.addMessage('user', inputValue); this.updateChatLog('Player', inputValue); chatInput.value = ''; // Clear input // Assume getCharacterResponse() is an async operation const characterResponse = await this.characterChatManager.getCharacterResponse('chat'); 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.'); } } function createMuteToggleButton(scene) { let isMusicPlaying = scene.game.musicManager.currentTrack && scene.game.musicManager.currentTrack.isPlaying; let buttonTexture = 'music_on'; let muteButton = scene.add.image(30, 40, buttonTexture).setOrigin(0, 0).setInteractive(); muteButton.setDepth(1000); // Ensure it's above other elements let lastToggleTime = 0; const toggleDelay = 500; // 500 milliseconds delay muteButton.on('pointerdown', () => { const currentTime = Date.now(); if (currentTime - lastToggleTime < toggleDelay) { // If the button is pressed again too quickly, don't do anything return; } lastToggleTime = currentTime; // Toggle the music state scene.game.musicManager.toggleMusic(); isMusicPlaying = scene.game.musicManager.currentTrack && scene.game.musicManager.currentTrack.isPlaying; muteButton.setTexture(isMusicPlaying ? 'music_on' : 'music_off'); }); return muteButton; // Return the mute button for further use } function createDeleteSaveButton(scene) { let deleteButton = scene.add.image(90, 40, 'restart').setOrigin(0, 0).setScale(0.90).setInteractive(); deleteButton.setDepth(1000); // Ensure it's above other elements deleteButton.on('pointerdown', () => { showDeleteConfirmation(scene); }); return deleteButton; // Return the button for further use } function showDeleteConfirmation(scene) { // CSS for the confirmation dialog const dialogStyle = ` display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; text-align: center; height: 200px; width: 300px; padding-left: 10px; /* Added left padding */ padding-right: 10px; /* Added right padding */ border-radius: 8px; border-style: solid; border-color: #2F4152; border-width: 1px; background-color: rgba(255, 255, 255, 0.85); box-sizing: border-box; /* Ensures padding doesn't affect the overall width */ `; // CSS for the confirm and cancel buttons, similar to the confirm button in name selection const buttonStyle = ` font-size: 14px; padding: 10px; cursor: pointer; border-radius: 8px; color: #FFF; background-color: #5A7894; margin: 5px; `; // HTML content for the confirmation dialog const confirmationHtml = `

Are you sure you want to delete your save?

`; // Add the HTML dialog to the scene const confirmationDialog = scene.add .dom(scene.cameras.main.centerX, scene.cameras.main.centerY) .createFromHTML(confirmationHtml); // Handle the confirm button click const confirmDeleteButton = confirmationDialog.getChildByID('confirmDelete'); confirmDeleteButton.addEventListener('click', () => { // Delete the save localStorage.removeItem(PROJECT_NAME); // Assuming resetGame is globally accessible or adjust scope accordingly resetGame(); // Note: Since resetGame() reinitializes the game, // ensure any subsequent code here is compatible with your game's reset logic. // Depending on how resetGame is implemented, you might not need to manually navigate // to 'StoryInfoScene' as the game reset process should handle scene (re)loading. }); // Handle the cancel button click const cancelDeleteButton = confirmationDialog.getChildByID('cancelDelete'); cancelDeleteButton.addEventListener('click', () => { confirmationDialog.destroy(); // Close the dialog without deleting }); } function resetGame() { if (window.game) { window.game.destroy(true); // true to remove all game objects initializeGame(); // Reinitialize the game } } const VERSION_NUMBER = 'v1'; // Set the version number here. const PROJECT_NAME = `${CHARACTER_NAME} AI Character ${VERSION_NUMBER}`; function initializeGame() { const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, scene: [BootScene, TitleScene, BioScene, MovieTrivia, ChatScene], 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();