v8.1.18: refactored pre-run window, noCursor option

caiiiycuk · Aug 28, 2024 · ae5084a · ae5084a
1 parent b6121a5
commit ae5084a
Show file tree

Hide file tree

Showing 21 changed files with 190 additions and 94 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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} />
-Original file line number
+Diff line change
@@ Expand Up @@
                 nonSerializableStore.options.onEvent?.(event, ci);
             }, 4);
         }
-    };
+    }