kiosk: download targetconfig.json at startup (#9723)

* kiosk: download targetconfig.json at startup * update cli crowdin thing * Update cli/cli.ts Co-authored-by: Joey Wunderlich <[email protected]> --------- Co-authored-by: Joey Wunderlich <[email protected]>
microsoft · Oct 17, 2023 · 6c094bd · 6c094bd
1 parent 9d77d60
commit 6c094bd
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 38 deletions.
diff --git a/cli/cli.ts b/cli/cli.ts
@@ -1906,6 +1906,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 ?? [])) {

diff --git a/kiosk/src/App.tsx b/kiosk/src/App.tsx
@@ -16,7 +16,7 @@ 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 { downloadTargetConfigAsync } from "./Transforms/downloadTargetConfigAsync";
 import * as Actions from "./State/Actions";
 import * as SimHost from "./Services/SimHostService";
 import * as NotificationService from "./Services/NotificationService";
@@ -40,14 +40,22 @@ function App() {
             // 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));
-            });
+            // Download targetconfig.json, then initialize game list.
+            downloadTargetConfigAsync().then(cfg => {
+                if (cfg) {
+                    dispatch(Actions.setTargetConfig(cfg));
+                    if (cfg.kiosk) {
+                        dispatch(Actions.setGameList(cfg.kiosk.games));
+                        // Load user-added games from local storage.
+                        dispatch(Actions.loadUserAddedGames());
+                        // Select the first game in the list.
+                        dispatch(Actions.setSelectedGameId(cfg.kiosk.games[0].id));
+                    }
+                } else {
+                    // TODO: Handle this better
+                    dispatch(Actions.setTargetConfig({}));
+                }
+            });        
             // Init subsystems.
             SimHost.initialize();
             NotificationService.initialize();

diff --git a/kiosk/src/Components/MainMenu.tsx b/kiosk/src/Components/MainMenu.tsx
@@ -22,18 +22,20 @@ const MainMenu: React.FC<IProps> = ({}) => {
         launchAddGame();
     };
 
+    const canShowMainMenu = ready && kiosk.targetConfig;
+
     return (
         <>
-            {!ready && (
+            {!canShowMainMenu && (
                 <div className="mainMenu">
                     <nav className="mainMenuTopBar">
                         <h1 className={`mainMenuHeader${lockedClassName}`}>
-                            {lf("Initializing...")}
+                            {lf("Loading...")}
                         </h1>
                     </nav>
                 </div>
             )}
-            {ready && (
+            {canShowMainMenu && (
                 <div className="mainMenu">
                     <nav className="mainMenuTopBar">
                         <h1 className={`mainMenuHeader${lockedClassName}`}>

diff --git a/kiosk/src/State/Actions.ts b/kiosk/src/State/Actions.ts
@@ -125,6 +125,12 @@ type HideModal = ActionBase & {
     type: "HIDE_MODAL";
 };
 
+type SetTargetConfig = ActionBase & {
+    type: "SET_TARGET_CONFIG";
+    targetConfig: pxt.TargetConfig;
+};
+
+
 /**
  * Union of all actions
  */
@@ -151,7 +157,8 @@ export type Action =
     | RemoveNotification
     | LoadKioskCode
     | ShowModal
-    | HideModal;
+    | HideModal
+    | SetTargetConfig;
 
 /**
  * Action creators
@@ -272,6 +279,11 @@ const hideModal = (): HideModal => ({
     type: "HIDE_MODAL",
 });
 
+const setTargetConfig = (targetConfig: pxt.TargetConfig): SetTargetConfig => ({
+    type: "SET_TARGET_CONFIG",
+    targetConfig,
+});
+
 export {
     setGameList,
     setSelectedGameId,
@@ -295,4 +307,5 @@ export {
     loadKioskCode,
     showModal,
     hideModal,
+    setTargetConfig,
 };
diff --git a/kiosk/src/State/Reducer.ts b/kiosk/src/State/Reducer.ts
@@ -217,5 +217,11 @@ export default function reducer(state: AppState, action: Action): AppState {
                 modal: undefined,
             };
         }
+        case "SET_TARGET_CONFIG": {
+            return {
+                ...state,
+                targetConfig: action.targetConfig,
+            };
+        }
     }
 }
diff --git a/kiosk/src/State/State.ts b/kiosk/src/State/State.ts
@@ -24,6 +24,7 @@ export type AppState = {
     locked: boolean;
     time?: string;
     volume?: number;
+    targetConfig?: pxt.TargetConfig;
 };
 
 export const initialAppState: AppState = {

diff --git a/kiosk/src/Transforms/downloadGameListAsync.ts b/kiosk/src/Transforms/downloadGameListAsync.ts
diff --git a/kiosk/src/Transforms/downloadTargetConfigAsync.ts b/kiosk/src/Transforms/downloadTargetConfigAsync.ts
@@ -0,0 +1,9 @@
+export async function downloadTargetConfigAsync(): Promise<
+    pxt.TargetConfig | undefined
+> {
+    try {
+        return await pxt.targetConfigAsync();
+    } catch (e) {
+        console.error(e);
+    }
+}
diff --git a/localtypings/pxtarget.d.ts b/localtypings/pxtarget.d.ts
@@ -33,6 +33,7 @@ declare namespace pxt {
         // release manifest for the electron app
         electronManifest?: pxt.electron.ElectronManifest;
         profileNotification?: ProfileNotification;
+        kiosk?: KioskConfig;
     }
 
     interface PackagesConfig {
@@ -77,6 +78,17 @@ declare namespace pxt {
         image?: string;
     }
 
+    interface KioskConfig {
+        games: KioskGame[];
+    }
+
+    interface KioskGame {
+        id: string;
+        name: string;
+        description: string;
+        highScoreMode: string;
+    }
+
     interface AppTarget {
         id: string; // has to match ^[a-z]+$; used in URLs and domain names
         platformid?: string; // eg "codal"; used when search for gh packages ("for PXT/codal"); defaults to id

diff --git a/pxtlib/browserutils.ts b/pxtlib/browserutils.ts
@@ -149,7 +149,7 @@ namespace pxt.BrowserUtils {
     export function isLocalHost(ignoreFlags?: boolean): boolean {
         try {
             return typeof window !== "undefined"
-                && /^http:\/\/(localhost|127\.0\.0\.1):\d+\//.test(window.location.href)
+                && /^http:\/\/(localhost|127\.0\.0\.1|192\.168\.\d+\.\d+):\d+\//.test(window.location.href)
                 && (ignoreFlags || !/nolocalhost=1/.test(window.location.href))
                 && !(pxt?.webConfig?.isStatic);
         } catch (e) { return false; }