// ChatManager is already imported in the current scope. const CHARACTER_DESCRIPTION = 'you are wyclef jean.keep your responses short and emphasise on refugee life,add emotions'; const baseStyle = ` font-family: 'Garamond', serif; font-size: 16px; font-weight: bold; border: solid rgba(255, 255, 255, 1.0); box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); `; const chatLogStyle = ` ${baseStyle} width: 300px; height: 200px; border-width: 1.5px 1.5px 1.5px 1.5px; background-color: rgba(0, 0, 0, 0.0); padding: 30px; overflow-y: auto; `; const chatLogContentStyle = ` direction: 2tr; font-size:22px; display: inline-block; width: 100%; `; const inputStyle = ` ${baseStyle} width: 350px; height: 30px; background-color: rgba(0, 0, 0, 0.6); padding-left: 30px; border-width: 1.5px 0px 1.5px 1.5px; color: rgba(255, 255, 255, 1.0); overflow-x: auto; `; const sendButtonStyle = ` ${baseStyle} width: 80px; height: 30px; color: #e0d7c5; border-width: 1.5px 1.5px 1.5px 1.5px; background-color: rgba(0, 0, 0, 0.6); `; class ChatScene extends Phaser.Scene { constructor() { super(); this.waitingForResponse = false; // State variable tracking whether the game is waiting for a character to respond this.songs = []; this.isMuted = false; this.muteButton = null; } preload() { // GUI/Level Assets this.load.image('colorful', `https://play.rosebud.ai/assets/make a colorful back ground.png?xFIk`); // Load colorful background this.load.image('wyclefJean', `https://play.rosebud.ai/assets/make a background image full of colors like wyclef jean image.png?p1e0`); // Load Wyclef Jean image this.load.image('background', `https://play.rosebud.ai/assets/lab_background.jpg?WeE4`); this.load.image('nextBackground', `https://play.rosebud.ai/assets/poor kid.png.png?4jfS`); this.load.image('restart', `https://play.rosebud.ai/assets/restart_icon.png?sgOk`); this.load.image('soundOn', `https://play.rosebud.ai/assets/sound_on_icon.png?rhkr`); this.load.image('soundOff', `https://play.rosebud.ai/assets/sound_off_icon.png?9pqr`); this.load.audio('song1', `https://play.rosebud.ai/assets/tune.mp3.mp3?p3JV`); this.load.image('newBackground', `https://play.rosebud.ai/assets/a background of a young black boy with his middle aged parents in slummy areas of brooklyn where brooklyn skyline behind.png?25j8`); // Load the university image this.load.image('university', `https://play.rosebud.ai/assets/university img.png.png?e9Qu`); // Load the concert image this.load.image('concert', `https://play.rosebud.ai/assets/concert.png.png?6vvz`); // Character Assets this.load.image('characterSprite', `https://play.rosebud.ai/assets/wj.png.png?VjkQ`); } create() { this.background = this.add.image(400, 300, 'colorful'); const particles = this.add.particles('red'); const emitter = particles.createEmitter({ speed: 100, scale: { start: 1, end: 0 }, blendMode: 'ADD' }); // Add the logo at the center of the game area const logo = this.add.image(400, 300, 'wyclefJean'); // Change the logo image to Wyclef Jean image // Reduce the size of the logo by 4x logo.setScale(0.25, 0.25); // Add 'Wyclef Jean' text above the logo const logoText = this.add.text(220, 70, 'Wyclef Jean', { fontSize: '80px', fill: 'white', fontFamily: 'San Francisco' }); emitter.startFollow(logo); // Add 'PRESS TO PLAY' text below the logo const startText = this.add.text(260, 450, 'PRESS TO PLAY', { fontSize: '40px', fill: 'white', fontFamily: 'San Francisco' }); startText.setInteractive(); startText.on('pointerdown', () => { // Change the background to the poor kid background this.background = this.add.image(400, 300, 'nextBackground').setScale(0.79); // Decrease the size of the poor kid background by 1.75x // Remove the logo, texts, and particles logo.destroy(); logoText.destroy(); startText.destroy(); particles.destroy(); // Initialize character sprite and reduce its size by 1.5x this.characterSprite = this.add.image(150, 500, 'characterSprite').setScale(0.264); const restart = this.add.image(40, 30, 'restart').setScale(0.55).setInteractive(); // Mute toggle button this.muteButton = this.add.image(40, 80, 'soundOn').setScale(0.23).setInteractive(); // Background music setup this.songs.push(this.sound.add('song1', { volume: 0.2, loop: true })); this.songs[0].play(); // Play the first song and loop it this.add.dom(397, 460).createFromHTML(`

`); const chatInput = this.add.dom(397, 560).createFromHTML(` `); const sendButton = this.add.dom(540, 560).createFromHTML(` `); chatInput.node.addEventListener('keyup', (event) => { if ((event.key === "Enter" || event.keyCode === 13) && !this.waitingForResponse) { this.sendChatMessage(this.chatManager); } }); sendButton.addListener('click').on('click', () => { this.sendChatMessage(this.chatManager); }); restart.on('pointerdown', () => { const confirmReset = window.confirm("Are you sure you want to clear the chat and reset the context?"); if (confirmReset) { // Clear the chat log and chat manager state if (this.chatManager.cleanChatHistory) { this.chatManager.cleanChatHistory(); } const chatLogContentDiv = document.getElementById('chatLogContent'); chatLogContentDiv.innerHTML = ''; // Send initial greeting after reset this.sendInitialGreeting(); } }); // Mute toggle functionality this.muteButton.on('pointerdown', () => { this.isMuted = !this.isMuted; this.sound.mute = this.isMuted; this.muteButton.setTexture(this.isMuted ? 'soundOff' : 'soundOn'); }); this.chatManager = new ChatManager(CHARACTER_DESCRIPTION); this.sendInitialGreeting(); // Add "Next" text to the scene const circle = this.add.circle(690, 555, 50, 0xffffff); // Adjust y-coordinate to move the circle up by 5 pixels circle.setStrokeStyle(4, 0x999999); // Add 'next' text on the poor kid background const nextText = this.add.text(circle.x, circle.y, 'next', { fontSize: '40px', fill: '#000000', fontFamily: 'Fran Cissco', align: 'center' }) .setOrigin(0.5); nextText.setInteractive({ useHandCursor: true }); nextText.on('pointerdown', () => { this.background.setTexture('newBackground'); const nextText2 = this.add.text(circle.x, circle.y, 'next', { fontSize: '40px', fill: '#000000', fontFamily: 'Fran Cissco', align: 'center' }) .setOrigin(0.5); nextText2.setInteractive({ useHandCursor: true }); nextText2.on('pointerdown', () => { this.background.setTexture('university'); const nextText3 =this.add.text(circle.x, circle.y, 'next', { fontSize: '40px', fill: '#000000', fontFamily: 'Fran Cissco', align: 'center' }) .setOrigin(0.5); nextText3.setInteractive({ useHandCursor: true }); nextText3.on('pointerdown', () => { this.background.setTexture('concert'); const nextText4 = this.add.text(circle.x, circle.y, 'next', { fontSize: '40px', fill: '#000000', fontFamily: 'Fran Cissco', align: 'center' }) .setOrigin(0.5); nextText4.setInteractive({ useHandCursor: true }); nextText4.on('pointerdown', () => { this.background.setTexture('concert'); }); }); }); }); }); } async sendInitialGreeting() { this.waitingForResponse = true; // Set the state to waiting document.getElementById('sendButton').disabled = true; const initialPrompt = "Greet the player and stop"; // Adjust as needed const response = await this.chatManager.getCharacterResponse(initialPrompt); this.chatManager.addMessage('assistant', response); // Update the chat log with the greeting message this.characterUpdatesChatLog('Wyclef Jean', response, () => { this.waitingForResponse = false; // Reset the state document.getElementById('sendButton').disabled = false; // Re-enable send button after receiving the response + response animation completes }); } async sendChatMessage(chatManager) { const chatInput = document.getElementById('chatInput'); const sendButton = document.getElementById('sendButton'); // Ensure the send button has an ID 'sendButton' const inputValue = chatInput.value; if (inputValue) { // Disable send button sendButton.disabled = true; // Add the player's message and update the chat log this.chatManager.addMessage('user', inputValue); this.playerUpdatesChatLog('Me', inputValue); // Clear the input box immediately after sending the message chatInput.value = ''; // Get the character's response const response = await chatManager.getCharacterResponse(); this.chatManager.addMessage('assistant', response); this.characterUpdatesChatLog('Wyclef Jean', response, () => { this.waitingForResponse = false; // Reset the state sendButton.disabled = this.waitingForResponse; // Re-enable send button after receiving the response + response animation completes }); } } playerUpdatesChatLog(role, message) { const chatLogContentDiv = document.getElementById('chatLogContent'); const color = role === 'Player' ? 'black' : 'black'; chatLogContentDiv.innerHTML += `

${role}: ${message}

`; const chatLogDiv = document.getElementById('chatLog'); chatLogDiv.scrollTop = chatLogDiv.scrollHeight; } characterUpdatesChatLog(role, message, onComplete) { const chatLogContentDiv = document.getElementById('chatLogContent'); const color = role === 'Player' ? 'black' : 'black'; let newMessageElement = document.createElement('p'); newMessageElement.style.color = color; newMessageElement.innerHTML = `${role}: `; chatLogContentDiv.appendChild(newMessageElement); let i = 0; const interval = setInterval(() => { if (i < message.length) { newMessageElement.innerHTML += message[i]; i++; } else { clearInterval(interval); const chatLogDiv = document.getElementById('chatLog'); chatLogDiv.scrollTop = chatLogDiv.scrollHeight; if (onComplete) { onComplete(); } } }, 75); } } const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: 800, height: 600, }, scene: ChatScene, dom: { createContainer: true }, }; window.phaserGame = new Phaser.Game(config);