diff --git a/src/WorldSelector.js b/src/WorldSelector.js index 2cdbc112..a461bda2 100644 --- a/src/WorldSelector.js +++ b/src/WorldSelector.js @@ -47,6 +47,7 @@ class WorldSelector extends React.Component { 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++) { diff --git a/src/Worlds.js b/src/Worlds.js index be0ec5c9..6981c797 100644 --- a/src/Worlds.js +++ b/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, diff --git a/src/Worlds.scss b/src/Worlds.scss index db9c752a..7bc3fa49 100644 --- a/src/Worlds.scss +++ b/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 { diff --git a/src/messages.json b/src/messages.json index 0fd26156..60df2e93 100644 --- a/src/messages.json +++ b/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", diff --git a/src/svg/MusicBand.svg b/src/svg/MusicBand.svg new file mode 100644 index 00000000..c0c918b1 --- /dev/null +++ b/src/svg/MusicBand.svg @@ -0,0 +1,297 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/svg/MusicBandBaton.svg b/src/svg/MusicBandBaton.svg new file mode 100644 index 00000000..eace2e21 --- /dev/null +++ b/src/svg/MusicBandBaton.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/svg/MusicBandBatonContrast.svg b/src/svg/MusicBandBatonContrast.svg new file mode 100644 index 00000000..98040ba0 --- /dev/null +++ b/src/svg/MusicBandBatonContrast.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/svg/MusicBandBatonGray.svg b/src/svg/MusicBandBatonGray.svg new file mode 100644 index 00000000..6a7da394 --- /dev/null +++ b/src/svg/MusicBandBatonGray.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/svg/MusicBandContrast.svg b/src/svg/MusicBandContrast.svg new file mode 100644 index 00000000..89fbb511 --- /dev/null +++ b/src/svg/MusicBandContrast.svg @@ -0,0 +1,321 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/svg/MusicBandGray.svg b/src/svg/MusicBandGray.svg new file mode 100644 index 00000000..352107c2 --- /dev/null +++ b/src/svg/MusicBandGray.svg @@ -0,0 +1,297 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/svg/MusicBandThumbnail.svg b/src/svg/MusicBandThumbnail.svg new file mode 100644 index 00000000..c76223f9 --- /dev/null +++ b/src/svg/MusicBandThumbnail.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/svg/MusicBandThumbnailContrast.svg b/src/svg/MusicBandThumbnailContrast.svg new file mode 100644 index 00000000..06f7c68f --- /dev/null +++ b/src/svg/MusicBandThumbnailContrast.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/svg/MusicBandThumbnailGray.svg b/src/svg/MusicBandThumbnailGray.svg new file mode 100644 index 00000000..6c7f7e5c --- /dev/null +++ b/src/svg/MusicBandThumbnailGray.svg @@ -0,0 +1,11 @@ + + + + + + + + + + +