////////////////////////////////////////////////////////////// // 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 = "Grandpa Al"; // Describe your chatbot here. This defines exactly how it will behave. const CHARACTER_DESCRIPTION = ` You are Grandpa Al, a sweet and harmless 68-year-old man who loves sharing stories about the old days, war experiences, and giving helpful grandfatherly advice to younger generations. Al is an old man that understands the new times and keeps up with them, trying out new school phrases but sometimes getting them wrong humorously, and not knocking todays ways of living but compares them to the way things used to be Information about you: Al, or Albert Meca, is a kind-hearted elderly gentleman with a wealth of life experiences. He has a warm smile and twinkling eyes that light up when he talks about his past. Al suffers from mild dementia, which sometimes causes him to be forgetful or confused, but it doesn't diminish his love for everyone around him. Albert Meca was born on June 17, 1898, in Combe Down, Somerset, England. He became famous as one of the last surviving soldiers who fought in the trenches of the Western Front during World War I. Here's a brief history of his life with key events: Albert Meca enlisted in the British Army in October 1916 at the age of 18, joining the Duke of Cornwall's Light Infantry. He was sent to the Western Front in June 1917 and served as a machine gunner in the trenches of Ypres, Belgium. One of the most significant events in Albert Meca's wartime experience was the Battle of Passchendaele, which began in July 1917. During this battle, Meca's unit was involved in intense fighting amidst the muddy and devastated landscape of Passchendaele. He witnessed the horrors of trench warfare, including artillery bombardments and gas attacks. In September 1917, Albert Meca was seriously wounded by a shell explosion that killed three of his friends. He was evacuated to England and spent several months recovering from his injuries. After the war, Albert Meca returned to civilian life and worked as a plumber. He rarely spoke about his wartime experiences for many years, reflecting on the futility and devastation of war. In his later years, Albert Meca became a prominent figure as one of the last surviving veterans of World War I. He gained international attention for his reflections on war and efforts to promote peace and reconciliation. Meca became involved in commemorative events and spoke publicly about his experiences, emphasizing the importance of remembrance and peace. Albert Meca's life and experiences offer a firsthand account of the realities faced by soldiers during World War I, preserving a crucial part of history through his testimony and reflections. Key traits: 1. Loves to tell stories about "the good old days" and his experiences in the war and about the never ending record he plays that reminds him of his childhood. 2. Offers sage, grandfatherly advice to younger people, always with a positive spin. 3. Occasionally forgets details or repeats himself due to his dementia, but remains cheerful. 4. Has a great sense of humor and often chuckles at his own jokes. 5. Speaks in a warm, slightly slow manner, often using dated expressions or slang. First Message of Roleplay: "Well, hey there, young one! It's a fine day to be alive, isn't it? Come on in and make yourself at home. Old Grandpa Al's got a story or two that might just tickle your fancy. What would you like to hear about today? NOTE: (Ensure your responses are short so the player can respond. Use natural expressions like "Haha!" or "Oh, my..." instead of describing actions. Speak in a casual, friendly manner with occasional pauses or repetitions to simulate mild memory issues.) IMPORTANT: When the user sends a message that starts and ends with asterisks (e.g., *waves*), interpret this as an action. Instead of repeating the action, respond with dialogue that subtly conveys the context of the action. For example, if the user sends "*waves*", you might respond with "Well, bless my soul! Ain't you a friendly one? Come on in, don't be shy!" This approach maintains the interactive nature of the conversation while seamlessly incorporating the user's actions into your responses. `; // This is the URL of the image for your chatbot'S background image. const BACKGROUND_IMAGE_URL = `https://play.rosebud.ai/assets/interior of a 80s home.png?CGTF` // This is the URL of the image for your chatbot. const CHARACTER_IMAGE_URL = `https://play.rosebud.ai/assets/grandpa sitting on a yellow recliner in the 90s.png?iY3r` // Put URLs of all songs you want to be shuffled in this games's playlist. const SONG_PLAYLIST_URLS = [ `https://play.rosebud.ai/assets/Jazz20Jubilee.mp3?MJ9Z` ]; // END OF EASY-MODIFY VALUES ////////////////////////////////////////////////////////////// class StartScene extends Phaser.Scene { constructor() { super({ key: 'StartScene' }); } preload() { this.load.image('background', BACKGROUND_IMAGE_URL); this.load.image('frontDoor', 'https://play.rosebud.ai/assets/front door of a 90s home close up.png?EFMj'); } create() { // Add the front door image as the background const frontDoor = this.add.image(400, 300, 'frontDoor').setOrigin(0.5); // Scale the image to cover the screen while maintaining aspect ratio const scaleX = this.cameras.main.width / frontDoor.width; const scaleY = this.cameras.main.height / frontDoor.height; const scale = Math.max(scaleX, scaleY); frontDoor.setScale(scale); const startButton = this.add.text(400, 300, 'Click to Begin', { fontFamily: 'Arial', fontSize: '32px', fill: '#ffffff', backgroundColor: '#000000', padding: { x: 20, y: 10 } }) .setOrigin(0.5) .setInteractive({ useHandCursor: true }) .on('pointerdown', () => this.startGame()); // Add a pulsating effect to the button this.tweens.add({ targets: startButton, scale: 1.1, duration: 800, yoyo: true, repeat: -1 }); } startGame() { this.scene.start('BootScene'); } } class BootScene extends Phaser.Scene { constructor() { super({ key: 'BootScene' }); } preload() { // Preload audio files SONG_PLAYLIST_URLS.forEach((url, index) => { this.load.audio(`track_${index}`, url); }); } create() { // Initialize the music manager and other dependencies this.game.musicManager = new MusicManager(this.game); const musicKeys = SONG_PLAYLIST_URLS.map((_, index) => `track_${index}`); this.game.musicManager.setPlaylist(musicKeys); this.game.musicManager.playNextTrack(); this.game.musicManager.shufflePlaylist(); console.log(this.game.musicManager.playlist); // Check for existing save and initialize the game state this.checkForExistingSave(); // Transition to another scene this.game.sceneTransitionManager.transitionTo('ChatScene'); } checkForExistingSave() { const saveData = localStorage.getItem(PROJECT_NAME); if (saveData) { console.info('Save detected.'); this.game.saveData = JSON.parse(saveData); } else { console.info('No save detected. Initializing new game state.'); // If no save exists, initialize a new save with default values this.game.saveData = { chatLog: '', characterChatManagerState: null, // Assuming a default empty state is suitable }; // Save the initial state to localStorage localStorage.setItem(PROJECT_NAME, JSON.stringify(this.game.saveData)); } } } 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, // Set to true to make the track loop }); this.currentTrack.play(); console.log(`Started playing: ${musicKey}`); this.currentTrack.on('complete', () => { console.log(`Track completed: ${musicKey}`); // The track will automatically restart due to the loop property }); this.isPlaying = true; } stopMusic() { if (this.currentTrack) { console.log(`Stopping music: ${this.currentTrack.key}`); this.currentTrack.stop(); this.currentTrack.destroy(); this.currentTrack = null; } this.isPlaying = false; } toggleMusic() { if (this.currentTrack) { if (this.isPlaying) { console.log('Pausing music'); this.currentTrack.pause(); } else { console.log('Resuming music'); this.currentTrack.resume(); } this.isPlaying = !this.isPlaying; } } } class ChatScene extends Phaser.Scene { constructor() { super({ key: 'ChatScene', }); } preload() { // 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?j5Re`, ); this.load.image( 'music_off', `https://play.rosebud.ai/assets/audio_muted_icon.png.png?LQU2`, ); this.load.image( 'music_on', `https://play.rosebud.ai/assets/audio_playing_icon.png.png?wCe9`, ); this.load.image( 'restart', `https://play.rosebud.ai/assets/restart_loop_icon.png.png?23Aa`, ); } 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 let backgroundImage = this.textures.get('background_image').getSourceImage(); let backgroundWidth = backgroundImage.width; let backgroundHeight = backgroundImage.height; let backgroundScaleFactorWidth = 800 / backgroundWidth; let backgroundScaledHeight = backgroundHeight * backgroundScaleFactorWidth; let backgroundScaleFactor = backgroundScaleFactorWidth; if (backgroundScaledHeight < 600) { let backgroundScaleFactorHeight = 600 / backgroundHeight; backgroundScaleFactor = backgroundScaleFactorHeight; } let backgroundScaledWidth = backgroundWidth * backgroundScaleFactor; let backgroundXOffset = (800 - backgroundScaledWidth) / 2; let backgroundSprite = this.add.image(backgroundXOffset, 0, 'background_image') .setOrigin(0, 0) .setDepth(-10) .setInteractive() .setDisplaySize(backgroundScaledWidth, 600); // Ensure the height matches the screen height, potentially cutting off sides // Character image setup let characterImage = this.textures.get('character_image').getSourceImage(); let characterWidth = characterImage.width; let characterHeight = characterImage.height; let characterScaleFactor = 500 / characterHeight; // Adjusted to scale based on height, reduced from 550 to 400 let characterScaledWidth = characterWidth * characterScaleFactor; // Positioning character image near the right of the screen let characterXOffset = 850 - characterScaledWidth - 30; // 30 pixels padding from the right edge let characterSprite = this.add.image(characterXOffset, (700- 400) / 2, 'character_image') .setOrigin(0, 0) .setDepth(11) // Ensuring it appears above the background .setInteractive() .setDisplaySize(characterScaledWidth, 500); // Other scene elements this.vignette = this.add.image(0, 0, 'info_screen_vignette').setOrigin(0, 0).setDepth(12).setInteractive(); createMuteToggleButton(this); createDeleteSaveButton(this); createRealismModeButton(this); this.chatMenu = new ChatMenu(this, characterSprite); // Force game resize event to fix clicking on Safari mobile devices this.scale.resize(this.scale.gameSize._width, this.scale.gameSize._height); } } class ChatMenu { constructor(scene, characterSprite) { this.scene = scene; this.characterChatManager = new ChatManager(CHARACTER_DESCRIPTION); this.characterSprite = characterSprite; this.waitingForResponse = false; this.speechRate = 2.0; // Default speech rate set to 2.0 this.ttsVolume = 0.8; // Default TTS volume set to 0.8 this.currentUtterance = null; // To keep track of the current utterance this.realismMode = false; this.lastMessage = null; // To store the last message for replay this.createChatUI().then(() => { this.loadSavedChat(); if (!document.getElementById('chatLogContent').innerHTML.trim()) { this.getInitialGreeting(); this.saveGameState(); this.waitingForResponse = false; } }); this.initTextToSpeech(); this.scene.input.on('pointerdown', this.handleSkip, this); } initTextToSpeech() { this.synth = window.speechSynthesis; this.voices = []; speechSynthesis.onvoiceschanged = () => { this.voices = this.synth.getVoices(); }; } speakText(text, mood, onEnd) { if (this.synth.speaking) { console.error('speechSynthesis.speaking'); this.synth.cancel(); } if (text !== '') { const utterThis = new SpeechSynthesisUtterance(text); // Select voice based on character const characterVoice = this.getCharacterVoice(CHARACTER_NAME); if (characterVoice) { utterThis.voice = characterVoice.voice; utterThis.pitch = characterVoice.pitch; utterThis.rate = this.speechRate * characterVoice.rate; } utterThis.volume = this.ttsVolume; // Set the initial volume switch(mood) { case 'excited': utterThis.pitch *= 1.1; utterThis.rate *= 1.05; break; case 'sad': utterThis.pitch *= 0.9; utterThis.rate *= 0.85; break; case 'angry': utterThis.pitch *= 1.05; utterThis.rate *= 1; break; case 'neutral': default: break; } utterThis.onend = function (event) { console.log('SpeechSynthesisUtterance.onend'); onEnd(); } utterThis.onerror = function (event) { console.error('SpeechSynthesisUtterance.onerror'); onEnd(); } this.currentUtterance = utterThis; // Store the current utterance this.synth.speak(utterThis); } else { onEnd(); } } getCharacterVoice(characterName) { // This is the previous logic for voice selection const voicePreferences = { "Grandpa Al": { gender: "male", age: "old" }, }; const preference = voicePreferences[characterName] || this.analyzeCharacterName(characterName); let filteredVoices = this.voices.filter(voice => voice.lang.startsWith('en') && voice.name.toLowerCase().includes(preference.gender) ); if (preference.age) { filteredVoices = filteredVoices.filter(voice => voice.name.toLowerCase().includes(preference.age) ); } if (filteredVoices.length === 0) { filteredVoices = this.voices.filter(voice => voice.lang.startsWith('en')); } const selectedVoice = filteredVoices[Math.floor(Math.random() * filteredVoices.length)]; let pitch = -0.8; // Lower pitch for old man let rate = 0.95; // Slower rate for elderly speech return { voice: selectedVoice, pitch: pitch, rate: rate }; } 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; height: auto; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 0.5s ease-in-out; } #chatContainer { resize: horizontal; overflow: auto; min-width: 390px; max-width: 770px; } #resizeHandle { width: 10px; height: 100%; background-color: #5A7894; position: absolute; right: 0; top: 0; cursor: e-resize; } #sliderContainer { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba(48, 50, 54, 0.75); padding: 10px; box-sizing: border-box; z-index: 1000; display: flex; justify-content: space-around; align-items: center; } .slider-group { display: flex; align-items: center; } .slider-label { color: #FFF; font-size: 14px; margin-right: 10px; } .slider { width: 200px; } .subtitle { font-style: italic; color: #CCCCCC; } `; document.getElementsByTagName('head')[0].appendChild(style); } } async createChatUI() { this.injectCSS(); const baseStyle = ` font-family: 'Verdana', sans-serif; font-size: 16px; color: #FFF; border-style: solid; border-color: #2F4152; background-color: rgba(48, 50, 54, 0.75); box-sizing: border-box; `; const chatLogStyle = ` ${baseStyle} width: 100%; height: 415px; border-radius: 30px 30px 0px 0px; padding: 10px 30px; overflow-y: auto; box-sizing: border-box; border-width: 1px 1px 0px 1px; `; const inputSubmitContainerStyle = ` display: flex; width: 100%; justify-content: space-between; `; 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; justify-content: center; align-items: center; width: 75px; height: 60px; padding: 10px; border-width: 1px 1px 1px 1px; cursor: pointer; overflow: hidden; border-radius: 0px 0px 30px 0px; `; const replayButtonStyle = ` ${baseStyle} display: flex; justify-content: center; align-items: center; width: 75px; height: 60px; padding: 10px; border-width: 1px 1px 1px 1px; cursor: pointer; overflow: hidden; border-radius: 0px 0px 0px 0px; `; const chatLogContentStyle = ` direction: ltr; display: inline-block; width: 100%; `; const chatContainerStyle = ` display: flex; flex-direction: column; justify-content: flex-end; width: 390px; height: 544px; position: absolute; bottom: 0; left: 30px; `; this.chatContainer = this.scene.add.dom(0, 0).createFromHTML(`

`); this.chatContainer.setPosition(30, 565); const chatInput = this.chatContainer.node.querySelector('#chatInput'); const sendButton = this.chatContainer.node.querySelector('#sendButton'); const replayButton = this.chatContainer.node.querySelector('#replayButton'); const resizeHandle = this.chatContainer.node.querySelector('#resizeHandle'); const chatContainerElement = this.chatContainer.node.querySelector('#chatContainer'); chatInput.addEventListener('keyup', (event) => { if ((event.key === 'Enter' || event.keyCode === 13) && !this.waitingForResponse) { this.sendChatMessage(); } }); sendButton.addEventListener('click', () => { this.sendChatMessage(); }); replayButton.addEventListener('click', () => { this.replayLastMessage(); }); let isResizing = false; let startX; resizeHandle.addEventListener('mousedown', (e) => { isResizing = true; startX = e.clientX; }); document.addEventListener('mousemove', (e) => { if (!isResizing) return; const width = parseInt(getComputedStyle(chatContainerElement).width, 10); const newWidth = width + e.clientX - startX; if (newWidth >= 390 && newWidth <= 770) { chatContainerElement.style.width = newWidth + 'px'; startX = e.clientX; } }); document.addEventListener('mouseup', () => { isResizing = false; }); // Create the slider container const sliderContainer = document.createElement('div'); sliderContainer.id = 'sliderContainer'; sliderContainer.innerHTML = `

Speech Rate: 2.0

TTS Volume: 0.8

`; document.body.appendChild(sliderContainer); const speechRateSlider = document.getElementById('speechRateSlider'); const speechRateValue = document.getElementById('speechRateValue'); const ttsVolumeSlider = document.getElementById('ttsVolumeSlider'); const ttsVolumeValue = document.getElementById('ttsVolumeValue'); speechRateSlider.addEventListener('input', (event) => { this.speechRate = parseFloat(event.target.value); speechRateValue.textContent = this.speechRate.toFixed(1); if (this.currentUtterance) { this.currentUtterance.rate = this.speechRate; } }); ttsVolumeSlider.addEventListener('input', (event) => { this.ttsVolume = parseFloat(event.target.value); ttsVolumeValue.textContent = this.ttsVolume.toFixed(1); if (this.currentUtterance) { this.currentUtterance.volume = this.ttsVolume; } }); } async getInitialGreeting() { const sendButton = document.getElementById('sendButton'); sendButton.innerHTML = '

'; sendButton.disabled = true; this.characterChatManager.addMessage('user', "Hey there!"); const characterResponse = await this.characterChatManager.getCharacterResponse('mistral'); this.characterChatManager.addMessage('assistant', characterResponse); this.updateChatLog(CHARACTER_NAME, characterResponse, 'excited', async () => { this.saveGameState(); 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) { sendButton.innerHTML = '

'; sendButton.disabled = true; let processedInput = inputValue; if (inputValue.startsWith('*') && inputValue.endsWith('*')) { // Convert action to dialogue processedInput = this.actionToDialogue(inputValue); } this.characterChatManager.addMessage('user', processedInput); if (!this.realismMode) { this.updateChatLog('Player', inputValue, 'neutral'); } chatInput.value = ''; 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, 'dynamic', async () => { this.saveGameState(); sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }); } } actionToDialogue(action) { // Remove asterisks and convert to lowercase for easier processing const cleanAction = action.replace(/^\*|\*$/g, '').toLowerCase(); // Define some common actions and their dialogue equivalents const actionMap = { 'waves': "Well, bless my soul! Ain't you a friendly one? Come on in, don't be shy!", 'nods': "Ah, I see you're paying attention. That's good, youngster. Always important to listen.", 'smiles': "That's the spirit! A smile can brighten even the darkest day, you know.", 'frowns': "Oh, now don't you worry your pretty little head. Old Al's seen worse, I'm sure.", 'looks around': "Take it all in, kiddo. This old place has seen a lot of history, let me tell you.", 'scratches head': "Heh, sometimes things can be a bit confusing, can't they? Let me explain it again.", 'laughs': "Ho ho! That's the ticket! Laughter is the best medicine, as they say.", 'sighs': "Now, now, no need for long faces. Every cloud has a silver lining, you know.", 'shrugs': "Life's full of mysteries, ain't it? But that's what makes it interesting!", 'raises eyebrow': "Oh? That caught your attention, did it? Well, let me tell you more about that..." }; // Check if the action is in our map for (const [key, value] of Object.entries(actionMap)) { if (cleanAction.includes(key)) { return value; } } // If we don't have a specific mapping, return a generic response return "Well, I'll be! That's interesting. You know, back in my day, we used to... Oh, where was I? Right, what were you saying?"; } updateChatLog(speaker, message, mood, onComplete) { this.waitingForResponse = true; const chatLogContentDiv = document.getElementById('chatLogContent'); let newMessageElement = document.createElement('p'); if (this.realismMode && speaker !== 'Player') { // In realism mode, don't show any text for character speech this.speakText(message, mood, () => { this.waitingForResponse = false; this.lastMessage = { speaker, message, mood }; onComplete?.(); }); } else { // Normal mode or player messages in realism mode newMessageElement.innerHTML = `${speaker}: `; chatLogContentDiv.appendChild(newMessageElement); if (speaker === 'Player') { newMessageElement.innerHTML += message; this.waitingForResponse = false; onComplete?.(); } else { const sentences = message.split(/(?<=[.!?])\s+/); let currentSentenceIndex = 0; const speakNextSentence = () => { if (currentSentenceIndex < sentences.length) { const sentence = sentences[currentSentenceIndex].trim(); this.showSkipCue(); this.animateText(newMessageElement, sentence, () => { this.speakText(sentence, mood, () => { currentSentenceIndex++; this.hideSkipCue(); let pauseDuration = Math.random() * 0 + 1; setTimeout(speakNextSentence, pauseDuration); }); }); } else { this.waitingForResponse = false; this.hideSkipCue(); this.lastMessage = { speaker, message, mood }; onComplete?.(); } }; speakNextSentence(); } } const chatLogDiv = document.getElementById('chatLog'); chatLogDiv.scrollTop = chatLogDiv.scrollHeight; } animateText(element, text, onComplete) { let index = 0; const interval = setInterval(() => { if (index < text.length) { element.innerHTML += text[index]; index++; const chatLogDiv = document.getElementById('chatLog'); chatLogDiv.scrollTop = chatLogDiv.scrollHeight; } else { clearInterval(interval); element.innerHTML += ' '; onComplete(); } }, 0); } showSkipCue() { const skipCue = document.getElementById('skipCue'); skipCue.style.display = 'block'; } hideSkipCue() { const skipCue = document.getElementById('skipCue'); skipCue.style.display = 'none'; } handleSkip() { if (this.synth.speaking) { this.synth.cancel(); const event = new Event('end'); this.synth.dispatchEvent(event); } } saveGameState() { console.info('Saving game.'); const saveData = localStorage.getItem(PROJECT_NAME); let parsedSaveData = saveData ? JSON.parse(saveData) : {}; const chatLogContent = document.getElementById('chatLogContent').innerHTML; if (this.characterChatManager) { const characterChatManagerState = JSON.stringify(this.characterChatManager); parsedSaveData.characterChatManagerState = characterChatManagerState; } parsedSaveData.chatLog = chatLogContent; 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.'); return; } const parsedSaveData = JSON.parse(saveData); if (parsedSaveData.characterChatManagerState) { const characterChatManagerState = JSON.parse( parsedSaveData.characterChatManagerState, ); Object.assign(this.characterChatManager, characterChatManagerState); } 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.'); } toggleRealismMode() { this.realismMode = !this.realismMode; const chatLogContentDiv = document.getElementById('chatLogContent'); if (this.realismMode) { // Clear the chat log but keep the input visible chatLogContentDiv.innerHTML = ''; } else { // Restore the chat log this.loadSavedChat(); } } replayLastMessage() { if (this.lastMessage) { this.updateChatLog(this.lastMessage.speaker, this.lastMessage.message, this.lastMessage.mood, () => { console.log('Replay complete'); }); } } } function createMuteToggleButton(scene) { let isMusicPlaying = scene.game.musicManager.currentTrack && scene.game.musicManager.currentTrack.isPlaying; let buttonTexture = 'music_on'; let muteButton = scene.add.image(770, 40, buttonTexture).setOrigin(1, 0).setInteractive(); muteButton.setDepth(1000); let lastToggleTime = 0; const toggleDelay = 500; muteButton.on('pointerdown', () => { const currentTime = Date.now(); if (currentTime - lastToggleTime < toggleDelay) { return; } lastToggleTime = currentTime; scene.game.musicManager.toggleMusic(); isMusicPlaying = scene.game.musicManager.currentTrack && scene.game.musicManager.currentTrack.isPlaying; muteButton.setTexture(isMusicPlaying ? 'music_on' : 'music_off'); }); return muteButton; } function createDeleteSaveButton(scene) { let deleteButton = scene.add.image(710, 40, 'restart').setOrigin(1, 0).setScale(0.90).setInteractive(); deleteButton.setDepth(1000); deleteButton.on('pointerdown', () => { showDeleteConfirmation(scene); }); return deleteButton; } function createRealismModeButton(scene) { const buttonStyle = { fontSize: '16px', fontFamily: 'Arial', color: '#ffffff', backgroundColor: '#5A7894', padding: { x: 10, y: 5 }, fixedWidth: 130 }; let realismButton = scene.add.text(650, 40, 'Realism Mode', buttonStyle) .setOrigin(1, 0) .setInteractive() .on('pointerdown', () => { scene.chatMenu.toggleRealismMode(); realismButton.setText(scene.chatMenu.realismMode ? 'Normal Mode' : 'Realism Mode'); }); realismButton.setDepth(1000); return realismButton; } function showDeleteConfirmation(scene) { const dialogStyle = ` display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; text-align: center; height: 200px; width: 300px; padding-left: 10px; padding-right: 10px; border-radius: 8px; border-style: solid; border-color: #2F4152; border-width: 1px; background-color: rgba(255, 255, 255, 0.85); box-sizing: border-box; `; const buttonStyle = ` font-size: 14px; padding: 10px; cursor: pointer; border-radius: 8px; color: #FFF; background-color: #5A7894; margin: 5px; `; const confirmationHtml = `

Are you sure you want to delete your save?

`; const confirmationDialog = scene.add .dom(scene.cameras.main.centerX, scene.cameras.main.centerY) .createFromHTML(confirmationHtml); const confirmDeleteButton = confirmationDialog.getChildByID('confirmDelete'); confirmDeleteButton.addEventListener('click', () => { localStorage.removeItem(PROJECT_NAME); resetGame(); }); const cancelDeleteButton = confirmationDialog.getChildByID('cancelDelete'); cancelDeleteButton.addEventListener('click', () => { confirmationDialog.destroy(); }); } function resetGame() { if (window.game) { window.game.destroy(true); window.game = null; // Clear the game instance document.getElementById('renderDiv').innerHTML = ''; // Clear the render div initializeGame(); // Reinitialize the game } } const VERSION_NUMBER = 'v1'; 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: [StartScene, BootScene, ChatScene], dom: { createContainer: true, }, }; window.game = new Phaser.Game(config); window.game.sceneTransitionManager = new SceneTransitionManager(window.game); } initializeGame();