procon_bypass_man-web 0.1.0

data/lib/procon_bypass_man/web/storage.rb

@@ -0,0 +1,25 @@
+module ProconBypassMan
+  module Web
+    class Storage
+      def self.instance
+        new
+      end
+
+      def root_path
+        ProconBypassMan::Web::Setting.find_or_create_by&.root_path
+      end
+
+      def root_path=(value)
+        ProconBypassMan::Web::Setting.find_or_create_by&.update!(root_path: value)
+      end
+
+      def setting_path
+        ProconBypassMan::Web::Setting.find_or_create_by&.setting_path
+      end
+
+      def setting_path=(value)
+        ProconBypassMan::Web::Setting.find_or_create_by&.update!(setting_path: value)
+      end
+    end
+  end
+end

data/lib/procon_bypass_man/web/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module ProconBypassMan
+  module Web
+    VERSION = "0.1.0"
+  end
+end

data/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "procon_bypass_man-web",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.14.8",
+    "@babel/preset-env": "^7.14.9",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.14.5",
+    "@emotion/react": "^11.4.0",
+    "@types/jest": "^26.0.24",
+    "@types/js-yaml": "^4.0.2",
+    "@types/lodash": "^4.14.172",
+    "@types/md5": "^2.3.1",
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.8",
+    "babel-jest": "^27.0.6",
+    "babel-loader": "^8.2.2",
+    "deep-object-diff": "^1.1.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "jest": "^27.0.6",
+    "js-yaml": "^4.1.0",
+    "lodash": "^4.17.21",
+    "md5": "^2.3.0",
+    "ts-jest": "^27.0.4",
+    "ts-loader": "^9.2.3",
+    "ts-node": "^10.1.0",
+    "typescript": "^4.3.4",
+    "webpack": "^5.39.1",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2"
+  },
+  "scripts": {
+    "build": "webpack",
+    "server": "webpack serve",
+    "release-build": "NODE_ENV=production webpack",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@types/react-router-dom": "^5.1.7",
+    "axios": "^0.21.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0"
+  }
+}

data/procon_bypass_man-web.gemspec

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+require_relative "lib/procon_bypass_man/web/version"
+
+Gem::Specification.new do |spec|
+  spec.name          = "procon_bypass_man-web"
+  spec.version       = ProconBypassMan::Web::VERSION
+  spec.authors       = ["jiikko"]
+  spec.email         = ["n905i.1214@gmail.com"]
+
+  spec.summary       = "PBM for web"
+  spec.description   = spec.summary
+  spec.homepage      = "https://github.com/splaplapla/procon_bypass_man-web"
+  spec.license       = "MIT"
+  spec.required_ruby_version = Gem::Requirement.new(">= 2.4.0")
+
+  spec.metadata["homepage_uri"] = spec.homepage
+  spec.metadata["source_code_uri"] = spec.homepage
+
+  # Specify which files should be added to the gem when it is released.
+  # The `git ls-files -z` loads the files in the RubyGem that have been added into git.
+  spec.files = Dir.chdir(File.expand_path(__dir__)) do
+    `git ls-files -z`.split("\x0").reject { |f| f.match(%r{\A(?:test|spec|features)/}) }
+  end
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{\Aexe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  # Uncomment to register a new dependency of your gem
+  spec.add_dependency "sinatra"
+  spec.add_dependency "webrick"
+  spec.add_dependency "sqlite3"
+
+  # For more information and examples about making a new gem, checkout our
+  # guide at: https://bundler.io/guides/creating_gem.html
+end

data/src/app.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { Top } from "./pages/top";
+
+ReactDOM.render(<Top />, document.getElementById("app"));

data/src/components/button_setting.tsx

@@ -0,0 +1,142 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react'
+import React, { useState, useContext } from "react";
+import { Button } from "../types/button";
+import { ButtonState } from "./../lib/button_state";
+import { ButtonsModal } from "./buttons_modal";
+import { ButtonsSettingContext } from "./../contexts/buttons_setting";
+import { ButtonsSettingType, ButtonsInLayer, ButtonInLayer, Layers, Flip } from "../types/buttons_setting_type";
+import { LayerKey } from "../types/layer_key";
+import { disableFlipType, alwaysFlipType, flipIfPressedSelfType, flipIfPressedSomeButtonsType, ignoreButtonsInFlipingType, remapType, openMenuType, closeMenuType } from "../reducers/layer_reducer";
+
+type ButtonMenuProp = {
+  name: Button;
+  layerKey: LayerKey;
+  buttonValue: ButtonInLayer;
+  layersDispatch: any;
+};
+
+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 [modalCallbackOnSubmit, setModalCallbackOnSubmit] = useState(undefined as any)
+  const [modalCloseCallback, setModalCloseCallback] = useState(undefined as any)
+  const [modalTitle, setModalTitle] = useState("")
+  const [modalPrefillButtons, setModalPrefillButtons] = useState<Array<Button>>([])
+
+  // 無効
+  const handleNullFlipValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+    layersDispatch({ type: disableFlipType, payload: { layerKey: layerKey, button: name }});
+  };
+
+  // 常に連打
+  const handleFlipValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+    layersDispatch({ type: alwaysFlipType, payload: { layerKey: layerKey, button: name }});
+  };
+
+  // 自分自身への条件付き連打
+  const openIfPressedRadioboxModal = (e: React.ChangeEvent<HTMLInputElement>) => {
+    layersDispatch({ type: flipIfPressedSelfType, payload: { layerKey: layerKey, button: name }});
+  };
+
+  // 条件付き連打
+  const flipIfPressedSomeButtons = buttonValue?.flip?.if_pressed || [] as Array<Button>;
+  const setFlipIfPressedSomeButtonsWithPersistence = (bs: Array<Button>) => {
+    layersDispatch({ type: flipIfPressedSomeButtonsType, payload: { layerKey: layerKey, button: name, targetButtons: bs }});
+  }
+  const openIfPressedSomeButtonsModal = (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement>) => {
+    setOpenModal(true)
+    setModalTitle("特定のキーを押したときだけ")
+    setModalPrefillButtons(flipIfPressedSomeButtons);
+    setModalCallbackOnSubmit(() => setFlipIfPressedSomeButtonsWithPersistence);
+    setModalCloseCallback(() => setOpenModal);
+  }
+
+  // 無視
+  const forceNeutralButtons = buttonValue.flip?.force_neutral || [] as Array<Button>
+  const setIgnoreButtonsOnFlipingWithPersistence = (bs: Array<Button>) => {
+    layersDispatch({ type: ignoreButtonsInFlipingType, payload: { layerKey: layerKey, button: name, targetButtons: bs }});
+  }
+  const handleIgnoreButton = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setOpenModal(true)
+    setModalTitle("連打中は特定のボタンの入力を無視する")
+    setModalPrefillButtons(buttonValue.flip?.force_neutral || [] as Array<Button>);
+    setModalCallbackOnSubmit(() => setIgnoreButtonsOnFlipingWithPersistence);
+    setModalCloseCallback(() => setOpenModal);
+  };
+
+  // リマップ
+  const setRemapButtonsWithPersistence = (bs: Array<Button>) => {
+    layersDispatch({ type: remapType, payload: { layerKey: layerKey, button: name, targetButtons: bs }});
+  }
+  const handleRemapButton = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setOpenModal(true)
+    setModalTitle("リマップ")
+    setModalPrefillButtons(buttonValue.remap?.to || []);
+    setModalCallbackOnSubmit(() => setRemapButtonsWithPersistence);
+    setModalCloseCallback(() => setOpenModal);
+  };
+
+  return(
+    <>
+      <fieldset><legend><strong>連打設定</strong></legend>
+        <label><input type="radio" onChange={handleNullFlipValue} checked={buttonState.isDisabledFlip()}/>無効</label><br />
+        <label><input type="radio" onChange={handleFlipValue} checked={buttonState.isAlwaysFlip()}/>常に連打する</label><br />
+        <label><input type="radio" onChange={openIfPressedRadioboxModal} checked={buttonState.isFlipIfPressedSelf()}/>このボタンを押している時だけ連打する({name})</label><br />
+        <label>
+          <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>
+
+      <fieldset><legend><strong>リマップ設定</strong></legend>
+        <label>
+          <input type="checkbox" onChange={handleRemapButton} checked={buttonState.isRemap()} disabled={!buttonState.isDisabledFlip()} />
+            別のボタンに置き換える{buttonState.isRemap() && `(${buttonValue.remap?.to?.join(", ")})`}
+        </label>
+      </fieldset>
+      <div css={css`position: relative;`}>
+        {openModal && <ButtonsModal callbackOnSubmit={modalCallbackOnSubmit} callbackOnClose={modalCloseCallback} title={modalTitle} prefill={modalPrefillButtons} positionOnShown={"relative"} />}
+      </div>
+    </>
+  )
+}
+
+type Prop = {
+  name: Button;
+  layerKey: LayerKey;
+};
+
+export const ButtonSetting: React.FC<Prop> = ({ name, layerKey }) => {
+  const settingContext = useContext(ButtonsSettingContext);
+  const handleToggle = () => {
+    if(isOpenMenu()) { // 閉じる
+      settingContext.layersDispatch({ type: closeMenuType, payload: { layerKey: layerKey, button: name }});
+    } else { // 開く
+      settingContext.layersDispatch({ type: openMenuType, payload: { layerKey: layerKey, button: name }});
+    }
+  }
+
+  const isOpenMenu = () => {
+    return settingContext.layers[layerKey][name].open;
+  }
+  const buttonValue = settingContext.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} />}
+    </>
+  );
+};

data/src/components/buttons_modal.tsx

@@ -0,0 +1,110 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react'
+import React, { useState } from "react";
+import { Button, buttons } from "../types/button";
+
+type Props = {
+  callbackOnSubmit: any;
+  callbackOnClose: any;
+  prefill: Array<Button>;
+  title: string;
+  positionOnShown: string;
+};
+
+type CheckedButtons = {
+  [key in Button] : boolean
+}
+
+export const ButtonsModal = ({ callbackOnSubmit, callbackOnClose, title, prefill, positionOnShown }: Props) => {
+  const [checkedButtonMap, setCheckedButtonMap] = useState(
+    prefill.reduce((a, b) => { a[b] = true; return a },
+      buttons.reduce((a, b) => { a[b] = false; return a }, {} as CheckedButtons)
+    )
+  )
+  const callback = callbackOnSubmit;
+  const handleSubmit = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    const bs = Object.entries(checkedButtonMap).reduce((acc, item) => {
+      const checked: boolean = item[1];
+      const button = item[0] as Button;
+      checked && acc.push(button);
+      return acc;
+    }, [] as Array<Button>).sort();
+
+    callbackOnSubmit(bs);
+    callbackOnClose(false);
+  };
+  const handleCancel = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    callbackOnClose(false);
+  }
+  const titlestyle = css(`
+    margin-top: 10px;
+    font-size: 1.17em;
+    font-weight: bold;
+  `)
+  const style = () => {
+    if(positionOnShown === "relative") {
+      return css(`
+        position: absolute;
+        align: left;
+        top: -400px;
+        width: 400px;
+        height: 400px;
+        border: solid;
+        background-color: white;
+      `);
+    } else {
+      return css(`
+        position: absolute;
+        align: left;
+        top: 0px;
+        left: 20px;
+        width: 400px;
+        height: 400px;
+        border: solid;
+        background-color: white;
+      `);
+    }
+  }
+  const aStyle = css`
+    background-color: #4669ff;
+    border-bottom: solid 2px #003aff;
+    border-right: solid 2px #003aff;
+    border-radius: 20px;
+    font-weight: bold;
+    color: #FFF;
+    text-decoration: none;
+    padding: 10px;
+    display: inline-block;
+    margin-left: 10px;
+  `;
+
+  const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCheckedButtonMap((previousButtonStats) => {
+      previousButtonStats[e.target.value as Button] = e.target.checked;
+      return previousButtonStats;
+    })
+  }
+
+  return (
+    <>
+      <div css={style()}>
+        <div css={titlestyle}>{title}</div>
+
+        {buttons.map((b, index) => (
+          <div key={index}>
+            <label><input type="checkbox" value={b} defaultChecked={checkedButtonMap[b]} onChange={handleClick} />{b}</label>
+          </div>
+        ))}
+
+        <hr />
+        <div css={css`display: flex`}>
+          <a href={"#"} onClick={handleCancel} css={aStyle}>変更せず閉じる</a>
+          <a href={"#"} onClick={handleSubmit} css={aStyle}>決定する</a>
+        </div>
+      </div>
+    </>
+  )
+}

data/src/components/buttons_setting.tsx

@@ -0,0 +1,67 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react'
+import React, { useState, useContext } from "react";
+import { ButtonSetting } from "./button_setting";
+import { MacroSettings } from "./macro_settings";
+import { ModeSettings } from "./mode_settings";
+import { Button, buttons } from "../types/button";
+import { LayerKey } from "../types/layer_key";
+import { ButtonsSettingContext } from "./../contexts/buttons_setting";
+
+type Props = {
+  layerKey: LayerKey;
+  layerRef: any;
+};
+
+export const ButtonsSetting = ({ layerKey, layerRef }:Props) => {
+  const [visibility, setVisibility] = useState("hidden");
+  const visibilityStyle = () => {
+    if(visibility === "hidden") {
+      return css`display: none;`;
+    }
+  }
+  const ulStyle = css`
+    border: 1px solid #666;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    list-style-type: none;
+    margin: 0 0 0 1em;
+    padding: 0;
+    width: 900px;
+  `;
+  const liStyle = css`
+    border: 1px solid #aaa;
+    margin: 0.2em;
+    padding: 0.5em;
+    width: 200px;
+  `;
+  layerRef.setVisibility = setVisibility;
+
+  const { layers } = useContext(ButtonsSettingContext);
+  const isEnableMode = !layers[layerKey].mode.disable;
+
+  return(
+    <div css={visibilityStyle()}>
+      <h4>モード</h4>
+      <ModeSettings layerKey={layerKey} />
+
+      <h4>マクロ</h4>
+      {isEnableMode && `モードが有効なので選択できません`}
+      {!isEnableMode && <MacroSettings layerKey={layerKey} />}
+
+      <h4>各ボタンの設定</h4>
+      {isEnableMode && `モードが有効なので選択できません`}
+      {!isEnableMode &&
+        <div css={ulStyle}>
+          {buttons.map((b, i) => (
+            <div key={i} css={liStyle}>
+              <ButtonSetting layerKey={layerKey} name={b} />
+            </div>
+          ))}
+        </div>
+      }
+    </div>
+  )
+}