C2LC-688: Add the new Music Band background

src/WorldSelector.js

@@ -47,6 +47,7 @@ class WorldSelector extends React.Component<WorldSelectorProps, WorldSelectorSta
             'Haunted',
             'Landmarks',
             'Marble',
+            "MusicBand",
             'Savannah',
             'Space',
             'Sports'

src/WorldSelector.test.js

@@ -66,11 +66,11 @@ function getDoneButton(wrapper) {
 
 describe('When rendering selector options', () => {
     test('All worlds should be displayed as options and only one is checked', () => {
-        expect.assertions(27);
+        expect.assertions(29);
         const { wrapper } = createMountWorldSelector();
         const selectorOptions = getWorldSelectorRadioButton(wrapper);
 
-        expect(selectorOptions.length).toBe(13);
+        expect(selectorOptions.length).toBe(14);
 
         expect(selectorOptions.get(0).props.value).toBe('Sketchpad');
         expect(selectorOptions.get(1).props.value).toBe('AmusementPark');
@@ -82,9 +82,10 @@ describe('When rendering selector options', () => {
         expect(selectorOptions.get(7).props.value).toBe('Haunted');
         expect(selectorOptions.get(8).props.value).toBe('Landmarks');
         expect(selectorOptions.get(9).props.value).toBe('Marble');
-        expect(selectorOptions.get(10).props.value).toBe('Savannah');
-        expect(selectorOptions.get(11).props.value).toBe('Space');
-        expect(selectorOptions.get(12).props.value).toBe('Sports');
+        expect(selectorOptions.get(10).props.value).toBe('MusicBand');
+        expect(selectorOptions.get(11).props.value).toBe('Savannah');
+        expect(selectorOptions.get(12).props.value).toBe('Space');
+        expect(selectorOptions.get(13).props.value).toBe('Sports');
 
         expect(selectorOptions.get(0).props.checked).toBe(true);
         for (let i = 1; i < selectorOptions.length; i++) {

src/Worlds.js

@@ -102,6 +102,18 @@ import { ReactComponent as Marble } from './svg/Marble.svg';
 import { ReactComponent as MarbleGray } from './svg/MarbleGray.svg';
 import { ReactComponent as MarbleContrast } from './svg/MarbleContrast.svg';
 
+// Music Band
+
+import { ReactComponent as MusicBand } from './svg/MusicBand.svg';
+import { ReactComponent as MusicBandGray } from './svg/MusicBandGray.svg';
+import { ReactComponent as MusicBandContrast } from './svg/MusicBandContrast.svg';
+import { ReactComponent as MusicBandThumbnail } from './svg/MusicBandThumbnail.svg';
+import { ReactComponent as MusicBandThumbnailGray } from './svg/MusicBandThumbnailGray.svg';
+import { ReactComponent as MusicBandThumbnailContrast } from './svg/MusicBandThumbnailContrast.svg';
+import { ReactComponent as MusicBandBaton } from './svg/MusicBandBaton.svg';
+import { ReactComponent as MusicBandBatonGray } from './svg/MusicBandBatonGray.svg';
+import { ReactComponent as MusicBandBatonContrast } from './svg/MusicBandBatonContrast.svg';
+
 // Savannah
 import { ReactComponent as Savannah } from './svg/Savannah.svg';
 import { ReactComponent as SavannahGray } from './svg/Savannah-gray.svg';
@@ -172,6 +184,7 @@ const worlds: {|
     'Haunted': WorldProperties,
     'Landmarks': WorldProperties,
     'Marble': WorldProperties,
+    'MusicBand': WorldProperties,
     'Savannah': WorldProperties,
     'Sketchpad': WorldProperties,
     'Space': WorldProperties,
@@ -846,6 +859,63 @@ const worlds: {|
         startingDirection: 2, // East
         enableFlipCharacter: false
     },
+    'MusicBand': {
+        background: MusicBand,
+        backgroundGray: MusicBandGray,
+        backgroundContrast: MusicBandContrast,
+        backgroundInfo : {
+            B1: 'spotlight',
+            E1: 'spotlight',
+            H1: 'spotlight',
+            K1: 'spotlight',
+            H2: 'drumKit',
+            J2: 'saxophone',
+            K2: 'saxophone',
+            B3: 'guitar',
+            C3: 'guitar',
+            F3: 'drumKit',
+            G3: 'drumKit',
+            H3: 'drumKit',
+            J3: 'saxophone',
+            K3: 'saxophone',
+            B4: 'guitar',
+            C4: 'guitar',
+            F4: 'drumKit',
+            G4: 'drumKit',
+            H4: 'drumKit',
+            F5: 'drumKit',
+            G5: 'drumKit',
+            H5: 'drumKit',
+            A6: 'tambourine',
+            F6: 'microphone',
+            H6: 'synthesizer',
+            I6: 'synthesizer',
+            J6: 'synthesizer',
+            K6: 'synthesizer',
+            A7: 'loudspeaker',
+            C7: 'xylophone',
+            D7: 'xylophone',
+            F7: 'microphone',
+            H7: 'synthesizer',
+            I7: 'synthesizer',
+            J7: 'synthesizer',
+            L7: 'loudspeaker',
+            A8: 'loudspeaker',
+            F8: 'microphone',
+            L8: 'loudspeaker'
+        },
+        thumbnail: MusicBandThumbnail,
+        thumbnailDark: MusicBandThumbnail,
+        thumbnailGray: MusicBandThumbnailGray,
+        thumbnailContrast: MusicBandThumbnailContrast,
+        character: MusicBandBaton,
+        characterGray: MusicBandBatonGray,
+        characterContrast: MusicBandBatonContrast,
+        startingX: 1,
+        startingY: 2,
+        startingDirection: 2, // East
+        enableFlipCharacter: true
+    },
     'Savannah': {
         background: Savannah,
         backgroundGray: SavannahGray,

src/Worlds.scss

@@ -970,6 +970,127 @@ body.contrast-theme {
     }
 }
 
+/* Music Band */
+
+.ProgramBlockEditor__character-column-character-container--MusicBand {
+    background-color: #FBE6CD;
+}
+
+.Scene__grid-line--MusicBand {
+    stroke: #567F88;
+}
+
+.Scene__path-line--MusicBand {
+    stroke: #E5AF5E;
+}
+
+.Scene__starting-grid-cell-point--MusicBand {
+    fill: #E5AF5E;
+}
+
+.WorldSelector__option-image--MusicBand:hover {
+    svg {
+        .thumbnail-background {
+            fill: #73A9B0;
+        }
+        .thumbnail-purple {
+            fill: #AA6F9C;
+        }
+        .thumbnail-red {
+            fill: #EA7362;
+        }
+        .thumbnail-yellow {
+            fill: #F1AE5B;
+        }
+        .thumbnail-green {
+            fill: #4C9990;
+        }
+        .thumbnail-blue {
+            fill: #516D95;
+        }
+        .thumbnail-note {
+            fill: #0B0F14;
+        }
+    }
+}
+
+body.gray-theme {
+    .ProgramBlockEditor__character-column-character-container--MusicBand {
+        background-color: #FFFFFF;
+    }
+
+    .Scene__grid-line--MusicBand {
+        stroke: #7F8898;
+    }
+
+    .Scene__path-line--MusicBand {
+        stroke: #FFFFFF;
+    }
+
+    .Scene__starting-grid-cell-point--MusicBand {
+        fill: #FFFFFF;
+    }
+
+    .WorldSelector__option-image--MusicBand:hover {
+        svg {
+            .thumbnail-background {
+                fill: #B9BEC6;
+            }
+            .thumbnail-purple {
+                fill: #67717E;
+            }
+            .thumbnail-red {
+                fill: #818A98;
+            }
+            .thumbnail-yellow {
+                fill: #9DA4AF;
+            }
+            .thumbnail-green {
+                fill: #B9BEC6;
+            }
+            .thumbnail-blue {
+                fill: #D5D8DD;
+            }
+            .thumbnail-note {
+                fill: #22262A;
+            }
+        }
+    }
+}
+
+body.contrast-theme {
+    .ProgramBlockEditor__character-column-character-container--MusicBand {
+        background-color: #FFFFFF;
+    }
+
+    .Scene__grid-line--MusicBand {
+        stroke: #0078FF;
+    }
+
+    .Scene__path-line--MusicBand {
+        stroke: #FF0000;
+    }
+
+    .Scene__starting-grid-cell-point--MusicBand {
+        fill: #FF0000;
+    }
+
+    .WorldSelector__option-image--MusicBand:hover {
+        svg {
+            .thumbnail-background {
+                fill: #1E1E1E;
+            }
+            .thumbnail-stripe {
+                fill: #1E1E1E;
+                stroke: #FFFFFF;
+            }
+            .thumbnail-note {
+                fill: #FFFFFF;
+            }
+        }
+    }
+}
+
 /* Sketchpad */
 
 .ProgramBlockEditor__character-column-character-container--Sketchpad {

src/messages.json

@@ -375,6 +375,18 @@
         "Marble.character": "the marble",
         "Marble.label": "A maze made of bricks in different colours. Your character in this scene is a marble. There is a path through the maze that starts where your marble is and there are multiple ways to escape the maze.",
         "Marble.name": "Marble Run",
+        "MusicBand.character": "the baton",
+        "MusicBand.drumKit": "the drum kit",
+        "MusicBand.guitar": "the guitar",
+        "MusicBand.label": "A music band scene with musical instruments. The instruments are arranged in 2 rows, with one row in the middle of the scene and one towards the bottom of the scene. In the upper row, there is a guitar, a drum kit, and a saxophone. In the lower row, there is a tambourine, a xylophone with a mallet, a microphone on a stand, and a synthesizer. Across the top of the scene spotlights light the instruments. And in the lower left and right corners there are loudspeakers. Your character in this scene is a conductor's baton.",
+        "MusicBand.loudspeaker": "a loudspeaker",
+        "MusicBand.microphone": "the microphone on a stand",
+        "MusicBand.name": "Music Band",
+        "MusicBand.saxophone": "the saxophone",
+        "MusicBand.spotlight": "a spotlight",
+        "MusicBand.synthesizer": "the synthesizer",
+        "MusicBand.tambourine": "the tambourine",
+        "MusicBand.xylophone": "the xylophone with mallet",
         "PenDownToggleSwitch.penDown": "Pen down",
         "PlayButton.play": "Play",
         "PlayButton.pause": "Pause",