procon_bypass_man-web 0.1.2 → 0.1.3

data/lib/procon_bypass_man/web/server.rb

@@ -12,6 +12,8 @@ require "procon_bypass_man/web/storage"
 
 module ProconBypassMan
   module Web
+    PRESSED_BUTTONS_FILE_PATH = "/tmp/pbm_pressed_buttons"
+
     class App < Sinatra::Base
       require "yaml"
 
@@ -123,12 +125,24 @@ module ProconBypassMan
         end
       end
 
-      # PBMから受け取って、emmitする
+      # PBMからのリクエストを受け取るためのapi
+      # websocketを使ってwebに表示したかったけどめんどくさかったのでpolling方式になっている
       post '/api/pressed_buttons' do
+        params = JSON.parse(request.body.read)
+        json = params.to_json
+        File.write ProconBypassMan::Web::PRESSED_BUTTONS_FILE_PATH, json
         status 200
         body ''
       end
 
+      get '/api/pressed_buttons' do
+        json = JSON.parse(File.read(ProconBypassMan::Web::PRESSED_BUTTONS_FILE_PATH))
+        status 200
+        body json.to_json
+      rescue Errno::ENOENT
+        not_found
+      end
+
       get '/' do
         send_file File.join(ProconBypassMan::Web.gem_root, 'lib/procon_bypass_man/web', 'public', 'index.html')
       end
@@ -142,6 +156,12 @@ module ProconBypassMan
     class Server
       def self.start
         ProconBypassMan::Web::Db.migrate_if_pending_migration
+        App.set :server_settings, {
+          AccessLog: [
+            [ProconBypassMan::Web.config.logger, WEBrick::AccessLog::COMMON_LOG_FORMAT],
+            [ProconBypassMan::Web.config.logger, WEBrick::AccessLog::REFERER_LOG_FORMAT],
+          ]
+        }
         App.run! port: 9090
       end
     end

data/lib/procon_bypass_man/web/version.rb

@@ -2,6 +2,6 @@
 
 module ProconBypassMan
   module Web
-    VERSION = "0.1.2"
+    VERSION = "0.1.3"
   end
 end

data/src/lib/http_client.ts

@@ -4,6 +4,11 @@ import { Button } from "../types/button";
 import { LayerKey } from "../types/layer_key";
 import { ButtonsSettingType } from "../types/buttons_setting_type";
 
+interface AnalogStickPosition {
+  x: number;
+  y: number;
+}
+
 interface DirPathApiResponse {
   result: string,
   root_path: string,
@@ -24,6 +29,12 @@ interface StatsApiResponse {
   pid: number | null,
 }
 
+interface PressedButtonsResponse {
+  buttons: Array<Button>,
+  left_analog_stick: AnalogStickPosition,
+  left_analog_stick_by_abs: AnalogStickPosition,
+}
+
 export interface SettingApiResponse {
   result: string,
   setting: ButtonsSettingType,
@@ -90,4 +101,9 @@ export class HttpClient {
   getSettingDigest() {
     return axios.get<SettingDigestApiResponse>("/api/pbm_setting_digest");
   }
+
+  getPressedButtons() {
+    return axios.get<PressedButtonsResponse>("/api/pressed_buttons");
+  }
+
 }

data/src/pages/pressed_buttons_page.tsx

@@ -0,0 +1,52 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react'
+import React, { useState, useEffect } from "react";
+
+import { Button } from "../types/button";
+import { HttpClient } from "../lib/http_client";
+
+const httpClient = new HttpClient();
+
+export const PressedButtonsPage = () => {
+  const [timer, setTimer] = useState(true);
+  const [buttons, setButtons] = useState<Array<Button>>([]);
+  const [leftAnalogStickX, setLeftAnalogStickX] = useState<number>(0);
+  const [leftAnalogStickY, setLeftAnalogStickY] = useState<number>(0);
+  const [leftAnalogStickAbsX, setLeftAnalogStickAbsX] = useState<number>(0);
+  const [leftAnalogStickAbsY, setLeftAnalogStickAbsY] = useState<number>(0);
+
+  const updateButtons = () => {
+    httpClient.getPressedButtons().then(function (response) {
+      setButtons(response.data.buttons);
+      setLeftAnalogStickX(response.data.left_analog_stick.x);
+      setLeftAnalogStickY(response.data.left_analog_stick.y);
+      setLeftAnalogStickAbsX(response.data.left_analog_stick_by_abs.x);
+      setLeftAnalogStickAbsY(response.data.left_analog_stick_by_abs.y);
+    });
+  };
+
+  useEffect(() => {
+    updateButtons();
+    if (timer) {
+      const timerId = setInterval(updateButtons, 500);
+      return () => clearInterval(timerId);
+    }
+  }, [timer]);
+
+  // TODO デザイン
+  // https://phantom-hand.web.app/projects/metroid_dread
+  // https://github.com/noov-smash/PhantomHand-React/blob/ddbc035ab10bb29bc0a32f3bc448b07706e3b994/src/screens/Project/components/NintendoSwitchProCon.tsx#L15 みたいな実装で押しているボタンを可視したい
+  return (
+    <>
+      <div>
+        押されたボタン: {buttons.join(",")}<br />
+        X: {leftAnalogStickX}<br />
+        Y: {leftAnalogStickY}<br />
+        abs X: {leftAnalogStickAbsX}<br />
+        abs Y: {leftAnalogStickAbsY}<br />
+      </div>
+    </>
+  )
+}
+

data/src/pages/top.tsx

@@ -13,6 +13,7 @@ import { BpmPage } from "./bpm_page";
 import { Home } from "./home";
 import { ButtonsSettingPage } from "./buttons_setting_page";
 import { RecodingModePage } from "./recoding_mode_page";
+import { PressedButtonsPage } from "./pressed_buttons_page";
 import { ButtonsSettingContext } from "./../contexts/buttons_setting";
 import { ButtonsInLayer, Layers, ButtonsSettingType } from "../types/buttons_setting_type";
 import { buttons, Button } from "../types/button";
@@ -59,6 +60,9 @@ export const Top: React.FC = () => {
           padding:10px;
           background-color: #333;
           color: white;
+          &:hover {
+            cursor: pointer;
+          }
         }
       }
     }
@@ -79,6 +83,9 @@ export const Top: React.FC = () => {
               <li>
                 <Link to="/buttons_setting">ボタン設定</Link>
               </li>
+              <li>
+                <Link to="/pressed_buttons">入力中のボタン表示する画面</Link>
+              </li>
             </ul>
           </nav>
 
@@ -106,6 +113,9 @@ export const Top: React.FC = () => {
             <Route path="/recoding_mode">
               <RecodingModePage />
             </Route>
+            <Route path="/pressed_buttons">
+              <PressedButtonsPage />
+            </Route>
           </Switch>
         </div>
       </Router>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: procon_bypass_man-web
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - jiikko
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2021-11-02 00:00:00.000000000 Z
+date: 2021-11-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sinatra
@@ -117,6 +117,7 @@ files:
 - src/pages/buttons_setting_page.tsx
 - src/pages/global_setting_page.tsx
 - src/pages/home.tsx
+- src/pages/pressed_buttons_page.tsx
 - src/pages/recoding_mode_page.tsx
 - src/pages/top.tsx
 - src/reducers/layer_reducer.ts