diff --git a/kiosk/src/App.tsx b/kiosk/src/App.tsx index d23f7086668b..d79b9ef9cd0a 100644 --- a/kiosk/src/App.tsx +++ b/kiosk/src/App.tsx @@ -24,6 +24,7 @@ import * as AddingGames from "./Services/AddingGamesService"; import * as GamepadManager from "./Services/GamepadManager"; import * as NavGrid from "./Services/NavGrid"; import * as RectCache from "./Services/RectCache"; +import * as GameRefreshService from "./Services/GameRefreshService"; import Background from "./Components/Background"; function App() { @@ -63,6 +64,7 @@ function App() { GamepadManager.initialize(); NavGrid.initialize(); RectCache.initialize(); + GameRefreshService.initialize(); } }, [ready]); diff --git a/kiosk/src/Components/GameSlide.tsx b/kiosk/src/Components/GameSlide.tsx index c18ea5fbd5f6..93236c8f140c 100644 --- a/kiosk/src/Components/GameSlide.tsx +++ b/kiosk/src/Components/GameSlide.tsx @@ -1,11 +1,12 @@ -import { useContext } from "react"; +import { useContext, useMemo } from "react"; import { playSoundEffect } from "../Services/SoundEffectService"; import { launchGame } from "../Transforms/launchGame"; -import { GameData, HighScore } from "../Types"; +import { GameData } from "../Types"; import { AppStateContext } from "../State/AppStateContext"; import HighScoresList from "./HighScoresList"; import { GameMenu } from "./GameMenu"; import { getHighScores } from "../State"; +import { getEffectiveGameId } from "../Utils"; interface IProps { game: GameData; @@ -19,13 +20,20 @@ const GameSlide: React.FC = ({ game }) => { launchGame(game.id); }; + const thumbnailUrl = useMemo(() => { + if (game) { + const gameId = getEffectiveGameId(game); + return `url("https://makecode.com/api/${gameId}/thumb")`; + } + }, [game, game?.tempGameId]); + return (
diff --git a/kiosk/src/Components/PlayingGame.tsx b/kiosk/src/Components/PlayingGame.tsx index 9cc3d25a9a07..4b193d828b0e 100644 --- a/kiosk/src/Components/PlayingGame.tsx +++ b/kiosk/src/Components/PlayingGame.tsx @@ -1,16 +1,20 @@ import { useContext, useEffect, useMemo, useState } from "react"; import { AppStateContext } from "../State/AppStateContext"; +import { getLaunchedGame } from "../State"; import { escapeGame } from "../Transforms/escapeGame"; import { playSoundEffect } from "../Services/SoundEffectService"; import { useOnControlPress } from "../Hooks"; -import { stringifyQueryString } from "../Utils"; +import { getEffectiveGameId, stringifyQueryString } from "../Utils"; import * as GamepadManager from "../Services/GamepadManager"; import * as IndexedDb from "../Services/IndexedDb"; import configData from "../config.json"; export default function PlayingGame() { const { state: kiosk, dispatch } = useContext(AppStateContext); - const { launchedGameId: gameId } = kiosk; + + const launchedGame = useMemo(() => { + return getLaunchedGame(); + }, [kiosk.launchedGameId]); // Handle Back and Start button presses useOnControlPress( @@ -29,19 +33,22 @@ export default function PlayingGame() { >(undefined); useEffect(() => { - if (gameId) { + if (launchedGame) { + const gameId = getEffectiveGameId(launchedGame); // Try to fetch the built game from local storage. - IndexedDb.getBuiltJsInfoAsync(gameId).then(builtGame => { - setBuiltJsInfo(builtGame); - setFetchingBuiltJsInfo(false); - }); + IndexedDb.getBuiltJsInfoAsync(gameId).then( + builtGame => { + setBuiltJsInfo(builtGame); + setFetchingBuiltJsInfo(false); + } + ); } - }, [gameId]); + }, [launchedGame]); const playUrl = useMemo(() => { - if (gameId && !fetchingBuiltJsInfo) { + if (launchedGame && !fetchingBuiltJsInfo) { return stringifyQueryString(configData.PlayUrlRoot, { - id: gameId, + id: getEffectiveGameId(launchedGame), // TODO: Show sim buttons on mobile & touch devices. hideSimButtons: pxt.BrowserUtils.isMobile() ? undefined : 1, noFooter: 1, @@ -58,7 +65,7 @@ export default function PlayingGame() { sendBuilt: builtJsInfo ? undefined : 1, }); } - }, [gameId, fetchingBuiltJsInfo]); + }, [launchedGame, fetchingBuiltJsInfo]); return (