js-dos 8.1.1 → 8.1.3

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.1",
+  "version": "8.1.3",
   "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>
@@ -56,11 +66,13 @@ export function FatDrivesFrame() {
                     </tr>
                 </thead>
                 <tbody>
-                    {myDrives
-                        .filter(({ owner, name }) => filter.length === 0 ||
-                            owner.indexOf(filter) >= 0 || name.indexOf(filter) >= 0)
+                    {
                         // eslint-disable-next-line camelcase
-                        .map(({ name, owner, fork_of }, index) => {
+                        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={() => { }}>
@@ -76,47 +88,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 +108,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,7 @@ import { State } from "./store";
 
 const translations: {[lang: string]: {[key: string]: string} } = {
     ru: {
+        enter_name_of_drive: "Введите название диска",
         ws_outdated: "Необходимо обновить DOS Браузер",
         update: "Обновить",
         preloading_sockdrive: "Загрузка FAT",
@@ -77,6 +78,7 @@ 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",

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/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.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/v8/config.ts

@@ -17,4 +17,4 @@ export const cancelSubscriptionPage = {
     ru: "https://v8.js-dos.com/ru/cancel-your-subscription/",
 };
 
-export const actualWsVersion = 1;
+export const actualWsVersion = 2;