procon_bypass_man-web 0.1.0

data/src/components/installable_macros.tsx

@@ -0,0 +1,58 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react'
+import React, { useState, useEffect, useContext } from "react";
+import { ButtonsSettingContext, } from "./../contexts/buttons_setting";
+import { Plugin, PluginBody, AvailablePlugins } from "../types/plugin";
+import { installMacroType, uninstallMacroType } from "../reducers/layer_reducer";
+
+const macroClassNamespaces = AvailablePlugins.map((v) => {
+  return Object.entries(v).map((v) => {
+    const name = v[0];
+    const plugin = v[1];
+    return plugin.macros.map((m) => {
+      return m.class_namespace
+    })
+  })
+}).flat().flat();
+
+
+type Props = {
+  classNamespace: string;
+};
+export const InstallableMacro = ({ classNamespace }: Props) => {
+  const { layers, layersDispatch } = useContext(ButtonsSettingContext);
+  const isChecked = (name: string) => {
+    return layers.installed_macros[name] || false;
+  }
+  const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if(isChecked(classNamespace)) {
+      layersDispatch({ type: uninstallMacroType, payload: { installed_macro: classNamespace }});
+    } else {
+      layersDispatch({ type: installMacroType, payload: { installed_macro: classNamespace }});
+    }
+  }
+  return(
+    <>
+      <input type="checkbox" onChange={handleClick} checked={isChecked(classNamespace)} /> {classNamespace}
+    </>
+  )
+}
+
+export const InstallableMacros = () => {
+  return(
+    <>
+      {
+        macroClassNamespaces.map((classNamespace, i) => {
+          return(
+            <div key={i}>
+              <label>
+                <InstallableMacro classNamespace={classNamespace} />
+              </label>
+            </div>
+          );
+        })
+      }
+    </>
+  )
+}

data/src/components/installable_modes.tsx

@@ -0,0 +1,57 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react'
+import React, { useState, useEffect, useContext } from "react";
+import { ButtonsSettingContext, } from "./../contexts/buttons_setting";
+import { Plugin, PluginBody, AvailablePlugins } from "../types/plugin";
+import { installModeType, uninstallModeType } from "../reducers/layer_reducer";
+
+const modeClassNamespaces = AvailablePlugins.map((v) => {
+  return Object.entries(v).map((v) => {
+    const name = v[0];
+    const plugin = v[1];
+    return plugin.modes.map((m) => {
+      return m.class_namespace
+    })
+  })
+}).flat().flat();
+
+type Props = {
+  classNamespace: string;
+};
+export const InstallableMode = ({ classNamespace }: Props) => {
+  const { layers, layersDispatch } = useContext(ButtonsSettingContext);
+  const isChecked = (name: string) => {
+    return layers.installed_modes[name] || false;
+  }
+  const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if(isChecked(classNamespace)) {
+      layersDispatch({ type: uninstallModeType, payload: { installed_mode: classNamespace }});
+    } else {
+      layersDispatch({ type: installModeType, payload: { installed_mode: classNamespace }});
+    }
+  }
+  return(
+    <div>
+      <input type="checkbox" onChange={handleClick} checked={isChecked(classNamespace)} />{classNamespace}
+    </div>
+  )
+}
+
+export const InstallableModes = () => {
+  return(
+    <>
+      {
+        modeClassNamespaces.map((classNamespace, i) => {
+          return(
+            <div key={i}>
+              <label>
+                <InstallableMode classNamespace={classNamespace} />
+              </label>
+            </div>
+          );
+        })
+      }
+    </>
+  )
+}

data/src/components/macro_settings.tsx

@@ -0,0 +1,85 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react'
+import React, { useState, useContext } from "react";
+import { ButtonsSettingContext } from "./../contexts/buttons_setting";
+import { LayerKey } from "../types/layer_key";
+import { Button } from "../types/button";
+import { Macro, StructMacro } from "../types/buttons_setting_type";
+import { Plugin, PluginBody, AvailablePlugins, MacroNameMap } from "../types/plugin";
+import { ButtonsModal } from "./buttons_modal";
+import { applyMacroType } from "../reducers/layer_reducer";
+
+type MacroSettingProps = {
+  layerKey: LayerKey;
+  macro: StructMacro;
+};
+const MacroSetting = ({ macro, layerKey }: MacroSettingProps) => {
+  const { layersDispatch } = useContext(ButtonsSettingContext);
+  // for modal
+  const [openModal, setOpenModal] = useState(false)
+  const [modalCallbackOnSubmit, setModalCallbackOnSubmit] = useState(undefined as any)
+  const [modalCloseCallback, setModalCloseCallback] = useState(undefined as any)
+  const [modalTitle, setModalTitle] = useState("")
+  const [modalPrefillButtons, setModalPrefillButtons] = useState<Array<Button>>([])
+
+  const setButtonsForModal = (bs: Array<Button>) => {
+    macro.if_pressed = bs;
+    layersDispatch({ type: applyMacroType, payload: { layerKey: layerKey, macro: macro }});
+  }
+  const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setOpenModal(true)
+    setModalTitle("発動キーの設定")
+    setModalPrefillButtons(macro.if_pressed);
+    setModalCallbackOnSubmit(() => setButtonsForModal);
+    setModalCloseCallback(() => setOpenModal);
+  }
+  const isEnable = macro.if_pressed.length > 0;
+
+  return(
+    <>
+      <li key={macro.name}>
+        <label>
+          <input type="checkbox" onChange={handleClick} checked={isEnable} />
+          {MacroNameMap[macro.name]}
+        </label>
+        <br />
+        {isEnable && `${macro.if_pressed.join(", ")}で発動`}
+      </li>
+      <div css={css`position: relative;`}>
+        {openModal && <ButtonsModal callbackOnSubmit={modalCallbackOnSubmit} callbackOnClose={modalCloseCallback} title={modalTitle} prefill={macro.if_pressed} positionOnShown={"relative"} />}
+      </div>
+    </>
+  )
+}
+
+type MacroSettingsProps = {
+  layerKey: LayerKey;
+};
+export const MacroSettings = ({ layerKey }:MacroSettingsProps) => {
+  const { layers } = useContext(ButtonsSettingContext);
+  const macroTable = layers[layerKey].macro as any || {} as any;
+  const macros = Object.keys(MacroNameMap).reduce((acc, macroName: string) => {
+    const ifp = macroTable[macroName as string] as Array<Button> || [] as Array<Button>;
+    if(layers.installed_macros[macroName]) {
+      acc.push({ name: macroName, if_pressed: ifp } as StructMacro);
+    }
+    return acc;
+  }, [] as Array<any>)
+  const hasSomeMacros = macros.length > 0;
+
+  return(
+    <>
+      {
+        hasSomeMacros &&
+        <ul>
+          {macros.map((m) => {
+             return <MacroSetting key={m.name} macro={m} layerKey={layerKey} />
+            }
+          )}
+        </ul>
+      }
+      {!hasSomeMacros && `選択可能なマクロがありません`}
+    </>
+  )
+}

data/src/components/mode_settings.tsx

@@ -0,0 +1,62 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react'
+import React, { useState, useContext } from "react";
+import { ButtonsSettingContext } from "./../contexts/buttons_setting";
+import { Plugin, PluginBody, AvailablePlugins, ModeNameMap } from "../types/plugin";
+import { LayerKey } from "../types/layer_key";
+import { Button } from "../types/button";
+import { StructMode, ModeTable } from "../types/buttons_setting_type";
+import { applyModeType } from "../reducers/layer_reducer";
+
+type DetailProps = {
+  layerKey: LayerKey;
+  mode: StructMode;
+};
+export const ModeSetting = ({ layerKey, mode }: DetailProps) => {
+  const { layersDispatch, layers } = useContext(ButtonsSettingContext);
+  const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {
+    layersDispatch({ type: applyModeType, payload: { layerKey: layerKey, mode: mode }});
+  }
+  const isChecked = (mode: StructMode) => {
+    return ((layers[layerKey].mode || false) && !!layers[layerKey].mode[mode.name]);
+  }
+  return(
+    <li>
+      <label><input type="radio" onChange={handleClick} checked={isChecked(mode)} />{mode.name}</label>
+    </li>
+  )
+}
+
+type ListProps = {
+  layerKey: LayerKey;
+};
+export const ModeSettings = ({ layerKey }:ListProps) => {
+  const { layers } = useContext(ButtonsSettingContext);
+  const modeTable: ModeTable = layers[layerKey].mode || {};
+  const modes = Object.keys(ModeNameMap).reduce((acc, modeName: string) => {
+    if(layers.installed_modes[modeName]) {
+      acc.push({ name: modeName } as StructMode);
+    }
+    return acc;
+  }, [] as Array<StructMode>);
+  modes.unshift({ name: "disable" } as StructMode);
+
+  // const hasSomeModes = layers.modes.length > 1;
+  const hasSomeModes = modes.length > 1;
+
+  return(
+    <>
+      {
+        hasSomeModes &&
+        <ul>
+          {modes.map((m) => {
+             return <ModeSetting key={m.name} mode={m} layerKey={layerKey} />
+            }
+          )}
+        </ul>
+      }
+      {!hasSomeModes && `選択可能なモードがありません`}
+    </>
+  )
+}

data/src/contexts/buttons_setting.ts

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const ButtonsSettingContext = createContext<any>(null);

data/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <h1>PBM Web</h1>
+    <div id="app"></div>
+  </body>
+</html>

data/src/lib/button_state.test.ts

@@ -0,0 +1,110 @@
+import { ButtonState } from "./button_state";
+
+describe('flip, macro, remapがundefined', () => {
+  it('全部falseを返す', () => {
+    const buttonState = new ButtonState("y");
+
+    expect(buttonState.isDisabledFlip()).toBe(true);
+    expect(buttonState.isAlwaysFlip()).toBe(false);
+    expect(buttonState.isFlipIfPressedSelf()).toBe(false);
+    expect(buttonState.isFlipIfPressedSomeButtons()).toBe(false);
+    expect(buttonState.hasFlipSetting()).toBe(false);
+    expect(buttonState.isRemap()).toBe(false);
+  })
+});
+
+describe('flipに値がある時', () => {
+  describe('enableがtrueの時', () => {
+    describe('if_pressedがundefinedの時', () => {
+      it('isAlwaysFlip()がtrueを返す', () => {
+        const buttonState = new ButtonState("y", { if_pressed: undefined, enable: true });
+        expect(buttonState.isDisabledFlip()).toBe(false);
+        expect(buttonState.isAlwaysFlip()).toBe(true);
+        expect(buttonState.isFlipIfPressedSelf()).toBe(false);
+        expect(buttonState.isFlipIfPressedSomeButtons()).toBe(false);
+        expect(buttonState.hasFlipSetting()).toBe(true);
+        expect(buttonState.isRemap()).toBe(false);
+      })
+    })
+    describe('if_pressedが空配列の時', () => {
+      it('isAlwaysFlip()がtrueを返す', () => {
+        const buttonState = new ButtonState("y", { if_pressed: [], enable: true });
+        expect(buttonState.isDisabledFlip()).toBe(false);
+        expect(buttonState.isAlwaysFlip()).toBe(true);
+        expect(buttonState.isFlipIfPressedSelf()).toBe(false);
+        expect(buttonState.isFlipIfPressedSomeButtons()).toBe(false);
+        expect(buttonState.hasFlipSetting()).toBe(true);
+        expect(buttonState.isRemap()).toBe(false);
+      })
+    })
+    describe('if_pressedに2つの値が入っている時', () => {
+      it('isFlipIfPressedSomeButtons()がtrueを返す', () => {
+        const buttonState = new ButtonState("y", { if_pressed: ["l", "zr"], enable: true });
+        expect(buttonState.isDisabledFlip()).toBe(false);
+        expect(buttonState.isAlwaysFlip()).toBe(false);
+        expect(buttonState.isFlipIfPressedSelf()).toBe(false);
+        expect(buttonState.isFlipIfPressedSomeButtons()).toBe(true);
+        expect(buttonState.hasFlipSetting()).toBe(true);
+        expect(buttonState.isRemap()).toBe(false);
+      })
+    })
+    describe('if_pressedに1つの値が入っている時', () => {
+      it('isFlipIfPressedSomeButtons()がtrueを返す', () => {
+        const buttonState = new ButtonState("y", { if_pressed: ["l"], enable: true });
+        expect(buttonState.isDisabledFlip()).toBe(false);
+        expect(buttonState.isAlwaysFlip()).toBe(false);
+        expect(buttonState.isFlipIfPressedSelf()).toBe(false);
+        expect(buttonState.isFlipIfPressedSomeButtons()).toBe(true);
+        expect(buttonState.hasFlipSetting()).toBe(true);
+        expect(buttonState.isRemap()).toBe(false);
+      })
+    })
+    describe('if_pressedにbuttonと同じ1つの値が入っている時', () => {
+      it('isFlipIfPressedSelf()がtrueを返す', () => {
+        const buttonState = new ButtonState("y", { if_pressed: ["y"], enable: true });
+        expect(buttonState.isDisabledFlip()).toBe(false);
+        expect(buttonState.isAlwaysFlip()).toBe(false);
+        expect(buttonState.isFlipIfPressedSelf()).toBe(true);
+        expect(buttonState.isFlipIfPressedSomeButtons()).toBe(false);
+        expect(buttonState.hasFlipSetting()).toBe(true);
+        expect(buttonState.isRemap()).toBe(false);
+      })
+    })
+  })
+
+  describe('enableがfalseの時', () => {
+    it('isDisabledFlip()がfalseを返す', () => {
+      const buttonState = new ButtonState("y", { if_pressed: [], enable: false });
+      expect(buttonState.isDisabledFlip()).toBe(true);
+      expect(buttonState.isAlwaysFlip()).toBe(false);
+      expect(buttonState.isFlipIfPressedSelf()).toBe(false);
+      expect(buttonState.isFlipIfPressedSomeButtons()).toBe(false);
+      expect(buttonState.hasFlipSetting()).toBe(false);
+      expect(buttonState.isRemap()).toBe(false);
+    })
+  })
+});
+
+describe('remapに値がある時', () => {
+  describe("flipに無効な値がある", () => {
+    it('isRemap()がtrueを返す', () => {
+      const buttonState = new ButtonState("y", { if_pressed: [], enable: false }, { to: ["y"] });
+      expect(buttonState.isDisabledFlip()).toBe(true);
+      expect(buttonState.isAlwaysFlip()).toBe(false);
+      expect(buttonState.isFlipIfPressedSelf()).toBe(false);
+      expect(buttonState.isFlipIfPressedSomeButtons()).toBe(false);
+      expect(buttonState.hasFlipSetting()).toBe(false);
+      expect(buttonState.isRemap()).toBe(true);
+    })
+  })
+  describe("flipがundefined", () => {
+    it('isRemap()がtrueを返す', () => {
+      const buttonState = new ButtonState("y", undefined, { to: ["y"] });
+      expect(buttonState.isDisabledFlip()).toBe(true);
+      expect(buttonState.isAlwaysFlip()).toBe(false);
+      expect(buttonState.isFlipIfPressedSelf()).toBe(false);
+      expect(buttonState.isFlipIfPressedSomeButtons()).toBe(false);
+      expect(buttonState.hasFlipSetting()).toBe(false);
+    })
+  })
+})

data/src/lib/button_state.ts

@@ -0,0 +1,52 @@
+import { Button } from "../types/button";
+import { Flip, Macro, Remap } from "../types/buttons_setting_type";
+
+export const flip_types = ["disable", "always", "ifPress"] as const;
+export type FlipType = typeof flip_types[number];
+
+export class ButtonState {
+  button: Button;
+  flip?: Flip;
+  remap?: Remap;
+
+  constructor(button: Button, flip?: Flip, remap?: Remap) {
+    this.button = button;
+    this.flip = flip;
+    this.remap = remap;
+  };
+
+  isDisabledFlip(): boolean {
+    if(!this.flip && !this.remap) { return true }
+    if(this.remap) { return true }
+    if(!this.flip) { return false }
+    return this.flip && !this.flip?.enable;
+  }
+
+  isAlwaysFlip(): boolean {
+    if(!this.flip && !this.remap) { return false }
+    if(this.isDisabledFlip()) { return false };
+    return !!this.flip && !!this.flip.enable && (this.flip?.if_pressed || []) ?.length === 0;
+  }
+
+  isFlipIfPressedSelf(): boolean {
+    if(!this.flip && !this.remap) { return false }
+    if(this.isDisabledFlip() || this.isAlwaysFlip() || !this.flip || !this.flip.if_pressed) { return false }
+    return this.flip.if_pressed.length === 1 && this.flip.if_pressed[0] === this.button;
+  }
+
+  isFlipIfPressedSomeButtons(): boolean {
+    if(!this.flip) { return false }
+    if(this.isDisabledFlip() || this.isAlwaysFlip() || this.isFlipIfPressedSelf()) { return false }
+    return true;
+  }
+
+  hasFlipSetting(): boolean {
+    return !this.isDisabledFlip();
+  }
+
+  isRemap(): boolean {
+    if(this.hasFlipSetting()) { return false }
+    if(this.remap && this.remap.to?.length > 0) { return true }
+    return false;
+  }
+}