From ae5084a8676da6c09d634a7f66e1f977f4ee8342 Mon Sep 17 00:00:00 2001
From: Alexander Guryanov <caiiiycuk@gmail.com>
Date: Wed, 28 Aug 2024 11:05:36 +0300
Subject: [PATCH] v8.1.18: refactored pre-run window, noCursor option

---
 index.html                             |   1 +
 package.json                           |   2 +-
 src/components/dos-option-checkbox.tsx |  12 +++
 src/components/dos-option-select.tsx   |   6 +-
 src/frame/account-frame.tsx            |  31 ++++++-
 src/frame/editor/editor-conf-frame.tsx |   1 +
 src/frame/frame.css                    |   5 +-
 src/frame/frame.tsx                    |   2 +
 src/frame/prerun-frame.tsx             |  29 ++++++
 src/frame/settings-frame.tsx           |   6 +-
 src/i18n.ts                            |   6 ++
 src/load.ts                            |   1 +
 src/main.tsx                           |   9 ++
 src/public/types.ts                    |   2 +
 src/sidebar/sidebar-button.tsx         |  27 ++++++
 src/sidebar/sidebar.tsx                |   4 +-
 src/store.tsx                          |   2 +-
 src/store/dos.ts                       |   5 +
 src/store/ui.ts                        |   7 +-
 src/window/dos/dos-window.tsx          |   3 +-
 src/window/prerun-window.tsx           | 123 +++++++++----------------
 21 files changed, 190 insertions(+), 94 deletions(-)
 create mode 100644 src/frame/prerun-frame.tsx

diff --git a/index.html b/index.html
index 735059dc..beec7d4e 100644
--- a/index.html
+++ b/index.html
@@ -54,6 +54,7 @@
           // },
           // noNetworking: true,
           // noCloud: true,
+          // noCursor: true,
           onEvent: (event, ci) => {
             console.log("Event", event)
             if (event === "ci-ready") {
diff --git a/package.json b/package.json
index f7235737..74d6ea32 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "js-dos",
-  "version": "8.1.17",
+  "version": "8.1.18",
   "description": "Full-featured DOS player with multiple emulator backends",
   "type": "module",
   "keywords": [
diff --git a/src/components/dos-option-checkbox.tsx b/src/components/dos-option-checkbox.tsx
index 0af1de7f..0dd7e0cb 100644
--- a/src/components/dos-option-checkbox.tsx
+++ b/src/components/dos-option-checkbox.tsx
@@ -29,6 +29,18 @@ export function MouseCapture() {
     />;
 }
 
+export function SystemCursor() {
+    const t = useT();
+    const dispatch = useDispatch();
+    const lock = useSelector((state: State) => !state.dos.noCursor);
+    return <Checkbox
+        class="mt-4"
+        label={t("system_cursor")}
+        checked={lock}
+        onChange={(l) => dispatch(dosSlice.actions.noCursor(!l))}
+    />;
+}
+
 export function MobileControls() {
     const t = useT();
     const dispatch = useDispatch();
diff --git a/src/components/dos-option-select.tsx b/src/components/dos-option-select.tsx
index ad8b10a4..e0d1b894 100644
--- a/src/components/dos-option-select.tsx
+++ b/src/components/dos-option-select.tsx
@@ -11,9 +11,10 @@ import { ThemeValues, Theme, uiSlice } from "../store/ui";
 import { lStorage } from "../host/lstorage";
 import { SockdriveBackendName, initSlice, sockdriveBackendNames } from "../store/init";
 
-export function BackendSelect() {
+export function BackendSelect(props: { multiline?: boolean }) {
     const locked = useSelector((state: State) => state.dos.backendLocked);
     return <OptionSelect
+        multiline={props.multiline}
         label="emulation_backend"
         values={[...BackendValues]}
         disabled={locked}
@@ -25,9 +26,10 @@ export function BackendSelect() {
     />;
 }
 
-export function RenderSelect() {
+export function RenderSelect(props: { multiline?: boolean }) {
     const disabled = useSelector((state: State) => state.ui.window) === "run";
     return <OptionSelect
+        multiline={props.multiline}
         label="render_backend"
         values={[...RenderBackendValues]}
         disabled={disabled}
diff --git a/src/frame/account-frame.tsx b/src/frame/account-frame.tsx
index 76d6d4d2..cbb4e0fe 100644
--- a/src/frame/account-frame.tsx
+++ b/src/frame/account-frame.tsx
@@ -24,11 +24,28 @@ export function AccountFrame(props: {}) {
     return <div class="account-frame frame-root items-center">
         {account.picture !== null &&
             <img class="account-img" src={account.picture} />}
-        <div>{account.name ?? account.email}</div>
-        {account.name !== null && <div class="account-email">{account.email}</div>}
-        <button class="btn mt-8" onClick={logout}>{t("logout")}</button>
+        <div class="font-bold flex flex-row">
+            {account.picture === null &&
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 mr-2">
+                    <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25
+                        0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786
+                        0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" />
+                </svg>}
+            {account.name ?? account.email}
+        </div>
+        <button class="btn mt-8 w-full" onClick={logout}>{t("logout")}</button>
 
-        <div class="mt-8 mb-4 text-2xl">{t("features")}</div>
+        <div class="mt-8 mb-4 flex flex-row items-center">
+            <div class="text-2xl">{t("features")}</div>
+            <div class="ml-2 cursor-pointer self-end text-primary" onClick={openPremiumPage}>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025
+                                4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45
+                                1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+                </svg>
+            </div>
+        </div>
         <PremiumPlan />
     </div>;
 }
@@ -95,7 +112,7 @@ function PremiumPlan(props: {}) {
     return <div class={"premium-plan-root " + (account.premium ? "have-premium" : "")}>
         <div class="premium-plan-head flex">
             { account.premium && <PremiumCheck /> }
-            {t("premium")}
+            <div class="cursor-pointer underline" onClick={openPremiumPage}>{t("premium")}</div>
             <div class="flex-grow"></div>
             {account.premium &&
                 <button
@@ -159,3 +176,7 @@ function PremiumCheck(props: {}) {
         <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
     </svg>;
 }
+
+function openPremiumPage() {
+    window.open("https://js-dos.com/cloud-overview.html", "_blank");
+}
diff --git a/src/frame/editor/editor-conf-frame.tsx b/src/frame/editor/editor-conf-frame.tsx
index 036a46b0..67ff2eec 100644
--- a/src/frame/editor/editor-conf-frame.tsx
+++ b/src/frame/editor/editor-conf-frame.tsx
@@ -96,6 +96,7 @@ export function EditorConf() {
         dispatch(dosSlice.actions.mouseCapture(newConf.indexOf("autolock=true") > 0));
         dispatch(editorSlice.actions.dosboxConf(newConf));
         dispatch(dosSlice.actions.dosBackendLocked(newConf.indexOf("sockdrive") >= 0));
+        dispatch(dosSlice.actions.noCursor(newConf.indexOf("sockdrive") >= 0));
     }
 
     if (bundleConfig === null) {
diff --git a/src/frame/frame.css b/src/frame/frame.css
index bd88fb82..8582a013 100644
--- a/src/frame/frame.css
+++ b/src/frame/frame.css
@@ -19,7 +19,7 @@
   }
 
   .premium-plan-root {
-    @apply bg-white rounded-xl px-4 pt-4 pb-2 w-64;
+    @apply bg-white rounded-xl px-4 pt-4 pb-2 w-full;
   }
 
   .premium-plan-root.have-premium {
@@ -47,7 +47,7 @@
     @apply border-b-green-300;
   }
 
-  .settings-frame {
+  .settings-frame, .prerun-frame {
     @apply px-6 -mt-2;
 
     .label {
@@ -78,6 +78,7 @@
   }
 
   .account-frame {
+    @apply px-6 mt-4;
     .account-img {
       @apply w-24 h-24 my-8 rounded-full;
     }
diff --git a/src/frame/frame.tsx b/src/frame/frame.tsx
index 9a944993..2af41e8a 100644
--- a/src/frame/frame.tsx
+++ b/src/frame/frame.tsx
@@ -9,6 +9,7 @@ import { QuickSaveFrame } from "./quick-save-frame";
 import { SettingsFrame } from "./settings-frame";
 import { StatsFrame } from "./stats-frame";
 import { ImageRenderingFrame } from "./image-rendering-frame";
+import { PreRunFrame } from "./prerun-frame";
 
 export function Frame(props: {}) {
     const frame = useSelector((state: State) => state.ui.frame);
@@ -30,5 +31,6 @@ export function Frame(props: {}) {
         { frame === "fat-drives" && <FatDrivesFrame /> }
         { frame === "quick-save" && <QuickSaveFrame /> }
         { frame === "image-rendering" && <ImageRenderingFrame /> }
+        { frame === "prerun" && <PreRunFrame /> }
     </div>;
 };
diff --git a/src/frame/prerun-frame.tsx b/src/frame/prerun-frame.tsx
new file mode 100644
index 00000000..e7e53262
--- /dev/null
+++ b/src/frame/prerun-frame.tsx
@@ -0,0 +1,29 @@
+import { Editor, HardwareCheckbox, MirroredControls, MobileControls,
+    MouseCapture,
+    SockdriveWrite,
+    SystemCursor,
+    WorkerCheckbox } from "../components/dos-option-checkbox";
+import { BackendSelect, RenderAspectSelect, RenderSelect, ThemeSelect } from "../components/dos-option-select";
+import { MouseSensitiviySlider, ScaleControlsSlider, VolumeSlider } from "../components/dos-option-slider";
+import { Play } from "../window/prerun-window";
+
+export function PreRunFrame(props: {}) {
+    return <div class="prerun-frame frame-root items-start pl-4">
+        <Play button={true} />
+        <SystemCursor />
+        <MouseCapture />
+        <MobileControls />
+        <MirroredControls />
+        <ScaleControlsSlider class="mt-4" />
+        <MouseSensitiviySlider />
+        <VolumeSlider />
+        <BackendSelect multiline={true} />
+        <WorkerCheckbox />
+        <RenderSelect multiline={true} />
+        <RenderAspectSelect multiline={true} />
+        <HardwareCheckbox />
+        <SockdriveWrite />
+        <Editor />
+        <ThemeSelect multiline={true} />
+    </div>;
+}
diff --git a/src/frame/settings-frame.tsx b/src/frame/settings-frame.tsx
index ed281b7a..8cde0c09 100644
--- a/src/frame/settings-frame.tsx
+++ b/src/frame/settings-frame.tsx
@@ -1,18 +1,18 @@
-import { Editor, MirroredControls, MobileControls,
-    MouseCapture, PauseCheckbox } from "../components/dos-option-checkbox";
+import { MirroredControls, MobileControls,
+    MouseCapture, SystemCursor, PauseCheckbox } from "../components/dos-option-checkbox";
 import { ThemeSelect } from "../components/dos-option-select";
 import { MouseSensitiviySlider, ScaleControlsSlider, VolumeSlider } from "../components/dos-option-slider";
 
 export function SettingsFrame(props: {}) {
     return <div class="settings-frame frame-root items-start pl-4">
         <PauseCheckbox />
+        <SystemCursor />
         <MouseCapture />
         <MobileControls />
         <MirroredControls />
         <ScaleControlsSlider class="mt-4" />
         <MouseSensitiviySlider />
         <VolumeSlider />
-        <Editor />
         <ThemeSelect multiline={true} />
     </div>;
 }
diff --git a/src/i18n.ts b/src/i18n.ts
index 8da8408c..90797bda 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -79,8 +79,14 @@ const translations: {[lang: string]: {[key: string]: string} } = {
         hardware: "Аппаратное ускорение",
         net_drives: "Сетевые диски",
         fat_write: "FAT запись",
+        play: "Запустить",
+        prerun_line: "Вы можете изменить настройки плеера (например, чувствительность мыши) нажав",
+        system_cursor: "Системный курсор",
     },
     en: {
+        play: "Start",
+        prerun_line: "You can change player settings such as mouse sensitivity by pressing",
+        system_cursor: "System cursor",
         mobile_controls: "Mobile controls",
         mirrored_controls: "Mirror controls",
         scale_controls: "Scale controls",
diff --git a/src/load.ts b/src/load.ts
index b128315b..abc41a40 100644
--- a/src/load.ts
+++ b/src/load.ts
@@ -127,6 +127,7 @@ function syncWithConfig(config: DosConfig, dispatch: Dispatch) {
     if (config.dosboxConf.indexOf("sockdrive") >= 0) {
         dispatch(dosSlice.actions.dosBackendLocked(true));
         dispatch(dosSlice.actions.dosBackend("dosboxX"));
+        dispatch(dosSlice.actions.noCursor(true));
     }
     dispatch(dosSlice.actions.mouseCapture(config.dosboxConf.indexOf("autolock=true") >= 0));
 }
diff --git a/src/main.tsx b/src/main.tsx
index 5d0fe667..f5c90a9b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -155,6 +155,10 @@ export const Dos: DosFn = (element: HTMLDivElement,
         store.dispatch(dosSlice.actions.mouseSensitivity(sensitivity));
     }
 
+    function setNoCursor(noCursor: boolean) {
+        store.dispatch(dosSlice.actions.noCursor(noCursor));
+    }
+
     if (options.theme) {
         setTheme(options.theme);
     }
@@ -235,6 +239,10 @@ export const Dos: DosFn = (element: HTMLDivElement,
         setMouseSensitivity(options.mouseSensitivity);
     }
 
+    if (options.noCursor !== undefined) {
+        setNoCursor(options.noCursor);
+    }
+
     render(
         <Provider store={store}>
             {<Ui /> as any}
@@ -264,6 +272,7 @@ export const Dos: DosFn = (element: HTMLDivElement,
         setPaused,
         setScaleControls,
         setMouseSensitivity,
+        setNoCursor,
 
         stop: async () => {
             store.dispatch(uiSlice.actions.hidden(true));
diff --git a/src/public/types.ts b/src/public/types.ts
index abe5eb91..467f6ff4 100644
--- a/src/public/types.ts
+++ b/src/public/types.ts
@@ -37,6 +37,7 @@ export interface DosOptions {
     noCloud: boolean,
     scaleControls: number,
     mouseSensitivity: number,
+    noCursor: boolean,
 }
 
 export interface DosProps {
@@ -61,6 +62,7 @@ export interface DosProps {
     setPaused(pause: boolean): void;
     setScaleControls(scaleControls: number): void;
     setMouseSensitivity(mouseSensitivity: number): void;
+    setNoCursor(noCursor: boolean): void;
 
     stop(): Promise<void>;
 }
diff --git a/src/sidebar/sidebar-button.tsx b/src/sidebar/sidebar-button.tsx
index 1c9ca699..9f89e0b9 100644
--- a/src/sidebar/sidebar-button.tsx
+++ b/src/sidebar/sidebar-button.tsx
@@ -257,3 +257,30 @@ export function SoftKeyboardButton(props: {
     </div>;
     /* eslint-enable max-len */
 }
+
+export function PreRunButton(props: { class?: string }) {
+    return <SidebarButton
+        class={props.class}
+        frame="prerun"
+        action={uiSlice.actions.framePreRun()}
+    >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none"
+            viewBox="0 0 24 24" stroke-width="1.5"
+            stroke="currentColor" class="w-full h-full">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55
+                0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257
+                1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26
+                1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010
+                .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298
+                2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0
+                01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55
+                0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0
+                01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0
+                01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932
+                6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0
+                01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072
+                1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+    </SidebarButton>;
+}
diff --git a/src/sidebar/sidebar.tsx b/src/sidebar/sidebar.tsx
index 2e589835..bae10d1c 100644
--- a/src/sidebar/sidebar.tsx
+++ b/src/sidebar/sidebar.tsx
@@ -8,6 +8,7 @@ import {
     DosboxConfButton, SettingsButton, CyclesButton, FsButton,
     FatDrivesButton, QuickSaveButton, ImageRenderingButton, HddLed,
     SoftKeyboardButton,
+    PreRunButton,
 } from "./sidebar-button";
 import { pointer } from "../window/dos/controls/mouse/pointer";
 
@@ -36,7 +37,8 @@ export function SideBar(props: {}) {
         {window === "run" && <FullscreenButton />}
         {window === "run" && <CyclesButton />}
         {window === "run" && <HddLed />}
-        {(window === "prerun" || window === "run") && <SettingsButton />}
+        {window === "prerun" && <PreRunButton />}
+        {window === "run" && <SettingsButton />}
         {window !== "run" && cloud && <AccountButton />}
     </div>;
 };
diff --git a/src/store.tsx b/src/store.tsx
index 30df970f..7d9571f0 100644
--- a/src/store.tsx
+++ b/src/store.tsx
@@ -116,4 +116,4 @@ export function postJsDosEvent(nonSerializableStore: NonSerializableStore, event
             nonSerializableStore.options.onEvent?.(event, ci);
         }, 4);
     }
-};
+}
diff --git a/src/store/dos.ts b/src/store/dos.ts
index b60bca2f..f9ddd918 100644
--- a/src/store/dos.ts
+++ b/src/store/dos.ts
@@ -81,6 +81,7 @@ const initialState: {
     softKeyboardLayout: string[],
     softKeyboardSymbols: {[key: string]: string}[],
     softKeyboardActiveSymbols: number,
+    noCursor: boolean,
 } = {
     step: "emu-init",
     emuVersion: "-",
@@ -173,6 +174,7 @@ const initialState: {
         },
     ],
     softKeyboardActiveSymbols: 0,
+    noCursor: false,
 };
 
 export type DosState = typeof initialState;
@@ -333,6 +335,9 @@ export const dosSlice = createSlice({
         softKeyboardActiveSymbols: (s, a: { payload: number }) => {
             s.softKeyboardActiveSymbols = a.payload;
         },
+        noCursor: (s, a: { payload: boolean }) => {
+            s.noCursor = a.payload;
+        },
     },
 });
 
diff --git a/src/store/ui.ts b/src/store/ui.ts
index 184d8a6b..c0fe58c7 100644
--- a/src/store/ui.ts
+++ b/src/store/ui.ts
@@ -12,7 +12,8 @@ export type Theme = typeof ThemeValues[number];
 
 export type Frame = "none" | "account" | "settings" |
     "editor-conf" | "editor-fs" | "network" |
-    "stats" | "fat-drives" | "quick-save" | "image-rendering";
+    "stats" | "fat-drives" | "quick-save" | "image-rendering" |
+    "prerun";
 
 const initialState: {
     hidden: boolean,
@@ -116,6 +117,10 @@ export const uiSlice = createSlice({
             state.frame = "image-rendering";
             state.frameXs = false;
         },
+        framePreRun: (state) => {
+            state.frame = "prerun";
+            state.frameXs = false;
+        },
         windowSelect: (state) => {
             state.window = "select";
         },
diff --git a/src/window/dos/dos-window.tsx b/src/window/dos/dos-window.tsx
index 6593117f..2e06ceb8 100644
--- a/src/window/dos/dos-window.tsx
+++ b/src/window/dos/dos-window.tsx
@@ -24,6 +24,7 @@ export function DosWindow(props: {
     const worker = useSelector((state: State) => state.dos.worker);
     const backend = useSelector((state: State) => state.dos.backend);
     const backendHardware = useSelector((state: State) => state.dos.backendHardware);
+    const noCursor = useSelector((state: State) => state.dos.noCursor);
     const dispatch = useDispatch();
     const nonSerializableStore = useNonSerializableStore();
 
@@ -86,7 +87,7 @@ export function DosWindow(props: {
 
     return <div class="flex flex-col flex-grow h-full overflow-hidden">
         <div class="bg-black h-full flex-grow overflow-hidden relative">
-            <canvas ref={canvasRef} />
+            <canvas class={ noCursor ? "cursor-none" : "" } ref={canvasRef} />
             {canvasRef.current && ci && <DosRuntime canvas={canvasRef.current} ci={ci} />}
         </div>
         <SoftKeyboard ci={ci} />
diff --git a/src/window/prerun-window.tsx b/src/window/prerun-window.tsx
index a8dd34bc..b017a7d3 100644
--- a/src/window/prerun-window.tsx
+++ b/src/window/prerun-window.tsx
@@ -1,97 +1,53 @@
 import { useDispatch, useSelector } from "react-redux";
-import { BackendSelect, RenderAspectSelect, RenderSelect } from "../components/dos-option-select";
 import { dosSlice } from "../store/dos";
 import { State, useNonSerializableStore } from "../store";
-import { HardwareCheckbox, MouseCapture, SockdriveWrite, WorkerCheckbox } from "../components/dos-option-checkbox";
-import { MouseSensitiviySlider, ScaleControlsSlider, VolumeSlider } from "../components/dos-option-slider";
 import { useT } from "../i18n";
-import { dispatchLoginAction } from "../store/ui";
+import { uiSlice } from "../store/ui";
 import { Emulators } from "emulators";
 
 declare const emulators: Emulators;
 
 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 noCloud = useSelector((state: State) => state.ui.noCloud);
     const t = useT();
 
-    function login() {
-        dispatchLoginAction(account, dispatch);
-    }
-
-    function openPremiumPage() {
-        window.open("https://js-dos.com/cloud-overview.html", "_blank");
-    }
-
     return <div class="pre-run-window">
-        <Play class="mb-8" />
+        <Play />
+        <div class="mt-4 flex float items-center">
+            {t("prerun_line")}
 
-        {!noCloud && !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">
-                        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25
-                             0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786
-                             0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" />
-                    </svg>
-
-                    {t("please_login")}
-                </div>
-                <div class="ml-2 cursor-pointer" onClick={openPremiumPage}>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                        stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025
-                                 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45
-                                 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
-                    </svg>
-                </div>
-            </div>
-        }
-        {!noCloud && !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">
-                        <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25
-                             0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786
-                             0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" />
-                    </svg>
-
-                    {account.name ?? account.email}
-                </div>
-            </div>
-        }
-
-        <div class="flex flex-row flex-wrap justify-end">
-            <div class="flex flex-col items-end">
-                <BackendSelect />
-                <RenderSelect />
-                <SockdriveWrite />
-            </div>
-            <div class="ml-10 flex flex-col items-end">
-                <HardwareCheckbox />
-                <WorkerCheckbox />
-                <RenderAspectSelect />
-                <MouseCapture />
-            </div>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none"
+                viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="w-5 h-5 mx-1 cursor-pointer text-primary flex-shrink-0"
+                onClick={() => dispatch(uiSlice.actions.framePreRun())}>
+                <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55
+                        0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257
+                        1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26
+                        1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010
+                        .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298
+                        2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0
+                        01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55
+                        0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0
+                        01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0
+                        01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932
+                        6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0
+                        01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072
+                        1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
         </div>
-
-        <MouseSensitiviySlider class="mt-4 w-full max-w-sm" />
-        <ScaleControlsSlider class="w-full max-w-sm" />
-        <VolumeSlider class="w-full max-w-sm" />
-
-        <div class="text-center mt-8">jsdos/emu version:&nbsp;
+        <div class="text-center mt-8 absolute bottom-4">jsdos/emu version:&nbsp;
             <span class="text-ellipsis overflow-hidden">{JSDOS_VERSION}/{emuVersion}</span></div>
     </div>;
 }
 
-function Play(props: { class?: string }) {
+export function Play(props: { class?: string, button?: boolean }) {
     const configChanged = useSelector((state: State) => state.editor.configChanged);
     const bundleConfig = useSelector((state: State) => state.editor.bundleConfig);
     const nonSerializableStore = useNonSerializableStore();
     const dispatch = useDispatch();
+    const t = useT();
 
     async function onPlay() {
         if (configChanged) {
@@ -113,12 +69,25 @@ function Play(props: { class?: string }) {
         }
     }
 
-    return <div class={props.class + " cursor-pointer"} onClick={onPlay}>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-            stroke-width="1.5" stroke="currentColor" class="w-48 h-48 play-button">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15.91 11.672a.375.375 0 010
+    if (props.button === true) {
+        return <div class="btn btn-accent w-full sm:hidden" onClick={onPlay}>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+                <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25
+                        0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786
+                        0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" />
+            </svg>
+
+            {t("play")}
+        </div>;
+    } else {
+        return <div class={props.class + " cursor-pointer w-1/4 h-1/4 min-w-48 " +
+            "min-h-48 max-w-96 max-h-96"} onClick={onPlay}>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                stroke-width="1.5" stroke="currentColor" class="w-full h-full play-button">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15.91 11.672a.375.375 0 010
                 .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z" />
-        </svg>
-    </div>;
+            </svg>
+        </div>;
+    }
 }