- added new app section manual for use through gamepad with button press.

- rename old manual-file to custom, that need to use app through form.
- added custom redirect file.
- updated meta keywords.
- updated sitemaps.
- updated dependencies.
- updated var names.
- clean template in app-custom.

src/components/AppCustom.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="content-item app-custom">
+        <fieldset class="custom-form">
+            <label class="custom-form__input">
+                <span>Start Delay (ms)</span>
+                <input v-model="startDelay"
+                       type="number" placeholder="Start Delay"
+                       min="0" max="1000" step="25" required />
+            </label>
+            <label class="custom-form__input">
+                <span>Duration (ms)</span>
+                <input v-model="duration"
+                       type="number" placeholder="Duration"
+                       min="0" max="1000" step="25" required />
+            </label>
+            <label class="custom-form__input">
+                <span>Weak Magnitude</span>
+                <input v-model="weakMagnitude"
+                       type="range" required
+                       min="0.0" max="1.0" step="0.01" />
+            </label>
+            <label class="custom-form__input">
+                <span>Strong Magnitude</span>
+                <input v-model="strongMagnitude"
+                       type="range" required
+                       min="0.0" max="1.0" step="0.01" />
+            </label>
+            <div class="custom-form__buttons">
+                <button @click="start" class="custom-form__button">Start</button>
+                <button @click="stop" class="custom-form__button">Stop</button>
+            </div>
+        </fieldset>
+    </div>
+</template>
+
+<script lang="ts">
+    import { defineComponent } from 'vue';
+    import store from '@/store/index';
+    import TPatternUnit from '@/models/TPatternUnit';
+
+    export default defineComponent({
+        name: 'AppCustom',
+        data: () => {
+            return {
+                startDelay: 250 as number,
+                duration: 250 as number,
+                weakMagnitude: 1 as number,
+                strongMagnitude: 1 as number,
+            };
+        },
+        methods: {
+            createPatternUnit: function (): TPatternUnit[] {
+                const patternUnit: TPatternUnit[] = [{
+                    startDelay: this.startDelay,
+                    duration: this.duration,
+                    weakMagnitude: this.weakMagnitude,
+                    strongMagnitude: this.strongMagnitude,
+                }];
+                return patternUnit as TPatternUnit[];
+            },
+            start: function (): void {
+                store.dispatch('startCustom', this.createPatternUnit());
+            },
+            stop: function (): void {
+                store.dispatch('reset');
+            },
+        },
+    });
+</script>
+
+<style lang="scss">
+    .custom-form {
+        display: flex;
+        flex-direction: column-reverse;
+        justify-content: space-between;
+        gap: 16px;
+    }
+
+    .custom-form__input {
+        display: grid;
+        grid-template-columns: 1fr;
+        align-items: center;
+    }
+
+    .custom-form__buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 32px;
+    }
+
+    .custom-form__button {
+        width: 100%;
+    }
+
+    @media only screen and (min-width: 540px) {
+        .custom-form {
+            display: flex;
+            flex-direction: column;
+            gap: 32px;
+        }
+
+        .custom-form__input {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+        }
+    }
+</style>
+

src/components/AppDiagnostic.vue

@@ -30,17 +30,17 @@
                 const result: Vibrator[] = store.getters.gamepads as Vibrator[];
                 result.forEach((item) => {
                     item.interval = timestamp;
-                })
+                });
                 return result;
             },
         },
         methods: {
-            updateTimestamp: function (): void {
+            updateComputed: function (): void {
                 this.timestamp = Date.now();
             },
         },
         mounted() {
-            this.interval = setInterval(this.updateTimestamp, 1);
+            this.interval = setInterval(this.updateComputed, 1);
         },
         unmounted() {
             clearInterval(this.interval);

src/components/AppManual.vue

@@ -1,79 +1,167 @@
 <template>
     <div class="content-item app-manual">
-        <fieldset class="manual-form">
-            <label class="manual-form__input">
-                <span>Start Delay (ms)</span>
-                <input v-model="startDelay"
-                       type="number" placeholder="Start Delay"
-                       min="0" max="1000" step="25" required />
-            </label>
-            <label class="manual-form__input">
-                <span>Duration (ms)</span>
-                <input v-model="duration"
-                       type="number" placeholder="Duration"
-                       min="0" max="1000" step="25" required />
-            </label>
-            <label class="manual-form__input">
-                <span>Weak Magnitude</span>
-                <input v-model="weakMagnitude"
-                       type="range" placeholder="Weak Magnitude"
-                       min="0.0" max="1.0" step="0.01" required />
-            </label>
-            <label class="manual-form__input">
-                <span>Strong Magnitude</span>
-                <input v-model="strongMagnitude"
-                       type="range" placeholder="Strong Magnitude"
-                       min="0.0" max="1.0" step="0.01" required />
-            </label>
-            <div class="manual-form__buttons">
-                <button @click="start" class="manual-form__button">Start</button>
-                <button @click="stop" class="manual-form__button">Stop</button>
+        <label class="manual-form__input">
+            <span>Weak Magnitude</span>
+            <input v-model="weakMagnitude"
+                   type="range" required disabled
+                   min="0.0" max="1.0" step="0.01" />
+        </label>
+        <label class="manual-form__input">
+            <span>Strong Magnitude</span>
+            <input v-model="strongMagnitude"
+                   type="range" required disabled
+                   min="0.0" max="1.0" step="0.01" />
+        </label>
+        <div class="manual-controls">
+            <div>
+                <kbd>RT</kbd>
+                <span> – Vibrate</span>
             </div>
-        </fieldset>
+            <div>
+                <kbd>A</kbd>
+                <span> – Light Mode</span>
+            </div>
+            <div>
+                <kbd>X</kbd>
+                <span> – Heavy Mode</span>
+            </div>
+            <div>
+                <kbd>Y</kbd>
+                <span> – Combined Mode</span>
+            </div>
+            <div>
+                <kbd>B</kbd>
+                <span> – Lock</span>
+            </div>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
     import { defineComponent } from 'vue';
     import store from '@/store/index';
+    import Vibrator from '@/models/Vibrator';
     import TPatternUnit from '@/models/TPatternUnit';
 
     export default defineComponent({
-        name: 'AppManual',
+        name: 'AppCustom',
         data: () => {
             return {
-                startDelay: 250 as number,
-                duration: 250 as number,
-                weakMagnitude: 1 as number,
-                strongMagnitude: 1 as number,
+                startDelay: 0 as number,
+                duration: 260 as number,
+                weakMagnitude: 0 as number,
+                strongMagnitude: 0 as number,
+                timestamp: 0 as number,
+                interval: 0 as number,
+                mode: 0 as number,
+                lock: false as boolean,
             };
         },
+        computed: {
+            gamepads: function (): Vibrator[] {
+                const timestamp: number = this.timestamp;
+                const result: Vibrator[] = store.getters.gamepads as Vibrator[];
+                result.forEach((item) => {
+                    item.interval = timestamp;
+                })
+                return result;
+            },
+        },
         methods: {
-            createPatternUnit: function (): TPatternUnit[] {
-                const patternUnit: TPatternUnit[] = [{
+            createPatternUnit: function (): TPatternUnit {
+                const patternUnit: TPatternUnit = {
                     startDelay: this.startDelay,
                     duration: this.duration,
                     weakMagnitude: this.weakMagnitude,
                     strongMagnitude: this.strongMagnitude,
-                }];
-                return patternUnit as TPatternUnit[];
+                };
+                return patternUnit as TPatternUnit;
             },
             start: function (): void {
                 store.dispatch('startCustom', this.createPatternUnit());
             },
             stop: function (): void {
+                store.dispatch('setIsActive', false);
+                store.dispatch('setMode', 0);
                 store.dispatch('reset');
             },
+            eventLoop: function (): void {
+                this.updateComputed();
+                this.updateMode();
+                this.updatePattern();
+                this.handle();
+            },
+            updateComputed: function (): void {
+                this.timestamp = Date.now();
+            },
+            updateMode: function (): void {
+                if (this.gamepads.length > 0) {
+                    if (this.gamepads[0].unit.buttons[1].pressed === true) {
+                        this.lock = !this.lock;
+                        console.log('B', this.lock);
+                    }
+                    if (this.lock === false) {
+                        if (this.gamepads[0].unit.buttons[0].pressed === true) {
+                            this.mode = 0;
+                            console.log('A', this.mode);
+                        }
+                        if (this.gamepads[0].unit.buttons[2].pressed === true) {
+                            this.mode = 1;
+                            console.log('X', this.mode);
+                        }
+                        if (this.gamepads[0].unit.buttons[3].pressed === true) {
+                            this.mode = 2;
+                            console.log('Y', this.mode);
+                        }
+                    }
+                }
+            },
+            updatePattern: function (): void {
+                if (this.gamepads.length > 0) {
+                    if (this.lock === false) {
+                        if (this.mode === 0) {
+                            this.weakMagnitude = this.gamepads[0].unit.buttons[7].value;
+                            this.strongMagnitude = this.gamepads[0].unit.buttons[7].value;
+                        }
+                        if (this.mode === 1) {
+                            this.weakMagnitude = 0;
+                            this.strongMagnitude = this.gamepads[0].unit.buttons[7].value;
+                        }
+                        if (this.mode === 2) {
+                            this.weakMagnitude = this.gamepads[0].unit.buttons[7].value;
+                            this.strongMagnitude = 0;
+                        }
+                    }
+                }
+            },
+            handle: function (): void {
+                if (this.gamepads.length > 0) {
+                    this.gamepads.forEach((gamepad) => {
+                        if (gamepad.unit.buttons[7].value > 0
+                            || this.lock === true) {
+                            gamepad.unit.vibrationActuator.playEffect('dual-rumble', this.createPatternUnit());
+                        } else {
+                            this.stop();
+                        }
+                    });
+                }
+            },
+        },
+        mounted() {
+            this.interval = setInterval(this.eventLoop, 250);
+        },
+        unmounted() {
+            clearInterval(this.interval);
         },
     });
 </script>
 
 <style lang="scss">
-    .manual-form {
+    .app-manual {
         display: flex;
-        flex-direction: column-reverse;
+        flex-direction: column;
         justify-content: space-between;
-        gap: 16px;
+        gap: 32px;
     }
 
     .manual-form__input {
@@ -82,28 +170,24 @@
         align-items: center;
     }
 
-    .manual-form__buttons {
+    .manual-controls {
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
         justify-content: space-between;
-        gap: 32px;
-    }
-
-    .manual-form__button {
-        width: 100%;
+        align-self: center;
     }
 
     @media only screen and (min-width: 540px) {
-        .manual-form {
-            display: flex;
-            flex-direction: column;
-            gap: 32px;
-        }
-
         .manual-form__input {
             display: grid;
             grid-template-columns: 1fr 1fr;
         }
+
+        .manual-controls {
+            display: flex;
+            flex-direction: row;
+            align-self: stretch;
+        }
     }
 </style>
 

src/components/NavigationList.vue

@@ -1,7 +1,8 @@
 <template>
     <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="/custom" class="navigation-item">Custom</router-link>
+        <router-link to="/manual" class="navigation-item">Manual</router-link>
         <router-link to="/diagnostic" class="navigation-item">Diagnostic</router-link>
     </div>
 </template>

src/router/index.ts

@@ -7,6 +7,11 @@ const routes: Array<RouteRecordRaw> = [
         name: 'patterns-view',
         component: PatternsView,
     },
+    {
+        path: '/custom',
+        name: 'custom-view',
+        component: () => import('@/views/CustomView.vue'),
+    },
     {
         path: '/manual',
         name: 'manual-view',

src/views/CustomView.vue

@@ -0,0 +1,16 @@
+<template>
+    <AppCustom />
+</template>
+
+<script lang="ts">
+    import { defineComponent } from 'vue';
+    import AppCustom from '@/components/AppCustom.vue';
+
+    export default defineComponent({
+        name: 'CustomView',
+        components: {
+            AppCustom: AppCustom,
+        },
+    });
+</script>
+