js-dos 7.4.9 → 8.1.0

package/src/frame/network-frame.tsx

@@ -0,0 +1,157 @@
+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

@@ -0,0 +1,96 @@
+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;
+    return <div class="quick-save-frame flex flex-col justify-center items-center -my-2">
+        <CloudSaveButton />
+        <SaveButton label={1} bgcolor="bg-primary" textcolor="text-primary-content" />
+        <LoadButton label={1} bgcolor="bg-primary" />
+        <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,
+    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,
+    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

@@ -0,0 +1,14 @@
+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>;
+}

package/src/frame/stats-frame.tsx

@@ -0,0 +1,87 @@
+import { useSelector } from "react-redux";
+import { State } from "../store";
+
+export function StatsFrame() {
+    const startedAt = useSelector((state: State) => state.dos.ciStartedAt);
+    const stats = useSelector((state: State) => state.dos.stats);
+    const cycles = Math.round(useSelector((state: State) => state.dos.stats.cyclesPerMs) / 1000);
+    const driveRecvMb = Math.round(stats.driveRecv / 1024 / 1024 * 100) / 100;
+    const driveSpeedMb = (stats.driveRecvTime / 1000) > 1 ?
+        Math.round(driveRecvMb / stats.driveRecvTime * 1000 * 100) / 100 : 0;
+    return <div class="stats-frame frame-root items-start px-4">
+        <div class="w-full overflow-x-auto">
+            <table class="table table-compact w-full">
+                <thead>
+                    <tr>
+                        <th>Metric</th>
+                        <th>Value</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Uptime</td>
+                        <td>{Math.round((Date.now() - startedAt) / 100) / 10} s</td>
+                    </tr>
+                    <tr>
+                        <td>Cycles/ms</td>
+                        { cycles <= 0 && <td>~ K</td> }
+                        { cycles > 0 && cycles <= 1000 && <td>{cycles} K</td> }
+                        { cycles > 1000 && <td>{Math.round(cycles / 1000)} KK</td> }
+                    </tr>
+                    <tr>
+                        <td>NonSkipSleep COUNT/s</td>
+                        <td>{stats.nonSkippableSleepPreSec}</td>
+                    </tr>
+                    <tr>
+                        <td>Sleep COUNT/s</td>
+                        <td>{stats.sleepPerSec}</td>
+                    </tr>
+                    <tr>
+                        <td>Sleep TIME/s</td>
+                        <td>{stats.sleepTimePerSec}</td>
+                    </tr>
+                    <tr>
+                        <td>Msg FRAME/s</td>
+                        <td>{stats.framePerSec}</td>
+                    </tr>
+                    <tr>
+                        <td>Msg SOUND/s</td>
+                        <td>{stats.soundPerSec}</td>
+                    </tr>
+                    <tr>
+                        <td>Msg SENT/s</td>
+                        <td>{stats.msgSentPerSec}</td>
+                    </tr>
+                    <tr>
+                        <td>Msg RECV/s</td>
+                        <td>{stats.msgRecvPerSec}</td>
+                    </tr>
+                    <tr>
+                        <td>Net SENT/s</td>
+                        <td>{Math.round(stats.netSent / 1024 * 100) / 100}Kb</td>
+                    </tr>
+                    <tr>
+                        <td>Net RECV/s</td>
+                        <td>{Math.round(stats.netRecv / 1024 * 100) / 100}Kb</td>
+                    </tr>
+                    <tr>
+                        <td>HDD RECV/s</td>
+                        <td>{driveRecvMb}Mb (~{driveSpeedMb}Mb/s)</td>
+                    </tr>
+                    <tr>
+                        <td>HDD SENT/s</td>
+                        <td>{Math.round(stats.driveSent / 1024 / 1024 * 100) / 100}Mb</td>
+                    </tr>
+                    <tr>
+                        <td>HDD Cache</td>
+                        <td>{Math.round(stats.driveCacheUsed / 1024 / 1024 * 100) / 100}Mb</td>
+                    </tr>
+                    <tr>
+                        <td>HDD Cache Hit/Miss</td>
+                        <td>{stats.driveCacheHit} / {stats.driveCacheMiss}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>;
+}

package/src/host/bundle-storage.ts

@@ -0,0 +1,91 @@
+import { storageSlice } from "../store/storage";
+import { Account } from "../store/auth";
+import { brCdn } from "../v8/config";
+import { Store, getNonSerializableStore } from "../store";
+
+export function bundleFromFile(file: File, store: Store): Promise<Uint8Array> {
+    return new Promise<Uint8Array>((resolve) => {
+        store.dispatch(storageSlice.actions.reset());
+        const reader = new FileReader();
+        reader.addEventListener("load", async (e) => {
+            resolve(new Uint8Array(reader.result as ArrayBuffer));
+        });
+        reader.addEventListener("progress", (e) => {
+            store.dispatch(storageSlice.actions.progress([e.loaded, e.total]));
+        });
+        reader.readAsArrayBuffer(file);
+    });
+}
+
+
+export async function bundleFromChanges(url: string, account: Account | null,
+                                        store: Store): Promise<Uint8Array | null> {
+    if (account === null || !account.premium) {
+        return await getNonSerializableStore(store).cache.get(url).catch(() => null);
+    }
+
+    try {
+        const response = await fetch(url, {
+            cache: "no-cache",
+        });
+
+        if (response.status !== 200) {
+            throw new Error("Resource not avalible (" + response.status + "): " + response.statusText);
+        }
+
+        return response.arrayBuffer().then((b) => new Uint8Array(b));
+    } catch (e: any) {
+        return await getNonSerializableStore(store).cache.get(url).catch(() => null);
+    }
+}
+
+export async function bundleFromUrl(url: string, store: Store): Promise<Uint8Array> {
+    try {
+        return await getNonSerializableStore(store).cache.get(url);
+    } catch (e: any) {
+        // ignore
+    }
+
+    store.dispatch(storageSlice.actions.reset());
+    const response = await fetch(url, {
+        cache: "no-store",
+    });
+
+    if (response.status !== 200) {
+        throw new Error("Resource not avalible (" + response.status + "): " + response.statusText);
+    }
+
+    const lenHeader = response.headers.get("Content-Length");
+    const length = lenHeader === null ? 0 :
+        Number.parseInt(lenHeader);
+    const reader = response.body!.getReader();
+
+    let received = 0;
+    const chunks: Uint8Array[] = [];
+    while (true) {
+        const { done, value } = await reader.read();
+
+        if (done) {
+            break;
+        }
+
+        chunks.push(value);
+        received += value.length;
+
+        const bytes = Math.min(url.startsWith(brCdn) ? received / 2 : received, length);
+        store.dispatch(storageSlice.actions.progress([bytes, length]));
+    }
+
+    let offset = 0;
+    const complete = new Uint8Array(received);
+    for (const next of chunks) {
+        complete.set(next, offset);
+        offset += next.length;
+    }
+
+    getNonSerializableStore(store).cache
+        .put(url, complete)
+        .catch(console.error);
+
+    return complete;
+};

package/src/host/fullscreen.ts

@@ -0,0 +1,35 @@
+import { Store, getNonSerializableStore } from "../store";
+import { uiSlice } from "../store/ui";
+
+export function browserSetFullScreen(fullScreen: boolean, store: Store) {
+    const root = getNonSerializableStore(store).root as any;
+    if (fullScreen) {
+        if (root.requestFullscreen) {
+            root.requestFullscreen();
+        } else if (root.webkitRequestFullscreen) {
+            root.webkitRequestFullscreen();
+        } else if (root.mozRequestFullScreen) {
+            root.mozRequestFullScreen();
+        } else if (root.msRequestFullscreen) {
+            root.msRequestFullscreen();
+        } else if (root.webkitEnterFullscreen) {
+            root.webkitEnterFullscreen();
+        } else {
+            root.classList.add("jsdos-fullscreen-workaround");
+        }
+    } else {
+        if (root.classList.contains("jsdos-fullscreen-workaround")) {
+            root.classList.remove("jsdos-fullscreen-workaround");
+        } else if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if ((document as any).webkitExitFullscreen) {
+            (document as any).webkitExitFullscreen();
+        } else if ((document as any).mozCancelFullScreen) {
+            (document as any).mozCancelFullScreen();
+        } else if ((document as any).msExitFullscreen) {
+            (document as any).msExitFullscreen();
+        }
+    }
+
+    store.dispatch(uiSlice.actions.setFullScreen(fullScreen));
+}

package/src/host/lcache.ts

@@ -0,0 +1,203 @@
+/* eslint @typescript-eslint/no-unused-vars: 0 */
+
+export interface Cache {
+    readonly owner: string;
+    put: (key: string, data: Uint8Array) => Promise<void>;
+    get: (key: string, defaultValue?: Uint8Array) => Promise<Uint8Array>;
+    del: (key: string) => Promise<void>;
+    keys: () => Promise<string[]>;
+    forEach: (each: (key: string, value: Uint8Array) => void) => Promise<void>;
+    close: () => void;
+}
+
+export class CacheNoop implements Cache {
+    public owner = "";
+
+    public close() {
+    }
+
+    public put(key: string, data: Uint8Array): Promise<void> {
+        return Promise.resolve();
+    }
+
+    public get(key: string, defaultValue?: Uint8Array): Promise<Uint8Array> {
+        if (defaultValue !== undefined) {
+            return Promise.resolve(defaultValue);
+        }
+        return Promise.reject(new Error("Cache is not supported on this host"));
+    }
+
+    public del(key: string): Promise<void> {
+        return Promise.resolve();
+    }
+
+    public keys(): Promise<string[]> {
+        return Promise.resolve([]);
+    }
+
+    public forEach(each: (key: string, value: Uint8Array) => void) {
+        return Promise.resolve();
+    }
+}
+
+class LCache implements Cache {
+    public owner: string;
+    private storeName = "files";
+    private indexedDB: IDBFactory;
+    private db: IDBDatabase | null = null;
+
+    constructor(owner: string,
+        onready: (cache: Cache) => void,
+        onerror: (msg: string) => void) {
+        this.owner = owner;
+        this.indexedDB = (typeof window === "undefined" ? undefined : window.indexedDB ||
+            (window as any).mozIndexedDB ||
+            (window as any).webkitIndexedDB || (window as any).msIndexedDB) as any;
+
+        if (!this.indexedDB) {
+            onerror("Indexed db is not supported on this host");
+            return;
+        }
+
+        try {
+            const openRequest = this.indexedDB.open("js-dos-cache (" + owner + ")", 1);
+            openRequest.onerror = (event) => {
+                onerror("Can't open cache database: " + openRequest.error?.message);
+            };
+            openRequest.onsuccess = (event) => {
+                this.db = openRequest.result;
+                onready(this);
+            };
+            openRequest.onupgradeneeded = (event) => {
+                try {
+                    this.db = openRequest.result;
+                    this.db.onerror = (event) => {
+                        onerror("Can't upgrade cache database");
+                    };
+
+                    const objectStore = this.db.createObjectStore(this.storeName);
+                    objectStore.createIndex("key", "", {
+                        unique: true,
+                        multiEntry: false,
+                    });
+                } catch (e) {
+                    onerror("Can't upgrade cache database");
+                }
+            };
+        } catch (e: any) {
+            onerror("Can't open cache database: " + e.message);
+        }
+    }
+
+    public close() {
+        if (this.db !== null) {
+            this.db.close();
+            this.db = null;
+        }
+    }
+
+    public put(key: string, data: Uint8Array): Promise<void> {
+        return new Promise<void>((resolve, reject) => {
+            if (this.db === null) {
+                resolve();
+                return;
+            }
+
+            const transaction = this.db.transaction(this.storeName, "readwrite");
+            const request = transaction.objectStore(this.storeName).put(data.buffer, key);
+            request.onerror = () => reject;
+            request.onsuccess = () => resolve();
+        });
+    }
+
+    public del(key: string): Promise<void> {
+        return new Promise<void>((resolve, reject) => {
+            if (this.db === null) {
+                resolve();
+                return;
+            }
+
+            const transaction = this.db.transaction(this.storeName, "readwrite");
+            const request = transaction.objectStore(this.storeName).delete(key);
+            request.onerror = () => reject;
+            request.onsuccess = () => resolve();
+        });
+    }
+
+    public get(key: string, defaultValue?: Uint8Array): Promise<Uint8Array> {
+        return new Promise<Uint8Array>((resolve, reject) => {
+            function rejectOrResolve(message: string) {
+                if (defaultValue === undefined) {
+                    reject(new Error(message));
+                } else {
+                    resolve(defaultValue);
+                }
+            }
+
+
+            if (this.db === null) {
+                rejectOrResolve("db is not initalized");
+                return;
+            }
+
+            const transaction = this.db.transaction(this.storeName, "readonly");
+            const request = transaction.objectStore(this.storeName).get(key) as IDBRequest<ArrayBuffer>;
+            request.onerror = () => reject(new Error("Can't read value for key '" + key + "'"));
+            request.onsuccess = () => {
+                if (request.result) {
+                    resolve(new Uint8Array(request.result));
+                } else {
+                    rejectOrResolve("Result is empty for key '" + key + "', result: " + request.result);
+                }
+            };
+        });
+    }
+
+    public keys(): Promise<string[]> {
+        return new Promise<string[]>((resolve, reject) => {
+            if (this.db === null) {
+                resolve([]);
+                return;
+            }
+
+            const transaction = this.db.transaction(this.storeName, "readonly");
+            const request = transaction.objectStore(this.storeName).index("key").getAllKeys();
+            request.onerror = () => reject;
+            request.onsuccess = (event) => {
+                const keys = (event.target as any).result as string[];
+                resolve(keys);
+            };
+        });
+    }
+
+    public forEach(each: (key: string, value: Uint8Array) => void): Promise<void> {
+        return new Promise<void>((resolve, reject) => {
+            if (this.db === null) {
+                resolve();
+                return;
+            }
+
+            const transaction = this.db.transaction(this.storeName, "readonly");
+            const request = transaction.objectStore(this.storeName).openCursor();
+            request.onerror = () => reject;
+            request.onsuccess = (event) => {
+                const cursor = (event.target as any).result as IDBCursorWithValue;
+                if (cursor) {
+                    each(cursor.key.toString(), new Uint8Array(cursor.value));
+                    cursor.continue();
+                } else {
+                    resolve();
+                }
+            };
+        });
+    }
+}
+
+export function getCache(owner: string): Promise<Cache> {
+    return new Promise((resolve) => {
+        new LCache(owner, resolve, (msg: string) => {
+            console.error("Can't open IndexedDB cache", msg);
+            resolve(new CacheNoop());
+        });
+    });
+}