// ChatManager is already imported in the current scope. const baseStyle = ` font-family: 'Trebuchet MS', serif; font-size: 20px; border: 2px solid #4e342e; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9); `; const chatLogStyle = ` ${baseStyle} width: 240px; height: 570px; background-color: rgba(0, 0, 0, 0.0); padding: 10px; direction: ltr; box-shadow: none; border: none; overflow-y: auto; `; const inputStyle = ` ${baseStyle} width: 270px; height: 40px; background-color: rgba(255, 255, 255, 0.4); box-shadow: none; `; const sendButtonStyle = ` ${baseStyle} width: 270px; height: 44px; color: #e0d7c5; background: linear-gradient(to bottom, #957d5f, #6c543e); box-shadow: none; `; const closeButtonStyle = ` ${baseStyle} width: 30px; height: 30px; border-radius: 30px; // makes the button circular color: #fff; // white text color background-color: #ff6347; // tomato red background font-size: 30px; // larger font size for the 'X' text-align: center; // centers the 'X' in the button line-height: 30px; // vertically centers the 'X' in the button cursor: pointer; // changes cursor to pointer on hover `; class ChatScene extends Phaser.Scene { preload() { this.load.image('background', 'https://play.rosebud.ai/assets/forest_rpg_stage.png?va10'); this.load.image('player', 'https://play.rosebud.ai/assets/character_03.png?iaXf'); this.load.image('npc01', 'https://play.rosebud.ai/assets/character_01.png?Ujar'); this.load.image('npc02', 'https://play.rosebud.ai/assets/character_04.png?GS7g'); this.load.image('npc03', 'https://play.rosebud.ai/assets/character_02.png?UGso'); this.load.image('scroll', `https://play.rosebud.ai/assets/scroll_bg.png?SnQk`); this.load.bitmapFont('roboto', 'https://play.rosebud.ai/assets/rosebud_roboto.png?aqFU', 'https://play.rosebud.ai/assets/rosebud_roboto.xml?JihQ'); this.load.image('handIcon', 'https://play.rosebud.ai/assets/touch_indicator.png?XD6c'); } create() { this.add.image(550, 445, 'background').setScale(0.5); this.add.image(1225, 445, 'scroll'); this.player = this.physics.add.image(360, 300, 'player'); this.addPlayerBreathingAnimation(this.player); this.player.setScale(0.5); this.player.setCollideWorldBounds(true); this.player.body.setSize(this.player.width * 0.5, this.player.height * 0.5); this.npc01 = new NPC(this, 600, 500, 'npc01', 'You are deeply cold, female, bookworm that is studying to become a mage. You hate anyone who wastes time, but warm up to those that show an interest in magic. Your name is Frost Arcana.', 'Frost Arcana'); this.addNPC01BreathingAnimation(this.npc01); this.npc01.setScale(0.5); this.npc02 = new NPC(this, 800, 650, 'npc02', 'You are a light-haired, make, adorned warrior on the quest to save the princess from the Dark Lord, who happens to be your own brother! You feel guilty. Your name is Lumin Oathblade.', 'Lumin Oathblade'); this.addNPC02BreathingAnimation(this.npc02); this.npc02.setScale(0.5); this.npc03 = new NPC(this, 300, 650, 'npc03', 'You are a dark haired, female, rogue from far away that peddles mysterious magical trinkets that you probably should not have. The danger gives you a thrill. You are eloquent but do not say much to leave others guessing. Your name is Raven Mystique.', 'Raven Mystique'); this.addNPC03BreathingAnimation(this.npc03); this.npc03.setScale(0.5); this.physics.add.collider(this.player, [this.npc01, this.npc02, this.npc03]); this.cursors = this.input.keyboard.createCursorKeys(); this.isChatOpen = false; this.chatDialogs = new Map(); this.input.on('gameobjectdown', (pointer, gameObject) => { if (gameObject instanceof NPC && this.playerInRange(gameObject)) { this.openChat(gameObject); if (this.handIcon) { this.handIcon.destroy(); this.handIcon = null; } } }); // Add hovering hand icon const randomNPC = Phaser.Math.RND.pick([this.npc01, this.npc02, this.npc03]); this.handIcon = this.add.image(randomNPC.x, randomNPC.y + 50, 'handIcon').setScale(0.20); this.tweens.add({ targets: this.handIcon, y: randomNPC.y + 30, duration: 1000, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); } addNameBar(character, name) { const nameBar = this.add.graphics(); nameBar.fillStyle(0x000000, 0.7); const nameWidth = Math.max(name.length * 12, 100); // Adjust base on name length nameBar.fillRoundedRect(-nameWidth / 2, -125, nameWidth, 30, 15); const nameText = this.add.bitmapText(0, -110, 'roboto', name, 20).setOrigin(0.5); const container = this.add.container(character.x, character.y, [nameBar, nameText]); character.on('destroy', () => { container.destroy(); }); return container; } update() { if (this.isChatOpen) { if (this.cursors.up.isDown || this.cursors.down.isDown || this.cursors.left.isDown || this.cursors.right.isDown) { this.closeChat(); } return; } const speed = 4; this.player.setVelocity(0); if (this.cursors.left.isDown) { this.player.setVelocityX(-speed * 60); this.player.setFlipX(true); } else if (this.cursors.right.isDown) { this.player.setVelocityX(speed * 60); this.player.setFlipX(false); } if (this.cursors.up.isDown) { this.player.setVelocityY(-speed * 60); } else if (this.cursors.down.isDown) { this.player.setVelocityY(speed * 60); } // Update name bar positions this.npc01.updateNameBarPosition(); this.npc02.updateNameBarPosition(); this.npc03.updateNameBarPosition(); } addBreathingAnimation(sprite, duration, scale) { this.tweens.add({ targets: sprite, scaleX: sprite.scaleX * scale, scaleY: sprite.scaleY * scale, duration: duration, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); } addPlayerBreathingAnimation(sprite) { this.addBreathingAnimation(sprite, 1000, 0.55); } addNPC01BreathingAnimation(sprite) { this.addBreathingAnimation(sprite, 1100, 0.54); } addNPC02BreathingAnimation(sprite) { this.addBreathingAnimation(sprite, 950, 0.56); } addNPC03BreathingAnimation(sprite) { this.addBreathingAnimation(sprite, 1050, 0.53); } playerInRange(npc) { const distance = Phaser.Math.Distance.Between(this.player.x, this.player.y, npc.x, npc.y); return distance < 230; } openChat(npc) { if (this.isChatOpen) return; this.isChatOpen = true; const uniqueIdSuffix = npc.characterDescription.replace(/\s+/g, '-').toLowerCase(); if (this.chatDialogs.has(npc)) { const dialog = this.chatDialogs.get(npc); dialog.chatLog.setVisible(true); dialog.chatInput.setVisible(true); dialog.sendButton.setVisible(true); dialog.closeButton.setVisible(true); dialog.chatInput.node.focus(); } else { const chatLog = this.add.dom(1230, 400).createFromHTML(`

`); const chatInputId = `chatInput-${uniqueIdSuffix}`; const chatInput = this.add.dom(1220, 720).createFromHTML(` `); const sendButtonId = `sendButton-${uniqueIdSuffix}`; const sendButton = this.add.dom(1220, 770).createFromHTML(` `); const closeButtonId = `closeButton-${uniqueIdSuffix}`; const closeButton = this.add.dom(1350, 115).createFromHTML(` `); chatInput.node.addEventListener('keydown', (event) => { event.stopPropagation(); if (event.key === "Enter" || event.keyCode === 13) { this.sendChatMessage(npc, npc.chatManager, chatInputId, npc.chatLogId); } }); sendButton.addListener('click').on('click', () => { this.sendChatMessage(npc, npc.chatManager, chatInputId, npc.chatLogId); }); closeButton.addListener('click').on('click', () => { this.closeChat(); }); chatInput.node.focus(); this.chatDialogs.set(npc, { chatLog, chatInput, sendButton, closeButton }); } } closeChat() { if (!this.isChatOpen) return; this.isChatOpen = false; for (let dialog of this.chatDialogs.values()) { dialog.chatLog.setVisible(false); dialog.chatInput.setVisible(false); dialog.sendButton.setVisible(false); dialog.closeButton.setVisible(false); } } updateChatLog(chatLogNode, role, message, characterName) { const color = role === 'Player' ? '#3d1e01' : '#8a0094'; const displayName = role === 'Player' ? 'Player' : characterName; chatLogNode.innerHTML += `

${displayName}: ${message}

`; chatLogNode.scrollTop = chatLogNode.scrollHeight; } async sendChatMessage(npc, chatManager, chatInputId, chatLogId) { const chatInputNode = document.getElementById(chatInputId); const chatLogNode = document.getElementById(chatLogId); if (chatInputNode && chatLogNode) { const inputValue = chatInputNode.value; if (inputValue) { chatManager.addMessage('user', inputValue); this.updateChatLog(document.getElementById(npc.chatLogId), 'Player', inputValue, 'Player'); const response = await chatManager.getCharacterResponse(); chatManager.addMessage('assistant', response); this.updateChatLog(document.getElementById(npc.chatLogId), 'Character', response, npc.name); chatInputNode.value = ''; } } } } class NPC extends Phaser.Physics.Arcade.Image { constructor(scene, x, y, key, characterDescription, name) { super(scene, x, y, key); this.scene = scene; this.characterDescription = characterDescription; this.chatLogId = 'chatLogContent-' + characterDescription.replace(/\s+/g, '-').toLowerCase(); this.name = name; this.setInteractive(); scene.add.existing(this); scene.physics.add.existing(this); this.setImmovable(true); this.body.setSize(this.width * 0.5, this.height * 0.5); this.chatManager = new ChatManager(characterDescription); this.scene.addBreathingAnimation(this); this.nameBar = this.scene.addNameBar(this, name); } setCursorStyle() { this.on('pointerover', () => { if (this.scene.playerInRange(this)) { this.scene.input.setDefaultCursor('pointer'); } }); this.on('pointerout', () => { this.scene.input.setDefaultCursor('default'); }); } updateNameBarPosition() { if (this.nameBar) { this.nameBar.setPosition(this.x, this.y); } } } const config = { parent: 'renderDiv', type: Phaser.AUTO, scene: ChatScene, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: 1400, height: 890, }, dom: { createContainer: true }, input: { keyboard: { capture: [37, 38, 39, 40] } }, physics: { default: 'arcade', arcade: { debug: false } } }; window.phaserGame = new Phaser.Game(config);