js-dos 7.4.9 → 8.1.0

package/src/components/dos-option-select.tsx

@@ -0,0 +1,108 @@
+import { useDispatch, useSelector } from "react-redux";
+import { useT } from "../i18n";
+import { State } from "../store";
+import { Select } from "./select";
+import { AnyAction } from "@reduxjs/toolkit";
+import {
+    Backend, BackendValues, dosSlice, ImageRendering, ImageRenderingValues, RenderAspect, RenderAspectValues,
+    RenderBackend, RenderBackendValues,
+} from "../store/dos";
+import { ThemeValues, Theme, uiSlice } from "../store/ui";
+import { lStorage } from "../host/lstorage";
+import { SockdriveBackendName, initSlice, sockdriveBackendNames } from "../store/init";
+
+export function BackendSelect() {
+    const locked = useSelector((state: State) => state.dos.backendLocked);
+    return <OptionSelect
+        label="emulation_backend"
+        values={[...BackendValues]}
+        disabled={locked}
+        selector={(state: State) => state.dos.backend}
+        dispatch={(newValue: Backend) => {
+            lStorage.setItem("backend", newValue);
+            return dosSlice.actions.dosBackend(newValue);
+        }}
+    />;
+}
+
+export function RenderSelect() {
+    const disabled = useSelector((state: State) => state.ui.window) === "run";
+    return <OptionSelect
+        label="render_backend"
+        values={[...RenderBackendValues]}
+        disabled={disabled}
+        selector={(state: State) => state.dos.renderBackend}
+        dispatch={(newValue: RenderBackend) => dosSlice.actions.renderBackend(newValue)}
+    />;
+}
+
+export function RenderAspectSelect(props: { multiline?: boolean }) {
+    return <OptionSelect
+        label="render_aspect"
+        multiline={props.multiline}
+        values={[...RenderAspectValues]}
+        selector={(state: State) => state.dos.renderAspect}
+        dispatch={(newValue: RenderAspect) => dosSlice.actions.renderAspect(newValue)}
+    />;
+}
+
+export function ImageRenderingSelect(props: { multiline?: boolean }) {
+    return <OptionSelect
+        label="image_rendering"
+        multiline={props.multiline}
+        values={[...ImageRenderingValues]}
+        selector={(state: State) => state.dos.imageRendering}
+        dispatch={(newValue: ImageRendering) => dosSlice.actions.imageRendering(newValue)}
+    />;
+}
+
+export function ThemeSelect(props: { class?: string, multiline?: boolean }) {
+    return <OptionSelect
+        class={props.class}
+        label="theme"
+        values={[...ThemeValues]}
+        selector={(state: State) => state.ui.theme}
+        dispatch={(newValue: Theme) => uiSlice.actions.theme(newValue)}
+        multiline={props.multiline}
+    />;
+}
+
+export function SockdriveBackend(props: { class?: string, multiline?: boolean }) {
+    return <OptionSelect<SockdriveBackendName>
+        class={props.class}
+        label="FAT16/32 Backend"
+        values={sockdriveBackendNames}
+        selector={(state: State) => state.init.sockdriveBackendName}
+        dispatch={(newValue) => initSlice.actions.setSockdriveBackendName(newValue)}
+        multiline={props.multiline}
+    />;
+}
+
+function OptionSelect<T>(props: {
+    class?: string,
+    selectClass?: string,
+    label: string,
+    values: string[]
+    selector: (state: State) => T,
+    dispatch: (newValue: T) => AnyAction;
+    disabled?: boolean,
+    multiline?: boolean,
+}) {
+    const t = useT();
+    const value = useSelector(props.selector);
+    const dispatch = useDispatch();
+
+    function onBackend(newValue: T) {
+        dispatch(props.dispatch(newValue));
+    }
+    return <Select
+        class={"mt-4 " + props.class}
+        selectClass={props.selectClass}
+        disabled={props.disabled}
+        multiline={props.multiline}
+        label={t(props.label)}
+        selected={value as string}
+        values={props.values}
+        onSelect={onBackend as any} />;
+}
+

package/src/components/dos-option-slider.tsx

@@ -0,0 +1,35 @@
+import { useDispatch, useSelector } from "react-redux";
+import { useT } from "../i18n";
+import { dosSlice } from "../store/dos";
+import { Slider } from "./slider";
+import { State } from "../store";
+
+export function MouseSensitiviySlider(props: {
+    class?: string,
+}) {
+    const t = useT();
+    const sensitivity = useSelector((state: State) => state.dos.mouseSensitivity);
+    const dispatch = useDispatch();
+
+    return <Slider
+        class={"mt-4 " + props.class}
+        label={t("mouse_sensitivity")}
+        value={sensitivity}
+        onChange={(value) => dispatch(dosSlice.actions.mouseSensitivity(value)) }
+    />;
+}
+
+export function VolumeSlider(props: {
+    class?: string,
+}) {
+    const t = useT();
+    const volume = useSelector((state: State) => state.dos.volume);
+    const dispatch = useDispatch();
+
+    return <Slider
+        class={props.class}
+        label={t("volume")}
+        value={volume}
+        onChange={(value) => dispatch(dosSlice.actions.volume(value)) }
+    />;
+}

package/src/components/error.tsx

@@ -0,0 +1,16 @@
+import { useT } from "../i18n";
+
+export function Error(props: {
+    error?: string | null,
+    onSkip?: () => void,
+}) {
+    const t = useT();
+    const error = props.error ?? "Unexpected error";
+
+    return <div class="flex-grow flex flex-col items-center justify-center px-8 m-auto">
+        <div class="text-2xl text-center">{t("error")}</div>
+        <div class="text-red-400 mt-8 text-2xl text-center">"{error}"</div>
+        <div class="mt-8 text-sm text-center">{t("consult_logs")}</div>
+        { props.onSkip && <button class="mt-8 btn-primary" onClick={props.onSkip}>{t("skip")}</button> }
+    </div>;
+}

package/src/components/loading.tsx

@@ -0,0 +1,26 @@
+export function Loading(props: {
+    head: string,
+    message: string,
+}) {
+    const { head, message } = props;
+
+    return <div class="flex flex-col items-center justify-center frame-color px-8">
+        <div class="text-2xl text-center">{head}</div>
+        <div class="mt-2 text-center">{message}</div>
+    </div>;
+}
+
+export function formatSize(size: number) {
+    if (size < 1024) {
+        return size + "b";
+    }
+
+    size /= 1024;
+
+    if (size < 1024) {
+        return Math.round(size) + "kb";
+    }
+
+    size /= 1024;
+    return Math.round(size * 10) / 10 + "mb";
+}

package/src/components/lock.tsx

@@ -0,0 +1,10 @@
+export function LockBadge(props: {
+    class?: string,
+}) {
+    return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+        class={ props.class ?? "absolute left-0 top-0 -ml-1 -mt-1 text-error w-4 h-4" }>
+        <path fill-rule="evenodd" d="M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003
+                    3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75
+                    8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z" clip-rule="evenodd" />
+    </svg>;
+}

package/src/components/select.tsx

@@ -0,0 +1,33 @@
+import { useT } from "../i18n";
+
+export function Select(props: {
+    class?: string,
+    selectClass?: string,
+    label: string,
+    selected: string,
+    values: string[],
+    onSelect?: (value: string) => void,
+    disabled?: boolean,
+    multiline?: boolean,
+}) {
+    const t = useT();
+    const multiline = props.multiline === true;
+    function onSelect(e: any) {
+        if (props.onSelect !== undefined) {
+            props.onSelect(e.currentTarget.value);
+        }
+    }
+    return <div class={props.class + " option flex " +
+        (multiline ? "flex-col" : "flex-row items-center")}>
+        <div class={ multiline ? "mb-2" : "mr-4" }>{props.label}</div>
+        <div class="flex-grow">
+            <select class={ props.selectClass ? props.selectClass :
+                (multiline ? "w-full" : "w-28") }
+            onChange={onSelect} disabled={props.disabled === true}>
+                {props.values.map((v) => {
+                    return <option selected={v === props.selected} value={v}>{t(v)}</option>;
+                })}
+            </select>
+        </div>
+    </div>;
+}

package/src/components/slider.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useRef } from "preact/hooks";
+
+export function Slider(props: {
+    class?: string,
+    label: string,
+    value: number,
+    onChange: (value: number) => void,
+}) {
+    const sliderRef = useRef<HTMLDivElement>(null);
+    const pointRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (sliderRef?.current === null) {
+            return;
+        }
+
+        const sliderEl = sliderRef.current;
+
+        let pressed = false;
+        function updatePercent(e: PointerEvent) {
+            const boundingRect = sliderEl.getBoundingClientRect();
+            const percent = Math.min(1, Math.max(0,
+                (e.clientX - boundingRect.left) / boundingRect.width));
+            props.onChange(percent);
+        }
+
+        function onPointerDown(e: PointerEvent) {
+            pressed = true;
+            updatePercent(e);
+        }
+        function onPointerMove(e: PointerEvent) {
+            if (!pressed) {
+                return;
+            }
+
+            updatePercent(e);
+        }
+
+        function onPointerUp(e: PointerEvent) {
+            pressed = false;
+        }
+
+
+        sliderEl.addEventListener("pointerdown", onPointerDown);
+        sliderEl.addEventListener("pointermove", onPointerMove);
+        sliderEl.addEventListener("pointerup", onPointerUp);
+        sliderEl.addEventListener("pointercancel", onPointerUp);
+        sliderEl.addEventListener("pointerleave", onPointerUp);
+
+        return () => {
+            sliderEl.removeEventListener("pointerdown", onPointerDown);
+            sliderEl.removeEventListener("pointermove", onPointerMove);
+            sliderEl.removeEventListener("pointerup", onPointerUp);
+            sliderEl.removeEventListener("pointercancel", onPointerUp);
+            sliderEl.removeEventListener("pointerleave", onPointerUp);
+        };
+    }, [sliderRef]);
+
+    const percent = Math.min(Math.max(0, props.value * 100), 100);
+
+    return <div class={props.class + " slider option"}>
+        <div class="label">{props.label}</div>
+        <div class="touch" ref={sliderRef}>
+            <div class="bg"></div>
+            <div class="point" ref={pointRef}
+                style={{ left: "calc(" + percent + "%" + " - 12px)" }}></div>
+        </div>
+    </div>;
+}

package/src/download-file.ts

@@ -0,0 +1,18 @@
+export function downloadUrlToFs(fileName: string, url: string, targetBlank = true) {
+    const a = document.createElement("a");
+    a.href = url;
+    a.target = targetBlank ? "_blank" : "_self";
+    a.download = fileName;
+    a.style.display = "none";
+    document.body.appendChild(a);
+
+    a.click();
+    a.remove();
+}
+
+export function downloadArrayToFs(fileName: string, data: Uint8Array) {
+    const blob = new Blob([data], {
+        type: "application/zip",
+    });
+    downloadUrlToFs(fileName, URL.createObjectURL(blob));
+}

package/src/frame/account-frame.tsx

@@ -0,0 +1,156 @@
+import { useDispatch, useSelector } from "react-redux";
+import { useState } from "preact/hooks";
+import { uiSlice } from "../store/ui";
+import { authSlice } from "../store/auth";
+import { useT } from "../i18n";
+import { State } from "../store";
+import { linkToBuy, cancle as cancelSubscription } from "../v8/subscriptions";
+import { cancelSubscriptionPage } from "../v8/config";
+
+export function AccountFrame(props: {}) {
+    const t = useT();
+    const account = useSelector((state: State) => state.auth.account);
+    const dispatch = useDispatch();
+
+    if (account === null) {
+        return null;
+    }
+
+    function logout() {
+        dispatch(authSlice.actions.logout({}));
+        dispatch(uiSlice.actions.frameNone());
+    }
+
+    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="mt-8 mb-4 text-2xl">{t("features")}</div>
+        <PremiumPlan />
+    </div>;
+}
+
+function PremiumPlan(props: {}) {
+    const t = useT();
+    const lang = useSelector((state: State) => state.i18n.lang);
+    const account = useSelector((state: State) => state.auth.account);
+    const [locked, setLocked] = useState<boolean>(false);
+    const dispatch = useDispatch();
+
+    if (account === null) {
+        return null;
+    }
+
+    const token = account.token.access_token;
+    function onBuy() {
+        if (locked) {
+            return;
+        }
+
+        setLocked(true);
+        linkToBuy(token)
+            .then((link) => {
+                if (link !== null) {
+                    window.open(link, "_blank");
+                }
+            })
+            .catch(console.error)
+            .finally(() => setLocked(false));
+    }
+
+    async function cancle() {
+        const openPage = () => {
+            dispatch(uiSlice.actions.showToast({
+                message: t("unable_to_cancle_subscription"),
+                intent: "error",
+            }));
+            window.open(cancelSubscriptionPage[lang] ?? cancelSubscriptionPage.en, "_blank");
+        };
+        if (!account) {
+            openPage();
+        } else {
+            try {
+                if (await cancelSubscription(account.token.access_token)) {
+                    dispatch(uiSlice.actions.showToast({
+                        message: t("subscription_cancelled"),
+                        intent: "success",
+                    }));
+                } else {
+                    openPage();
+                }
+            } catch (e) {
+                openPage();
+            }
+        }
+    }
+
+    return <div class={"premium-plan-root " + (account.premium ? "have-premium" : "")}>
+        <div class="premium-plan-head flex">
+            <PremiumCheck />
+            {t("premium")}
+            <div class="flex-grow"></div>
+            {account.premium &&
+                <button
+                    onClick={cancle}
+                    class="ml-2 btn btn-ghost btn-xs text-success-content">
+                    {t("cancle")}
+                </button>}
+        </div>
+        {!account.premium &&
+            <>
+                <div class="flex flex-row my-6 items-top">
+                    <div class="premium-plan-cost">
+                        $3
+                    </div>
+                    <div class="premium-plan-cost-expl">
+                        <div>USD / mo</div>
+                        <div><span class="text-blue-600">5</span> {t("try_free")}</div>
+                    </div>
+                </div>
+                <button class={"btn btn-primary w-full " + (locked ? "hidden" : "")} onClick={onBuy}>
+                    {t("buy")}
+                </button>
+            </>
+        }
+        <div class="flex flex-col mt-4">
+            <div class="premium-plan-highlight">
+                <PremiumCheck />
+                <div>{t("cloud_saves")}</div>
+            </div>
+            <div class="premium-plan-highlight">
+                <PremiumCheck />
+                <div>{t("experimental_features")}</div>
+            </div>
+            <div class="premium-plan-highlight">
+                <PremiumCheck />
+                <div>{t("writeable_fat32")}</div>
+                <div class="flex-grow"></div>
+                <button
+                    onClick={() => dispatch(uiSlice.actions.frameFatDrives())}
+                    target="_blank"
+                    class="ml-2 btn btn-xs text-success-content">
+                    {t("manage")}
+                </button>
+            </div>
+            <div class="premium-plan-highlight">
+                <PremiumCheck />
+                <div>{t("net_no_limits")}</div>
+            </div>
+            <div class="premium-plan-highlight" style="border-bottom: 0px">
+                <PremiumCheck />
+                <div>{t("unlock_options")}</div>
+            </div>
+        </div>
+    </div>;
+}
+
+function PremiumCheck(props: {}) {
+    return <svg xmlns="http://www.w3.org/2000/svg"
+        fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        class="mr-4 w-6 h-6 text-blue-500 flex-shrink-0">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+    </svg>;
+}