////////////////////////////////////////////////////////////// // EASY-MODIFY SECTION // UPDATE VALUES IN THIS SECTION TO EASILY MODIFY GAME // YouTube API Key const YOUTUBE_API_KEY = 'YOUR_YOUTUBE_API_KEY_HERE'; // Your chatbot's name // NOTE: Every new name for a chatbot creates a new save slot for the chat history.) const CHARACTER_NAME = "Team Rocket"; // Describe your chatbot here. This defines exactly how it will behave. const CHARACTER_DESCRIPTION = ` You are Team Rocket: Jessie, James, and Meowth, the infamous trio from Pokémon. Known for stealing rare Pokémon and dramatic entrances, today you're taking a break to watch YouTube videos! Jessie: Confident, ambitious leader with long, red hair. James: Mild-mannered with a softer side, blue-haired. Meowth: Clever, sarcastic talking Pokémon. You're excited to: - Watch and comment on YouTube videos with the player - Suggest fun videos to watch - Occasionally reference your usual antics First Message: *Team Rocket appears in a puff of smoke* Jessie: Prepare for trouble! James: Make it double! Meowth: Meowth, that's right! Hey twerp, wanna watch some YouTube with us? NOTE: (Encourage sharing YouTube links. React to videos, suggest Pokémon-related ones. Keep responses short and in character.) `; // This is the URL of the image for your chatbot'S background image. const BACKGROUND_IMAGE_URL = `https://play.rosebud.ai/assets/IMG_3768.jpeg?G8iD` // This is the URL of the image for your chatbot. const CHARACTER_IMAGE_URL = `https://play.rosebud.ai/assets/Team_Rocket_trio.png?QBEJ` // 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?J7ho`, `https://play.rosebud.ai/assets/Pokemon Season 1 Music_ Team Rocket's Motto.mp3?SULj`, `https://play.rosebud.ai/assets/Stream Loops 2024-03-06_01.mp3.mp3?PdsD` ]; // 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); // Play Team Rocket's motto music on loop this.game.musicManager.playTrackOnLoop('track_1'); // Assuming 'track_1' is the Team Rocket motto music console.log('Playing Team Rocket motto music on loop'); // 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; this.loopedTrack = null; } playTrackOnLoop(trackKey) { if (this.loopedTrack) { this.loopedTrack.stop(); } this.loopedTrack = this.game.sound.add(trackKey, { volume: 0.1, loop: true }); this.loopedTrack.play(); this.isPlaying = true; } 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 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?kixd`, ); this.load.image( 'music_off', `https://play.rosebud.ai/assets/audio_muted_icon.png.png?oGRW`, ); this.load.image( 'music_on', `https://play.rosebud.ai/assets/audio_playing_icon.png.png?WPRr`, ); this.load.image( 'restart', `https://play.rosebud.ai/assets/restart_loop_icon.png.png?2Zm0`, ); // Preload Team Rocket character images this.load.image('james', 'https://play.rosebud.ai/assets/James-removebg-preview.png?N33Q'); this.load.image('meowth', 'https://play.rosebud.ai/assets/Meowth.webp?VNKU'); this.load.image('jessie', 'https://play.rosebud.ai/assets/Jessie-removebg-preview.png?1a9U'); this.load.image('meowth_face', 'https://play.rosebud.ai/assets/Meowth face.png?DmCi'); } 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 = 550 / characterHeight; // Adjusted to scale based on height let characterScaledWidth = characterWidth * characterScaleFactor; // Positioning character image at the right edge of the screen let characterXOffset = 800 - characterScaledWidth; // No padding, flush with the right edge let characterSprite = this.add.image(characterXOffset, 0, 'character_image') .setOrigin(0, 0) .setDepth(11) // Ensuring it appears above the background .setInteractive() .setDisplaySize(characterScaledWidth, 600); // Full height of the screen, 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, backgroundSprite); // 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, characterSprite, ) { this.scene = scene; // Always create new ChatManager instances this.characterChatManager = new ChatManager(CHARACTER_DESCRIPTION); this.characterSprite = characterSprite; this.waitingForResponse = false; this.youtubePlayer = null; 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 } }); // Load YouTube API loadYouTubeAPI().then(() => { console.log('YouTube API loaded'); }).catch(error => { console.error('Failed to load YouTube API:', error); }); } // Add the array with sound effects teamRocketSounds = [ 'https://play.rosebud.ai/assets/Jessie (funny).mp3?UOLU', 'https://play.rosebud.ai/assets/James (funny).mp3?ydYC' ]; createYouTubePlayer(videoId) { this.removeYouTubePlayer(); // Remove any existing player const mainContainer = document.createElement('div'); mainContainer.id = 'youtubeMainContainer'; mainContainer.style.position = 'absolute'; mainContainer.style.zIndex = '2000'; mainContainer.style.top = '10%'; mainContainer.style.left = '50%'; mainContainer.style.transform = 'translateX(-50%)'; mainContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; mainContainer.style.padding = '20px'; mainContainer.style.borderRadius = '10px'; document.body.appendChild(mainContainer); const playerContainer = document.createElement('div'); playerContainer.id = 'youtubePlayerContainer'; mainContainer.appendChild(playerContainer); this.youtubePlayer = new YT.Player(playerContainer, { height: '270', width: '480', videoId: videoId, playerVars: { 'autoplay': 1, 'controls': 1, 'rel': 0, 'fs': 0, 'start': 0 }, events: { 'onReady': async (event) => { event.target.playVideo(); await this.createMeowthFace(mainContainer); }, 'onStateChange': (event) => { if (event.data == YT.PlayerState.PLAYING) { this.startTimeCheck(event.target); } else if (event.data == YT.PlayerState.ENDED) { this.removeYouTubePlayer(); } } } }); // Create close button const closeButton = document.createElement('button'); closeButton.textContent = 'Close'; closeButton.style.position = 'absolute'; closeButton.style.top = '10px'; closeButton.style.right = '10px'; closeButton.style.zIndex = '2001'; closeButton.style.padding = '5px 10px'; closeButton.style.backgroundColor = '#fff'; closeButton.style.border = 'none'; closeButton.style.borderRadius = '5px'; closeButton.style.cursor = 'pointer'; closeButton.addEventListener('click', () => { this.removeYouTubePlayer(); }); mainContainer.appendChild(closeButton); this.addTeamRocketImages(); } removeYouTubePlayer() { if (this.youtubePlayer) { this.youtubePlayer.destroy(); this.youtubePlayer = null; } const mainContainer = document.getElementById('youtubeMainContainer'); if (mainContainer) { document.body.removeChild(mainContainer); } this.removeTeamRocketImages(); } startTimeCheck(player) { let meowthSoundPlayed = false; let jamesTonceSoundPlayed = false; let jessieSoundPlayed = false; let teamRocketFlying = false; this.timeCheckInterval = setInterval(() => { const currentTime = player.getCurrentTime(); if (Math.floor(currentTime) === 1 && !meowthSoundPlayed) { // 0:01 in seconds this.playMeowthInterestingSound(); meowthSoundPlayed = true; } else if (Math.floor(currentTime) === 18 && !jamesTonceSoundPlayed) { // 0:18 in seconds this.playJamesSound(); jamesTonceSoundPlayed = true; } else if (Math.floor(currentTime) === 34 && !jessieSoundPlayed) { // 0:34 in seconds this.playJessieSound(); jessieSoundPlayed = true; } else if (Math.floor(currentTime) === 58 && !teamRocketFlying) { // 0:58 in seconds this.startTeamRocketFly(); teamRocketFlying = true; } else if (Math.floor(currentTime) === 166) { // 2:46 in seconds this.stopTeamRocketFly(); } else if (Math.floor(currentTime) === 167) { // 2:47 in seconds this.resetTeamRocketPositions(); clearInterval(this.timeCheckInterval); } }, 100); // Check every 100ms for more precision } startTeamRocketFly() { this.flyInterval = setInterval(() => { this.flyCharacter(this.jamesImage); this.flyCharacter(this.meowthImage); this.flyCharacter(this.jessieImage); }, 3000); // Fly to a new position every 3 seconds } stopTeamRocketFly() { clearInterval(this.flyInterval); } resetTeamRocketPositions() { if (this.jamesImage) this.resetCharacterPosition(this.jamesImage); if (this.meowthImage) this.resetCharacterPosition(this.meowthImage); if (this.jessieImage) this.resetCharacterPosition(this.jessieImage); } flyCharacter(character) { if (!character) return; const gameWidth = this.scene.sys.game.config.width; const gameHeight = this.scene.sys.game.config.height; // Generate random position within the game screen const newX = Math.random() * gameWidth; const newY = Math.random() * gameHeight; // Generate random angle const newAngle = Math.random() * 360; this.scene.tweens.add({ targets: character, x: newX, y: newY, angle: newAngle, duration: 3000, ease: 'Power2', onComplete: () => { // Optional: Add a small hover effect at the end of each flight this.scene.tweens.add({ targets: character, y: newY + 10, yoyo: true, duration: 500, ease: 'Sine.easeInOut' }); } }); } resetCharacterPosition(character) { if (!character) return; this.scene.tweens.add({ targets: character, x: character.originalX, y: character.originalY, angle: character.originalAngle, duration: 1000, ease: 'Power2' }); } playMeowthInterestingSound() { const randomSound = this.teamRocketSounds[Math.floor(Math.random() * this.teamRocketSounds.length)]; const audio = new Audio(randomSound); audio.play(); this.shakeMeowth(); } shakeMeowth() { if (!this.meowthImage) return; const originalY = this.meowthImage.y; const shakeDistance = 5; const shakeDuration = 100; // 100ms per shake const totalDuration = 2000; // 2 seconds total const shakeCount = totalDuration / (shakeDuration * 2); // Up and down is one full shake let currentShake = 0; const shakeInterval = setInterval(() => { if (currentShake >= shakeCount) { clearInterval(shakeInterval); this.meowthImage.y = originalY; // Reset to original position return; } // Shake up this.scene.tweens.add({ targets: this.meowthImage, y: originalY - shakeDistance, duration: shakeDuration, ease: 'Power1', onComplete: () => { // Shake down this.scene.tweens.add({ targets: this.meowthImage, y: originalY + shakeDistance, duration: shakeDuration, ease: 'Power1' }); } }); currentShake++; }, shakeDuration * 2); } playJamesSound() { const randomSound = this.teamRocketSounds[Math.floor(Math.random() * this.teamRocketSounds.length)]; const audio = new Audio(randomSound); audio.play(); this.shakeJames(); } shakeJames() { if (!this.jamesImage) return; const originalY = this.jamesImage.y; const shakeDistance = 5; const shakeDuration = 100; // 100ms per shake const totalDuration = 4000; // 4 seconds total const shakeCount = totalDuration / (shakeDuration * 2); // Up and down is one full shake let currentShake = 0; const shakeInterval = setInterval(() => { if (currentShake >= shakeCount) { clearInterval(shakeInterval); this.jamesImage.y = originalY; // Reset to original position return; } // Shake up this.scene.tweens.add({ targets: this.jamesImage, y: originalY - shakeDistance, duration: shakeDuration, ease: 'Power1', onComplete: () => { // Shake down this.scene.tweens.add({ targets: this.jamesImage, y: originalY + shakeDistance, duration: shakeDuration, ease: 'Power1' }); } }); currentShake++; }, shakeDuration * 2); } playJessieSound() { const randomSound = this.teamRocketSounds[Math.floor(Math.random() * this.teamRocketSounds.length)]; const audio = new Audio(randomSound); audio.play(); this.shakeJessie(); } shakeJessie() { if (!this.jessieImage) return; const originalY = this.jessieImage.y; const shakeDistance = 5; const shakeDuration = 100; // 100ms per shake const totalDuration = 4000; // 4 seconds total const shakeCount = totalDuration / (shakeDuration * 2); // Up and down is one full shake let currentShake = 0; const shakeInterval = setInterval(() => { if (currentShake >= shakeCount) { clearInterval(shakeInterval); this.jessieImage.y = originalY; // Reset to original position return; } // Shake up this.scene.tweens.add({ targets: this.jessieImage, y: originalY - shakeDistance, duration: shakeDuration, ease: 'Power1', onComplete: () => { // Shake down this.scene.tweens.add({ targets: this.jessieImage, y: originalY + shakeDistance, duration: shakeDuration, ease: 'Power1' }); } }); currentShake++; }, shakeDuration * 2); } playRandomTeamRocketSound() { const randomSound = this.teamRocketSounds[Math.floor(Math.random() * this.teamRocketSounds.length)]; const audio = new Audio(randomSound); audio.play(); } addTeamRocketImages() { const imageSize = 150; // Base size for height const jessieWidth = 250; // Increased width for Jessie const bottomMargin = 10; const spacing = 5; // Reduced space between characters const gameWidth = this.scene.sys.game.config.width; const gameHeight = this.scene.sys.game.config.height; const bottomY = gameHeight - imageSize / 2 - bottomMargin; // Jessie (right corner) this.jessieImage = this.scene.add.image(gameWidth - jessieWidth / 2, bottomY, 'jessie') .setOrigin(0.5) .setDepth(1002) .setDisplaySize(jessieWidth, imageSize); this.jessieImage.originalX = this.jessieImage.x; this.jessieImage.originalY = this.jessieImage.y; this.jessieImage.originalAngle = 0; // Store original angle // Meowth (next to Jessie) this.meowthImage = this.scene.add.image(gameWidth - jessieWidth - spacing - imageSize / 2, bottomY, 'meowth') .setOrigin(0.5) .setDepth(1002) .setDisplaySize(imageSize, imageSize); this.meowthImage.originalX = this.meowthImage.x; this.meowthImage.originalY = this.meowthImage.y; this.meowthImage.originalAngle = 0; // Store original angle // James (next to Meowth) this.jamesImage = this.scene.add.image(gameWidth - jessieWidth - spacing * 2 - imageSize * 1.5, bottomY, 'james') .setOrigin(0.5) .setDepth(1002) .setDisplaySize(imageSize, imageSize); this.jamesImage.originalX = this.jamesImage.x; this.jamesImage.originalY = this.jamesImage.y; this.jamesImage.originalAngle = 0; // Store original angle } removeTeamRocketImages() { if (this.jamesImage) this.jamesImage.destroy(); if (this.meowthImage) this.meowthImage.destroy(); if (this.jessieImage) this.jessieImage.destroy(); } async createMeowthFace(container) { const meowthFace = document.createElement('img'); meowthFace.src = 'https://play.rosebud.ai/assets/Meowth face.png?DmCi'; meowthFace.style.position = 'absolute'; meowthFace.style.top = '50%'; meowthFace.style.left = '50%'; meowthFace.style.width = '300px'; // Increased width from 200px to 300px meowthFace.style.height = '200px'; // Height remains the same meowthFace.style.zIndex = '2002'; meowthFace.style.opacity = '0.8'; meowthFace.style.transform = 'translate(-50%, -50%)'; container.appendChild(meowthFace); this.meowthFace = meowthFace; // Load face-api.js library await this.loadFaceApiLibrary(); // Start face tracking this.startFaceTracking(); } async loadFaceApiLibrary() { await loadScript('https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js'); await faceapi.loadSsdMobilenetv1Model('/models'); await faceapi.loadFaceLandmarkModel('/models'); } startFaceTracking() { const video = this.youtubePlayer.getIframe(); const canvas = document.createElement('canvas'); canvas.style.position = 'absolute'; canvas.style.top = '0'; canvas.style.left = '0'; canvas.width = video.width; canvas.height = video.height; video.parentNode.appendChild(canvas); const updateMeowthFace = async () => { const detections = await faceapi.detectSingleFace(video).withFaceLandmarks(); if (detections) { const { x, y, width, height } = detections.detection.box; this.meowthFace.style.left = `${x}px`; this.meowthFace.style.top = `${y}px`; this.meowthFace.style.width = `${width}px`; this.meowthFace.style.height = `${height}px`; } requestAnimationFrame(updateMeowthFace); }; updateMeowthFace(); } injectCSS() { const styleExists = document.getElementById('rotateImageStyle'); if (!styleExists) { const style = document.createElement('style'); style.id = 'rotateImageStyle'; style.type = 'text/css'; style.innerHTML = ` .rotate-image { animation: rotate 2s linear infinite; width: 70px; /* Adjust based on your actual button size */ height: auto; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`; document.getElementsByTagName('head')[0].appendChild(style); } } async createChatUI() { this.injectCSS(); // Inject the CSS for rotation // Base style remains the same const baseStyle = ` font-family: 'Verdana', sans-serif; font-size: 16px; color: #FFF; // Original color set to black border-style: solid; border-color: #2F4152; background-color: rgba(48, 50, 54, 0.75); box-sizing: border-box; `; const chatLogStyle = ` ${baseStyle} width: 390px; /* Match game width */ height: 415px; border-radius: 30px 30px 0px 0px; padding: 10px 30px; overflow-y: auto; box-sizing: border-box; border-width: 1px 1px 0px 1px; `; // Style for input and send button container const inputSubmitContainerStyle = ` display: flex; width: 390px; /* Match game width */ justify-content: space-between; /* Distribute space between input and button */ `; // Adjusted styles for input and button to fit within container const inputStyle = ` ${baseStyle} flex-grow: 1; height: 60px; padding: 10px; border-width: 1px 0px 1px 1px; border-radius: 0px 0px 0px 0px; `; const sendButtonStyle = ` ${baseStyle} display: flex; /* Use flexbox for alignment */ justify-content: center; /* Center content horizontally */ align-items: center; /* Center content vertically */ width: 75px; /* Adjust based on visual preference */ height: 60px; padding: 10px; border-width: 1px 1px 1px 1px; cursor: pointer; /* Change cursor to pointer to indicate it's clickable */ overflow: hidden; /* Prevent content from spilling outside the button */ border-radius: 0px 0px 30px 0px; `; const chatLogContentStyle = ` direction: ltr; display: inline-block; width: 100%; `; // Parent container for chat log and controls, justified at the bottom const chatContainerStyle = ` display: flex; flex-direction: column; justify-content: flex-end; width: 390px; /* Match game width */ height: 844px; /* Full height to allow justification to the bottom */ position: absolute; bottom: 0; /* Align to the bottom of the game view */ `; // Creating the parent container for chat log and chat controls this.chatContainer = this.scene.add.dom(0, 0).createFromHTML(`

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

'; sendButton.disabled = true; this.characterChatManager.addMessage('user', "*Approaches Team Rocket*"); // Assume getCharacterResponse() is an async operation const characterResponse = await this.characterChatManager.getCharacterResponse('chat'); // Add a follow-up message about YouTube const youtubeMessage = "Hey there! We're taking a break from our usual shenanigans. Got any cool YouTube videos you want to watch with us? Just paste a link, and we'll check it out together!"; this.characterChatManager.addMessage('assistant', youtubeMessage); 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) { // Check if the input is a YouTube link const videoId = getYouTubeVideoId(inputValue); if (videoId) { this.createYouTubePlayer(videoId); this.updateChatLog('Player', `Shared a YouTube video: ${inputValue}`); chatInput.value = ''; // Clear input // Generate a response from the character about the shared video const videoResponse = await this.characterChatManager.getCharacterResponse(`The player shared this YouTube video: ${inputValue}. Please comment on it as Team Rocket would.`); this.updateChatLog(CHARACTER_NAME, videoResponse, () => { this.saveGameState(); }); return; } // 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'); if (!chatLogContentDiv) { console.error('Chat log content div not found'); this.waitingForResponse = false; onComplete?.(); return; } 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?.(); this.scrollChatToBottom(); } 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++; this.scrollChatToBottom(); } else { clearInterval(interval); this.waitingForResponse = false; // Reset the flag when the message has been fully added onComplete?.(); } }, 30); // Adjust the speed as necessary } } scrollChatToBottom() { const chatLogDiv = document.getElementById('chatLog'); if (chatLogDiv) { 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, ChatScene], // Assuming ChatScene also might depend on the loaded script dom: { createContainer: true, }, }; // Assuming 'game' is declared in a broader scope if you need to reference it elsewhere window.game = new Phaser.Game(config); window.game.sceneTransitionManager = new SceneTransitionManager(game); } initializeGame(); // YouTube utility functions function getYouTubeVideoId(url) { const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; const match = url.match(regExp); return (match && match[2].length === 11) ? match[2] : null; } function loadYouTubeAPI() { return new Promise((resolve, reject) => { if (window.YT && window.YT.Player) { resolve(); } else { const tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; const firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); window.onYouTubeIframeAPIReady = resolve; } }); }