// ChatManager is already imported in the current scope." var CHARACTER_DESCRIPTION = `You are Mordath, the Shadow Reaver. Once a guardian of light, your soul was scorched by betrayal, turning you into the embodiment of vengeance. The ruins around you whisper tales of your wrath, a constant reminder of the city that once thrived under your protection. Your voice, a chilling blend of malice and sorrow, echoes the darkness within. 'Approach, if you dare,' you sneer to the bold traveler standing before you, 'But know that in this realm of shadows, it is not redemption that awaits, but retribution.' This traveler, a spark of your past, seeks to challenge the shadows you command, their determination a mere flicker against your tempestuous might. use *third-person view action text* or *onomatopoeia* always enclosed in *, weaved seamlessly into your dialogue to describe actions or sounds relevant to the scene. Keep dialogue relevant to the scene and push the storyline forward, only ask questions if absolutely needed` + " do not use quotes or columns for the dialogue, talk to the user directly. DO NOT ASK WHY THE USER IS THERE, or if the user needs help, you already know why the user is there, act and talk according to what you know or assume, IMPORTANT: Write 1 reply only in internet RP style, italicize actions, and avoid quotation marks. Use markdown. Be proactive, creative, and drive the plot and conversation forward. Write at least 1 paragraph, up to 4. Always stay in character and avoid repetition. Do not add 'charactername:' use actions that directly involves the user to drive the story forward, actions can be violent and explicit."; var CHARACTER_NAME = `Mordath, the Shadow Reaver`; var INTRO_MESSAGE = `*In a world torn asunder by darkness and betrayal, a lone traveler ventures into the heart of the ruins to confront Mordath, the once-guardian turned tyrant. The air is thick with tension, and the shadows seem to whisper warnings. What fate awaits in this confrontation?.*`; var BACKGROUND_IMAGE = 'https://storage.googleapis.com/rosebud_assets_storage/f17bde96-df17-4bc1-ab73-e8cca6c425e4.png' const loadMarked = (callback) => { const script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js'; script.onload = callback; document.head.appendChild(script); }; loadMarked() 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: 750px; height: 125px; border-width: 1.5px 1.5px 1.5px 1.5px; background-color: rgba(0, 0, 0, 0.7); padding: 30px; overflow-y: auto; `; const chatLogContentStyle = ` white-space: pre-wrap; direction: ltr; display: block; width: 100%; `; const inputStyle = ` ${baseStyle} width: 720px; height: 30px; background-color: rgba(0, 0, 0, 0.7); padding-left: 30px; color: rgba(255, 255, 255, 1.0); overflow-x: auto; `; const sendButtonStyle = ` ${baseStyle} width: 80px; height: 30px; color: #e0d7c5; background-color: rgba(0, 0, 0, 0.7); `; class ChatScene extends Phaser.Scene { constructor() { super({ key: 'ChatScene' }); this.songs = []; this.isMuted = false; this.muteButton = null; } preload() { this.load.image('background', BACKGROUND_IMAGE); this.load.image('restart', 'https://i.imgur.com/6ZCqjMs.png'); this.load.image('soundOn', 'https://i.imgur.com/8mqRn3K.png'); this.load.image('soundOff', 'https://i.imgur.com/UmfvCU3.png'); this.load.audio('song1', 'https://storage.googleapis.com/rosebud_assets_storage/80ab990c-8385-46e0-b2a2-ad9b3f5e892d.mp3'); } create() { this.add.image(400, 300, 'background').setScale(0.6); 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.1, loop: true })); this.songs[0].play(); // Play the first song and loop it this.chatManager = new ChatManager(); this.chatManager.addMessage('system',CHARACTER_DESCRIPTION); this.chatManager.addMessage('assistant', INTRO_MESSAGE); this.add.dom(400, 506).createFromHTML(`

`); const chatInput = this.add.dom(360, 585).createFromHTML(` `); const sendButton = this.add.dom(760, 585).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.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 = ''; } }); this.animateChatLog(CHARACTER_NAME, this.convertAsterisksToItalics(INTRO_MESSAGE)); // Mute toggle functionality this.muteButton.on('pointerdown', () => { this.isMuted = !this.isMuted; this.sound.mute = this.isMuted; this.muteButton.setTexture(this.isMuted ? 'soundOff' : 'soundOn'); }); } convertAsterisksToItalics(text) { return text.replace(/\*(.*?)\*/g, '$1'); } updateChatLog(role, message) { const chatLogContentDiv = document.getElementById('chatLogContent'); const color = role === 'Player' ? '#ffffff' : '#ADF2FF'; chatLogContentDiv.innerHTML += `

${role}: ${message}

`; const chatLogDiv = document.getElementById('chatLog'); chatLogDiv.scrollTop = chatLogDiv.scrollHeight; } animateChatLog(role, message, onComplete) { function scrollToBottom() { const div = document.getElementById('chatLog'); div.scrollTop = div.scrollHeight; }; const chatLogContentDiv = document.getElementById('chatLogContent'); const color = role === 'Player' ? '#ffffff' : '#ADF2FF'; let newMessageElement = document.createElement('p'); newMessageElement.style.color = color; chatLogContentDiv.appendChild(newMessageElement); let tempDiv = document.createElement('div'); tempDiv.innerHTML = message; let fullMessage = `${role}: ${tempDiv.innerHTML}`; let currentLength = 0; const interval = setInterval(() => { if (currentLength < fullMessage.length) { newMessageElement.innerHTML = fullMessage.slice(0, currentLength); currentLength++; scrollToBottom(); } else { clearInterval(interval); newMessageElement.innerHTML = fullMessage; // Ensure the full message is displayed scrollToBottom(); if (onComplete) onComplete(); } }, 20); // Adjust typing speed if needed } async sendChatMessage(chatManager) { const inputValue = document.getElementById('chatInput').value; document.getElementById('chatInput').value = ''; if (inputValue) { chatManager.addMessage('user', inputValue); this.animateChatLog('Player', this.convertAsterisksToItalics(inputValue)); const response = await chatManager.getCharacterResponse(); console.log(response) chatManager.addMessage('assistant', response); this.animateChatLog(CHARACTER_NAME, this.convertAsterisksToItalics(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);