Kiosk: Remove direct dom manipulation (#9692)

* Remove direct dom manipulation * tweak adding game css * prettier * Removed unneeded css attribute * update readme * Remove unwanted memo dependency
microsoft · Sep 21, 2023 · 5b4bd1c · 5b4bd1c
1 parent 3514eb4
commit 5b4bd1c
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 66 deletions.
diff --git a/kiosk/README.md b/kiosk/README.md
@@ -70,6 +70,7 @@ Follow the "Test in staging environment" instructions, but get your auth token f
    - 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:

diff --git a/kiosk/public/index.html b/kiosk/public/index.html
@@ -31,12 +31,8 @@
     <script type="text/javascript" src="/blb/target.js"></script>
     <script type="text/javascript" src="/blb/pxtlib.js"></script>
     <script type="text/javascript" src="/blb/pxtsim.js"></script>
-
-    <div class="content">
-      <div id="root"></div>
-    </div>
 
-    <div class="footer"></div>
+    <div id="root"></div>
 
   </body>
 </html>
diff --git a/kiosk/src/App.tsx b/kiosk/src/App.tsx
@@ -8,6 +8,8 @@ import AddingGame from "./Components/AddingGame";
 import ScanQR from "./Components/ScanQR";
 import QrSuccess from "./Components/QrSuccess";
 import GameOver from "./Components/GameOver";
+import PlayingGame from "./Components/PlayingGame";
+import Footer from "./Components/Footer";
 import Notifications from "./Components/Notifications";
 import { useLocationHash, usePromise } from "./Hooks";
 import { launchGame } from "./Transforms/launchGame";
@@ -76,11 +78,13 @@ function App() {
                     {kioskState === KioskState.ScanQR && <ScanQR />}
                     {kioskState === KioskState.QrSuccess && <QrSuccess />}
                     {kioskState === KioskState.GameOver && <GameOver />}
+                    {kioskState === KioskState.PlayingGame && <PlayingGame />}
                     <Notifications />
                 </>
             ) : (
                 <></>
             )}
+            {kioskState !== KioskState.PlayingGame && <Footer />}
         </>
     );
 }

diff --git a/kiosk/src/Components/Footer.tsx b/kiosk/src/Components/Footer.tsx
@@ -0,0 +1,3 @@
+export default function Footer() {
+    return <div className="footer"></div>;
+}
diff --git a/kiosk/src/Components/GameList.tsx b/kiosk/src/Components/GameList.tsx
@@ -144,7 +144,7 @@ const GameList: React.FC<IProps> = ({
                 loop={true}
                 slidesPerView={1.5}
                 centeredSlides={true}
-                spaceBetween={130}
+                spaceBetween={10}
                 pagination={{ type: "fraction" }}
                 onSwiper={swiper => {
                     localSwiper.current = swiper;

diff --git a/kiosk/src/Components/PlayingGame.tsx b/kiosk/src/Components/PlayingGame.tsx
@@ -0,0 +1,26 @@
+import { useContext, useMemo } from "react";
+import { AppStateContext } from "../State/AppStateContext";
+import configData from "../config.json";
+import "../Kiosk.css";
+
+export default function PlayingGame() {
+    const { state: kiosk, dispatch } = useContext(AppStateContext);
+    const { launchedGameId: gameId } = kiosk;
+
+    const playUrl = useMemo(() => {
+        if (gameId) {
+            const playUrlBase = `${configData.PlayUrlRoot}?id=${gameId}&hideSimButtons=1&noFooter=1&single=1&fullscreen=1&autofocus=1`;
+            const playQueryParam = kiosk.builtGamesCache[gameId]
+                ? "&server=1"
+                : "&sendBuilt=1";
+            return playUrlBase + playQueryParam;
+        }
+    }, [gameId]);
+    return (
+        <iframe
+            className="sim-embed"
+            sandbox="allow-popups allow-forms allow-scripts allow-same-origin"
+            src={playUrl}
+        ></iframe>
+    );
+}
diff --git a/kiosk/src/Kiosk.css b/kiosk/src/Kiosk.css
@@ -31,9 +31,9 @@ html, body {
     color: var(--main-text-color);
 }
 
-.content {
-    width: 100%;
-    height: 100%;
+#root {
+    width: 100vw;
+    height: 100vh;
 }
 
 h1 {
@@ -54,8 +54,8 @@ h2 {
     width: 100%;
     height: 100%;
     top:0;
-    left: -2%;
     position: absolute;
+    border: 0;
 }
 
 .footer {
@@ -65,7 +65,6 @@ h2 {
     width: 20%;
     left: 1.5%;
     bottom: 0;
-    margin-bottom: 2vh;
     background: url("footer.png");
     background-repeat: no-repeat;
     background-size: 100%;
@@ -198,6 +197,7 @@ h2 {
     display: flex;
     flex-direction: column;
     align-items: baseline;
+    align-self: center;
     width: 60%;
     line-height: 200%;
 }
@@ -214,7 +214,6 @@ h2 {
     align-items: center;
     justify-content: center;
     width: 100%;
-    height: 100%;
 }
 
 .innerQRCodeContent {
@@ -257,7 +256,6 @@ h2 {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: center;
     width: 95%;
     height: 100%;
     margin-top: 1%;

diff --git a/kiosk/src/Services/Gamespace.ts b/kiosk/src/Services/Gamespace.ts
diff --git a/kiosk/src/Transforms/exitGame.ts b/kiosk/src/Transforms/exitGame.ts
@@ -1,16 +1,13 @@
 import { stateAndDispatch } from "../State";
 import { KioskState } from "../Types";
-import * as Actions from "../State/Actions";
 import { navigate } from "./navigate";
-import * as Gamespace from "../Services/Gamespace";
 
 export function exitGame(nextState: KioskState): void {
     const { state } = stateAndDispatch();
+
     if (state.kioskState !== KioskState.PlayingGame) {
         return;
     }
 
     navigate(nextState);
-
-    Gamespace.addElements();
 }
diff --git a/kiosk/src/Transforms/launchGame.ts b/kiosk/src/Transforms/launchGame.ts
@@ -1,9 +1,7 @@
 import { stateAndDispatch } from "../State";
 import { KioskState } from "../Types";
 import * as Actions from "../State/Actions";
-import configData from "../config.json";
 import { navigate } from "./navigate";
-import * as Gamespace from "../Services/Gamespace";
 
 export function launchGame(
     gameId: string,
@@ -18,26 +16,4 @@ export function launchGame(
     }
     if (preventReturningToMenu) dispatch(Actions.setLockedGame(gameId));
     navigate(KioskState.PlayingGame);
-
-    Gamespace.removeElements();
-
-    const playUrlBase = `${configData.PlayUrlRoot}?id=${gameId}&hideSimButtons=1&noFooter=1&single=1&fullscreen=1&autofocus=1`;
-    let playQueryParam = state.builtGamesCache[gameId]
-        ? "&server=1"
-        : "&sendBuilt=1";
-
-    function createIFrame(src: string) {
-        const iframe: HTMLIFrameElement = document.createElement("iframe");
-        iframe.className = "sim-embed";
-        iframe.frameBorder = "0";
-        iframe.setAttribute(
-            "sandbox",
-            "allow-popups allow-forms allow-scripts allow-same-origin"
-        );
-        iframe.src = src;
-        return iframe;
-    }
-    const playerIFrame = createIFrame(playUrlBase + playQueryParam);
-    Gamespace.append(playerIFrame);
-    playerIFrame.focus();
 }