js-dos 7.4.9 → 8.1.0

package/.github/workflows/build.yml

@@ -0,0 +1,51 @@
+name: Build
+
+on:
+  push:
+    branches: [ 8.xx ]
+    tags:
+      - "v*.*.*"
+  pull_request:
+    branches: [ 8.xx ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+    
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        submodules: 'recursive'
+    - name: build js-dos
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        registry-url: 'https://registry.npmjs.org'
+        cache: 'npm'
+    - run: npm install -g yarn
+    - run: yarn
+    - run: yarn run eslint . --ext ts,tsx --max-warnings 0
+    - run: mkdir -p public/emulators && cp -rv node_modules/emulators/dist/* public/emulators
+    - run: NODE_ENV=production yarn run vite build --base /latest --sourcemap true --minify terser
+    - run: zip -9r release.zip dist/*
+    - name: publish
+      if: startsWith(github.ref, 'refs/tags/')
+      run: npm publish
+      env:
+        NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}
+    - name: upload
+      uses: actions/upload-artifact@v3.0.0
+      with:
+        name: 'dist'
+        path: 'dist'
+    - name: Release
+      uses: softprops/action-gh-release@v2
+      if: startsWith(github.ref, 'refs/tags/')
+      with:
+        name: ${{ github.ref_name }}
+        files: |
+          ${{github.workspace}}/release.zip

package/.gitmodules

@@ -0,0 +1,4 @@
+[submodule "src/sockdrive"]
+	path = src/sockdrive
+	url = git@github.com:makevm/sockdrive.git
+	branch = main

package/README.deployment.md

@@ -0,0 +1,11 @@
+# Deployment
+
+Build and push release version:
+
+```
+yarn run vite build --base /latest --sourcemap true --minify terser && \
+    aws s3 --endpoint-url=https://storage.yandexcloud.net sync --acl public-read \
+    dist s3://jsdos/latest --delete 
+```
+
+Clear the CDN cache in dashboard.

package/README.md

@@ -1,107 +1,47 @@
-# js-dos 7.xx
-[![Build](https://github.com/caiiiycuk/js-dos/workflows/Build/badge.svg)](https://github.com/caiiiycuk/js-dos/actions/workflows/build.yml)
+# js-dos v8
+[![Build](https://github.com/caiiiycuk/js-dos/actions/workflows/build.yml/badge.svg?branch=8.xx)](https://github.com/caiiiycuk/js-dos/actions/workflows/build.yml)
 
-js-dos is a javascript library that allows you to run DOS programs in browser. It was designed from the ground up to be easily installed and used to get your DOS program up and running in browser quickly.
+The simplest API to run **DOS/Win** 9x programs in browser or node. js-dos provides full-featured DOS player that can be easily installed and used to get your DOS program up
+and running in browser quickly. js-dos provide many advanced features like multiplayer and cloud storage. All available features are enabled for any integration and free.
 
-```js
-    Dos(element).run("game.jsdos")
-```
-
-[Documentation](https://js-dos.com/)
-
-## Quick start with create-dosbox
-
-Create js-dos web page with no build configuration.
-
-```sh
-npx create-dosbox my-app
-cd my-app
-npm install
-npm start
----
-Open localhost:8080 in browser
-```
-
-You will be prompted to select game that you want bootstrap.
-
-If you've previously installed `create-dosbox` globally via `npm install -g create-dosbox`, we recommend you uninstall the package using `npm uninstall -g create-dosbox` or `yarn global remove create-dosbox` to ensure that npx always uses the latest version.
+The key features:
+* Works in **worker** or render thread
+* Support execution in Node and Browsers
+* Multiple backends: DOSBox, DOSBox-X
+* Mobile support (v8 - WIP, v7 - production)
+* Able to run very big games (like Diablo, etc.)
+* Multiplayer support
+* Cloud storage
+* WebAssembly and pure JS versions
+  
 
-_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_
 
-Then open [http://localhost:8080/](http://localhost:8080/) to see your app.<br>
+[![Watch the video](https://github.com/caiiiycuk/js-dos/assets/1727152/a2b481cb-43b1-44aa-8b71-2181d351bb1a)](https://youtu.be/lhFrAe5YrJE)
 
-<p align='center'>
-<img src='https://github.com/js-dos/create-dosbox/raw/master/npx-create-dosbox.gif' width='600' alt='npm start'>
-</p>
+## Documentation
 
-It will create a directory called `my-app` inside the current folder.<br>
-Inside that directory, it will generate the initial project structure:
-
-```
-my-app
-├── package.json
-└── _site
-    ├── js-dos
-    ├── bundle.jsdos
-    └── index.html
-```
-
-No configuration or complicated folder structures, only the files you need to build your app.<br>
+* [js-dos 8.xx](https://js-dos.com/overview.html)
+* [js-dos 7.xx](https://js-dos.com/v7/build/)
+* [js-dos 6.22](https://js-dos.com/index_6.22.html)
+* [js-dos 3.xx](https://js-dos.com/index_v3.html)
+* [Repository](https://github.com/caiiiycuk/js-dos-docs)
 
-* **js-dos** - contains last release version of js-dos that you can download from [Releases](https://github.com/caiiiycuk/js-dos/releases) page
-* **bundle.jsdos** - is a bundle with game to start [read more](https://js-dos.com/v7/build/docs/jsdos-bundle)
-* **index.html** - is a web page template
+Demo:
 
-So, you can host `_site `on static web server no other dependincies is needed.
+[DOS.Zone](https://dos.zone)
 
-Once the installation is done, you can open your project folder:
+## Development
 
-```sh
-cd my-app
+1. You need to install node dependencies and put `emulators@beta` into `public/emulators`.
 ```
-
-Inside the newly created project, you can run some built-in commands:
-
-```sh
-npm install
-npm start
+yarn
+cp -rv node_modules/emulators/dist/* public/emulators
 ```
-
-Open [http://localhost:8080](http://localhost:8080) to view it in the browser.
+2. Run `yarn run vite` and open [http://localhost:3000](http://localhost:3000) js-dos is ready!
 
 ## Community
 
-Ask a technical question in [Q&A](https://talks.dos.zone/c/questions-answers/).
-
+* [DOS.Zone](https://dos.zone)
 * [Discord](https://discord.com/invite/hMVYEbG)
 * [Twitter](https://twitter.com/intent/user?screen_name=doszone_db)
 * [Telegram](https://t.me/doszone)
-
-## Building
-
-To build whole project do:
-```
-yarn
-NODE_ENV=production yarn run gulp
-```
-
-Also, you can build js and css separately:
-
-```
-yarn run gulp js
-yarn run gulp css
-```
-
-## Example
-
-To run built-in example do:
-
-```
-hs .
-firefox examples/digger/index.html
-```
-
-# Older releases
-
-* [js-dos 6.22](https://js-dos.com/index_6.22.html)
-* [js-dos 3.xx](https://js-dos.com/index_v3.html)

package/index.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>js-dos 8.xx</title>
+  <style>
+    html,
+    body {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.tsx">
+  </script>
+  <script>
+    const params = new URLSearchParams(location.search);
+    document.addEventListener("DOMContentLoaded", () => {
+      /* eslint-disable max-len */
+      /* eslint-enable max-len */
+      const props = Dos(document.getElementById("app"),
+        {
+          // url: decodeURIComponent("https%3A%2F%2Fcdn.dos.zone%2Fcustom%2Fdos%2Fdoom_dm.jsdos"),
+          // url: decodeURIComponent("https%3A%2F%2Fcdn.dos.zone%2Fcustom%2Fdos%2Fhomm2_netbios.jsdos"),
+          // url: "https://cdn.dos.zone/original/2X/2/24b00b14f118580763440ecaddcc948f8cb94f14.jsdos", // digger
+          // url: "https://cdn.dos.zone/custom/dos/doom.jsdos",
+          // url: "https://cdn.dos.zone/custom/dos/duke3d_ipx.jsdos",
+          // url: "https://br.cdn.dos.zone/ipx/duke3d/duke3d_ipx.jsdos",
+          // url: "https://br.cdn.dos.zone/ipx/doom_dm/doom_dm.jsdos",
+          // url: "https://cdn.dos.zone/original/2X/b/b4b5275904d86a4ab8a20917b2b7e34f0df47bf7.jsdos", // dhry2
+          // url: "https://cdn.dos.zone/original/2X/7/744842062905f72648a4d492ccc2526d039b3702.jsdos", // sim-city
+          // dosboxConf: diabloConf,
+          pathPrefix: "/emulators/",
+          server: params.get("server"),
+          room: params.get("room"),
+          //backendHardware: (backend) => {
+          //  console.log("Hardware backend for", backend);
+          //  return Promise.resolve("ws://127.0.0.1:8080");
+          //},
+          onEvent: (event) => {
+            console.log("Event", event)
+            if (event === "ci-ready") {
+              // props.setFrame("network");
+              // props.setFullScreen(true);
+            }
+          },
+        });
+    });
+
+    const diabloConf = `
+[sdl]
+autolock=false
+mouse_emulation=integration
+
+[dosbox]
+title=Windows 95
+memsize=128
+
+[video]
+vmemsize=8
+vesa modelist width limit=0
+vesa modelist height limit=0
+
+[dos]
+ver=7.1
+hard drive data rate limit=0
+floppy drive data rate limit=0
+
+[cpu]
+cputype=pentium_mmx
+core=auto 
+integration device=true
+
+[sblaster]
+sbtype=sb16vibra
+
+[fdc, primary]
+int13fakev86io=true
+
+[ide, primary]
+int13fakeio=true
+int13fakev86io=true
+
+[ide, secondary]
+int13fakeio=true
+int13fakev86io=true
+cd-rom insertion delay=4000
+
+[render]
+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
+boot c:
+`;
+  </script>
+</body>
+
+</html>

package/package.json

@@ -1,73 +1,48 @@
 {
-    "name": "js-dos",
-    "version": "7.4.9",
-    "description": "Easiest API to run dos programs in browser",
-    "main": "dist/js-dos.js",
-    "types": "dist/types/src/player.d.ts",
-    "browserslist": [
-        "defaults",
-        "not ie 11",
-        "not op_mini all"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/caiiiycuk/js-dos.git"
-    },
-    "keywords": [
-        "js-dos",
-        "dos",
-        "api",
-        "browser",
-        "dosbox"
-    ],
-    "author": "Alexander Guryanov (aka caiiiycuk)",
-    "license": "GPL-2.0",
-    "bugs": {
-        "url": "https://github.com/caiiiycuk/js-dos/issues"
-    },
-    "homepage": "https://js-dos.com",
-    "devDependencies": {
-        "@babel/core": "^7.18.6",
-        "@babel/preset-env": "^7.18.6",
-        "@types/browserify": "^12.0.37",
-        "@types/gulp": "^4.0.6",
-        "@types/gulp-rename": "2.0.1",
-        "@types/gulp-size": "^4.0.0",
-        "@types/gulp-sourcemaps": "^0.0.35",
-        "@types/gulp-terser": "^1.2.1",
-        "@types/gulp-uglify": "^3.0.7",
-        "@types/node": "^18.0.6",
-        "@types/notyf": "^3.0.0",
-        "@types/undertaker": "^1.2.8",
-        "@types/vinyl-buffer": "^1.0.0",
-        "@types/vinyl-source-stream": "^0.0.30",
-        "@typescript-eslint/eslint-plugin": "^5.30.6",
-        "@typescript-eslint/parser": "^5.30.6",
-        "babelify": "^10.0.0",
-        "base64-js": "^1.5.1",
-        "browserify": "^17.0.0",
-        "core-js": "^3.23.5",
-        "del": "^6.1.1",
-        "emulators": "0.73.8",
-        "emulators-ui": "0.73.7",
-        "eslint": "^8.20.0",
-        "eslint-config-google": "^0.14.0",
-        "gulp": "^4.0.2",
-        "gulp-concat": "^2.6.1",
-        "gulp-rename": "^2.0.0",
-        "gulp-size": "^4.0.1",
-        "gulp-sourcemaps": "^3.0.0",
-        "gulp-terser": "^2.1.0",
-        "htm": "^3.1.1",
-        "preact": "^10.10.0",
-        "tailwindcss": "^2.2.17",
-        "ts-node": "^10.9.1",
-        "tsify": "^5.0.4",
-        "typescript": "^4.7.4",
-        "vinyl-buffer": "^1.0.1",
-        "vinyl-source-stream": "^2.0.0"
-    },
-    "dependencies": {
-        "nanoid": "^3.3.4"
-    }
+  "name": "js-dos",
+  "version": "8.1.0",
+  "description": "Full-featured DOS player with multiple emulator backends",
+  "type": "module",
+  "keywords": [
+    "js-dos",
+    "dos",
+    "api",
+    "browser",
+    "dosbox",
+    "emulators",
+    "webassembly"
+  ],
+  "author": "Alexander Guryanov (aka caiiiycuk)",
+  "license": "GPL-2.0",
+  "bugs": {
+    "url": "https://github.com/caiiiycuk/js-dos/issues"
+  },
+  "homepage": "https://js-dos.com",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.9.7",
+    "preact": "^10.19.3",
+    "react-checkbox-tree": "^1.8.0",
+    "react-redux": "^8.1.3"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.8.1",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
+    "autoprefixer": "^10.4.17",
+    "daisyui": "^3.9.3",
+    "emulators": "8.1.2",
+    "eslint": "^8.56.0",
+    "eslint-config-google": "^0.14.0",
+    "postcss": "^8.4.33",
+    "postcss-import": "^16.0.0",
+    "tailwindcss": "^3.4.1",
+    "terser": "^5.27.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12"
+  }
 }

package/postcss.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/app.css

@@ -0,0 +1,14 @@
+.jsdos-rso {
+  @apply h-full;
+  background: hsl(var(--pc));
+
+  .jsdos-fullscreen-workaround {
+    position: fixed !important;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: black;
+    z-index: 999;
+  }
+}

package/src/base.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --sidebar-width: 3rem;
+    /* w-12 */
+  }
+}

package/src/components/checkbox.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useRef } from "preact/hooks";
+
+export function Checkbox(props: {
+    class?: string,
+    toggleClass?: string,
+    label: string,
+    checked?: boolean,
+    onChange?: (value: boolean) => void,
+    disabled?: boolean,
+    intermediate?: boolean,
+}) {
+    const ref = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (ref === null || ref.current === null) {
+            return;
+        }
+
+        (ref.current as any).indeterminate = props.intermediate;
+    }, [ref, props.intermediate]);
+
+    function onChange() {
+        if (props.onChange) {
+            props.onChange(!(props.checked === true));
+        }
+    }
+
+    return <div className={props.class + " form-control option"}
+        onClick={onChange}>
+        <label className="label cursor-pointer">
+            <span className="label-text mr-6">{props.label}</span>
+            <input
+                ref={ref}
+                checked={props.checked === true}
+                type="checkbox"
+                className={ "toggle " + (props.checked ? " toggle-primary " : "") +
+                    props.toggleClass }
+                disabled={props.disabled === true} />
+        </label>
+    </div>;
+}

package/src/components/close-button.tsx

@@ -0,0 +1,17 @@
+export function CloseButton(props: {
+    onClose: () => void
+    class?: string,
+}) {
+    return <div class={ "text-gray-400 hover:text-gray-600 btn " +
+        props.class } onClick={props.onClose}>
+        <svg xmlns="http://www.w3.org/2000/svg"
+            class="w-full h-full"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+    </div>;
+}

package/src/components/components.css

@@ -0,0 +1,28 @@
+.jsdos-rso {
+    select {
+        @apply select select-bordered;
+    }
+
+    .slider {
+        @apply flex flex-row items-center;
+
+        .label {
+            @apply mr-4 w-min;
+        }
+
+        .touch {
+            @apply cursor-pointer h-16 relative flex-grow flex flex-row items-center;
+
+            .bg {
+                @apply w-full h-2 rounded-full;
+                background-color: hsl(var(--b2));
+            }
+
+            .point {
+                @apply absolute h-6 w-6 rounded-full;
+                background-color: hsl(var(--bc));
+            }
+        }
+
+    }
+}

package/src/components/dos-option-checkbox.tsx

@@ -0,0 +1,94 @@
+import { useDispatch, useSelector } from "react-redux";
+import { useT } from "../i18n";
+import { State, useNonSerializableStore } from "../store";
+import { dosSlice } from "../store/dos";
+import { dispatchLoginAction, uiSlice } from "../store/ui";
+import { Checkbox } from "./checkbox";
+
+export function Editor() {
+    const t = useT();
+    const dispatch = useDispatch();
+    const editor = useSelector((state: State) => state.ui.editor);
+    return <Checkbox
+        class="mt-4"
+        label={t("editor")}
+        checked={editor}
+        onChange={(e) => dispatch(uiSlice.actions.setEditor(e))}
+    />;
+}
+
+export function MouseCapture() {
+    const t = useT();
+    const dispatch = useDispatch();
+    const lock = useSelector((state: State) => state.dos.mouseCapture);
+    return <Checkbox
+        class="mt-4"
+        label={t("mouse_lock")}
+        checked={lock}
+        onChange={(l) => dispatch(dosSlice.actions.mouseCapture(l))}
+    />;
+}
+
+export function PauseCheckbox() {
+    const t = useT();
+    const dispatch = useDispatch();
+    const paused = useSelector((state: State) => state.dos.paused);
+    const disabled = useSelector((state: State) => state.ui.window) !== "run";
+    return <Checkbox
+        class="mt-4"
+        label={t("pause")}
+        checked={paused}
+        disabled={disabled}
+        onChange={(p) => dispatch(dosSlice.actions.paused(p))}
+    />;
+}
+
+export function WorkerCheckbox() {
+    const t = useT();
+    const dispatch = useDispatch();
+    const worker = useSelector((state: State) => state.dos.worker);
+    const hardware = useSelector((state: State) => state.dos.backendHardware);
+    const disabled = useSelector((state: State) => state.ui.window) === "run";
+    const nonSerializableStore = useNonSerializableStore();
+    return hardware && nonSerializableStore.options.backendHardware ? null : <Checkbox
+        class="mt-4"
+        label={t("worker")}
+        checked={worker}
+        disabled={disabled}
+        onChange={(w) => dispatch(dosSlice.actions.dosWorker(w))}
+    />;
+}
+
+export function HardwareCheckbox() {
+    const t = useT();
+    const dispatch = useDispatch();
+    const hardware = useSelector((state: State) => state.dos.backendHardware);
+    const nonSerializableStore = useNonSerializableStore();
+    return nonSerializableStore.options.backendHardware ? <Checkbox
+        class="mt-4"
+        label={t("hardware")}
+        checked={hardware}
+        onChange={(h) => dispatch(dosSlice.actions.dosBackendHardware(h))}
+    /> : null;
+}
+
+export function SockdriveWrite() {
+    const t = useT();
+    const dispatch = useDispatch();
+    const account = useSelector((state: State) => state.auth.account);
+    const premium = account?.premium === true;
+    const visible = useSelector((state: State) => state.dos.backend === "dosboxX");
+    const checked = useSelector((state: State) => state.dos.sockdriveWrite) && premium;
+    return visible ? <Checkbox
+        class="mt-4"
+        label={t("fat_write")}
+        checked={checked}
+        onChange={(c) => {
+            if (!premium) {
+                dispatchLoginAction(account, dispatch);
+            } else {
+                dispatch(dosSlice.actions.setSockdriveWrite(c));
+            }
+        }}
+    /> : null;
+}