Release 1.14.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavelovers",
-  "version": "1.13.0",
+  "version": "1.14.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",

src/App.vue

@@ -1,14 +1,15 @@
 <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';
+import { useLayouts } from '@/composables/useLayouts';
+import { useGamepadsStore } from '@/store/useGamepadsStore';
 
 defineComponent({
   name: 'App',
 });
 
-const { addGamepad, deleteGamepad } = useGamepads();
+const { layout } = useLayouts();
+const { addGamepad, deleteGamepad } = useGamepadsStore();
 
 /**
  * Добавить слушатели событий.
@@ -31,7 +32,7 @@ onUnmounted(() => removeEventListeners());
 </script>
 
 <template>
-  <LDefault>
+  <Component :is="layout">
     <RouterView />
-  </LDefault>
+  </Component>
 </template>

src/components/organisms/OCustom.vue

@@ -1,17 +1,12 @@
 <script setup lang="ts">
 import { defineComponent, ref } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useGamepads } from '@/store/useGamepads';
-import { AMessage } from '@/components/atoms';
-import { MToolsNav, MGamepadList } from '@/components/molecules';
+import { useGamepadsStore } from '@/store/useGamepadsStore';
 
 defineComponent({
   name: 'OCustom',
 });
 
-const store = useGamepads();
-const { gamepads } = storeToRefs(store);
-const { reset, loop } = store;
+const { reset, loop } = useGamepadsStore();
 
 /**
  * Пауза перед стартом вибрации.
@@ -52,8 +47,6 @@ function start(): void {
 </script>
 
 <template>
-  <MToolsNav />
-
   <div class="content-item app-custom">
     <fieldset class="custom-form">
       <label class="custom-form__input">
@@ -94,9 +87,6 @@ function start(): void {
       </div>
     </fieldset>
   </div>
-
-  <MGamepadList v-if="gamepads.length" :gamepads="gamepads" />
-  <AMessage v-else>Press any gamepad button or connect a new gamepad to vibrate.</AMessage>
 </template>
 
 <style lang="scss">

src/components/organisms/ODiagnostic.vue

@@ -1,21 +1,18 @@
 <script setup lang="ts">
 import { defineComponent } from 'vue';
 import { storeToRefs } from 'pinia';
-import { useGamepads } from '@/store/useGamepads';
-import { AMessage } from '@/components/atoms';
-import { MToolsNav, MGamepadList, MDiagnosticItem } from '@/components/molecules';
+import { useGamepadsStore } from '@/store/useGamepadsStore';
+import { MDiagnosticItem } from '@/components/molecules';
 
 defineComponent({
   name: 'ODiagnostic',
 });
 
-const store = useGamepads();
+const store = useGamepadsStore();
 const { gamepads, timestamp } = storeToRefs(store);
 </script>
 
 <template>
-  <MToolsNav />
-
   <div v-if="gamepads.length" class="content-item">
     <MDiagnosticItem
       v-for="gamepad in gamepads"
@@ -24,7 +21,4 @@ const { gamepads, timestamp } = storeToRefs(store);
       :timestamp="timestamp"
     />
   </div>
-
-  <MGamepadList v-if="gamepads.length" :gamepads="gamepads" />
-  <AMessage v-else>Press any gamepad button or connect a new gamepad to vibrate.</AMessage>
 </template>

src/components/organisms/OManual.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
 import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
 import { storeToRefs } from 'pinia';
-import { useGamepads } from '@/store/useGamepads';
-import { AMessage } from '@/components/atoms';
-import { MToolsNav, MGamepadList } from '@/components/molecules';
+import { useGamepadsStore } from '@/store/useGamepadsStore';
 
 import type { TVibrator } from '@/models';
 
 defineComponent({
   name: 'OManual',
 });
 
-const store = useGamepads();
+const store = useGamepadsStore();
 const { gamepads, isActive, patternMode } = storeToRefs(store);
 const { vibrate, reset } = store;
 
@@ -156,8 +154,6 @@ onUnmounted(() => clearInterval(interval.value));
 </script>
 
 <template>
-  <MToolsNav />
-
   <div class="content-item app-manual">
     <label class="manual-form__input">
       <span>Weak Magnitude</span>
@@ -206,9 +202,6 @@ onUnmounted(() => clearInterval(interval.value));
       </div>
     </div>
   </div>
-
-  <MGamepadList v-if="gamepads.length" :gamepads="gamepads" />
-  <AMessage v-else>Press any gamepad button or connect a new gamepad to vibrate.</AMessage>
 </template>
 
 <style lang="scss">

src/components/organisms/OPatterns.vue

@@ -1,22 +1,20 @@
 <script setup lang="ts">
 import { defineComponent } from 'vue';
 import { storeToRefs } from 'pinia';
-import { useGamepads } from '@/store/useGamepads';
+import { useGamepadsStore } from '@/store/useGamepadsStore';
 import { AMessage } from '@/components/atoms';
-import { MToolsNav, MGamepadList, MPatternList } from '@/components/molecules';
+import { MPatternList } from '@/components/molecules';
 
 defineComponent({
   name: 'OPatterns',
 });
 
-const store = useGamepads();
-const { gamepads, patternMode, isActive } = storeToRefs(store);
+const store = useGamepadsStore();
+const { patternMode, isActive } = storeToRefs(store);
 const { change, patterns } = store;
 </script>
 
 <template>
-  <MToolsNav />
-
   <div class="app-patterns">
     <MPatternList
       v-if="patterns.length"
@@ -27,7 +25,4 @@ const { change, patterns } = store;
     />
     <AMessage v-else>Loading...</AMessage>
   </div>
-
-  <MGamepadList v-if="gamepads.length" :gamepads="gamepads" />
-  <AMessage v-else>Press any gamepad button or connect a new gamepad to vibrate.</AMessage>
 </template>

src/composables/useLayouts.ts

@@ -0,0 +1,49 @@
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import LDefault from '@/layouts/LDefault.vue';
+import LGamepad from '@/layouts/LGamepad.vue';
+
+import type { Component } from 'vue';
+
+/**
+ * Лейауты.
+ */
+type Layouts = {
+  [index: string]: Component;
+};
+
+/**
+ * Результат работы композабла лейатов.
+ */
+type LayoutsComposable = {
+  layout: Component;
+};
+
+/**
+ * Лейауты.
+ */
+const layouts: Layouts = {
+  DEFAULT: LDefault,
+  GAMEPAD: LGamepad,
+};
+
+/**
+ * Композабл для получения соответствующего лейаута маршруту.
+ *
+ * @returns Лейаут.
+ */
+export function useLayouts(): LayoutsComposable {
+  const route = useRoute();
+
+  const layout = computed<Component>(() => {
+    const routeLayout = route?.meta?.layout;
+
+    return routeLayout && typeof routeLayout === 'string' ? layouts[routeLayout] : layouts.DEFAULT;
+  });
+
+  return {
+    layout,
+  };
+}
+
+export default useLayouts;

src/layouts/LGamepad.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useGamepadsStore } from '@/store/useGamepadsStore';
+import { AMessage } from '@/components/atoms';
+import { MHeader, MFooter, MToolsNav, MGamepadList } from '@/components/molecules';
+
+defineComponent({
+  name: 'LGamepad',
+});
+
+const store = useGamepadsStore();
+const { gamepads } = storeToRefs(store);
+</script>
+
+<template>
+  <MHeader />
+
+  <main class="page container">
+    <div class="wavelovers">
+      <MToolsNav />
+      <slot name="default" />
+
+      <MGamepadList v-if="gamepads.length" :gamepads="gamepads" />
+      <AMessage v-else>Press any gamepad button or connect a new gamepad to vibrate.</AMessage>
+    </div>
+  </main>
+
+  <MFooter />
+</template>
+
+<style lang="scss">
+.page {
+  flex-grow: 1;
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+
+@media only screen and (min-width: 540px) {
+  .page {
+    margin-top: 64px;
+    margin-bottom: 64px;
+  }
+}
+</style>

src/router/assets/routes.ts

@@ -5,21 +5,33 @@ const routes: Array<RouteRecordRaw> = [
     path: '/',
     name: 'patterns-view',
     component: () => import('@/views/PatternsView.vue'),
+    meta: {
+      layout: 'GAMEPAD',
+    },
   },
   {
     path: '/custom',
     name: 'custom-view',
     component: () => import('@/views/CustomView.vue'),
+    meta: {
+      layout: 'GAMEPAD',
+    },
   },
   {
     path: '/manual',
     name: 'manual-view',
     component: () => import('@/views/ManualView.vue'),
+    meta: {
+      layout: 'GAMEPAD',
+    },
   },
   {
     path: '/diagnostic',
     name: 'diagnostic-view',
     component: () => import('@/views/DiagnosticView.vue'),
+    meta: {
+      layout: 'GAMEPAD',
+    },
   },
   {
     path: '/faq',

src/store/useGamepads.ts → src/store/useGamepadsStore.ts

@@ -8,7 +8,7 @@ import type { TVibrator } from '@/models';
 /**
  * Стор геймпадов.
  */
-export const useGamepads = defineStore('gamepads', () => {
+export const useGamepadsStore = defineStore('gamepads', () => {
   /**
    * Номер шаблона вибрации.
    */
@@ -148,3 +148,5 @@ export const useGamepads = defineStore('gamepads', () => {
     deleteGamepad,
   };
 });
+
+export default useGamepadsStore;