procon_bypass_man-web 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12,6 +12,8 @@ require "procon_bypass_man/web/storage"
12
12
 
13
13
  module ProconBypassMan
14
14
  module Web
15
+ PRESSED_BUTTONS_FILE_PATH = "/tmp/pbm_pressed_buttons"
16
+
15
17
  class App < Sinatra::Base
16
18
  require "yaml"
17
19
 
@@ -123,12 +125,24 @@ module ProconBypassMan
123
125
  end
124
126
  end
125
127
 
126
- # PBMから受け取って、emmitする
128
+ # PBMからのリクエストを受け取るためのapi
129
+ # websocketを使ってwebに表示したかったけどめんどくさかったのでpolling方式になっている
127
130
  post '/api/pressed_buttons' do
131
+ params = JSON.parse(request.body.read)
132
+ json = params.to_json
133
+ File.write ProconBypassMan::Web::PRESSED_BUTTONS_FILE_PATH, json
128
134
  status 200
129
135
  body ''
130
136
  end
131
137
 
138
+ get '/api/pressed_buttons' do
139
+ json = JSON.parse(File.read(ProconBypassMan::Web::PRESSED_BUTTONS_FILE_PATH))
140
+ status 200
141
+ body json.to_json
142
+ rescue Errno::ENOENT
143
+ not_found
144
+ end
145
+
132
146
  get '/' do
133
147
  send_file File.join(ProconBypassMan::Web.gem_root, 'lib/procon_bypass_man/web', 'public', 'index.html')
134
148
  end
@@ -142,6 +156,12 @@ module ProconBypassMan
142
156
  class Server
143
157
  def self.start
144
158
  ProconBypassMan::Web::Db.migrate_if_pending_migration
159
+ App.set :server_settings, {
160
+ AccessLog: [
161
+ [ProconBypassMan::Web.config.logger, WEBrick::AccessLog::COMMON_LOG_FORMAT],
162
+ [ProconBypassMan::Web.config.logger, WEBrick::AccessLog::REFERER_LOG_FORMAT],
163
+ ]
164
+ }
145
165
  App.run! port: 9090
146
166
  end
147
167
  end
@@ -2,6 +2,6 @@
2
2
 
3
3
  module ProconBypassMan
4
4
  module Web
5
- VERSION = "0.1.2"
5
+ VERSION = "0.1.3"
6
6
  end
7
7
  end
@@ -4,6 +4,11 @@ import { Button } from "../types/button";
4
4
  import { LayerKey } from "../types/layer_key";
5
5
  import { ButtonsSettingType } from "../types/buttons_setting_type";
6
6
 
7
+ interface AnalogStickPosition {
8
+ x: number;
9
+ y: number;
10
+ }
11
+
7
12
  interface DirPathApiResponse {
8
13
  result: string,
9
14
  root_path: string,
@@ -24,6 +29,12 @@ interface StatsApiResponse {
24
29
  pid: number | null,
25
30
  }
26
31
 
32
+ interface PressedButtonsResponse {
33
+ buttons: Array<Button>,
34
+ left_analog_stick: AnalogStickPosition,
35
+ left_analog_stick_by_abs: AnalogStickPosition,
36
+ }
37
+
27
38
  export interface SettingApiResponse {
28
39
  result: string,
29
40
  setting: ButtonsSettingType,
@@ -90,4 +101,9 @@ export class HttpClient {
90
101
  getSettingDigest() {
91
102
  return axios.get<SettingDigestApiResponse>("/api/pbm_setting_digest");
92
103
  }
104
+
105
+ getPressedButtons() {
106
+ return axios.get<PressedButtonsResponse>("/api/pressed_buttons");
107
+ }
108
+
93
109
  }
@@ -0,0 +1,52 @@
1
+ /** @jsx jsx */
2
+
3
+ import { jsx, css } from '@emotion/react'
4
+ import React, { useState, useEffect } from "react";
5
+
6
+ import { Button } from "../types/button";
7
+ import { HttpClient } from "../lib/http_client";
8
+
9
+ const httpClient = new HttpClient();
10
+
11
+ export const PressedButtonsPage = () => {
12
+ const [timer, setTimer] = useState(true);
13
+ const [buttons, setButtons] = useState<Array<Button>>([]);
14
+ const [leftAnalogStickX, setLeftAnalogStickX] = useState<number>(0);
15
+ const [leftAnalogStickY, setLeftAnalogStickY] = useState<number>(0);
16
+ const [leftAnalogStickAbsX, setLeftAnalogStickAbsX] = useState<number>(0);
17
+ const [leftAnalogStickAbsY, setLeftAnalogStickAbsY] = useState<number>(0);
18
+
19
+ const updateButtons = () => {
20
+ httpClient.getPressedButtons().then(function (response) {
21
+ setButtons(response.data.buttons);
22
+ setLeftAnalogStickX(response.data.left_analog_stick.x);
23
+ setLeftAnalogStickY(response.data.left_analog_stick.y);
24
+ setLeftAnalogStickAbsX(response.data.left_analog_stick_by_abs.x);
25
+ setLeftAnalogStickAbsY(response.data.left_analog_stick_by_abs.y);
26
+ });
27
+ };
28
+
29
+ useEffect(() => {
30
+ updateButtons();
31
+ if (timer) {
32
+ const timerId = setInterval(updateButtons, 500);
33
+ return () => clearInterval(timerId);
34
+ }
35
+ }, [timer]);
36
+
37
+ // TODO デザイン
38
+ // https://phantom-hand.web.app/projects/metroid_dread
39
+ // https://github.com/noov-smash/PhantomHand-React/blob/ddbc035ab10bb29bc0a32f3bc448b07706e3b994/src/screens/Project/components/NintendoSwitchProCon.tsx#L15 みたいな実装で押しているボタンを可視したい
40
+ return (
41
+ <>
42
+ <div>
43
+ 押されたボタン: {buttons.join(",")}<br />
44
+ X: {leftAnalogStickX}<br />
45
+ Y: {leftAnalogStickY}<br />
46
+ abs X: {leftAnalogStickAbsX}<br />
47
+ abs Y: {leftAnalogStickAbsY}<br />
48
+ </div>
49
+ </>
50
+ )
51
+ }
52
+
data/src/pages/top.tsx CHANGED
@@ -13,6 +13,7 @@ import { BpmPage } from "./bpm_page";
13
13
  import { Home } from "./home";
14
14
  import { ButtonsSettingPage } from "./buttons_setting_page";
15
15
  import { RecodingModePage } from "./recoding_mode_page";
16
+ import { PressedButtonsPage } from "./pressed_buttons_page";
16
17
  import { ButtonsSettingContext } from "./../contexts/buttons_setting";
17
18
  import { ButtonsInLayer, Layers, ButtonsSettingType } from "../types/buttons_setting_type";
18
19
  import { buttons, Button } from "../types/button";
@@ -59,6 +60,9 @@ export const Top: React.FC = () => {
59
60
  padding:10px;
60
61
  background-color: #333;
61
62
  color: white;
63
+ &:hover {
64
+ cursor: pointer;
65
+ }
62
66
  }
63
67
  }
64
68
  }
@@ -79,6 +83,9 @@ export const Top: React.FC = () => {
79
83
  <li>
80
84
  <Link to="/buttons_setting">ボタン設定</Link>
81
85
  </li>
86
+ <li>
87
+ <Link to="/pressed_buttons">入力中のボタン表示する画面</Link>
88
+ </li>
82
89
  </ul>
83
90
  </nav>
84
91
 
@@ -106,6 +113,9 @@ export const Top: React.FC = () => {
106
113
  <Route path="/recoding_mode">
107
114
  <RecodingModePage />
108
115
  </Route>
116
+ <Route path="/pressed_buttons">
117
+ <PressedButtonsPage />
118
+ </Route>
109
119
  </Switch>
110
120
  </div>
111
121
  </Router>
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: procon_bypass_man-web
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.2
4
+ version: 0.1.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - jiikko
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2021-11-02 00:00:00.000000000 Z
11
+ date: 2021-11-04 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sinatra
@@ -117,6 +117,7 @@ files:
117
117
  - src/pages/buttons_setting_page.tsx
118
118
  - src/pages/global_setting_page.tsx
119
119
  - src/pages/home.tsx
120
+ - src/pages/pressed_buttons_page.tsx
120
121
  - src/pages/recoding_mode_page.tsx
121
122
  - src/pages/top.tsx
122
123
  - src/reducers/layer_reducer.ts