js-dos 8.1.4 → 8.1.6

package/src/frame/fat-drives-frame.tsx

@@ -1,199 +0,0 @@
-import { useT } from "../i18n";
-import { SockdriveBackend } from "../components/dos-option-select";
-import { useDispatch, useSelector } from "react-redux";
-import { sockdriveBackend } from "../store/init";
-import { State } from "../store";
-import { useEffect, useRef, useState } from "preact/hooks";
-import { dispatchLoginAction, uiSlice } from "../store/ui";
-import { LockBadge } from "../components/lock";
-
-interface Drive {
-    name: string,
-    owner: string
-    fork_of: string[],
-    template: string,
-}
-
-export function FatDrivesFrame() {
-    const t = useT();
-    const account = useSelector((state: State) => state.auth.account);
-    const { sockdriveEndpoint } = useSelector((state: State) =>
-        sockdriveBackend[state.init.sockdriveBackendName] ??
-        sockdriveBackend["js-dos"]);
-    const [myDrives, setMyDrives] = useState<Drive[]>([]);
-    const dispatch = useDispatch();
-    const preimium = account?.premium ?? false;
-    const me = account?.email ?? "";
-    const [filter, setFilter] = useState<string>("");
-    const [busy, setBusy] = useState<boolean>(true);
-    const forkDialogRef = useRef<HTMLDialogElement>(null);
-    const deleteDialogRef = useRef<HTMLDialogElement>(null);
-    const [forkName, setForkName] = useState<string>("");
-    const [deleteConfirm, setDeleteConfirm] = useState<string>("");
-    const [dialogError, setDialogError] = useState<string | null>(null);
-    const [dialogIndex, setDialogIndex] = useState<number>(-1);
-
-
-    function reloadDrives() {
-        if (!account || !account.token) {
-            setMyDrives([]);
-        } else {
-            setBusy(true);
-            fetch(sockdriveEndpoint + "/list/drives/" + account.token.access_token)
-                .then((r) => r.json())
-                .then((drives: Drive[]) => {
-                    setMyDrives(drives.sort((a, b) => a.name.localeCompare(b.name)));
-                })
-                .catch(console.error)
-                .finally(() => setBusy(false));
-        }
-    }
-
-    useEffect(() => {
-        reloadDrives();
-    }, [account?.token, sockdriveEndpoint]);
-
-    return <div class="frame-root items-start gap-3 px-4">
-        <SockdriveBackend multiline={true} class="w-full " />
-        <input class="input input-bordered input-sm w-full" placeholder={t("filter")}
-            value={filter} onChange={(e) => setFilter(e.currentTarget.value ?? "")}></input>
-        <div class="w-full">
-            {!busy && <table class="table w-full">
-                <thead>
-                    <tr>
-                        <th>{t("net_drives")}</th>
-                        <th></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {
-                        // eslint-disable-next-line camelcase
-                        myDrives.map(({ name, owner, fork_of }, index) => {
-                            if (filter.length > 0 &&
-                                owner.indexOf(filter) === -1 && name.indexOf(filter) === -1) {
-                                return null;
-                            }
-                            return <>
-                                <tr>
-                                    <td onClick={() => { }}>
-                                        <p class="font-bold">{name}</p>
-                                        {
-                                            // eslint-disable-next-line camelcase
-                                            fork_of.map((path) => {
-                                                return <p class="text-xs">&nbsp;&nbsp;&nbsp;&nbsp;{path}</p>;
-                                            })}
-                                        {owner !== account?.email &&
-                                            <p class="text-xs">{owner}</p>}
-                                    </td>
-                                    {preimium && <td>
-                                        {account?.token && <div class="btn btn-ghost btn-xs"
-                                            onClick={() => {
-                                                setDialogIndex(index);
-                                                forkDialogRef.current?.showModal();
-                                            }}>Fork</div>}
-                                        {account?.token && owner === me && <div class="btn btn-xs btn-ghost"
-                                            onClick={() => {
-                                                setDialogIndex(index);
-                                                deleteDialogRef.current?.showModal();
-                                            }}>{t("delete")}</div>}
-                                    </td>}
-                                    {!preimium && <td>
-                                        <div class="cursor-pointer"
-                                            onClick={() => dispatchLoginAction(account, dispatch)}>
-                                            <LockBadge class="text-error" />
-                                        </div>
-                                    </td>}
-                                </tr>
-                            </>;
-                        })}
-                </tbody>
-            </table>
-            }
-            {busy && <span class="loading loading-spinner loading-lg"></span>}
-        </div>
-        <dialog ref={forkDialogRef} class="modal">
-            {!busy && dialogIndex >= 0 && account !== null && <div class="modal-box">
-                <h3 class="font-bold text-lg">{t("enter_name_of_drive")}:</h3>
-                <p class="text-xs text-neutral-content mt-2">
-                    fork of: {myDrives[dialogIndex].owner}/{myDrives[dialogIndex].name}
-                </p>
-                <input type="text" placeholder="name" value={forkName}
-                    class="mt-6 input input-bordered input-primary w-full" onChange={(e) =>
-                        setForkName(e.currentTarget.value)} />
-                {dialogError !== null &&
-                    <p class="mt-2 text-error">{t("error")}: {dialogError}</p>}
-                <div class="modal-action">
-                    {forkName.length > 0 && <button class="btn mr-2 btn-primary" onClick={() => {
-                        setDialogIndex(-1);
-                        setBusy(true);
-                        // eslint-disable-next-line max-len
-                        fetch(`${sockdriveEndpoint}/fork/drive/${myDrives[dialogIndex].owner}/${myDrives[dialogIndex].name}/${forkName}/${account.token.access_token}`, {
-                            method: "POST",
-                        })
-                            .then((r) => r.json())
-                            .then((response) => {
-                                if (response.error) {
-                                    throw new Error(response.error);
-                                } else {
-                                    setMyDrives([]);
-                                    reloadDrives();
-                                }
-                                forkDialogRef.current?.close();
-                            })
-                            .catch((e) => {
-                                console.error(e.message);
-                                dispatch(uiSlice.actions
-                                    .showToast({ message: e.message, intent: "error" }));
-                            })
-                            .finally(() => {
-                                setBusy(false);
-                            });
-                    }}>{t("fork")}</button>}
-                    <button class="btn" onClick={() => forkDialogRef.current?.close()}>{t("close")}</button>
-                </div>
-            </div>}
-        </dialog>
-        <dialog ref={deleteDialogRef} class="modal">
-            {!busy && dialogIndex >= 0 && account !== null && <div class="modal-box">
-                <h3 class="font-bold text-lg">{t("enter_name_of_drive")}:</h3>
-                <p class="text-xs text-neutral mt-2">{myDrives[dialogIndex].owner}/{myDrives[dialogIndex].name}</p>
-                <input type="text" placeholder="name" value={deleteConfirm}
-                    class="mt-6 input input-bordered input-primary w-full"
-                    onChange={(e) => setDeleteConfirm(e.currentTarget.value)} />
-                {dialogError !== null &&
-                    <p class="mt-2 text-error">{t("error")}: {setDialogError}</p>}
-                <div class="modal-action">
-                    {deleteConfirm === myDrives[dialogIndex].owner + "/" + myDrives[dialogIndex].name &&
-                        <button class="btn mr-2 btn-primary" onClick={() => {
-                            setDialogIndex(-1);
-                            setBusy(true);
-                            // eslint-disable-next-line max-len
-                            fetch(`${sockdriveEndpoint}/fork/delete/${myDrives[dialogIndex].owner}/${myDrives[dialogIndex].name}/${account.token.access_token}`, { method: "POST" })
-                                .then((r) => r.json())
-                                .then((response) => {
-                                    if (response.error) {
-                                        throw new Error(response.error);
-                                    } else {
-                                        const newDrives = [...myDrives];
-                                        newDrives.splice(dialogIndex, 1);
-                                        setMyDrives(newDrives);
-                                    }
-                                    deleteDialogRef.current?.close();
-                                })
-                                .catch((e) => {
-                                    console.error(e.message);
-                                    setDialogError(e.message);
-                                    dispatch(uiSlice.actions
-                                        .showToast({ message: e.message, intent: "error" }));
-                                })
-                                .finally(() => {
-                                    setBusy(false);
-                                });
-                        }}>{t("delete")}</button>}
-                    <button class="btn" onClick={() => deleteDialogRef.current?.close()}>{t("close")}</button>
-                </div>
-            </div>
-            }
-        </dialog >
-    </div >;
-}

package/src/frame/frame.css

@@ -1,119 +0,0 @@
-@import "./editor/editor-frame.css";
-
-.jsdos-rso {
-  .frame-root {
-    @apply flex flex-col;
-  }
-
-  .frame {
-    @apply absolute left-0 top-0 pl-12 overflow-auto h-full w-96 py-4;
-    background-color: hsl(var(--b3));
-  }
-
-  .frame-md {
-    width: 100% !important;
-  }
-
-  .frame-xs {
-    width: calc(var(--sidebar-width) * 2) !important;
-  }
-
-  .premium-plan-root {
-    @apply bg-white rounded-xl px-4 pt-4 pb-2 w-64;
-  }
-
-  .premium-plan-root.have-premium {
-    @apply bg-green-200;
-  }
-
-  .premium-plan-head {
-    @apply text-blue-400;
-  }
-
-  .premium-plan-cost {
-    @apply text-blue-600 text-5xl;
-  }
-
-  .premium-plan-cost-expl {
-    @apply text-gray-600 ml-4 flex flex-col;
-  }
-
-  .premium-plan-highlight {
-    @apply flex flex-row text-xs items-center py-2 border-b border-b-gray-200;
-    @apply text-gray-600;
-  }
-
-  .premium-plan-root.have-premium .premium-plan-highlight {
-    @apply border-b-green-300;
-  }
-
-  .settings-frame {
-    @apply px-6 -mt-2;
-
-    .label {
-      @apply p-0;
-    }
-
-    .label-text {
-      font-size: inherit;
-    }
-
-    .option {
-      @apply w-full justify-between;
-    }
-
-    .slider {
-      .touch {
-        @apply w-40 flex-grow-0;
-      }
-    }
-  }
-
-  .image-rendering-frame {
-    @apply px-6 -mt-2;
-    
-    .option {
-      @apply w-full justify-between;
-    }
-  }
-
-  .account-frame {
-    .account-img {
-      @apply w-24 h-24 my-8 rounded-full;
-    }
-
-    .account-email {
-      @apply text-xs mt-4;
-    }
-  }
-
-  .network-frame {
-    @apply w-full;
-
-    .option {
-      @apply w-full;
-    }
-
-    .error {
-      .label-text {
-        @apply text-error;
-      }
-
-      input {
-        border-color: hsl(var(--er) / var(--tw-border-opacity));
-        --tw-border-opacity: 0.1;
-        --tw-bg-opacity: 1;
-        background-color: hsl(var(--er) / var(--tw-bg-opacity));
-        --tw-text-opacity: 1;
-        color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
-      }
-    }
-  }
-
-  .quick-save-frame {
-    .text-badge {
-      @apply absolute left-0 top-0 w-3 h-3 font-bold rounded-full flex items-center justify-center;
-      font-size: 0.5rem;
-    }
-  }
-}

package/src/frame/frame.tsx

@@ -1,34 +0,0 @@
-import { useSelector } from "react-redux";
-import { State } from "../store";
-import { AccountFrame } from "./account-frame";
-import { EditorConf } from "./editor/editor-conf-frame";
-import { EditorFsFrame } from "./editor/editor-fs-frame";
-import { FatDrivesFrame } from "./fat-drives-frame";
-import { NetworkFrame } from "./network-frame";
-import { QuickSaveFrame } from "./quick-save-frame";
-import { SettingsFrame } from "./settings-frame";
-import { StatsFrame } from "./stats-frame";
-import { ImageRenderingFrame } from "./image-rendering-frame";
-
-export function Frame(props: {}) {
-    const frame = useSelector((state: State) => state.ui.frame);
-    const frameXs = useSelector((state: State) => state.ui.frameXs);
-    const wideScreen = useSelector((state: State) => state.ui.wideScreen);
-    if (frame === "none") {
-        return null;
-    }
-
-
-    return <div class={"frame " + (frameXs ? " frame-xs " : "") +
-        (frameXs || wideScreen ? "" : " frame-md")}>
-        { frame === "account" && <AccountFrame /> }
-        { frame === "settings" && <SettingsFrame /> }
-        { frame === "editor-conf" && <EditorConf /> }
-        { frame === "editor-fs" && <EditorFsFrame /> }
-        { frame === "network" && <NetworkFrame /> }
-        { frame === "stats" && <StatsFrame /> }
-        { frame === "fat-drives" && <FatDrivesFrame /> }
-        { frame === "quick-save" && <QuickSaveFrame /> }
-        { frame === "image-rendering" && <ImageRenderingFrame /> }
-    </div>;
-};

package/src/frame/image-rendering-frame.tsx

@@ -1,8 +0,0 @@
-import { ImageRenderingSelect, RenderAspectSelect } from "../components/dos-option-select";
-
-export function ImageRenderingFrame(props: {}) {
-    return <div class="image-rendering-frame frame-root items-start pl-4">
-        <RenderAspectSelect multiline={true} />
-        <ImageRenderingSelect multiline={true} />
-    </div>;
-}

package/src/frame/network-frame.tsx

@@ -1,157 +0,0 @@
-import { useEffect } from "preact/hooks";
-import { useDispatch, useSelector } from "react-redux";
-import { Checkbox } from "../components/checkbox";
-import { useT } from "../i18n";
-import { State } from "../store";
-import { dosSlice } from "../store/dos";
-import { Select } from "../components/select";
-import { dispatchLoginAction, uiSlice } from "../store/ui";
-import { LockBadge } from "../components/lock";
-import { Dispatch } from "@reduxjs/toolkit";
-
-export function NetworkFrame() {
-    const account = useSelector((state: State) => state.auth.account);
-    const network = useSelector((state: State) => state.dos.network);
-    const room = network.room;
-    const server = network.server;
-    const disabled = network.ipx !== "disconnected";
-    const t = useT();
-    const dispatch = useDispatch();
-    const premium = account?.premium === true;
-    const ipxLink =
-        network.ipx === "connected" ?
-            location.href + searchSeparator() +
-            "ipx=1&server=" + network.server + "&room=" + room :
-            null;
-
-    useEffect(() => {
-        if (server !== "netherlands" && account?.premium !== true) {
-            dispatch(dosSlice.actions.setServer("netherlands"));
-        }
-    }, [server, account]);
-
-    function setRoom(room: string) {
-        dispatch(dosSlice.actions.setRoom(room));
-    }
-
-    function setServer(server: string) {
-        dispatch(dosSlice.actions.setServer(server as any));
-    }
-
-    function toggleIpx() {
-        if (network.ipx === "connected") {
-            dispatch(dosSlice.actions.disconnectIpx({}));
-        } else {
-            dispatch(dosSlice.actions.connectIpx({
-                room,
-                address: "wss://" + (premium ? server : "netherlands") + ".dos.zone",
-            }) as any);
-        }
-    }
-
-    function copyAndClose() {
-        if (ipxLink) {
-            copyToClipBoard(ipxLink, t, dispatch);
-            dispatch(uiSlice.actions.frameNone());
-        }
-    }
-
-    function lockClick() {
-        dispatchLoginAction(account, dispatch);
-    }
-
-    function onServer(newServer: string) {
-        setServer(newServer);
-
-        if (!premium) {
-            dispatchLoginAction(account, dispatch);
-            return;
-        }
-    }
-
-    return <div class="network-frame frame-root items-start px-4 relative">
-        <div class="ml-1 mb-4 w-full flex flex-row items-center">
-            <Select
-                class="text-sm"
-                selectClass="w-full"
-                label={t("server") + ":"}
-                selected={server}
-                values={["netherlands", "newyork", "singapore"]}
-                disabled={disabled}
-                onSelect={onServer}
-            />
-            <div onClick={lockClick}>
-                <LockBadge class="cursor-pointer ml-2 w-4 h-4 text-error" />
-            </div>
-        </div>
-        <div class="form-control w-full">
-            <label class="label">
-                <span class="label-text">{t("room")}:</span>
-            </label>
-            <input type="text"
-                class="input w-full input-sm input-bordered"
-                disabled={disabled}
-                onChange={(e) => setRoom(e.currentTarget.value)}
-                value={room}></input>
-        </div>
-        <Checkbox
-            class={"mt-4 " + (network.ipx === "error" ? "error" : "")}
-            onChange={toggleIpx}
-            label="IPX"
-            checked={network.ipx === "connected"}
-            disabled={network.ipx === "connecting"}
-            intermediate={network.ipx === "connecting"}
-        />
-
-        {ipxLink !== null && <div class="mt-4 text-sm alert alert-success shadow-lg flex flex-col">
-            <div>{t("copy_net_link")}:</div>
-            <div class="flex flex-row">
-                <svg xmlns="http://www.w3.org/2000/svg"
-                    class="w-6 h-6 mx-1 cursor-pointer hover:text-accent-focus flex-shrink-0"
-                    fill="none" onClick={copyAndClose}
-                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                    <path stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125
-                        1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06
-                        9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504
-                        1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0
-                        00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5
-                        10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12
-                        6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125
-                         0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
-                </svg>
-                <div class="contextmenu underline break-all"
-                    target="_blank">{ipxLink}</div>
-            </div>
-        </div>}
-    </div >;
-}
-
-function searchSeparator() {
-    if (location.href.endsWith("?") || location.href.endsWith("&")) {
-        return "";
-    }
-    return location.href.indexOf("?") > 0 ? "&" : "?";
-}
-
-async function copyToClipBoard(text: string,
-                               t: (key: string) => string,
-                               dispatch: Dispatch) {
-    if (!navigator.clipboard) {
-        return;
-    }
-
-    try {
-        await navigator.clipboard.writeText(text);
-        dispatch(uiSlice.actions.showToast({
-            message: t("copied"),
-            intent: "success",
-        }));
-    } catch (e: any) {
-        dispatch(uiSlice.actions.showToast({
-            message: t("error"),
-            intent: "error",
-        }));
-    }
-}

package/src/frame/quick-save-frame.tsx

@@ -1,98 +0,0 @@
-import { useDispatch, useSelector } from "react-redux";
-import { LockBadge } from "../components/lock";
-import { CloudSaveButton } from "../sidebar/cloud-save-button";
-import { DisketteIcon } from "../sidebar/diskette-icon";
-import { State, useNonSerializableStore } from "../store";
-import { dispatchLoginAction } from "../store/ui";
-
-export function QuickSaveFrame() {
-    const premium = useSelector((state: State) => state.auth.account)?.premium && false;
-    return <div class="quick-save-frame flex flex-col justify-center items-center -my-2">
-        <CloudSaveButton />
-        <SaveButton label="quick" bgcolor="bg-primary" textcolor="text-primary-content" />
-        <LoadButton label="quick" bgcolor="bg-primary" />
-        {premium && <>
-            <SaveButton disabled={!premium} label={2} bgcolor="bg-secondary" textcolor="text-secondary-content" />
-            <LoadButton disabled={!premium} label={2} bgcolor="bg-secondary" />
-            <SaveButton disabled={!premium} label={3} bgcolor="bg-accent" textcolor="text-accent-content" />
-            <LoadButton disabled={!premium} label={3} bgcolor="bg-accent" />
-        </>}
-    </div>;
-}
-
-function SaveButton(props: {
-    label: number | string,
-    bgcolor: string,
-    textcolor: string,
-    disabled?: boolean,
-}) {
-    const account = useSelector((state: State) => state.auth.account);
-    const dispatch = useDispatch();
-    const nonSerializableStore = useNonSerializableStore();
-    function onClick() {
-        if (props.disabled === true) {
-            dispatchLoginAction(account, dispatch);
-        }
-
-        const ci = nonSerializableStore.ci;
-        if (ci === null) {
-            return;
-        }
-
-        ci.sendBackendEvent({
-            type: "wc-trigger-event",
-            event: "hand_savestate",
-        });
-    }
-
-    return <div class={"sidebar-button flex justify-center " + (props.disabled ? "opacity-50" : "")}
-        onClick={onClick}>
-        <DisketteIcon />
-        {props.disabled !== true &&
-            <div class={"text-badge " + props.textcolor + " " + props.bgcolor}>{props.label}</div>}
-        {props.disabled === true && <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">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
-        </svg>
-    </div>;
-}
-
-function LoadButton(props: {
-    label: number | string,
-    bgcolor: string,
-    disabled?: boolean,
-}) {
-    const account = useSelector((state: State) => state.auth.account);
-    const dispatch = useDispatch();
-    const nonSerializableStore = useNonSerializableStore();
-    function onClick() {
-        if (props.disabled === true) {
-            dispatchLoginAction(account, dispatch);
-        }
-
-        const ci = nonSerializableStore.ci;
-        if (ci === null) {
-            return;
-        }
-
-        ci.sendBackendEvent({
-            type: "wc-trigger-event",
-            event: "hand_loadstate",
-        });
-    }
-
-    return <div class={"sidebar-button flex justify-center " + (props.disabled ? " opacity-50" : "")}
-        onClick={onClick}>
-        <DisketteIcon class="opacity-10" />
-        {props.disabled === true && <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-6 h-6 -scale-y-100">
-            <path stroke-linecap="round" stroke-linejoin="round"
-                d="m15 15 6-6m0 0-6-6m6 6H9a6 6 0 0 0 0 12h3" />
-        </svg>
-    </div>;
-}

package/src/frame/settings-frame.tsx

@@ -1,14 +0,0 @@
-import { Editor, MouseCapture, PauseCheckbox } from "../components/dos-option-checkbox";
-import { ThemeSelect } from "../components/dos-option-select";
-import { MouseSensitiviySlider, VolumeSlider } from "../components/dos-option-slider";
-
-export function SettingsFrame(props: {}) {
-    return <div class="settings-frame frame-root items-start pl-4">
-        <PauseCheckbox />
-        <MouseCapture />
-        <MouseSensitiviySlider />
-        <VolumeSlider />
-        <Editor />
-        <ThemeSelect multiline={true} />
-    </div>;
-}