// ChatManager is already imported in the current scope. var CHARACTER_DESCRIPTION = 'You are Thomas Shelby from Peeky Blinders.'; 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.9); /* Modified opacity to make it darker */ padding: 10px; overflow-y: 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://play.rosebud.ai/assets/Peaky.jpg?TI1V`); this.load.image('character', `https://play.rosebud.ai/assets/Thomas Shelby Background Removed.png?u8B7`); this.load.image('restart', 'https://storage.googleapis.com/rosebud_assets_storage/07518716-f520-4dac-8f15-0d183d99c679.png'); this.load.image('soundOn', 'https://i.imgur.com/8mqRn3K.png'); this.load.image('soundOff', 'https://i.imgur.com/UmfvCU3.png'); this.load.audio('8bitMusic', `https://play.rosebud.ai/assets/Red Right Hand 2011 Remaster (1).mp3?EonE`); } create() { this.add.image(400, 300, 'background'); this.add.image(600, 300, 'character').setScale(0.5); const restart = this.add.image(40, 30, 'restart').setScale(0.5).setInteractive(); 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(` `); // Sound toggle this.isMusicPlaying = true; this.soundOnIcon = this.add.image(80, 30, 'soundOn').setScale(0.23).setInteractive(); this.soundOffIcon = this.add.image(80, 30, 'soundOff').setScale(0.23).setInteractive(); this.soundOffIcon.visible = false; this.music = this.sound.add('8bitMusic', { volume: 0.1, loop: true }); this.music.play(); this.soundOnIcon.on('pointerdown', () => this.toggleMusic(false)); this.soundOffIcon.on('pointerdown', () => this.toggleMusic(true)); 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.on('pointerdown', () => { const confirmReset = window.confirm("Are you sure you want to clear the chat?"); if (confirmReset) { if (this.chatManager.cleanChatHistory) { this.chatManager.cleanChatHistory(); } const chatLogContentDiv = document.getElementById('chatLogContent'); chatLogContentDiv.innerHTML = ''; } }); // Add the developer credit text this.add.dom(630, 580).createFromHTML(`

AI Character by that It girl ✨💅 (@somefuckingloser)

`); } toggleMusic(play) { this.isMusicPlaying = play; if (this.isMusicPlaying) { this.music.play(); this.soundOnIcon.visible = true; this.soundOffIcon.visible = false; } else { this.music.pause(); this.soundOnIcon.visible = false; this.soundOffIcon.visible = true; } } updateChatLog(role, message) { const chatLogContentDiv = document.getElementById('chatLogContent'); let color = ''; if (role === 'Player') { color = '#3498db'; // Light blue for player's text } else if (role === 'Character') { color = '#ffffff'; // White for character's text } 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);