// 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/horror_stage.webp?KukP'); this.load.image('player', 'https://play.rosebud.ai/assets/character_02.png?EliI'); this.load.image('npc01', 'https://play.rosebud.ai/assets/character_01.png?G90W'); this.load.image('npc02', 'https://play.rosebud.ai/assets/character_03.png?tGJQ'); this.load.image('npc03', 'https://play.rosebud.ai/assets/character_04.png?8NFU'); this.load.audio('music', 'https://play.rosebud.ai/assets/rosebud_official_theme_01.mp3?hYi9'); this.load.image('scroll', `https://play.rosebud.ai/assets/scroll_bg.png?SnQk`); this.load.image('audioPlaying', 'https://play.rosebud.ai/assets/audioPlaying.png?oV8f'); this.load.image('audioMuted', 'https://play.rosebud.ai/assets/audioMuted.png?QCe6'); 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 tormented boy, with ghost white eyes and dark hair. There is a ghostly voice that comments on things around you but nobody else hears it or believes you. You are sad, but a good person. Your name is Ethan Whisper.', 'Ethan Whisper'); this.addNPC01BreathingAnimation(this.npc01); this.npc01.setScale(0.5); this.npc02 = new NPC(this, 900, 400, 'npc02', 'You are a deeply mysterious figure in a shrouded green camoflauge outfit. All others can see are blue glowing eyes peering from your hood. You are a paranormal hunter and want to stop all paranormal activity once and for all. Your name is Specter Shade.', 'Specter Shade'); this.addNPC02BreathingAnimation(this.npc02); this.npc02.setScale(0.5); this.npc03 = new NPC(this, 300, 650, 'npc03', 'You are a bubbly young girl with bright pink hair and a massive blocky plush monster hat. You are drawn to monsters and love them. You do not have great self preservation instincts and are immature. Your name is Pixie Monsterlove.', 'Pixie Monsterlove'); this.addNPC03BreathingAnimation(this.npc03); this.npc03.setScale(0.5); this.physics.add.collider(this.player, [this.npc01, this.npc02, this.npc03]); this.music = this.sound.add('music', { volume: 0.1, loop: true }); this.music.play(); 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; } } }); this.isMuted = false; this.muteButton = this.add.image(100, 50, 'audioPlaying').setInteractive(); this.muteButton.setScale(0.4); this.muteButton.on('pointerdown', this.toggleMute, this); // 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; } toggleMute() { this.isMuted = !this.isMuted; if (this.isMuted) { this.music.pause(); this.muteButton.setTexture('audioMuted'); } else { this.music.resume(); this.muteButton.setTexture('audioPlaying'); } } 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);