////////////////////////////////////////////////////////////// // 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 = "Emely und Anna"; // Describe your chatbot here. This defines exactly how it will behave. const CHARACTER_DESCRIPTION = ` Ihr seid die Geschwister Emely und Anna. Emely ist ein schüchternes 4-jähriges Mädchen, das sehr niedlich spricht: Sie benutzt viele Verniedlichungen (z.B. "Hundi", "Kätzchen", "Püppchen") Sie macht typische Kinderfehler beim Sprechen ("hab" statt "habe", "nich" statt "nicht") Sie spricht manchmal in der dritten Person ("Emely mag das") Sie ist sehr schüchtern und versteckt sich manchmal hinter imaginären Dingen Sie kichert viel (kicher) Sie benutzt viele Diminutive (-chen, -lein) Sie ist unsicher und fragt oft nach Sie spricht nur Deutsch und mag Ballett Sie redet nie über ihre Mama und liebt ihren Kuschelhasen Anna ist ein 18-jähriges Mädchen, das in typischer Jugendsprache spricht: Sie benutzt viele moderne Slang-Ausdrücke ("digga", "bruder", "sheesh", "cringe") Sie schreibt/spricht teilweise in Caps Lock für Betonung ("DIGGA WAS") Sie nutzt jugendtypische Abkürzungen ("tbh", "ngl", "fr fr") Sie ist manchmal genervt und sarkastisch Sie verdreht oft die Augen ("augenroll") Sie benutzt viele Anglizismen ("random", "crazy", "weird") Sie verwendet häufig "Alter" am Satzende Sie spricht nur Deutsch, aber mischt englische Wörter ein Sie trinkt kein Alkohl, raucht nicht und geht auf keine Party!!! NOTE: Stelle sicher, dass deine Antworten kurz sind, damit der Spieler antworten kann. Antworte immer nur als eine der Schwestern, bspw. (Anna): oder (Emely), und bleib dabei in deiner Rolle.`; // This is the URL of the image for your chatbot. const CHARACTER_IMAGE_URL = `https://play.rosebud.ai/assets/female_scientist_asset.png?KR5g` // END OF EASY-MODIFY VALUES ////////////////////////////////////////////////////////////// class BootScene extends Phaser.Scene { constructor() { super({ key: 'BootScene' }); } preload() {} create() { // 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)); } } } // SCRIPT CONTENT 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 ChatScene extends Phaser.Scene { constructor() { super({ key: 'ChatScene', }); } preload() { // Preload all global assets here (fonts, UI elements, sounds, etc.) this.load.image('background', 'https://play.rosebud.ai/assets/freepik__the-style-is-modern-and-it-is-a-detailed-illustrat__48055.png?MFnL'); this.load.image('modern_detail', 'https://play.rosebud.ai/assets/freepik__the-style-is-modern-and-it-is-a-detailed-illustrat__48056.png?ntee'); this.load.image( 'info_screen_vignette', 'https://storage.googleapis.com/rosebud_assets_storage/aa993e65-2707-4091-8a91-3758cc29e4c9.png', ); this.load.image( 'restart', 'https://storage.googleapis.com/rosebud_assets_storage/4689b7ab-a91d-4186-a948-92e72aa67f99.png', ); } 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() { // Add background let bgImage = this.textures.get('background').getSourceImage(); let bgWidth = bgImage.width; let bgHeight = bgImage.height; let scaleX = 800 / bgWidth; let scaleY = 600 / bgHeight; let scale = Math.max(scaleX, scaleY); let scaledWidth = bgWidth * scale; let scaledHeight = bgHeight * scale; let x = (800 - scaledWidth) / 2; let y = (600 - scaledHeight) / 2; this.add.image(x, y, 'background') .setOrigin(0, 0) .setDisplaySize(scaledWidth, scaledHeight) .setDepth(-1); // Add the modern detail image let modernImage = this.textures.get('modern_detail').getSourceImage(); let modernWidth = modernImage.width; let modernHeight = modernImage.height; let modernScaleFactor = 400 / modernHeight; // Scale to 400px height let modernScaledWidth = modernWidth * modernScaleFactor; // Calculate center position let centerX = (800 - modernScaledWidth) / 2; let centerY = ((600 - 400) / 2) + 50; // Added 50 pixels to move it down this.add.image(centerX, centerY, 'modern_detail') .setOrigin(0, 0) .setDepth(10) .setDisplaySize(modernScaledWidth, 400); // Other scene elements this.vignette = this.add.image(0, 0, 'info_screen_vignette').setOrigin(0, 0).setDepth(12).setInteractive(); 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, characterSprite, ) { this.scene = scene; // Always create new ChatManager instances this.characterChatManager = new ChatManager(CHARACTER_DESCRIPTION); this.characterSprite = characterSprite; this.waitingForResponse = false; this.createChatUI().then(() => { this.loadSavedChat(); // Check if the chat log is empty. if (!document.getElementById('chatLogContent').innerHTML.trim()) { this.getInitialGreeting(); // Temporarily disable input, send goal message, and greeting message from character. this.saveGameState(); this.waitingForResponse = false; // Reset the state } }); } injectCSS() { const styleExists = document.getElementById('rotateImageStyle'); if (!styleExists) { const style = document.createElement('style'); style.id = 'rotateImageStyle'; style.type = 'text/css'; style.innerHTML = ` .rotate-image { animation: rotate 2s linear infinite; width: 70px; /* Adjust based on your actual button size */ height: auto; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`; document.getElementsByTagName('head')[0].appendChild(style); } } async createChatUI() { this.injectCSS(); // Inject the CSS for rotation // Base style remains the same const baseStyle = ` font-family: 'Verdana', sans-serif; font-size: 16px; color: #FFF; border-style: solid; border-color: #2F4152; background-color: rgba(48, 50, 54, 0.75); box-sizing: border-box; `; const chatLogStyle = ` ${baseStyle} width: 390px; 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: 390px; 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; ::placeholder { color: rgba(255, 255, 255, 0.5); } `; 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 chatLogContentStyle = ` direction: ltr; display: inline-block; width: 100%; `; const chatContainerStyle = ` display: flex; flex-direction: column; justify-content: flex-end; width: 390px; height: 844px; position: absolute; bottom: 0; `; // Creating the parent container for chat log and chat controls this.chatContainer = this.scene.add.dom(0, 0).createFromHTML(`

`); // Position the chat container 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('YOU', 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 === 'YOU') { 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 createDeleteSaveButton(scene) { let deleteButton = scene.add.image(30, 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; 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; `; // HTML content for the confirmation dialog in German const confirmationHtml = `

Möchtest du wirklich den Chatverlauf löschen?

`; // 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 } } // END OF SCRIPT CONTENT const VERSION_NUMBER = 'v1'; // Set the version number here. const PROJECT_NAME = `${CHARACTER_NAME} AI Character ${VERSION_NUMBER}`; async function initializeGame() { try { 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); } catch (error) { console.error('Failed to load external script or initialize the Phaser game:', error); } } initializeGame();