Merge pull request #19 from splaplapla/procon-color

プロコンカラーを設定できるようにする

README.md

@@ -1,28 +1,35 @@
 # procon_bypass_man_setting_editor
-* https://github.com/splaplapla/procon_bypass_man で使う、コントローラーへの設定ファイルGUIエディターです
-* https://splaplapla.github.io/procon_bypass_man_setting_editor/ で公開しています
+
+- https://github.com/splaplapla/procon_bypass_man で使う、コントローラーへの設定ファイル GUI エディターです
+- https://splaplapla.github.io/procon_bypass_man_setting_editor/ で公開しています
 
 # 開発
+
 ## セットアップ
-* $ nodenv install
-* $ yarn
+
+- $ nodenv install
+- $ yarn
 
 ## 開発用サーバの起動
-* $ yarn server
-* Open http://localhost:8080/
+
+- $ yarn dev
+- Open http://localhost:8080/
 
 ## test
-* yarn test
+
+- yarn test
 
 ## リリース手順
-* $ yarn release-build
-* ./dist/index.html を開いて動作確認をする
-* $ yarn deploy
+
+- $ yarn release-build
+- ./dist/index.html を開いて動作確認をする
+- $ yarn deploy
 
 ## TODO
-* pbm-cloudからimportする機能
-  * oauth2で認証する
-  * importして、pbm-cloudに反映したい
-* 他のオプションを列挙する
-  * open_macro
-* 左スティックの感度を設定できるようにする
+
+- pbm-cloud から import する機能
+  - oauth2 で認証する
+  - import して、pbm-cloud に反映したい
+- 他のオプションを列挙する
+  - open_macro
+- 左スティックの感度を設定できるようにする

jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  moduleNameMapper: {
+    "^src/(.*)$": "<rootDir>/src/$1",
+    "^components/(.*)$": "<rootDir>/src/components/$1"
+  }
+}

package.json

@@ -43,7 +43,7 @@
   },
   "scripts": {
     "build": "webpack",
-    "server": "webpack serve",
+    "dev": "webpack serve",
     "deploy": "yarn run release-build && gh-pages -d dist  -u 'github-actions-bot <[email protected]>'",
     "release-build": "NODE_ENV=production webpack",
     "test": "jest",

src/components/editor.tsx

@@ -1,18 +1,17 @@
-/** @jsx jsx */
-
-import { jsx, css } from "@emotion/react";
-import React, { useState } from "react";
+import { css } from "@emotion/react";
+import { RumbleOnLayerChangeForm } from "components/rumble_on_layer_change_form";
+import React from "react";
+import { ButtonsPanel } from "../components/buttons_panel";
 import { InstallableMacros } from "../components/installable_macros";
-import { PrefixKeysForm } from "../components/prefix_keys_form";
-import { RumbleOnLayerChangeForm } from "../components/rumble_on_layer_change_form";
 import { LayersTab } from "../components/layers_tab";
-import { layerKeys } from "../types/layer_key";
-import { ButtonsPanel } from "../components/buttons_panel";
+import { PrefixKeysForm } from "../components/prefix_keys_form";
 import { Preview } from "../components/preview";
+import { layerKeys } from "../types/layer_key";
 
+import { ProconColorForm } from "components/porcon_color_form";
+import Col from "react-bootstrap/Col";
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
-import Col from "react-bootstrap/Col";
 
 export const Editor: React.FC = () => {
   return (
@@ -49,6 +48,7 @@ export const Editor: React.FC = () => {
               <hr />
 
               <RumbleOnLayerChangeForm />
+              <ProconColorForm />
             </div>
 
             <LayersTab>

src/components/porcon_color_form.tsx

@@ -0,0 +1,41 @@
+import React, { useContext } from "react";
+import Form from "react-bootstrap/Form";
+import { SettingContext } from "src/contexts/buttons_setting";
+import { updateProconColor } from "src/reducers/setting_reducer";
+import { ProconColor, colors } from "src/types/procon_color";
+
+export const ProconColorForm: React.FC = () => {
+  const { setting, settingDispatch } = useContext(SettingContext);
+
+  const handleSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (event.target.value === "") {
+      settingDispatch({
+        type: updateProconColor,
+        payload: { proconColor: null },
+      });
+    } else {
+      settingDispatch({
+        type: updateProconColor,
+        payload: { proconColor: event.target.value },
+      });
+    }
+  };
+
+  return (
+    <Form.Group className="mt-4 mb-3">
+      <Form.Label htmlFor="proconColor">プロコンの色を変更する</Form.Label>
+      <Form.Select
+        value={setting.proconColor}
+        onChange={handleSelect}
+        id="proconColor"
+      >
+        <option value={""}>未選択</option>
+        {colors.map((color: ProconColor, index) => (
+          <option key={index} value={color}>
+            {color}
+          </option>
+        ))}
+      </Form.Select>
+    </Form.Group>
+  );
+};

src/components/preview.tsx

@@ -19,13 +19,15 @@ export const Preview: React.FC = () => {
     prefixKeys: setting.prefixKeys,
     installed_macros: setting.installed_macros,
     rumbleOnLayerChange: setting.rumbleOnLayerChange,
+    proconColor: setting.proconColor,
     envelope: true,
   });
   const settingTextForPbmCloud = SettingTextualization({
     layers: layersSetting,
     prefixKeys: setting.prefixKeys,
     installed_macros: setting.installed_macros,
     rumbleOnLayerChange: setting.rumbleOnLayerChange,
+    proconColor: setting.proconColor,
     envelope: false,
   });
 

src/components/rumble_on_layer_change_form.tsx

@@ -1,9 +1,7 @@
-import { jsx, css } from "@emotion/react";
 import React, { useContext } from "react";
-import { Button as BootstrapButton } from "react-bootstrap";
-import { SettingContext } from "./../contexts/buttons_setting";
-import { updateRumbleOnLayerChangeType } from "../reducers/setting_reducer";
 import Form from "react-bootstrap/Form";
+import { updateRumbleOnLayerChangeType } from "../reducers/setting_reducer";
+import { SettingContext } from "./../contexts/buttons_setting";
 
 export const RumbleOnLayerChangeForm: React.FC = () => {
   const { setting, settingDispatch } = useContext(SettingContext);

src/lib/setting_textualization.test.ts

@@ -1,4 +1,4 @@
-import { Button, buttons } from "../types/button";
+import { Button, buttons } from "src/types/button";
 import { SettingTextualization } from "./setting_textualization";
 import _ from "lodash";
 import yaml from "js-yaml";
@@ -430,4 +430,72 @@ layer :left do
 end`;
     expect(actual).toBe(expected);
   });
+
+  describe("proconColor(envelope: false)", () => {
+    it("設定ファイルを出力すること", () => {
+      const layers = makeEmptyData().layers;
+      const actual = SettingTextualization({
+        layers: layers,
+        prefixKeys: null,
+        installed_macros: {},
+        proconColor: "red",
+        envelope: false,
+      });
+
+      const expected = `# metadata-required_pbm_version: 0.3.12
+
+# Switchで認識されるプロコンの色を変更します
+enable(:procon_color, :red)
+
+prefix_keys_for_changing_layer %i()
+
+layer :up do
+end
+
+layer :right do
+end
+
+layer :down do
+end
+
+layer :left do
+end`;
+      expect(actual).toBe(expected);
+    });
+  });
+
+  describe("proconColor(envelope: true)", () => {
+    it("設定ファイルを出力すること", () => {
+      const layers = makeEmptyData().layers;
+      const actual = SettingTextualization({
+        layers: layers as any,
+        prefixKeys: [],
+        installed_macros: {},
+        proconColor: "red",
+        envelope: true,
+      });
+
+      const expected = `version: 1.0
+setting: |-
+  # metadata-required_pbm_version: 0.3.12
+
+  # Switchで認識されるプロコンの色を変更します
+  enable(:procon_color, :red)
+
+  prefix_keys_for_changing_layer %i()
+
+  layer :up do
+  end
+
+  layer :right do
+  end
+
+  layer :down do
+  end
+
+  layer :left do
+  end`;
+      expect(actual).toBe(expected);
+    });
+  });
 });

src/lib/setting_textualization.ts

@@ -1,24 +1,25 @@
 import { compareVersions } from "compare-versions";
 import { Button, buttons } from "../types/button";
-import { LayerKey } from "../types/layer_key";
-import { optionalConfiguration } from "../types/setting";
 import {
   InstalledPlugin,
-  LayersSetting,
   Layer,
+  LayersSetting,
   MacroTable,
+  optionalConfiguration,
 } from "../types/setting";
 
+import { ProconColor } from "src/types/procon_color";
 import {
   AvailablePluginMacrosTable,
   MinimumRequirePbmVersion,
-} from "./../types/plugin";
+} from "src/types/plugin";
 
 type Props = {
   layers: LayersSetting;
   prefixKeys: Array<Button>;
   installed_macros: InstalledPlugin;
-  rumbleOnLayerChange: boolean;
+  rumbleOnLayerChange?: boolean;
+  proconColor: ProconColor;
   envelope: boolean;
 };
 
@@ -27,6 +28,7 @@ export const SettingTextualization = ({
   prefixKeys,
   installed_macros,
   rumbleOnLayerChange,
+  proconColor,
   envelope,
 }: Props) => {
   const pk = prefixKeys || [];
@@ -125,6 +127,12 @@ export const SettingTextualization = ({
       optionalConfiguration["rumbleOnLayerChange"]["requiredPbmVersion"]
     );
   }
+  if (proconColor) {
+    requiredVersions.push(
+      optionalConfiguration["proconColor"]["requiredPbmVersion"]
+    );
+  }
+
   const requiredPbmVersion = requiredVersions
     .sort(compareVersions)
     .reverse()[0];
@@ -138,6 +146,13 @@ export const SettingTextualization = ({
       `${topLevelIndent}# レイヤー変更時にコントローラーを振動させます\n`;
     result = result + `${topLevelIndent}enable(:rumble_on_layer_change)\n\n`;
   }
+  if (proconColor) {
+    result =
+      result +
+      `${topLevelIndent}# Switchで認識されるプロコンの色を変更します\n`;
+    result =
+      result + `${topLevelIndent}enable(:procon_color, :${proconColor})\n\n`;
+  }
 
   // install_macro_plugin
   if (Object.keys(normalizedInstalledMacros).length) {

src/pages/top.tsx

@@ -23,6 +23,7 @@ const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
     prefixKeys: [],
     installed_macros: {},
     rumbleOnLayerChange: false,
+    proconColor: null,
   };
 
   const initLayersSetting: LayersSetting = {

src/reducers/setting_reducer.ts

@@ -1,12 +1,14 @@
-import { buttons, Button } from "../types/button";
-import { MacroTable, StructMacro, Setting, Flip } from "../types/setting";
+import { ProconColor } from "src/types/procon_color";
+import { Button } from "src/types/button";
+import { Setting } from "src/types/setting";
 
 export const updatePrefixKeysType = Symbol("key");
 export const installMacroType = Symbol("installMacroType");
 export const uninstallMacroType = Symbol("uninstallMacroType");
 export const updateRumbleOnLayerChangeType = Symbol(
   "updateRumbleOnLayerChangeType"
 );
+export const updateProconColor = Symbol("updateProconColor");
 
 export type ACTION_TYPE =
   | {
@@ -24,6 +26,10 @@ export type ACTION_TYPE =
   | {
       type: typeof updateRumbleOnLayerChangeType;
       payload: { rumbleOnLayerChange: boolean };
+    }
+  | {
+      type: typeof updateProconColor;
+      payload: { proconColor: ProconColor };
     };
 
 export const SettingReducer = (setting: Setting, action: ACTION_TYPE) => {
@@ -40,6 +46,9 @@ export const SettingReducer = (setting: Setting, action: ACTION_TYPE) => {
     case updateRumbleOnLayerChangeType:
       setting.rumbleOnLayerChange = action.payload.rumbleOnLayerChange;
       return { ...setting };
+    case updateProconColor:
+      setting.proconColor = action.payload.proconColor;
+      return { ...setting };
     default:
       console.log("一致しないaction typeです", action);
       return { ...setting };

src/types/procon_color.ts

@@ -0,0 +1,10 @@
+export const colors = [
+  "red",
+  "blue",
+  "yellow",
+  "green",
+  "pink",
+  "cyan",
+  "white",
+] as const;
+export type ProconColor = typeof colors[number];

src/types/setting.tsx

@@ -1,4 +1,5 @@
 import { Button } from "./button";
+import { ProconColor } from "src/types/procon_color";
 
 export type Flip = {
   if_pressed?: Array<Button>;
@@ -48,8 +49,10 @@ export type Setting = {
   prefixKeys: Array<Button>;
   installed_macros: InstalledPlugin;
   rumbleOnLayerChange: boolean;
+  proconColor: ProconColor | null;
 };
 
 export const optionalConfiguration = {
   rumbleOnLayerChange: { requiredPbmVersion: "0.3.1" },
+  proconColor: { requiredPbmVersion: "0.3.12" },
 };