#304: Added all virtual buttons, need add keyboard support

caiiiycuk · Jul 4, 2024 · 218b330 · 218b330
1 parent 3429dd4
commit 218b330
Show file tree

Hide file tree

Showing 35 changed files with 241 additions and 1,431 deletions.
diff --git a/index.html b/index.html
@@ -28,7 +28,7 @@
           // 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/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",

diff --git a/package.json b/package.json
@@ -25,12 +25,16 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.7",
+    "element-resize-detector": "^1.2.4",
+    "nipplejs": "^0.10.2",
     "preact": "^10.19.3",
     "react-checkbox-tree": "^1.8.0",
-    "react-redux": "^8.1.3"
+    "react-redux": "^8.1.3",
+    "simple-keyboard": "^3.4.126"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.8.1",
+    "@types/element-resize-detector": "^1.1.6",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
     "autoprefixer": "^10.4.17",

diff --git a/src/app.css b/src/app.css
@@ -14,7 +14,7 @@
 }
 
 .jsdos-rso {
-  * {
+  canvas, .slider {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;

diff --git a/src/components/dos-option-checkbox.tsx b/src/components/dos-option-checkbox.tsx
@@ -29,6 +29,30 @@ export function MouseCapture() {
     />;
 }
 
+export function MobileControls() {
+    const t = useT();
+    const dispatch = useDispatch();
+    const lock = useSelector((state: State) => state.dos.mobileControls);
+    return <Checkbox
+        class="mt-4"
+        label={t("mobile_controls")}
+        checked={lock}
+        onChange={(l) => dispatch(dosSlice.actions.mobileControls(l))}
+    />;
+}
+
+export function MirroredControls() {
+    const t = useT();
+    const dispatch = useDispatch();
+    const lock = useSelector((state: State) => state.dos.mirroredControls);
+    return <Checkbox
+        class="mt-4"
+        label={t("mirrored_controls")}
+        checked={lock}
+        onChange={(l) => dispatch(dosSlice.actions.mirroredControls(l))}
+    />;
+}
+
 export function PauseCheckbox() {
     const t = useT();
     const dispatch = useDispatch();

diff --git a/src/components/dos-option-slider.tsx b/src/components/dos-option-slider.tsx
@@ -12,13 +12,28 @@ export function MouseSensitiviySlider(props: {
     const dispatch = useDispatch();
 
     return <Slider
-        class={"mt-4 " + props.class}
+        class={props.class}
         label={t("mouse_sensitivity")}
         value={sensitivity}
         onChange={(value) => dispatch(dosSlice.actions.mouseSensitivity(value)) }
     />;
 }
 
+export function ScaleControlsSlider(props: {
+    class?: string,
+}) {
+    const t = useT();
+    const sensitivity = useSelector((state: State) => state.dos.scaleControls);
+    const dispatch = useDispatch();
+
+    return <Slider
+        class={props.class}
+        label={t("scale_controls")}
+        value={sensitivity}
+        onChange={(value) => dispatch(dosSlice.actions.scaleControls(value)) }
+    />;
+}
+
 export function VolumeSlider(props: {
     class?: string,
 }) {

diff --git a/src/frame/settings-frame.tsx b/src/frame/settings-frame.tsx
@@ -1,11 +1,15 @@
-import { Editor, MouseCapture, PauseCheckbox } from "../components/dos-option-checkbox";
+import { Editor, MirroredControls, MobileControls,
+    MouseCapture, PauseCheckbox } from "../components/dos-option-checkbox";
 import { ThemeSelect } from "../components/dos-option-select";
-import { MouseSensitiviySlider, VolumeSlider } from "../components/dos-option-slider";
+import { MouseSensitiviySlider, ScaleControlsSlider, VolumeSlider } from "../components/dos-option-slider";
 
 export function SettingsFrame(props: {}) {
     return <div class="settings-frame frame-root items-start pl-4">
         <PauseCheckbox />
         <MouseCapture />
+        <MobileControls />
+        <MirroredControls />
+        <ScaleControlsSlider class="mt-4" />
         <MouseSensitiviySlider />
         <VolumeSlider />
         <Editor />

diff --git a/src/i18n.ts b/src/i18n.ts
@@ -4,6 +4,9 @@ import { State } from "./store";
 
 const translations: {[lang: string]: {[key: string]: string} } = {
     ru: {
+        mobile_controls: "Моибльное управление",
+        mirrored_controls: "Отразить управление",
+        scale_controls: "Масштаб управления",
         enter_name_of_drive: "Введите название диска",
         ws_outdated: "Необходимо обновить DOS Браузер",
         update: "Обновить",
@@ -78,6 +81,9 @@ const translations: {[lang: string]: {[key: string]: string} } = {
         fat_write: "FAT запись",
     },
     en: {
+        mobile_controls: "Mobile controls",
+        mirrored_controls: "Mirror controls",
+        scale_controls: "Scale controls",
         enter_name_of_drive: "Enter name of drive",
         ws_outdated: "Must update DOS Browser App",
         update: "Update",

diff --git a/src/index.css b/src/index.css
@@ -4,4 +4,5 @@
 @import "./sidebar/sidebar.css";
 @import "./login/login.css";
 @import "./window/window.css";
-@import "./frame/frame.css";
+@import "./frame/frame.css";
+@import "./layers/layers.css";
diff --git a/src/layers/build.ts b/src/layers/build.ts
diff --git a/src/layers/controls/layers-control.ts b/src/layers/controls/layers-control.ts
@@ -8,20 +8,18 @@ import {
 } from "./layers-config";
 import { Cell, getGrid, GridConfiguration } from "./grid";
 import { createButton } from "./button";
-import { DosInstance } from "../js-dos";
 import { keyboard } from "./keyboard";
 import { mouse } from "./mouse/mouse-common";
 import { options } from "./options";
 import { pointer } from "../dom/pointer";
-
-// eslint-disable-next-line
-const nipplejs = require("nipplejs");
+import { LayersInstance } from "../instance";
+import nipplejs from "nipplejs";
 
 export function initLayersControl(
     layers: Layers,
     layersConfig: LayersConfig,
     ci: CommandInterface,
-    dosInstance: DosInstance,
+    dosInstance: LayersInstance,
     mirrored: boolean,
     scale: number,
     layerName?: string): () => void {
@@ -80,7 +78,7 @@ type ControlFactory = (control: any,
     ci: CommandInterface,
     gridConfig: GridConfiguration,
     sensors: ControlSensors,
-    dosInstance: DosInstance) => () => void;
+    dosInstance: LayersInstance) => () => void;
 
 const factoryMapping: { [type: string]: ControlFactory } = {
     Key: createKeyControl,
@@ -98,7 +96,7 @@ const factoryMapping: { [type: string]: ControlFactory } = {
 function initLayerConfig(layerConfig: LayerConfig,
                          layers: Layers,
                          ci: CommandInterface,
-                         dosInstance: DosInstance,
+                         dosInstance: LayersInstance,
                          mirrored: boolean,
                          scale: number): () => void {
     const unbindKeyboard = keyboard(layers, ci);
@@ -221,7 +219,7 @@ function createKeyControl(keyControl: LayerKeyControl,
                           ci: CommandInterface,
                           gridConfig: GridConfiguration,
                           sensors: ControlSensors,
-                          dosInstance: DosInstance) {
+                          dosInstance: LayersInstance) {
     const { cells, columnWidth } = gridConfig;
     const { row, column } = keyControl;
     const { centerX, centerY } = cells[row][column];
@@ -263,7 +261,7 @@ function createOptionsControl(optionControl: LayerControl,
                               ci: CommandInterface,
                               gridConfig: GridConfiguration,
                               sensors: ControlSensors,
-                              dosInstance: DosInstance) {
+                              dosInstance: LayersInstance) {
     if (layers.options.optionControls?.length === 0) {
         return () => {/**/};
     }
@@ -293,7 +291,7 @@ function createKeyboardControl(keyboardControl: LayerControl,
                                ci: CommandInterface,
                                gridConfig: GridConfiguration,
                                sensors: ControlSensors,
-                               dosInstance: DosInstance) {
+                               dosInstance: LayersInstance) {
     const { cells, columnWidth } = gridConfig;
     const { row, column } = keyboardControl;
     const { centerX, centerY } = cells[row][column];
@@ -327,13 +325,13 @@ function createSwitchControl(switchControl: LayerSwitchControl,
                              ci: CommandInterface,
                              gridConfig: GridConfiguration,
                              sensors: ControlSensors,
-                             dosInstance: DosInstance) {
+                             dosInstance: LayersInstance) {
     const { cells, columnWidth } = gridConfig;
     const { row, column } = switchControl;
     const { centerX, centerY } = cells[row][column];
 
     const button = createButton(switchControl.symbol, {
-        onUp: () => dosInstance.setLayersConfig(dosInstance.getLayersConfig(), switchControl.layerName),
+        onUp: () => dosInstance.setActiveConfig(dosInstance.getActiveConfig(), switchControl.layerName),
     }, columnWidth);
 
     button.style.position = "absolute";
@@ -351,7 +349,7 @@ function createScreenMoveControl(screenMoveControl: LayerScreenMoveControl,
                                  ci: CommandInterface,
                                  gridConfig: GridConfiguration,
                                  sensors: ControlSensors,
-                                 dosInstance: DosInstance) {
+                                 dosInstance: LayersInstance) {
     const { cells, columnWidth } = gridConfig;
     const { row, column } = screenMoveControl;
     const { centerX, centerY } = cells[row][column];
@@ -408,7 +406,7 @@ function createPointerButtonControl(pointerButtonControl: LayerPointerButtonCont
                                     ci: CommandInterface,
                                     gridConfig: GridConfiguration,
                                     sensors: ControlSensors,
-                                    dosInstance: DosInstance) {
+                                    dosInstance: LayersInstance) {
     const { cells, columnWidth } = gridConfig;
     const { row, column, click } = pointerButtonControl;
     const { centerX, centerY } = cells[row][column];
@@ -454,7 +452,7 @@ function createPointerMoveControl(pointerMoveControl: LayerPointerMoveControl,
                                   ci: CommandInterface,
                                   gridConfig: GridConfiguration,
                                   sensors: ControlSensors,
-                                  dosInstance: DosInstance) {
+                                  dosInstance: LayersInstance) {
     const { cells, columnWidth } = gridConfig;
     const { row, column, x, y } = pointerMoveControl;
     const { centerX, centerY } = cells[row][column];
@@ -492,7 +490,7 @@ function createPointerResetControl(pointerResetControl: LayerPointerResetControl
                                    ci: CommandInterface,
                                    gridConfig: GridConfiguration,
                                    sensors: ControlSensors,
-                                   dosInstance: DosInstance) {
+                                   dosInstance: LayersInstance) {
     const { cells, columnWidth } = gridConfig;
     const { row, column } = pointerResetControl;
     const { centerX, centerY } = cells[row][column];
@@ -527,7 +525,7 @@ function createPointerToggleControl(pointerToggleControl: LayerPointerToggleCont
                                     ci: CommandInterface,
                                     gridConfig: GridConfiguration,
                                     sensors: ControlSensors,
-                                    dosInstance: DosInstance) {
+                                    dosInstance: LayersInstance) {
     const { cells, columnWidth } = gridConfig;
     const { row, column } = pointerToggleControl;
     const { centerX, centerY } = cells[row][column];
@@ -569,7 +567,7 @@ function createNippleActivatorControl(nippleActivatorControl: LayerNippleActivat
                                       ci: CommandInterface,
                                       gridConfig: GridConfiguration,
                                       sensors: ControlSensors,
-                                      dosInstance: DosInstance) {
+                                      dosInstance: LayersInstance) {
     const { cells, columnWidth, rowHeight, width, height } = gridConfig;
     const { row, column } = nippleActivatorControl;
     const { centerX, centerY } = cells[row][column];
@@ -678,7 +676,7 @@ function createNippleActivatorControl(nippleActivatorControl: LayerNippleActivat
 
     function onEnd(e: Event) {
         if (started) {
-            manager.processOnEnd(e);
+            (manager as any).processOnEnd(e);
         }
     }
 

diff --git a/src/layers/controls/legacy-layers-control.ts b/src/layers/controls/legacy-layers-control.ts
@@ -6,10 +6,10 @@ import { mouse } from "./mouse/mouse-common";
 import { nipple } from "./nipple";
 import { options } from "./options";
 import { keyboard } from "./keyboard";
-import { DosInstance } from "../js-dos";
+import { LayersInstance } from "../instance";
 
 export function initLegacyLayersControl(
-    dosInstance: DosInstance,
+    dosInstance: LayersInstance,
     layers: Layers,
     layersConfig: LegacyLayersConfig,
     ci: CommandInterface) {

diff --git a/src/layers/controls/mouse/mouse-nipple.ts b/src/layers/controls/mouse/mouse-nipple.ts
@@ -1,6 +1,4 @@
-// eslint-disable-next-line
-const nipplejs = require("nipplejs");
-
+import nipplejs from "nipplejs";
 import { CommandInterface } from "emulators";
 import { Layers } from "../../dom/layers";
 import { pointer } from "../../dom/pointer";

diff --git a/src/layers/controls/nipple.ts b/src/layers/controls/nipple.ts
@@ -1,5 +1,4 @@
-// eslint-disable-next-line
-const nipplejs = require("nipplejs");
+import nipplejs from "nipplejs";
 
 import { KBD_NONE } from "../dom/keys";
 

diff --git a/src/layers/controls/null-layers-control.ts b/src/layers/controls/null-layers-control.ts