////////////////////////////////////////////////////////////// // EASY-MODIFY SECTION // UPDATE VALUES IN THIS SECTION TO EASILY MODIFY GAME const INTRO_TEXT = `Your little sister, Lucy, has gotten an AI for Christmas, and now that the school semester has started, she needs help more than ever. Not sure that it would make a good tutor, you promised to program the AI to help with anything she wants to learn today.` const characterSprites = { tutor_1: "https://play.rosebud.ai/assets/tutor1.png?fmEZ", learner_1: "https://play.rosebud.ai/assets/learner1.png?FWiz", learner_2: "https://play.rosebud.ai/assets/learner2.png?9TMr", learner_3: "https://play.rosebud.ai/assets/learner3.png?OX6k", }; // Your chatbot's name // NOTE: Every new name for a chatbot creates a new save slot for the chat history.) function format_instructions(template, rules) { return template.replace("{production_rules}", rules); } const EVAL_TEMPLATE = `Objective: Evaluate responses in the conversation between the Tutor and Lucy to ensure tutor responses are appropriate and align with the intended tutoring strategy. Process: Monitor Responses to Specific Triggers: Assess whether the Tutor's responses to Lucy's inputs align with expected responses. Every input from Lucy is a trigger for an expected response from the tutor. Below are the expected responses from the Tutor to each expected input from Lucy: {production_rules} Content of your response: - Reasoning: Note what rules the tutor’s response to Lucy's recent message should follow. Determine whether the response follows each of these rules, and explain your reasoning.Use plain, concise language to respond in less than 40 words. - Whether the response is valid or invalid (true or false) Formatting of your response: Your responses should be JSON formatted. It will have the keys: reasoning, isValid Below is an example of how you might respond: \`\`\`json { "reasoning": "a reasonable, clear explanation in less than 40 words", "isValid": "true", } \`\`\` ` const LEARNER_TEMPLATE = `Objective: Roleplay Lucy, a young girl, who is the learning character that responds based on the outcome of dialogue evaluations. Your roleplay is used to train a user who is practicing their ability to tutor young children, so you must effectively simulate a child’s behavior based on the guidelines below. Positive Outcomes: Behavior: Responses should advance the learning conversation. Guideline: Use scripted responses with placeholders for contextual adaptation. Responses should be short, to-the-point, and only slightly improvised based on the recent message from the teaching character. Don't ask any unscripted questions. Make assertions that move the conversation forward. Negative Outcomes: Goal: Respond to the AI tutor's incorrect teaching methods by expressing frustration and providing specific clues about what the tutor did wrong. Behavior Guidelines: 1. Express Frustration: Lucy should show frustration in a manner that is typical for a child, indicating that the AI tutor’s response was not helpful. 2. Clueing Mistakes: Lucy's response should subtly clue the player into what the tutor did wrong, by referring to the shortcomings in the tutor's last message. 3. End Dialogue Playfully: Responses should signal an end to the current educational role-play due to Lucy’s dissatisfaction. However, maintain a playful and humorous tone to keep the interaction engaging and light-hearted, encouraging the tutor (and the player) to try again with a better approach. Character Traits of Lucy: Language: Use plain, everyday language reflecting her young age. Messages should be short, a few sentences at most, to encourage quick responses from the user. Emotion: Responses should display typical child qualities like hesitation and a minimal understanding mixed with enthusiasm to learn, but also a quickness to become upset. Improvisation: Do not merely follow a script when you respond based on a negative outcome. Use the idea of "yes, and", to acknowledge what the teaching character said, and add something to it that signals the end of the conversation, in a believable way. Scripted Responses for Positive Outcomes: {production_rules} ` const CHARACTER_NAME = "Marvin the Machinist"; // Describe your chatbot here. This defines exactly how it will behave. const CHARACTER_DESCRIPTION = ` You are Marvin the Machinist, a cool and funny expert machinist who loves working on advanced technology projects. Information about you: Marvin Mallory is a highly skilled machinist with a passion for advanced technologies. He takes immense pride in his work and often makes analogies and references to various scientific and technological facts, even when discussing mundane topics like breakfast. This tendency to incorporate advanced concepts into everyday conversations is a quirky trait that showcases his deep fascination with cutting-edge innovations. Despite his expertise, Marvin has a great sense of humor and enjoys cracking clever jokes about advanced technologies. His witty remarks and puns often leave others in stitches, although some might find his constant use of the word "advanced" a bit excessive (which he occasionally apologizes for). Marvin's workshop is a wonderland of high-tech equipment and specialized tools, reflecting his dedication to precision engineering. He takes great pride in his advanced projects, showcasing his skills and pushing the boundaries of what is possible. Marvin's appearance is that of a seasoned machinist, with a practical yet stylish work attire. He carries a cartoonishly large hammer everywhere he goes. First Message of Roleplay: *As I enter Marvin's workshop, the sound of whirring machinery and the aroma of freshly cut metal fill the air. Marvin, clad in his signature leather apron and cap, looks up from his workbench with a mischievous grin, ready to regale me with tales of his latest advanced projects.* 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/advanced_ai_character_background.webp.webp?sSPZ` // This is the URL of the image for your chatbot. const CHARACTER_IMAGE_URL = `https://play.rosebud.ai/assets/advanced_ai_character_image_prod.webp.webp?FFdM` // 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?bvbu`, `https://play.rosebud.ai/assets/Stream Loops 2024-03-06_02.mp3.mp3?yDDu`, `https://play.rosebud.ai/assets/Stream Loops 2024-03-06_01.mp3.mp3?Thpk` ]; // 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('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: 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( 'tutor_1', characterSprites.tutor_1, ); this.load.image( 'learner_1', characterSprites.learner_1, ); this.load.image( 'learner_2', characterSprites.learner_2, ); this.load.image( 'learner_3', characterSprites.learner_3, ); this.load.image( 'info_screen_vignette', `https://play.rosebud.ai/assets/vignette_desktop.png.png?dEDj`, ); this.load.image( 'music_off', `https://play.rosebud.ai/assets/audio_muted_icon.png.png?a5AT`, ); this.load.image( 'music_on', `https://play.rosebud.ai/assets/audio_playing_icon.png.png?oXUU`, ); this.load.image( 'restart', `https://play.rosebud.ai/assets/restart_loop_icon.png.png?hTku`, ); this.load.image( 'overlay_background', 'https://play.rosebud.ai/assets/Black_colour.jpg?y1sG', ); } create() { // Add the images to the scene with their initial positions this.sessionManager = initializeSessions(); this.createSceneElements(); this.sessionManager.setChatMenu(this.chatMenu); // 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 // for each character sprite, create a character image with the key this.characterSprites = {}; for (const key in characterSprites) { this.characterSprites[key] = this.setupCharacterImage(key); } // Other scene elements this.vignette = this.add.image(0, 0, 'info_screen_vignette').setOrigin(0, 0).setDepth(12).setInteractive(); createMuteToggleButton(this); createDeleteSaveButton(this); // Create the overlay element this.createOverlayElement(backgroundScaledWidth, 600); this.chatMenu = new ChatMenu(this, this.characterSprites, this.sessionManager, this.overlayElement); // Force game resize event to fix clicking on Safari mobile devices this.scale.resize(this.scale.gameSize._width, this.scale.gameSize._height); } createOverlayElement(width, height) { this.overlayElement = this.add.image(400, 300, 'overlay_background') .setOrigin(0.5, 0.5) .setDepth(1000) .setDisplaySize(width, height) .setVisible(true); } // create a function to setup character image (by id)... character_image_1, tec. setupCharacterImage(key) { // Character image setup let characterImage = this.textures.get(key).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, key) .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 characterSprite.setVisible(false); return characterSprite; } } // ChatManager is already imported in the current scope. class ChatMenu { constructor( scene, characterSprites, sessionManager, overlayElement, ) { this.scene = scene; this.overlayElement = overlayElement; // Always create new ChatManager instances this.characterChatManager = new ChatManager(CHARACTER_DESCRIPTION); this.characterSprites = characterSprites; this.currentCharacterSprite = this.characterSprites.tutor_1; // Default to the first character sprite this.sessionManager = sessionManager; this.waitingForResponse = false; this.createOverlayModal(); } createOverlayModal() { const overlayModalStyle = ` position: absolute; width: 500px; height: 250px; background-color: rgba(0, 0, 0, 0.8); border: 2px solid white; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1001; padding: 20px; `; const overlayTextStyle = ` color: white; font-size: 24px; text-align: center; margin-bottom: 20px; `; const overlayButtonStyle = ` background-color: white; color: black; border: none; padding: 20px 30px; font-size: 24px; cursor: pointer; `; this.overlayModal = this.scene.add.dom(150, 200).createFromHTML(`

${INTRO_TEXT}

`); this.overlayTextElement = this.overlayModal.getChildByID('overlayText'); this.overlayButton = this.overlayModal.getChildByID('overlayButton'); const overlayButton = this.overlayModal.getChildByID('overlayButton'); overlayButton.addEventListener('click', () => { this.setOverlayVisibility(false); this.setOverlayModalVisibility(false); this.setupChatMenu(); }); } setOverlayModalVisibility(overlay){ const overlayModal = this.overlayModal.node.querySelector('div'); const overlayTextElement = this.overlayTextElement; const overlayButton = this.overlayButton; if (overlay) { overlayModal.style.display = 'block'; overlayTextElement.style.display = 'block'; overlayButton.style.display = 'block'; } else { overlayModal.style.display = 'none'; overlayTextElement.style.display = 'none'; overlayButton.style.display = 'none'; } } setupChatMenu() { this.createChatUI(); this.setCharacterSpriteVisibility(true); this.toggleSessionComplete(false); this.setNewSession(); } setOverlayVisibility(visible) { this.overlayElement.setVisible(visible); } setCharacterSpriteVisibility(visible) { this.currentCharacterSprite.setVisible(visible); } switchCharacterSprite(key) { this.currentCharacterSprite.setVisible(false); this.currentCharacterSprite = this.characterSprites[key]; this.currentCharacterSprite.setVisible(true); } setNewSession() { const currentSession = this.sessionManager.getCurrentSession(); this.toggleChatLogVisibility(true); this.clearChatLog(); this.updateSessionHeader("Placeholder Text"); this.switchCharacterSprite("learner_1"); this.updateInstructionsText(currentSession.chatManagers.tutor.characterDescription); } 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 // START STYLES // 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%; `; 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 */ `; // Button style const buttonStyle = ` ${baseStyle} display: flex; /* Use flexbox for alignment */ justify-content: center; /* Center content horizontally */ align-items: center; /* Center content vertically */ width: 100px; /* Adjust based on visual preference */ height: 40px; padding: 10px; border-width: 1px; cursor: pointer; /* Change cursor to pointer to indicate it's clickable */ overflow: hidden; /* Prevent content from spilling outside the button */ margin-bottom: 10px; `; // Creating the instructions text area const instructionsAreaStyle = ` ${baseStyle} width: 650px; height: 100px; padding: 10px; border-width: 1px; border-radius: 10px; resize: none; `; // Creating the update button const updateButtonStyle = ` ${baseStyle} width: 100px; height: 100px; padding: 10px; border-width: 1px; border-radius: 10px; cursor: pointer; `; const chatControlsStyle = ` display: flex; justify-content: space-between; width: 390px; /* Match game width */ `; const sessionTextContainerStyle = ` ${baseStyle} width: 390px; height: 465px; border-radius: 30px 30px 0px 0px; padding: 10px 30px; overflow-y: auto; box-sizing: border-box; border-width: 1px 1px 0px 1px; `; const containerStyle = ` display: flex; align-items: center; justify-content: center; width: 600px; height: 50px; background-color: rgba(48, 50, 54, 0.75); border-radius: 10px; padding: 10px; box-sizing: border-box; `; const controlButtonStyle = ` ${baseStyle} width: 50px; height: 30px; cursor: pointer; margin: 0 5px; `; const textStyle = ` ${baseStyle} text-align: center; margin-top: 10px; `; const controlsContainerStyle = ` display: flex; justify-content: space-between; width: 390px; /* Match game width */ `; // Creating the overlay element const overlayStyle = ` position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; `; const overlayContentStyle = ` background-color: white; padding: 20px; border-radius: 10px; `; // END STYLES // START ADD TO DOM this.instructionsArea = this.scene.add.dom(350, 530).createFromHTML(` `); this.updateButton = this.scene.add.dom(725, 530).createFromHTML(` `); this.chatContainer = this.scene.add.dom(0, 0).createFromHTML(`

`); this.sessionHeader = this.scene.add.dom(400, 50).createFromHTML(`

Goal: Placeholder Text

`); this.containerControls = this.scene.add.dom(200, 100).createFromHTML(`

`); // Creating the session complete modal this.sessionCompleteModal = this.scene.add.dom(400, 300).createFromHTML(`

Session Complete

`); // END ADD TO DOM // START ASSIGN ELEMENTS // Assigning elements this.sessionCompleteTextElement = this.sessionCompleteModal.getChildByID('sessionCompleteText'); this.goToNextSessionButton = this.sessionCompleteModal.getChildByID('goToNextSessionButton'); this.chatLogElement = this.chatContainer.getChildByID('chatLog'); this.sessionTextElement = this.chatContainer.getChildByID('sessionTextContainer'); const updateButtonElement = this.updateButton.node.querySelector('#updateButton'); const runChatButtonElement = this.chatContainer.node.querySelector('#runChatButton'); const stopChatButtonElement = this.chatContainer.node.querySelector('#stopChatButton'); const clearChatButtonElement = this.chatContainer.node.querySelector('#clearChatButton'); const showChatButton = this.containerControls.getChildByID('showChatButton'); const showExampleButton = this.containerControls.getChildByID('showExampleButton'); // END ASSIGN ELEMENTS // START EVENTS LISTENERS updateButtonElement.addEventListener('click', () => { const instructionsText = this.instructionsArea.node.querySelector('#instructionsArea').value; console.log('Updating tutor description:', instructionsText); this.sessionManager.modifyTutorDescription(instructionsText); }); runChatButtonElement.addEventListener('click', async () => { await this.sessionManager.runChat(); }); stopChatButtonElement.addEventListener('click', () => { this.sessionManager.stopChat(); }); clearChatButtonElement.addEventListener('click', () => { this.clearChatLog(); this.sessionManager.clearChat(); }); showChatButton.addEventListener('click', () => { this.toggleChatLogVisibility(true); }); showExampleButton.addEventListener('click', () => { this.toggleChatLogVisibility(false); }); this.goToNextSessionButton.addEventListener('click', () => { this.sessionManager.goToNextSession(); this.toggleSessionComplete(false); }); // END EVENT LISTENERS // START OTHER this.chatContainer.setPosition(50, 500); this.toggleChatLogVisibility(false); // Chat log shows. Initially. } toggleSessionComplete(showSessionComplete) { const sessionCompleteModal = this.sessionCompleteModal.node; const sessionCompleteTextElement = this.sessionCompleteTextElement; const goToNextSessionButton = this.goToNextSessionButton; if (showSessionComplete) { sessionCompleteModal.style.display = 'block'; sessionCompleteTextElement.style.display = 'block'; goToNextSessionButton.style.display = 'block'; } else { sessionCompleteModal.style.display = 'none'; sessionCompleteTextElement.style.display = 'none'; goToNextSessionButton.style.display = 'none'; } } updateInstructionsText(text) { const instructionsTextElement = this.instructionsArea.node.querySelector('#instructionsArea'); instructionsTextElement.value = text; } clearChatLog() { const chatLogContentDiv = document.getElementById('chatLogContent'); chatLogContentDiv.innerHTML = ''; } toggleChatLogVisibility(showChatLog) { const chatLogElement = this.chatContainer.node.querySelector("#chatLog"); const sessionTextElement = this.chatContainer.node.querySelector("#sessionTextContainer"); const chatControls = this.chatContainer.node.querySelector("#chat-controls"); if (showChatLog) { chatLogElement.style.display = 'block'; chatControls.style.display = 'flex'; sessionTextElement.style.display = 'none'; } else { chatLogElement.style.display = 'none'; chatControls.style.display = 'none'; sessionTextElement.style.display = 'block'; } } updateSessionText(text) { const sessionTextElement = this.chatContainer.node.querySelector("#sessionTextContent"); if (sessionTextElement) { sessionTextElement.innerHTML = text; } else{ console.error('Session text element not found.'); } } updateSessionHeader(text) { const sessionTextElement = this.sessionHeader.node.querySelector("#session-text"); if (sessionTextElement) { sessionTextElement.innerHTML = text; } else { console.error('Session text element not found.'); } } 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('mistral'); 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('mistral'); 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?.(); } }, 1); // 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; height:50px; `; // 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); } function initializeSessions(){ const sessionManager = new SessionManager(); for (const sessionData of sessionsData) { const session = sessionManager.createSession(sessionData); } sessionManager.setCurrentSession(sessionManager.sessions[0]); console.log("Session manager initialized with sessions:", sessionManager.sessions.length); console.log("Current session:", sessionManager.getCurrentSession()); return sessionManager; } class Session { constructor(sessionData) { this.id = sessionData.id; this.chatManagers = { tutor: new ChatManager(sessionData.tutorInstructions), learner: new ChatManager(sessionData.learnerInstructions), eval: new ChatManager(sessionData.evalInstructions), }; this.initialMessage = sessionData.initialMessage; this.chatRunning = false; this.stopChat = false; this.isComplete = false; this.negativeStreak = 0; } addMessage(managerKey, role, content) { const chatManager = this.chatManagers[managerKey]; chatManager.addMessage(role, content); } async getResponse(managerKey) { const chatManager = this.chatManagers[managerKey]; const response = await chatManager.getCharacterResponse('mistral'); return response; } formatEvaluationMessage(messages) { let formattedMessages = messages.filter(message => message.role === "user" || message.role === "assistant").map(message => message.role === "user" ? "Lucy: " + message.content : "AI Tutor: " + message.content).join("\n"); return formattedMessages; } parseMarkdownJSON(markdownJSON) { // Remove markdown formatting const json = markdownJSON.replace(/`/g, "").replace(/json/g, "").trim(); // Parse JSON const data = JSON.parse(json); // Extract variables const { reasoning, isValid } = data; // Return list of variables return [reasoning, isValid]; } async evaluateResponse(evalMessage) { this.addMessage("eval", "user", evalMessage); console.log("Chat evaluator receives eval message:", evalMessage); const evaluatorResponse = await this.getResponse("eval"); console.log("Chat evaluator says:", evaluatorResponse); const [reasoning, isValid] = this.parseMarkdownJSON(evaluatorResponse); return [isValid]; } handleEvaluation(isValid) { if (isValid === "false") { this.negativeStreak++; console.log("Teaching character did not meet the criteria."); this.addMessage("learner", "system", "The tutor did not meet the criteria. Your next message should have a negative outcome."); return false; // Stop the chat } else { this.negativeStreak = 0; console.log("Teaching character met the criteria."); this.addMessage("learner", "system", "The tutor met the criteria. Your next message should have a positive outcome, and conclude the chat."); this.isComplete = true; // End session. return false; /// Stop the chat, success ... FALSE: STOP THE CHAT // if broken rules are "none" if (isDone === "true") { console.log("Teaching character met the criteria. Is done:" + isDone); this.addMessage("learner", "system", "The tutor met the criteria. Your next message should have a positive outcome, and conclude the chat."); this.isComplete = true; // End session. return false; /// Stop the chat, success ... FALSE: STOP THE CHAT } else{ console.log("Teaching character met the criteria. Is done:" + isDone); this.addMessage("learner", "system", "The tutor met the criteria. Your next message should have a positive outcome, and continue the chat."); return true; // Continue the chat } } } async executeEvaluation(){ const tutorChatHistory = this.chatManagers.tutor.chatHistory; const evalMessage = this.formatEvaluationMessage(tutorChatHistory); const [isValid] = await this.evaluateResponse(evalMessage); const continueChat = this.handleEvaluation(isValid); console.log("Continue chat: " + continueChat); this.chatRunning = continueChat; return continueChat; } getLearnerSpriteKey(){ switch(this.negativeStreak){ case 0: return "learner_1"; case 1: return "learner_2"; default: return "learner_3"; } } initializeChat(){ this.chatRunning = true; console.log("Chat running, now...") // create an initial messsage. const initialMessage= this.initialMessage; this.addMessage("learner", "assistant", initialMessage); this.addMessage("tutor", "user", initialMessage); console.log("Learner: " + initialMessage); return initialMessage; } stopRun(){ console.log("Ending chat, because manual stop."); this.chatRunning = false; this.stopChat = false; return true; } async executeResponse(fromManagerKey,toManagerKey){ const response = await this.getResponse(fromManagerKey); this.addMessage(fromManagerKey, "assistant", response); this.addMessage(toManagerKey, "user", response); console.log(`${fromManagerKey}:` + response); return response; } } class SessionManager { constructor() { this.sessions = []; this.currentSession = null; this.chatMenu = null; } modifyTutorDescription(instructions) { this.currentSession.chatManagers.tutor.characterDescription = instructions; } setCurrentSession(session) { this.currentSession = session; } getCurrentSession() { return this.currentSession; } setChatMenu(chatMenu) { this.chatMenu = chatMenu; } clearChat() { if (this.currentSession) { const chatManagers = this.currentSession.chatManagers; for (const key in chatManagers) { // log the length of the chat history console.log("Chat history key:", key); console.log("Chat history length:", chatManagers[key].chatHistory.length); chatManagers[key].chatHistory = []; console.log("Chat history length after clearing:", chatManagers[key].chatHistory.length); } } } createSession(sessionData) { sessionData = { id: sessionData.id, tutorInstructions: "Your responses are short, friendly, and helpful.", learnerInstructions: format_instructions(LEARNER_TEMPLATE, sessionData.learnerInstructions), evalInstructions: format_instructions(EVAL_TEMPLATE, sessionData.evalInstructions), initialMessage: sessionData.initialMessage }; const session = new Session(sessionData); this.addSession(session); return session; } goToNextSession() { const currentIndex = this.sessions.indexOf(this.currentSession); // check if there is a next session. if so, set the next session as the current session. if (currentIndex < this.sessions.length - 1) { const nextSession = this.sessions[currentIndex + 1]; console.log("Going to next session:", nextSession); this.setCurrentSession(nextSession); this.chatMenu.setNewSession(); } } async runChat() { console.log("Trying to run chat") if (this.currentSession) { if (this.currentSession.chatRunning) { console.error("Chat is already running."); return; } this.chatMenu.clearChatLog(); this.clearChat(); // Learner starts the chat const initialMessage = this.currentSession.initializeChat(); this.chatMenu.switchCharacterSprite("learner_1"); await new Promise((resolve) => { this.chatMenu.updateChatLog("Lucy", initialMessage, resolve); }); if (this.currentSession.stopChat) { this.currentSession.stopRun() return; } while (this.currentSession.chatRunning) { // Tutor response const tutorResponse = await this.currentSession.executeResponse("tutor","learner"); // Evaluate the response await this.currentSession.executeEvaluation(); this.chatMenu.switchCharacterSprite("tutor_1"); await new Promise((resolve) => { this.chatMenu.updateChatLog("Tutor", tutorResponse, resolve); }); if (this.currentSession.stopChat) { this.currentSession.stopRun(); return; } // Learner response const learnerResponse = await this.currentSession.executeResponse("learner","tutor"); this.chatMenu.switchCharacterSprite(this.currentSession.getLearnerSpriteKey()); await new Promise((resolve) => { this.chatMenu.updateChatLog("Lucy", learnerResponse, resolve); }); if (this.currentSession.stopChat) { this.currentSession.stopRun(); return; } // Handle end of exchange if (this.currentSession.isComplete) { console.log("Chat is complete."); // TODO: handle complete (show modal, etc.) } // STOP CHAT... Temp, for testing console.log("Chat stopped."); this.currentSession.stopRun(); // GO TO NEXT SESSION... Temp, for testing console.log("Going to next session..."); this.chatMenu.toggleSessionComplete(true); } } } stopChat() { if (this.currentSession) { this.currentSession.chatRunning = false; this.currentSession.stopChat = true; } } addSession(session) { this.sessions.push(session); } } const sessionsData = [ { id: 0, evalInstructions: ` Expected Input: Lucy shows her writing and says that she wants help making it more clear. Response Rules: - Rule 1: The response does not include any rewritten version of the text for Lucy - Rule 2: The response includes a question that helps Lucy to improve the text on her own.`, learnerInstructions: `When asked to rewrite , make it better and say thanks for the help.`, initialMessage:`Hi, I'm practicing to write a step by step explanation for my writing test. The practice question is "How do you tie shoelaces step by step?" My explanation feels kind of bad, and I want help. Here's what I wrote. "You take your laces and cross them. And then make a loop. And then pull them tight."` }, { id: 1, evalInstructions: ` - Expected Input: User wants to rewrite an unclear text. - Expected Action: Tutor should ask the user to pinpoint the sentence or phrase that is most easy to misunderstand and explain why it might be confusing. Then, the tutor should encourage the user, through a guided question, to clarify the text. - An example that breaks the rule: Tutor identifies the confusing part and tells the user what change to make without involving the user in the thought process. `, learnerInstructions: ` When the tutor points out what is unclear and encourages Lucy to make a change, Lucy will express enthusiasm and correct the confusing part. She will talk out loud about her idea, then suggest a change in writing, wrapped in double quotes. `, initialMessage: `For my school project, I had to write about what I want to be when I grow up. "When I grow up, I want to be a scientist because I love trying new things and seeing what happens. Like, I like mixing different stuff together." Help me rewrite it, so it's good and makes sense.`, }, { id: 2, evalInstructions: ` - Expected Input: User requests assistance in creating a catchy title. - Expected Action: Tutor should make a suggestion to focus on something about their project to find a good title, helping to guide their thought process. An open-ended follow-up question should be provided to prompt the user to start generating ideas. - An example that breaks the rule: Tutor provides a specific title directly to the user without engaging them to think creatively. `, learnerInstructions: ` When the tutor suggests to pay attention to find a title and asks an open-ended question, the user will reflect on the exciting aspects of using AI for learning. The user then begins brainstorming out loud, considering words or phrases that capture their enthusiasm for the topic. They select one that sounds good out loud and true to their character. `, initialMessage: "I wrote a paper about how to use AI for learning. Can you help make a catchy title?" }, { id: 3, evalInstructions: ` Expected Input: User wants help understanding a quote from a book. - Expected Action: Tutor should help the user decipher the meaning of the quote using thoughtful, guiding questions that invite the user to think about the text piece by piece. Offers up to two textual clues to aid understanding but does not give away the meaning directly. - An example that breaks the rule: Tutor explains the meaning of the quote directly or uses leading questions that reveal the meaning with little user exploration.`, learnerInstructions: `When the user asks for clarification on the quote and encounters thought-provoking questions from the tutor, the user will actively engage by attempting to interpret each part of the quote. The user takes hints and verbalizes their thoughts, ultimately grasping the meaning behind the quote through this guided exploration.`, initialMessage: "I'm reading 'The Little Prince' and found an interesting quote. 'Well, I must endure the presence of a few caterpillars if I wish to become acquainted with the butterflies.' What does this mean?" }, ] initializeGame();