From 535e3cf7534f9b0c74a15b6b059c52e97bf7f815 Mon Sep 17 00:00:00 2001 From: ChengYu Date: Sun, 30 Aug 2020 21:57:09 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6=E5=AE=98=E6=96=B9=E6=9C=80?= =?UTF-8?q?=E6=96=B0=E7=89=88=E6=9C=AC=202020-08-30?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/alerts/alert.css | 1 + src/components/gui/gui.css | 29 +- src/components/gui/gui.jsx | 7 + src/components/menu-bar/icon--about.svg | 1 + src/components/menu-bar/menu-bar.css | 6 + src/components/menu-bar/menu-bar.jsx | 58 +- .../stage-wrapper/stage-wrapper.css | 19 + .../stage-wrapper/stage-wrapper.jsx | 6 +- src/components/stage/stage.css | 68 +- src/components/stage/stage.jsx | 121 +- .../telemetry-modal/telemetry-modal.jsx | 6 +- src/containers/blocks.jsx | 43 +- src/containers/green-flag-overlay.jsx | 4 - src/containers/gui.jsx | 1 + src/containers/sb-file-uploader.jsx | 11 +- src/containers/stage.jsx | 55 +- src/containers/target-pane.jsx | 56 +- src/css/colors.css | 2 +- src/lib/analytics.js | 25 +- src/lib/audio/shared-audio-context.js | 18 +- src/lib/backpack/jpeg-thumbnail.js | 25 +- src/lib/download-blob.js | 29 +- src/lib/drag-utils.js | 20 +- src/lib/drop-area-hoc.jsx | 2 +- src/lib/layout-constants.js | 4 + src/lib/libraries/costumes.json | 974 +- src/lib/libraries/decks/en-steps.js | 188 +- src/lib/libraries/decks/index.jsx | 1148 +- .../libraries/decks/steps/add-effects.en.png | Bin 78038 -> 15023 bytes .../decks/steps/animate-char-add-sound.en.png | Bin 0 -> 36997 bytes .../steps/animate-char-change-color.en.png | Bin 0 -> 17219 bytes .../decks/steps/animate-char-jump.en.png | Bin 0 -> 62618 bytes .../decks/steps/animate-char-move.en.png | Bin 0 -> 20222 bytes .../steps/animate-char-say-something.en.png | Bin 0 -> 40650 bytes .../decks/steps/animate-char-talk.en.png | Bin 0 -> 49498 bytes .../libraries/decks/steps/change-size.en.png | Bin 109389 -> 61171 bytes .../steps/chase-game-change-score.en.png | Bin 0 -> 24343 bytes .../steps/chase-game-move-randomly.en.png | Bin 0 -> 15074 bytes .../decks/steps/chase-game-play-sound.en.png | Bin 0 -> 23070 bytes .../decks/steps/chase-game-right-left.en.png | Bin 0 -> 22395 bytes .../decks/steps/chase-game-up-down.en.png | Bin 0 -> 22274 bytes .../libraries/decks/steps/cn-backdrop.en.png | Bin 0 -> 29991 bytes .../libraries/decks/steps/cn-collect.en.png | Bin 0 -> 31305 bytes src/lib/libraries/decks/steps/cn-glide.en.png | Bin 0 -> 32753 bytes src/lib/libraries/decks/steps/cn-say.en.png | Bin 0 -> 25476 bytes src/lib/libraries/decks/steps/cn-score.en.png | Bin 0 -> 35009 bytes .../code-cartoon-01-say-something.en.png | Bin 56060 -> 53056 bytes .../steps/code-cartoon-02-animate.en.png | Bin 0 -> 60351 bytes .../code-cartoon-04-use-minus-sign.en.png | Bin 0 -> 71720 bytes .../steps/code-cartoon-05-grow-shrink.en.png | Bin 0 -> 72426 bytes .../decks/steps/code-cartoon-07-jump.en.png | Bin 0 -> 66078 bytes .../code-cartoon-08-change-scenes.en.png | Bin 0 -> 66146 bytes .../steps/code-cartoon-09-glide-around.en.png | Bin 0 -> 70287 bytes .../code-cartoon-10-change-costumes.en.png | Bin 0 -> 76228 bytes .../decks/steps/fly-flying-heart.en.png | Bin 0 -> 14047 bytes .../decks/steps/fly-keep-score.en.png | Bin 0 -> 14794 bytes .../decks/steps/fly-make-interactive.en.png | Bin 0 -> 14863 bytes .../decks/steps/fly-move-scenery.en.png | Bin 0 -> 11825 bytes .../decks/steps/fly-say-something.en.png | Bin 0 -> 12293 bytes .../decks/steps/fly-switch-costume.en.png | Bin 0 -> 11587 bytes .../steps/glide-around-back-and-forth.en.png | Bin 71462 -> 17320 bytes .../decks/steps/glide-around-point.en.png | Bin 150726 -> 56253 bytes .../libraries/decks/steps/hide-show.en.png | Bin 69527 -> 16026 bytes .../steps/imagine-change-costumes.en.png | Bin 71478 -> 22046 bytes .../steps/imagine-click-green-flag.en.png | Bin 70261 -> 17139 bytes .../decks/steps/imagine-fly-around.en.png | Bin 78425 -> 35290 bytes .../decks/steps/imagine-glide-to-point.en.png | Bin 108185 -> 50517 bytes .../decks/steps/imagine-grow-shrink.en.png | Bin 96340 -> 49678 bytes .../decks/steps/imagine-left-right.en.png | Bin 71869 -> 68759 bytes .../decks/steps/imagine-record-a-sound.en.gif | Bin 201392 -> 116732 bytes .../steps/imagine-switch-backdrops.en.png | Bin 0 -> 59636 bytes .../steps/imagine-switch-backdrops.es.png | Bin 62371 -> 58551 bytes .../steps/imagine-type-what-you-want.en.png | Bin 75719 -> 15254 bytes .../decks/steps/imagine-up-down.en.png | Bin 69910 -> 40304 bytes .../decks/steps/intro-say-hello.en.gif | Bin 137241 -> 86490 bytes .../steps/move-arrow-keys-left-right.en.png | Bin 68787 -> 39037 bytes .../steps/move-arrow-keys-up-down.en.png | Bin 65203 -> 28869 bytes .../decks/steps/music-make-beat.en.png | Bin 0 -> 26160 bytes .../decks/steps/music-make-beatbox.en.png | Bin 0 -> 21102 bytes .../decks/steps/music-make-song.en.png | Bin 0 -> 19138 bytes .../decks/steps/music-play-sound.en.png | Bin 0 -> 13361 bytes .../decks/steps/name-change-color.en.png | Bin 0 -> 22515 bytes .../libraries/decks/steps/name-grow.en.png | Bin 0 -> 28043 bytes .../decks/steps/name-play-sound.en.png | Bin 0 -> 19773 bytes .../libraries/decks/steps/name-spin.en.png | Bin 0 -> 30680 bytes .../decks/steps/pong-add-code-to-ball.en.png | Bin 44847 -> 40816 bytes .../decks/steps/pong-bounce-around.en.png | Bin 0 -> 18991 bytes .../decks/steps/pong-choose-score.en.png | Bin 31872 -> 28982 bytes .../steps/pong-insert-change-score.en.png | Bin 66117 -> 62527 bytes .../decks/steps/pong-move-the-paddle.en.png | Bin 0 -> 18299 bytes .../decks/steps/pong-reset-score.en.png | Bin 69767 -> 67814 bytes .../decks/steps/pop-game-change-color.en.png | Bin 0 -> 14305 bytes .../decks/steps/pop-game-change-score.en.png | Bin 0 -> 15956 bytes .../decks/steps/pop-game-play-sound.en.png | Bin 0 -> 15578 bytes .../steps/pop-game-random-position.en.png | Bin 0 -> 14363 bytes .../decks/steps/pop-game-reset-score.en.png | Bin 0 -> 14264 bytes .../steps/record-a-sound-choose-sound.en.png | Bin 67983 -> 59091 bytes .../steps/record-a-sound-click-record.en.png | Bin 25527 -> 23324 bytes .../record-a-sound-play-your-sound.en.png | Bin 42831 -> 7494 bytes .../record-a-sound-press-record-button.en.png | Bin 27721 -> 24102 bytes .../steps/record-a-sound-sounds-tab.en.png | Bin 75935 -> 66080 bytes .../decks/steps/speech-add-extension.en.gif | Bin 0 -> 70914 bytes .../decks/steps/speech-change-color.en.png | Bin 0 -> 18077 bytes .../decks/steps/speech-grow-shrink.en.png | Bin 0 -> 20247 bytes .../decks/steps/speech-move-around.en.png | Bin 0 -> 18686 bytes .../decks/steps/speech-say-something.en.png | Bin 0 -> 16697 bytes .../decks/steps/speech-set-voice.en.png | Bin 0 -> 17566 bytes .../libraries/decks/steps/speech-song.en.png | Bin 0 -> 86971 bytes .../libraries/decks/steps/speech-spin.en.png | Bin 0 -> 118811 bytes .../steps/spin-point-in-direction.en.png | Bin 81010 -> 39975 bytes .../libraries/decks/steps/spin-turn.en.png | Bin 109878 -> 44080 bytes .../decks/steps/story-conversation.en.png | Bin 0 -> 27225 bytes .../decks/steps/story-hide-character.en.png | Bin 0 -> 37010 bytes .../decks/steps/story-say-something.en.png | Bin 0 -> 23314 bytes .../decks/steps/story-show-character.en.png | Bin 0 -> 35513 bytes .../decks/steps/story-switch-backdrop.en.png | Bin 0 -> 46001 bytes .../decks/steps/switch-costumes.en.png | Bin 54695 -> 14716 bytes .../decks/steps/talking-12-dance-moves.en.png | Bin 0 -> 40782 bytes .../steps/talking-13-ask-and-answer.en.png | Bin 0 -> 13839 bytes .../steps/talking-3-say-something.en.png | Bin 0 -> 13841 bytes .../steps/talking-5-switch-backdrop.en.png | Bin 0 -> 14269 bytes .../decks/steps/talking-7-move-around.en.png | Bin 0 -> 21947 bytes .../decks/steps/talking-9-animate.en.png | Bin 0 -> 18054 bytes .../decks/steps/video-animate.en.png | Bin 51232 -> 47091 bytes .../libraries/decks/steps/video-pet.en.png | Bin 62814 -> 57712 bytes .../libraries/decks/steps/video-pop.en.png | Bin 58963 -> 55211 bytes src/lib/libraries/sprites.json | 932 +- src/lib/make-toolbox-xml.js | 138 +- src/lib/project-saver-hoc.jsx | 13 +- src/lib/sortable-hoc.jsx | 12 +- src/playground/index.ejs | 5 +- src/playground/player.ejs | 2 +- src/reducers/gui.js | 7 +- src/reducers/project-state.js | 45 +- src/reducers/workspace-metrics.js | 37 + static/logo.png | Bin 0 -> 48449 bytes yarn.lock | 10374 ++++++++++++++++ 137 files changed, 13451 insertions(+), 1041 deletions(-) create mode 100644 src/components/menu-bar/icon--about.svg create mode 100644 src/lib/libraries/decks/steps/animate-char-add-sound.en.png create mode 100644 src/lib/libraries/decks/steps/animate-char-change-color.en.png create mode 100644 src/lib/libraries/decks/steps/animate-char-jump.en.png create mode 100644 src/lib/libraries/decks/steps/animate-char-move.en.png create mode 100644 src/lib/libraries/decks/steps/animate-char-say-something.en.png create mode 100644 src/lib/libraries/decks/steps/animate-char-talk.en.png create mode 100644 src/lib/libraries/decks/steps/chase-game-change-score.en.png create mode 100644 src/lib/libraries/decks/steps/chase-game-move-randomly.en.png create mode 100644 src/lib/libraries/decks/steps/chase-game-play-sound.en.png create mode 100644 src/lib/libraries/decks/steps/chase-game-right-left.en.png create mode 100644 src/lib/libraries/decks/steps/chase-game-up-down.en.png create mode 100644 src/lib/libraries/decks/steps/cn-backdrop.en.png create mode 100644 src/lib/libraries/decks/steps/cn-collect.en.png create mode 100644 src/lib/libraries/decks/steps/cn-glide.en.png create mode 100644 src/lib/libraries/decks/steps/cn-say.en.png create mode 100644 src/lib/libraries/decks/steps/cn-score.en.png create mode 100644 src/lib/libraries/decks/steps/code-cartoon-02-animate.en.png create mode 100644 src/lib/libraries/decks/steps/code-cartoon-04-use-minus-sign.en.png create mode 100644 src/lib/libraries/decks/steps/code-cartoon-05-grow-shrink.en.png create mode 100644 src/lib/libraries/decks/steps/code-cartoon-07-jump.en.png create mode 100644 src/lib/libraries/decks/steps/code-cartoon-08-change-scenes.en.png create mode 100644 src/lib/libraries/decks/steps/code-cartoon-09-glide-around.en.png create mode 100644 src/lib/libraries/decks/steps/code-cartoon-10-change-costumes.en.png create mode 100644 src/lib/libraries/decks/steps/fly-flying-heart.en.png create mode 100644 src/lib/libraries/decks/steps/fly-keep-score.en.png create mode 100644 src/lib/libraries/decks/steps/fly-make-interactive.en.png create mode 100644 src/lib/libraries/decks/steps/fly-move-scenery.en.png create mode 100644 src/lib/libraries/decks/steps/fly-say-something.en.png create mode 100644 src/lib/libraries/decks/steps/fly-switch-costume.en.png create mode 100644 src/lib/libraries/decks/steps/imagine-switch-backdrops.en.png create mode 100644 src/lib/libraries/decks/steps/music-make-beat.en.png create mode 100644 src/lib/libraries/decks/steps/music-make-beatbox.en.png create mode 100644 src/lib/libraries/decks/steps/music-make-song.en.png create mode 100644 src/lib/libraries/decks/steps/music-play-sound.en.png create mode 100644 src/lib/libraries/decks/steps/name-change-color.en.png create mode 100644 src/lib/libraries/decks/steps/name-grow.en.png create mode 100644 src/lib/libraries/decks/steps/name-play-sound.en.png create mode 100644 src/lib/libraries/decks/steps/name-spin.en.png create mode 100644 src/lib/libraries/decks/steps/pong-bounce-around.en.png create mode 100644 src/lib/libraries/decks/steps/pong-move-the-paddle.en.png create mode 100644 src/lib/libraries/decks/steps/pop-game-change-color.en.png create mode 100644 src/lib/libraries/decks/steps/pop-game-change-score.en.png create mode 100644 src/lib/libraries/decks/steps/pop-game-play-sound.en.png create mode 100644 src/lib/libraries/decks/steps/pop-game-random-position.en.png create mode 100644 src/lib/libraries/decks/steps/pop-game-reset-score.en.png create mode 100644 src/lib/libraries/decks/steps/speech-add-extension.en.gif create mode 100644 src/lib/libraries/decks/steps/speech-change-color.en.png create mode 100644 src/lib/libraries/decks/steps/speech-grow-shrink.en.png create mode 100644 src/lib/libraries/decks/steps/speech-move-around.en.png create mode 100644 src/lib/libraries/decks/steps/speech-say-something.en.png create mode 100644 src/lib/libraries/decks/steps/speech-set-voice.en.png create mode 100644 src/lib/libraries/decks/steps/speech-song.en.png create mode 100644 src/lib/libraries/decks/steps/speech-spin.en.png create mode 100644 src/lib/libraries/decks/steps/story-conversation.en.png create mode 100644 src/lib/libraries/decks/steps/story-hide-character.en.png create mode 100644 src/lib/libraries/decks/steps/story-say-something.en.png create mode 100644 src/lib/libraries/decks/steps/story-show-character.en.png create mode 100644 src/lib/libraries/decks/steps/story-switch-backdrop.en.png create mode 100644 src/lib/libraries/decks/steps/talking-12-dance-moves.en.png create mode 100644 src/lib/libraries/decks/steps/talking-13-ask-and-answer.en.png create mode 100644 src/lib/libraries/decks/steps/talking-3-say-something.en.png create mode 100644 src/lib/libraries/decks/steps/talking-5-switch-backdrop.en.png create mode 100644 src/lib/libraries/decks/steps/talking-7-move-around.en.png create mode 100644 src/lib/libraries/decks/steps/talking-9-animate.en.png create mode 100644 src/reducers/workspace-metrics.js create mode 100644 static/logo.png create mode 100644 yarn.lock diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css index 8e5d562..fab305b 100644 --- a/src/components/alerts/alert.css +++ b/src/components/alerts/alert.css @@ -15,6 +15,7 @@ padding-right: 1rem; margin-bottom: 7px; min-height: 1.5rem; + pointer-events: all; } .alert.warn { diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css index 888316c..eeb3989 100644 --- a/src/components/gui/gui.css +++ b/src/components/gui/gui.css @@ -34,7 +34,17 @@ } .editor-wrapper { - flex-basis: 600px; + /* + This is carefully balanced-- the minimum width at which the GUI will be displayed is 1024px. + At that size, the stage pane is 408px wide, with $space of padding to each side. + However, we must also add the border width to the stage pane. All-in-all, the stage pane's final width is + 408px + ($space + $stage-standard-border-width * 2) (one border & padding per left/right side). + + @todo This is in place to prevent "doubling up" of horizontal scrollbars in narrow windows, but there are likely + much better ways to solve that (e.g. undo #2124, remove this flex-basis entirely). However, they run their own + risks of breaking things, so let's just leave this as-is for the time being. + */ + flex-basis: calc(1024px - 408px - (($space + $stage-standard-border-width) * 2)); flex-grow: 1; flex-shrink: 0; position: relative; @@ -197,21 +207,9 @@ /* pad entire wrapper to the left and right; allow children to fill width */ padding-left: $space; padding-right: $space; -} - -.stage-and-target-wrapper.large { - /* Fix the max width to max large stage size (defined in layout_constants.js) + gutter size */ - max-width: calc(480px + calc($space * 2)); -} -.stage-and-target-wrapper.large-constrained { - /* Fix the max width to max largeConstrained stage size (defined in layout_constants.js) + gutter size */ - max-width: calc(408px + calc($space * 2)); -} - -.stage-and-target-wrapper.small { - /* Fix the max width to max small stage size (defined in layout_constants.js) + gutter size */ - max-width: calc(240px + calc($space * 2)); + /* this will only ever be as wide as the stage */ + flex-basis: 0; } .target-wrapper { @@ -309,6 +307,7 @@ $fade-out-distance: 15px; z-index: $z-index-alerts; position: absolute; margin-top: 53px; + pointer-events: none; } /* diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx index 9846eed..d315c52 100644 --- a/src/components/gui/gui.jsx +++ b/src/components/gui/gui.jsx @@ -89,6 +89,7 @@ const GUIComponent = props => { loading, logo, renderLogin, + onClickAbout, onClickAccountNav, onCloseAccountNav, onLogOut, @@ -105,6 +106,7 @@ const GUIComponent = props => { onRequestCloseTelemetryModal, onSeeCommunity, onShare, + onShowPrivacyPolicy, onTelemetryModalCancel, onTelemetryModalOptIn, onTelemetryModalOptOut, @@ -162,6 +164,7 @@ const GUIComponent = props => { onOptIn={onTelemetryModalOptIn} onOptOut={onTelemetryModalOptOut} onRequestClose={onRequestCloseTelemetryModal} + onShowPrivacyPolicy={onShowPrivacyPolicy} /> ) : null} {loading ? ( @@ -218,6 +221,7 @@ const GUIComponent = props => { logo={logo} renderLogin={renderLogin} showComingSoon={showComingSoon} + onClickAbout={onClickAbout} onClickAccountNav={onClickAccountNav} onClickLogo={onClickLogo} onCloseAccountNav={onCloseAccountNav} @@ -332,6 +336,7 @@ const GUIComponent = props => { \ No newline at end of file diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css index aa893a0..78c639c 100644 --- a/src/components/menu-bar/menu-bar.css +++ b/src/components/menu-bar/menu-bar.css @@ -218,3 +218,9 @@ .mystuff > a { background-image: url("/images/mystuff.png"); } + +.about-icon { + height: 1.25rem; + margin: 0.5rem; + vertical-align: middle; +} diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx index 485af20..a0116de 100644 --- a/src/components/menu-bar/menu-bar.jsx +++ b/src/components/menu-bar/menu-bar.jsx @@ -70,6 +70,7 @@ import profileIcon from './icon--profile.png'; import remixIcon from './icon--remix.svg'; import dropdownCaret from './dropdown-caret.svg'; import languageIcon from '../language-selector/language-icon.svg'; +import aboutIcon from './icon--about.svg'; import scratchLogo from './scratch-logo.svg'; @@ -142,6 +143,19 @@ MenuItemTooltip.propTypes = { isRtl: PropTypes.bool }; +const AboutButton = props => ( +