[stable8.5] cherry-pick all kiosk commits

cli/cli.ts

@@ -1897,6 +1897,12 @@ ${gcards.map(gcard => `[${gcard.name}](${gcard.url})`).join(',\n')}
             if (game.subtitle) targetStrings[`{id:game-subtitle}${game.subtitle}`] = game.subtitle;
         }
 
+        const kioskGames = targetConfig?.kiosk?.games;
+        for (const game of (kioskGames ?? [])) {
+            if (game.name) targetStrings[`{id:game-name}${game.name}`] = game.name;
+            if (game.description)  targetStrings[`{id:game-description}${game.description}`] = game.description;
+        }
+
         const approvedRepoLib = targetConfig?.packages?.approvedRepoLib;
         for (const [extension, repoData] of Object.entries(approvedRepoLib ?? {})) {
             for (const tag of (repoData.tags ?? [])) {
@@ -2075,10 +2081,8 @@ async function buildSemanticUIAsync(parsed?: commandParser.ParsedCommand) {
         // This is just to support the local skillmap/cra-app serve for development
         nodeutil.cp("built/web/react-common-skillmap.css", "node_modules/pxt-core/skillmap/public/blb");
         nodeutil.cp("built/web/react-common-authcode.css", "node_modules/pxt-core/authcode/public/blb");
-        nodeutil.cp("built/web/react-common-multiplayer.css", "node_modules/pxt-core/multiplayer/public/blb");
         nodeutil.cp("built/web/semantic.css", "node_modules/pxt-core/skillmap/public/blb");
         nodeutil.cp("built/web/semantic.css", "node_modules/pxt-core/authcode/public/blb");
-        nodeutil.cp("built/web/semantic.css", "node_modules/pxt-core/multiplayer/public/blb");
     }
 }
 
@@ -2165,18 +2169,6 @@ function buildAuthcodeAsync(parsed: commandParser.ParsedCommand) {
     return buildReactAppAsync("authcode", parsed, { copyAssets: false });
 }
 
-function buildMultiplayerAsync(parsed: commandParser.ParsedCommand) {
-    return buildReactAppAsync(
-        "multiplayer",
-        parsed,
-        {
-            copyAssets: false,
-            includePxtSim: true,
-            expandedPxtTarget: true
-        }
-    );
-}
-
 function updateDefaultProjects(cfg: pxt.TargetBundle) {
     let defaultProjects = [
         pxt.BLOCKS_PROJECT_NAME,
@@ -2835,7 +2827,8 @@ export function serveAsync(parsed: commandParser.ParsedCommand) {
             wsPort: parsed.flags["wsport"] as number || 0,
             hostname: parsed.flags["hostname"] as string || "",
             browser: parsed.flags["browser"] as string,
-            serial: !parsed.flags["noSerial"] && !globalConfig.noSerial
+            serial: !parsed.flags["noSerial"] && !globalConfig.noSerial,
+            noauth: parsed.flags["noauth"] as boolean || false,
         }))
 }
 
@@ -6899,6 +6892,10 @@ ${pxt.crowdin.KEY_VARIABLE} - crowdin key
                 aliases: ["w"],
                 type: "number",
                 argument: "wsport"
+            },
+            noauth: {
+                description: "disable localtoken-based authentication",
+                aliases: ["na"],
             }
         }
     }, serveAsync);
@@ -7073,23 +7070,6 @@ ${pxt.crowdin.KEY_VARIABLE} - crowdin key
         }
     }, buildAuthcodeAsync);
 
-    p.defineCommand({
-        name: "buildmultiplayer",
-        aliases: ["multiplayer", "mp"],
-        advanced: true,
-        help: "Serves the multiplayer webapp",
-        flags: {
-            serve: {
-                description: "Serve the multiplayer app locally after building (npm start)"
-            },
-            docs: {
-                description: "Path to local docs folder to copy into multiplayer",
-                type: "string",
-                argument: "docs"
-            }
-        }
-    }, buildMultiplayerAsync)
-
     advancedCommand("augmentdocs", "test markdown docs replacements", augmnetDocsAsync, "<temlate.md> <doc.md>");
 
     advancedCommand("crowdin", "upload, download, clean, stats files to/from crowdin", pc => crowdin.execCrowdinAsync.apply(undefined, pc.args), "<cmd> <path> [output]")

cli/server.ts

@@ -26,8 +26,9 @@ let localHexCacheDir = path.join("built", "hexcache");
 let serveOptions: ServeOptions;
 
 const webappNames = [
-    "kiosk"
-    // TODO: Add other webapp names here: "multiplayer", "skillmap", "authcode"
+    "kiosk",
+    "multiplayer"
+    // TODO: Add other webapp names here: "skillmap", "authcode"
 ];
 
 function setupDocfilesdirs() {
@@ -806,6 +807,7 @@ export interface ServeOptions {
     hostname?: string;
     wsPort?: number;
     serial?: boolean;
+    noauth?: boolean;
 }
 
 // can use http://localhost:3232/streams/nnngzlzxslfu for testing
@@ -1087,7 +1089,7 @@ export function serveAsync(options: ServeOptions) {
                     })
             }
 
-            if (!isAuthorizedLocalRequest(req)) {
+            if (!options.noauth && !isAuthorizedLocalRequest(req)) {
                 error(403);
                 return null;
             }

docfiles/apptracking.html

@@ -12,6 +12,7 @@
                 disableAjaxTracking: true,
                 overridePageViewDuration: false,
                 disableExceptionTracking: true,
+                disableCorrelationHeaders: true,
                 disableCookiesUsage: !isProduction,
                 isStorageUseDisabled: !isProduction,
                 url: "/blb/ai.2.min.js"

docfiles/pxtweb/cookieCompliance.ts

@@ -213,10 +213,10 @@ namespace pxt {
         telemetryItem.properties["stage"] = (pxtConfig.relprefix || "/--").replace(/[^a-z]/ig, '')
 
         const userAgent = navigator.userAgent.toLowerCase();
-        const userAgentRegexResult = /\belectron\/(\d+\.\d+\.\d+.*?)(?: |$)/i.exec(userAgent); // Example navigator.userAgent: "Mozilla/5.0 Chrome/61.0.3163.100 Electron/2.0.0 Safari/537.36"
-        if (userAgentRegexResult) {
+        const electronRegexResult = /\belectron\/(\d+\.\d+\.\d+.*?)(?: |$)/i.exec(userAgent); // Example navigator.userAgent: "Mozilla/5.0 Chrome/61.0.3163.100 Electron/2.0.0 Safari/537.36"
+        if (electronRegexResult) {
             telemetryItem.properties["Electron"] = 1;
-            telemetryItem.properties["ElectronVersion"] = userAgentRegexResult[1];
+            telemetryItem.properties["ElectronVersion"] = electronRegexResult[1];
         }
 
         const pxtElectron = (window as any).pxtElectron;
@@ -231,6 +231,14 @@ namespace pxt {
             telemetryItem.properties["PxtElectronIsProd"] = pxtElectron.versions.isProd;
         }
 
+        // Kiosk UWP info is appended to the user agent by the makecode-dotnet-apps/arcade-kiosk UWP app
+        const kioskUwpRegexResult = /\((MakeCode Arcade Kiosk UWP)\/([\S]+)\/([\S]+)\)/i.exec(userAgent); // Example navigator.userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36 Edg/117.0.2045.60 (MakeCode Arcade Kiosk UWP/0.1.41.0/Windows.Xbox)"
+        if (kioskUwpRegexResult) {
+            telemetryItem.properties["KioskUwp"] = 1;
+            telemetryItem.properties["KioskUwpVersion"] = kioskUwpRegexResult[2];
+            telemetryItem.properties["KioskUwpPlatform"] = kioskUwpRegexResult[3];
+        }
+
         // "cookie" does not actually correspond to whether or not we drop the cookie because we recently
         // switched to immediately dropping it rather than waiting. Instead, we maintain the legacy behavior
         // of only setting it to true for production sites where interactive consent has been obtained

docfiles/tracking.html

@@ -41,10 +41,10 @@
                     if (typeof Windows !== "undefined")
                         telemetryItem.properties["WindowsApp"] = 1;
                     var userAgent = navigator.userAgent.toLowerCase();
-                    var userAgentRegexResult = /\belectron\/(\d+\.\d+\.\d+.*?)(?: |$)/i.exec(userAgent); // Example navigator.userAgent: "Mozilla/5.0 Chrome/61.0.3163.100 Electron/2.0.0 Safari/537.36"
-                    if (userAgentRegexResult) {
+                    var electronRegexResult = /\belectron\/(\d+\.\d+\.\d+.*?)(?: |$)/i.exec(userAgent); // Example navigator.userAgent: "Mozilla/5.0 Chrome/61.0.3163.100 Electron/2.0.0 Safari/537.36"
+                    if (electronRegexResult) {
                         telemetryItem.properties["Electron"] = 1;
-                        telemetryItem.properties["ElectronVersion"] = userAgentRegexResult[1];
+                        telemetryItem.properties["ElectronVersion"] = electronRegexResult[1];
                     }
                     if (typeof pxtElectron !== "undefined") {
                         telemetryItem.properties["PxtElectron"] = 1;
@@ -56,6 +56,13 @@
                         telemetryItem.properties["PxtTargetVersion"] = pxtElectron.versions.pxtTargetVersion;
                         telemetryItem.properties["PxtElectronIsProd"] = pxtElectron.versions.isProd;
                     }
+                    // Kiosk UWP info is appended to the user agent by the makecode-dotnet-apps/arcade-kiosk UWP app
+                    var kioskUwpRegexResult = /\((MakeCode Arcade Kiosk UWP)\/([\S]+)\/([\S]+)\)/i.exec(userAgent); // Example navigator.userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36 Edg/117.0.2045.60 (MakeCode Arcade Kiosk UWP/0.1.41.0/Windows.Xbox)"
+                    if (kioskUwpRegexResult) {
+                        telemetryItem.properties["KioskUwp"] = 1;
+                        telemetryItem.properties["KioskUwpVersion"] = kioskUwpRegexResult[2];
+                        telemetryItem.properties["KioskUwpPlatform"] = kioskUwpRegexResult[3];
+                    }
                     return true;
                 });
             },
@@ -64,6 +71,7 @@
                 disableAjaxTracking: true,
                 overridePageViewDuration: false,
                 disableExceptionTracking: true,
+                disableCorrelationHeaders: true,
                 disableCookiesUsage: !isProduction,
                 isStorageUseDisabled: !isProduction,
                 url: "/doccdn/ai.2.min.js"

gulpfile.js

@@ -712,7 +712,7 @@ const maybeBuildWebapps = () => {
 const lintWithEslint = () => Promise.all(
     ["cli", "pxtblocks", "pxteditor", "pxtlib", "pxtcompiler",
         "pxtpy", "pxtrunner", "pxtsim", "webapp",
-        "docfiles/pxtweb", "skillmap", "authcode", "multiplayer", "docs/static/streamer"].map(dirname =>
+        "docfiles/pxtweb", "skillmap", "authcode", "multiplayer"/*, "kiosk"*/, "docs/static/streamer"].map(dirname =>
             exec(`node node_modules/eslint/bin/eslint.js -c .eslintrc.js --ext .ts,.tsx ./${dirname}/`, true)))
     .then(() => console.log("linted"))
 const lint = lintWithEslint

kiosk/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+    "parserOptions": {
+        "project": "kiosk/tsconfig.json",
+    },
+    "ignorePatterns": ["tests/**/*.spec.ts", "public/**/*", "build/**/*"]
+}

kiosk/.prettierrc

@@ -0,0 +1,5 @@
+{
+    "arrowParens": "avoid",
+    "semi": true,
+    "tabWidth": 4
+}

kiosk/README.md

@@ -52,3 +52,35 @@ Debug and step through Kiosk code using the browser dev tools (F12 to open).
 
 Follow the "Test in staging environment" instructions, but get your auth token from `https://makecode.com/oauth/gettoken`.
 
+
+## Authoring UI sound effects
+
+1. Open the "Kiosk Audio Effects" project in Arcade: https://makecode.com/_K6AfE6AWd9xV
+   - Click on the provided link to open the MakeCode Arcade project in your web browser.
+
+2. Tweak or add the desired sound:
+   - Within the MakeCode Arcade project, modify or add the sound effect you want.
+
+3. Play the sound in the editor a few times while capturing the audio:
+   - Install a Chrome extension called "Chrome Audio Capturer" from this link: [Link to Chrome Audio Capturer](https://github.com/arblast/Chrome-Audio-Capturer)
+   - Use the extension to capture the audio of the sound effect by playing it within the MakeCode editor.
+
+4. In a sound file editor, clip out the sound effect and export it as .ogg:
+   - Download the captured audio file.
+   - Open a sound file editor (such as Audacity or Adobe Audition).
+   - Import the downloaded audio file.
+   - Edit and clip out the specific sound effect you want.
+   - Run a high-pass filter to reduce volume of low-end frequencies.
+   - Export the edited audio as an .ogg file.
+
+5. Save the .ogg file to /pxt/docs/kiosk-data/sfx:
+   - Navigate to the specified directory (/pxt/docs/kiosk-data/sfx) in your file system.
+   - Save the edited .ogg sound effect file in this directory.
+
+6. If it's a new effect, add it to Services/SoundEffectService.ts:
+   - If the sound effect you added or modified is new and hasn't been used before, you may need to update the code in the `Services/SoundEffectService.ts` file to include the new sound effect.
+
+7. Re-share the above project and update the URL in Step 1:
+   - Share the MakeCode Arcade project with the updated sound effect, ensuring is it not saved as a Persistent Share.
+   - Update the URL in Step 1 of these instructions to reflect the new project URL.
+

kiosk/config-overrides.js

@@ -1,4 +1,5 @@
-const { aliasWebpack } = require("react-app-alias");
+const { aliasWebpack } = require("react-app-alias-ex");
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = function (config, env) {
@@ -8,6 +9,7 @@ module.exports = function (config, env) {
         ...aliasFn(config),
         plugins: [
             ...config.plugins.filter((p) => !(p instanceof HtmlWebpackPlugin)),
+            new NodePolyfillPlugin(),
             new HtmlWebpackPlugin(
                 Object.assign(
                     {},
@@ -34,10 +36,6 @@ module.exports = function (config, env) {
                 )
             ),
         ],
-        module: {
-            ...config.module,
-            rules: config.module.rules.filter(el => !(el.use && el.use.some(item => !!(item.options && item.options.eslintPath)))),
-        }
     };
     return config;
 };