Implement kiosk mode

caiiiycuk · Jun 20, 2024 · 3e99ee0 · 3e99ee0
1 parent e40372c
commit 3e99ee0
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -36,7 +36,8 @@
           // url: "https://cdn.dos.zone/original/2X/7/744842062905f72648a4d492ccc2526d039b3702.jsdos", // sim-city
           // dosboxConf: diabloConf,
           // loginUrl: "http://localhost:8080/subscription.html",
-          autoStart: true,
+          // autoStart: true,
+          // kiosk: true,
           pathPrefix: "/emulators/",
           server: params.get("server"),
           room: params.get("room"),

diff --git a/src/main.tsx b/src/main.tsx
@@ -115,6 +115,14 @@ export const Dos: DosFn = (element: HTMLDivElement,
         browserSetFullScreen(fullScreen, store);
     }
 
+    function setAutoStart(autoStart: boolean) {
+        store.dispatch(uiSlice.actions.autoStart(autoStart));
+    }
+
+    function setKiosk(kiosk: boolean) {
+        store.dispatch(uiSlice.actions.kiosk(kiosk));
+    }
+
     if (options.theme) {
         setTheme(options.theme);
     }
@@ -160,7 +168,11 @@ export const Dos: DosFn = (element: HTMLDivElement,
     }
 
     if (options.autoStart !== undefined) {
-        store.dispatch(uiSlice.actions.autoStart(options.autoStart));
+        setAutoStart(options.autoStart);
+    }
+
+    if (options.kiosk !== undefined) {
+        setKiosk(options.kiosk);
     }
 
     render(
@@ -182,6 +194,8 @@ export const Dos: DosFn = (element: HTMLDivElement,
         setFrame,
         setBackground,
         setFullScreen,
+        setAutoStart,
+        setKiosk,
     };
 };
 

diff --git a/src/public/types.ts b/src/public/types.ts
@@ -26,6 +26,7 @@ export interface DosOptions {
     },
     loginUrl: string,
     autoStart: boolean,
+    kiosk: boolean,
 }
 
 export interface DosProps {
@@ -40,6 +41,8 @@ export interface DosProps {
     setFrame(frame: "network"): void;
     setBackground(background: string | null): void;
     setFullScreen(fullScreen: boolean): void;
+    setAutoStart(autoStart: boolean): void;
+    setKiosk(kiosk: boolean): void;
 }
 
 export type DosFn = (element: HTMLDivElement, options: Partial<DosOptions>) => DosProps;

diff --git a/src/sidebar/sidebar.tsx b/src/sidebar/sidebar.tsx
@@ -11,6 +11,11 @@ export function SideBar(props: {}) {
     const window = useSelector((state: State) => state.ui.window);
     const editor = useSelector((state: State) => state.ui.editor);
     const backend = useSelector((state: State) => state.dos.backend);
+    const kiosk = useSelector((state: State) => state.ui.kiosk);
+
+    if (kiosk) {
+        return null;
+    }
 
     return <div class="sidebar">
         {window === "run" && backend === "dosbox" && <CloudSaveButton />}

diff --git a/src/store/ui.ts b/src/store/ui.ts
@@ -31,6 +31,7 @@ const initialState: {
     updateWsWarning: boolean,
     cloudSaves: boolean,
     autoStart: boolean,
+    kiosk: boolean,
 } = {
     modal: "none",
     frame: "none",
@@ -48,6 +49,7 @@ const initialState: {
     updateWsWarning: false,
     cloudSaves: true,
     autoStart: false,
+    kiosk: false,
 };
 
 export type UiState = typeof initialState;
@@ -154,6 +156,9 @@ export const uiSlice = createSlice({
         autoStart: (state, a: { payload: boolean }) => {
             state.autoStart = a.payload;
         },
+        kiosk: (state, a: { payload: boolean }) => {
+            state.kiosk = a.payload;
+        },
     },
     extraReducers: (builder) => {
         builder

diff --git a/src/window/prerun-window.tsx b/src/window/prerun-window.tsx
@@ -14,6 +14,7 @@ export function PreRunWindow() {
     const account = useSelector((state: State) => state.auth.account);
     const emuVersion = useSelector((state: State) => state.dos.emuVersion);
     const dispatch = useDispatch();
+    const kiosk = useSelector((state: State) => state.ui.kiosk);
     const t = useT();
 
     function login() {
@@ -27,7 +28,7 @@ export function PreRunWindow() {
     return <div class="pre-run-window">
         <Play class="mb-8" />
 
-        {(account === null) &&
+        {!kiosk && (account === null) &&
             <div class="flex flex-row mb-4 -mt-4 items-center">
                 <div class="btn btn-accent" onClick={login}>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
@@ -48,7 +49,7 @@ export function PreRunWindow() {
                 </div>
             </div>
         }
-        {account &&
+        {!kiosk && account &&
             <div class="flex flex-row mb-4 -mt-4 items-center">
                 <div class="btn btn-ghost" onClick={login}>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">

diff --git a/src/window/window.tsx b/src/window/window.tsx
@@ -11,6 +11,7 @@ export function Window(props: {}) {
     const frameXs = useSelector((state: State) => state.ui.frameXs);
     const window = useSelector((state: State) => state.ui.window);
     const background = useSelector((state: State) => state.ui.background);
+    const kiosk = useSelector((state: State) => state.ui.kiosk);
 
     let windowComponent = <Loading />;
     switch (window) {
@@ -36,7 +37,7 @@ export function Window(props: {}) {
         <div class="background-image"
             style={{ backgroundImage: (background ? "url(" + background + ")" : undefined ) }} />
         <div class="relative flex flex-row h-full w-full items-start justify-start overflow-auto">
-            <div class={(frameOpened ? (frameXs ? "w-24" : "w-96") : "w-12") + " flex-shrink-0"}></div>
+            { !kiosk && <div class={(frameOpened ? (frameXs ? "w-24" : "w-96") : "w-12") + " flex-shrink-0"}></div> }
             {windowComponent}
         </div>
     </div>;