// ChatManager is already imported in the current scope. const baseStyle = `font-family: 'm6x11plus', monospace; font-size: 24px; border: 2px solid #4e342e; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9);`; const chatLogStyle = `${baseStyle} width: 600px; height: 120px; background-color: rgba(0, 0, 0, 0.0); padding: 10px; direction: ltr; box-shadow: none; border: none; overflow-y: auto; position: sticky;`; const inputStyle = `${baseStyle} width: 370px; height: 30px; background-color: rgba(255, 255, 255, 0.4); box-shadow: none; border-radius: 10px; position: sticky;`; const sendButtonStyle = `${baseStyle} width: 150px; height: 40px; background-color: #04AA6D; border: none; color: white; border: 7px solid #04AA6D; text-align: center; text-decoration: none; display: inline-block; font-size: 24px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; border-radius: 7px;`; const sendButtonStyleHover = ` background-color: #057a4d; /* Darker green on hover */ color: white; `; const closeButtonStyle = `${baseStyle} width: 30px; height: 30px; border-radius: 30px; color: #fff; background-color: #ff6347; font-size: 30px; text-align: center; line-height: 30px;`; class NPC extends Phaser.Physics.Arcade.Sprite { constructor(scene, x, y, key, characterDescription, animKey, startFrame, endFrame) { super(scene, x, y, key); this.scene = scene; this.characterDescription = characterDescription; this.isChatting = false; this.chatLogId = 'chatLogContent-' + characterDescription.replace(/\s+/g, '-').toLowerCase(); // Unique ID for each chat log scene.physics.world.enable(this); this.setCollideWorldBounds(true); this.setInteractive(); scene.add.existing(this); this.directionChangeTimer = 0; this.direction = 'down'; this.isChatOpen = false; this.chatManager = new ChatManager(characterDescription, true); // Add a second parameter to indicate child-friendly mode this.createAnimation(animKey, 0, 20); } setCursorStyle() { this.on('pointerover', () => { if (this.playerInRange(this.scene.player)) { this.scene.input.setDefaultCursor('url(https://play.rosebud.ai/assets/hand_small_point.png?zISE), pointer'); } }); this.on('pointerout', () => { this.scene.input.setDefaultCursor('url(https://play.rosebud.ai/assets/cursor.png?FjzX), pointer'); }); } update() { if (this.isChatting) return; if (this.directionChangeTimer <= 0) { const directions = ["up", "down", "left", "right"]; this.direction = directions[Math.floor(Math.random() * directions.length)]; this.directionChangeTimer = 50; } if (this.direction === "up") this.y -= 1; if (this.direction === "down") this.y += 1; if (this.direction === "left") this.x -= 1; if (this.direction === "right") this.x += 1; this.directionChangeTimer -= 1; } createAnimation(animKey, startFrame, endFrame) { this.scene.anims.create({ key: animKey, frames: this.scene.anims.generateFrameNumbers(this.texture.key, { start: startFrame, end: endFrame }), frameRate: 20, repeat: -1 }); this.anims.play(animKey, true); } openChat() { this.isChatting = true; this.scene.openChat(this); } closeChat() { this.isChatting = false; } playerInRange(player) { const distance = Phaser.Math.Distance.Between(this.x, this.y, player.x, player.y); return distance < 230; } setKidFriendlyResponses() { this.chatManager.setResponseInstructions(` 1. Keep your answers very short, just 1-2 simple sentences. 2. Use words that a 6-7 year old child would easily understand. 3. Be friendly and fun in your explanations. 4. Avoid big words. If you must use one, explain it simply right away. 5. Use examples from a kid's everyday life, like school, toys, or family. 6. Be super positive and encouraging in every response. 7. If something is too hard to explain, say it's a grown-up thing and move on. 8. Use short, clear sentences with simple structure. 9. Include a fun fact or comparison when possible to make it memorable. `); } } class Menu extends Phaser.Scene { constructor() { super({ key: 'menu' }); } preload() { this.load.image('menuBackground', 'https://play.rosebud.ai/assets/town.png?frZ6'); this.load.audio('menuMusic', 'https://play.rosebud.ai/assets/bgMusic.wav.wav?4ScG'); } create() { // Add background this.add.image(700, 445, 'menuBackground').setScale(3); // Play background music this.sound.play('menuMusic', { loop: true, volume: 0.1 }); // Add title const title = this.add.text(700, 100, 'Digital Guardians', { fontFamily: '"m6x11plus"', fontSize: '72px', color: '#ffff00', align: 'center' }).setOrigin(0.5); title.setStroke('#000000', 8); title.setShadow(2, 2, '#333333', 2, true, true); // Add instructions const instructions = [ 'How to Play:', '1. Use arrow keys to move around the village', '2. Walk up to a person and click on them to talk', '3. Type your questions or responses in the chat box', '4. Press Enter or click Send to submit your message', '5. Click the X or move away to end the conversation', '', 'Each person is an expert in a different area of technology.', 'Talk to them all to learn about various topics!' ]; const instructionText = this.add.text(700, 400, instructions, { fontFamily: '"m6x11plus"', fontSize: '36px', color: '#ffff00', align: 'center', lineSpacing: 10 }).setOrigin(0.5); instructionText.setStroke('#000000', 4); instructionText.setShadow(1, 1, '#333333', 1, true, true); // Add start button const startButton = this.add.text(700, 800, 'Start Game', { fontFamily: '"m6x11plus"', fontSize: '48px', color: '#ffff00', align: 'center' }).setOrigin(0.5); startButton.setStroke('#000000', 6); startButton.setShadow(2, 2, '#333333', 2, true, true); startButton.setInteractive({ useHandCursor: true }); startButton.on('pointerover', () => startButton.setScale(1.1)); startButton.on('pointerout', () => startButton.setScale(1)); startButton.on('pointerdown', () => this.scene.start('game')); // Add keyboard listener to start game this.input.keyboard.on('keydown', () => this.scene.start('game')); } } class ChatScene extends Phaser.Scene { constructor() { super({ key: 'game' }); } preload() { this.load.image('background', 'https://play.rosebud.ai/assets/town.png?frZ6'); this.load.spritesheet('sergeant', 'https://play.rosebud.ai/assets/npc1Idle.png?QzhZ', { frameWidth: 32, frameHeight: 32 }); this.load.spritesheet('chip', 'https://play.rosebud.ai/assets/npc2Idle.png?p1OJ', { frameWidth: 32, frameHeight: 32 }); this.load.spritesheet('captain', 'https://play.rosebud.ai/assets/npc3Idle.png?ax3f', { frameWidth: 32, frameHeight: 32 }); this.load.spritesheet('private', 'https://play.rosebud.ai/assets/npc4Idle.png?4WOp', { frameWidth: 32, frameHeight: 32 }); this.load.spritesheet('player', `https://play.rosebud.ai/assets/playerRun.png?DJAO`, { frameWidth: 32, frameHeight: 32 }); this.load.spritesheet('playerIdle', `https://play.rosebud.ai/assets/playerIdle.png?dkF8`, { frameWidth: 32, frameHeight: 32 }); this.load.spritesheet('tina', 'https://play.rosebud.ai/assets/npc3Idle.png?ax3f', { frameWidth: 32, frameHeight: 32 }); this.load.spritesheet('ethan', 'https://play.rosebud.ai/assets/npc1Idle.png?QzhZ', { frameWidth: 32, frameHeight: 32 }); this.load.spritesheet('harold', 'https://play.rosebud.ai/assets/npc2Idle.png?p1OJ', { frameWidth: 32, frameHeight: 32 }); this.load.spritesheet('sam', `https://play.rosebud.ai/assets/npc4Idle.png?4WOp`, { frameWidth: 32, frameHeight: 32 }); this.load.image('scroll', `https://play.rosebud.ai/assets/dialogPanel.png?idwb`); this.load.audio('music', `https://play.rosebud.ai/assets/547542__bloodpixelhero__ancient-little-secret.mp3?Sazp`); this.load.audio('dragonTheme', `https://play.rosebud.ai/assets/dragon theme 2.m4a?x7aF`); // Load the custom font using CSS const newStyle = document.createElement('style'); newStyle.textContent = ` @font-face { font-family: "m6x11plus"; src: url('https://play.rosebud.ai/assets/m6x11plus.ttf?W694') format('truetype'); } `; document.head.appendChild(newStyle); // Ensure the font is loaded before creating text this.add.text(0, 0, '', { fontFamily: '"m6x11plus"' }); this.input.setDefaultCursor('url(https://play.rosebud.ai/assets/cursor.png?FjzX), pointer'); } create() { this.physics.world.setBounds(-140, 40, 1420, 780); this.add.image(550, 445, 'background').setScale(3); // Stick the scroll image at the bottom of the screen and rotate it 90 degrees this.scroll = this.add.image(700, 620, 'scroll').setScale(3); this.scroll.setScrollFactor(0); // Make the scroll image fixed this.scroll.depth = 1; this.anims.create({ key: 'playerWalking', // Use a descriptive key for the animation frames: this.anims.generateFrameNumbers('player', { start: 0, end: 20 // Adjust according to your sprite frames }), frameRate: 20, repeat: -1 }); // Player idle animation this.anims.create({ key: 'playerIdle', frames: this.anims.generateFrameNumbers('playerIdle', { start: 0, end: 20 }), frameRate: 20, repeat: -1 }); this.player = this.physics.add.sprite(360, 300, 'player').setScale(3); this.player.body.setSize(25, 22); // this.player.body.setOffset(8, 25); this.player.setCollideWorldBounds(true); // Start with the player in idle animation this.player.anims.play('playerIdle', true); this.input.on('gameobjectdown', (pointer, gameObject) => { if (gameObject instanceof NPC && gameObject.playerInRange(this.player)) { gameObject.openChat(); } }); this.colliders = this.physics.add.staticGroup(); this.addCollider(390, 210, 180, 140); this.addCollider(990, 500, 140, 135); this.addCollider(650, 340, 70, 90); this.addCollider(895, 310, 110, 30); this.addCollider(10, 530, 280, 175); this.addCollider(630, 650, 360, 160); this.physics.add.collider(this.player, this.colliders); this.chatDialogs = new Map(); // Stop the previous music if it's playing if (this.sound.get('music')) { this.sound.get('music').stop(); } // Play the new dragon theme music // Stop the menu music if it's playing this.sound.stopAll(); // Play the new dragon theme music const dragonTheme = this.sound.add('dragonTheme', { volume: 0.1, loop: true }); dragonTheme.play(); this.cursors = this.input.keyboard.createCursorKeys(); // Create NPCs and set cursor style for hover this.netiquetteNelly = new NPC(this, 1000, 300, 'tina', 'Natalie is nice. She helps you stay safe online. Talk to her about ways to protect yourself on the internet.', 'tina', 0, 4).setScale(-3, 3); this.netiquetteNelly.setInteractive(); this.netiquetteNelly.setCursorStyle(); this.phishermanFred = new NPC(this, 800, 300, 'ethan', 'Phil keeps you safe online. He knows about internet tricks. Ask him how to be careful on the internet.', 'ethan', 0, 7).setScale(3); this.phishermanFred.setInteractive(); this.phishermanFred.setCursorStyle(); this.commanderCode = new NPC(this, 200, 500, 'harold', 'EYE-O is an expert in computer input and output systems. He can teach you how computers receive, process, and send out information. Ask him about keyboards, screens, and how data moves in a computer!', 'harold', 0, 7).setScale(3); this.commanderCode.setInteractive(); this.commanderCode.setCursorStyle(); this.professorPasskey = new NPC(this, 500, 500, 'sam', 'Professor Passkey knows about passwords. He helps keep your games safe. Ask him how to make good passwords.', 'sam', 0, 3).setScale(-3, 3); this.professorPasskey.setInteractive(); this.professorPasskey.setCursorStyle(); this.add.text(920, 240, 'Internet Safety', { fontFamily: '"m6x11plus"' }).setScale(2.5); this.add.text(680, 240, 'Phishing', { fontFamily: '"m6x11plus"' }).setScale(2.75); this.add.text(120, 440, 'Input/Output', { fontFamily: '"m6x11plus"' }).setScale(2.75); this.add.text(400, 440, 'Password Security', { fontFamily: '"m6x11plus"' }).setScale(2.75); this.computerByte = new NPC(this, 200, 300, 'sergeant', 'Computer Byte is a tech-savvy specialist who ensures everything runs smoothly by keeping all systems updated. Byte is always ahead of the curve, making sure that all parts of the computer run smoothly. Ask Byte about computer components and system maintenance!', 'sergeant', 0, 7).setScale(3); this.computerByte.setInteractive(); this.computerByte.setCursorStyle(); this.coderChip = new NPC(this, 620, 150, 'chip', 'Chip likes making computer games. He can teach you easy coding. Talk to him about making fun stuff on computers.', 'chip', 0, 7).setScale(3); this.coderChip.setInteractive(); this.coderChip.setCursorStyle(); this.captainConduct = new NPC(this, 800, 500, 'captain', 'Captain Conduct is a superhero. She teaches how to be kind online. Ask her how to stop bullying and be a good friend.', 'captain', 0, 4).setScale(-3, 3); this.captainConduct.setInteractive(); this.captainConduct.setCursorStyle(); this.digitalCitizen = new NPC(this, 1100, 400, 'private', 'Nelly is nice. She helps you be good online. Talk to her about being kind on the internet.', 'private', 0, 3).setScale(-3, 3); this.digitalCitizen.setInteractive(); this.digitalCitizen.setCursorStyle(); this.add.text(20, 240, 'Parts of a Computer', { fontFamily: '"m6x11plus"' }).setScale(2.5); this.add.text(520, 95, 'Coding Basics', { fontFamily: '"m6x11plus"' }).setScale(2.75); this.add.text(720, 440, 'Cyberbullying', { fontFamily: '"m6x11plus"' }).setScale(2.75); this.add.text(1020, 330, 'Digital Citizen', { fontFamily: '"m6x11plus"' }).setScale(2.75); let ins = this.add.text(250, 160, '*Click on people to talk', { fontFamily: '"m6x11plus"' }).setScale(2.5); ins.setScrollFactor(0); } 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 cursors = this.input.keyboard.createCursorKeys(); const speed = 120; let isMoving = false; if (cursors.left.isDown) { this.player.setVelocityX(-speed); this.player.setFlipX(true); isMoving = true; } else if (cursors.right.isDown) { this.player.setVelocityX(speed); this.player.setFlipX(false); isMoving = true; } else { this.player.setVelocityX(0); } if (cursors.up.isDown) { this.player.setVelocityY(-speed); isMoving = true; } else if (cursors.down.isDown) { this.player.setVelocityY(speed); isMoving = true; } else { this.player.setVelocityY(0); } // Play the appropriate animation based on movement if (isMoving) { this.player.anims.play('playerWalking', true); } else { this.player.anims.play('playerIdle', true); } this.cameras.main.startFollow(this.player); this.cameras.main.setLerp(0.5, 0.5); this.cameras.main.setBounds(-200, 20, 1500, 850); // Set camera bounds to match the world size this.cameras.main.setZoom(1.5, 1.5); // Zoom out to make the larger world visible } addCollider(x, y, width, height) { const collider = this.colliders.create(x, y, null).setOrigin(0, 0).refreshBody().setVisible(false); collider.body.setSize(width, height); } openChat(npc) { console.log("LET'S OPEN CHAT"); if (this.isChatOpen) return; this.isChatOpen = true; console.log("NPC", npc); const uniqueIdSuffix = npc.characterDescription.replace(/\s+/g, '-').toLowerCase(); if (this.chatDialogs.has(npc)) { console.log("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(815, 640).createFromHTML(`

`); chatLog.setScrollFactor(0); const chatInputId = `chatInput-${uniqueIdSuffix}`; const chatInput = this.add.dom(650, 500).createFromHTML(` `); chatInput.setScrollFactor(0); const sendButtonId = `sendButton-${uniqueIdSuffix}`; const sendButton = this.add.dom(950, 500).createFromHTML(` `); sendButton.setScrollFactor(0); const closeButtonId = `closeButton-${uniqueIdSuffix}`; const closeButton = this.add.dom(1020, 550).createFromHTML(` `); closeButton.setScrollFactor(0); chatInput.node.addEventListener('keydown', (event) => { event.stopPropagation(); if (event.key === "Enter" || event.keyCode === 13) { this.sendChatMessage(npc, npc.chatManager, chatInputId, npc.chatLogId); document.getElementById(chatInputId).value = ""; } }); sendButton.addListener('click').on('click', () => { this.sendChatMessage(npc, npc.chatManager, chatInputId, npc.chatLogId); document.getElementById(chatInputId).value = ""; }); closeButton.addListener('click').on('click', () => { this.closeChat(); }); chatInput.node.focus(); this.chatDialogs.set(npc, { chatLog, chatInput, sendButton, closeButton }); console.log(chatLog); } } closeChat() { if (!this.isChatOpen) return; this.isChatOpen = false; //this.tina.closeChat(); for (let dialog of this.chatDialogs.values()) { dialog.chatLog.setVisible(false); dialog.chatInput.setVisible(false); dialog.sendButton.setVisible(false); dialog.closeButton.setVisible(false); } } // the color of the chat font updateChatLog(chatLogNode, role, message) { const color = role === 'Player' ? '#3d1e01' : '#8a0094'; // Use the custom font in the style attribute chatLogNode.innerHTML += `

${role}: ${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), 'You', inputValue); const response = await chatManager.getCharacterResponse(); chatManager.addMessage('assistant', response); this.updateChatLog(document.getElementById(npc.chatLogId), 'Character', response); chatInputNode.value = ''; } } } } const container = document.getElementById('renderDiv'); const config = { parent: 'renderDiv', type: Phaser.AUTO, scene: [Menu, ChatScene], scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: 1400, height: 890, }, dom: { createContainer: true }, render: { pixelArt: true }, physics: { default: 'arcade', arcade: { debug: false, } }, input: { keyboard: { capture: [37, 38, 39, 40] // Capture only arrow keys } } }; window.phaserGame = new Phaser.Game(config);