Merge remote-tracking branch 'origin/master' into time-machine-ui

common-docs/SUMMARY.md

@@ -80,6 +80,7 @@
     * [Sharing projects](/share)
     * [Offline support](/offline)
     * [Save](/save)
+    * [Home page content](/homepage-content)
 
 ## Developers #devs
 

common-docs/homepage-content.md

@@ -0,0 +1,57 @@
+# Adding content to the home page
+
+The Editor home page contains galleries of card links to projects, tutorials, lessons, videos, and other content sources. Many content items featured on the home page are hosted at the editor's website while some other items are from external sources.
+
+Much of content available on the home page is developed or selected by the MakeCode Team. Content from other contributors is welcomed though and can be featured in the home page galleries.
+
+## #target-homescreen
+
+## Content requirements
+
+* Your content should be open source and free to use without any restrictions other than author attribution (you may specify an open source license the provides for such usage if you wish).
+* The instructions should be well written and easy to follow.
+* It should not include any personally identifiable information beyond the author's name (authors can remain anonymous too).
+* Content will be reviewed and approved by the MakeCode Team.
+
+## What you need to submit
+
+To list a content item on the home page, you need to provide:
+
+1. A name or title for the content item.
+2. A brief one or two sentence description of what your content is or does (preferably in English for localization and is 30 words or less).
+3. A thumbnail image that represents your content. Size the image to approximately **300 x 200** pixels.
+4. A full URL for the item. For a tutorial, a complete tutorial URL is needed (see https://makecode.com/writing-docs/user-tutorials for more details).
+
+## #target-link-example
+
+## Submission process
+
+Create and submit a [GitHub issue](@githubUrl@/issues) requesting your content to be listed. In the issue description, include the name or title of the content item, description, content URL, and copy in the thumbnail image. GitHub will automatically create an image URL for your thumbnail when you paste or drag your image in. Your issue description will look something like this when you write it:
+
+```
+Request to include a user content source on the editor home page. The content is a simple tutorial on how the create exploding sprites in Arcade.
+
+## Home page link info
+
+### Name
+
+Exploding Sprites
+
+### Description
+
+Learn how to create moving sprites that randomly explode!
+
+### Content Link
+
+https://arcade.makecode.com/#tutorial:https://makecode.com/_rewr9iop
+
+### Thumbnail
+
+![image](https://github.com/microsoft/pxt/assets/27789908/f5c21294-1145-4010-8de0-560b8afbfeec)
+```
+
+## #target-approval
+
+## Featured content
+
+To request featured space in the Home Page banner carousel, the requirements are similar to gallery items except for the image size. We require a link, a short description, and a "Hero" image that is **2100 x 500** pixels. Please note that banner space is very limited and approval for items included there is very selective.

kiosk/package.json

@@ -6,6 +6,7 @@
     "@types/node": "^16.11.33",
     "howler": "^2.2.3",
     "html5-qrcode": "^2.2.6",
+    "nanoid": "^4.0.2",
     "qrcode.react": "^3.1.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
@@ -39,9 +40,9 @@
   },
   "devDependencies": {
     "@types/howler": "^2.2.8",
+    "@types/qrcode": "^1.5.0",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
-    "@types/qrcode": "^1.5.0",
     "html-webpack-plugin": "^5.5.0",
     "prettier": "^2.7.1",
     "react-app-alias": "^2.2.2",

kiosk/src/App.tsx

@@ -1,65 +1,88 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useContext } from "react";
 import "./Kiosk.css";
 import "./Fonts.css";
-import { Kiosk } from "./Models/Kiosk";
 import MainMenu from "./Components/MainMenu";
-import { KioskState } from "./Models/KioskState";
+import { KioskState } from "./Types";
 import EnterHighScore from "./Components/EnterHighScore";
 import AddingGame from "./Components/AddingGame";
 import ScanQR from "./Components/ScanQR";
 import QrSuccess from "./Components/QrSuccess";
 import GameOver from "./Components/GameOver";
-
-const url = window.location.href;
-const clean = !!/clean(?:[:=])1/.test(url);
-const locked = !!/lock(?:[:=])1/i.test(url);
-const time = /time=((?:[0-9]{1,3}))/i.exec(url)?.[1];
-const volume = /volume=(1\.?0?|0?\.\d{1,2}|\.\d{1,2})/i.exec(url)?.[1];
-
-const kioskSingleton: Kiosk = new Kiosk(clean, locked, time, volume);
-kioskSingleton.initialize().catch(error => alert(error));
+import Notifications from "./Components/Notifications";
+import { useLocationHash, usePromise } from "./Hooks";
+import { launchGame } from "./Transforms/launchGame";
+import { navigate } from "./Transforms/navigate";
+import { AppStateContext, AppStateReady } from "./State/AppStateContext";
+import { downloadGameListAsync } from "./Transforms/downloadGameListAsync";
+import * as Actions from "./State/Actions";
+import * as SimHost from "./Services/SimHostService";
+import * as NotificationService from "./Services/NotificationService";
+import * as AddingGames from "./Services/AddingGamesService";
 
 function App() {
-    const [state, setState] = useState(kioskSingleton.state);
-
-    useEffect(() => {
-        window.onhashchange = onHashChange;
+    const { state, dispatch } = useContext(AppStateContext);
+    const { kioskState } = state;
 
-        kioskSingleton.onNavigated = () => {
-            setState(kioskSingleton.state);
-        };
-        onHashChange();
-    }, []);
+    const [hash] = useLocationHash();
+    const ready = usePromise(AppStateReady, false);
 
-    switch (state) {
-        case KioskState.MainMenu:
-            return <MainMenu kiosk={kioskSingleton} />;
-        case KioskState.EnterHighScore:
-            return <EnterHighScore kiosk={kioskSingleton} />;
-        case KioskState.AddingGame:
-            return <AddingGame kiosk={kioskSingleton} />;
-        case KioskState.ScanQR:
-            return <ScanQR kiosk={kioskSingleton} />;
-        case KioskState.QrSuccess:
-            return <QrSuccess />;
-        case KioskState.GameOver:
-            return <GameOver kiosk={kioskSingleton} />;
-    }
+    useEffect(() => {
+        if (ready) {
+            // Set sound system volume.
+            dispatch(Actions.setVolume(state.volume!));
+            // Load persistent state from local storage.
+            dispatch(Actions.loadHighScores());
+            dispatch(Actions.loadKioskCode());
+            // Download the game list from the server and set it in the app state.
+            downloadGameListAsync().then(gameList => {
+                dispatch(Actions.setGameList(gameList));
+                // Load user-added games from local storage.
+                dispatch(Actions.loadUserAddedGames());
+                // Select the first game in the list.
+                dispatch(Actions.setSelectedGameId(gameList[0].id));
+            });
+            // Init subsystems.
+            SimHost.initialize();
+            NotificationService.initialize();
+            AddingGames.initialize();
+        }
+    }, [ready]);
 
-    return <div />;
-}
+    useEffect(() => {
+        if (ready) {
+            const match =
+                /pub:((?:\d{5}-\d{5}-\d{5}-\d{5})|(?:_[a-zA-Z0-9]+))/.exec(
+                    hash
+                );
+            const addGame = /add-game:((?:[a-zA-Z0-9]{6}))/.exec(hash);
+            if (match) {
+                launchGame(match[1], true);
+            } else if (addGame) {
+                navigate(KioskState.ScanQR);
+            }
+            window.location.hash = "";
+        }
+    }, [hash, ready]);
 
-function onHashChange() {
-    const hash = window.location.hash;
-    const match = /pub:((?:\d{5}-\d{5}-\d{5}-\d{5})|(?:_[a-zA-Z0-9]+))/.exec(
-        hash
+    return (
+        <>
+            {kioskState === KioskState.MainMenu && <MainMenu />}
+            {ready ? (
+                <>
+                    {kioskState === KioskState.EnterHighScore && (
+                        <EnterHighScore />
+                    )}
+                    {kioskState === KioskState.AddingGame && <AddingGame />}
+                    {kioskState === KioskState.ScanQR && <ScanQR />}
+                    {kioskState === KioskState.QrSuccess && <QrSuccess />}
+                    {kioskState === KioskState.GameOver && <GameOver />}
+                    <Notifications />
+                </>
+            ) : (
+                <></>
+            )}
+        </>
     );
-    const addGame = /add-game:((?:[a-zA-Z0-9]{6}))/.exec(hash);
-    if (match) {
-        kioskSingleton.launchGame(match[1], true);
-    } else if (addGame) {
-        kioskSingleton.navigate(KioskState.ScanQR);
-    }
 }
 
 export default App;