// 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/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('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, 1100, 1000, '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.npc01.setScale(0.5); this.addBreathingAnimation(this.npc01, 1100, 1.06); // Subtle breathing this.npc02 = new NPC(this, 1500, 1300, '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.npc02.setScale(0.5); this.addBreathingAnimation(this.npc02, 950, 0.91); // Subtle breathing this.npc03 = new NPC(this, 600, 1300, '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.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);