pxt-core 8.4.1 → 8.4.3

package/react-common/components/share/Share.tsx

@@ -21,13 +21,15 @@ export interface ShareProps {
     screenshotUri?: string;
     isLoggedIn?: boolean;
     hasProjectBeenPersistentShared?: boolean;
+    anonymousShareByDefault?: boolean;
+    setAnonymousSharePreference?: (anonymousByDefault: boolean) => void;
 
     simRecorder: SimRecorder;
     publishAsync: (name: string, screenshotUri?: string, forceAnonymous?: boolean) => Promise<ShareData>;
 }
 
 export const Share = (props: ShareProps) => {
-    const { projectName, screenshotUri, isLoggedIn, simRecorder, publishAsync, hasProjectBeenPersistentShared } = props;
+    const { projectName, screenshotUri, isLoggedIn, simRecorder, publishAsync, hasProjectBeenPersistentShared, anonymousShareByDefault, setAnonymousSharePreference } = props;
 
     return <div className="project-share">
         <ShareInfo projectName={projectName}
@@ -35,6 +37,8 @@ export const Share = (props: ShareProps) => {
             screenshotUri={screenshotUri}
             simRecorder={simRecorder}
             publishAsync={publishAsync}
-            hasProjectBeenPersistentShared={hasProjectBeenPersistentShared} />
+            hasProjectBeenPersistentShared={hasProjectBeenPersistentShared}
+            anonymousShareByDefault={anonymousShareByDefault}
+            setAnonymousSharePreference={setAnonymousSharePreference} />
     </div>
 }

package/react-common/components/share/ShareInfo.tsx

@@ -19,10 +19,13 @@ export interface ShareInfoProps {
     hasProjectBeenPersistentShared?: boolean;
     simRecorder: SimRecorder;
     publishAsync: (name: string, screenshotUri?: string, forceAnonymous?: boolean) => Promise<ShareData>;
+
+    anonymousShareByDefault?: boolean;
+    setAnonymousSharePreference?: (anonymousByDefault: boolean) => void;
 }
 
 export const ShareInfo = (props: ShareInfoProps) => {
-    const { projectName, description, screenshotUri, isLoggedIn, simRecorder, publishAsync, hasProjectBeenPersistentShared } = props;
+    const { projectName, description, screenshotUri, isLoggedIn, simRecorder, publishAsync, hasProjectBeenPersistentShared, anonymousShareByDefault, setAnonymousSharePreference } = props;
     const [ name, setName ] = React.useState(projectName);
     const [ thumbnailUri, setThumbnailUri ] = React.useState(screenshotUri);
     const [ shareState, setShareState ] = React.useState<"share" | "gifrecord" | "publish" | "publishing">("share");
@@ -30,7 +33,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
     const [ embedState, setEmbedState ] = React.useState<"none" | "code" | "editor" | "simulator">("none");
     const [ showQRCode, setShowQRCode ] = React.useState(false);
     const [ copySuccessful, setCopySuccessful ] = React.useState(false);
-    const [ isAnonymous, setIsAnonymous ] = React.useState(!isLoggedIn);
+    const [ isAnonymous, setIsAnonymous ] = React.useState(!isLoggedIn || anonymousShareByDefault);
 
     const showSimulator = !!simRecorder;
     const showDescription = shareState !== "publish";
@@ -141,6 +144,12 @@ export const ShareInfo = (props: ShareInfoProps) => {
         if (ref) inputRef = ref;
     }
 
+    const handleAnonymousShareClick = (newValue: boolean) => {
+        pxt.tickEvent("share.anonymousCheckbox")
+        setIsAnonymous(!newValue);
+        if (setAnonymousSharePreference) setAnonymousSharePreference(!newValue);
+    }
+
     const prePublish = shareState === "share" || shareState === "publishing";
 
     const inputTitle = prePublish ? lf("Project Title") : lf("Project Link")
@@ -180,7 +189,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
                             id="persistent-share-checkbox"
                             label={lf("Update existing share link for this project")}
                             isChecked={!isAnonymous}
-                            onChange={val => setIsAnonymous(!val)}
+                            onChange={handleAnonymousShareClick}
                             />}
                         </>
                     }

package/react-common/styles/controls/Button.less

@@ -137,6 +137,15 @@
     border: @buttonBackgroundColorDisabled;
 }
 
+.common-button.menu-button.disabled {
+    opacity: 0.8;
+}
+
+.common-button.menu-button.disabled:hover,
+.common-button.menu-button.disabled:active {
+    background: none;
+}
+
 /****************************************************
  *                      Focus                       *
  ****************************************************/

package/react-common/styles/react-common-authcode-core.less

@@ -1,5 +1,5 @@
 /**
- * This file is the same as react-common-skillmap.less except it doesn't import any
+ * This file is the same as react-common-authcode.less except it doesn't import any
  * variables from the target. This is used for pxt-core's css build
  */
 

package/react-common/styles/react-common-authcode.less

@@ -1,5 +1,5 @@
 /**
- * Used for building react-common-skillmap.css
+ * Used for building react-common-authcode.css
  */
 
 // Import variables from pxt-core

package/react-common/styles/react-common-multiplayer-core.less

@@ -0,0 +1,10 @@
+/**
+ * This file is the same as react-common-multiplayer.less except it doesn't import any
+ * variables from the target. This is used for pxt-core's css build
+ */
+
+// Import variables from pxt-core
+@import "themes/default/globals/site.variables";
+@import "themes/pxt/globals/site.variables";
+
+@import "react-common.less";

package/react-common/styles/react-common-multiplayer.less

@@ -0,0 +1,12 @@
+/**
+ * Used for building react-common-multiplayer.css
+ */
+
+// Import variables from pxt-core
+@import "themes/default/globals/site.variables";
+@import "themes/pxt/globals/site.variables";
+
+// Import the variables from the target
+@import "site/globals/site.variables";
+
+@import "react-common.less";

package/theme/highcontrast.less

@@ -838,6 +838,14 @@
         background-color: @HCbackground;
         color: @HCtextColor;
 
+        .hint-title {
+            margin: 0;
+            > span {
+                background-color: @HCbackground;
+                color: @HCtextColor;
+            }
+        }
+
         &:before {
             border-right-color: @HCtextColor;
         }
@@ -874,6 +882,12 @@
         }
     }
 
+    &.tabTutorial details {
+        background-color: @HCbackground !important;
+        border: 2px solid @HCtextColor !important;
+        color: @HCtextColor !important;
+    }
+
     .ui.label {
         background-color: @HCbackground !important;
         border: 2px solid @HCtextColor !important;

package/theme/music-editor/EditControls.less

@@ -0,0 +1,22 @@
+.music-editor-edit-controls {
+    display: flex;
+    flex-direction: row;
+    height: 2rem;
+    background-color: @music-editor-header-color;
+    justify-content: end;
+
+    .common-button.green {
+        padding: 0 2rem;
+        height: 100%;
+        margin: 0;
+        border-radius: 0;
+    }
+
+    button.menu-button i.fas, button.menu-button i.xicon {
+        font-size: 18px;
+    }
+
+    .common-input-group {
+        border-radius: 0;
+    }
+}

package/theme/music-editor/MusicEditor.less

@@ -0,0 +1,25 @@
+@import "EditControls";
+@import "Note";
+@import "NoteGroup";
+@import "PlaybackControls";
+@import "ScrollableWorkspace";
+@import "Staff";
+@import "Track";
+@import "TrackSelector";
+@import "Workspace";
+
+@music-editor-background-color: #fff;
+@music-editor-header-color: #e30fc0;
+@music-editor-header-border-color: #c10da3;
+
+.music-editor {
+    background: @music-editor-background-color;
+}
+
+.music-asset-editor {
+    .gallery-editor-header {
+        background-color: @music-editor-header-color;
+        border: 2px solid @music-editor-header-border-color;
+        border-bottom: none;
+    }
+}

package/theme/music-editor/Note.less

@@ -0,0 +1,16 @@
+.music-staff-note {
+    image {
+        image-rendering: optimizeSpeed;
+        image-rendering: -moz-crisp-edges;
+        image-rendering: -webkit-optimize-contrast;
+        image-rendering: optimize-contrast;
+        image-rendering: pixelated;
+        -ms-interpolation-mode: nearest-neighbor;
+    }
+
+    rect {
+        fill: #03adfc;
+        stroke: darken(#03adfc, 20%);
+        stroke-width: 3;
+    }
+}

package/theme/music-editor/NoteGroup.less

@@ -0,0 +1,7 @@
+.music-staff-note-group.music-note-playing {
+    rect {
+        fill: #47c965;
+        stroke: darken(#47c965, 20%);
+        stroke-width: 3;
+    }
+}

package/theme/music-editor/PlaybackControls.less

@@ -0,0 +1,55 @@
+.music-playback-controls {
+    padding: 0.5rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .common-input-wrapper {
+        display: flex;
+        flex-direction: row;
+
+        .common-input-label {
+            padding-right: 0.5rem;
+            font-size: 18px;
+            font-weight: 700;
+            user-select: none;
+        }
+
+        .common-input-group {
+            max-width: 3rem;
+        }
+    }
+
+    & > .common-input-wrapper {
+        margin-right: 0.5rem;
+    }
+}
+
+.music-playback-buttons {
+    margin-right: 0.5rem;
+}
+
+.music-playback-label {
+    padding-right: 0.5rem;
+    font-size: 18px;
+    font-weight: 700;
+    user-select: none;
+}
+
+.music-playback-measures {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-grow: 1;
+    justify-content: end;
+
+    .common-button.menu-button {
+        color: black;
+        height: 2rem;
+        padding: 0.1rem;
+
+        i.fas {
+            margin: 0;
+        }
+    }
+}

package/theme/music-editor/ScrollableWorkspace.less

@@ -0,0 +1,3 @@
+.music-scrollable-workspace {
+    overflow-x: scroll;
+}

package/theme/music-editor/Staff.less

@@ -0,0 +1,31 @@
+.music-staff-row {
+    stroke-width: 3;
+    stroke: black;
+}
+
+.music-staff-beat {
+    stroke-width: 2;
+    stroke: #666666;
+    stroke-dasharray: 2;
+}
+
+.music-staff-beat.measure-start {
+    stroke: orange;
+}
+
+.music-staff-background {
+    fill: #c9e4e2;
+}
+
+.music-staff text {
+    user-select: none;
+}
+
+.music-playback-line {
+    stroke-width: 3;
+    stroke: white;
+}
+
+.music-playback-head {
+    transition: translate 0.06ms linear;
+}

package/theme/music-editor/TrackSelector.less

@@ -0,0 +1,48 @@
+.music-track-selector {
+    padding: 0.5rem;
+    display: flex;
+    flex-direction: row;
+
+    .common-button.common-dropdown-button {
+        border: 3px solid #000;
+        min-width: 6rem;
+        height: 100%;
+    }
+
+    .music-track-grid {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        align-items: center;
+    }
+
+    .music-track-grid-label {
+        padding-right: 0.5rem;
+        font-size: 18px;
+        font-weight: 700;
+        user-select: none;
+    }
+}
+
+.common-button.music-track-button {
+    border: 3px solid #000;
+    padding: 0.1rem;
+    border-radius: 0;
+
+    img {
+        image-rendering: optimizeSpeed;
+        image-rendering: -moz-crisp-edges;
+        image-rendering: -webkit-optimize-contrast;
+        image-rendering: optimize-contrast;
+        image-rendering: pixelated;
+        -ms-interpolation-mode: nearest-neighbor;
+
+        width: 2rem;
+        height: 2rem;
+    }
+}
+
+.common-button.music-track-button.selected {
+    border: 3px solid orange;
+}

package/theme/music-editor/Workspace.less

@@ -0,0 +1,3 @@
+.music-workspace {
+    height: 20rem;
+}

package/theme/pxt.less

@@ -38,6 +38,7 @@
 @import 'webusb';
 
 @import 'image-editor/imageEditor';
+@import 'music-editor/MusicEditor';
 @import "soundeffecteditor";
 
 @import "react-common";

package/theme/tutorial-sidebar.less

@@ -11,6 +11,8 @@
 
 @tutorialLinkColor: #0064BF;
 @tutorialLinkHoverColor: #003C94;
+@tutorialHintForegroundColor: #1A6771;
+@tutorialHintBackgroundColor: #CEFFF5;
 
 @tutorialTabletButtonColor: #f3f3f3;
 @tutorialTabletSimulatorButtonColor: rgba(0, 0, 0, 0.05);
@@ -278,6 +280,18 @@
         bottom: 5rem;
         left: 3rem;
         max-width: 50%;
+        border-color: @tutorialHintBackgroundColor;
+
+        .hint-title {
+            margin-top: -.75rem;
+            > span {
+                font-weight: 700;
+                background-color: @tutorialHintBackgroundColor;
+                color: @tutorialHintForegroundColor;
+                padding: 0.25rem 0.75rem;
+                border-radius: 0.5rem;
+            }
+        }
     }
 
     .tutorial-callout:before {
@@ -522,13 +536,15 @@
 /*********************************
         Accordion Hints (details)
 *********************************/
-
 .tabTutorial details {
     padding: .5rem;
     margin-bottom: 1rem;
-    color: #028b9b;
-    background-color: #b1e3da;
+    color: @tutorialHintForegroundColor;
+    background-color: @tutorialHintBackgroundColor;
     border-radius: .5rem;
+    summary {
+        cursor: pointer;
+    }
 }
 
 

package/theme/tutorial.less

@@ -405,8 +405,8 @@ code.lang-filterblocks {
     transform: rotateZ(-135deg);
 }
 
-.tutorialhint > div,
-.tutorial-callout > div {
+.tutorialhint > .hint-content,
+.tutorial-callout > .hint-content {
     max-height: 60vh;
     overflow: auto;
     padding-right: 2rem;

package/webapp/public/multiplayer.html

@@ -1 +1 @@
-<!doctype html><html lang="@locale@"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>MakeCode Arcade Multiplayer</title><link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/blb/semantic.css"><link rel="stylesheet" href="/blb/icons.css"><link rel="stylesheet" href="/blb/react-common-multiplayer.css"><script defer="defer" src="/blb/multiplayer/js/main.eec6d6c2.js"></script><link href="/blb/multiplayer/css/main.b0b14e9a.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><script type="text/javascript" src="/blb/target.js"></script><script type="text/javascript" src="/blb/pxtlib.js"></script><div id="root"></div><script>var pxtConfig=null</script></body></html>
+<!doctype html><html lang="@locale@"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>MakeCode Arcade Multiplayer</title><link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/blb/semantic.css"><link rel="stylesheet" href="/blb/icons.css"><link rel="stylesheet" href="/blb/react-common-multiplayer.css"><script defer="defer" src="/blb/multiplayer/js/main.f3b8f930.js"></script><link href="/blb/multiplayer/css/main.2dd69ed8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><script type="text/javascript" src="/blb/target.js"></script><script type="text/javascript" src="/blb/pxtlib.js"></script><div id="root"></div><script>var pxtConfig=null</script></body></html>

package/webapp/public/skillmap.html

@@ -28,5 +28,5 @@
     <!-- end usabilla live embed code -->
 
     <!-- @include thin-footer.html -->
-  <script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],p=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this.webpackJsonpskillsmap=this.webpackJsonpskillsmap||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var p=0;p<i.length;p++)r(i[p]);var f=a;t()}([])</script><script src="/blb/skillmap/js/2.d9c1cec5.chunk.js"></script><script src="/blb/skillmap/js/main.6fa0eaff.chunk.js"></script></body>
+  <script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],p=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this.webpackJsonpskillsmap=this.webpackJsonpskillsmap||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var p=0;p<i.length;p++)r(i[p]);var f=a;t()}([])</script><script src="/blb/skillmap/js/2.d9c1cec5.chunk.js"></script><script src="/blb/skillmap/js/main.a6cf40e1.chunk.js"></script></body>
 </html>