class MenuScene extends Phaser.Scene { constructor() { super('MenuScene'); } preload() { this.load.bitmapFont('ClassroomFont', 'https://play.rosebud.ai/assets/ClassroomFont.png?yVe6', 'https://play.rosebud.ai/assets/ClassroomFont.xml?WzRW'); this.load.image('musicBackground', 'https://play.rosebud.ai/assets/musical notations white background. scattered everywhere in a fun way.png?oIla'); } create() { const { width, height } = this.scale; // Add parallax background this.bg1 = this.add.tileSprite(0, 0, width, height, 'musicBackground') .setOrigin(0) .setAlpha(0.3) .setScrollFactor(0); this.bg2 = this.add.tileSprite(0, 0, width, height, 'musicBackground') .setOrigin(0) .setAlpha(0.3) .setScrollFactor(0) .setTint(0xffcccc); // Add a slight color tint for variety // Stagger the starting positions this.bg2.tilePositionX = width / 2; this.bg2.tilePositionY = height / 2; // Add title text const title = this.add.bitmapText(width / 2, height / 4, 'ClassroomFont', "CoCo's Music Theory Class", 32); title.setOrigin(0.5); // Create buttons const createButton = (y, text, lessonKey, includeCheckbox = true) => { const button = this.add.bitmapText(width / 2, y, 'ClassroomFont', text, 24); button.setOrigin(0.5); button.setInteractive({ useHandCursor: true }); button.on('pointerover', () => button.setTint(0xffff00)); button.on('pointerout', () => button.clearTint()); if (includeCheckbox) { // Add checkbox const checkbox = this.add.rectangle(width / 2 - 100, y, 20, 20, 0xffffff); checkbox.setStrokeStyle(2, 0x000000); // Check if lesson is completed if (this.isLessonCompleted(lessonKey)) { this.fillCheckbox(checkbox); } return { button, checkbox }; } return { button }; }; // Helper method to fill checkbox this.fillCheckbox = (checkbox) => { checkbox.fillColor = 0x00ff00; }; // Helper method to check if a lesson is completed this.isLessonCompleted = (lessonKey) => { return localStorage.getItem(`lesson_${lessonKey}_completed`) === 'true'; }; // Helper method to mark a lesson as completed this.markLessonAsCompleted = (lessonKey) => { localStorage.setItem(`lesson_${lessonKey}_completed`, 'true'); }; // Helper method to check if all required lessons are completed this.areAllLessonsCompleted = () => { return this.isLessonCompleted('basics') && this.isLessonCompleted('notes') && this.isLessonCompleted('scales'); }; // Add lesson buttons const { button: basicsButton, checkbox: basicsCheckbox } = createButton(height / 2 - 120, 'Basics', 'basics'); const { button: notesButton, checkbox: notesCheckbox } = createButton(height / 2 - 40, 'Notes', 'notes'); const { button: scalesButton, checkbox: scalesCheckbox } = createButton(height / 2 + 40, 'Scales', 'scales'); const { button: aiScaleBuilderButton } = createButton(height / 2 + 120, 'AI Scale Builder', 'aiScaleBuilder', false); // Add Certificate button const { button: certificateButton } = createButton(height / 2 + 200, 'Certificate', 'certificate', false); // Check if all required lessons are completed const allLessonsCompleted = this.areAllLessonsCompleted(); // Set Certificate button state certificateButton.setAlpha(allLessonsCompleted ? 1 : 0.5); certificateButton.input.enabled = allLessonsCompleted; basicsButton.on('pointerdown', () => { this.scene.start('BasicsScene'); this.scene.stop('MenuScene'); }); notesButton.on('pointerdown', () => { this.scene.start('NotesScene'); this.scene.stop('MenuScene'); }); scalesButton.on('pointerdown', () => { this.scene.start('ScalesScene'); this.scene.stop('MenuScene'); }); /* placeholderButton.on('pointerdown', () => { console.log('Placeholder lesson selected'); // this.scene.start('PlaceholderScene'); }); */ aiScaleBuilderButton.on('pointerdown', () => { console.log('AI Scale Builder selected'); this.scene.start('AIScaleBuilder'); this.scene.stop('MenuScene'); }); certificateButton.on('pointerdown', () => { if (this.areAllLessonsCompleted()) { console.log('Certificate selected'); this.scene.start('CertificateScene'); this.scene.stop('MenuScene'); } }); notesButton.on('pointerdown', () => { console.log('Notes lesson selected'); this.scene.start('NotesScene'); this.scene.stop('MenuScene'); }); scalesButton.on('pointerdown', () => { console.log('Scales lesson selected'); this.scene.start('ScalesScene'); this.scene.stop('MenuScene'); }); } update() { // Update parallax background this.bg1.tilePositionX += 0.5; this.bg1.tilePositionY += 0.2; this.bg2.tilePositionX -= 0.3; this.bg2.tilePositionY -= 0.1; } } class MusicLessonScene extends Phaser.Scene { constructor(sceneName) { super(sceneName); this.vexFlowElements = []; this.chatBubbleActive = false; this.forwardButton = null; this.backButton = null; this.isAnimating = false; this.forwardButtonCooldown = false; this.backButtonCooldown = false; this.currentStepIndex = 0; this.lessonSteps = []; this.lessonKey = ''; } completedLesson() { const menuScene = this.scene.get('MenuScene'); menuScene.markLessonAsCompleted(this.lessonKey); } async processStep(step) { switch (step.type) { case 'message': case 'staff': case 'faceNotes': case 'egbdfNotes': case 'ledgerLines': case 'clef': case 'timeSignature': case 'noteDuration': await this.handleBasicStep(step); break; case 'spaceNotes': case 'lineNotes': await this.handleNotesStep(step); break; default: console.warn(`Unhandled step type: ${step.type}`); break; } if (step.onComplete) { step.onComplete(); } } async handleBasicStep(step) { if (step.type === 'staff') { await this.showStaffLine(); } else if (step.type === 'faceNotes' || step.type === 'egbdfNotes') { await this.showMultipleNotes(step.notes); } else if (step.type === 'ledgerLines') { await this.showLedgerLineNotes(step.notes); } else if (step.type === 'clef') { await this.showClef(step.clefType); } else if (step.type === 'timeSignature' || step.type === 'noteDuration') { await this.showStaffLine(step.timeSignature, step.notes, step.beams, step.modifiers); } await this.manageChatBubble(step.content, false); } async showClef(clefType) { this.removeAllVexFlowElements(); const staveWidth = 300; const div = document.createElement('div'); div.style.width = `${staveWidth}px`; div.style.height = '200px'; document.body.appendChild(div); const renderer = new Vex.Flow.Renderer(div, Vex.Flow.Renderer.Backends.SVG); renderer.resize(staveWidth, 200); const context = renderer.getContext(); const stave = new Vex.Flow.Stave(0, 0, staveWidth); stave.addClef(clefType); stave.setContext(context).draw(); this.vexFlowElements = [{ div, renderer, context, stave }]; const svgElement = div.querySelector('svg'); const svgString = new XMLSerializer().serializeToString(svgElement); const img = new Image(); return new Promise((resolve) => { img.onload = () => { if (this.textures.exists('staff')) { this.textures.remove('staff'); } this.textures.addImage('staff', img); if (this.staffContainer) { this.staffContainer.destroy(); } const staffSprite = this.add.image(0, 0, 'staff'); this.staffContainer = this.add.container(this.scale.width / 2, this.scale.height / 2 + 100); this.staffContainer.add(staffSprite); this.staffContainer.setSize(staveWidth, 200); resolve(); }; img.src = 'data:image/svg+xml;base64,' + btoa(svgString); }); } async handleBasicStep(step) { if (step.type === 'staff') { await this.showStaffLine(); } else if (step.type === 'faceNotes' || step.type === 'egbdfNotes') { await this.showMultipleNotes(step.notes); } else if (step.type === 'ledgerLines') { await this.showLedgerLineNotes(step.notes); } else if (step.type === 'clef') { await this.showClef(step.clefType); } else if (step.type === 'timeSignature' || step.type === 'noteDuration') { await this.showStaffLine(step.timeSignature, step.notes, step.beams); } await this.manageChatBubble(step.content, false); } async handleNotesStep(step) { this.currentNoteIndex = 0; await this.showCurrentNote(step); } async showCurrentNote(step) { const note = step.notes[this.currentNoteIndex]; await this.showNoteOnStaff(note, step.type === 'spaceNotes'); await this.manageChatBubble(step.content.replace('{note}', note), false); this.setButtonState(this.forwardButton, this.currentNoteIndex < step.notes.length - 1); this.setButtonState(this.backButton, this.currentStepIndex > 0 || this.currentNoteIndex > 0); } handleBackNavigation() { if (this.isAnimating || this.backButtonCooldown) return; this.backButtonCooldown = true; this.time.delayedCall(500, () => { this.backButtonCooldown = false; }); const currentStep = this.lessonSteps[this.currentStepIndex]; if ((currentStep.type === 'spaceNotes' || currentStep.type === 'lineNotes') && this.currentNoteIndex > 0) { this.currentNoteIndex--; this.showCurrentNote(currentStep); } else if (this.currentStepIndex > 0) { this.currentStepIndex--; this.showCurrentStep(); } else { this.scene.start('MenuScene'); } } handleForwardNavigation() { if (this.isAnimating || this.forwardButtonCooldown) return; this.forwardButtonCooldown = true; this.time.delayedCall(500, () => { this.forwardButtonCooldown = false; }); const currentStep = this.lessonSteps[this.currentStepIndex]; if ((currentStep.type === 'spaceNotes' || currentStep.type === 'lineNotes') && this.currentNoteIndex < currentStep.notes.length - 1) { this.currentNoteIndex++; this.showCurrentNote(currentStep); } else if (this.currentStepIndex < this.lessonSteps.length - 1) { this.currentStepIndex++; this.showCurrentStep(); } else { this.scene.start('MenuScene'); } } async showNoteOnStaff(noteName, isSpace) { this.removeAllVexFlowElements(); let octave = isSpace ? ((noteName === 'C' || noteName === 'E') ? '5' : '4') : ((noteName === 'F' || noteName === 'D') ? '5' : '4'); const note = new Vex.Flow.StaveNote({ clef: "treble", keys: [`${noteName.toLowerCase()}/${octave}`], duration: "w" }).setStyle({ fillStyle: "black", strokeStyle: "black" }); await this.showStaffLine('4/4', [note]); await new Promise(resolve => this.time.delayedCall(500, resolve)); } async showMultipleNotes(notes) { this.removeAllVexFlowElements(); const staveNotes = notes.map(note => new Vex.Flow.StaveNote({ clef: "treble", keys: [note], duration: "q" }).setStyle({ fillStyle: "black", strokeStyle: "black" }) ); await this.showStaffLine('4/4', staveNotes); } async showLedgerLineNotes(notes) { this.removeAllVexFlowElements(); const staveNotes = notes.map(note => new Vex.Flow.StaveNote({ clef: "treble", keys: [note], duration: "q" }) ); await this.showStaffLine('4/4', staveNotes); } waitForNextButton() { return new Promise((resolve) => { const nextButtonClickHandler = () => { this.forwardButton.off('pointerdown', nextButtonClickHandler); resolve(); }; this.forwardButton.on('pointerdown', nextButtonClickHandler); }); } preload() { this.load.bitmapFont('ClassroomFont', 'https://play.rosebud.ai/assets/ClassroomFont.png?yVe6', 'https://play.rosebud.ai/assets/ClassroomFont.xml?WzRW'); } create() { // Add a background color to ensure visibility of elements this.add.rectangle(0, 0, this.sys.game.config.width, this.sys.game.config.height, 0xd3d3d3) .setOrigin(0, 0) .setDepth(-1); // Set to a negative depth to ensure it's behind everything this.createNavigationButtons(); this.createBackToMenuButton(); this.createHamburgerButton(); this.showCurrentStep(); } createHamburgerButton() { const hamburgerIcon = this.add.text(20, 20, '☰', { fontSize: '32px', color: '#000' }) .setInteractive({ useHandCursor: true }) .on('pointerdown', () => this.showIndex()); } showIndex() { if (this.indexContainer) { this.indexContainer.destroy(); this.indexContainer = null; return; } this.indexContainer = this.add.container(0, 0); const bg = this.add.rectangle(0, 0, this.scale.width, this.scale.height, 0x000000, 0.7) .setOrigin(0) .setInteractive() .on('pointerdown', () => this.showIndex()); this.indexContainer.add(bg); const indexBox = this.add.rectangle(this.scale.width / 2, this.scale.height / 2, this.scale.width * 0.8, this.scale.height * 0.8, 0xffffff) .setOrigin(0.5); this.indexContainer.add(indexBox); const title = this.add.text(this.scale.width / 2, indexBox.y - indexBox.height / 2 + 20, 'Lesson Index', { fontSize: '24px', color: '#000' }) .setOrigin(0.5); this.indexContainer.add(title); const itemsPerColumn = 10; const columnWidth = indexBox.width / Math.ceil(this.lessonSteps.length / itemsPerColumn); this.lessonSteps.forEach((step, index) => { const column = Math.floor(index / itemsPerColumn); const row = index % itemsPerColumn; const x = indexBox.x - indexBox.width / 2 + columnWidth * (column + 0.5); const y = indexBox.y - indexBox.height / 2 + 60 + row * 30; const stepText = this.add.text(x, y, `${index + 1}. ${step.indexName || 'Unnamed Step'}`, { fontSize: '16px', color: '#000' }) .setOrigin(0.5) .setInteractive({ useHandCursor: true }) .on('pointerdown', () => { this.currentStepIndex = index; this.showCurrentStep(); this.showIndex(); }); if (index === this.currentStepIndex) { stepText.setColor('#ff0000'); } this.indexContainer.add(stepText); }); } createBackToMenuButton() { const { width, height } = this.scale; this.backToMenuButton = this.add.bitmapText(width - 20, 20, 'ClassroomFont', 'Back to Menu', 18) .setOrigin(1, 0) .setInteractive({ useHandCursor: true }) .setTint(0x000000); this.backToMenuButton.on('pointerdown', () => { this.scene.start('MenuScene'); }); this.backToMenuButton.on('pointerover', () => { this.backToMenuButton.setTint(0x0000ff); }); this.backToMenuButton.on('pointerout', () => { this.backToMenuButton.setTint(0x000000); }); } async showCurrentStep() { if (this.isAnimating) return; this.isAnimating = true; this.setButtonState(this.backButton, false); this.setButtonState(this.forwardButton, false); try { await this.hideChatBubble(); const step = this.lessonSteps[this.currentStepIndex]; this.removeAllVexFlowElements(); await this.processStep(step); } finally { this.isAnimating = false; this.setButtonState(this.backButton, this.currentStepIndex > 0); this.setButtonState(this.forwardButton, this.currentStepIndex < this.lessonSteps.length - 1); } } async createStaffLine(timeSignature = null, notes = null, beams = null) { await this.showStaffLine(timeSignature, notes, beams); } async showNextMessage() { this.currentStepIndex++; if (this.currentStepIndex < this.lessonSteps.length) { await this.showCurrentStep(); } else { // Lesson complete, you can add a completion message or return to menu this.scene.start('MenuScene'); } } async showStaffExplanation() { await this.showStaffLine(); const explanation = "A staff line is the foundation of written music, consisting of five horizontal lines and four spaces. It provides a visual framework for representing pitch and duration of musical notes."; await this.manageChatBubble(explanation); } createNavigationButtons() { const { width, height } = this.sys.game.config; this.backButton = this.add.bitmapText(20, height - 50, 'ClassroomFont', '< Back', 24) .setInteractive({ useHandCursor: true }) .on('pointerdown', () => this.handleBackNavigation()) .setOrigin(0, 0.5) .setDepth(1000) .setTint(0x000000); // Set tint to black this.forwardButton = this.add.bitmapText(width - 20, height - 50, 'ClassroomFont', 'Next >', 24) .setInteractive({ useHandCursor: true }) .on('pointerdown', () => this.handleForwardNavigation()) .setOrigin(1, 0.5) .setDepth(1000) .setTint(0x000000); // Set tint to black this.setButtonState(this.backButton, false); this.setButtonState(this.forwardButton, true); } setButtonState(button, isEnabled) { button.setAlpha(isEnabled ? 1 : 0.5); button.input.enabled = isEnabled; } handleBackNavigation() { if (this.isAnimating || this.backButtonCooldown) return; this.backButtonCooldown = true; this.time.delayedCall(500, () => { this.backButtonCooldown = false; }); if (this.chatBubbleActive) { this.hideChatBubble().then(() => { if (this.currentStepIndex > 0) { this.currentStepIndex--; this.showCurrentStep(); } }); } else if (this.currentStepIndex > 0) { this.currentStepIndex--; this.showCurrentStep(); } } handleForwardNavigation() { if (this.isAnimating || this.forwardButtonCooldown) return; this.forwardButtonCooldown = true; this.time.delayedCall(500, () => { this.forwardButtonCooldown = false; }); if (this.currentStepIndex < this.lessonSteps.length - 1) { this.currentStepIndex++; this.showCurrentStep(); } else { // Lesson complete, you can add a completion message or return to menu this.scene.start('MenuScene'); } } async manageChatBubble(message, waitForInput = true) { const { width, height } = this.scale; if (this.chatBubbleActive) { await this.hideChatBubble(); } const chatBubble = this.add.graphics(); chatBubble.fillStyle(0xf0f0f0, 1); chatBubble.lineStyle(2, 0x333333, 1); chatBubble.fillRoundedRect(0, 0, 350, 180, 20); chatBubble.strokeRoundedRect(0, 0, 350, 180, 20); const chatText = this.add.text(175, 90, message, { fontSize: '18px', color: '#333333', align: 'center', wordWrap: { width: 330 } }); chatText.setOrigin(0.5); this.chatGroup = this.add.container(-400, height / 2 - 275, [chatBubble, chatText]); this.tweens.add({ targets: this.chatGroup, x: width / 2 - 175, alpha: { from: 0, to: 1 }, duration: 1000, ease: 'Power2' }); this.chatBubbleActive = true; if (waitForInput) { return new Promise(resolve => { this.input.once('pointerdown', () => { this.hideChatBubble().then(resolve); }); }); } } hideChatBubble() { if (!this.chatBubbleActive) return Promise.resolve(); const { width } = this.scale; return new Promise((resolve) => { this.tweens.add({ targets: this.chatGroup, x: width + 400, alpha: 0, duration: 1000, ease: 'Power2', onComplete: () => { this.chatGroup.destroy(); this.chatBubbleActive = false; resolve(); } }); }); } showStaffLine(timeSignature = null, notes = null, beams = null, modifiers = null) { return new Promise((resolve) => { const gameWidth = this.scale.width; const div = document.createElement('div'); document.body.appendChild(div); div.style.width = `${gameWidth}px`; div.style.height = '200px'; const renderer = new Vex.Flow.Renderer(div, Vex.Flow.Renderer.Backends.SVG); renderer.resize(gameWidth, 200); const context = renderer.getContext(); const stave = new Vex.Flow.Stave(0, 0, gameWidth); stave.addClef('treble'); if (timeSignature) { stave.addTimeSignature(timeSignature); } stave.setContext(context).draw(); if (notes) { const voice = new Vex.Flow.Voice({ num_beats: timeSignature ? parseInt(timeSignature.split('/')[0]) : 4, beat_value: timeSignature ? parseInt(timeSignature.split('/')[1]) : 4 }); const staveNotes = notes.map(note => { const staveNote = new Vex.Flow.StaveNote(note); if (note.accidental) { staveNote.addModifier(new Vex.Flow.Accidental(note.accidental)); } return staveNote; }); voice.addTickables(staveNotes); // Ensure the measure is complete const requiredDuration = voice.getTotalTicks().value(); const actualDuration = voice.getTicksUsed().value(); if (actualDuration < requiredDuration) { const remainingDuration = requiredDuration - actualDuration; const restNote = new Vex.Flow.StaveNote({ clef: "treble", keys: ["b/4"], duration: `${remainingDuration}r` }); voice.addTickable(restNote); } // Automatically create beams for eighth notes and shorter const beams = Vex.Flow.Beam.generateBeams(staveNotes, { groups: [new Vex.Flow.Fraction(2, 8)] }); // Calculate the formatting width const formattingWidth = gameWidth - 100; // Leave some padding for clef and time signature // Format and draw new Vex.Flow.Formatter().joinVoices([voice]).format([voice], formattingWidth); voice.draw(context, stave); // Draw the beams beams.forEach(beam => { beam.setContext(context).draw(); }); } this.vexFlowElements = [{ div, renderer, context, stave }]; const svgElement = div.querySelector('svg'); const svgString = new XMLSerializer().serializeToString(svgElement); const img = new Image(); img.onload = () => { if (this.textures.exists('staff')) { this.textures.remove('staff'); } const texture = this.textures.addImage('staff', img); if (this.staffContainer) { this.staffContainer.destroy(); } const staffSprite = this.add.image(0, 0, 'staff'); this.staffContainer = this.add.container(this.scale.width / 2, this.scale.height / 2 + 100); this.staffContainer.add(staffSprite); this.staffContainer.setSize(gameWidth, 200); resolve(); }; img.src = 'data:image/svg+xml;base64,' + btoa(svgString); }); } removeAllVexFlowElements() { this.vexFlowElements.forEach(element => { element.div.remove(); }); this.vexFlowElements = []; if (this.staffContainer) { this.staffContainer.destroy(); this.staffContainer = null; } if (this.textures.exists('staff')) { this.textures.remove('staff'); } } } class BasicsScene extends MusicLessonScene { constructor() { super('BasicsScene'); this.lessonKey = 'basics'; this.lessonSteps = [{ type: 'message', indexName: 'Introduction', content: "Welcome to the Basics!" }, { type: 'message', indexName: 'Meet CoCo', content: "Hello, I am CoCo, and I will be your Music Theory teacher today. Let's get started, shall we?" }, { type: 'staff', indexName: 'Staff Line', content: "A staff line is the foundation of written music, consisting of five horizontal lines and four spaces. It provides a visual framework for representing pitch and duration of musical notes." }, { type: 'clef', indexName: 'Treble Clef', clefType: 'treble', content: "The treble clef, also known as the G clef, is used for higher-pitched instruments and represents notes above middle C." }, { type: 'clef', indexName: 'Bass Clef', clefType: 'bass', content: "The bass clef, or F clef, is used for lower-pitched instruments and represents notes below middle C." }, { type: 'clef', indexName: 'Alto Clef', clefType: 'alto', content: "The alto clef is primarily used for viola and positions middle C in the center of the staff." }, { type: 'clef', indexName: 'Tenor Clef', clefType: 'tenor', content: "The tenor clef is often used for higher-range notes played by tenor-voiced instruments like the cello or bassoon." }, { type: 'timeSignature', indexName: 'Time Signatures', content: "Now, let's learn about time signatures. A time signature tells you how the music is to be counted." }, { type: 'timeSignature', indexName: '4/4 Time Signature', timeSignature: '4/4', content: "In a time signature like 4/4, the top number (4) represents how many beats are in each measure." }, { type: 'timeSignature', indexName: 'Beat Value', timeSignature: '4/4', content: "The bottom number (4) tells you what type of note gets one beat. In 4/4, a quarter note gets one beat." }, { type: 'timeSignature', indexName: '4/4 Example', timeSignature: '4/4', notes: [{ clef: "treble", keys: ["c/5"], duration: "q" }, { clef: "treble", keys: ["c/5"], duration: "q" }, { clef: "treble", keys: ["c/5"], duration: "q" }, { clef: "treble", keys: ["c/5"], duration: "q" }], content: "Example 1: 4/4 Time Signature - This measure has 4 quarter notes, each getting one beat, totaling 4 beats." }, { type: 'timeSignature', indexName: '3/4 Example', timeSignature: '3/4', notes: [{ clef: "treble", keys: ["c/5"], duration: "q" }, { clef: "treble", keys: ["c/5"], duration: "q" }, { clef: "treble", keys: ["c/5"], duration: "q" }], content: "Example 2: 3/4 Time Signature - This measure has 3 quarter notes, each getting one beat, totaling 3 beats." }, { type: 'timeSignature', indexName: '4/8 Example', timeSignature: '4/8', notes: [{ clef: "treble", keys: ["c/5"], duration: "8" }, { clef: "treble", keys: ["c/5"], duration: "8" }, { clef: "treble", keys: ["c/5"], duration: "8" }, { clef: "treble", keys: ["c/5"], duration: "8" }], content: "Example 3: 4/8 Time Signature - This measure has 4 eighth notes, each getting one beat, totaling 4 beats." }, { type: 'noteDuration', indexName: 'Note Durations', content: "Now, let's learn about note durations in 4/4 time." }, { type: 'noteDuration', indexName: 'Whole Note', timeSignature: '4/4', notes: [{ clef: "treble", keys: ["c/4"], duration: "w" }], content: "Whole Note: A whole note lasts for 4 beats, filling the entire measure in 4/4 time." }, { type: 'noteDuration', indexName: 'Half Notes', timeSignature: '4/4', notes: [{ clef: "treble", keys: ["c/4"], duration: "h" }, { clef: "treble", keys: ["c/4"], duration: "h" }], content: "Half Notes: Two half notes, each lasting 2 beats, fill a measure in 4/4 time." }, { type: 'noteDuration', indexName: 'Quarter Notes', timeSignature: '4/4', notes: [{ clef: "treble", keys: ["c/4"], duration: "q" }, { clef: "treble", keys: ["c/4"], duration: "q" }, { clef: "treble", keys: ["c/4"], duration: "q" }, { clef: "treble", keys: ["c/4"], duration: "q" }], content: "Quarter Notes: Four quarter notes, each lasting 1 beat, fill a measure in 4/4 time." }, { type: 'noteDuration', indexName: 'Eighth Notes', timeSignature: '4/4', notes: Array(8).fill().map(() => ({ clef: "treble", keys: ["c/4"], duration: "8" })), content: "Eighth Notes: Eight eighth notes, each lasting 1/2 beat, fill a measure in 4/4 time." }, { type: 'noteDuration', indexName: 'Sixteenth Notes', timeSignature: '4/4', notes: Array(16).fill().map(() => ({ clef: "treble", keys: ["c/4"], duration: "16" })), content: "Sixteenth Notes: Sixteen sixteenth notes, each lasting 1/4 beat, fill a measure in 4/4 time." }, { type: 'noteDuration', indexName: 'Thirty-Second Notes', timeSignature: '4/4', notes: Array(32).fill().map(() => ({ clef: "treble", keys: ["c/4"], duration: "32" })), content: "Thirty-Second Notes: Thirty-two thirty-second notes, each lasting 1/8 beat, fill a measure in 4/4 time." }, { type: 'message', indexName: 'Accidentals', content: "Now, let's learn about accidentals. Accidentals are signs that raise or lower the pitch of a note." }, { type: 'noteDuration', indexName: 'Natural Note', timeSignature: '4/4', notes: [{ clef: "treble", keys: ["a/4"], duration: "w" }], content: "This is a regular A4 whole note without any accidental." }, { type: 'noteDuration', indexName: 'Sharp Note', timeSignature: '4/4', notes: [{ clef: "treble", keys: ["a#/4"], duration: "w", accidental: "#" }], content: "This is A# (A-sharp). The sharp sign (♯) raises the pitch by a half step." }, { type: 'noteDuration', indexName: 'Flat Note', timeSignature: '4/4', notes: [{ clef: "treble", keys: ["ab/4"], duration: "w", accidental: "b" }], content: "This is Ab (A-flat). The flat sign (♭) lowers the pitch by a half step." }, { type: 'noteDuration', indexName: 'Natural Sign', timeSignature: '4/4', notes: [{ clef: "treble", keys: ["an/4"], duration: "w", accidental: "n" }], content: "This is A♮ (A-natural). The natural sign (♮) cancels any previous sharp or flat and returns the note to its natural state." }, { type: 'message', indexName: 'Why Accidentals?', content: "Accidentals are crucial in music as they allow for more melodic and harmonic possibilities beyond the basic scale." }, { type: 'message', indexName: 'Lesson Summary', content: "Great! You've learned about clefs, time signatures, note durations, and accidentals. These are fundamental elements of music notation." }, { type: 'message', indexName: 'Completion', content: "Congratulations! You've completed the Basics lesson.", onComplete: () => this.completedLesson() }]; } } class NotesScene extends MusicLessonScene { constructor() { super('NotesScene'); this.lessonKey = 'notes'; this.lessonSteps = [{ type: 'message', indexName: 'Introduction', content: "Welcome to the Notes lesson! Let's go over note names. We'll start with the notes on a treble clef staff." }, { type: 'staff', indexName: 'Blank Staff', content: "This is a blank staff with a treble clef. We'll use this to learn about note names." }, { type: 'staff', indexName: 'Space Notes', content: "Let's start with the notes in the SPACES of the treble clef staff." }, { type: 'faceNotes', indexName: 'FACE Mnemonic', notes: ["f/4", "a/4", "c/5", "e/5"], content: "These notes spell out FACE, which is an easy way to remember the notes in the spaces." }, { type: 'staff', indexName: 'Line Notes', content: "Now let's look at the notes on the LINES of the treble clef staff." }, { type: 'egbdfNotes', indexName: 'EGBDF Mnemonic', notes: ["e/4", "g/4", "b/4", "d/5", "f/5"], content: "These notes are E, G, B, D, F, often remembered with the phrase 'Every Good Boy Does Fine'." }, { type: 'staff', indexName: 'Ledger Lines', content: "Now, let's briefly go over ledger lines. These are used for notes that fall above or below the standard staff." }, { type: 'ledgerLines', indexName: 'Higher Ledger Lines', above: true, notes: ['a/5', 'b/5', 'c/6', 'd/6'], content: "These are notes above the staff: A5, B5, C6, and D6. Notice the small lines used to position these higher notes." }, { type: 'ledgerLines', indexName: 'Lower Ledger Lines', above: false, notes: ['c/4', 'b/3', 'a/3', 'g/3'], content: "And these are notes below the staff: C4, B3, A3, and G3. Again, notice the ledger lines used for these lower notes." }, { type: 'message', indexName: 'Conclusion', content: "That concludes our lesson on note names and ledger lines." }, { type: 'message', indexName: 'Completion', content: "Congratulations! You've completed the Notes lesson.", onComplete: () => this.completedLesson() }]; } } class ScalesScene extends MusicLessonScene { constructor() { super('ScalesScene'); this.lessonKey = 'scales'; this.lessonSteps = [{ type: 'message', indexName: 'Introduction', content: "Welcome to the Scales lesson! We'll start by learning about the C major scale." }, { type: 'message', indexName: 'C Major Scale Notes', content: "The C major scale consists of seven unique notes: C, D, E, F, G, A, and B." }, { type: 'staff', indexName: 'C Major Scale on Staff', content: "Let's look at the C major scale on the staff." }, { type: 'noteDuration', indexName: 'C Major Scale Notation', timeSignature: '8/4', notes: [{ clef: "treble", keys: ["c/4"], duration: "q" }, { clef: "treble", keys: ["d/4"], duration: "q" }, { clef: "treble", keys: ["e/4"], duration: "q" }, { clef: "treble", keys: ["f/4"], duration: "q" }, { clef: "treble", keys: ["g/4"], duration: "q" }, { clef: "treble", keys: ["a/4"], duration: "q" }, { clef: "treble", keys: ["b/4"], duration: "q" }, { clef: "treble", keys: ["c/5"], duration: "q" }], content: "This is the C major scale. It consists of eight notes, starting and ending on C." }, { type: 'message', indexName: 'Scale Degrees', content: "Now, let's look at each note and its corresponding scale degree (Roman numeral)." }, { type: 'noteDuration', indexName: 'Scale Degrees Notation', timeSignature: '8/4', notes: [{ clef: "treble", keys: ["c/4"], duration: "q" }, { clef: "treble", keys: ["d/4"], duration: "q" }, { clef: "treble", keys: ["e/4"], duration: "q" }, { clef: "treble", keys: ["f/4"], duration: "q" }, { clef: "treble", keys: ["g/4"], duration: "q" }, { clef: "treble", keys: ["a/4"], duration: "q" }, { clef: "treble", keys: ["b/4"], duration: "q" }, { clef: "treble", keys: ["c/5"], duration: "q" }], content: "Each note in the scale is assigned a Roman numeral (I, II, III, IV, V, VI, VII, I). These represent the scale degrees and are important in understanding chord progressions and harmonic functions." }, { type: 'message', indexName: 'Whole and Half Steps', content: "Now, let's learn about whole steps and half steps. These are the building blocks that define the structure of scales." }, { type: 'noteDuration', indexName: 'Whole Step Example', timeSignature: '4/4', notes: [{ clef: "treble", keys: ["c/4"], duration: "h" }, { clef: "treble", keys: ["d/4"], duration: "h" }], content: "This is a whole step from C to D. Notice there's a note in between (C#/Db)." }, { type: 'noteDuration', indexName: 'Half Step Example', timeSignature: '4/4', notes: [{ clef: "treble", keys: ["e/4"], duration: "h" }, { clef: "treble", keys: ["f/4"], duration: "h" }], content: "This is a half step from E to F. These are adjacent notes with no note in between." }, { type: 'noteDuration', indexName: 'Major Scale Pattern', timeSignature: '4/4', notes: [{ clef: "treble", keys: ["c/4"], duration: "q" }, { clef: "treble", keys: ["d/4"], duration: "q" }, { clef: "treble", keys: ["e/4"], duration: "q" }, { clef: "treble", keys: ["f/4"], duration: "q" }, { clef: "treble", keys: ["g/4"], duration: "q" }, { clef: "treble", keys: ["a/4"], duration: "q" }, { clef: "treble", keys: ["b/4"], duration: "q" }, { clef: "treble", keys: ["c/5"], duration: "q" }], content: "The pattern for a major scale is: Whole - Whole - Half - Whole - Whole - Whole - Half" }, { type: 'noteDuration', indexName: 'Minor Scale Pattern', timeSignature: '8/4', notes: [{ clef: "treble", keys: ["a/4"], duration: "q" }, { clef: "treble", keys: ["b/4"], duration: "q" }, { clef: "treble", keys: ["c/5"], duration: "q" }, { clef: "treble", keys: ["d/5"], duration: "q" }, { clef: "treble", keys: ["e/5"], duration: "q" }, { clef: "treble", keys: ["f/5"], duration: "q" }, { clef: "treble", keys: ["g/5"], duration: "q" }, { clef: "treble", keys: ["a/5"], duration: "q" }], content: "A natural minor scale follows a different pattern: Whole - Half - Whole - Whole - Half - Whole - Whole" }, { type: 'message', indexName: 'Scale Patterns Comparison', content: "These specific patterns of whole and half steps are what give major and minor scales their distinct sounds." }, { type: 'message', indexName: 'Conclusion', content: "That concludes our introduction to the C major scale and its degrees. Great job!" }, { type: 'message', indexName: 'Completion', content: "Congratulations! You've completed the Scales lesson.", onComplete: () => this.completedLesson() }]; } } class CertificateScene extends Phaser.Scene { constructor() { super('CertificateScene'); this.userName = ''; } preload() { this.load.bitmapFont('ClassroomFont', 'https://play.rosebud.ai/assets/ClassroomFont.png?yVe6', 'https://play.rosebud.ai/assets/ClassroomFont.xml?WzRW'); } create() { const { width, height } = this.scale; // Create certificate background const certificate = this.add.graphics(); certificate.fillStyle(0xf0e68c, 1); certificate.fillRect(0, 0, width, height); certificate.lineStyle(20, 0xdaa520); certificate.strokeRect(20, 20, width - 40, height - 40); // Add title this.add.bitmapText(width / 2, height * 0.2, 'ClassroomFont', 'Certificate of Completion', 48) .setOrigin(0.5) .setTint(0x000000); // Add congratulatory text this.add.bitmapText(width / 2, height * 0.4, 'ClassroomFont', 'This certifies that', 32) .setOrigin(0.5) .setTint(0x000000); // Add input field for name this.nameText = this.add.bitmapText(width / 2, height * 0.5, 'ClassroomFont', '', 64) .setOrigin(0.5) .setTint(0x000000); // Add blinking cursor this.cursor = this.add.text(width / 2, height * 0.5, '|', { fontSize: '64px', color: '#000000' }) .setOrigin(0, 0.5); this.tweens.add({ targets: this.cursor, alpha: 0, duration: 500, yoyo: true, repeat: -1 }); // Add instruction text this.instructionText = this.add.bitmapText(width / 2, height * 0.45, 'ClassroomFont', 'Type your name here', 24) .setOrigin(0.5) .setTint(0x888888); this.add.bitmapText(width / 2, height * 0.6, 'ClassroomFont', 'has successfully completed', 32) .setOrigin(0.5) .setTint(0x000000); this.add.bitmapText(width / 2, height * 0.7, 'ClassroomFont', "CoCo's Music Theory Class", 48) .setOrigin(0.5) .setTint(0x000000); // Add date const currentDate = new Date().toLocaleDateString(); this.add.text(width * 0.75, height * 0.85, `Date: ${currentDate}`, { fontFamily: 'Arial', fontSize: '24px', color: '#000000' }).setOrigin(0.5); // Add interactive music notes this.addInteractiveNotes(); // Add button to return to menu const menuButton = this.add.bitmapText(width / 2, height * 0.9, 'ClassroomFont', 'Back to Menu', 32) .setOrigin(0.5) .setTint(0x000000) .setInteractive({ useHandCursor: true }) .on('pointerdown', () => { this.scene.start('MenuScene'); }); // Add hover effect to menu button menuButton.on('pointerover', () => menuButton.setTint(0xffff00)); menuButton.on('pointerout', () => menuButton.setTint(0x000000)); // Enable keyboard input this.input.keyboard.on('keydown', this.handleKeyInput, this); } handleKeyInput(event) { if (event.keyCode === 8 && this.userName.length > 0) { // Handle backspace this.userName = this.userName.slice(0, -1); } else if (event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode <= 90)) { // Handle spacebar and alphanumeric keys this.userName += event.key; } this.nameText.setText(this.userName); this.updateCursorPosition(); // Hide instruction text when user starts typing if (this.userName.length > 0) { this.instructionText.setVisible(false); } else { this.instructionText.setVisible(true); } } updateCursorPosition() { const textWidth = this.nameText.width; const textHeight = this.nameText.height; this.cursor.setPosition( this.nameText.x + textWidth / 2 + 5, this.nameText.y ); } addInteractiveNotes() { const noteSymbols = ['♩', '♪', '♫', '♬', '𝄞', '𝄢', '𝄡', '𝄚', '𝄙', '𝄐', '𝄑', '𝄒', '♭', '♯', '♮', '𝅗𝅥', '𝅘𝅥', '𝅘𝅥𝅮', '𝅘𝅥𝅯', '𝅜']; for (let i = 0; i < 10; i++) { const x = Phaser.Math.Between(50, this.scale.width - 50); const y = Phaser.Math.Between(50, this.scale.height - 50); const noteSymbol = noteSymbols[Phaser.Math.Between(0, noteSymbols.length - 1)]; const note = this.add.text(x, y, noteSymbol, { fontSize: '32px', fill: '#000' }) .setOrigin(0.5); this.physics.add.existing(note); note.body.setCollideWorldBounds(true); note.body.setBounce(1); note.body.setVelocity(Phaser.Math.Between(-100, 100), Phaser.Math.Between(-100, 100)); note.setInteractive({ useHandCursor: true }) .on('pointerdown', () => { note.setScale(1.5); this.tweens.add({ targets: note, scale: 1, duration: 300, ease: 'Bounce.easeOut' }); }); } } } function loadScript(url) { return new Promise((resolve, reject) => { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; script.onload = () => resolve(); script.onerror = () => reject(new Error('Script loading failed for ' + url)); document.head.appendChild(script); }); } const container = document.getElementById('renderDiv'); async function initializeGame() { try { // Load the external script before initializing the Phaser game await loadScript(`https://cdn.jsdelivr.net/npm/vexflow@4.2.2/build/cjs/vexflow-debug.js`); await loadScript(`https://play.rosebud.ai/assets/AIScaleBuilder.js?h6AQ`); console.log('Script loaded successfully'); const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 200 } } }, scene: [MenuScene, AIScaleBuilder, MusicLessonScene, BasicsScene, NotesScene, ScalesScene, CertificateScene] }; window.phaserGame = new Phaser.Game(config); } catch (error) { console.error('Failed to load external script or initialize the Phaser game:', error); } } initializeGame();