js-dos 0.80.25

package/src/window/select-window.tsx

@@ -0,0 +1,118 @@
+import { useDispatch } from "react-redux";
+import { dosSlice } from "../store/dos";
+import { useT } from "../i18n";
+import { loadBundleFromFile, loadBundleFromUrl, loadEmptyBundle } from "../load";
+import { useState } from "preact/hooks";
+import { uiSlice } from "../store/ui";
+
+const fileInput = document.createElement("input");
+fileInput.type = "file";
+
+export function SelectWindow() {
+    const t = useT();
+    const dispatch = useDispatch();
+    const [useUrl, setUseUrl] = useState<boolean>(false);
+
+    if (useUrl) {
+        return <div class="select-window overflow-hidden flex-grow flex flex-col items-center justify-center px-8 py-8">
+            <Load />
+        </div>;
+    }
+
+    async function createEmpty() {
+        try {
+            await loadEmptyBundle(dispatch)
+                .catch(console.error);
+        } catch (e: any) {
+            dispatch(dosSlice.actions.bndError(e.message ?? "unexpected error"));
+        }
+    }
+
+    return <div class="select-window overflow-hidden flex-grow flex flex-col items-center justify-center px-8">
+        <div class="mb-4 text-center underline cursor-pointer hover:text-accent"
+            onClick={() => setUseUrl(true)}>{t("load_by_url")}</div>
+        <Upload />
+        <div class="mt-4 text-center">{t("upload_file")}</div>
+        <div class="mt-4 text-center underline cursor-pointer hover:text-accent"
+            onClick={createEmpty}>{t("create_empty")}</div>
+    </div>;
+}
+
+function Load() {
+    const t = useT();
+    const dispatch = useDispatch();
+    const [url, setUrl] = useState<string>("");
+    const [error, setError] = useState<string | null>(null);
+
+    async function loadBundle(url: string) {
+        dispatch(uiSlice.actions.frameNone());
+
+        let validUrl;
+        try {
+            validUrl = new URL(url);
+        } catch (e: any) {
+            setError(e.message);
+            return;
+        }
+
+        try {
+            await loadBundleFromUrl(validUrl.toString(), dispatch);
+        } catch (e: any) {
+            dispatch(dosSlice.actions.bndError(e.message ?? "unexpected error"));
+        }
+    }
+
+    return <>
+        <div class="form-control w-3/4 mb-4">
+            <label class="label">
+                <span class="label-text">{t("enter_url")}:</span>
+            </label>
+            <input type="text"
+                class="input w-full input-sm input-bordered"
+                onChange={(e) => setUrl(e.currentTarget.value ?? "")}
+                value={url}></input>
+        </div>
+        <div class="mt-4 text-center underline cursor-pointer hover:text-accent"
+            onClick={() => loadBundle(url)}>{t("load")}</div>
+        {error !== null &&
+            <div class="mt-8 text-center text-error">
+                {error}
+            </div>
+        }
+    </>;
+}
+
+function Upload() {
+    const dispatch = useDispatch();
+
+    async function onFileChange() {
+        fileInput.removeEventListener("change", onFileChange);
+
+        if (fileInput.files === null || fileInput.files.length === 0) {
+            return;
+        }
+
+        const file = fileInput.files[0];
+        try {
+            await loadBundleFromFile(file, dispatch)
+                .catch((e) => dispatch(dosSlice.actions.bndError(e.message)));
+        } catch (e: any) {
+            dispatch(dosSlice.actions.bndError(e.message ?? "unexpected error"));
+        }
+    }
+
+    function onUpload() {
+        fileInput.addEventListener("change", onFileChange);
+        fileInput.click();
+    }
+
+    return <div class="cursor-pointer" onClick={onUpload}>
+        <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="M9 13.5l3 3m0 0l3-3m-3
+                3v-6m1.06-4.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25
+                2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5
+                1.5 0 01-1.06-.44z" />
+        </svg>
+    </div>;
+}

package/src/window/window.css

@@ -0,0 +1,78 @@
+.jsdos-rso {
+  .window {
+    @apply overflow-hidden;
+
+    .background-image {
+      @apply absolute left-12 right-0 h-full pointer-events-none;
+      background-position: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+      &::after {
+        position: relative;
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-color: hsl(var(--b1)/var(--tw-bg-opacity));
+        opacity: 0.75;
+      }
+    }
+
+    .play-button {
+      &:hover {
+        color: hsl(var(--af));
+      }
+    }
+
+    .dhry2-window {
+      @apply absolute left-0 top-0 w-full h-full flex flex-col items-center justify-center;
+      @apply bg-black bg-opacity-80 text-2xl px-8 py-4 text-white;
+
+      .title {
+        @apply mb-4 text-center text-4xl;
+      }
+
+      .backend {
+        @apply mb-8 text-center;
+      }
+
+      .results {
+        @apply grid grid-cols-2 gap-4;
+
+        div:nth-child(even) {
+          @apply text-green-300;
+
+          span {
+            @apply text-white;
+          }
+        }
+
+        div:nth-child(2),
+        div:last-child {
+          @apply text-yellow-300;
+        }
+
+      }
+    }
+
+    .pre-run-window {
+      @apply overflow-x-hidden overflow-y-auto flex-grow flex flex-col items-center justify-center px-8 m-auto;
+
+      .slider {
+        @apply justify-center w-80 max-w-none;
+
+        .label {
+          @apply flex-grow;
+        }
+
+        .touch {
+          @apply w-40 flex-grow-0;
+        }
+      }
+    }
+
+    .select-window {
+      @apply m-auto;
+    }
+  }
+}

package/src/window/window.tsx

@@ -0,0 +1,49 @@
+import { useSelector } from "react-redux";
+import { State } from "../store";
+import { DosWindow } from "./dos/dos-window";
+import { ErrorWindow } from "./error-window";
+import { LoadingWindow } from "./loading-window";
+import { PreRunWindow } from "./prerun-window";
+import { SelectWindow } from "./select-window";
+
+export function Window(props: {}) {
+    const frameOpened = useSelector((state: State) => state.ui.frame) !== "none";
+    const frameXs = useSelector((state: State) => state.ui.frameXs);
+    const window = useSelector((state: State) => state.ui.window);
+    const background = useSelector((state: State) => state.ui.background);
+
+    let windowComponent = <Loading />;
+    switch (window) {
+        case "error": {
+            windowComponent = <ErrorWindow />;
+        } break;
+        case "loading": {
+            windowComponent = <LoadingWindow />;
+        } break;
+        case "prerun": {
+            windowComponent = <PreRunWindow />;
+        } break;
+        case "run": {
+            windowComponent = <DosWindow />;
+        } break;
+        case "select": {
+            windowComponent = <SelectWindow />;
+        } break;
+        default: ;
+    };
+
+    return <div class="window absolute w-full h-full bg-base-100">
+        <div class="background-image"
+            style={{ backgroundImage: (background ? "url(" + background + ")" : undefined ) }} />
+        <div class="relative flex flex-row h-full w-full items-start justify-start overflow-auto">
+            <div class={(frameOpened ? (frameXs ? "w-24" : "w-96") : "w-12") + " flex-shrink-0"}></div>
+            {windowComponent}
+        </div>
+    </div>;
+}
+
+function Loading() {
+    return <div class="w-full h-full flex justify-center items-center">
+        <div class="radial-progress animate-spin" style="--value:70;"></div>
+    </div>;
+}

package/src/ws/ws-sockdrive.ts

@@ -0,0 +1,102 @@
+import { Handle, Stats } from "../sockdrive/js/src/sockdrive/types";
+import { Drive } from "../sockdrive/js/src/sockdrive/drive";
+
+interface Template {
+    name: string,
+    size: number,
+    heads: number,
+    cylinders: number,
+    sectors: number,
+    sectorSize: number,
+}
+
+export interface ReadResponse {
+    buffer?: Uint8Array,
+    code: number,
+}
+
+export function createSockdrive(
+    onOpen: (drive: string, read: boolean, write: boolean) => void,
+    onError: (e: Error) => void) {
+    let seq = 0;
+    const mapping: { [handle: Handle]: Drive } = {};
+    const templates: { [handle: number]: Template } = {};
+    const memory: { [handle: number]: Uint8Array } = {};
+    const stats: Stats = {
+        read: 0,
+        write: 0,
+        readTotalTime: 0,
+        cacheHit: 0,
+        cacheMiss: 0,
+        cacheUsed: 0,
+    };
+    const sockdrive = {
+        stats,
+        open: async (url: string, owner: string, name: string, token: string, aheadRange: number): Promise<Handle> => {
+            const response = await fetch(url.replace("wss://", "https://")
+                .replace("ws://", "http://") + "/template/" + owner + "/" + name);
+            const template = await response.json();
+            if (template.error) {
+                throw new Error(template.error);
+            }
+            seq++;
+            templates[seq] = {
+                name: template.name,
+                size: template.size ?? 0,
+                heads: template.heads ?? 1,
+                cylinders: template.cylinders ?? 520,
+                sectors: template.sectors ?? 63,
+                sectorSize: template.sector_size ?? 512,
+            };
+
+            const sectorSize = templates[seq].sectorSize;
+            memory[seq] = new Uint8Array(sectorSize + sectorSize * aheadRange);
+            mapping[seq] = new Drive(url, owner, name, token, stats,
+                { HEAPU8: memory[seq] }, sectorSize, aheadRange, sectorSize, 1); // cache is on server
+            mapping[seq].onOpen((read, write) => {
+                onOpen(owner + "/" + name, read, write);
+            });
+            mapping[seq].onError(onError);
+            return seq;
+        },
+        read: (handle: Handle, sector: number): Promise<ReadResponse> => {
+            if (mapping[handle]) {
+                return (mapping[handle].read(sector, 0, false) as Promise<number>).then((code) => {
+                    return {
+                        code,
+                        buffer: memory[handle].slice(templates[seq].sectorSize),
+                    };
+                });
+            }
+
+            console.error("ERROR! sockdrive handle", handle, "not found");
+            return Promise.resolve({ code: 1 });
+        },
+        write: (handle: Handle, sector: number, buffer: Uint8Array): number => {
+            if (buffer.byteLength != templates[handle].sectorSize) {
+                onError(new Error("sockdrive write buffer size " + buffer.byteLength +
+                    " != sector size " + templates[handle].sectorSize));
+                return 1;
+            }
+            if (mapping[handle]) {
+                memory[handle].set(buffer, 0);
+                return mapping[handle].write(sector, 0);
+            }
+            console.error("ERROR! sockdrive handle", handle, "not found");
+            return 1;
+        },
+        close: (handle: Handle) => {
+            if (mapping[handle]) {
+                mapping[handle].close();
+                delete memory[handle];
+                delete templates[handle];
+                delete mapping[handle];
+            }
+        },
+        template: (handle: Handle) => {
+            return templates[handle];
+        },
+    };
+
+    return sockdrive;
+}