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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +4 -1
- data/Gemfile.lock +3 -3
- data/bin/pbm_web +3 -1
- data/lib/procon_bypass_man/web/public/bundle.js +1 -1
- data/lib/procon_bypass_man/web/server.rb +21 -1
- data/lib/procon_bypass_man/web/version.rb +1 -1
- data/src/lib/http_client.ts +16 -0
- data/src/pages/pressed_buttons_page.tsx +52 -0
- data/src/pages/top.tsx +10 -0
- metadata +3 -2
@@ -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
|
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
|
data/src/lib/http_client.ts
CHANGED
@@ -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.
|
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-
|
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
|