procon_bypass_man-web 0.1.0

data/src/pages/global_setting_page.tsx

@@ -0,0 +1,83 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react'
+import React, { useState, useEffect } from "react";
+import axios from 'axios';
+
+import { HttpClient } from "../lib/http_client";
+
+type Prop = {
+};
+const httpClient = new HttpClient();
+
+export const GlobalSetting = ({}:Prop) => {
+  const [dirPath, setDirPath] = useState("");
+  const [settingPath, setSettingPath] = useState("");
+  const [serverResponseMessage, setServerResponseMessage] = useState("");
+
+  const inputStyle = css`
+    width: 400px;
+  `
+
+  useEffect(() => {
+    httpClient.getDirPath()
+      .then(function (response) {
+        setDirPath(response.data.root_path);
+      })
+      .catch(function (error) {
+        setServerResponseMessage("サーバとの通信に失敗しました");
+        console.log(error);
+      })
+    httpClient.getSettingPath()
+      .then(function (response) {
+        setSettingPath(response.data.setting_path);
+      })
+      .catch(function (error) {
+        console.log(error);
+      })
+  }, [])
+
+  const handleDirChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setDirPath(e.target.value);
+  };
+
+  const handleDirSubmit = (e: React.MouseEvent<HTMLElement, MouseEvent>)  => {
+    if (!(e.target instanceof HTMLInputElement)) {
+      return;
+    }
+    httpClient.postDirPath(dirPath);
+    setServerResponseMessage("PBMのディレクトリパスの更新に成功しました");
+  };
+
+  const handleSettingChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSettingPath(e.target.value);
+  };
+
+  const handleSettingSubmit = (e: React.MouseEvent<HTMLElement, MouseEvent>)  => {
+    if (!(e.target instanceof HTMLInputElement)) {
+      return;
+    }
+    httpClient.postSettingPath(settingPath);
+    setServerResponseMessage("PBMの設定ファイルパスの更新に成功しました");
+  };
+
+  return (
+    <>
+      <h2>設定</h2>
+      <div>
+        {serverResponseMessage}
+      </div>
+      <label>PBMのディレクトリパス:
+        <input type="text" css={inputStyle} value={dirPath} onChange={handleDirChange} />
+      </label>
+      <input type="submit" value="更新する" onClick={handleDirSubmit} />
+      <hr />
+
+      <label>PBMの設定ファイルパス:
+        <input type="text" css={inputStyle} value={settingPath || "未設定"} onChange={handleSettingChange} />
+      </label>
+      <input type="submit" value="更新する" onClick={handleSettingSubmit} />
+      <hr />
+    </>
+  )
+}

data/src/pages/home.tsx

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react'
+import React, { useState, useEffect } from "react";
+
+export const Home = () => {
+  return (
+    <>
+      <div css={css`margin-top: 30px`}>
+        ソースコード: <a href="https://github.com/splaplapla/procon_bypass_man-web">
+          https://github.com/splaplapla/procon_bypass_man-web
+        </a>
+      </div>
+    </>
+  )
+}
+

data/src/pages/recoding_mode_page.tsx

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react'
+import React, { useState, useEffect } from "react";
+import { HttpClient } from "../lib/http_client";
+
+const httpClient = new HttpClient();
+
+export const RecodingModePage = () => {
+  return (
+    <>
+      <div></div>
+    </>
+  )
+}

data/src/pages/top.tsx

@@ -0,0 +1,107 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react'
+import React, { useState, useReducer } from "react";
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
+import { GlobalSetting } from "./global_setting_page";
+import { BpmPage } from "./bpm_page";
+import { Home } from "./home";
+import { ButtonsSettingPage } from "./buttons_setting_page";
+import { RecodingModePage } from "./recoding_mode_page";
+import { ButtonsSettingContext } from "./../contexts/buttons_setting";
+import { ButtonsInLayer, Layers, ButtonsSettingType } from "../types/buttons_setting_type";
+import { buttons, Button } from "../types/button";
+import { LayerReducer } from "../reducers/layer_reducer";
+
+const ButtonsSettingProfile: React.FC = ({children}) => {
+  const initLayers: Layers = {
+    up: buttons.reduce((a, i) => { a[i] = { open: false }; return a }, {} as ButtonsInLayer),
+    right: buttons.reduce((a, i) => { a[i] = { open: false }; return a }, {} as ButtonsInLayer),
+    down: buttons.reduce((a, i) => { a[i] = { open: false }; return a }, {} as ButtonsInLayer),
+    left: buttons.reduce((a, i) => { a[i] = { open: false }; return a }, {} as ButtonsInLayer),
+    installed_macros: {},
+    installed_modes: {},
+  }
+  const [prefixKeys, setPrefixKeys] = useState([]);
+  const [loaded, setLoaded] = useState(false);
+  const [layers, layersDispatch] = useReducer(LayerReducer, initLayers as Layers);
+  const value = {
+    loaded,
+    setLoaded,
+    layers,
+    prefixKeys,
+    setPrefixKeys,
+    layersDispatch,
+  }
+  return (
+    <ButtonsSettingContext.Provider value={value}>
+      {children}
+    </ButtonsSettingContext.Provider>
+  )
+}
+
+export const Top: React.FC = () => {
+  const menuStyle = css`
+    ul {
+      list-style: none;
+      display:flex;
+      margin: 0;
+      padding: 0;
+      li {
+        padding-right: 3px;
+        display: block;
+        a {
+          text-decoration: none;
+          display:block;
+          padding:10px;
+          background-color: #333;
+          color: white;
+        }
+      }
+    }
+  `;
+
+  return (
+    <>
+      <Router>
+        <div>
+          <nav css={menuStyle}>
+            <ul>
+              <li>
+                <Link to="/">home</Link>
+              </li>
+              <li>
+                <Link to="/setting">設定</Link>
+              </li>
+              <li>
+                <Link to="/buttons_setting">ボタン設定</Link>
+              </li>
+            </ul>
+          </nav>
+          <Switch>
+            <Route exact path="/" >
+              <Home />
+            </Route>
+            <Route path="/setting">
+              <GlobalSetting />
+            </Route>
+            <Route path="/pbm">
+              <BpmPage />
+            </Route>
+            <Route path="/buttons_setting">
+              <ButtonsSettingProfile><ButtonsSettingPage /></ButtonsSettingProfile>
+            </Route>
+            <Route path="/recoding_mode">
+              <RecodingModePage />
+            </Route>
+          </Switch>
+        </div>
+      </Router>
+    </>
+  );
+};

data/src/reducers/layer_reducer.ts

@@ -0,0 +1,120 @@
+import { buttons, Button } from "../types/button";
+import { LayerKey } from "../types/layer_key";
+import { Layers, Flip, Remap, Macro, StructMacro, ModeTable, StructMode } from "../types/buttons_setting_type";
+
+export const disableFlipType = Symbol('disableFlip');
+export const alwaysFlipType = Symbol('alwaysFlip');
+export const flipIfPressedSelfType = Symbol('flipIfPressedSelf');
+export const flipIfPressedSomeButtonsType = Symbol('flipIfPressedSomeButtons');
+export const ignoreButtonsInFlipingType = Symbol('ignoreButtonsInFliping');
+export const remapType = Symbol('remap');
+export const openMenuType = Symbol('openMenu');
+export const closeMenuType = Symbol('closeMenu');
+export const applyMacroType = Symbol('applyMacro');
+export const installMacroType = Symbol('installedMacro');
+export const uninstallMacroType = Symbol('uninstalledMacro');
+export const installModeType = Symbol('uninstalledMacro');
+export const uninstallModeType = Symbol('a')
+export const applyModeType = Symbol('b')
+
+
+type ACTION_TYPE =
+    | { type: typeof disableFlipType, payload: { layerKey: LayerKey, button: Button } }
+    | { type: typeof alwaysFlipType, payload: { layerKey: LayerKey, button: Button } }
+    | { type: typeof flipIfPressedSelfType, payload: { layerKey: LayerKey, button: Button } }
+    | { type: typeof flipIfPressedSomeButtonsType, payload: { layerKey: LayerKey, button: Button, targetButtons: Array<Button> } }
+    | { type: typeof ignoreButtonsInFlipingType, payload: { layerKey: LayerKey, button: Button, targetButtons: Array<Button> } }
+    | { type: typeof remapType, payload: { layerKey: LayerKey, button: Button, targetButtons: Array<Button> } }
+    | { type: typeof openMenuType, payload: { layerKey: LayerKey, button: Button } }
+    | { type: typeof closeMenuType, payload: { layerKey: LayerKey, button: Button } }
+    | { type: typeof applyMacroType, payload: { layerKey: LayerKey, button: (Button | undefined), macro: StructMacro } }
+    | { type: typeof installMacroType, payload: { layerKey: (LayerKey | undefined), button: (Button | undefined), installed_macro: string } }
+    | { type: typeof uninstallMacroType, payload: { layerKey: (LayerKey | undefined), button: (Button | undefined), installed_macro: string } }
+    | { type: typeof installModeType, payload: { layerKey: (LayerKey | undefined), button: (Button | undefined), installed_mode: string } }
+    | { type: typeof uninstallModeType, payload: { layerKey: (LayerKey | undefined), button: (Button | undefined), installed_mode: string } }
+    | { type: typeof applyModeType, payload: { layerKey: LayerKey, button: (Button | undefined), mode: StructMode } }
+
+export const LayerReducer = (layers: Layers, action: ACTION_TYPE) => {
+  const layerKey = action.payload.layerKey as LayerKey;
+  const button = action.payload.button as Button;
+
+  const flip = layerKey && button && layers[layerKey][button]?.flip || {} as Flip
+  const remap = layerKey && button && layers[layerKey][button]?.remap || {} as Remap
+
+  switch (action.type) {
+    case disableFlipType:
+      flip.enable = false;
+      layers[layerKey][button] = { flip: flip, open: true }
+      return { ...layers };
+    case alwaysFlipType:
+      flip.if_pressed = [];
+      flip.enable = true;
+      layers[layerKey][button] = { flip: flip, open: true }
+      return { ...layers };
+    case flipIfPressedSelfType:
+      flip.if_pressed = [button];
+      flip.enable = true;
+      layers[layerKey][button] = { flip: flip, open: true }
+      return { ...layers };
+    case flipIfPressedSomeButtonsType:
+      flip.if_pressed = action.payload.targetButtons;
+      flip.enable = true;
+      layers[layerKey][button] = { flip: flip, open: true }
+      return { ...layers };
+    case ignoreButtonsInFlipingType:
+      flip.force_neutral = action.payload.targetButtons;
+      layers[layerKey][button] = { flip: flip, open: true }
+      return { ...layers };
+    case remapType:
+      flip.enable = false;
+      remap.to = action.payload.targetButtons;
+      layers[layerKey][button] = { flip: flip, remap: remap, open: true }
+      return { ...layers };
+    case openMenuType:
+      flip.enable = false;
+      layers[layerKey][button] = { flip: flip, open: true };
+      return { ...layers };
+    case closeMenuType:
+      flip.enable = false;
+      layers[layerKey][button] = { flip: flip, open: false }
+      return { ...layers };
+    case applyMacroType:
+      const structMacro = action.payload.macro
+      if(!structMacro) { return { ...layers } };
+      const macroTable = layers[layerKey].macro as Macro || {} as Macro
+      macroTable[structMacro.name] = structMacro.if_pressed.sort()
+      layers[layerKey].macro = macroTable
+      return { ...layers };
+    case installMacroType:
+      const installedMacro = action.payload.installed_macro
+      const h = { ...layers }
+      h.installed_macros ||= {}
+      h.installed_macros[installedMacro] = true
+      return h;
+    case uninstallMacroType:
+      const unregisterInstalledMacro = action.payload.installed_macro
+      const hh = { ...layers }
+      hh.installed_macros ||= {}
+      hh.installed_macros[unregisterInstalledMacro] = false
+      return hh;
+    case installModeType:
+      const installedMode = action.payload.installed_mode
+      const l = { ...layers }
+      l.installed_modes ||= {}
+      l.installed_modes[installedMode] = true
+      return l;
+    case uninstallModeType:
+      const uninstallMode = action.payload.installed_mode
+      const uml = { ...layers }
+      uml.installed_modes ||= {}
+      uml.installed_modes[uninstallMode] = false
+      return uml;
+    case applyModeType:
+      const applyMode = action.payload.mode;
+      layers[layerKey].mode = { [applyMode.name]: true};
+      return { ...layers };
+    default:
+      console.log("一致しないaction typeです")
+      return { ...layers };
+  }
+};

data/src/types/button.ts

@@ -0,0 +1,2 @@
+export const buttons = ["a", "b", "x", "y", "up", "right", "down", "left", "r", "l", "zr",  "zl"] as const;
+export type Button = typeof buttons[number];

data/src/types/buttons_setting_type.ts

@@ -0,0 +1,63 @@
+import { Button } from "./button";
+import { LayerKey } from "./layer_key";
+
+export type Flip = {
+  if_pressed?: Array<Button>,
+  enable: Boolean,
+  force_neutral?: Array<Button>,
+}
+
+export type StructMacro = {
+  name: string,
+  if_pressed: Array<Button>,
+}
+
+export type StructMode = {
+  name: string,
+}
+
+export type Macro = {
+  [key in string]: Array<Button>;
+}
+
+export type ModeTable = {
+  [key in string]: boolean;
+}
+
+export type Remap = {
+  to: Array<Button>,
+}
+
+export type ButtonInLayer = {
+  flip?: Flip,
+  macro?: Macro, // deprecated
+  remap?: Remap,
+  open: boolean,
+}
+
+type _ButtonsInLayer = {
+  [key in Button] : ButtonInLayer;
+}
+
+export type ButtonsInLayer = _ButtonsInLayer & {
+  macro?: Macro; // TODO macroTableという名前にしたい
+  mode?: ModeTable;
+};
+
+export type InstalledPlugin = {
+  [key in string]: boolean;
+}
+
+export type Layers = {
+  up: ButtonsInLayer,
+  right: ButtonsInLayer,
+  down: ButtonsInLayer,
+  left: ButtonsInLayer,
+  installed_macros?: InstalledPlugin,
+  installed_modes?: InstalledPlugin,
+}
+
+export type ButtonsSettingType = {
+  prefix_keys_for_changing_layer: Array<Button>;
+  layers: Layers;
+}

data/src/types/layer_key.ts

@@ -0,0 +1,2 @@
+export const layerKeys = ["up", "right", "down", "left"] as const;
+export type LayerKey = typeof layerKeys[number];

data/src/types/pbm_stats.ts

@@ -0,0 +1 @@
+export type PbmStats = "stopped" | "running" | "unknown" | "waiting" | "error";

data/src/types/plugin.ts

@@ -0,0 +1,43 @@
+export type PluginBody = {
+  display_name: string;
+  class_namespace: string;
+}
+
+export type Plugin = {
+  [key in string] : {
+    modes: Array<PluginBody>;
+    macros: Array<PluginBody>;
+  }
+}
+
+// plugins.
+export const AvailablePlugins = [
+  {
+    splatoon2: {
+      modes: [
+        { display_name: "splatoon2.guruguru", class_namespace: "ProconBypassMan::Splatoon2::Mode::Guruguru" },
+      ],
+      macros: [
+        { display_name: "splatoon2.fast_return", class_namespace: "ProconBypassMan::Splatoon2::Macro::FastReturn" },
+      ],
+    }
+  } as Plugin,
+]
+
+export const MacroNameMap = AvailablePlugins.reduce((hash, item: Plugin) => {
+  for (var [name, plugin] of Object.entries(item)) {
+    plugin.macros.forEach((macro: PluginBody) => {
+      hash[macro.class_namespace] = macro.display_name
+    })
+  };
+  return hash;
+}, {} as any)
+
+export const ModeNameMap = AvailablePlugins.reduce((hash, item: Plugin) => {
+  for (var [name, plugin] of Object.entries(item)) {
+    plugin.modes.forEach((mode: PluginBody) => {
+      hash[mode.class_namespace] = mode.display_name
+    })
+  };
+  return hash;
+}, {} as any)