pxt-arcade 1.13.12 → 1.13.13

package/built/sim.js

@@ -154,12 +154,14 @@ var pxsim;
 (function (pxsim) {
     let forcedUpdateLoop;
     let isFirstRunSafari = true;
+    let themeFromQueryParameter = false;
     window.addEventListener("DOMContentLoaded", () => {
         const searchParams = new URL(window.location.toString()).searchParams;
         const setThemeIfDefined = (themeType) => {
             const paramVal = searchParams.get(themeType);
             if (paramVal) {
-                setSimThemeColor(themeType, paramVal);
+                themeFromQueryParameter = true;
+                pxsim.theme.setSimThemeColor(themeType, paramVal);
             }
         };
         setThemeIfDefined("background-color");
@@ -167,6 +169,11 @@ var pxsim;
         setThemeIfDefined("text-color");
         setThemeIfDefined("button-fill");
         setThemeIfDefined("dpad-fill");
+        const skin = searchParams.get("skin");
+        if (skin) {
+            themeFromQueryParameter = true;
+            pxsim.theme.applySkin(skin);
+        }
         if (!!searchParams.get("pointer-events"))
             registerPointerEvents();
         if (!!searchParams.get("hideSimButtons"))
@@ -174,6 +181,10 @@ var pxsim;
         if (!!searchParams.get("noExtraPadding"))
             noExtraPadding();
     });
+    if (hasNavigator()) {
+        // only XBOX webview looks at this, to get rid of cursor
+        navigator.gamepadInputEmulation = "gamepad";
+    }
     function hideSimButtons() {
         const gamePlayer = document.getElementsByClassName("game-player");
         if (gamePlayer && gamePlayer.length) {
@@ -237,33 +248,17 @@ var pxsim;
         canvas.addEventListener("pointerout", reporter);
         canvas.addEventListener("wheel", wheelReporter);
     }
-    function setSimThemeColor(part, color, elOverride) {
-        if (!part || (!(color == undefined || /^[0-9A-F]{6}$/i.test(color))))
-            return;
-        if (part != "background-color"
-            && part != "button-stroke"
-            && part != "text-color"
-            && part != "button-fill"
-            && part != "dpad-fill") {
-            return;
-        }
-        const propName = `--sim-${part}`;
-        const propColor = color ? `#${color}` : undefined;
-        const wrapper = elOverride || document.getElementById("wrap");
-        if (propColor) {
-            wrapper.style.setProperty(propName, propColor);
-        }
-        else {
-            wrapper.style.removeProperty(propName);
-        }
-    }
     /**
      * This function gets called each time the program restarts
      */
     pxsim.initCurrentRuntime = (msg) => {
         pxsim.runtime.board = new Board();
         pxsim.initGamepad();
-        board().setActivePlayer(msg.activePlayer);
+        const theme = pxsim.theme.parseTheme(msg.theme);
+        if (theme && !themeFromQueryParameter) {
+            pxsim.theme.applyTheme(theme);
+        }
+        board().setActivePlayer(msg.activePlayer, theme);
         if (!forcedUpdateLoop) {
             forcedUpdateLoop = true;
             // this is used to force screen update if game loop is stuck or not set up properly
@@ -375,11 +370,11 @@ var pxsim;
                 if (ev.data.type == "setactiveplayer") {
                     const b = board();
                     if (!(b.multiplayerState && b.multiplayerState.origin)) {
-                        b.setActivePlayer(ev.data.playerNumber);
+                        b.setActivePlayer(ev.data.playerNumber, theme);
                     }
                 }
                 else if (ev.data.type == "setsimthemecolor") {
-                    setSimThemeColor(ev.data.part, (_a = ev.data.color) === null || _a === void 0 ? void 0 : _a.replace("#", ""));
+                    pxsim.theme.setSimThemeColor(ev.data.part, (_a = ev.data.color) === null || _a === void 0 ? void 0 : _a.replace("#", ""));
                 }
             });
         }
@@ -464,29 +459,24 @@ var pxsim;
             throttleAnimation((cb) => (this.screenState.onChange = cb), () => this.gameplayer.draw(this.screenState));
             this.activePlayer = undefined;
         }
-        setActivePlayer(playerNumber) {
+        setActivePlayer(playerNumber, theme) {
             if (this.multiplayerState && this.multiplayerState.origin)
                 return;
-            // TODO: this is duplicated in pxt/multiplayer's ArcadeSimulator.tsx;
-            // we could dedup this by starting a set of 'named' themes in the future
-            // (e.g. player1, player2, hotrodflames, ...)
-            // [[backgroundColor, buttonStroke]]
             const playerThemes = [
-                [undefined, undefined],
-                ["ED3636", "8D2525"],
-                ["4E4EE9", "3333A1"],
-                ["FF9A14", "B0701A"],
-                ["4EB94E", "245D24"],
+                undefined,
+                "p1",
+                "p2",
+                "p3",
+                "p4",
             ];
             const newPlayerTheme = playerThemes[playerNumber || 0];
             if (!newPlayerTheme) {
                 // invalid playerNumber
                 return;
             }
-            const themeOverrideElement = document.querySelector(".game-player");
-            setSimThemeColor("background-color", newPlayerTheme[0], themeOverrideElement);
-            setSimThemeColor("button-stroke", newPlayerTheme[1], themeOverrideElement);
-            setSimThemeColor("dpad-fill", newPlayerTheme[1], themeOverrideElement);
+            if ((!theme || !Object.keys(theme).length) && !themeFromQueryParameter) {
+                pxsim.theme.applySkin(newPlayerTheme);
+            }
             this.activePlayer = playerNumber || undefined;
         }
         getDefaultPitchPin() {
@@ -571,26 +561,25 @@ var pxsim;
         }
         resize() { }
         async initAsync(msg) {
-            if (msg.options.mpRole) {
-                this.multiplayerState.origin = msg.options.mpRole;
-            }
-            this.setActivePlayer(msg.activePlayer);
             this.runOptions = msg;
             this.stats = document.getElementById("debug-stats");
             this.stats.className = "stats no-select";
             this.id = msg.id;
             indicateFocus(document.hasFocus());
             this.accelerometerState.attachEvents(document.body);
-            if (this.runOptions && this.runOptions.options) {
-                const mpRole = this.runOptions.options.mpRole;
-                if (mpRole) {
-                    this.multiplayerState.init(mpRole);
-                    if (mpRole === "client") {
-                        const wrapper = document.getElementById("wrap");
-                        wrapper && wrapper.classList.add("mp-client");
-                    }
-                }
-            }
+            const mpRole = this.runOptions
+                && this.runOptions.options
+                && this.runOptions.options.mpRole;
+            this.multiplayerState.init(mpRole);
+            if (mpRole === "client") {
+                const wrapper = document.getElementById("wrap");
+                wrapper && wrapper.classList.add("mp-client");
+            }
+            const theme = pxsim.theme.parseTheme(msg.theme);
+            if (theme && !themeFromQueryParameter) {
+                pxsim.theme.applyTheme(theme);
+            }
+            this.setActivePlayer(msg.activePlayer, theme);
             this.updateStats();
             let safariEnablePromise;
             if (isFirstRunSafari && !safariEnablePromise) {
@@ -700,10 +689,185 @@ function isSafari() {
     })(ButtonMethods = pxsim.ButtonMethods || (pxsim.ButtonMethods = {}));
 })(pxsim || (pxsim = {}));
 var pxsim;
+(function (pxsim) {
+    var theme;
+    (function (theme_1) {
+        function parseTheme(theme) {
+            if (!theme)
+                return undefined;
+            return (typeof theme == "string") ? { skin: theme } : theme;
+        }
+        theme_1.parseTheme = parseTheme;
+        function applyTheme(theme) {
+            const parsedTheme = parseTheme(theme);
+            if (parsedTheme.skin) {
+                applySkin(parsedTheme.skin.toLowerCase());
+            }
+            const setThemeIfDefined = (themeType) => {
+                const paramVal = parsedTheme[themeType];
+                if (paramVal) {
+                    setSimThemeColor(themeType, paramVal);
+                }
+            };
+            setThemeIfDefined("background-color");
+            setThemeIfDefined("button-stroke");
+            setThemeIfDefined("text-color");
+            setThemeIfDefined("button-fill");
+            setThemeIfDefined("dpad-fill");
+        }
+        theme_1.applyTheme = applyTheme;
+        function setSimThemeColor(part, color) {
+            if (!part || (!(color == undefined || /^(#|0x)?[0-9A-F]{6}$/i.test(color))))
+                return;
+            if (part != "background-color"
+                && part != "button-stroke"
+                && part != "text-color"
+                && part != "button-fill"
+                && part != "dpad-fill") {
+                return;
+            }
+            const propName = `--sim-${part}`;
+            const propColor = color ? `#${color.replace(/^(#|0x)/i, "")}` : undefined;
+            const wrapper = document.getElementById("wrap");
+            if (propColor) {
+                wrapper.style.setProperty(propName, propColor);
+            }
+            else {
+                wrapper.style.removeProperty(propName);
+            }
+        }
+        theme_1.setSimThemeColor = setSimThemeColor;
+        function applySkin(skin) {
+            switch (skin) {
+                case "zune": {
+                    zuneSkin();
+                    break;
+                }
+                case "p1":
+                case "red": {
+                    redSkin();
+                    break;
+                }
+                case "p2":
+                case "blue": {
+                    blueSkin();
+                    break;
+                }
+                case "p3":
+                case "orange": {
+                    orangeSkin();
+                    break;
+                }
+                case "p4":
+                case "green": {
+                    greenSkin();
+                    break;
+                }
+                case "brown": {
+                    brownSkin();
+                    break;
+                }
+                case "bubblegum": {
+                    bubblegumSkin();
+                    break;
+                }
+                case "purple": {
+                    purpleSkin();
+                    break;
+                }
+                case "microcode": {
+                    microcodeSkin();
+                    break;
+                }
+                default:
+                    break;
+            }
+        }
+        theme_1.applySkin = applySkin;
+        function zuneSkin() {
+            setSimThemeColor("background-color", "#564131");
+            setSimThemeColor("button-stroke", "#524F4E");
+            setSimThemeColor("text-color", "#E7E7E7");
+            const wrapper = document.getElementById("wrap");
+            if (wrapper) {
+                wrapper.classList.add("zune", "portrait-only");
+                /** SVG overriding a, b button positions: b on left, a on right
+                <svg class="game-button-svg" viewBox="0 0 40 40"=>"0 0 100 28">
+                    <circle class="button-b" cx="13"=>"18" cy="28"=>"12" />
+                    <text class="label-b no-select" x="13"=>"18" y="28"=>"12">B</text>
+                    <circle class="button-a" cx="28"=>"82" cy="12.5"=>"12"/>
+                    <text class="label-a no-select" x="28"=>"82" y="12.5"=>"12">A</text>
+                </svg>
+                // simplify viewBox
+                <svg class="game-joystick-svg" viewBox="1 0 40 40"=>"0 0 40 40"/>
+                 **/
+                const gameButtonSvg = document.querySelector(".game-button-svg");
+                gameButtonSvg.removeAttribute("width");
+                gameButtonSvg.removeAttribute("height");
+                gameButtonSvg.setAttribute("viewBox", "0 0 100 28");
+                const joystickSvg = document.querySelector(".game-joystick-svg");
+                joystickSvg.setAttribute("viewBox", "0 0 40 40");
+                const bButton = document.querySelector(".button-b");
+                const bLabel = document.querySelector(".label-b");
+                bButton.setAttribute("cx", "18");
+                bButton.setAttribute("cy", "12");
+                bLabel.setAttribute("x", "18");
+                bLabel.setAttribute("y", "12");
+                const aButton = document.querySelector(".button-a");
+                const aLabel = document.querySelector(".label-a");
+                aButton.setAttribute("cx", "82");
+                aButton.setAttribute("cy", "12");
+                aLabel.setAttribute("x", "82");
+                aLabel.setAttribute("y", "12");
+            }
+        }
+        function brownSkin() {
+            setSimThemeColor("background-color", "#8B4513");
+            setSimThemeColor("button-stroke", "#68320C");
+        }
+        function bubblegumSkin() {
+            setSimThemeColor("background-color", "#F7ABB9");
+            setSimThemeColor("button-stroke", "#71C1C9");
+            setSimThemeColor("button-fill", "#92F5FF");
+            setSimThemeColor("text-color", "#4E4E4E");
+            setSimThemeColor("dpad-fill", "#F7ABB9");
+            const msftLogo = document.querySelector(".game-player-msft");
+            if (msftLogo) {
+                msftLogo.classList.add("gray");
+            }
+        }
+        function redSkin() {
+            setSimThemeColor("background-color", "#ED3636");
+            setSimThemeColor("button-stroke", "#8D2525");
+        }
+        function blueSkin() {
+            setSimThemeColor("background-color", "#4E4EE9");
+            setSimThemeColor("button-stroke", "#3333A1");
+        }
+        function orangeSkin() {
+            setSimThemeColor("background-color", "#FF9A14");
+            setSimThemeColor("button-stroke", "#B0701A");
+        }
+        function greenSkin() {
+            setSimThemeColor("background-color", "#4EB94E");
+            setSimThemeColor("button-stroke", "#245D24");
+        }
+        function purpleSkin() {
+            setSimThemeColor("background-color", "#660fC7");
+            setSimThemeColor("button-stroke", "#4C0B95");
+        }
+        function microcodeSkin() {
+            setSimThemeColor("background-color", "#3F3F3F");
+            setSimThemeColor("button-stroke", "#212121");
+            setSimThemeColor("button-fill", "#2D2D2D");
+            setSimThemeColor("text-color", "#D9D9D9");
+        }
+    })(theme = pxsim.theme || (pxsim.theme = {}));
+})(pxsim || (pxsim = {}));
+var pxsim;
 (function (pxsim) {
     var visuals;
     (function (visuals) {
-        const SVG_WIDTH = 40;
         class GameButtons {
             // <div id="game-buttons-container" class="game-buttons">
             //     <div class="spacer" />
@@ -765,14 +929,16 @@ var pxsim;
                 });
                 this.bindings = [];
             }
+            pointIsWithinCircle(x, y, circle) {
+                const bounds = circle.getBoundingClientRect();
+                const radius = bounds.width / 2;
+                const distance = Math.sqrt(Math.pow(x - (bounds.left + radius), 2)
+                    + Math.pow(y - (bounds.top + radius), 2));
+                return distance < radius;
+            }
             updateButtonGesture(x, y) {
-                const bounds = this.dragSurface.getBoundingClientRect();
-                const dx = ((x - bounds.left) * (SVG_WIDTH / bounds.width));
-                const dy = ((y - bounds.top) * (SVG_WIDTH / bounds.height));
-                const aDistance = Math.sqrt(Math.pow(dx - 30, 2) + Math.pow(dy - 15, 2));
-                const bDistance = Math.sqrt(Math.pow(dx - 15, 2) + Math.pow(dy - 28, 2));
-                this.setButtonState(pxsim.Key.A, aDistance < 8);
-                this.setButtonState(pxsim.Key.B, bDistance < 8);
+                this.setButtonState(pxsim.Key.A, this.pointIsWithinCircle(x, y, this.aButton));
+                this.setButtonState(pxsim.Key.B, this.pointIsWithinCircle(x, y, this.bButton));
                 pxsim.indicateFocus(true);
             }
             clearButtonPresses() {
@@ -919,10 +1085,9 @@ var pxsim;
                 this.screen = document.getElementById("game-screen");
                 this.menu = document.getElementsByClassName("game-menu-button")[0];
                 this.reset = document.getElementsByClassName("game-reset-button")[0];
-                // TODO: localize; currently can't use lf in this repo
-                this.menu.setAttribute("aria-label", "Menu");
-                this.reset.setAttribute("aria-label", "Reset Game");
                 if (this.menu) {
+                    // TODO: localize; currently can't use lf in this repo
+                    this.menu.setAttribute("aria-label", "Menu");
                     this.menu.onclick = () => {
                         visuals.pressButton(pxsim.Key.Menu);
                         visuals.releaseButton(pxsim.Key.Menu);
@@ -930,6 +1095,7 @@ var pxsim;
                     };
                 }
                 if (this.reset) {
+                    this.reset.setAttribute("aria-label", "Reset Game");
                     this.reset.onclick = () => {
                         visuals.pressButton(pxsim.Key.Reset);
                         visuals.releaseButton(pxsim.Key.Reset);
@@ -998,12 +1164,12 @@ var pxsim;
             }
             indicateFocus(focused) {
                 if (focused) {
-                    this.menu.setAttribute("aria-disabled", "false");
-                    this.reset.setAttribute("aria-disabled", "false");
+                    this.menu && this.menu.setAttribute("aria-disabled", "false");
+                    this.reset && this.reset.setAttribute("aria-disabled", "false");
                 }
                 else {
-                    this.menu.setAttribute("aria-disabled", "true");
-                    this.reset.setAttribute("aria-disabled", "true");
+                    this.menu && this.menu.setAttribute("aria-disabled", "true");
+                    this.reset && this.reset.setAttribute("aria-disabled", "true");
                 }
             }
         }