pxt-core 7.5.4 → 7.5.5

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

@@ -0,0 +1,186 @@
+import * as React from "react";
+import { Button } from "../controls/Button";
+import { EditorToggle } from "../controls/EditorToggle";
+import { Input } from "../controls/Input";
+import { Textarea } from "../controls/Textarea";
+
+import { ShareData } from "./Share";
+import { GifInfo } from "./GifInfo";
+import { SocialButton } from "./SocialButton";
+
+export interface ShareInfoProps {
+    projectName: string;
+    description?: string;
+    screenshotUri?: string;
+
+    screenshotAsync?: () => Promise<string>;
+    gifRecordAsync?: () => Promise<void>;
+    gifRenderAsync?: () => Promise<string | void>;
+    gifAddFrame?: (dataUri: ImageData, delay?: number) => boolean;
+    publishAsync: (name: string, screenshotUri?: string) => Promise<ShareData>;
+    registerSimulatorMsgHandler?: (handler: (msg: any) => void) => void;
+    unregisterSimulatorMsgHandler?: () => void;
+}
+
+export const ShareInfo = (props: ShareInfoProps) => {
+    const { projectName, description, screenshotUri, screenshotAsync, gifRecordAsync, gifRenderAsync, gifAddFrame,
+        publishAsync, registerSimulatorMsgHandler, unregisterSimulatorMsgHandler } = props;
+    const [ name, setName ] = React.useState(projectName);
+    const [ thumbnailUri, setThumbnailUri ] = React.useState(screenshotUri);
+    const [ shareState, setShareState ] = React.useState<"share" | "gifrecord" | "publish">("share");
+    const [ shareData, setShareData ] = React.useState<ShareData>();
+    const [ embedState, setEmbedState ] = React.useState<"none" | "code" | "editor" | "simulator">("none");
+    const [ showQRCode, setShowQRCode ] = React.useState(false);
+
+    const showSimulator = !!screenshotAsync || !!gifRecordAsync;
+
+    React.useEffect(() => {
+        setThumbnailUri(screenshotUri)
+    }, [screenshotUri])
+
+    const exitGifRecord = () => {
+        setShareState("share");
+    }
+
+    const applyGifChange = (uri: string) => {
+        setThumbnailUri(uri);
+        exitGifRecord();
+    }
+
+    const handlePublishClick = async () => {
+        let publishedShareData = await publishAsync(name, thumbnailUri);
+        setShareData(publishedShareData);
+        if (!publishedShareData?.error) setShareState("publish");
+    }
+
+    const handleCopyClick = () => {
+        navigator.clipboard.writeText(shareData.url);
+    }
+
+    const handleEmbedClick = () => {
+        if (embedState === "none") {
+            setShowQRCode(false);
+            setEmbedState("code");
+        } else {
+            setEmbedState("none");
+        }
+    }
+
+    const handleQRCodeClick = () => {
+        pxt.tickEvent('share.qrtoggle');
+        if (!showQRCode) {
+            setEmbedState("none");
+            setShowQRCode(true);
+        } else {
+            setShowQRCode(false);
+        }
+    }
+
+
+    const embedOptions = [{
+        name: "code",
+        label: lf("Code"),
+        title: lf("Code"),
+        focusable: true,
+        onClick: () => setEmbedState("code")
+    },
+    {
+        name: "editor",
+        label: lf("Editor"),
+        title: lf("Editor"),
+        focusable: true,
+        onClick: () => setEmbedState("editor")
+    },
+    {
+        name: "simulator",
+        label: lf("Simulator"),
+        title: lf("Simulator"),
+        focusable: true,
+        onClick: () => setEmbedState("simulator")
+    }];
+
+    return <>
+        <div className="project-share-info">
+            {(shareState === "share" || shareState === "publish") && <>
+                {showSimulator && <h2>{lf("About your project")}</h2>}
+                <Input label={lf("Project Name")}
+                    initialValue={name}
+                    placeholder={lf("Name your project")}
+                    readOnly={shareState === "publish"}
+                    onChange={setName} />
+                <Textarea label={lf("Description")}
+                    initialValue={description}
+                    placeholder={lf("Tell others about your game")}
+                    readOnly={shareState === "publish"}
+                    rows={5} />
+                {shareState === "share" && <>
+                    {showSimulator && <div className="project-share-thumbnail">
+                        {thumbnailUri
+                            ? <img src={thumbnailUri} />
+                            : <div className="project-thumbnail-placeholder" />
+                        }
+                        <Button title={lf("Update project thumbnail")}
+                            label={lf("Update project thumbnail")}
+                            onClick={() => setShareState("gifrecord")} />
+                    </div>}
+                    <div>{lf("By publishing you agree that you are allowed to share this game.")}</div>
+                    {shareData?.error && <div className="project-share-error">
+                        {(shareData.error.statusCode === 413
+                            && pxt.appTarget?.cloud?.cloudProviders?.github)
+                            ? lf("Oops! Your project is too big. You can create a GitHub repository to share it.")
+                            : lf("Oops! There was an error. Please ensure you are connected to the Internet and try again.")}
+                    </div>}
+                    <Button className="primary"
+                        title={lf("Publish to share")}
+                        label={lf("Publish to share")}
+                        onClick={handlePublishClick} />
+                </>}
+                {shareState === "publish" && <div className="project-share-actions">
+                    <Button className="teal"
+                        title={lf("Copy link")}
+                        label={lf("Copy link")}
+                        leftIcon="fas fa-link"
+                        onClick={handleCopyClick} />
+                    <Button className="share-button"
+                        title={lf("Show QR code")}
+                        leftIcon="fas fa-qrcode"
+                        onClick={handleQRCodeClick} />
+                    <Button className="share-button"
+                        title={lf("Show embed code")}
+                        leftIcon="fas fa-code"
+                        onClick={handleEmbedClick} />
+                    <SocialButton className="share-button"
+                        url={shareData?.url}
+                        type='facebook'
+                        heading={lf("Share on Facebook")} />
+                    <SocialButton className="share-button"
+                        url={shareData?.url}
+                        type='twitter'
+                        heading={lf("Share on Twitter")} />
+                </div>}
+                {embedState !== "none" && <div className="project-embed">
+                    <EditorToggle id="project-embed-toggle"
+                        className="slim tablet-compact"
+                        items={embedOptions}
+                        selected={embedOptions.findIndex(i => i.name === embedState)} />
+                    <Textarea readOnly={true}
+                        rows={5}
+                        initialValue={shareData?.embed[embedState]} />
+                </div>}
+                {showQRCode && <div className="project-qrcode">
+                    <img src={shareData?.qr} />
+                </div>}
+            </>}
+            {shareState === "gifrecord" && <GifInfo
+                initialUri={thumbnailUri}
+                onApply={applyGifChange}
+                onCancel={exitGifRecord}
+                screenshotAsync={screenshotAsync}
+                gifRecordAsync={gifRecordAsync}
+                gifRenderAsync={gifRenderAsync}
+                gifAddFrame={gifAddFrame}
+                registerSimulatorMsgHandler={registerSimulatorMsgHandler}
+                unregisterSimulatorMsgHandler={unregisterSimulatorMsgHandler} />}
+        </div>
+    </>
+}

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { Button } from "../controls/Button";
+
+interface SocialButtonProps {
+    className?: string;
+    url?: string;
+    type?: "facebook" | "twitter" | "discourse";
+    heading?: string;
+}
+
+export const SocialButton = (props: SocialButtonProps) => {
+    const { className, url, type, heading } = props;
+
+    const handleClick = () => {
+        const socialOptions = pxt.appTarget.appTheme.socialOptions;
+        let socialUrl = '';
+        switch (type) {
+            case "facebook": {
+                socialUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
+                break;
+            }
+            case "twitter": {
+                let twitterText = lf("Check out what I made!");
+                if (socialOptions.twitterHandle && socialOptions.orgTwitterHandle) {
+                    twitterText = lf("Check out what I made with @{0} and @{1}!", socialOptions.twitterHandle, socialOptions.orgTwitterHandle);
+                } else if (socialOptions.twitterHandle) {
+                    twitterText = lf("Check out what I made with @{0}!", socialOptions.twitterHandle);
+                } else if (socialOptions.orgTwitterHandle) {
+                    twitterText = lf("Check out what I made with @{0}!", socialOptions.orgTwitterHandle);
+                }
+                socialUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}` +
+                    `&text=${encodeURIComponent(twitterText)}` +
+                    (socialOptions.hashtags ? `&hashtags=${encodeURIComponent(socialOptions.hashtags)}` : '') +
+                    (socialOptions.related ? `&related=${encodeURIComponent(socialOptions.related)}` : '');
+                break;
+            }
+            case "discourse": {
+                // https://meta.discourse.org/t/compose-a-new-pre-filled-topic-via-url/28074
+                socialUrl = `${socialOptions.discourse || "https://forum.makecode.com/"}new-topic?title=${encodeURIComponent(url)}`;
+                if (socialOptions.discourseCategory)
+                socialUrl += `&category=${encodeURIComponent(socialOptions.discourseCategory)}`;
+                break;
+            }
+        }
+        pxt.BrowserUtils.popupWindow(socialUrl, heading, 600, 600);
+    }
+
+    return <Button className={className}
+        ariaLabel={type}
+        title={type}
+        leftIcon={`icon ${type}`}
+        onClick={handleClick} />
+}

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

@@ -1,3 +1,7 @@
+.common-editor-toggle-outer {
+    position: relative;
+}
+
 .common-editor-toggle {
     position: relative;
     border-radius: 0.2rem;
@@ -126,6 +130,40 @@
     }
 }
 
+/*****************************************************
+ *                Accessibility Menu                 *
+ ****************************************************/
+
+.common-toggle-accessibility {
+    position: absolute;
+    z-index: 2;
+    width: 0px;
+    height: 0px;
+    left: 0;
+    background: white;
+
+    .common-button {
+        width: 0px;
+        height: 0px;
+        min-height: 0px;
+
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    .common-button:focus {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.common-toggle-accessibility:focus-within {
+    width: 100%;
+    height: 100%;
+}
+
 
 /*****************************************************
  *                    Tablet View                    *

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

@@ -1,3 +1,5 @@
+
+
 .common-modal-container {
     position: fixed;
     display: flex;
@@ -7,12 +9,12 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--modal-overlay-color);
+    background-color: @modalOverlayColor;
     z-index: @modalDimmerZIndex;
 }
 
 .common-modal-container.fullscreen {
-    z-index: var(--fullscreen-modal-zindex)
+    z-index: @modalFullscreenZIndex;
 }
 
 .common-modal {
@@ -44,7 +46,7 @@
 }
 
 .common-modal-body {
-    background-color: @modalBodyBackgroundColor;
+    background-color: @pageBackground;
     min-height: 4rem;
     padding: 1.25rem 1.5rem;
 }
@@ -77,7 +79,7 @@
 }
 
 .fullscreen > .common-modal > .common-modal-header {
-    background-color: var(--primary-color);
+    background-color: @primaryColor;
     color: white;
     margin-bottom: 0;
 
@@ -99,7 +101,7 @@
 
 .fullscreen > .common-modal > .common-modal-body {
     flex-grow: 1;
-    background-color: var(--body-background-color);
+    background-color: @homeScreenBackground;
     padding: 1rem;
     max-height: unset;
 }

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

@@ -0,0 +1,81 @@
+/****************************************************
+ *                Textarea                          *
+ ****************************************************/
+
+.common-textarea-group {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    border-radius: 2px;
+    border: 1px solid @textareaBorderColor;
+    background: @textareaBackgroundColor;
+}
+
+.common-textarea-group:focus::after,
+.common-textarea-group:focus-within::after {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    border: 2px solid @textareaBorderColorFocus;
+    border-radius: 2px;
+    pointer-events: none;
+}
+
+.common-textarea {
+    width: 100%;
+    min-width: 0;
+    padding: 0.5rem;
+    color: @textareaTextColor;
+    border: none;
+    outline: 0;
+    background: none transparent;
+    text-overflow: ellipsis;
+    resize: none;
+
+    &.resize-both { resize: both; }
+    &.resize-horizontal { resize: horizontal; }
+    &.resize-vertical { resize: vertical; }
+}
+
+
+/****************************************************
+ *               Textarea Label                     *
+ ****************************************************/
+
+.common-textarea-label {
+    display: block;
+    font-size: 14px;
+    font-weight: 600;
+    padding: 0.3rem 0;
+    overflow-wrap: break-word;
+}
+
+/****************************************************
+ *                Disabled Textarea                 *
+ ****************************************************/
+
+.common-textarea-wrapper.disabled {
+    .common-textarea-group {
+        cursor: default;
+        border: 1px solid @textareaBackgroundColorDisabled;
+        background: @textareaBackgroundColorDisabled;
+    }
+}
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast {
+    .common-textarea {
+        color: @highContrastTextColor;
+        border-color: @highContrastTextColor;
+        background-color: @highContrastBackgroundColor;
+    }
+
+    .common-textarea-group:focus::after,
+    .common-textarea-group:focus-within::after {
+        border-color: @highContrastHighlightColor;
+    }
+
+}

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

@@ -45,7 +45,9 @@
 @modalHeaderBackgroundColor: @modalBodyBackgroundColor;
 @modalFooterBackgroundColor: #f9fafb;
 @modalSeparatorBorder: 1px solid rgba(34, 36, 38, .15);
+@modalOverlayColor: rgba(0, 0, 0, 0.5);
 @modalDimmerZIndex: 1000;
+@modalFullscreenZIndex: @modalDimmerZIndex;
 
 
 /****************************************************
@@ -74,6 +76,16 @@
 @inputButtonColor: rgb(0, 120, 212);
 @inputButtonColorHover: rgb(16, 110, 190);
 
+/****************************************************
+ *                  Textarea                        *
+ ****************************************************/
+
+ @textareaTextColor: @commonTextColor;
+ @textareaBorderColor: @commonBorderColor;
+ @textareaBorderColorFocus: rgb(0, 120, 212);
+ @textareaBackgroundColor: #ffffff;
+ @textareaBackgroundColorDisabled: @commonBackgroundDisabledColor;
+
 /****************************************************
  *              EditorToggle                        *
  ****************************************************/

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

@@ -1,4 +1,5 @@
 @import "profile/profile.less";
+@import "share/share.less";
 @import "controls/Button.less";
 @import "controls/Checkbox.less";
 @import "controls/EditorToggle.less";
@@ -7,6 +8,7 @@
 @import "controls/MenuDropdown.less";
 @import "controls/Modal.less";
 @import "controls/Spinner.less";
+@import "controls/Textarea.less";
 @import "./react-common-variables.less";
 
 @import "fontawesome-free/less/solid.less";

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

@@ -0,0 +1,116 @@
+.sharedialog.fullscreen.common-modal-container > .common-modal > .common-modal-body {
+    padding: 0;
+}
+
+.project-share {
+    display: flex;
+    height: 100%;
+}
+
+.project-share-simulator {
+    flex: 1;
+    height: 100%;
+    background-color: @simulatorBackground;
+
+    #shareLoanedSimulator {
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .simframe {
+        padding-bottom: 56.25%!important;
+    }
+}
+
+.project-share-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1;
+
+    > div {
+        margin-bottom: 1rem;
+        flex-shrink: 0;
+    }
+}
+
+.project-share-thumbnail {
+    display: flex;
+    flex-direction: column;
+
+    .project-thumbnail-placeholder,
+    img {
+        margin: 0.3rem 0;
+        width: 15rem;
+        height: 11.25rem;
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+}
+
+.fullscreen {
+    .project-share > div {
+        padding: 2rem;
+    }
+
+    .project-share-info {
+        flex: unset;
+        width: 28rem;
+    }
+}
+
+/////////////////////////////////////////
+//           Embed                     //
+/////////////////////////////////////////
+
+.project-share-actions {
+    display: flex;
+
+    .share-button {
+        width: 3rem;
+        padding: 1rem 0.75rem;
+
+        i {
+            margin: 0;
+        }
+    }
+}
+
+
+/////////////////////////////////////////
+//           Gif Recorder              //
+/////////////////////////////////////////
+
+.gif-recorder {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    bottom: 0;
+    left: calc(~'(100vw - 25rem)/2');
+    padding: 1rem;
+    transform: translateX(-50%);
+    background: @white;
+    border: @teal;
+    border-radius: 0.2rem;
+    font-family: @segoeUIFont;
+}
+
+.gif-recorder-label,
+.thumbnail-label {
+    margin-bottom: 0.5rem;
+    font-family: @segoeUIFont;
+}
+
+.gif-recorder-actions {
+    display: flex;
+}
+
+.thumbnail-image,
+.thumbnail-placeholder {
+    display: flex;
+    background-color: rgba(0, 0, 0, 0.05);
+    width: 24.5rem;
+    height: 18.375rem;
+}

package/theme/image-editor/imageEditor.less

@@ -108,6 +108,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    position: relative;
 }
 
 .image-editor-header-right {

package/webapp/public/run.html

@@ -114,6 +114,7 @@
         var deps = /deps(?:[:=])([^&?]+)/i.exec(window.location.href);
         var prebuiltSimJs = /prebuilt(?:[:=])1/i.test(window.location.href);
         var single = !!/single(?:[:=])1/i.test(window.location.href);
+        var server = !!/server(?:[:=])1/i.test(window.location.href);
 
         var codeFromSrc = /code(?:[:=])([^&?]+)/i.exec(window.location.href);
         var codeFromData = undefined;
@@ -129,7 +130,7 @@
         }
         var code = codeFromData || (codeFromSrc ? codeFromSrc[1] : undefined);
 
-        if (!id && !code && !debugSim) {
+        if (!id && !code && !debugSim && !server) {
             console.error("missing id or code");
             loading.textContent = 'Oops, wrong arguments...';
             return;
@@ -159,10 +160,35 @@
         initAppCache();
 
         window.addEventListener('message', msg => {
-            if (typeof window !== 'undefined' && window.parent !== window
-                    && msg.data && msg.data.type == "messagepacket") {
-                // propagate message packets to parent frames
-                window.parent.postMessage(msg.data, "*");
+            var data = msg.data;
+            if (typeof window !== 'undefined' && window.parent !== window && data) {
+                if (data.type == "messagepacket") {
+                    // propagate message packets to parent frames
+                    window.parent.postMessage(msg.data, "*");
+                }
+                else if (server && data.type === "simulateproject") {
+                    var files = typeof data.project === "string" ? JSON.parse(data.project) : data.project;
+                    ksRunnerReady(() => {
+                        const deps = JSON.parse(files["pxt.json"]).dependencies
+                        prebuiltCodePromise.then(builtSimJs => {
+                            var options = {
+                                code: files["main.ts"],
+                                assets: JSON.stringify(files),
+                                dependencies: Object.keys(deps).map(v => v + "=" + deps[v]),
+                                highContrast: highContrast,
+                                light: light,
+                                fullScreen: fullScreen,
+                                builtJsInfo: builtSimJs,
+                                single: single
+                            };
+                            console.log('simulating project')
+                            pxt.runner.simulateAsync(sims, options).then(function() {
+                                console.log('simulator started for project...')
+                                $(loading).remove();
+                            })
+                        });
+                    })
+                }
             }
         });
 
@@ -183,6 +209,7 @@
             var theme = pxt.appTarget.appTheme;
             document.title = theme.title;
             if (footer) pxt.runner.initFooter(document.getElementById('footer'), id);
+            if (server) return;
             if (hex) {
                 console.log('compiling script to hex')
                 pxt.runner.generateHexFileAsync(options).then(function(hex) {

package/webapp/public/skillmap.html

@@ -7,7 +7,7 @@
     <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-skillmap.css">
-  <link href="/blb/skillmap/css/main.e0620cee.chunk.css" rel="stylesheet"></head>
+  <link href="/blb/skillmap/css/main.73b22966.chunk.css" rel="stylesheet"></head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
@@ -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.f7cdfd75.chunk.js"></script><script src="/blb/skillmap/js/main.f6866fc6.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.3e47a285.chunk.js"></script><script src="/blb/skillmap/js/main.2485091f.chunk.js"></script></body>
 </html>