mirror of
https://github.com/eugene-serb/wavelovers.git
synced 2023-09-09 23:41:16 +03:00
- Added IGamepadButton interface.
- Modified IGamepad interface by buttons and axes. - Modified IVibrator and Vibrator to use update function. - Added AppDiagnostic component, view, route and redirect. - Changed faq-link to gamepad-master to wavelovers-diagnostic.
This commit is contained in:
Eugene Serb
parent
7894b381f9
commit
d0cdbda70a
11
public/diagnostic.html
Normal file
11
public/diagnostic.html
Normal file
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Wavelovers – Redirect</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="refresh" content="0; URL=https://wavelovers.ru/?diagnostic" />
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -112,7 +112,7 @@
|
||||
<div class="content-item">
|
||||
<h2 class="content-item__header">Troubleshooting</h2>
|
||||
<span>If you are having difficulty detecting a gamepad by the browser, you can use the utility </span>
|
||||
<a href="https://eugene-serb.github.io/gamepad-master/" target="_blank">Gamepad Master</a><br /><br />
|
||||
<a href="https://wavelovers.ru/?diagnostic" target="_blank">Wavelovers Diagnostic</a><br /><br />
|
||||
<dl>
|
||||
<dt>The app does not see my device.</dt>
|
||||
<dd>Make sure you have a chromium-based browser, then update the app and reconnect your device.</dd>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Wavelovers – Redirect</title>
|
||||
<title>Wavelovers – Redirect</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="refresh" content="0; URL=https://wavelovers.ru/?manual" />
|
||||
</head>
|
||||
|
||||
136
src/components/AppDiagnostic.vue
Normal file
136
src/components/AppDiagnostic.vue
Normal file
@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div class="content-item">
|
||||
<div v-for="gamepad in gamepads"
|
||||
:key="gamepad.id">
|
||||
<div class="output-gamepad">
|
||||
<h3>#{{ gamepad.unit.index + 1 }}. {{ gamepad.unit.id }}</h3>
|
||||
<div class="gamepad-group">
|
||||
<div>
|
||||
<span :class="[ gamepad.unit.buttons[0].value === 1 ? 'pressed' : '' ]"
|
||||
>A: {{ gamepad.unit.buttons[0].value.toFixed(2) }}</span>
|
||||
<span :class="[gamepad.unit.buttons[1].value === 1 ? 'pressed' : '' ]"
|
||||
>B: {{ gamepad.unit.buttons[1].value.toFixed(2) }}</span>
|
||||
<span :class="[ gamepad.unit.buttons[2].value === 1 ? 'pressed' : '' ]"
|
||||
>X: {{ gamepad.unit.buttons[2].value.toFixed(2) }}</span>
|
||||
<span :class="[ gamepad.unit.buttons[3].value === 1 ? 'pressed' : '' ]"
|
||||
>Y: {{ gamepad.unit.buttons[3].value.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span :class="[ gamepad.unit.buttons[4].value === 1 ? 'pressed' : '' ]"
|
||||
>LB: {{ gamepad.unit.buttons[4].value.toFixed(2) }}</span>
|
||||
<span :class="[ gamepad.unit.buttons[5].value === 1 ? 'pressed' : '' ]"
|
||||
>RB: {{ gamepad.unit.buttons[5].value.toFixed(2) }}</span>
|
||||
<span :class="[ gamepad.unit.buttons[6].value === 1 ? 'pressed' : '' ]"
|
||||
>LT: {{ gamepad.unit.buttons[6].value.toFixed(2) }}</span>
|
||||
<span :class="[ gamepad.unit.buttons[7].value === 1 ? 'pressed' : '' ]"
|
||||
>RT: {{ gamepad.unit.buttons[7].value.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span :class="[ gamepad.unit.buttons[8].value === 1 ? 'pressed' : '' ]"
|
||||
>Back: {{ gamepad.unit.buttons[8].value.toFixed(2) }}</span>
|
||||
<span :class="[ gamepad.unit.buttons[9].value === 1 ? 'pressed' : '' ]"
|
||||
>Start: {{ gamepad.unit.buttons[9].value.toFixed(2) }}</span>
|
||||
<span :class="[ gamepad.unit.buttons[10].value === 1 ? 'pressed' : '' ]"
|
||||
>Left Stick: {{gamepad.unit.buttons[10].value.toFixed(2) }}</span>
|
||||
<span :class="[ gamepad.unit.buttons[11].value === 1 ? 'pressed' : '' ]"
|
||||
>Right Stick: {{ gamepad.unit.buttons[11].value.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span :class="[ gamepad.unit.buttons[12].value === 1 ? 'pressed' : '' ]"
|
||||
>Forward: {{ gamepad.unit.buttons[12].value.toFixed(2) }}</span>
|
||||
<span :class="[ gamepad.unit.buttons[13].value === 1 ? 'pressed' : '' ]"
|
||||
>Backward: {{ gamepad.unit.buttons[13].value.toFixed(2) }}</span>
|
||||
<span :class="[ gamepad.unit.buttons[14].value === 1 ? 'pressed' : '' ]"
|
||||
>Left: {{ gamepad.unit.buttons[14].value.toFixed(2) }}</span>
|
||||
<span :class="[ gamepad.unit.buttons[15].value === 1 ? 'pressed' : '' ]"
|
||||
>Right: {{ gamepad.unit.buttons[15].value.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>Left Stick X: {{ gamepad.unit.axes[0] ? gamepad.unit.axes[0].toFixed(2) : 'missing' }}</span>
|
||||
<span>Left Stick Y: {{ gamepad.unit.axes[1] ? gamepad.unit.axes[1].toFixed(2) : 'missing' }}</span>
|
||||
<span>Right Stick X: {{ gamepad.unit.axes[2] ? gamepad.unit.axes[2].toFixed(2) : 'missing' }}</span>
|
||||
<span>Right Stick Y: {{ gamepad.unit.axes[3] ? gamepad.unit.axes[3].toFixed(2) : 'missing' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span>Vibration Actuator: {{ gamepad.unit.vibrationActuator ? 'Available' : 'missing' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import store from '@/store/index';
|
||||
import Vibrator from '@/models/Vibrator';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AppDiagnostic',
|
||||
data: () => {
|
||||
return {
|
||||
timestamp: 0 as number,
|
||||
interval: 0 as number,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
gamepads: function (): Vibrator[] {
|
||||
const timestamp: number = this.timestamp;
|
||||
return store.getters.gamepads as Vibrator[];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateTimestamp: function (): void {
|
||||
this.timestamp = Date.now();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.interval = setInterval(this.updateTimestamp, 1);
|
||||
},
|
||||
unmounted() {
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.message-box {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-wrapper {
|
||||
margin-block-start: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.output-gamepad {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--number-border-radius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.gamepad-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
.gamepad-group > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pressed {
|
||||
background-color: var(--color-link-hover);
|
||||
color: var(--color-background);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<div class="content-item navigation-list">
|
||||
<router-link to="/manual" class="navigation-item">Manual</router-link>
|
||||
<router-link to="/" class="navigation-item">Patterns</router-link>
|
||||
<router-link to="/diagnostic" class="navigation-item">Diagnostic</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
import IVibrationActuator from '@/models/IVibrationActuator';
|
||||
import IGamepadButton from '@/models/IGamepadButton';
|
||||
|
||||
interface IGamepad {
|
||||
id: string;
|
||||
index: number;
|
||||
timestamp: number;
|
||||
connected: boolean;
|
||||
mapping: string;
|
||||
axes: number[];
|
||||
buttons: IGamepadButton[];
|
||||
vibrationActuator: IVibrationActuator;
|
||||
}
|
||||
|
||||
|
||||
8
src/models/IGamepadButton.ts
Normal file
8
src/models/IGamepadButton.ts
Normal file
@ -0,0 +1,8 @@
|
||||
interface IGamepadButton {
|
||||
pressed: boolean;
|
||||
touched: boolean;
|
||||
value: number;
|
||||
}
|
||||
|
||||
export default IGamepadButton;
|
||||
|
||||
@ -7,6 +7,7 @@ interface IVibrator {
|
||||
isVibrating: boolean;
|
||||
unit: IGamepad;
|
||||
pattern: TPatternUnit[];
|
||||
interval: number;
|
||||
update(): void;
|
||||
reset(): void;
|
||||
vibrate(pattern: TPatternUnit[]): void;
|
||||
|
||||
@ -8,6 +8,7 @@ class Vibrator implements IVibrator {
|
||||
isVibrating: boolean;
|
||||
unit: IGamepad;
|
||||
pattern: TPatternUnit[];
|
||||
interval: number;
|
||||
|
||||
constructor(unit: IGamepad) {
|
||||
this.unit = unit;
|
||||
@ -15,11 +16,14 @@ class Vibrator implements IVibrator {
|
||||
this.canVibrate = (this.unit.vibrationActuator) ? true : false;
|
||||
this.isVibrating = false;
|
||||
this.pattern = [];
|
||||
|
||||
this.update = this.update.bind(this);
|
||||
this.interval = setInterval(this.update, 1);
|
||||
}
|
||||
|
||||
update(): void {
|
||||
const gamepads = navigator.getGamepads();
|
||||
this.unit = <IGamepad><unknown>gamepads[this.unit.index];
|
||||
this.unit = gamepads[this.unit.index] as unknown as IGamepad;
|
||||
}
|
||||
|
||||
reset(): void {
|
||||
|
||||
@ -12,6 +12,11 @@ const routes: Array<RouteRecordRaw> = [
|
||||
name: 'manual-view',
|
||||
component: () => import('@/views/ManualView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/diagnostic',
|
||||
name: 'diagnostic-view',
|
||||
component: () => import('@/views/DiagnosticView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
name: '404',
|
||||
|
||||
16
src/views/DiagnosticView.vue
Normal file
16
src/views/DiagnosticView.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<AppDiagnostic />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import AppDiagnostic from '@/components/AppDiagnostic.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DiagnosticView',
|
||||
components: {
|
||||
AppDiagnostic: AppDiagnostic,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user