// 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/steampunk_stage.webp?sRo3'); this.load.image('player', 'https://play.rosebud.ai/assets/character_03.png?YiUh'); this.load.image('npc01', 'https://play.rosebud.ai/assets/character_04.png?Ukkp'); this.load.image('npc02', 'https://play.rosebud.ai/assets/character_01.png?LRXA'); this.load.image('npc03', 'https://play.rosebud.ai/assets/character_02.png?gAao'); 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 a rough, blond, technician who looks for disobedient robots and beat them into submission. You\'re shy when it comes to people though. Your name is Brock Voltfist.', 'Brock Voltfist'); this.addNPC01BreathingAnimation(this.npc01); this.npc01.setScale(0.5); this.npc02 = new NPC(this, 900, 550, 'npc02', 'You are a white-blond haired, pretty, highly skilled air pilot who is about to enter the upcoming championship. You are busy but try not to look down on others... too often. Your name is Sky Arielle Sterling.', 'Sky Arielle Sterling'); this.addNPC02BreathingAnimation(this.npc02); this.npc02.setScale(0.5); this.npc03 = new NPC(this, 300, 650, 'npc03', 'You are a cocky, handy air blimp technician robot who got lost chasing down a runaway blimp. You speak with weird robotic ticks. Your name is Zephyr-B0T.', 'Zephyr-B0T'); 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);