procon_bypass_man-web 0.1.0 → 0.1.1

data/lib/procon_bypass_man/web/version.rb

@@ -2,6 +2,6 @@
 
 module ProconBypassMan
   module Web
-    VERSION = "0.1.0"
+    VERSION = "0.1.1"
   end
 end

data/src/components/button_setting.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 
 import { jsx, css } from '@emotion/react'
-import React, { useState, useContext } from "react";
+import React, { useState, useReducer, useContext } from "react";
 import { Button } from "../types/button";
 import { ButtonState } from "./../lib/button_state";
 import { ButtonsModal } from "./buttons_modal";
@@ -18,11 +18,11 @@ type ButtonMenuProp = {
 };
 
 const ButtonMenu = ({ name, layerKey, buttonValue, layersDispatch }: ButtonMenuProp) => {
-  const flipRadioName = `${layerKey}_button_menu_${name}`;
   const buttonState = new ButtonState(name, buttonValue.flip, buttonValue.remap);
 
   // for modal
-  const [openModal, setOpenModal] = useState(false)
+  const [isOpenModal, toggleModal] = useReducer((m) => { return !m; }, false);
+
   const [modalCallbackOnSubmit, setModalCallbackOnSubmit] = useState(undefined as any)
   const [modalCloseCallback, setModalCloseCallback] = useState(undefined as any)
   const [modalTitle, setModalTitle] = useState("")
@@ -49,11 +49,11 @@ const ButtonMenu = ({ name, layerKey, buttonValue, layersDispatch }: ButtonMenuP
     layersDispatch({ type: flipIfPressedSomeButtonsType, payload: { layerKey: layerKey, button: name, targetButtons: bs }});
   }
   const openIfPressedSomeButtonsModal = (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement>) => {
-    setOpenModal(true)
+    toggleModal();
     setModalTitle("特定のキーを押したときだけ")
     setModalPrefillButtons(flipIfPressedSomeButtons);
     setModalCallbackOnSubmit(() => setFlipIfPressedSomeButtonsWithPersistence);
-    setModalCloseCallback(() => setOpenModal);
+    setModalCloseCallback(() => toggleModal);
   }
 
   // 無視
@@ -62,11 +62,11 @@ const ButtonMenu = ({ name, layerKey, buttonValue, layersDispatch }: ButtonMenuP
     layersDispatch({ type: ignoreButtonsInFlipingType, payload: { layerKey: layerKey, button: name, targetButtons: bs }});
   }
   const handleIgnoreButton = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setOpenModal(true)
+    toggleModal();
     setModalTitle("連打中は特定のボタンの入力を無視する")
     setModalPrefillButtons(buttonValue.flip?.force_neutral || [] as Array<Button>);
     setModalCallbackOnSubmit(() => setIgnoreButtonsOnFlipingWithPersistence);
-    setModalCloseCallback(() => setOpenModal);
+    setModalCloseCallback(() => toggleModal);
   };
 
   // リマップ
@@ -74,11 +74,11 @@ const ButtonMenu = ({ name, layerKey, buttonValue, layersDispatch }: ButtonMenuP
     layersDispatch({ type: remapType, payload: { layerKey: layerKey, button: name, targetButtons: bs }});
   }
   const handleRemapButton = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setOpenModal(true)
+    toggleModal();
     setModalTitle("リマップ")
     setModalPrefillButtons(buttonValue.remap?.to || []);
     setModalCallbackOnSubmit(() => setRemapButtonsWithPersistence);
-    setModalCloseCallback(() => setOpenModal);
+    setModalCloseCallback(() => toggleModal);
   };
 
   return(
@@ -91,13 +91,13 @@ const ButtonMenu = ({ name, layerKey, buttonValue, layersDispatch }: ButtonMenuP
           <input type="radio" onChange={openIfPressedSomeButtonsModal} onClick={openIfPressedSomeButtonsModal} checked={buttonState.isFlipIfPressedSomeButtons()}/>
           特定のキーを押したときだけ連打する{flipIfPressedSomeButtons.length > 0 && `(${flipIfPressedSomeButtons.join(", ")})`}
         </label>
-      </fieldset>
 
-      <fieldset><legend><strong>連打オプション</strong></legend>
-        <label>
-          <input type="checkbox" onChange={handleIgnoreButton} checked={forceNeutralButtons.length > 0} disabled={buttonState.isDisabledFlip()} />
-          連打中は特定のボタンの入力を無視する{forceNeutralButtons.length > 0 && `(${forceNeutralButtons.join(", ")})`}
-        </label>
+        <fieldset><legend><strong>連打オプション</strong></legend>
+          <label>
+            <input type="checkbox" onChange={handleIgnoreButton} checked={forceNeutralButtons.length > 0} disabled={buttonState.isDisabledFlip()} />
+            連打中は特定のボタンの入力を無視する{forceNeutralButtons.length > 0 && `(${forceNeutralButtons.join(", ")})`}
+          </label>
+        </fieldset>
       </fieldset>
 
       <fieldset><legend><strong>リマップ設定</strong></legend>
@@ -107,7 +107,7 @@ const ButtonMenu = ({ name, layerKey, buttonValue, layersDispatch }: ButtonMenuP
         </label>
       </fieldset>
       <div css={css`position: relative;`}>
-        {openModal && <ButtonsModal callbackOnSubmit={modalCallbackOnSubmit} callbackOnClose={modalCloseCallback} title={modalTitle} prefill={modalPrefillButtons} positionOnShown={"relative"} />}
+        {isOpenModal && <ButtonsModal callbackOnSubmit={modalCallbackOnSubmit} callbackOnClose={modalCloseCallback} title={modalTitle} prefill={modalPrefillButtons} positionOnShown={"relative"} />}
       </div>
     </>
   )
@@ -119,24 +119,24 @@ type Prop = {
 };
 
 export const ButtonSetting: React.FC<Prop> = ({ name, layerKey }) => {
-  const settingContext = useContext(ButtonsSettingContext);
+  const { layersDispatch, layers } = useContext(ButtonsSettingContext);
   const handleToggle = () => {
     if(isOpenMenu()) { // 閉じる
-      settingContext.layersDispatch({ type: closeMenuType, payload: { layerKey: layerKey, button: name }});
+      layersDispatch({ type: closeMenuType, payload: { layerKey: layerKey, button: name }});
     } else { // 開く
-      settingContext.layersDispatch({ type: openMenuType, payload: { layerKey: layerKey, button: name }});
+      layersDispatch({ type: openMenuType, payload: { layerKey: layerKey, button: name }});
     }
   }
 
   const isOpenMenu = () => {
-    return settingContext.layers[layerKey][name].open;
+    return layers[layerKey][name].open;
   }
-  const buttonValue = settingContext.layers[layerKey][name] || {} as ButtonInLayer;
+  const buttonValue = layers[layerKey][name] || {} as ButtonInLayer;
 
   return (
     <>
       <label><input type="checkbox" checked={isOpenMenu()} onChange={handleToggle}/>{name}</label>
-      {isOpenMenu() && <ButtonMenu name={name} layerKey={layerKey} buttonValue={buttonValue} layersDispatch={settingContext.layersDispatch} />}
+      {isOpenMenu() && <ButtonMenu name={name} layerKey={layerKey} buttonValue={buttonValue} layersDispatch={layersDispatch} />}
     </>
   );
 };

data/src/components/installable_macros.tsx

@@ -3,7 +3,7 @@
 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 { Plugin, PluginBody, AvailablePlugins, MacroNameMap } from "../types/plugin";
 import { installMacroType, uninstallMacroType } from "../reducers/layer_reducer";
 
 const macroClassNamespaces = AvailablePlugins.map((v) => {
@@ -34,7 +34,7 @@ export const InstallableMacro = ({ classNamespace }: Props) => {
   }
   return(
     <>
-      <input type="checkbox" onChange={handleClick} checked={isChecked(classNamespace)} /> {classNamespace}
+      <input type="checkbox" onChange={handleClick} checked={isChecked(classNamespace)} /> {MacroNameMap[classNamespace]}
     </>
   )
 }

data/src/components/installable_modes.tsx

@@ -3,7 +3,7 @@
 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 { Plugin, PluginBody, AvailablePlugins, ModeNameMap } from "../types/plugin";
 import { installModeType, uninstallModeType } from "../reducers/layer_reducer";
 
 const modeClassNamespaces = AvailablePlugins.map((v) => {
@@ -17,27 +17,29 @@ const modeClassNamespaces = AvailablePlugins.map((v) => {
 }).flat().flat();
 
 type Props = {
-  classNamespace: string;
+  modeKey: string;
 };
-export const InstallableMode = ({ classNamespace }: Props) => {
+export const InstallableMode = ({ modeKey }: Props) => {
+  const modeName = ModeNameMap[modeKey];
   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 }});
+    if(isChecked(modeKey)) {
+      layersDispatch({ type: uninstallModeType, payload: { installed_mode: modeKey }});
     } else {
-      layersDispatch({ type: installModeType, payload: { installed_mode: classNamespace }});
+      layersDispatch({ type: installModeType, payload: { installed_mode: modeKey }});
     }
   }
   return(
     <div>
-      <input type="checkbox" onChange={handleClick} checked={isChecked(classNamespace)} />{classNamespace}
+      <input type="checkbox" onChange={handleClick} checked={isChecked(modeKey)} />{modeName}
     </div>
   )
 }
 
+console.log("modeClassNamespaces: ", modeClassNamespaces)
 export const InstallableModes = () => {
   return(
     <>
@@ -46,7 +48,7 @@ export const InstallableModes = () => {
           return(
             <div key={i}>
               <label>
-                <InstallableMode classNamespace={classNamespace} />
+                <InstallableMode modeKey={classNamespace} />
               </label>
             </div>
           );

data/src/components/macro_settings.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 
 import { jsx, css } from '@emotion/react'
-import React, { useState, useContext } from "react";
+import React, { useState, useReducer, useContext } from "react";
 import { ButtonsSettingContext } from "./../contexts/buttons_setting";
 import { LayerKey } from "../types/layer_key";
 import { Button } from "../types/button";
@@ -17,7 +17,7 @@ type MacroSettingProps = {
 const MacroSetting = ({ macro, layerKey }: MacroSettingProps) => {
   const { layersDispatch } = useContext(ButtonsSettingContext);
   // for modal
-  const [openModal, setOpenModal] = useState(false)
+  const [isOpenModal, toggleModal] = useReducer((m) => { return !m; }, false);
   const [modalCallbackOnSubmit, setModalCallbackOnSubmit] = useState(undefined as any)
   const [modalCloseCallback, setModalCloseCallback] = useState(undefined as any)
   const [modalTitle, setModalTitle] = useState("")
@@ -28,11 +28,11 @@ const MacroSetting = ({ macro, layerKey }: MacroSettingProps) => {
     layersDispatch({ type: applyMacroType, payload: { layerKey: layerKey, macro: macro }});
   }
   const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setOpenModal(true)
+    toggleModal();
     setModalTitle("発動キーの設定")
     setModalPrefillButtons(macro.if_pressed);
     setModalCallbackOnSubmit(() => setButtonsForModal);
-    setModalCloseCallback(() => setOpenModal);
+    setModalCloseCallback(() => toggleModal);
   }
   const isEnable = macro.if_pressed.length > 0;
 
@@ -47,7 +47,7 @@ const MacroSetting = ({ macro, layerKey }: MacroSettingProps) => {
         {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"} />}
+        {isOpenModal && <ButtonsModal callbackOnSubmit={modalCallbackOnSubmit} callbackOnClose={modalCloseCallback} title={modalTitle} prefill={macro.if_pressed} positionOnShown={"relative"} />}
       </div>
     </>
   )

data/src/components/mode_settings.tsx

@@ -42,7 +42,6 @@ export const ModeSettings = ({ layerKey }:ListProps) => {
   }, [] as Array<StructMode>);
   modes.unshift({ name: "disable" } as StructMode);
 
-  // const hasSomeModes = layers.modes.length > 1;
   const hasSomeModes = modes.length > 1;
 
   return(

data/src/lib/error_boundary.tsx

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react'
+import React, { Component, ErrorInfo, ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+// https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/error_boundaries/
+class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false
+  };
+
+  public static getDerivedStateFromError(_: Error): State {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("Uncaught error:", error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return <h1>Sorry..there was an error</h1>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

data/src/pages/buttons_setting_page.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 
 import { jsx, css } from '@emotion/react'
-import React, { useState, useEffect, useContext, useRef } from "react";
+import React, { useState, useEffect, useReducer, useContext, useRef } from "react";
 import { ButtonsSetting } from "../components/buttons_setting";
 import { Button, buttons } from "../types/button";
 import { LayerKey, layerKeys } from "../types/layer_key";
@@ -25,7 +25,8 @@ interface LayerRef {
 };
 
 export const ButtonsSettingPage = () => {
-  const { loaded, setLoaded, layers, layersDispatch, prefixKeys, setPrefixKeys } = useContext(ButtonsSettingContext);
+  const [loaded, DidLoad] = useReducer(() => { return true; }, false);
+  const { layers, layersDispatch, prefixKeys, setPrefixKeys } = useContext(ButtonsSettingContext);
   const [selectedLayer, setSelectedLayer] = useState<LayerKey>("up");
   const layerRefs = layerKeys.map((l) => ({} as LayerRef));
   const [initializedSetting, setInitializedSetting] = useState({} as ButtonsSettingType)
@@ -117,7 +118,7 @@ export const ButtonsSettingPage = () => {
           })
         }
 
-        setPrefixKeys(response.data.setting.prefix_keys_for_changing_layer);
+        setPrefixKeys(response.data.setting.prefix_keys_for_changing_layer.sort());
         const layers = layerKeys.reduce((a, key) => {
           a[key] = response.data.setting_group_by_button.layers[key];
           return a;
@@ -173,7 +174,7 @@ export const ButtonsSettingPage = () => {
           });
         });
 
-        setLoaded(true);
+        DidLoad();
       }).catch(function (error) {
         if (error.response.status === 404) {
           setInfoMessage("設定ファイルのパスが未設定です")
@@ -181,7 +182,6 @@ export const ButtonsSettingPage = () => {
           console.log("想定外のエラーです");
         }
       })
-
   }, [loaded]);
 
   const layersTabStyle = () => {
@@ -219,20 +219,22 @@ export const ButtonsSettingPage = () => {
     };
   }
   const handlePrefixKeysField = () => {
-    setOpenModal(true)
+    toggleModal();
     setModalTitle("キープレフィックスの変更")
     setModalPrefillButtons(prefixKeys);
     setModalCallbackOnSubmit(() => setPrefixKeys);
-    setModalCloseCallback(() => setOpenModal);
+    setModalCloseCallback(() => toggleModal);
   }
 
   // for modal
-  const [openModal, setOpenModal] = useState(false)
+  const [isOpenModal, toggleModal] = useReducer(((m) => { return !m; }), 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>>([])
 
+  if(!loaded) { return null; };
+
   return(
     <>
       <div css={css`display: table`}>
@@ -243,15 +245,18 @@ export const ButtonsSettingPage = () => {
           </div>
 
           <h3>インストール可能なマクロ</h3>
-          {loaded && <InstallableMacros />}
+          {<InstallableMacros />}
 
           <h3>インストール可能なモード</h3>
-          {loaded && <InstallableModes />}
+          {<InstallableModes />}
+
+          <h3>インストール可能なマクロ</h3>
+          {loaded && <InstallableMacros />}
 
           <h3>設定中のプレフィックスキー</h3>
           <div css={css`position: relative; margin-bottom: 20px;`}>
             <input type="text" value={prefixKeys.join(", ")} readOnly={true} onClick={handlePrefixKeysField} />
-            {openModal && <ButtonsModal callbackOnSubmit={modalCallbackOnSubmit} callbackOnClose={modalCloseCallback} title={modalTitle} prefill={modalPrefillButtons} positionOnShown={"stay"} />}
+            {isOpenModal && <ButtonsModal callbackOnSubmit={modalCallbackOnSubmit} callbackOnClose={modalCloseCallback} title={modalTitle} prefill={modalPrefillButtons} positionOnShown={"stay"} />}
           </div>
         </div>
         <div css={css`display: table-cell`}>
@@ -260,7 +265,7 @@ export const ButtonsSettingPage = () => {
             <a href="#" onClick={applySetting}>変更した設定でsetting.ymlへ上書きする</a>
             <div>{infoMessage}</div>
             <ul>
-              {loaded && changes().map((c, i) => <li key={i}>{c}</li>)}
+              {changes().map((c, i) => <li key={i}>{c}</li>)}
             </ul>
           </div>
         </div>
@@ -274,8 +279,7 @@ export const ButtonsSettingPage = () => {
         ))}
       </ul>
 
-      {loaded && layerKeys.map((l, index) => (<ButtonsSetting key={index} layerKey={l} layerRef={layerRefs[index]} />))}
-      {!loaded && "loading..."}
+      {layerKeys.map((l, index) => (<ButtonsSetting key={index} layerKey={l} layerRef={layerRefs[index]} />))}
     </>
   )
 }

data/src/pages/top.tsx

@@ -17,8 +17,9 @@ 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";
+import ErrorBoundary from "../lib/error_boundary";
 
-const ButtonsSettingProfile: React.FC = ({children}) => {
+const ButtonsSettingProvider: 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),
@@ -28,11 +29,8 @@ const ButtonsSettingProfile: React.FC = ({children}) => {
     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,
@@ -83,18 +81,27 @@ export const Top: React.FC = () => {
               </li>
             </ul>
           </nav>
+
           <Switch>
             <Route exact path="/" >
               <Home />
             </Route>
             <Route path="/setting">
-              <GlobalSetting />
+              <ErrorBoundary>
+                <GlobalSetting />
+              </ErrorBoundary>
             </Route>
             <Route path="/pbm">
-              <BpmPage />
+              <ErrorBoundary>
+                <BpmPage />
+              </ErrorBoundary>
             </Route>
             <Route path="/buttons_setting">
-              <ButtonsSettingProfile><ButtonsSettingPage /></ButtonsSettingProfile>
+              <ErrorBoundary>
+                <ButtonsSettingProvider>
+                  <ButtonsSettingPage />
+                </ButtonsSettingProvider>
+              </ErrorBoundary>
             </Route>
             <Route path="/recoding_mode">
               <RecodingModePage />

data/src/types/plugin.ts

@@ -19,6 +19,9 @@ export const AvailablePlugins = [
       ],
       macros: [
         { display_name: "splatoon2.fast_return", class_namespace: "ProconBypassMan::Splatoon2::Macro::FastReturn" },
+        { display_name: "splatoon2.jump_right", class_namespace: "ProconBypassMan::Splatoon2::Macro::JumpToRightKey" },
+        { display_name: "splatoon2.jump_up", class_namespace: "ProconBypassMan::Splatoon2::Macro::JumpToUpKey" },
+        { display_name: "splatoon2.jump_left", class_namespace: "ProconBypassMan::Splatoon2::Macro::JumpToLeftKey" },
       ],
     }
   } as Plugin,