js-dos 7.4.9 → 8.1.0

package/src/frame/editor/defaults.ts

@@ -0,0 +1,419 @@
+/* eslint-disable max-len */
+export const dosboxconf = [{
+    name: "7.xx",
+    backend: "dosbox",
+    contents: `[sdl]
+autolock=false
+
+fullscreen=false
+fulldouble=false
+fullresolution=original
+windowresolution=original
+output=surface
+sensitivity=100
+waitonerror=true
+priority=higher,normal
+mapperfile=mapper-jsdos.map
+usescancodes=true
+vsync=false
+[dosbox]
+machine=svga_s3
+
+language=
+captures=capture
+memsize=16
+[cpu]
+core=auto
+cputype=auto
+cycles=auto
+
+cycleup=10
+cycledown=20
+[mixer]
+nosound=false
+rate=44100
+
+blocksize=1024
+prebuffer=20
+
+[render]
+# frameskip: How many frames DOSBox skips before drawing one.
+#    aspect: Do aspect correction, if your output method doesn't support scaling this can slow things down!.
+#    scaler: Scaler used to enlarge/enhance low resolution modes.
+#              If 'forced' is appended, then the scaler will be used even if the result might not be desired.
+#            Possible values: none, normal2x, normal3x, advmame2x, advmame3x, advinterp2x, advinterp3x, hq2x, hq3x, 2xsai, super2xsai, supereagle, tv2x, tv3x, rgb2x, rgb3x, scan2x, scan3x.
+
+frameskip=0
+aspect=false
+scaler=none
+
+[midi]
+#     mpu401: Type of MPU-401 to emulate.
+#             Possible values: intelligent, uart, none.
+# mididevice: Device that will receive the MIDI data from MPU-401.
+#             Possible values: default, win32, alsa, oss, coreaudio, coremidi, none.
+# midiconfig: Special configuration options for the device driver. This is usually the id of the device you want to use.
+#               See the README/Manual for more details.
+
+mpu401=intelligent
+mididevice=default
+midiconfig=
+
+[sblaster]
+#  sbtype: Type of Soundblaster to emulate. gb is Gameblaster.
+#          Possible values: sb1, sb2, sbpro1, sbpro2, sb16, gb, none.
+#  sbbase: The IO address of the soundblaster.
+#          Possible values: 220, 240, 260, 280, 2a0, 2c0, 2e0, 300.
+#     irq: The IRQ number of the soundblaster.
+#          Possible values: 7, 5, 3, 9, 10, 11, 12.
+#     dma: The DMA number of the soundblaster.
+#          Possible values: 1, 5, 0, 3, 6, 7.
+#    hdma: The High DMA number of the soundblaster.
+#          Possible values: 1, 5, 0, 3, 6, 7.
+# sbmixer: Allow the soundblaster mixer to modify the DOSBox mixer.
+# oplmode: Type of OPL emulation. On 'auto' the mode is determined by sblaster type. All OPL modes are Adlib-compatible, except for 'cms'.
+#          Possible values: auto, cms, opl2, dualopl2, opl3, none.
+#  oplemu: Provider for the OPL emulation. compat might provide better quality (see oplrate as well).
+#          Possible values: default, compat, fast.
+# oplrate: Sample rate of OPL music emulation. Use 49716 for highest quality (set the mixer rate accordingly).
+#          Possible values: 44100, 49716, 48000, 32000, 22050, 16000, 11025, 8000.
+
+sbtype=sb16
+sbbase=220
+irq=7
+dma=1
+hdma=5
+sbmixer=true
+oplmode=auto
+oplemu=default
+oplrate=44100
+
+[gus]
+#      gus: Enable the Gravis Ultrasound emulation.
+#  gusrate: Sample rate of Ultrasound emulation.
+#           Possible values: 44100, 48000, 32000, 22050, 16000, 11025, 8000, 49716.
+#  gusbase: The IO base address of the Gravis Ultrasound.
+#           Possible values: 240, 220, 260, 280, 2a0, 2c0, 2e0, 300.
+#   gusirq: The IRQ number of the Gravis Ultrasound.
+#           Possible values: 5, 3, 7, 9, 10, 11, 12.
+#   gusdma: The DMA channel of the Gravis Ultrasound.
+#           Possible values: 3, 0, 1, 5, 6, 7.
+# ultradir: Path to Ultrasound directory. In this directory
+#           there should be a MIDI directory that contains
+#           the patch files for GUS playback. Patch sets used
+#           with Timidity should work fine.
+
+gus=false
+gusrate=44100
+gusbase=240
+gusirq=5
+gusdma=3
+ultradir=C:\\ULTRASND
+
+[speaker]
+# pcspeaker: Enable PC-Speaker emulation.
+#    pcrate: Sample rate of the PC-Speaker sound generation.
+#            Possible values: 44100, 48000, 32000, 22050, 16000, 11025, 8000, 49716.
+#     tandy: Enable Tandy Sound System emulation. For 'auto', emulation is present only if machine is set to 'tandy'.
+#            Possible values: auto, on, off.
+# tandyrate: Sample rate of the Tandy 3-Voice generation.
+#            Possible values: 44100, 48000, 32000, 22050, 16000, 11025, 8000, 49716.
+#    disney: Enable Disney Sound Source emulation. (Covox Voice Master and Speech Thing compatible).
+
+pcspeaker=true
+pcrate=44100
+tandy=auto
+tandyrate=44100
+disney=true
+
+[joystick]
+# joysticktype: Type of joystick to emulate: auto (default), none,
+#               2axis (supports two joysticks),
+#               4axis (supports one joystick, first joystick used),
+#               4axis_2 (supports one joystick, second joystick used),
+#               fcs (Thrustmaster), ch (CH Flightstick).
+#               none disables joystick emulation.
+#               auto chooses emulation depending on real joystick(s).
+#               (Remember to reset dosbox's mapperfile if you saved it earlier)
+#               Possible values: auto, 2axis, 4axis, 4axis_2, fcs, ch, none.
+#        timed: enable timed intervals for axis. Experiment with this option, if your joystick drifts (away).
+#     autofire: continuously fires as long as you keep the button pressed.
+#       swap34: swap the 3rd and the 4th axis. can be useful for certain joysticks.
+#   buttonwrap: enable button wrapping at the number of emulated buttons.
+
+joysticktype=auto
+timed=true
+autofire=false
+swap34=false
+buttonwrap=false
+
+[serial]
+# serial1: set type of device connected to com port.
+#          Can be disabled, dummy, modem, nullmodem, directserial.
+#          Additional parameters must be in the same line in the form of
+#          parameter:value. Parameter for all types is irq (optional).
+#          for directserial: realport (required), rxdelay (optional).
+#                           (realport:COM1 realport:ttyS0).
+#          for modem: listenport (optional).
+#          for nullmodem: server, rxdelay, txdelay, telnet, usedtr,
+#                         transparent, port, inhsocket (all optional).
+#          Example: serial1=modem listenport:5000
+#          Possible values: dummy, disabled, modem, nullmodem, directserial.
+# serial2: see serial1
+#          Possible values: dummy, disabled, modem, nullmodem, directserial.
+# serial3: see serial1
+#          Possible values: dummy, disabled, modem, nullmodem, directserial.
+# serial4: see serial1
+#          Possible values: dummy, disabled, modem, nullmodem, directserial.
+
+serial1=dummy
+serial2=dummy
+serial3=disabled
+serial4=disabled
+
+[dos]
+#            xms: Enable XMS support.
+#            ems: Enable EMS support.
+#            umb: Enable UMB support.
+# keyboardlayout: Language code of the keyboard layout (or none).
+
+xms=true
+ems=true
+umb=true
+keyboardlayout=auto
+
+[ipx]
+# ipx: Enable ipx over UDP/IP emulation.
+
+ipx=true
+[autoexec]
+echo off
+mount c .
+c:
+
+type jsdos~1/readme.txt
+echo on
+
+# Generated using https://js-dos.com
+# █▀▀▀▀▀█ █  ▄▄▄▀▀█ █▀▀▀▀▀█
+# █ ███ █ ██▄ █ ▀ ▄ █ ███ █
+# █ ▀▀▀ █ ▄██ ▀ ▀▀█ █ ▀▀▀ █
+# ▀▀▀▀▀▀▀ ▀ █▄▀▄▀ █ ▀▀▀▀▀▀▀
+# █▀▄▄█▀▀▄▄ ▀ ▀█▄▄▄▄ ▀▄█▀█▀
+# █▀ ▀ ▀▀▄ █▀ ▄ ▄▀▀▀▄ █▀█▄
+# ▄ ▄▄ █▀▀▄ ▄▀▄▀▀█  ▀▀▄▀▀█▀
+#   ▄▀▀█▀▀ █▀█▀█▀▀▄ ▀██▀█▄
+# ▀▀▀ ▀ ▀ █▄█ ▀█▄▄█▀▀▀█▀▀
+# █▀▀▀▀▀█ ▄▄▄ ▄ ▄ █ ▀ █▄▄▄▄
+# █ ███ █ ▀█▀▀▄▀▀▄████▀▀█▄█
+# █ ▀▀▀ █ ▄▀▀█▀█▀▄ ▀▀▄▄█▄█
+# ▀▀▀▀▀▀▀ ▀   ▀▀ ▀  ▀   ▀▀▀
+`.replace(/\n/g, "\r\n"),
+}, {
+    name: "DOS 7.1",
+    backend: "dosboxX",
+    contents: `
+[sdl]
+autolock=false
+
+[dosbox]
+title=DOS 7.1
+memsize=64
+
+[dos]
+ver=7.1
+hard drive data rate limit=0
+floppy drive data rate limit=0
+
+[cpu]
+cputype=pentium_mmx
+core=auto
+
+[sblaster]
+sbtype=sb16vibra
+
+[render]
+scaler=none
+
+[autoexec]
+echo off
+imgmount 2 sockdrive {wss-makevm} dos.zone dos7.1
+echo Please visit our website:
+echo 
+echo         _                __
+echo        (_)____      ____/ /___  _____ _________  ____ ___
+echo       / / ___/_____/ __  / __ \\/ ___// ___/ __ \\/ __ \`__ \\
+echo      / (__  )_____/ /_/ / /_/ (__  )/ /__/ /_/ / / / / / /
+echo   __/ /____/      \\__,_/\\____/____(_)___/\\____/_/ /_/ /_/
+echo  /___/
+echo
+echo type 'boot c:' to load DOS 7.1
+echo on
+# 
+# █▀▀▀▀▀█ █  ▄▄▄▀▀█ █▀▀▀▀▀█
+# █ ███ █ ██▄ █ ▀ ▄ █ ███ █
+# █ ▀▀▀ █ ▄██ ▀ ▀▀█ █ ▀▀▀ █
+# ▀▀▀▀▀▀▀ ▀ █▄▀▄▀ █ ▀▀▀▀▀▀▀
+# █▀▄▄█▀▀▄▄ ▀ ▀█▄▄▄▄ ▀▄█▀█▀
+# █▀ ▀ ▀▀▄ █▀ ▄ ▄▀▀▀▄ █▀█▄
+# ▄ ▄▄ █▀▀▄ ▄▀▄▀▀█  ▀▀▄▀▀█▀
+#   ▄▀▀█▀▀ █▀█▀█▀▀▄ ▀██▀█▄
+# ▀▀▀ ▀ ▀ █▄█ ▀█▄▄█▀▀▀█▀▀
+# █▀▀▀▀▀█ ▄▄▄ ▄ ▄ █ ▀ █▄▄▄▄
+# █ ███ █ ▀█▀▀▄▀▀▄████▀▀█▄█
+# █ ▀▀▀ █ ▄▀▀█▀█▀▄ ▀▀▄▄█▄█
+# ▀▀▀▀▀▀▀ ▀   ▀▀ ▀  ▀   ▀▀▀
+#
+`.replace(/\n/g, "\r\n"),
+}, {
+    name: "Win 95",
+    backend: "dosboxX",
+    contents: `
+[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-makevm} dos.zone win95
+echo Please visit our website:
+echo 
+echo         _                __
+echo        (_)____      ____/ /___  _____ _________  ____ ___
+echo       / / ___/_____/ __  / __ \\/ ___// ___/ __ \\/ __ \`__ \\
+echo      / (__  )_____/ /_/ / /_/ (__  )/ /__/ /_/ / / / / / /
+echo   __/ /____/      \\__,_/\\____/____(_)___/\\____/_/ /_/ /_/
+echo  /___/
+echo
+echo type 'boot c:' to load windows 95
+echo on
+# 
+# █▀▀▀▀▀█ █  ▄▄▄▀▀█ █▀▀▀▀▀█
+# █ ███ █ ██▄ █ ▀ ▄ █ ███ █
+# █ ▀▀▀ █ ▄██ ▀ ▀▀█ █ ▀▀▀ █
+# ▀▀▀▀▀▀▀ ▀ █▄▀▄▀ █ ▀▀▀▀▀▀▀
+# █▀▄▄█▀▀▄▄ ▀ ▀█▄▄▄▄ ▀▄█▀█▀
+# █▀ ▀ ▀▀▄ █▀ ▄ ▄▀▀▀▄ █▀█▄
+# ▄ ▄▄ █▀▀▄ ▄▀▄▀▀█  ▀▀▄▀▀█▀
+#   ▄▀▀█▀▀ █▀█▀█▀▀▄ ▀██▀█▄
+# ▀▀▀ ▀ ▀ █▄█ ▀█▄▄█▀▀▀█▀▀
+# █▀▀▀▀▀█ ▄▄▄ ▄ ▄ █ ▀ █▄▄▄▄
+# █ ███ █ ▀█▀▀▄▀▀▄████▀▀█▄█
+# █ ▀▀▀ █ ▄▀▀█▀█▀▄ ▀▀▄▄█▄█
+# ▀▀▀▀▀▀▀ ▀   ▀▀ ▀  ▀   ▀▀▀
+#
+`.replace(/\n/g, "\r\n"),
+}, {
+    name: "Win 98",
+    backend: "dosboxX",
+    contents: `
+[sdl]
+autolock=false
+mouse_emulation=integration
+
+[dosbox]
+title=Windows 98
+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-makevm} dos.zone win98
+echo Please visit our website:
+echo 
+echo         _                __
+echo        (_)____      ____/ /___  _____ _________  ____ ___
+echo       / / ___/_____/ __  / __ \\/ ___// ___/ __ \\/ __ \`__ \\
+echo      / (__  )_____/ /_/ / /_/ (__  )/ /__/ /_/ / / / / / /
+echo   __/ /____/      \\__,_/\\____/____(_)___/\\____/_/ /_/ /_/
+echo  /___/
+echo
+echo type 'boot c:' to load windows 98
+echo on
+# 
+# █▀▀▀▀▀█ █  ▄▄▄▀▀█ █▀▀▀▀▀█
+# █ ███ █ ██▄ █ ▀ ▄ █ ███ █
+# █ ▀▀▀ █ ▄██ ▀ ▀▀█ █ ▀▀▀ █
+# ▀▀▀▀▀▀▀ ▀ █▄▀▄▀ █ ▀▀▀▀▀▀▀
+# █▀▄▄█▀▀▄▄ ▀ ▀█▄▄▄▄ ▀▄█▀█▀
+# █▀ ▀ ▀▀▄ █▀ ▄ ▄▀▀▀▄ █▀█▄
+# ▄ ▄▄ █▀▀▄ ▄▀▄▀▀█  ▀▀▄▀▀█▀
+#   ▄▀▀█▀▀ █▀█▀█▀▀▄ ▀██▀█▄
+# ▀▀▀ ▀ ▀ █▄█ ▀█▄▄█▀▀▀█▀▀
+# █▀▀▀▀▀█ ▄▄▄ ▄ ▄ █ ▀ █▄▄▄▄
+# █ ███ █ ▀█▀▀▄▀▀▄████▀▀█▄█
+# █ ▀▀▀ █ ▄▀▀█▀█▀▄ ▀▀▄▄█▄█
+# ▀▀▀▀▀▀▀ ▀   ▀▀ ▀  ▀   ▀▀▀
+#
+`.replace(/\n/g, "\r\n"),
+},
+];

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

@@ -0,0 +1,226 @@
+import { useDispatch, useSelector } from "react-redux";
+import { useT } from "../../i18n";
+import { State } from "../../store";
+import { editorSlice } from "../../store/editor";
+import { dosboxconf } from "./defaults";
+import { dosSlice } from "../../store/dos";
+import { useEffect, useState } from "preact/hooks";
+import { sockdriveBackend } from "../../store/init";
+import { uiSlice } from "../../store/ui";
+
+const imgmount = "imgmount\\s+(\\d+)\\s+sockdrive\\s+([^\\s]+)\\s+([^\\s]+)\\s+([^\\s]+)\\s*$";
+const cleanup = "imgmount\\s+(\\d+)\\s+sockdrive\\s+.*$";
+
+interface Sockdrive {
+    num: string,
+    backend: string,
+    owner: string,
+    drive: string,
+}
+
+export function EditorConf() {
+    const t = useT();
+    const bundleConfig = useSelector((state: State) => state.editor.bundleConfig);
+    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]);
+    const dispatch = useDispatch();
+    const [myDrives, setMyDrives] = useState<{ name: string, owner: string }[]>([]);
+
+    useEffect(() => {
+        if (!account || !account.token) {
+            setMyDrives([]);
+        } else {
+            fetch(sockdriveEndpoint + "/list/drives/" + account.token.access_token)
+                .then((r) => r.json())
+                .then(setMyDrives)
+                .catch(console.error);
+        }
+    }, [account?.token, sockdriveEndpoint]);
+
+    function parseSockDrives(conf: string) {
+        const drives: { [num: string]: Sockdrive } = {};
+        const re = new RegExp(imgmount, "gm");
+        let m: RegExpExecArray | null;
+        while (m = re.exec(conf)) {
+            /* eslint-disable-next-line no-unused-vars */
+            const [_, num, backend, owner, drive] = m;
+            drives[num] = {
+                num,
+                backend,
+                owner,
+                drive,
+            };
+        }
+        return drives;
+    }
+
+    const [sockdrives, setSockdrives] = useState<{ [num: string]: Sockdrive }>(
+        parseSockDrives(bundleConfig?.dosboxConf ?? ""));
+
+    function setSockdrivesAndUpdateConf(sockdrives: { [num: string]: Sockdrive }) {
+        setSockdrives(sockdrives);
+        if (bundleConfig) {
+            const parts: string[] = [];
+            for (const next of Object.values(sockdrives)) {
+                if (next.owner.length > 0 && next.drive.length > 0) {
+                    parts.push(`imgmount ${next.num} sockdrive ${next.backend} ${next.owner} ${next.drive}`);
+                }
+            }
+
+            let contents = bundleConfig.dosboxConf;
+            contents = contents.replaceAll(new RegExp(cleanup, "gm"), "");
+            if (parts.length > 0) {
+                let start = contents.indexOf("[autoexec]");
+                if (start === -1) {
+                    start = contents.length;
+                } else {
+                    start += 10;
+                }
+                const footer = contents.substring(start);
+                contents = contents.substring(0, start);
+                contents += "\n" + parts.join("\n") + "\n" + footer.trim();
+            }
+            updateDosboxConf(contents);
+        }
+    }
+
+    function changeConfig(contents: string) {
+        setSockdrives(parseSockDrives(contents));
+        updateDosboxConf(contents);
+    }
+
+    function updateDosboxConf(newConf: string) {
+        dispatch(dosSlice.actions.mouseCapture(newConf.indexOf("autolock=true") > 0));
+        dispatch(editorSlice.actions.dosboxConf(newConf));
+        dispatch(dosSlice.actions.dosBackendLocked(newConf.indexOf("sockdrive") >= 0));
+    }
+
+    if (bundleConfig === null) {
+        return null;
+    }
+
+    return <div class="editor-conf-frame flex flex-col flex-grow w-full gap-2">
+        <div class="">{t("dosboxconf_template")}</div>
+        <div class="flex flex-row flex-wrap items-center gap-2">
+            {dosboxconf
+                .map(({ name, backend, contents }) => {
+                    return <button class="btn btn-sm"
+                        onClick={() => {
+                            dispatch(dosSlice.actions.dosBackend(backend === "dosboxX" ? "dosboxX" : "dosbox"));
+                            changeConfig(contents.replaceAll("{wss-makevm}", sockdriveWssEndpoint));
+                        }}>
+                        {name}
+                    </button>;
+                })}
+        </div>
+        {backend === "dosboxX" && <>
+            <button class="btn btn-ghost btn-xs self-start" target="_blank"
+                onClick={() => dispatch(uiSlice.actions.frameFatDrives())}>
+                {t("net_drives")}:
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                    stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="m12.75 15 3-3m0 0-3-3m3
+                         3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                </svg>
+            </button>
+            {["2", "3"].map((num) => {
+                return <div class="flex flex-row justify-start items-center gap-3 w-full">
+                    <p>{num === "2" ? "C:" : "D:"}</p>
+                    <div class="flex flex-col gap-2">
+                        <div class="flex flex-row gap-1 items-center">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488
+                                    0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963
+                                    0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3
+                                    3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                            </svg>
+                            <input class="input input-xs" type="text" value={sockdrives[num]?.owner ?? ""}
+                                onChange={(e) => {
+                                    const newSockdrives = { ...sockdrives };
+                                    newSockdrives[num] = {
+                                        num,
+                                        backend: sockdrives[num]?.backend ?? sockdriveWssEndpoint,
+                                        owner: e.currentTarget.value,
+                                        drive: sockdrives[num]?.drive ?? "",
+                                    };
+                                    setSockdrivesAndUpdateConf(newSockdrives);
+                                }}></input>
+                        </div>
+                        <div class="flex flex-row gap-1 items-center">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694
+                                    4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75
+                                    4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25
+                                    4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5
+                                    0v3.75C20.25 16.153
+                                    16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25
+                                    4.125s-8.25-1.847-8.25-4.125" />
+                            </svg>
+
+                            <input class="input input-xs" type="text" value={sockdrives[num]?.drive ?? ""}
+                                onChange={(e) => {
+                                    const newSockdrives = { ...sockdrives };
+                                    newSockdrives[num] = {
+                                        num,
+                                        backend: sockdrives[num]?.backend ?? sockdriveWssEndpoint,
+                                        owner: sockdrives[num]?.owner ?? "",
+                                        drive: e.currentTarget.value,
+                                    };
+                                    setSockdrivesAndUpdateConf(newSockdrives);
+                                }}></input>
+                        </div>
+                    </div>
+                    <div class="dropdown dropdown-bottom dropdown-end">
+                        <button tabIndex={0} role="button" class="btn btn-sm">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none"
+                                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                                <path stroke-linecap="round" stroke-linejoin="round"
+                                    d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5
+                                        0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25
+                                        2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25
+                                        0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0
+                                        1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" />
+                            </svg>
+                        </button>
+                        <ul tabIndex={0} class="dropdown-content z-[1] menu p-2 shadow bg-base-100
+                            rounded-box w-52 max-h-80 overflow-auto">
+                            {myDrives.map(({ name, owner }) => {
+                                return <li onClick={(e) => {
+                                    const newSockdrives = { ...sockdrives };
+                                    newSockdrives[num] = {
+                                        num,
+                                        owner,
+                                        backend: sockdriveWssEndpoint,
+                                        drive: name,
+                                    };
+                                    setSockdrivesAndUpdateConf(newSockdrives);
+                                    e.currentTarget.parentElement!.blur();
+                                }}><a>{name}</a></li>;
+                            })}
+                        </ul>
+                    </div>
+                    <button class="btn btn-sm" onClick={() => {
+                        const newSockdrives = { ...sockdrives };
+                        delete newSockdrives[num];
+                        setSockdrivesAndUpdateConf(newSockdrives);
+                    }}>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-4 h-4">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58
+                                4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25
+                                2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
+                            />
+                        </svg>
+                    </button>
+                </div>;
+            })}
+        </>}
+        <textarea class="flex-grow" value={bundleConfig.dosboxConf}
+            onChange={(e) => changeConfig(e.currentTarget?.value ?? "")} />
+    </div>;
+}

package/src/frame/editor/editor-frame.css

@@ -0,0 +1,55 @@
+.jsdos-rso {
+    .editor-conf-frame {
+        @apply w-full overflow-hidden flex-grow flex flex-col items-start justify-center h-full px-4;
+
+        textarea {
+            @apply w-full textarea;
+            resize: none;
+        }
+    }
+
+    .editor-fs-frame {
+        @apply h-full;
+
+        .fs-tree-view {
+            @apply form-control bg-base-100 rounded w-full h-full;
+
+            .fs-tree {
+
+                ol {
+                    @apply ml-2;
+                }
+
+                li {
+                    @apply my-2;
+                }
+
+                button {
+                    border: none;
+                    background: none;
+                    filter: none;
+                    min-height: auto;
+                    height: auto;
+                    @apply m-0 p-0;
+                }
+
+                svg {
+                    @apply text-accent;
+                }
+
+                input {
+                    @apply checkbox checkbox-accent mr-2 w-4 h-4;
+                }
+
+                .rct-text,
+                .rct-bare-label,
+                label {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: start;
+                    align-items: center;
+                }
+            }
+        }
+    }
+}