js-dos 8.1.4 → 8.1.6

package/src/sidebar/cloud-save-button.tsx

@@ -1,89 +0,0 @@
-import { useState } from "preact/hooks";
-import { useDispatch, useSelector } from "react-redux";
-import { LockBadge } from "../components/lock";
-import { State, useNonSerializableStore } from "../store";
-import { uiSlice } from "../store/ui";
-import { DisketteIcon } from "./diskette-icon";
-import { useT } from "../i18n";
-import { putChanges } from "../v8/changes";
-
-export function CloudSaveButton(props: {
-    class?: string,
-}) {
-    const [busy, setBusy] = useState<boolean>(false);
-    const account = useSelector((state: State) => state.auth.account);
-    const disabled = account === null && false;
-    const dispatch = useDispatch();
-    const t = useT();
-    const cloudSaves = useSelector((state: State) => state.ui.cloudSaves);
-    const nonSerializableStore = useNonSerializableStore();
-
-    if (!cloudSaves ||
-        nonSerializableStore.loadedBundle === null ||
-        nonSerializableStore.loadedBundle.bundleChangesUrl === null) {
-        return null;
-    }
-
-    async function onClick() {
-        if (disabled) {
-            dispatch(uiSlice.actions.modalLogin());
-            return;
-        }
-
-        if (busy) {
-            return;
-        }
-
-        const ci = nonSerializableStore.ci;
-        const changesUrl = nonSerializableStore.loadedBundle?.bundleChangesUrl;
-
-        if (ci === null || !changesUrl) {
-            return;
-        }
-
-        setBusy(true);
-        try {
-            const changes = await ci.persist(true);
-            if (changes !== null) {
-                if (account === null || !account.premium) {
-                    await nonSerializableStore.cache.put(changesUrl, changes);
-                } else {
-                    await Promise.all([
-                        putChanges(changesUrl, changes),
-                        nonSerializableStore.cache.put(changesUrl, changes),
-                    ]);
-                }
-            }
-
-            dispatch(uiSlice.actions.showToast({
-                message: t("success"),
-                intent: "success",
-            }));
-        } catch (e: any) {
-            dispatch(uiSlice.actions.showToast({
-                message: t("unable_to_save"),
-                intent: "error",
-            }));
-            console.error(e);
-        } finally {
-            setBusy(false);
-        }
-    }
-
-    return <div class={"save-button sidebar-button overflow-hidden " +
-        (busy ? " sidebar-highlight " : "") + props.class +
-        (disabled ? " opacity-50" : "")} onClick={onClick}>
-        <div class="w-full h-full flex justify-center">
-            <DisketteIcon />
-            {busy && <div class="sidebar-badge" />}
-            {disabled && <LockBadge />}
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                stroke-width="1.5" stroke="currentColor"
-                class="absolute bottom-1 w-3 h-3 text-primary-content">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775
-                    5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z" />
-            </svg>
-        </div>
-    </div >;
-}

package/src/sidebar/diskette-icon.tsx

@@ -1,14 +0,0 @@
-export function DisketteIcon(props: {
-    class?: string,
-}) {
-    return <svg xmlns="http://www.w3.org/2000/svg"
-        style="padding: 2px"
-        viewBox="0 0 16 16" enable-background="new 0 0 16 16"
-        fill="currentColor" class={ "w-full h-full rounded-lg " + props.class }>
-        <path fill-rule="evenodd" clip-rule="evenodd"
-            d="M15.71,2.29l-2-2C13.53,0.11,13.28,0,13,0h-1v6H4V0H1C0.45,0,0,0.45,0,1v14
-                c0,0.55,0.45,1,1,1h14c0.55,0,1-0.45,1-1V3C16,2.72,15.89,2.47,15.71,2.29z
-                M14,15H2V9c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1V15
-                z M11,1H9v4h2V1z"/>
-    </svg>;
-}

package/src/sidebar/fullscreen-button.tsx

@@ -1,44 +0,0 @@
-import { useSelector, useStore } from "react-redux";
-import { State, Store } from "../store";
-import { browserSetFullScreen } from "../host/fullscreen";
-
-export function FullscreenButton(props: {
-    class?: string,
-}) {
-    const fullScreen = useSelector((state: State) => state.ui.fullScreen);
-    const store = useStore() as Store;
-
-    function onClick() {
-        browserSetFullScreen(!fullScreen, store);
-    }
-    /* eslint-disable max-len */
-    return <div class={"fullscreen-button sidebar-button " + props.class} onClick={onClick}>
-        <div class={"w-full h-full scale-75 hover:scale-90"}>
-            {!fullScreen &&
-                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-                    viewBox="0 0 16 16" fill="currentColor" stroke="none" enable-background="new 0 0 16 16" >
-                    <g>
-                        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.99,8.99c-0.28,0-0.53,0.11-0.71,0.29l-3.29,3.29v-1.59c0-0.55-0.45-1-1-1
-                                s-1,0.45-1,1v4c0,0.55,0.45,1,1,1h4c0.55,0,1-0.45,1-1s-0.45-1-1-1H3.41L6.7,10.7c0.18-0.18,0.29-0.43,0.29-0.71
-                                C6.99,9.44,6.54,8.99,5.99,8.99z M14.99-0.01h-4c-0.55,0-1,0.45-1,1s0.45,1,1,1h1.59L9.28,5.29C9.1,5.47,8.99,5.72,8.99,5.99
-                                c0,0.55,0.45,1,1,1c0.28,0,0.53-0.11,0.71-0.29l3.29-3.29v1.59c0,0.55,0.45,1,1,1s1-0.45,1-1v-4C15.99,0.44,15.54-0.01,14.99-0.01
-                                z"/>
-                    </g>
-                </svg>
-            }
-            {fullScreen &&
-                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-                    viewBox="0 0 16 16" fill="currentColor" stroke="none" enable-background="new 0 0 16 16">
-                    <g>
-                        <path fill-rule="evenodd" clip-rule="evenodd" d="M15.99,0.99c0-0.55-0.45-1-1-1c-0.28,0-0.53,0.11-0.71,0.29l-3.29,3.29V1.99
-                            c0-0.55-0.45-1-1-1s-1,0.45-1,1v4c0,0.55,0.45,1,1,1h4c0.55,0,1-0.45,1-1s-0.45-1-1-1h-1.59L15.7,1.7
-                            C15.88,1.52,15.99,1.27,15.99,0.99z M5.99,8.99h-4c-0.55,0-1,0.45-1,1s0.45,1,1,1h1.59l-3.29,3.29c-0.18,0.18-0.29,0.43-0.29,0.71
-                            c0,0.55,0.45,1,1,1c0.28,0,0.53-0.11,0.71-0.29l3.29-3.29v1.59c0,0.55,0.45,1,1,1s1-0.45,1-1v-4C6.99,9.44,6.54,8.99,5.99,8.99z"
-                        />
-                    </g>
-                </svg>
-            }
-        </div>
-    </div >;
-    /* eslint-enable max-len */
-}

package/src/sidebar/network-button.tsx

@@ -1,39 +0,0 @@
-import { useDispatch, useSelector } from "react-redux";
-import { State } from "../store";
-import { uiSlice } from "../store/ui";
-
-export function NetworkButton(props: {
-    class?: string,
-}) {
-    const hightlight = useSelector((state: State) => state.ui.frame) === "network";
-    const inactive = useSelector((state: State) => state.dos.network.ipx !== "connected");
-    const dispatch = useDispatch();
-
-    function onClick() {
-        if (hightlight) {
-            dispatch(uiSlice.actions.frameNone());
-        } else {
-            dispatch(uiSlice.actions.frameNetwork());
-        }
-    }
-
-    return <div class={"network-button sidebar-button " +
-        (hightlight ? " sidebar-highlight " : "") +
-        (inactive ? " inactive " : "") +
-        props.class} onClick={onClick}>
-        <div class="w-full h-full">
-            <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="M8.288 15.038a5.25 5.25 0
-                 017.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565
-                 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 011.06 0z" />
-            </svg>
-            { inactive && <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                stroke="currentColor" class="w-full text-error h-full absolute top-0 left-0">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4 4L18 18" />
-            </svg> }
-        </div>
-
-
-    </div >;
-}

package/src/sidebar/sidebar-button.tsx

@@ -1,244 +0,0 @@
-import { AnyAction } from "@reduxjs/toolkit";
-import { useDispatch, useSelector, useStore } from "react-redux";
-import { LockBadge } from "../components/lock";
-import { State, Store } from "../store";
-import { Frame, uiSlice } from "../store/ui";
-import { DisketteIcon } from "./diskette-icon";
-import { useEffect, useRef, useState } from "preact/hooks";
-
-export function ImageRenderingButton(props: {
-    class?: string,
-}) {
-    return <SidebarButton
-        class={props.class}
-        frame="image-rendering"
-        action={uiSlice.actions.frameImageRendering()}
-    >
-        <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="M2.25 15.75l5.159-5.159a2.25 2.25 0
-                    013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0
-                    013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5
-                    1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5
-                    1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75
-                    0 .375.375 0 01.75 0z" />
-        </svg>
-    </SidebarButton>;
-}
-
-export function QuickSaveButton(props: {
-    class?: string,
-}) {
-    const disabled = useSelector((state: State) => state.auth.account) === null && false;
-    const action = disabled ?
-        uiSlice.actions.modalLogin() :
-        uiSlice.actions.frameQuickSave();
-    return <SidebarButton
-        class={props.class + (disabled ? " opacity-50" : "")}
-        frame="quick-save"
-        action={action}
-    >
-        <DisketteIcon />
-        {disabled && <LockBadge />}
-    </SidebarButton>;
-}
-
-export function FatDrivesButton(props: {
-    class?: string,
-}) {
-    return <SidebarButton
-        class={props.class}
-        frame="fat-drives"
-        action={uiSlice.actions.frameFatDrives()}
-    >
-        <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="M5.25 14.25h13.5m-13.5
-                0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3
-                0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062
-                 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0
-                 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3
-                 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" />
-        </svg>
-    </SidebarButton>;
-}
-
-export function DosboxConfButton(props: { class?: string }) {
-    return <SidebarButton
-        class={props.class}
-        frame="editor-conf"
-        action={uiSlice.actions.frameConf()}
-    >
-        <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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125
-                0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5
-                3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504
-                 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
-        </svg>
-    </SidebarButton>;
-}
-
-export function FsButton(props: {
-    class?: string,
-}) {
-    return <SidebarButton
-        class={props.class}
-        frame="editor-fs"
-        action={uiSlice.actions.frameFs()}
-    >
-        <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="M21.75 17.25v-.228a4.5 4.5
-                0 00-.12-1.03l-2.268-9.64a3.375 3.375 0 00-3.285-2.602H7.923a3.375
-                3.375 0 00-3.285 2.602l-2.268 9.64a4.5 4.5 0 00-.12 1.03v.228m19.5 0a3 3
-                0 01-3 3H5.25a3 3 0 01-3-3m19.5 0a3 3 0 00-3-3H5.25a3 3 0 00-3 3m16.5
-                0h.008v.008h-.008v-.008zm-3 0h.008v.008h-.008v-.008z" />
-        </svg>
-    </SidebarButton>;
-}
-
-export function CyclesButton() {
-    const cycles = Math.round(useSelector((state: State) => state.dos.stats.cyclesPerMs) / 1000);
-    return <SidebarButton
-        class="cycles"
-        frame="stats"
-        action={uiSlice.actions.frameStats()}>
-        { cycles <= 0 && <><span>~</span><sup>KC</sup></> }
-        { cycles > 0 && cycles <= 1000 && <><span>{cycles}</span><sup>KC</sup></> }
-        { cycles > 0 && cycles > 1000 && <><span>{Math.round(cycles / 1000)}</span><sup><strong>K</strong>KC</sup></> }
-    </SidebarButton>;
-}
-
-export function HddLed(props: {}) {
-    const store: Store = useStore();
-    const ref = useRef<HTMLDivElement>(null);
-    const [state] = useState<{
-        recv: number, enabled: boolean, delayLedTo: number,
-    }>({ recv: 0, enabled: false, delayLedTo: 0 });
-
-    useEffect(() => {
-        if (ref.current) {
-            const el = ref.current;
-            el.classList.add("bg-base-300");
-
-            const id = setInterval(() => {
-                if (state.delayLedTo <= Date.now()) {
-                    const newRecv = store.getState().dos.stats.driveRecv;
-                    const newEnabled = state.recv !== newRecv;
-                    if (newEnabled !== state.enabled) {
-                        el.classList.remove("bg-base-300", "bg-green-300", "animate-led");
-                        if (newEnabled) {
-                            el.classList.add("bg-green-300", "animate-led");
-                        } else {
-                            el.classList.add("bg-base-300");
-                        }
-                        state.enabled = newEnabled;
-                    }
-
-                    if (newEnabled) {
-                        state.delayLedTo = Date.now() + 300 + Math.random() * 1500;
-                    } else {
-                        state.delayLedTo = 0;
-                    }
-
-                    state.recv = newRecv;
-                }
-            }, 150);
-
-            return () => {
-                el.classList.remove("bg-base-300", "bg-green-300", "animate-led");
-                clearInterval(id);
-            };
-        }
-    }, [ref, state]);
-    const [on, setOn] = useState<boolean>(false);
-    const [off, setOff] = useState<{ recv: number, timeoutId: number | null }>({
-        recv: 0,
-        timeoutId: null,
-    });
-    const statsRecv = useSelector((state: State) => state.dos.stats.driveRecv);
-    if (off.recv !== statsRecv) {
-        if (!on) {
-            setOn(true);
-        }
-
-        if (off.timeoutId) {
-            clearTimeout(off.timeoutId);
-        }
-
-        const id = setTimeout(() => {
-            setOn(false);
-            setOff({
-                recv: statsRecv,
-                timeoutId: null,
-            });
-        }, 1000);
-
-        setOff({
-            recv: statsRecv,
-            timeoutId: id,
-        });
-    }
-    return <div ref={ref} class="self-end mr-2 -mt-3 w-2 h-1"></div>;
-}
-
-export function SettingsButton(props: {
-    class?: string,
-}) {
-    return <SidebarButton
-        class={props.class}
-        action={uiSlice.actions.frameSettings()}
-        frame="settings">
-
-        <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 >;
-}
-
-export function SidebarButton(props: {
-    class?: string,
-    frame: Frame,
-    action: AnyAction,
-    children: any
-}) {
-    const hightlight = useSelector((state: State) => state.ui.frame) === props.frame;
-    const dispatch = useDispatch();
-
-    function onClick() {
-        if (hightlight) {
-            dispatch(uiSlice.actions.frameNone());
-        } else {
-            dispatch(props.action);
-        }
-    }
-
-    return <div class={"sidebar-button " + (hightlight ? "sidebar-highlight " : "") +
-        props.class} onClick={onClick}>
-        {props.children}
-    </div>;
-}

package/src/sidebar/sidebar.css

@@ -1,47 +0,0 @@
-.jsdos-rso {
-  .sidebar {
-    @apply absolute left-0 top-0 h-full flex flex-col items-center py-2 z-10;
-    background: linear-gradient(90deg, hsl(var(--b3)) 0%, hsl(var(--b2)) 100%);
-    width: var(--sidebar-width);
-
-    .contentbar {
-      @apply flex-grow;
-    }
-
-    .sidebar-badge {
-      @apply absolute right-0 bottom-0 w-3 h-3 rounded-full animate-pulse;
-      background-color: hsl(var(--p));
-    }
-
-    .cycles {
-      @apply text-xs overflow-hidden text-right w-full pr-2 mt-1 -mb-2 whitespace-nowrap opacity-50;
-      color: hsl(var(--bc));
-
-      &.higlight,
-      &:hover {
-        color: hsl(var(--af));
-      }
-    }
-
-    .network-button {
-      &.inactive {
-        @apply opacity-50;
-      }
-    }
-  }
-
-  .sidebar-button {
-    @apply cursor-pointer h-8 w-8 my-2 relative;
-    color: hsl(var(--bc));
-  }
-
-  .sidebar-highlight,
-  .sidebar-button:hover {
-    color: hsl(var(--af));
-  }
-
-  .animate-led {
-      animation: pulse 300ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-
-}

package/src/sidebar/sidebar.tsx

@@ -1,30 +0,0 @@
-import { useSelector } from "react-redux";
-import { State } from "../store";
-import { AccountButton } from "./account-button";
-import { FullscreenButton } from "./fullscreen-button";
-import { NetworkButton } from "./network-button";
-import { CloudSaveButton } from "./cloud-save-button";
-import { DosboxConfButton, SettingsButton, CyclesButton, FsButton,
-    FatDrivesButton, QuickSaveButton, ImageRenderingButton, HddLed } from "./sidebar-button";
-
-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);
-
-    return <div class="sidebar">
-        {window === "run" && backend === "dosbox" && <CloudSaveButton />}
-        {window === "run" && backend === "dosboxX" && <QuickSaveButton />}
-        {window === "run" && <ImageRenderingButton />}
-        {window === "run" && <NetworkButton />}
-        {editor && window === "prerun" && <DosboxConfButton />}
-        {editor && window === "prerun" && backend === "dosboxX" && <FatDrivesButton />}
-        {editor && window === "run" && <FsButton />}
-        <div class="contentbar"></div>
-        {window === "run" && <FullscreenButton />}
-        {window === "run" && <CyclesButton />}
-        {window === "run" && <HddLed />}
-        {(window === "prerun" || window === "run") && <SettingsButton />}
-        {window !== "run" && <AccountButton />}
-    </div>;
-};