// ChatManager is already imported in the current scope. class ChatScene extends Phaser.Scene { preload() { // Load assets 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('closeButton', 'https://play.rosebud.ai/assets/Exit.png?jGf7'); this.load.bitmapFont('roboto', 'https://play.rosebud.ai/assets/rosebud_roboto.png?aqFU', 'https://play.rosebud.ai/assets/rosebud_roboto.xml?JihQ'); // Load movement arrow images this.load.image('arrowUp', 'https://play.rosebud.ai/assets/Up-Arrow.png?iwMH'); this.load.image('arrowDown', 'https://play.rosebud.ai/assets/Down-Arrow.png?e9y9'); this.load.image('arrowLeft', 'https://play.rosebud.ai/assets/Left-Arrow.png?vx1E'); this.load.image('arrowRight', 'https://play.rosebud.ai/assets/Right-Arrow.png?0Q9f'); // Load the rotating image for the send button this.load.image('rotateIcon', 'https://play.rosebud.ai/assets/DoubleCircleArrows1_no_bg.png.png?SJ7R'); // Load the hand icon this.load.image('handIcon', 'https://play.rosebud.ai/assets/touch_indicator.png?XD6c'); } create() { // Set camera bounds this.cameras.main.setBounds(0, 0, 2000, 2000); // Add background this.add.image(1000, 1000, 'background').setScale(1); // Create player with physics this.player = this.physics.add.image(1000, 1000, 'player').setScale(0.5); this.addBreathingAnimation(this.player, 1000, 1.02); // Adjust player's collision box this.player.body.setSize(this.player.width * 0.4, this.player.height * 0.5); this.player.body.setOffset(this.player.width * 0.3, this.player.height * 0.5); // Enable camera to follow player this.cameras.main.startFollow(this.player); // Create NPCs with physics this.npc01 = new NPC(this, 900, 1000, '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.npc01.setScale(0.5); this.addBreathingAnimation(this.npc01, 1100, 1.06); // Subtle breathing this.npc02 = new NPC(this, 1500, 1300, '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.npc02.setScale(0.5); this.addBreathingAnimation(this.npc02, 950, 0.91); // Subtle breathing this.npc03 = new NPC(this, 600, 1300, '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.npc03.setScale(0.5); this.addBreathingAnimation(this.npc03, 1050, 1.09); // Subtle breathing // Create NPC group for collision this.npcs = this.physics.add.group(); this.npcs.add(this.npc01); this.npcs.add(this.npc02); this.npcs.add(this.npc03); // Adjust NPCs' collision boxes and make them immovable this.npcs.children.iterate((npc) => { npc.body.setImmovable(true); npc.body.setSize(npc.width * 0.4, npc.height * 0.5); npc.body.setOffset(npc.width * 0.3, npc.height * 0.5); }); // Set NPCs to be immovable this.npcs.children.iterate((npc) => { npc.body.setImmovable(true); }); // Add collision between player and NPCs this.physics.add.collider(this.player, this.npcs); // Input this.cursors = this.input.keyboard.createCursorKeys(); this.input.addPointer(1); // For touch input // Remove capture of spacebar to allow it in chat input this.input.keyboard.removeCapture(Phaser.Input.Keyboard.KeyCodes.SPACE); // Movement flags this.arrowUpPressed = false; this.arrowDownPressed = false; this.arrowLeftPressed = false; this.arrowRightPressed = false; // Create movement arrows this.createMovementArrows(); this.isChatOpen = false; // Interact with NPCs (both touch and mouse clicks) this.input.on('gameobjectdown', (pointer, gameObject) => { if (gameObject instanceof NPC && this.playerInRange(gameObject)) { this.openChat(gameObject); // Remove hand icon if it exists if (this.handIcon) { this.handIcon.destroy(); this.handIcon = null; } } }); // Create chat UI (but keep it hidden initially) this.createChatUI(); // Inject CSS for rotating image this.injectCSS(); // Add hand icon hovering over a random NPC this.addHandIcon(); } injectCSS() { const styleExists = document.getElementById('rotateImageStyle'); if (!styleExists) { const style = document.createElement('style'); style.id = 'rotateImageStyle'; style.type = 'text/css'; style.innerHTML = ` .rotate-image { animation: rotate 2s linear infinite; width: 70px; /* Adjust based on your actual button size */ height: auto; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`; document.getElementsByTagName('head')[0].appendChild(style); } } createMovementArrows() { const arrowSize = 100; // Increased size const offset = -5; // Reduced distance between arrows const centerX = this.scale.width / 2; const centerY = this.scale.height / 2 + 400; // Moved down on screen // Create arrow buttons in a plus sign layout this.arrowUp = this.add.image(centerX, centerY - arrowSize - offset, 'arrowUp').setInteractive().setScrollFactor(0); this.arrowDown = this.add.image(centerX, centerY + arrowSize + offset, 'arrowDown').setInteractive().setScrollFactor(0); this.arrowLeft = this.add.image(centerX - arrowSize - offset, centerY, 'arrowLeft').setInteractive().setScrollFactor(0); this.arrowRight = this.add.image(centerX + arrowSize + offset, centerY, 'arrowRight').setInteractive().setScrollFactor(0); // Scale arrows this.arrowUp.setScale(1.5); this.arrowDown.setScale(1.5); this.arrowLeft.setScale(1.5); this.arrowRight.setScale(1.5); // Arrow input events this.arrowUp.on('pointerdown', () => { this.arrowUpPressed = true; }); this.arrowUp.on('pointerup', () => { this.arrowUpPressed = false; }); this.arrowUp.on('pointerout', () => { this.arrowUpPressed = false; }); this.arrowDown.on('pointerdown', () => { this.arrowDownPressed = true; }); this.arrowDown.on('pointerup', () => { this.arrowDownPressed = false; }); this.arrowDown.on('pointerout', () => { this.arrowDownPressed = false; }); this.arrowLeft.on('pointerdown', () => { this.arrowLeftPressed = true; }); this.arrowLeft.on('pointerup', () => { this.arrowLeftPressed = false; }); this.arrowLeft.on('pointerout', () => { this.arrowLeftPressed = false; }); this.arrowRight.on('pointerdown', () => { this.arrowRightPressed = true; }); this.arrowRight.on('pointerup', () => { this.arrowRightPressed = false; }); this.arrowRight.on('pointerout', () => { this.arrowRightPressed = false; }); } setMovementArrowsVisible(visible) { this.arrowUp.setVisible(visible); this.arrowDown.setVisible(visible); this.arrowLeft.setVisible(visible); this.arrowRight.setVisible(visible); } addNameBar(character, name) { const nameBar = this.add.graphics(); nameBar.fillStyle(0x000000, 0.7); const nameWidth = Math.max(name.length * 12, 100); 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) { // Hide movement arrows when chat is open this.setMovementArrowsVisible(false); // Stop player movement this.player.setVelocity(0, 0); return; } else { // Show movement arrows when chat is closed this.setMovementArrowsVisible(true); } const speed = 200; let velocityX = 0; let velocityY = 0; // Keyboard input if (this.cursors.left.isDown || this.arrowLeftPressed) { velocityX = -speed; this.player.setFlipX(true); } else if (this.cursors.right.isDown || this.arrowRightPressed) { velocityX = speed; this.player.setFlipX(false); } if (this.cursors.up.isDown || this.arrowUpPressed) { velocityY = -speed; } else if (this.cursors.down.isDown || this.arrowDownPressed) { velocityY = speed; } // Update player velocity this.player.setVelocity(velocityX, velocityY); // 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' }); } 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; this.currentNPC = npc; // Show the chat UI this.chatContainer.setVisible(true); this.chatContainer.setDepth(100); // Ensure chat is on top this.chatInput.focus(); // Disable Phaser keyboard input to allow typing, but keep touch input enabled this.input.keyboard.enabled = false; // Stop player movement this.player.setVelocity(0, 0); // Clear the chat log and populate with the NPC's chat history this.clearChatLog(); this.populateChatHistory(npc); } clearChatLog() { const chatLogContentDiv = this.chatContainer.node.querySelector('#chatLogContent'); chatLogContentDiv.innerHTML = ''; } populateChatHistory(npc) { npc.chatHistory.forEach(message => { this.updateChatLog(message.speaker, message.content, null, false, true); }); } closeChat() { if (!this.isChatOpen) return; this.isChatOpen = false; // Hide the chat UI this.chatContainer.setVisible(false); // Re-enable Phaser keyboard input this.input.keyboard.enabled = true; } createChatUI() { // Base style and other styles const baseStyle = ` font-family: 'Verdana', sans-serif; font-size: 16px; color: #FFF; /* Original color set to white */ border-style: solid; border-color: #2F4152; background-color: rgba(48, 50, 54, 0.75); box-sizing: border-box; `; const chatLogStyle = ` ${baseStyle} width: 640px; /* Match game width */ height: 300px; border-radius: 30px 30px 0px 0px; padding: 10px 30px; overflow-y: auto; box-sizing: border-box; border-width: 1px 1px 0px 1px; position: relative; `; const inputSubmitContainerStyle = ` display: flex; width: 640px; /* Match game width */ justify-content: space-between; `; const inputStyle = ` ${baseStyle} flex-grow: 1; height: 60px; padding: 10px; border-width: 1px 0px 1px 1px; `; const sendButtonStyle = ` ${baseStyle} display: flex; justify-content: center; align-items: center; width: 75px; height: 60px; padding: 10px; border-width: 1px 1px 1px 1px; cursor: pointer; overflow: hidden; `; const chatLogContentStyle = ` direction: ltr; display: inline-block; width: 100%; `; const chatContainerStyle = ` display: flex; flex-direction: column; justify-content: flex-end; width: 640px; /* Match game width */ height: 1136px; /* Full height to allow justification to the bottom */ `; const closeButtonStyle = ` position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; cursor: pointer; `; // Creating the parent container for chat log and chat controls this.chatContainer = this.add.dom(this.scale.width / 2, this.scale.height).createFromHTML(`

`).setScrollFactor(0); // Position the chat container at the bottom center this.chatContainer.setOrigin(0.5, 1); this.chatContainer.setVisible(false); // Hide initially // Correctly assign chatInput by accessing the DOM node within chatContainer this.chatInput = this.chatContainer.node.querySelector('#chatInput'); const sendButton = this.chatContainer.node.querySelector('#sendButton'); const closeChatButton = this.chatContainer.node.querySelector('#closeChatButton'); // Event listeners for chat input and send button this.chatInput.addEventListener('keydown', (event) => { event.stopPropagation(); // Prevent Phaser from capturing the event // No need to prevent default unless necessary }); this.chatInput.addEventListener('keyup', (event) => { event.stopPropagation(); // Prevent Phaser from capturing the event if ((event.key === 'Enter' || event.keyCode === 13) && !this.waitingForResponse) { this.sendChatMessage(); } }); sendButton.addEventListener('click', () => { this.sendChatMessage(); }); // Close chat event closeChatButton.addEventListener('click', () => { this.closeChat(); }); } async sendChatMessage() { const chatInput = this.chatInput; const sendButton = this.chatContainer.node.querySelector('#sendButton'); const inputValue = chatInput.value; if (inputValue && !this.waitingForResponse) { // Update button to show loading icon sendButton.innerHTML = `

`; sendButton.disabled = true; this.currentNPC.chatManager.addMessage('user', inputValue); // Add player message to NPC's chat history this.currentNPC.chatHistory.push({ speaker: 'Player', content: inputValue }); this.updateChatLog('Player', inputValue, null, true, false); chatInput.value = ''; // Clear input // Get character response const characterResponse = await this.currentNPC.chatManager.getCharacterResponse(); this.currentNPC.chatManager.addMessage('assistant', characterResponse); // Add NPC message to NPC's chat history this.currentNPC.chatHistory.push({ speaker: this.currentNPC.name, content: characterResponse }); this.updateChatLog(this.currentNPC.name, characterResponse, () => { // Revert the send button back to its original state sendButton.innerHTML = 'SEND'; sendButton.disabled = false; }, true, false); } } updateChatLog(speaker, message, onComplete, scroll = true, isExisting = false) { if (!isExisting) { this.waitingForResponse = true; // Set the flag to true when an update starts } const chatLogContentDiv = this.chatContainer.node.querySelector('#chatLogContent'); let newMessageElement = document.createElement('p'); newMessageElement.innerHTML = `${speaker}: `; // Speaker's name in bold chatLogContentDiv.appendChild(newMessageElement); if (speaker === 'Player' || isExisting) { newMessageElement.innerHTML += message; // Append the message instantly for the player or existing messages this.waitingForResponse = false; // Reset the flag immediately for player messages or existing messages onComplete?.(); if (scroll) { this.scrollChatToBottom(); } } else { // For new NPC messages, simulate typing effect let i = 0; const interval = setInterval(() => { if (i < message.length) { newMessageElement.innerHTML += message[i]; // Append the message character by character i++; // Scroll to the latest character if scroll is true if (scroll) { this.scrollChatToBottom(); } } else { clearInterval(interval); this.waitingForResponse = false; // Reset the flag when the message has been fully added onComplete?.(); } }, 30); // Adjust the speed as necessary } } scrollChatToBottom() { const chatLogDiv = this.chatContainer.node.querySelector('#chatLog'); chatLogDiv.scrollTop = chatLogDiv.scrollHeight; } addHandIcon() { const npcs = [this.npc01, this.npc02, this.npc03]; const randomNPC = Phaser.Utils.Array.GetRandom(npcs); // Add hand icon above the NPC this.handIcon = this.add.image(randomNPC.x, randomNPC.y + 50, 'handIcon').setScale(0.20); // Tween to make the hand icon hover up and down this.tweens.add({ targets: this.handIcon, y: this.handIcon.y + 30, duration: 1000, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); } } 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.name = name; // Enable physics for NPC scene.physics.add.existing(this); this.setInteractive({ useHandCursor: true }); scene.add.existing(this); this.chatManager = new ChatManager(characterDescription); this.chatHistory = []; // Add this line to store chat history this.nameBar = this.scene.addNameBar(this, name); } 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: 640, // Adjusted for mobile aspect ratio height: 1136, // Adjusted for mobile aspect ratio }, dom: { createContainer: true }, input: { keyboard: true }, physics: { default: 'arcade', arcade: { debug: false } } }; window.phaserGame = new Phaser.Game(config);