diff --git a/README.md b/README.md index 124ffb9..35017f9 100644 --- a/README.md +++ b/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 +- 左スティックの感度を設定できるようにする diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 0000000..f7789f0 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,6 @@ +module.exports = { + moduleNameMapper: { + "^src/(.*)$": "/src/$1", + "^components/(.*)$": "/src/components/$1" + } +} diff --git a/package.json b/package.json index 9bb0298..6d737ca 100644 --- a/package.json +++ b/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 '", "release-build": "NODE_ENV=production webpack", "test": "jest", diff --git a/src/components/editor.tsx b/src/components/editor.tsx index e6d9fcd..c093d12 100644 --- a/src/components/editor.tsx +++ b/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 = () => {
+ diff --git a/src/components/porcon_color_form.tsx b/src/components/porcon_color_form.tsx new file mode 100644 index 0000000..9d541f4 --- /dev/null +++ b/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) => { + if (event.target.value === "") { + settingDispatch({ + type: updateProconColor, + payload: { proconColor: null }, + }); + } else { + settingDispatch({ + type: updateProconColor, + payload: { proconColor: event.target.value }, + }); + } + }; + + return ( + + プロコンの色を変更する + + + {colors.map((color: ProconColor, index) => ( + + ))} + + + ); +}; diff --git a/src/components/preview.tsx b/src/components/preview.tsx index 80d96b4..56169e1 100644 --- a/src/components/preview.tsx +++ b/src/components/preview.tsx @@ -19,6 +19,7 @@ export const Preview: React.FC = () => { prefixKeys: setting.prefixKeys, installed_macros: setting.installed_macros, rumbleOnLayerChange: setting.rumbleOnLayerChange, + proconColor: setting.proconColor, envelope: true, }); const settingTextForPbmCloud = SettingTextualization({ @@ -26,6 +27,7 @@ export const Preview: React.FC = () => { prefixKeys: setting.prefixKeys, installed_macros: setting.installed_macros, rumbleOnLayerChange: setting.rumbleOnLayerChange, + proconColor: setting.proconColor, envelope: false, }); diff --git a/src/components/rumble_on_layer_change_form.tsx b/src/components/rumble_on_layer_change_form.tsx index 0b1f927..4007683 100644 --- a/src/components/rumble_on_layer_change_form.tsx +++ b/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); diff --git a/src/lib/setting_textualization.test.ts b/src/lib/setting_textualization.test.ts index 514757f..d2ecd76 100644 --- a/src/lib/setting_textualization.test.ts +++ b/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); + }); + }); }); diff --git a/src/lib/setting_textualization.ts b/src/lib/setting_textualization.ts index d12d80e..182c02a 100644 --- a/src/lib/setting_textualization.ts +++ b/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