Release 1.12.0

.gitignore

@@ -27,3 +27,5 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+*.tsbuildinfo

README.md

@@ -15,7 +15,7 @@ This is Wavelovers, a gamepad vibration test tool that can also turn a gamepad i
 ![](https://img.shields.io/badge/TypeScript-informational?style=flat-square&logo=typescript&logoColor=FFFFFF&color=007ACC)
 ![](https://img.shields.io/badge/Vue.js-informational?style=flat-square&logo=vue.js&logoColor=FFFFFF&color=42B983)
 ![](https://img.shields.io/badge/Vue%20Router-informational?style=flat-square&logo=vue.js&logoColor=FFFFFF&color=42B983)
-![](https://img.shields.io/badge/Vuex-informational?style=flat-square&logo=vue.js&logoColor=FFFFFF&color=42B983)
+![](https://img.shields.io/badge/🍍-Pinia-informational?style=flat-square&logo=pinia&logoColor=FFFFFF&color=42B983&labelColor=42B983)
 ![](https://img.shields.io/badge/Vite-informational?style=flat-square&logo=vite&logoColor=FFFFFF&color=42B983)
 ![](https://img.shields.io/badge/Vitest-informational?style=flat-square&logo=vitest&logoColor=FFFFFF&color=42B983)
 ![](https://img.shields.io/badge/Node.JS-informational?style=flat-square&logo=node.js&logoColor=FFFFFF&color=3C873A)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavelovers",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "description": "Wavelovers is a tool that can turn your gamepad into a vibration massager or simply a gamepad vibration and buttons test tool.",
   "keywords": [
     "wavelovers",
@@ -39,13 +39,13 @@
     "test:unit": "vitest"
   },
   "dependencies": {
+    "pinia": "^2.1.7",
     "vue": "^3.3.11",
     "vue-meta-tag-updater": "^1.1.0",
-    "vue-router": "^4.2.5",
-    "vuex": "^4.1.0"
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.6.0",
+    "@rushstack/eslint-patch": "^1.6.1",
     "@tsconfig/node18": "^18.2.2",
     "@types/jsdom": "^21.1.6",
     "@types/node": "^18.19.3",
@@ -54,16 +54,16 @@
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.3",
-    "@vue/tsconfig": "^0.4.0",
-    "eslint": "^8.55.0",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^8.56.0",
     "eslint-plugin-vue": "^9.19.2",
-    "jsdom": "^22.1.0",
+    "jsdom": "^23.0.1",
     "npm-run-all2": "^6.1.1",
-    "prettier": "^3.1.0",
+    "prettier": "^3.1.1",
     "sass": "^1.69.5",
-    "typescript": "~5.2.0",
-    "vite": "^4.5.1",
-    "vitest": "^0.34.6",
-    "vue-tsc": "^1.8.25"
+    "typescript": "~5.3.0",
+    "vite": "^5.0.10",
+    "vitest": "^1.1.0",
+    "vue-tsc": "^1.8.26"
   }
 }

public/sitemap-internal.xml

@@ -2,43 +2,43 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://wavelovers.ru/</loc>
-    <lastmod>2023-12-10</lastmod>
+    <lastmod>2023-12-23</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://wavelovers.ru/custom</loc>
-    <lastmod>2023-12-10</lastmod>
+    <lastmod>2023-12-23</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://wavelovers.ru/manual</loc>
-    <lastmod>2023-12-10</lastmod>
+    <lastmod>2023-12-23</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://wavelovers.ru/diagnostic</loc>
-    <lastmod>2023-12-10</lastmod>
+    <lastmod>2023-12-23</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://wavelovers.ru/faq</loc>
-    <lastmod>2023-12-10</lastmod>
+    <lastmod>2023-12-23</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://wavelovers.ru/about</loc>
-    <lastmod>2023-12-10</lastmod>
+    <lastmod>2023-12-23</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://wavelovers.ru/donate</loc>
-    <lastmod>2023-12-10</lastmod>
+    <lastmod>2023-12-23</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>

public/sitemap.xml

@@ -2,6 +2,6 @@
 <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <sitemap>
     <loc>https://wavelovers.ru/sitemap-internal.xml</loc>
-    <lastmod>2023-12-10</lastmod>
+    <lastmod>2023-12-23</lastmod>
   </sitemap>
 </sitemapindex>

src/App.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { RouterView } from 'vue-router';
-import store from '@/store/index';
+import { useGamepads } from '@/store/useGamepads';
 import LDefault from '@/layouts/LDefault.vue';
 
 export default defineComponent({
@@ -10,13 +10,15 @@ export default defineComponent({
     LDefault,
     RouterView,
   },
+  setup() {
+    const { addGamepad, deleteGamepad } = useGamepads();
+
+    return {
+      addGamepad,
+      deleteGamepad,
+    };
+  },
   methods: {
-    addGamepad: function (event: GamepadEvent): void {
-      store.dispatch('addGamepad', event);
-    },
-    deleteGamepad: function (event: GamepadEvent): void {
-      store.dispatch('deleteGamepad', event);
-    },
     addEventListeners: function (): void {
       window.addEventListener('gamepadconnected', this.addGamepad);
       window.addEventListener('gamepaddisconnected', this.deleteGamepad);

src/components/molecules/MPattern.vue

@@ -41,7 +41,7 @@ export default defineComponent({
   <div
     @click="change(index)"
     class="pattern-item"
-    :class="index === mode && isActive === true ? 'pattern-item_selected' : ''"
+    :class="index === mode && isActive ? 'pattern-item_selected' : ''"
   >
     <span class="pattern-item__icon">{{ pattern.icon }}</span>
     <div class="pattern-item__info-container">

src/components/organisms/OCustom.vue

@@ -1,18 +1,25 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import store from '@/store/index';
+import { storeToRefs } from 'pinia';
+import { useGamepads } from '@/store/useGamepads';
 import { AMessage } from '@/components/atoms';
 import { MToolsNav, MGamepadList } from '@/components/molecules';
 
-import type { TVibrator } from '@/models';
-
 export default defineComponent({
   name: 'OCustom',
   components: {
     AMessage,
     MToolsNav,
     MGamepadList,
   },
+  setup() {
+    const store = useGamepads();
+
+    const { reset, loop } = store;
+    const { gamepads } = storeToRefs(store);
+
+    return { gamepads, reset, loop };
+  },
   data: () => {
     return {
       startDelay: 250,
@@ -21,11 +28,6 @@ export default defineComponent({
       strongMagnitude: 1,
     };
   },
-  computed: {
-    gamepads: function (): TVibrator[] {
-      return store.getters.gamepads;
-    },
-  },
   methods: {
     start: function (): void {
       const patterns: GamepadEffectParameters[] = [
@@ -37,10 +39,11 @@ export default defineComponent({
         },
       ];
 
-      store.dispatch('startCustom', patterns);
+      this.reset();
+      this.loop(patterns);
     },
     stop: function (): void {
-      store.dispatch('reset');
+      this.reset();
     },
   },
 });

src/components/organisms/OManual.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import store from '@/store/index';
+import { storeToRefs } from 'pinia';
+import { useGamepads } from '@/store/useGamepads';
 import { AMessage } from '@/components/atoms';
 import { MToolsNav, MGamepadList } from '@/components/molecules';
 import ComputedGamepads from '@/mixins/ComputedGamepads.vue';
@@ -15,6 +16,14 @@ export default defineComponent({
     MToolsNav,
     MGamepadList,
   },
+  setup() {
+    const store = useGamepads();
+
+    const { isActive, mode: patternMode } = storeToRefs(store);
+    const { vibrate, reset } = store;
+
+    return { isActive, patternMode, vibrate, reset };
+  },
   data: () => {
     return {
       mode: 0,
@@ -34,12 +43,12 @@ export default defineComponent({
         strongMagnitude: this.strongMagnitude,
       };
 
-      store.dispatch('vibrate', pattern);
+      this.vibrate(pattern);
     },
     stop: function (): void {
-      store.dispatch('setIsActive', false);
-      store.dispatch('setMode', 0);
-      store.dispatch('reset');
+      this.reset();
+      this.isActive = false;
+      this.patternMode = 0;
     },
     eventLoop: function (): void {
       this.updateComputed();
@@ -48,12 +57,12 @@ export default defineComponent({
       this.handle();
     },
     updateMode: function (): void {
-      if (this.gamepads.length > 0) {
+      if (this.gamepads.length) {
         if (this.gamepads[0].device.buttons[1].pressed) {
           this.lock = !this.lock;
         }
 
-        if (this.lock === false) {
+        if (!this.lock) {
           if (this.gamepads[0].device.buttons[0].pressed) {
             this.mode = 0;
           }
@@ -69,8 +78,8 @@ export default defineComponent({
       }
     },
     updatePattern: function (): void {
-      if (this.gamepads.length > 0) {
-        if (this.lock === false) {
+      if (this.gamepads.length) {
+        if (!this.lock) {
           if (this.mode === 0) {
             this.weakMagnitude = this.gamepads[0].device.buttons[7].value;
             this.strongMagnitude = this.gamepads[0].device.buttons[7].value;
@@ -89,9 +98,9 @@ export default defineComponent({
       }
     },
     handle: function (): void {
-      if (this.gamepads.length > 0) {
+      if (this.gamepads.length) {
         this.gamepads.forEach((gamepad: TVibrator) => {
-          if (gamepad.device.buttons[7].value > 0 || this.lock) {
+          if (gamepad.device.buttons[7].value || this.lock) {
             this.start();
           } else {
             this.stop();

src/components/organisms/OPatterns.vue

@@ -1,11 +1,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import store from '@/store/index';
+import { storeToRefs } from 'pinia';
+import { useGamepads } from '@/store/useGamepads';
 import { AMessage } from '@/components/atoms';
 import { MToolsNav, MGamepadList, MPatternList } from '@/components/molecules';
 
-import type { TPattern, TVibrator } from '@/models';
-
 export default defineComponent({
   name: 'OPatterns',
   components: {
@@ -14,23 +13,23 @@ export default defineComponent({
     MPatternList,
     MGamepadList,
   },
-  computed: {
-    gamepads: function (): TVibrator[] {
-      return store.getters.gamepads;
-    },
-    patterns: function (): TPattern[] {
-      return store.getters.patterns;
-    },
-    mode: function (): number {
-      return store.getters.mode;
-    },
-    isActive: function (): boolean {
-      return store.getters.isActive;
-    },
+  setup() {
+    const store = useGamepads();
+
+    const { gamepads, mode, isActive } = storeToRefs(store);
+    const { change: changeMode, patterns } = store;
+
+    return {
+      mode,
+      gamepads,
+      patterns,
+      isActive,
+      changeMode,
+    };
   },
   methods: {
     change(index: number): void {
-      store.dispatch('change', index);
+      this.changeMode(index);
     },
   },
 });
@@ -41,7 +40,7 @@ export default defineComponent({
 
   <div class="app-patterns">
     <MPatternList
-      v-if="patterns.length > 0"
+      v-if="patterns.length"
       :patterns="patterns"
       :mode="mode"
       :isActive="isActive"

src/main.ts

@@ -1,14 +1,14 @@
-import './assets/css/index.css';
+import '@/assets/css/index.css';
 
 import { createApp } from 'vue';
+import { createPinia } from 'pinia';
 
 import App from '@/App.vue';
-import store from '@/store';
 import router from '@/router';
 
 const app = createApp(App);
 
-app.use(store);
+app.use(createPinia());
 app.use(router);
 
 app.mount('#app');

src/mixins/ComputedGamepads.vue

@@ -1,9 +1,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import store from '@/store/index';
+import { useGamepads } from '@/store/useGamepads';
 
 import type { TVibrator } from '@/models';
 
+const { gamepads: storeGamepads } = useGamepads();
+
 export default defineComponent({
   name: 'ComputedGamepads',
   data: () => {
@@ -15,7 +17,7 @@ export default defineComponent({
   computed: {
     gamepads: function (): TVibrator[] {
       const timestamp: number = this.timestamp;
-      const gamepads: TVibrator[] = store.getters.gamepads;
+      const gamepads: TVibrator[] = storeGamepads;
 
       gamepads.forEach((gamepad) => {
         gamepad.interval = timestamp;