Merge pull request #52 from eugene-serb/dev

Release 1.13.0

package.json

@@ -1,10 +1,11 @@
 {
   "name": "wavelovers",
-  "version": "1.12.0",
+  "version": "1.13.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",
     "gamepad-vibrator",
+    "gamepad-vibrating-massager",
     "gamepad-vibration-test-tool",
     "gamepad-tester",
     "gamepad-test-tool"
@@ -40,7 +41,7 @@
   },
   "dependencies": {
     "pinia": "^2.1.7",
-    "vue": "^3.3.11",
+    "vue": "^3.3.13",
     "vue-meta-tag-updater": "^1.1.0",
     "vue-router": "^4.2.5"
   },

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-23</lastmod>
+    <lastmod>2023-12-24</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://wavelovers.ru/custom</loc>
-    <lastmod>2023-12-23</lastmod>
+    <lastmod>2023-12-24</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://wavelovers.ru/manual</loc>
-    <lastmod>2023-12-23</lastmod>
+    <lastmod>2023-12-24</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://wavelovers.ru/diagnostic</loc>
-    <lastmod>2023-12-23</lastmod>
+    <lastmod>2023-12-24</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://wavelovers.ru/faq</loc>
-    <lastmod>2023-12-23</lastmod>
+    <lastmod>2023-12-24</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://wavelovers.ru/about</loc>
-    <lastmod>2023-12-23</lastmod>
+    <lastmod>2023-12-24</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://wavelovers.ru/donate</loc>
-    <lastmod>2023-12-23</lastmod>
+    <lastmod>2023-12-24</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-23</lastmod>
+    <lastmod>2023-12-24</lastmod>
   </sitemap>
 </sitemapindex>

src/App.vue

@@ -1,40 +1,33 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { defineComponent, onMounted, onUnmounted } from 'vue';
 import { RouterView } from 'vue-router';
 import { useGamepads } from '@/store/useGamepads';
 import LDefault from '@/layouts/LDefault.vue';
 
-export default defineComponent({
+defineComponent({
   name: 'App',
-  components: {
-    LDefault,
-    RouterView,
-  },
-  setup() {
-    const { addGamepad, deleteGamepad } = useGamepads();
-
-    return {
-      addGamepad,
-      deleteGamepad,
-    };
-  },
-  methods: {
-    addEventListeners: function (): void {
-      window.addEventListener('gamepadconnected', this.addGamepad);
-      window.addEventListener('gamepaddisconnected', this.deleteGamepad);
-    },
-    removeEventListeners: function (): void {
-      window.removeEventListener('gamepadconnected', this.addGamepad);
-      window.removeEventListener('gamepaddisconnected', this.deleteGamepad);
-    },
-  },
-  mounted() {
-    this.addEventListeners();
-  },
-  unmounted() {
-    this.removeEventListeners();
-  },
 });
+
+const { addGamepad, deleteGamepad } = useGamepads();
+
+/**
+ * Добавить слушатели событий.
+ */
+function addEventListeners(): void {
+  window.addEventListener('gamepadconnected', addGamepad);
+  window.addEventListener('gamepaddisconnected', deleteGamepad);
+}
+
+/**
+ * Убрать слушатели событий.
+ */
+function removeEventListeners(): void {
+  window.removeEventListener('gamepadconnected', addGamepad);
+  window.removeEventListener('gamepaddisconnected', deleteGamepad);
+}
+
+onMounted(() => addEventListeners());
+onUnmounted(() => removeEventListeners());
 </script>
 
 <template>

src/components/atoms/AGamepad.vue

@@ -1,7 +1,7 @@
-<script lang="ts">
+<script setup lang="ts">
 import { defineComponent } from 'vue';
 
-export default defineComponent({
+defineComponent({
   name: 'AGamepad',
 });
 </script>

src/components/atoms/AMessage.vue

@@ -1,7 +1,7 @@
-<script lang="ts">
+<script setup lang="ts">
 import { defineComponent } from 'vue';
 
-export default defineComponent({
+defineComponent({
   name: 'AMessage',
 });
 </script>

src/components/molecules/MDiagnosticItem.vue

@@ -1,20 +1,30 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { defineComponent, defineProps } from 'vue';
 
 import type { PropType } from 'vue';
 import type { TVibrator } from '@/models';
 
-export default defineComponent({
+defineComponent({
   name: 'MDiagnosticItem',
-  props: {
-    gamepad: {
-      type: Object as PropType<TVibrator>,
-      required: true,
-    },
-    timestamp: {
-      type: Number,
-      required: true,
-    },
+});
+
+defineProps({
+  /**
+   * Геймпад.
+   */
+  gamepad: {
+    type: Object as PropType<TVibrator>,
+    required: true,
+  },
+  /**
+   * Временная метка.
+   *
+   * @description Нужна для обновления состояния геймпадов и компонента,
+   * т.к. сами они это не делают.
+   */
+  timestamp: {
+    type: Number,
+    required: true,
   },
 });
 </script>

src/components/molecules/MFooter.vue

@@ -1,7 +1,7 @@
-<script lang="ts">
+<script setup lang="ts">
 import { defineComponent } from 'vue';
 
-export default defineComponent({
+defineComponent({
   name: 'MFooter',
 });
 </script>

src/components/molecules/MGamepadList.vue

@@ -1,20 +1,21 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { defineComponent, defineProps } from 'vue';
 import { AGamepad } from '@/components/atoms';
 
 import type { PropType } from 'vue';
 import type { TVibrator } from '@/models';
 
-export default defineComponent({
+defineComponent({
   name: 'MGamepadList',
-  components: {
-    AGamepad,
-  },
-  props: {
-    gamepads: {
-      type: Array as PropType<TVibrator[]>,
-      required: true,
-    },
+});
+
+defineProps({
+  /**
+   * Все геймпады.
+   */
+  gamepads: {
+    type: Array as PropType<TVibrator[]>,
+    required: true,
   },
 });
 </script>

src/components/molecules/MHeader.vue

@@ -1,12 +1,9 @@
-<script lang="ts">
+<script setup lang="ts">
 import { defineComponent } from 'vue';
 import { RouterLink } from 'vue-router';
 
-export default defineComponent({
+defineComponent({
   name: 'MHeader',
-  components: {
-    RouterLink,
-  },
 });
 </script>
 

src/components/molecules/MPattern.vue

@@ -1,47 +1,70 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { defineComponent, defineProps, defineEmits, computed } from 'vue';
 
 import type { PropType } from 'vue';
 import type { TPattern } from '@/models';
 
-export default defineComponent({
+defineComponent({
   name: 'MPattern',
-  props: {
-    pattern: {
-      type: Object as PropType<TPattern>,
-      required: true,
-    },
-    index: {
-      type: Number,
-      required: true,
-    },
-    mode: {
-      type: Number,
-      required: true,
-    },
-    isActive: {
-      type: Boolean,
-      required: true,
-    },
+});
+
+const props = defineProps({
+  /**
+   * Шаблон вибрации.
+   */
+  pattern: {
+    type: Object as PropType<TPattern>,
+    required: true,
+  },
+  /**
+   * Текущая вибрация.
+   */
+  mode: {
+    type: Number,
+    required: true,
   },
-  emits: {
-    change(index: number): boolean {
-      return index >= 0;
-    },
+  /**
+   * Включена ли вибрация сейчас?
+   */
+  isActive: {
+    type: Boolean,
+    required: true,
   },
-  methods: {
-    change: function (index: number): void {
-      this.$emit('change', index);
-    },
+  /**
+   * Индекс шаблона.
+   */
+  index: {
+    type: Number,
+    required: true,
   },
 });
+
+const emits = defineEmits({
+  click(index: number): boolean {
+    return index >= 0;
+  },
+});
+
+/**
+ * Отражает состояние, выбран ли шаблон или нет.
+ */
+const isSelected = computed<boolean>(() => props.index === props.mode && props.isActive);
+
+/**
+ * Событие выполняемое при клике кнопки мыши.
+ *
+ * @param index Индекс элемента.
+ */
+function onClick(index: number): void {
+  emits('click', index);
+}
 </script>
 
 <template>
   <div
-    @click="change(index)"
     class="pattern-item"
-    :class="index === mode && isActive ? 'pattern-item_selected' : ''"
+    :class="{ 'pattern-item_selected': isSelected }"
+    @click="onClick(index)"
   >
     <span class="pattern-item__icon">{{ pattern.icon }}</span>
     <div class="pattern-item__info-container">