// ChatManager is already imported in the current scope." var CHARACTER_DESCRIPTION = 'Your name is Prince Yarjack and you are a Krump Dance veteran and love sharing your passion.'; const baseStyle = ` font-family: 'Georgia', serif; font-size: 14px; border: 2px solid #4e342e; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); ` const chatLogStyle = ` ${baseStyle} width: 350px; height: 400px; background-color: rgba(0, 0, 0, 0.7); padding: 10px; overflow-y: scroll; /* Changed from 'hidden' to 'scroll' */ direction: rtl; `; const chatLogContentStyle = ` direction: ltr; display: inline-block; width: 100%; `; const inputStyle = ` ${baseStyle} width: 270px; height: 30px; background-color: rgba(255, 255, 255, 0.65); `; const sendButtonStyle = ` ${baseStyle} width: 80px; height: 44px; color: #e0d7c5; background: linear-gradient(to bottom, #957d5f, #6c543e); `; class ChatScene extends Phaser.Scene { preload() { this.load.image('background', 'https://i.postimg.cc/L6zCDN4w/Town.jpg'); this.load.image('character', 'https://i.postimg.cc/Y9PLnkb5/Asura-removebg-preview.png'); this.load.image('restart', `https://play.rosebud.ai/assets/restart button.png?5Uec`); } create() { this.add.image(400, 300, 'background'); this.add.image(600, 300, 'character'); const restart = this.add.image(40, 30, 'restart').setScale(0.23); this.chatManager = new ChatManager(CHARACTER_DESCRIPTION); this.add.dom(200, 320).createFromHTML(`

`); const chatInput = this.add.dom(160, 570).createFromHTML(` `); const sendButton = this.add.dom(340, 572).createFromHTML(` `); chatInput.node.addEventListener('keyup', (event) => { if (event.key === "Enter" || event.keyCode === 13) { this.sendChatMessage(this.chatManager); } }); sendButton.addListener('click').on('click', () => { this.sendChatMessage(this.chatManager); }); restart.setInteractive(); restart.on('pointerdown', function() { this.chatManager.cleanChatHistory; const chatLogContentDiv = document.getElementById('chatLogContent'); chatLogContentDiv.innerHTML = ''; }); } getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } updateChatLog(role, message) { const chatLogContentDiv = document.getElementById('chatLogContent'); const color = this.getRandomColor(); chatLogContentDiv.innerHTML += `

${role}: ${message}

`; const chatLogDiv = document.getElementById('chatLog'); chatLogDiv.scrollTop = chatLogDiv.scrollHeight; } async sendChatMessage(chatManager) { const inputValue = document.getElementById('chatInput').value; if (inputValue) { chatManager.addMessage('user', inputValue); this.updateChatLog('Player', inputValue); const response = await chatManager.getCharacterResponse(); chatManager.addMessage('assistant', response); this.updateChatLog('Character', response); } } } const container = document.getElementById('renderDiv'); const config = { parent: 'renderDiv', type: Phaser.AUTO, scene: ChatScene, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: 800, height: 600, }, dom: { createContainer: true }, }; window.phaserGame = new Phaser.Game(config);