class InstructionScene extends Phaser.Scene { constructor() { super('InstructionScene'); } preload() { this.load.audio('buttonClick', 'https://play.rosebud.ai/assets/buttonClick.wav?8lp7'); this.load.audio('continueClick', 'https://play.rosebud.ai/assets/ui-click-43196.mp3?Bnvf'); this.load.image('background', 'https://play.rosebud.ai/assets/machinelearning.png?ulX5'); this.load.image('artiebot', 'https://play.rosebud.ai/assets/artiebot.png?srs8'); this.load.audio('helpArtieLearn', 'https://play.rosebud.ai/assets/Help Artie Bot learn.mp3?dgV9'); } create() { // Set background color this.cameras.main.setBackgroundColor('#4fd2cb'); // Add background image if needed const background = this.add.image(400, 300, 'background'); background.setDisplaySize(800, 600); // Add Artie Bot const artie = this.add.image(460, 450, 'artiebot'); artie.setScale(1.15); // Add title with animation const title = this.add.text(500, -50, 'Train Artie Bot', { fontSize: '48px', fontStyle: 'bold', fill: '#ffffff', stroke: '#000000', strokeThickness: 6 }).setOrigin(0.5); this.tweens.add({ targets: title, y: 200, ease: 'Bounce', duration: 1000 }); // Instructions button const instructionsButton = this.add.text(500, 300, 'Instructions', { fontSize: '32px', fontStyle: 'bold', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: { left: 20, right: 20, top: 10, bottom: 10 } }).setOrigin(0.5).setInteractive(); // Add tween to instructions button this.tweens.add({ targets: instructionsButton, scale: 1.1, duration: 1000, yoyo: true, repeat: -1 }); instructionsButton.on('pointerdown', () => { this.sound.play('buttonClick'); this.sound.play('helpArtieLearn'); this.showInstructions(); }); // Start button const startButton = this.add.text(500, 400, 'Start Training', { fontSize: '32px', fontStyle: 'bold', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: { left: 20, right: 20, top: 10, bottom: 10 } }).setOrigin(0.5).setInteractive(); this.tweens.add({ targets: startButton, scale: 1.1, duration: 1000, yoyo: true, repeat: -1 }); startButton.on('pointerdown', () => { this.sound.play('buttonClick'); this.cameras.main.fade(500, 0, 0, 0); this.time.delayedCall(500, () => this.scene.start('TrainingScene')); }); // Machine Learning Fact button const mlFactButton = this.add.text(500, 500, 'Quiz Me', { fontSize: '24px', fontStyle: 'bold', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: { left: 20, right: 20, top: 10, bottom: 10 } }).setOrigin(0.5).setInteractive(); // Add tween to Machine Learning Fact button this.tweens.add({ targets: mlFactButton, scale: 1.1, duration: 1000, yoyo: true, repeat: -1 }); mlFactButton.on('pointerdown', () => { this.sound.play('buttonClick'); this.scene.start('MachineLearningFacts'); }); // Animate Artie Bot this.tweens.add({ targets: artie, y: artie.y - 20, duration: 2000, yoyo: true, repeat: -1, ease: 'Sine.inOut' }); } showInstructions() { const instructionsBox = this.add.rectangle(400, 300, 700, 400, 0x000000, 0.8); instructionsBox.setOrigin(0.5); const instructions = [ 'Help Artie Bot learn to recognize', 'paintings and sculptures!', 'Images will scroll across the screen.', 'When an image reaches the center, click:', '"Painting" if it\'s a painting', '"Sculpture" if it\'s a sculpture', 'There are 30 images in total.' ]; const instructionTexts = instructions.map((line, index) => { return this.add.text(400, 150 + index * 40, line, { fontSize: '24px', fill: '#ffffff', stroke: '#000000', strokeThickness: 4 }).setOrigin(0.5); }); const closeButton = this.add.text(400, 480, 'Close', { fontSize: '24px', fontStyle: 'bold', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: { left: 20, right: 20, top: 10, bottom: 10 } }).setOrigin(0.5).setInteractive(); closeButton.on('pointerdown', () => { this.sound.play('buttonClick'); this.sound.stopByKey('helpArtieLearn'); instructionsBox.destroy(); instructionTexts.forEach(text => text.destroy()); closeButton.destroy(); }); } shutdown() { this.sound.stopByKey('helpArtieLearn'); } } class MachineLearningFacts extends Phaser.Scene { constructor() { super('MachineLearningFacts'); this.currentQuestionAudio = null; } preload() { this.load.image('happy', 'https://play.rosebud.ai/assets/artiecorrect.png?7peX'); this.load.audio('correct', 'https://play.rosebud.ai/assets/buttonClick.wav?8lp7'); this.load.audio('incorrect', 'https://play.rosebud.ai/assets/wrong-47985.mp3?5yWb'); this.load.image('quizBackground', 'https://play.rosebud.ai/assets/MLquizbg.png?xsoE'); this.load.audio('artieBotQuestion', 'https://play.rosebud.ai/assets/What does Artie Bot .mp3?jEnP'); this.load.audio('artieLearnQuestion', 'https://play.rosebud.ai/assets/How does Artie Bot l.mp3?yee7'); this.load.audio('artieDoQuestion', 'https://play.rosebud.ai/assets/What can Artie Bot d.mp3?PHE3'); this.load.audio('artieMistakesQuestion', 'https://play.rosebud.ai/assets/What happens when yo.mp3?tCXJ'); this.load.audio('machineCluesQuestion', 'https://play.rosebud.ai/assets/What do machines use.mp3?Afmk'); this.load.audio('machineSmarterQuestion', 'https://play.rosebud.ai/assets/How does the machine.mp3?vGMA'); this.load.audio('machineNeedQuestion', 'https://play.rosebud.ai/assets/What do machines need to get good.mp3?OByz'); this.load.audio('machineUnderstandArtQuestion', 'https://play.rosebud.ai/assets/Can machines underst.mp3?rYV6'); this.load.audio('machinePlayQuestion', 'https://play.rosebud.ai/assets/What happens each ti.mp3?69YJ'); this.load.audio('machineHelpQuestion', 'https://play.rosebud.ai/assets/What are you like wh.mp3?n5I4'); } create() { // Add the background image const background = this.add.image(400, 300, 'quizBackground'); background.setOrigin(0.5); background.setDisplaySize(this.cameras.main.width, this.cameras.main.height); this.score = 0; this.currentQuestion = 0; this.questions = [{ question: "What does Artie Bot learn about?", answers: ["Pictures", "Math", "Reading"], correct: 0 }, { question: "How does Artie Bot learn?", answers: ["By playing games", "From your help", "By sleeping"], correct: 1 }, { question: "What can Artie Bot do after learning?", answers: ["Cook food", "Recognize pictures", "Fly"], correct: 1 }, { question: "What happens when you make mistakes?", answers: ["The machine breaks", "The machine improves", "Nothing happens"], correct: 1 }, { question: "What do machines use as clues?", answers: ["Shapes and colors", "Smells", "Sounds"], correct: 0 }, { question: "How does the machine get smarter?", answers: ["By sleeping", "By eating", "The more you help"], correct: 2 }, { question: "What do machines need to get good?", answers: ["Lots of practice", "Big muscles", "Super speed"], correct: 0 }, { question: "Can machines understand art?", answers: ["Yes, completely", "No, but they can recognize it", "Only famous art"], correct: 1 }, { question: "What happens each time you play?", answers: ["The machine gets tired", "The machine gets smarter", "The machine gets smaller"], correct: 1 }, { question: "What are you like when you help the machine learn?", answers: ["A chef", "A teacher", "A doctor"], correct: 1 }]; // Title text removed this.questionText = this.add.text(400, 190, '', { fontSize: '24px', fill: '#ffffff', stroke: '#000000', strokeThickness: 3, align: 'center', wordWrap: { width: 600 } }).setOrigin(0.5); this.answerButtons = []; for (let i = 0; i < 3; i++) { let button = this.add.text(400, 280 + i * 70, '', { fontSize: '20px', fontStyle: 'bold', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: { left: 20, right: 20, top: 10, bottom: 10 } }).setOrigin(0.5).setInteractive(); button.on('pointerdown', () => this.checkAnswer(i)); this.answerButtons.push(button); } this.resultText = this.add.text(400, 500, '', { fontSize: '24px', fontStyle: 'bold', fill: '#ffffff', align: 'center' }).setOrigin(0.5); this.happy = this.add.image(750, 315, 'happy').setScale(0.5); this.happy.setVisible(false); this.showQuestion(); } showQuestion() { if (this.currentQuestion < this.questions.length) { let question = this.questions[this.currentQuestion]; this.questionText.setText(question.question); for (let i = 0; i < 3; i++) { this.answerButtons[i].setText(question.answers[i]); } this.resultText.setText(''); this.resultText.y = 520; // Move the result text down 20 pixels this.happy.setVisible(false); // Stop any previously playing audio if (this.currentQuestionAudio && this.currentQuestionAudio.isPlaying) { this.currentQuestionAudio.stop(); } // Play the audio if it's one of the specific questions if (question.question === "What does Artie Bot learn about?") { this.currentQuestionAudio = this.sound.add('artieBotQuestion'); this.currentQuestionAudio.play(); } else if (question.question === "How does Artie Bot learn?") { this.currentQuestionAudio = this.sound.add('artieLearnQuestion'); this.currentQuestionAudio.play(); } else if (question.question === "What can Artie Bot do after learning?") { this.currentQuestionAudio = this.sound.add('artieDoQuestion'); this.currentQuestionAudio.play(); } else if (question.question === "What happens when you make mistakes?") { this.currentQuestionAudio = this.sound.add('artieMistakesQuestion'); this.currentQuestionAudio.play(); } else if (question.question === "What do machines use as clues?") { this.currentQuestionAudio = this.sound.add('machineCluesQuestion'); this.currentQuestionAudio.play(); } else if (question.question === "How does the machine get smarter?") { this.currentQuestionAudio = this.sound.add('machineSmarterQuestion'); this.currentQuestionAudio.play(); } else if (question.question === "What do machines need to get good?") { this.currentQuestionAudio = this.sound.add('machineNeedQuestion'); this.currentQuestionAudio.play(); } else if (question.question === "Can machines understand art?") { this.currentQuestionAudio = this.sound.add('machineUnderstandArtQuestion'); this.currentQuestionAudio.play(); } else if (question.question === "What happens each time you play?") { this.currentQuestionAudio = this.sound.add('machinePlayQuestion'); this.currentQuestionAudio.play(); } else if (question.question === "What are you like when you help the machine learn?") { this.currentQuestionAudio = this.sound.add('machineHelpQuestion'); this.currentQuestionAudio.play(); } } else { this.showFinalScore(); } } animateHappyImage() { this.happy.setVisible(true); this.happy.setScale(0.1); this.tweens.add({ targets: this.happy, scale: 0.5, y: { from: 315 - 50, to: 315 }, duration: 800, ease: 'Bounce.easeOut' }); } checkAnswer(index) { if (this.currentQuestion < this.questions.length) { let question = this.questions[this.currentQuestion]; if (question && typeof question.correct !== 'undefined') { // Stop the audio if it's playing if (this.currentQuestionAudio && this.currentQuestionAudio.isPlaying) { this.currentQuestionAudio.stop(); } if (index === question.correct) { this.score++; this.resultText.setText('Correct! Great job!'); this.resultText.setColor('#000000'); this.resultText.y += 2; this.sound.play('correct'); this.animateHappyImage(); } else { this.resultText.setText('Oops! The correct answer was: ' + question.answers[question.correct]); this.resultText.setColor('#000000'); this.resultText.y += 2; this.sound.play('incorrect'); } this.currentQuestion++; this.time.delayedCall(2000, () => { this.resultText.y -= 2; // Reset the position before showing next question this.showQuestion(); }, [], this); } else { console.error('Invalid question format:', question); this.showQuestion(); // Move to next question if current one is invalid } } else { this.showFinalScore(); } } showFinalScore() { this.questionText.setText('Quiz Complete!'); for (let button of this.answerButtons) { button.setVisible(false); } // Display the final score const scoreText = `You got ${this.score} out of ${this.questions.length} correct!`; this.add.text(400, 250, scoreText, { fontSize: '25px', fontStyle: 'bold', fill: '#ffffff', stroke: '#ff0000', strokeThickness: 6, align: 'center' }).setOrigin(0.5); // Generate motivational message based on score const messages = [ "Don't worry, learning takes practice! Give it another try and see how much you can improve!", "You're on the right track! Keep practicing, and you'll get better each time.", "Good start! Keep going, and you'll see how much you can learn.", "Nice effort! You're learning, and with a bit more practice, you'll see great results.", "You're getting there! Keep it up, and you'll be a machine learning master in no time.", "Halfway there! You've got this—try again and see how much you can improve!", "Great work! You're getting the hang of it. Keep going, and you'll ace it next time!", "Awesome job! You're really starting to understand machine learning. Keep pushing forward!", "Fantastic! You're so close to perfect—give it another shot and see if you can get all 10!", "Almost perfect! Just one more to go—try again for that perfect score!", "You aced it! Incredible job learning about machine learning—you're a star!" ]; const motivationalMessage = messages[this.score]; const messageText = this.add.text(400, 330, motivationalMessage, { fontSize: '24px', fill: '#ffffff', stroke: '#000000', strokeThickness: 4, align: 'center', wordWrap: { width: 500 } }).setOrigin(0.5); // Clear the previous result text this.resultText.setText(''); // Remove the Artie Bot image if (this.happy) { this.happy.destroy(); } // Add the "Back to Instructions" button at the bottom of the screen const backButton = this.add.text(400, 550, 'Back to Instructions', { fontSize: '24px', fontStyle: 'bold', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: { left: 20, right: 20, top: 10, bottom: 10 } }).setOrigin(0.5).setInteractive(); backButton.on('pointerdown', () => { this.sound.play('buttonClick'); this.scene.start('InstructionScene'); }); } } class TrainingScene extends Phaser.Scene { constructor() { super('TrainingScene'); this.images = []; this.currentImageIndex = 0; this.userResponses = {}; this.currentImageObject = null; } preload() { // Load the background image this.load.image('trainingbg', 'https://play.rosebud.ai/assets/machinelearning.png?ulX5'); // Load all specified images this.load.image('blue_painting_1', 'https://play.rosebud.ai/assets/blue painting 1.png?DMjS'); this.load.image('yellow_sculpture_5', 'https://play.rosebud.ai/assets/yellow sculpture 5.png?Av48'); this.load.image('yellow_sculpture_4', 'https://play.rosebud.ai/assets/yellow sculpture 4.png?ginI'); this.load.image('yellow_sculpture_3', 'https://play.rosebud.ai/assets/yellow sculpture 3.png?sbSS'); this.load.image('yellow_sculpture_2', 'https://play.rosebud.ai/assets/yellow sculpture 2.png?CzfE'); this.load.image('yellow_sculpture_1', 'https://play.rosebud.ai/assets/yellow sculpture 1.png?oZAj'); this.load.image('red_sculpture_5', 'https://play.rosebud.ai/assets/red sculpture 5.png?dxxn'); this.load.image('red_sculpture_4', 'https://play.rosebud.ai/assets/red sculpture 4.jpg?gvBm'); this.load.image('red_sculpture_2', 'https://play.rosebud.ai/assets/red scultpure 2.jpeg?PN4g'); this.load.image('red_sculpture_3', 'https://play.rosebud.ai/assets/red sculpture 3.jpg?rxqi'); this.load.image('red_sculpture_1', 'https://play.rosebud.ai/assets/red sculpture 1.jpg?mf3Q'); this.load.image('blue_sculpture_5', 'https://play.rosebud.ai/assets/blue sculpture 5.jpg?gCoI'); this.load.image('blue_sculpture_3', 'https://play.rosebud.ai/assets/blue sculpture 3.jpeg?sOac'); this.load.image('blue_sculpture_4', 'https://play.rosebud.ai/assets/blue sculpture 4.jpg?JnHb'); this.load.image('blue_sculpture_2', 'https://play.rosebud.ai/assets/blue sculpture 2.jpg?VKPV'); this.load.image('blue_sculpture_1', 'https://play.rosebud.ai/assets/blue sculpture 1.jpeg?d52k'); this.load.image('yellow_painting_2', 'https://play.rosebud.ai/assets/yellow painting 2.jpeg?hPAI'); this.load.image('yellow_painting_1', 'https://play.rosebud.ai/assets/yellow painting 1.jpg?tBhJ'); this.load.image('blue_painting_2', 'https://play.rosebud.ai/assets/blue painting 2.jpg?mLVv'); this.load.image('yellow_painting_4', 'https://play.rosebud.ai/assets/yellow painting 4.png?UK78'); this.load.image('blue_painting_3', 'https://play.rosebud.ai/assets/blue painting 3.jpeg?efxb'); this.load.image('yellow_painting_3', 'https://play.rosebud.ai/assets/yellow painting 3.png?liJ4'); this.load.image('red_painting_4', 'https://play.rosebud.ai/assets/red painting 4.png?P0gY'); this.load.image('red_painting_3', 'https://play.rosebud.ai/assets/red painting 3.png?FLAI'); this.load.image('red_painting_2', 'https://play.rosebud.ai/assets/red painting 2.png?tc8e'); this.load.image('red_painting_5', 'https://play.rosebud.ai/assets/red painting 5.png?500U'); this.load.image('red_painting_1', 'https://play.rosebud.ai/assets/red painting 1.png?CCZ7'); this.load.image('blue_painting_4', 'https://play.rosebud.ai/assets/blue painting 4.png?J7ZK'); this.load.image('blue_painting_5', 'https://play.rosebud.ai/assets/blue painting 5.png?5nA7'); this.load.image('yellow_painting_5', 'https://play.rosebud.ai/assets/yellow painting 5.jpeg?bWhv'); this.load.audio('buttonClick', 'https://play.rosebud.ai/assets/buttonClick.wav?8lp7'); this.load.audio('continueClick', 'https://play.rosebud.ai/assets/ui-click-43196.mp3?Bnvf'); this.load.audio('backgroundMusic', 'https://play.rosebud.ai/assets/vivaldi-spring-allegro-185007 (1).mp3?IuGT'); this.load.image('artiebot', 'https://play.rosebud.ai/assets/artiebot.png?srs8'); } create() { // Add the background image const background = this.add.image(400, 300, 'trainingbg'); background.setOrigin(0.5); background.setDisplaySize(this.cameras.main.width, this.cameras.main.height); // Create image array with all images this.backgroundMusic = this.sound.add('backgroundMusic', { loop: true, volume: 0.5 }); this.backgroundMusic.play(); this.images = [ 'blue_painting_1', 'yellow_sculpture_5', 'yellow_sculpture_4', 'yellow_sculpture_3', 'yellow_sculpture_2', 'yellow_sculpture_1', 'red_sculpture_5', 'red_sculpture_4', 'red_sculpture_2', 'red_sculpture_3', 'red_sculpture_1', 'blue_sculpture_5', 'blue_sculpture_3', 'blue_sculpture_4', 'blue_sculpture_2', 'blue_sculpture_1', 'yellow_painting_2', 'yellow_painting_1', 'blue_painting_2', 'yellow_painting_4', 'blue_painting_3', 'yellow_painting_3', 'red_painting_4', 'red_painting_3', 'red_painting_2', 'red_painting_5', 'red_painting_1', 'blue_painting_4', 'blue_painting_5', 'yellow_painting_5' ]; this.images = Phaser.Utils.Array.Shuffle(this.images); // Create category buttons const paintingButton = this.add.rectangle(500, 525, 150, 50, 0xffbb38).setInteractive(); const sculptureButton = this.add.rectangle(675, 525, 150, 50, 0xffbb38).setInteractive(); this.add.text(500, 525, 'Painting', { fontSize: '18px', fill: '#000000' }).setOrigin(0.5); this.add.text(675, 525, 'Sculpture', { fontSize: '18px', fill: '#000000' }).setOrigin(0.5); paintingButton.on('pointerdown', () => { this.sound.play('buttonClick'); this.categorizeImage('painting'); }); sculptureButton.on('pointerdown', () => { this.sound.play('buttonClick'); this.categorizeImage('sculpture'); }); // Add Artie Bot image with idle animation const artieBot = this.add.image(100, 300, 'artiebot'); // Scale Artie Bot to stretch the whole y axis const scaleFactorArtie = this.cameras.main.height / artieBot.height; artieBot.setScale(scaleFactorArtie); // Center Artie vertically and position on the left side artieBot.setPosition(artieBot.width * scaleFactorArtie / 2, this.cameras.main.height / 2 + 35); artieBot.setName('artieBot'); artieBot.setDepth(2); // Add idle animation this.tweens.add({ targets: artieBot, y: artieBot.y - 10, // Move up by 10 pixels duration: 1000, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); // Add subtle rotation this.tweens.add({ targets: artieBot, angle: 5, // Rotate by 5 degrees duration: 1500, yoyo: true, repeat: -1, ease: 'Quad.easeInOut' }); // Display progress below the painting button this.progressText = this.add.text( 500, 575, 'Progress: 0/30', { fontSize: '18px', fill: '#000000' } ).setOrigin(0.5); this.progressText.setDepth(2); // Set depth to 2 // Start image scrolling this.nextImage(); // Load particle texture this.load.image('particle', 'https://play.rosebud.ai/assets/gallerybg (2).png?PcTu'); } update() { // Move current image if (this.currentImageObject) { this.currentImageObject.x -= 7; // Reduced speed from 10 to 7 // If image exits screen, show next image if (this.currentImageObject.x < -100) { this.currentImageObject.destroy(); this.nextImage(); } } } categorizeImage(category) { if (this.currentImageObject) { const currentImage = this.images[this.currentImageIndex]; this.userResponses[currentImage] = category; console.log(`Image ${currentImage} categorized as ${category}`); console.log('Current user responses:', this.userResponses); const targetX = this.currentImageObject.x; const targetY = -50; // Move to just above the top of the screen this.tweens.add({ targets: this.currentImageObject, x: targetX, y: targetY, scale: 0.1, duration: 500, onComplete: () => { this.createLargeParticles(targetX, 0); // Create particles at the top of the screen if (this.currentImageObject) { this.currentImageObject.destroy(); this.currentImageObject = null; } this.currentImageIndex++; this.progressText.setText(`Progress: ${this.currentImageIndex}/30`); this.nextImage(); } }); } } createParticles(x, y) { const particles = this.add.particles('particle'); particles.setDepth(1); // Set depth to be above Artie Bot const emitter = particles.createEmitter({ x: x, y: y, speed: { min: -400, max: 400 }, angle: { min: 0, max: 360 }, scale: { start: 0.5, end: 0 }, blendMode: 'SCREEN', lifespan: 500, gravityY: 300, tint: this.userResponses[this.images[this.currentImageIndex - 1]] === 'painting' ? 0xff0000 : 0x0000ff }); emitter.explode(30); } createLargeParticles(x, y) { const particles = this.add.particles('particle'); particles.setDepth(1); const emitter = particles.createEmitter({ x: x, y: y, speed: { min: -800, max: 800 }, angle: { min: 0, max: 360 }, scale: { start: 1, end: 0 }, blendMode: 'SCREEN', lifespan: 1000, gravityY: 300, quantity: 50 }); emitter.explode(100); // Remove the particle system after the animation is complete this.time.delayedCall(1000, () => { particles.destroy(); }); } nextImage() { if (this.currentImageIndex < this.images.length) { const nextImageKey = this.images[this.currentImageIndex]; this.currentImageObject = this.add.image(900, 275, nextImageKey); // Calculate the available space const availableHeight = 500 - 50 - 20 - 60; // Button Y - Progress Y - Padding - Extra space for buttons const availableWidth = 800 - 20; // Game width - Padding // Get the original image dimensions const originalWidth = this.currentImageObject.width; const originalHeight = this.currentImageObject.height; // Calculate scale factors const scaleX = (availableWidth / originalWidth) * 0.8; // Reduce width by 20% const scaleY = (availableHeight / originalHeight) * 0.8; // Reduce height by 20% // Use the smaller scale factor to fit the image const scaleFactor = Math.min(scaleX, scaleY); // Set the scale and position this.currentImageObject.setScale(scaleFactor); this.currentImageObject.setY(275); } else { this.showTrainingComplete(); } } showTrainingComplete() { // Stop the background music this.backgroundMusic.stop(); this.add.text(450, 250, 'Training Complete!', { fontSize: '32px', fill: '#000000' }).setOrigin(0.5); console.log('Final user responses:', this.userResponses); const continueButton = this.add.text(420, 350, 'Continue', { fontSize: '24px', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: { x: 20, y: 10 } }) .setOrigin(0.5) .setInteractive(); continueButton.on('pointerdown', () => { this.sound.play('continueClick'); this.scene.start('ResultsScene', { userResponses: this.userResponses }); }); } shutdown() { if (this.backgroundMusic) { this.backgroundMusic.stop(); } } } class ResultsScene extends Phaser.Scene { constructor() { super('ResultsScene'); } preload() { this.load.image('resultsBg', 'https://play.rosebud.ai/assets/gallerybg (2).png?PcTu'); this.load.audio('artieInstructions', 'https://play.rosebud.ai/assets/now lets see if arti.mp3?8iIW'); } init(data) { this.userResponses = data.userResponses; console.log('Total responses in ResultsScene:', Object.keys(this.userResponses).length); } create() { // Add background const bg = this.add.image(400, 300, 'resultsBg').setOrigin(0.5); bg.setDisplaySize(800, 600); // Add gradient overlay const gradient = this.add.graphics(); gradient.fillGradientStyle(0x4fd2cb, 0x4fd2cb, 0x3a9d98, 0x3a9d98, 1); gradient.fillRect(0, 0, 800, 600); gradient.setAlpha(0.7); // Stylized title with animation const title = this.add.text(400, -50, 'AI Recognition Phase', { fontSize: '48px', fontStyle: 'bold', fill: '#ffffff', stroke: '#000000', strokeThickness: 6 }).setOrigin(0.5); this.tweens.add({ targets: title, y: 50, duration: 1000, ease: 'Bounce' }); const instructions = [ "Now let's see if Artie knows the difference", "between a painting and a sculpture.", "Artie will analyze a random set of images", "and label them based on your training.", "Let's go!" ]; // Play audio instructions this.artieInstructionsSound = this.sound.add('artieInstructions'); this.artieInstructionsSound.play(); // Animate text appearance instructions.forEach((line, index) => { const text = this.add.text(400, 150 + index * 40, line, { fontSize: '22px', fill: '#ffffff', stroke: '#000000', strokeThickness: 3 }).setOrigin(0.5); text.setAlpha(0); this.tweens.add({ targets: text, alpha: 1, duration: 500, delay: 500 + index * 200 }); }); // Styled continue button const continueButton = this.add.container(400, 500); const buttonBg = this.add.graphics(); buttonBg.fillStyle(0x4a4a4a, 1); buttonBg.fillRoundedRect(-100, -25, 200, 50, 25); const buttonText = this.add.text(0, 0, 'Continue', { fontSize: '24px', fill: '#ffffff' }).setOrigin(0.5); continueButton.add([buttonBg, buttonText]); continueButton.setSize(200, 50); continueButton.setInteractive(); // Button hover effect continueButton.on('pointerover', () => { buttonBg.clear(); buttonBg.fillStyle(0x5a5a5a, 1); buttonBg.fillRoundedRect(-100, -25, 200, 50, 25); }); continueButton.on('pointerout', () => { buttonBg.clear(); buttonBg.fillStyle(0x4a4a4a, 1); buttonBg.fillRoundedRect(-100, -25, 200, 50, 25); }); continueButton.on('pointerdown', () => { this.sound.play('continueClick'); if (this.artieInstructionsSound.isPlaying) { this.artieInstructionsSound.stop(); } this.scene.start('AIRecognitionScene', { userResponses: this.userResponses }); }); } } class AIRecognitionScene extends Phaser.Scene { constructor() { super('AIRecognitionScene'); } preload() { this.load.image('gallery_bg', 'https://play.rosebud.ai/assets/gallerybg (2).png?PcTu'); } init(data) { this.userResponses = data.userResponses; this.images = Object.keys(this.userResponses); this.currentImageIndex = 0; this.artieResponses = {}; console.log('Total images in AIRecognitionScene:', this.images.length); } create() { // Add the background image const background = this.add.image(400, 300, 'gallery_bg'); background.setOrigin(0.5); background.setDisplaySize(this.cameras.main.width, this.cameras.main.height); this.add.text(427, 90, 'AI Recognition', { fontSize: '32px', fill: '#000000' }).setOrigin(0.5); this.progressText = this.add.text(427, 130, `Progress: 0/${this.images.length}`, { fontSize: '18px', fill: '#000000' }).setOrigin(0.5); this.imageContainer = this.add.container(437, 300); // Moved 2 pixels to the right this.nextButton = this.add.text(400, 555, 'Next', { fontSize: '24px', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: { x: 20, y: 10 } }) .setOrigin(0.5) .setInteractive(); this.nextButton.on('pointerdown', () => { this.sound.play('buttonClick'); this.showNextImage(); }); this.artieGuessText = this.add.text(427, 520, '', { // Moved 2 pixels to the right fontSize: '18px', fill: '#000000' }).setOrigin(0.5); this.showNextImage(); } showNextImage() { if (this.currentImageIndex < this.images.length) { this.imageContainer.removeAll(true); this.artieGuessText.setText(''); //Clear the previous guess text const imageName = this.images[this.currentImageIndex]; const imageObject = this.add.image(0, 0, imageName); // Scale image to fit const scale = Math.min(300 / imageObject.width, 300 / imageObject.height); imageObject.setScale(scale); this.imageContainer.add(imageObject); // Use user's input for Artie's guess const artieGuess = this.userResponses[imageName]; this.artieResponses[imageName] = artieGuess; const resultText = `Artie thinks this is a ${artieGuess}`; this.artieGuessText.setText(resultText); this.currentImageIndex++; this.progressText.setText(`Progress: ${this.currentImageIndex}/${this.images.length}`); if (this.currentImageIndex === this.images.length) { this.nextButton.setText('Finish'); } } else { // End of recognition phase this.showEndButtons(); } } showEndButtons() { this.imageContainer.removeAll(true); this.artieGuessText.setText(''); this.nextButton.setVisible(false); this.progressText.setVisible(false); this.add.text(425, 550, 'AI Recognition Complete!', { fontSize: '32px', fill: '#000000' }).setOrigin(0.5); const trainMoreButton = this.add.rectangle(450, 250, 200, 50, 0xffbb38).setInteractive(); const continueButton = this.add.rectangle(450, 320, 200, 50, 0xffbb38).setInteractive(); this.add.text(450, 250, 'Train More', { fontSize: '24px', fill: '#ffffff' }).setOrigin(0.5); this.add.text(450, 320, 'Continue', { fontSize: '24px', fill: '#ffffff' }).setOrigin(0.5); trainMoreButton.on('pointerdown', () => { this.sound.play('buttonClick'); window.location.reload(); }); continueButton.on('pointerdown', () => { this.sound.play('continueClick'); this.scene.start('ArtieBotReviewScene', { userResponses: this.userResponses, artieResponses: this.artieResponses }); }); } } class ArtieBotReviewScene extends Phaser.Scene { constructor() { super('ArtieBotReviewScene'); this.greatJobAudio = null; // Add this line to store the audio object } preload() { this.load.image('resultsBg', 'https://play.rosebud.ai/assets/gallerybg (2).png?PcTu'); this.load.audio('greatJobAudio', 'https://play.rosebud.ai/assets/greatjobtrain.mp3?O5KQ'); } init(data) { this.userResponses = data.userResponses; this.artieResponses = data.artieResponses; } create() { // Add background const bg = this.add.image(400, 300, 'resultsBg').setOrigin(0.5); bg.setDisplaySize(800, 600); // Add gradient overlay const gradient = this.add.graphics(); gradient.fillGradientStyle(0x4fd2cb, 0x4fd2cb, 0x3a9d98, 0x3a9d98, 1); gradient.fillRect(0, 0, 800, 600); gradient.setAlpha(0.7); // Stylized title with animation const title = this.add.text(400, -50, 'Artie Bot Review', { fontSize: '48px', fontStyle: 'bold', fill: '#ffffff', stroke: '#000000', strokeThickness: 6 }).setOrigin(0.5); this.tweens.add({ targets: title, y: 50, duration: 1000, ease: 'Bounce' }); // Review text const reviewText = [ "Great job training Artie Bot!", "Did Artie categorize the images correctly?", "Sometimes mistakes can happen in the training phase.", "Did you see any mistakes?", "Lets look at a gallery of images", "Artie identified as paintings.", ]; // Play audio and store the audio object this.greatJobAudio = this.sound.add('greatJobAudio'); this.greatJobAudio.play(); // Animate text appearance reviewText.forEach((line, index) => { const text = this.add.text(400, 150 + index * 40, line, { fontSize: '24px', fill: '#ffffff', stroke: '#000000', strokeThickness: 3 }).setOrigin(0.5); text.setAlpha(0); this.tweens.add({ targets: text, alpha: 1, duration: 500, delay: 500 + index * 200 }); }); // Styled continue button const continueButton = this.add.container(400, 500); const buttonBg = this.add.graphics(); buttonBg.fillStyle(0x4a4a4a, 1); buttonBg.fillRoundedRect(-100, -25, 200, 50, 25); const buttonText = this.add.text(0, 0, 'Continue', { fontSize: '24px', fill: '#ffffff' }).setOrigin(0.5); continueButton.add([buttonBg, buttonText]); continueButton.setSize(200, 50); continueButton.setInteractive(); // Button hover effect continueButton.on('pointerover', () => { buttonBg.clear(); buttonBg.fillStyle(0x5a5a5a, 1); buttonBg.fillRoundedRect(-100, -25, 200, 50, 25); }); continueButton.on('pointerout', () => { buttonBg.clear(); buttonBg.fillStyle(0x4a4a4a, 1); buttonBg.fillRoundedRect(-100, -25, 200, 50, 25); }); continueButton.on('pointerdown', () => { this.sound.play('continueClick'); if (this.greatJobAudio) { this.greatJobAudio.stop(); } this.scene.start('PaintingGridScene', { artieResponses: this.artieResponses }); }); } shutdown() { if (this.greatJobAudio) { this.greatJobAudio.stop(); } } } class PaintingGridScene extends Phaser.Scene { constructor() { super('PaintingGridScene'); } init(data) { this.artieResponses = data.artieResponses; } preload() { // Load the background image this.load.image('paintinggrid', 'https://play.rosebud.ai/assets/pgridsceneimage.png?tvlA'); // Filter and load only the paintings identified by Artie const paintingKeys = Object.keys(this.artieResponses).filter(key => this.artieResponses[key] === 'painting'); paintingKeys.forEach(key => { if (!this.textures.exists(key)) { this.load.image(key, `https://play.rosebud.ai/assets/${key.replace(/_/g, ' ')}.png`); } }); // Load question audio this.load.audio('questionAudio', 'https://play.rosebud.ai/assets/Are all of these ima.mp3?e3AT'); } create() { // Add the background image and scale it to fit the canvas const background = this.add.image(400, 300, 'paintinggrid'); const scaleX = this.cameras.main.width / background.width; const scaleY = this.cameras.main.height / background.height; const scale = Math.max(scaleX, scaleY); background.setScale(scale).setScrollFactor(0); // Add gray box behind the title const grayBox = this.add.rectangle(400, 40, 800, 80, 0x4a4a4a); grayBox.setOrigin(0.5); const titleText = this.add.text(400, 40, 'Paintings Identified by Artie', { fontSize: '32px', fill: '#FFFFFF' }).setOrigin(0.5); const paintings = Object.keys(this.artieResponses).filter(key => this.artieResponses[key] === 'painting'); const gridWidth = 4; const gridHeight = Math.ceil(paintings.length / gridWidth); const continueButton = this.add.text(370, 550, 'Continue', { fontSize: '24px', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: { x: 20, y: 10 } }).setOrigin(0.5).setInteractive(); // Calculate available vertical space const availableHeight = continueButton.y - grayBox.y - grayBox.height - 20; // Space between gray box and continue button const cellWidth = 160; // Slightly reduced cell width const cellHeight = Math.min(110, (availableHeight - 20) / gridHeight); // Reduced cell height and account for text const startX = (800 - (gridWidth * cellWidth)) / 2 + cellWidth / 2; const startY = grayBox.y + grayBox.height + 20; // Start grid right after the gray box paintings.forEach((painting, index) => { const col = index % gridWidth; const row = Math.floor(index / gridWidth); const x = startX + col * cellWidth; const y = startY + row * cellHeight; // Removed extra space for text const imageObject = this.add.image(x, y, painting); const scale = Math.min((cellWidth - 10) / imageObject.width, (cellHeight - 10) / imageObject.height) * 0.9; imageObject.setScale(scale); // Removed text below each image }); continueButton.on('pointerdown', () => { this.sound.play('continueClick'); this.scene.start('ColorInstructionsScene'); }); // Add small button to the right of the continue button const questionButton = this.add.text(460, 550, '?', { fontSize: '20px', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: { x: 10, y: 5 } }).setOrigin(0.5).setInteractive(); questionButton.on('pointerdown', () => { this.sound.play('questionAudio'); this.showQuestions(); }); } showQuestions() { const questions = [ 'Are all of these images paintings?', 'If not, why do you think Artie thought a sculpture was a painting?', 'What do you think happens when Artie makes a mistake during training?', 'How do mistakes in training cause Artie to make mistakes later on?' ]; const overlay = this.add.rectangle(400, 300, 800, 600, 0x000000, 0.7); const panel = this.add.rectangle(400, 300, 600, 400, 0xffffff); const title = this.add.text(400, 140, 'Questions to Consider', { fontSize: '24px', fill: '#000000' }).setOrigin(0.5); const questionTexts = questions.map((question, index) => { return this.add.text(120, 200 + index * 60, question, { fontSize: '18px', fill: '#000000', wordWrap: { width: 560 } }); }); const closeButton = this.add.text(650, 140, 'X', { fontSize: '24px', fill: '#000000' }) .setInteractive() .on('pointerdown', () => { this.sound.stopByKey('questionAudio'); overlay.destroy(); panel.destroy(); title.destroy(); questionTexts.forEach(text => text.destroy()); closeButton.destroy(); }); } } class ColorInstructionsScene extends Phaser.Scene { constructor() { super('ColorInstructionsScene'); } preload() { this.load.audio('buttonClick', 'https://play.rosebud.ai/assets/buttonClick.wav?8lp7'); this.load.audio('greatJobAudio', 'https://play.rosebud.ai/assets/Great job training A.mp3?FD15'); this.load.image('resultsBg', 'https://play.rosebud.ai/assets/gallerybg (2).png?PcTu'); this.load.audio('trainArtieColors', 'https://play.rosebud.ai/assets/Now lets train Artie.mp3?Ug20'); } create() { // Add background const bg = this.add.image(400, 300, 'resultsBg').setOrigin(0.5); bg.setDisplaySize(800, 600); // Add gradient overlay const gradient = this.add.graphics(); gradient.fillGradientStyle(0x4fd2cb, 0x4fd2cb, 0x3a9d98, 0x3a9d98, 1); gradient.fillRect(0, 0, 800, 600); gradient.setAlpha(0.7); // Stylized title with animation const title = this.add.text(400, -50, 'Coloring Training', { fontSize: '48px', fontStyle: 'bold', fill: '#ffffff', stroke: '#000000', strokeThickness: 6 }).setOrigin(0.5); this.tweens.add({ targets: title, y: 50, duration: 1000, ease: 'Bounce' }); // Add instructions const instructions = [ "Great job! Artie has learned about paintings and sculptures.", "Now, let's train Artie to recognize different colors:", "Red, Yellow, and Blue.", "", "In the next phase, you'll categorize each art piece by color.", "Your task is to identify the main color in the image.", "This will help Artie learn to distinguish between", "red, yellow, and blue objects." ]; // Play the new audio this.trainArtieColorsSound = this.sound.add('trainArtieColors'); this.trainArtieColorsSound.play(); // Animate text appearance instructions.forEach((line, index) => { const text = this.add.text(400, 150 + index * 40, line, { fontSize: '20px', fill: '#ffffff', stroke: '#000000', strokeThickness: 3 }).setOrigin(0.5); text.setAlpha(0); this.tweens.add({ targets: text, alpha: 1, duration: 500, delay: 500 + index * 200 }); }); // Styled continue button const continueButton = this.add.container(400, 500); const buttonBg = this.add.graphics(); buttonBg.fillStyle(0x4a4a4a, 1); buttonBg.fillRoundedRect(-140, -25, 280, 50, 25); const buttonText = this.add.text(0, 0, 'Start Color Training', { fontSize: '22px', fill: '#ffffff' }).setOrigin(0.5); continueButton.add([buttonBg, buttonText]); continueButton.setSize(280, 50); continueButton.setInteractive(); // Button hover effect continueButton.on('pointerover', () => { buttonBg.clear(); buttonBg.fillStyle(0x5a5a5a, 1); buttonBg.fillRoundedRect(-140, -25, 280, 50, 25); }); continueButton.on('pointerout', () => { buttonBg.clear(); buttonBg.fillStyle(0x4a4a4a, 1); buttonBg.fillRoundedRect(-140, -25, 280, 50, 25); }); continueButton.on('pointerdown', () => { this.sound.play('buttonClick'); if (this.trainArtieColorsSound && this.trainArtieColorsSound.isPlaying) { this.trainArtieColorsSound.stop(); } this.scene.start('ColorTrainingScene'); }); } shutdown() { if (this.trainArtieColorsSound) { this.trainArtieColorsSound.stop(); } } } class ColorTrainingScene extends Phaser.Scene { constructor() { super('ColorTrainingScene'); this.images = []; this.currentImageIndex = 0; this.userResponses = {}; this.currentImageObject = null; } preload() { // Load the background image this.load.image('trainingbg', 'https://play.rosebud.ai/assets/machinelearning.png?ulX5'); // Load all art images (both paintings and sculptures) this.load.image('blue_painting_1', 'https://play.rosebud.ai/assets/blue painting 1.png?DMjS'); this.load.image('yellow_sculpture_5', 'https://play.rosebud.ai/assets/yellow sculpture 5.png?Av48'); // ... (load all other images here) this.load.audio('buttonClick', 'https://play.rosebud.ai/assets/buttonClick.wav?8lp7'); this.load.audio('continueClick', 'https://play.rosebud.ai/assets/ui-click-43196.mp3?Bnvf'); this.load.audio('colorBackgroundMusic', 'https://play.rosebud.ai/assets/cassical-piano-beethoven-215973 (1).mp3?6rOb'); this.load.image('artiebot', 'https://play.rosebud.ai/assets/artiebot.png?srs8'); } create() { // Add the background image const background = this.add.image(400, 300, 'trainingbg'); background.setOrigin(0.5); background.setDisplaySize(this.cameras.main.width, this.cameras.main.height); // Create image array with all images this.backgroundMusic = this.sound.add('colorBackgroundMusic', { loop: true, volume: 0.5 }); this.backgroundMusic.play(); this.images = [ 'blue_painting_1', 'yellow_sculpture_5', 'yellow_sculpture_4', 'yellow_sculpture_3', 'yellow_sculpture_2', 'yellow_sculpture_1', 'red_sculpture_5', 'red_sculpture_4', 'red_sculpture_2', 'red_sculpture_3', 'red_sculpture_1', 'blue_sculpture_5', 'blue_sculpture_3', 'blue_sculpture_4', 'blue_sculpture_2', 'blue_sculpture_1', 'yellow_painting_2', 'yellow_painting_1', 'blue_painting_2', 'yellow_painting_4', 'blue_painting_3', 'yellow_painting_3', 'red_painting_4', 'red_painting_3', 'red_painting_2', 'red_painting_5', 'red_painting_1', 'blue_painting_4', 'blue_painting_5', 'yellow_painting_5' ]; this.images = Phaser.Utils.Array.Shuffle(this.images); // Create color buttons const redButton = this.add.rectangle(275, 525, 150, 50, 0xff0000).setInteractive(); const yellowButton = this.add.rectangle(500, 525, 150, 50, 0xffff00).setInteractive(); const blueButton = this.add.rectangle(725, 525, 150, 50, 0x0000ff).setInteractive(); this.add.text(275, 525, 'Red', { fontSize: '18px', fill: '#ffffff' }).setOrigin(0.5); this.add.text(500, 525, 'Yellow', { fontSize: '18px', fill: '#000000' }).setOrigin(0.5); this.add.text(725, 525, 'Blue', { fontSize: '18px', fill: '#ffffff' }).setOrigin(0.5); redButton.on('pointerdown', () => { this.sound.play('buttonClick'); this.categorizeImage('red'); }); yellowButton.on('pointerdown', () => { this.sound.play('buttonClick'); this.categorizeImage('yellow'); }); blueButton.on('pointerdown', () => { this.sound.play('buttonClick'); this.categorizeImage('blue'); }); // Add Artie Bot image with idle animation const artieBot = this.add.image(100, 300, 'artiebot'); const scaleFactorArtie = this.cameras.main.height / artieBot.height; artieBot.setScale(scaleFactorArtie); artieBot.setPosition(artieBot.width * scaleFactorArtie / 2, this.cameras.main.height / 2 + 35); artieBot.setName('artieBot'); artieBot.setDepth(2); // Add idle animation this.tweens.add({ targets: artieBot, y: artieBot.y - 10, duration: 1000, yoyo: true, repeat: -1, ease: 'Sine.easeInOut' }); // Add subtle rotation this.tweens.add({ targets: artieBot, angle: 5, duration: 1500, yoyo: true, repeat: -1, ease: 'Quad.easeInOut' }); // Display progress this.progressText = this.add.text( 500, 575, 'Progress: 0/30', { fontSize: '18px', fill: '#000000' } ).setOrigin(0.5); this.progressText.setDepth(2); // Start image scrolling this.nextImage(); } update() { if (this.currentImageObject) { this.currentImageObject.x -= 7; if (this.currentImageObject.x < -100) { this.currentImageObject.destroy(); this.nextImage(); } } } categorizeImage(color) { if (this.currentImageObject) { const currentImage = this.images[this.currentImageIndex]; this.userResponses[currentImage] = color; console.log(`Image ${currentImage} categorized as ${color}`); const targetX = this.currentImageObject.x; const targetY = -50; this.tweens.add({ targets: this.currentImageObject, x: targetX, y: targetY, scale: 0.1, duration: 500, onComplete: () => { this.createParticles(targetX, 0, color); if (this.currentImageObject) { this.currentImageObject.destroy(); this.currentImageObject = null; } this.currentImageIndex++; this.progressText.setText(`Progress: ${this.currentImageIndex}/30`); this.nextImage(); } }); } } createParticles(x, y, color) { const particles = this.add.particles('particle'); particles.setDepth(1); const emitter = particles.createEmitter({ x: x, y: y, speed: { min: -800, max: 800 }, angle: { min: 0, max: 360 }, scale: { start: 1, end: 0 }, blendMode: 'SCREEN', lifespan: 1000, gravityY: 300, tint: color === 'red' ? 0xff0000 : (color === 'yellow' ? 0xffff00 : 0x0000ff) }); emitter.explode(100); this.time.delayedCall(1000, () => { particles.destroy(); }); } nextImage() { if (this.currentImageIndex < this.images.length) { const nextImageKey = this.images[this.currentImageIndex]; this.currentImageObject = this.add.image(900, 275, nextImageKey); const availableHeight = 500 - 50 - 20 - 60; const availableWidth = 800 - 20; const originalWidth = this.currentImageObject.width; const originalHeight = this.currentImageObject.height; const scaleX = (availableWidth / originalWidth) * 0.8; const scaleY = (availableHeight / originalHeight) * 0.8; const scaleFactor = Math.min(scaleX, scaleY); this.currentImageObject.setScale(scaleFactor); this.currentImageObject.setY(275); } else { this.showTrainingComplete(); } } showTrainingComplete() { this.backgroundMusic.stop(); this.add.text(450, 250, 'AI Color Training Complete!', { fontSize: '20px', fill: '#000000' }).setOrigin(0.5); const continueButton = this.add.text(400, 350, 'Continue', { fontSize: '24px', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: { x: 20, y: 10 } }).setOrigin(0.5).setInteractive(); continueButton.on('pointerdown', () => { this.sound.play('continueClick'); this.scene.start('AIColorRecognitionScene', { userResponses: this.userResponses }); }); } shutdown() { if (this.backgroundMusic) { this.backgroundMusic.stop(); } } } class AIColorRecognitionScene extends Phaser.Scene { constructor() { super('AIColorRecognitionScene'); } init(data) { this.userResponses = data.userResponses; this.images = Object.keys(this.userResponses); this.currentImageIndex = 0; this.artieResponses = {}; } preload() { this.load.image('gallery_bg', 'https://play.rosebud.ai/assets/gallerybg (2).png?PcTu'); this.load.audio('continueClick', 'https://play.rosebud.ai/assets/ui-click-43196.mp3?Bnvf'); } create() { const background = this.add.image(400, 300, 'gallery_bg'); background.setOrigin(0.5); background.setDisplaySize(this.cameras.main.width, this.cameras.main.height); this.add.text(420, 80, 'AI Color Recognition', { fontSize: '25px', fill: '#000000' }).setOrigin(0.5); // Add progress bar this.progressBar = this.add.graphics(); this.progressBox = this.add.graphics(); this.progressBox.fillStyle(0x222222, 0.8); this.progressBox.fillRect(245, 95, 350, 30); this.progressText = this.add.text(450, 140, `Progress: 0/${this.images.length}`, { fontSize: '18px', fill: '#000000' }).setOrigin(0.5); this.imageContainer = this.add.container(430, 300); this.nextButton = this.add.text(400, 530, 'Next', { fontSize: '24px', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: { x: 20, y: 10 } }).setOrigin(0.5).setInteractive(); this.nextButton.on('pointerdown', () => { this.sound.play('buttonClick'); this.showNextImage(); }); this.artieGuessText = this.add.text(420, 460, '', { fontSize: '18px', fill: '#000000' }).setOrigin(0.5); this.showNextImage(); } showNextImage() { if (this.currentImageIndex < this.images.length) { this.imageContainer.removeAll(true); this.artieGuessText.setText(''); const imageName = this.images[this.currentImageIndex]; const imageObject = this.add.image(0, 0, imageName); const scale = Math.min(300 / imageObject.width, 300 / imageObject.height); imageObject.setScale(scale); this.imageContainer.add(imageObject); const artieGuess = this.userResponses[imageName]; this.artieResponses[imageName] = artieGuess; const resultText = `Artie thinks this is ${artieGuess}`; this.artieGuessText.setText(resultText); this.currentImageIndex++; // Update progress bar const progress = this.currentImageIndex / this.images.length; this.progressBar.clear(); this.progressBar.fillStyle(0x00ff00, 1); this.progressBar.fillRect(250, 100, 350 * progress, 20); this.progressText.setText(`Progress: ${this.currentImageIndex}/${this.images.length}`); if (this.currentImageIndex === this.images.length) { this.nextButton.setText('Finish'); } } else { this.showEndButtons(); } } showEndButtons() { this.imageContainer.removeAll(true); this.artieGuessText.setText(''); this.nextButton.setVisible(false); this.progressText.setVisible(false); this.progressBar.clear(); this.progressBox.clear(); this.progressBar.fillRect(245, 95, 350, 30); this.add.text(420, 230, 'AI Color', { fontSize: '24px', fill: '#000000', fontStyle: 'bold' }).setOrigin(0.5); this.add.text(430, 270, 'Recognition Complete!', { fontSize: '24px', fill: '#000000', fontStyle: 'bold' }).setOrigin(0.5); const continueButton = this.add.text(420, 350, 'More Coming Soon!', { fontSize: '20px', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: { x: 20, y: 10 } }).setOrigin(0.5).setInteractive(); continueButton.on('pointerdown', () => { this.sound.stopAll(); // Stop all currently playing sounds this.sound.play('continueClick'); // Transition to the next scene (to be implemented) console.log('Color recognition complete. Artie responses:', this.artieResponses); // this.scene.start('NextScene', { artieResponses: this.artieResponses }); }); } } function resize() { const canvas = document.querySelector("canvas"); const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; const windowRatio = windowWidth / windowHeight; const gameRatio = 800 / 600; if (windowRatio < gameRatio) { canvas.style.width = windowWidth + "px"; canvas.style.height = (windowWidth / gameRatio) + "px"; } else { canvas.style.width = (windowHeight * gameRatio) + "px"; canvas.style.height = windowHeight + "px"; } } const config = { type: Phaser.AUTO, parent: 'renderDiv', width: 800, height: 600, scene: [InstructionScene, MachineLearningFacts, TrainingScene, ResultsScene, AIRecognitionScene, ArtieBotReviewScene, PaintingGridScene, ColorInstructionsScene, ColorTrainingScene, AIColorRecognitionScene], scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH }, backgroundColor: '#4fd2cb' }; window.phaserGame = new Phaser.Game(config); window.addEventListener('resize', resize); resize();