js-dos 8.1.0 → 8.1.2

package/README.md

@@ -14,9 +14,14 @@ The key features:
 * Cloud storage
 * WebAssembly and pure JS versions
   
+## Demo
 
-
-[![Watch the video](https://github.com/caiiiycuk/js-dos/assets/1727152/a2b481cb-43b1-44aa-8b71-2181d351bb1a)](https://youtu.be/lhFrAe5YrJE)
+* [Win 95](https://v8.js-dos.com) - plain Windows 95 with D3D & 3Dfx
+* [DOS.Zone](https://dos.zone) - community portal with 1900+ dos games
+* [Multiplayer](https://dos.zone/multiplayer) - multiplayer games (Doom, Heroes 2, etc.)
+* [Diablo I](https://dos.zone/diablo-1996/)
+* Dune 2000
+  [![Watch the video](https://github.com/caiiiycuk/js-dos/assets/1727152/a2b481cb-43b1-44aa-8b71-2181d351bb1a)](https://youtu.be/lhFrAe5YrJE)
 
 ## Documentation
 
@@ -26,10 +31,6 @@ The key features:
 * [js-dos 3.xx](https://js-dos.com/index_v3.html)
 * [Repository](https://github.com/caiiiycuk/js-dos-docs)
 
-Demo:
-
-[DOS.Zone](https://dos.zone)
-
 ## Development
 
 1. You need to install node dependencies and put `emulators@beta` into `public/emulators`.

package/index.html

@@ -42,6 +42,10 @@
           //  console.log("Hardware backend for", backend);
           //  return Promise.resolve("ws://127.0.0.1:8080");
           //},
+          // sockdriveBackend: {
+          //   name: "makevm",
+          //   host: "backend.make-vm.com:8001",
+          // },
           onEvent: (event) => {
             console.log("Event", event)
             if (event === "ci-ready") {
@@ -96,8 +100,8 @@ scaler=none
 
 [autoexec]
 echo off
-imgmount 2 sockdrive wss://backend.make-vm.com:8001 dos.zone diablo_109_c
-imgmount 3 sockdrive wss://backend.make-vm.com:8001 dos.zone diablo_109_d
+imgmount 2 sockdrive wss://sockdrive.js-dos.com:8001 dos.zone diablo_109_c
+imgmount 3 sockdrive wss://sockdrive.js-dos.com:8001 dos.zone diablo_109_d
 boot c:
 `;
   </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-dos",
-  "version": "8.1.0",
+  "version": "8.1.2",
   "description": "Full-featured DOS player with multiple emulator backends",
   "type": "module",
   "keywords": [

package/src/frame/editor/defaults.ts

@@ -237,7 +237,7 @@ scaler=none
 
 [autoexec]
 echo off
-imgmount 2 sockdrive {wss-makevm} dos.zone dos7.1
+imgmount 2 sockdrive {wss-makevm} system dos7.1-v1
 echo Please visit our website:
 echo 
 echo         _                __
@@ -312,7 +312,7 @@ scaler=none
 
 [autoexec]
 echo off
-imgmount 2 sockdrive {wss-makevm} dos.zone win95
+imgmount 2 sockdrive {wss-makevm} system win95-v1
 echo Please visit our website:
 echo 
 echo         _                __
@@ -387,7 +387,7 @@ scaler=none
 
 [autoexec]
 echo off
-imgmount 2 sockdrive {wss-makevm} dos.zone win98
+imgmount 2 sockdrive {wss-makevm} system win98-v1
 echo Please visit our website:
 echo 
 echo         _                __

package/src/frame/editor/editor-conf-frame.tsx

@@ -24,7 +24,8 @@ export function EditorConf() {
     const account = useSelector((state: State) => state.auth.account);
     const backend = useSelector((state: State) => state.dos.backend);
     const { sockdriveEndpoint, sockdriveWssEndpoint } = useSelector((state: State) =>
-        sockdriveBackend[state.init.sockdriveBackendName]);
+        sockdriveBackend[state.init.sockdriveBackendName] ??
+        sockdriveBackend["js-dos"]);
     const dispatch = useDispatch();
     const [myDrives, setMyDrives] = useState<{ name: string, owner: string }[]>([]);
 

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

@@ -3,7 +3,7 @@ import { SockdriveBackend } from "../components/dos-option-select";
 import { useDispatch, useSelector } from "react-redux";
 import { sockdriveBackend } from "../store/init";
 import { State } from "../store";
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { dispatchLoginAction, uiSlice } from "../store/ui";
 import { LockBadge } from "../components/lock";
 
@@ -25,17 +25,27 @@ export function FatDrivesFrame() {
     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);
+                .catch(console.error)
+                .finally(() => setBusy(false));
         }
     }
 
@@ -48,7 +58,7 @@ export function FatDrivesFrame() {
         <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">
-            <table class="table w-full">
+            {!busy && <table class="table w-full">
                 <thead>
                     <tr>
                         <th>{t("net_drives")}</th>
@@ -76,47 +86,13 @@ export function FatDrivesFrame() {
                                     {preimium && <td>
                                         {account?.token && <div class="btn btn-ghost btn-xs"
                                             onClick={() => {
-                                                const newName = prompt("Enter drive name");
-                                                if (newName && newName.length > 0) {
-                                                    // eslint-disable-next-line max-len
-                                                    fetch(`${sockdriveEndpoint}/fork/drive/${owner}/${name}/${newName}/${account.token.access_token}`, {
-                                                        method: "POST",
-                                                    })
-                                                        .then((r) => r.json())
-                                                        .then((response) => {
-                                                            if (response.error) {
-                                                                throw new Error(response.error);
-                                                            } else {
-                                                                setMyDrives([]);
-                                                                reloadDrives();
-                                                            }
-                                                        })
-                                                        .catch((e) => {
-                                                            console.error(e.message);
-                                                            dispatch(uiSlice.actions
-                                                                .showToast({ message: e.message, intent: "error" }));
-                                                        });
-                                                }
+                                                setDialogIndex(index);
+                                                forkDialogRef.current?.showModal();
                                             }}>Fork</div>}
                                         {account?.token && owner === me && <div class="btn btn-xs btn-ghost"
                                             onClick={() => {
-                                                // eslint-disable-next-line max-len
-                                                fetch(`${sockdriveEndpoint}/fork/delete/${owner}/${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(index, 1);
-                                                            setMyDrives(newDrives);
-                                                        }
-                                                    })
-                                                    .catch((e) => {
-                                                        console.error(e.message);
-                                                        dispatch(uiSlice.actions
-                                                            .showToast({ message: e.message, intent: "error" }));
-                                                    });
+                                                setDialogIndex(index);
+                                                deleteDialogRef.current?.showModal();
                                             }}>{t("delete")}</div>}
                                     </td>}
                                     {!preimium && <td>
@@ -130,6 +106,92 @@ export function FatDrivesFrame() {
                         })}
                 </tbody>
             </table>
+            }
+            {busy && <span class="loading loading-spinner loading-lg"></span>}
         </div>
-    </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/quick-save-frame.tsx

@@ -6,20 +6,22 @@ import { State, useNonSerializableStore } from "../store";
 import { dispatchLoginAction } from "../store/ui";
 
 export function QuickSaveFrame() {
-    const premium = useSelector((state: State) => state.auth.account)?.premium;
+    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={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" />
+        <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,
+    label: number | string,
     bgcolor: string,
     textcolor: string,
     disabled?: boolean,
@@ -59,7 +61,7 @@ function SaveButton(props: {
 }
 
 function LoadButton(props: {
-    label: number,
+    label: number | string,
     bgcolor: string,
     disabled?: boolean,
 }) {
@@ -84,7 +86,7 @@ function LoadButton(props: {
 
     return <div class={"sidebar-button flex justify-center " + (props.disabled ? " opacity-50" : "")}
         onClick={onClick}>
-        <DisketteIcon class="opacity-10"/>
+        <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"

package/src/i18n.ts

@@ -4,6 +4,9 @@ import { State } from "./store";
 
 const translations: {[lang: string]: {[key: string]: string} } = {
     ru: {
+        enter_name_of_drive: "Введите название диска",
+        ws_outdated: "Необходимо обновить DOS Браузер",
+        update: "Обновить",
         preloading_sockdrive: "Загрузка FAT",
         filter: "Фильтр",
         add: "Добавить",
@@ -75,6 +78,9 @@ const translations: {[lang: string]: {[key: string]: string} } = {
         fat_write: "FAT запись",
     },
     en: {
+        enter_name_of_drive: "Enter name of drive",
+        ws_outdated: "Must update DOS Browser App",
+        update: "Update",
         preloading_sockdrive: "Preloading FAT",
         filter: "Filter",
         add: "Add",

package/src/main.tsx

@@ -18,7 +18,7 @@ import { NonSerializableStore, Store, makeNonSerializableStore, makeStore, postJ
 export const Dos: DosFn = (element: HTMLDivElement,
     options: Partial<DosOptions> = {}): DosProps => {
     const nonSerializableStore = makeNonSerializableStore(options);
-    const store = makeStore(nonSerializableStore);
+    const store = makeStore(nonSerializableStore, options);
 
 
     if (store.getState().auth.account?.email === "dz.caiiiycuk@gmail.com" ||

package/src/public/types.ts

@@ -20,6 +20,10 @@ export interface DosOptions {
     server: "netherlands" | "newyork" | "singapore",
     room: string,
     fullScreen: boolean,
+    sockdriveBackend: {
+        name: string,
+        host: string,
+    }
 }
 
 export interface DosProps {

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

@@ -12,7 +12,7 @@ export function CloudSaveButton(props: {
 }) {
     const [busy, setBusy] = useState<boolean>(false);
     const account = useSelector((state: State) => state.auth.account);
-    const disabled = account === null;
+    const disabled = account === null && false;
     const dispatch = useDispatch();
     const t = useT();
     const cloudSaves = useSelector((state: State) => state.ui.cloudSaves);

package/src/sidebar/sidebar-button.tsx

@@ -31,7 +31,7 @@ export function ImageRenderingButton(props: {
 export function QuickSaveButton(props: {
     class?: string,
 }) {
-    const disabled = useSelector((state: State) => state.auth.account) === null;
+    const disabled = useSelector((state: State) => state.auth.account) === null && false;
     const action = disabled ?
         uiSlice.actions.modalLogin() :
         uiSlice.actions.frameQuickSave();

package/src/sockdrive/js/src/sockdrive/cache.ts

@@ -1,7 +1,7 @@
 import { LRUMap } from "./lru";
 
 export interface Cache {
-    read(sector: number): Uint8Array | null;
+    read(sector: number, originReadMode: boolean): Uint8Array | null;
     write(sector: number, buffer: Uint8Array): boolean;
     create(origin: number, buffer: Uint8Array): void;
     getOrigin(sector: number): number;
@@ -19,12 +19,16 @@ export class BlockCache implements Cache {
         this.lru = new LRUMap(Math.floor(memoryLimit / (aheadRange * sectorSize)));
     }
 
-    public read(sector: number): Uint8Array | null {
+    public read(sector: number, originReadMode: boolean): Uint8Array | null {
         const origin = this.getOrigin(sector);
         const cached = this.lru.get(origin) as Uint8Array;
         if (cached) {
-            const offset = sector - origin;
-            return cached.slice(offset * this.sectorSize, (offset + 1) * this.sectorSize);
+            if (originReadMode) {
+                return cached;
+            } else {
+                const offset = sector - origin;
+                return cached.slice(offset * this.sectorSize, (offset + 1) * this.sectorSize);
+            }
         }
         return null;
     }
@@ -50,84 +54,3 @@ export class BlockCache implements Cache {
         return this.lru.size * this.aheadRange * this.sectorSize;
     }
 }
-
-export class SimpleCache implements Cache {
-    aheadRange: number;
-    sectorSize: number;
-    lru: LRUMap;
-
-    constructor(sectorSize: number, aheadRange: number, memoryLimit: number) {
-        this.aheadRange = aheadRange;
-        this.sectorSize = sectorSize;
-        this.lru = new LRUMap(Math.floor(memoryLimit / sectorSize));
-    }
-
-    public read(sector: number): Uint8Array | null {
-        const cached = this.lru.get(sector) as Uint8Array;
-        if (cached) {
-            return cached;
-        }
-        return null;
-    }
-
-    public write(sector: number, buffer: Uint8Array) {
-        this.lru.set(sector, buffer);
-        return true;
-    }
-
-    public create(sector: number, buffer: Uint8Array) {
-        for (let i = 0; i < this.aheadRange; ++i) {
-            this.lru.set(sector + i, buffer.slice(i * this.sectorSize, (i + 1) * this.sectorSize));
-        }
-    }
-
-    public getOrigin(sector: number) {
-        return sector;
-    }
-
-    public memUsed() {
-        return this.lru.size * this.sectorSize;
-    }
-}
-
-export class BlockAndWriteCache implements Cache {
-    aheadRange: number;
-    sectorSize: number;
-    blockCache: BlockCache;
-    writeCache: SimpleCache;
-
-    constructor(sectorSize: number, aheadRange: number, memoryLimit: number) {
-        this.aheadRange = aheadRange;
-        this.sectorSize = sectorSize;
-        this.blockCache = new BlockCache(sectorSize, aheadRange, memoryLimit);
-        this.writeCache = new SimpleCache(sectorSize, aheadRange, Math.floor(memoryLimit / 10));
-    }
-
-    read(sector: number) {
-        return this.blockCache.read(sector) || this.writeCache.read(sector);
-    }
-
-    write(sector: number, buffer: Uint8Array) {
-        if (!this.blockCache.write(sector, buffer)) {
-            this.writeCache.write(sector, buffer);
-        }
-        return true;
-    }
-
-    create(origin: number, buffer: Uint8Array): void {
-        this.blockCache.create(origin, buffer);
-        for (let i = 0; i < this.aheadRange; ++i) {
-            if (this.writeCache.read(origin + i) != null) {
-                this.writeCache.write(origin + i, buffer.slice(i * this.sectorSize, (i + 1) * this.sectorSize));
-            }
-        }
-    }
-
-    getOrigin(sector: number): number {
-        return this.blockCache.getOrigin(sector);
-    }
-
-    memUsed(): number {
-        return this.blockCache.memUsed() + this.writeCache.memUsed();
-    }
-}

package/src/sockdrive/js/src/sockdrive/drive.ts

@@ -39,7 +39,8 @@ export class Drive {
     cache: Cache | null = null;
     cleanup = () => {/**/};
 
-    openFn = (read: boolean, write: boolean, size: number, preloadQueue: number[]) => {/**/};
+    openFn = (read: boolean, write: boolean, size: number, preloadQueue: number[],
+        aheadRange: number) => {/**/};
     preloadProgressFn = (restBytes: number) => {/**/};
     errorFn = (e: Error) => {/**/};
 
@@ -48,13 +49,16 @@ export class Drive {
     preloadSectors: boolean;
     preloadQueue: number[] = [];
 
+    originReadMode: boolean;
+
     public constructor(endpoint: string,
         owner: string,
         drive: string,
         token: string,
         stats: Stats,
         module: EmModule,
-        preloadSectors = true) {
+        preloadSectors = true,
+        originReadMode = false) {
         this.sectorSize = 512;
         this.module = module;
         this.endpoint = endpoint;
@@ -67,6 +71,7 @@ export class Drive {
         this.stats = stats;
         this.retries = 3;
         this.preloadSectors = preloadSectors;
+        this.originReadMode = originReadMode;
 
         this.reconnect();
     }
@@ -75,7 +80,8 @@ export class Drive {
         this.errorFn = errorFn;
     }
 
-    public onOpen(openFn: (read: boolean, write: boolean, imageSize: number, preloadQueue: number[]) => void) {
+    public onOpen(openFn: (read: boolean, write: boolean, imageSize: number,
+        preloadQueue: number[], aheadRange: number) => void) {
         this.openFn = openFn;
     }
 
@@ -136,7 +142,8 @@ export class Drive {
                                 socket.addEventListener("message", onMessage);
                                 this.openFn(true, mode === "write",
                                     (Number.parseInt(sizeStr) ?? 2 * 1024 * 1024) * 1024,
-                                    this.preloadQueue);
+                                    this.preloadQueue,
+                                    aheadRange);
                                 resolve(socket);
 
                                 if (this.preloadQueue.length > 0) {
@@ -216,11 +223,9 @@ export class Drive {
     }
 
     public read(sector: number, buffer: Ptr, sync: boolean): Promise<number> | number {
-        const cached = this.cache!.read(sector);
+        const cached = this.cache!.read(sector, this.originReadMode);
         if (cached !== null) {
-            if (sync) {
-                this.stats.cacheHit++;
-            }
+            this.stats.cacheHit++;
             this.module.HEAPU8.set(cached, buffer);
             return sync ? 0 : Promise.resolve(0);
         } else if (sync) {
@@ -361,10 +366,15 @@ export class Drive {
                             this.cache!.create(origin,
                                 this.readAheadBuffer.slice(aheadOffset, aheadOffset + this.aheadSize));
                             if (i == 0 && buffer as number >= 0) {
+                                if (this.originReadMode && sector !== origin) {
+                                    throw new Error("Sector must be one of origins in originReadMode");
+                                }
                                 const offset = sector - origin;
                                 // aheadOffset is zero
-                                this.module.HEAPU8.set(this.readAheadBuffer.slice(offset * this.sectorSize,
-                                    (offset + 1) * this.sectorSize), buffer as number);
+                                const from = offset * this.sectorSize;
+                                this.module.HEAPU8.set(this.readAheadBuffer
+                                    .slice(from, from + (this.originReadMode ? this.aheadRange : 1) * this.sectorSize),
+                                    buffer as number);
                             }
                         }
 

package/src/sockdrive/js/src/test/test.ts

@@ -182,14 +182,17 @@ async function runTests() {
         assert.equal(await drive.read(0, 0, false), 0);
         assert.deepEqual(module.HEAPU8.slice(0, 10), new Uint8Array([51, 192, 142, 208, 188, 0, 124, 251, 80, 7]));
         assert.equal(1, stats.cacheMiss, "cache miss");
+        assert.equal(0, stats.cacheHit, "cache hit");
 
         assert.equal(await drive.read(8192, 0, false), 0);
         assert.deepEqual(module.HEAPU8.slice(0, 10), new Uint8Array([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]));
         assert.equal(2, stats.cacheMiss, "cache miss");
+        assert.equal(0, stats.cacheHit, "cache hit");
 
         assert.equal(await drive.read(8448, 0, false), 0);
         assert.deepEqual(module.HEAPU8.slice(256, 256 + 10), new Uint8Array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]));
-        assert.equal(3, stats.cacheMiss, "cache miss");
+        assert.equal(2, stats.cacheMiss, "cache miss");
+        assert.equal(1, stats.cacheHit, "cache hit");
     });
 
     testDrive("read cache", async (drive, module, stats) => {
@@ -213,16 +216,14 @@ async function runTests() {
     });
 
     testDrive("preload sectors", async (drive, module, stats, preloadQueue) => {
-        assert.ok(preloadQueue.length >= 3);
+        assert.ok(preloadQueue.length >= 2);
         let _0 = false;
-        let _8448 = false;
         let _8192 = false;
         for (const next of preloadQueue) {
             _0 = _0 || next === 0;
             _8192 = _8192 || next === 8192;
-            _8448 = _8448 || next === 8448;
         }
-        assert.ok(_0 && _8192 && _8448);
+        assert.ok(_0 && _8192);
 
         await new Promise<void>((resolve) => setTimeout(resolve, 1000));
 

package/src/store/init.ts

@@ -10,8 +10,8 @@ export const sockdriveBackend: {
     }
 } = {
     "js-dos": {
-        sockdriveEndpoint: "https://backend.make-vm.com:8001",
-        sockdriveWssEndpoint: "wss://backend.make-vm.com:8001",
+        sockdriveEndpoint: "https://sockdrive.js-dos.com:8001",
+        sockdriveWssEndpoint: "wss://sockdrive.js-dos.com:8001",
     },
     "localhost": {
         sockdriveEndpoint: "http://localhost:8001",

package/src/store/ui.ts

@@ -27,6 +27,7 @@ const initialState: {
     toastTimeoutId: number,
     background: string | null,
     readOnlyWarning: boolean,
+    updateWsWarning: boolean,
     cloudSaves: boolean,
 } = {
     modal: "none",
@@ -42,6 +43,7 @@ const initialState: {
     toastTimeoutId: 0,
     background: null,
     readOnlyWarning: false,
+    updateWsWarning: false,
     cloudSaves: true,
 };
 
@@ -136,6 +138,9 @@ export const uiSlice = createSlice({
         readOnlyWarning: (state, a: { payload: boolean }) => {
             state.readOnlyWarning = a.payload;
         },
+        updateWsWarning: (state, a: { payload: boolean }) => {
+            state.updateWsWarning = a.payload;
+        },
         cloudSaves: (state, a: { payload: boolean }) => {
             state.cloudSaves = a.payload;
         },

package/src/store.tsx

@@ -9,7 +9,7 @@ import { DosEvent, DosOptions } from "./public/types";
 import { CommandInterface, InitFs } from "emulators";
 import { useStore } from "react-redux";
 import { Cache, CacheNoop } from "./host/lcache";
-import { InitState, createInitSlice } from "./store/init";
+import { InitState, createInitSlice, initSlice, sockdriveBackend, sockdriveBackendNames } from "./store/init";
 
 export interface LoadedBundle {
     bundleUrl: string | null,
@@ -53,7 +53,7 @@ export function makeNonSerializableStore(options: Partial<DosOptions>): NonSeria
     };
 }
 
-export function makeStore(nonSerializableStore: NonSerializableStore) {
+export function makeStore(nonSerializableStore: NonSerializableStore, options: Partial<DosOptions>) {
     const { storeUid, slice } = createInitSlice();
     const store = configureStore({
         reducer: {
@@ -72,6 +72,14 @@ export function makeStore(nonSerializableStore: NonSerializableStore) {
         },
     });
     nonSerializableStoreMap[storeUid] = nonSerializableStore;
+    if (options.sockdriveBackend && sockdriveBackendNames.indexOf(options.sockdriveBackend.name) === -1) {
+        sockdriveBackendNames.push(options.sockdriveBackend.name);
+        sockdriveBackend[options.sockdriveBackend.name] = {
+            sockdriveEndpoint: "https://" + options.sockdriveBackend.host,
+            sockdriveWssEndpoint: "wss://" + options.sockdriveBackend.host,
+        };
+        store.dispatch(initSlice.actions.setSockdriveBackendName(options.sockdriveBackend.name));
+    }
     return store;
 };
 

package/src/ui.tsx

@@ -49,6 +49,7 @@ export function Ui() {
         <Login />
         <Toast />
         <ReadOnlyWarning />
+        <UpdateWsWarning />
     </div>;
 };
 
@@ -102,3 +103,38 @@ function ReadOnlyWarning() {
         </div>
     </div>;
 }
+
+function UpdateWsWarning() {
+    const updateWsWarning = useSelector((state: State) => state.ui.updateWsWarning);
+    const t = useT();
+    const dispatch = useDispatch();
+
+    if (!updateWsWarning) {
+        return null;
+    }
+
+    function fix() {
+        window.open("https://dos.zone/download/", "_blank");
+        dispatch(uiSlice.actions.updateWsWarning(false));
+    }
+
+    function close() {
+        dispatch(uiSlice.actions.updateWsWarning(false));
+    }
+
+    return <div class="absolute left-20 right-10 top-10 flex justify-center">
+        <div class="alert w-auto">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                stroke-width="1.5" stroke="currentColor" class="size-6 text-error">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217
+                    3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898
+                    0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+            </svg>
+            <span>{t("ws_outdated")}</span>
+            <div>
+                <button class="btn btn-sm btn-primary mr-2" onClick={fix}>{t("update")}</button>
+                <button class="btn btn-sm" onClick={close}>{t("close")}</button>
+            </div>
+        </div>
+    </div>;
+}

package/src/v8/config.ts

@@ -16,3 +16,5 @@ export const cancelSubscriptionPage = {
     en: "https://v8.js-dos.com/cancel-your-subscription/",
     ru: "https://v8.js-dos.com/ru/cancel-your-subscription/",
 };
+
+export const actualWsVersion = 2;

package/src/window/dos/dos-window.tsx

@@ -6,6 +6,8 @@ import { State, useNonSerializableStore, postJsDosEvent } from "../../store";
 import { useDosRuntime } from "./dos-runtime";
 import { dhry2Bundle, Dhry2Results } from "./dos-dhry2";
 import { createWsTransportLayer } from "../../ws/ws-transport-layer";
+import { actualWsVersion } from "../../v8/config";
+import { uiSlice } from "../../store/ui";
 
 declare const emulators: Emulators;
 
@@ -35,7 +37,12 @@ export function DosWindow(props: {
                 if (backendHardware && nonSerializableStore.options.backendHardware) {
                     const ws = await nonSerializableStore.options.backendHardware(backend);
                     if (ws !== null) {
-                        return emulators.backend(bundles as any, await createWsTransportLayer(ws), { token });
+                        return emulators.backend(bundles as any, await createWsTransportLayer(ws, (version) => {
+                            if (version < actualWsVersion) {
+                                dispatch(uiSlice.actions.updateWsWarning(true));
+                            }
+                            console.log("wsServer:", version, " expected:", actualWsVersion);
+                        }), { token });
                     }
                 }
 

package/src/ws/ws-sockdrive.ts

@@ -16,8 +16,10 @@ export interface ReadResponse {
 }
 
 export function createSockdrive(
-    onOpen: (drive: string, read: boolean, write: boolean) => void,
-    onError: (e: Error) => void) {
+    onOpen: (drive: string, read: boolean, write: boolean, imageSize: number, preloadQueue: number[]) => void,
+    onError: (e: Error) => void,
+    onPreloadProgress: (drive: string, restBytes: number) => void,
+) {
     let seq = 0;
     const mapping: { [handle: Handle]: Drive } = {};
     const templates: { [handle: number]: Template } = {};
@@ -32,7 +34,10 @@ export function createSockdrive(
     };
     const sockdrive = {
         stats,
-        open: async (url: string, owner: string, name: string, token: string, aheadRange: number): Promise<Handle> => {
+        open: async (url: string, owner: string, name: string, token: string): Promise<{
+            handle: Handle,
+            aheadRange: number,
+        }> => {
             const response = await fetch(url.replace("wss://", "https://")
                 .replace("ws://", "http://") + "/template/" + owner + "/" + name);
             const template = await response.json();
@@ -50,22 +55,39 @@ export function createSockdrive(
             };
 
             const sectorSize = templates[seq].sectorSize;
-            memory[seq] = new Uint8Array(sectorSize + sectorSize * aheadRange);
-            mapping[seq] = new Drive(url, owner, name, token, stats, { HEAPU8: memory[seq] });
-            mapping[seq].onOpen((read, write) => {
-                onOpen(owner + "/" + name, read, write);
+            const module = { HEAPU8: new Uint8Array(0) };
+            mapping[seq] = new Drive(url, owner, name, token, stats, module, true, true);
+            return new Promise<{ handle: Handle, aheadRange: number }>((resolve, reject) => {
+                const drive = owner + "/" + name;
+                mapping[seq].onOpen((read, write, imageSize, preloadQueue, aheadRange) => {
+                    memory[seq] = new Uint8Array(sectorSize /* write */ + sectorSize * aheadRange);
+                    module.HEAPU8 = memory[seq];
+                    onOpen(drive, read, write, imageSize, preloadQueue);
+                    resolve({
+                        handle: seq,
+                        aheadRange,
+                    });
+                });
+                mapping[seq].onPreloadProgress((restBytes) => {
+                    onPreloadProgress(drive, restBytes);
+                });
+                mapping[seq].onError((e) => {
+                    onError(e);
+                    reject(e);
+                });
             });
-            mapping[seq].onError(onError);
-            return seq;
         },
-        read: (handle: Handle, sector: number): Promise<ReadResponse> => {
+        read: async (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),
-                    };
-                });
+                const ptr = templates[seq].sectorSize;
+                let code = mapping[handle].read(sector, ptr, true) as number;
+                if (code = 255) {
+                    code = await mapping[handle].read(sector, ptr, false);
+                }
+                return {
+                    code,
+                    buffer: memory[handle].slice(ptr),
+                };
             }
 
             console.error("ERROR! sockdrive handle", handle, "not found");

package/src/ws/ws-transport-layer.ts

@@ -48,9 +48,11 @@ export class WsTransportLayer implements TransportLayer {
     socket: WebSocket;
     sessionId: string = Date.now() + "";
     hardware: Hardware;
+    onInit: (version: number) => void = {/**/};
 
     private cycles = 0;
-    private sockdrive = createSockdrive(this.onSockdriveOpen.bind(this), this.onSockdriveError.bind(this));
+    private sockdrive = createSockdrive(this.onSockdriveOpen.bind(this),
+        this.onSockdriveError.bind(this), this.onSockdrivePreloadProgress.bind(this));
 
     private handler: MessageHandler = () => {/**/};
 
@@ -120,15 +122,17 @@ export class WsTransportLayer implements TransportLayer {
         const { id, payload } = this.readMessage(msg);
         const message = serverMessageEnum[id];
         switch (message) {
-            case "ws-ready":
+            case "ws-ready": {
+                this.onInit((payload && payload[0] && payload.length > 0) ? payload[0][0] : 0);
+                this.handler(message, {});
+            } break;
             case "ws-server-ready":
-            case "ws-exit":
-                {
-                    // delay ws-server-ready until ws-sound-init
-                    if (message !== "ws-server-ready") {
-                        this.handler(message, {});
-                    }
-                } break;
+            case "ws-exit": {
+                // delay ws-server-ready until ws-sound-init
+                if (message !== "ws-server-ready") {
+                    this.handler(message, {});
+                }
+            } break;
             case "ws-stdout":
             case "ws-log":
             case "ws-warn":
@@ -267,17 +271,17 @@ export class WsTransportLayer implements TransportLayer {
                                 const owner = textDecoder.decode(payload[1]!);
                                 const name = textDecoder.decode(payload[2]!);
                                 const token = textDecoder.decode(payload[3]!);
-                                const aheadRange = this.readUint32(payload[4]!, 0);
-                                const handle = await this.sockdrive.open(url, owner, name, token, aheadRange);
+                                const { handle, aheadRange } = await this.sockdrive.open(url, owner, name, token);
                                 const template = this.sockdrive.template(handle);
-                                const packet = new Uint8Array(4 * 6);
+                                const packet = new Uint8Array(4 * 7);
                                 let offset = 0;
                                 offset = this.writeUint32(packet, handle, offset);
                                 offset = this.writeUint32(packet, template.size, offset);
                                 offset = this.writeUint32(packet, template.heads, offset);
                                 offset = this.writeUint32(packet, template.cylinders, offset);
                                 offset = this.writeUint32(packet, template.sectors, offset);
-                                this.writeUint32(packet, template.sectorSize, offset);
+                                offset = this.writeUint32(packet, template.sectorSize, offset);
+                                this.writeUint32(packet, aheadRange, offset);
                                 this.sendMessageToSocket(100, packet);
                             } break;
                             case 101/* ws-sockdrive-read */: {
@@ -317,7 +321,7 @@ export class WsTransportLayer implements TransportLayer {
         }
     }
 
-    constructor(socket: WebSocket) {
+    constructor(socket: WebSocket, onInit: (version: number) => void) {
         this.socket = socket;
         this.socket.addEventListener("error", (e) => {
             this.handler("ws-err", { tag: "ws", message: (e as any).message ?? "Unknown transport layer error" });
@@ -330,6 +334,7 @@ export class WsTransportLayer implements TransportLayer {
         });
         this.sendMessageToSocket("wc-install");
         this.hardware = (null) as any;
+        this.onInit = onInit;
     }
 
     async sendMessageToServer(name: ClientMessage, props?: { [key: string]: any; }) {
@@ -411,10 +416,11 @@ export class WsTransportLayer implements TransportLayer {
         this.sendMessageToSocket("wc-exit");
     }
 
-    onSockdriveOpen(drive: string, read: boolean, write: boolean) {
+    onSockdriveOpen(drive: string, read: boolean, write: boolean, imageSize: number, preloadQueue: number[]) {
         this.handler("ws-log", {
             tag: "worker",
-            message: "sockdrive: " + drive + ", read=" + read + ", write=" + write,
+            message: "sockdrive: " + drive + ", read=" + read + ", write=" + write +
+                ", imageSize=" + Math.round(imageSize / 1024 / 1024) + "Mb" + ", preloadQueue=" + preloadQueue.length,
         });
     }
 
@@ -424,9 +430,16 @@ export class WsTransportLayer implements TransportLayer {
             message: e.message ?? "unable to open sockdrive",
         });
     }
+
+    onSockdrivePreloadProgress(drive: string, restBytes: number) {
+        this.handler("ws-log", {
+            tag: "worker",
+            message: "sockdrive: " + drive + ", preload=" + restBytes,
+        });
+    }
 }
 
-export function createWsTransportLayer(url: string): Promise<TransportLayer> {
+export function createWsTransportLayer(url: string, onInit: (version: number) => void): Promise<TransportLayer> {
     return new Promise<TransportLayer>((resolve) => {
         let locked = false;
         const inervalId = setInterval(() => {
@@ -439,7 +452,7 @@ export function createWsTransportLayer(url: string): Promise<TransportLayer> {
             const onSuccess = () => {
                 clearInterval(inervalId);
                 console.log("Connected to", url);
-                resolve(new WsTransportLayer(ws));
+                resolve(new WsTransportLayer(ws, onInit));
             };
 
             ws.addEventListener("error", (error) => {