From f763c1f301b57dc319a9c79eb6c08bb8b9cca84c Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sat, 16 Dec 2023 15:15:24 +0300
Subject: [PATCH] added mixin for mobile check

---
 .../HeaderMobileComponent.vue                   |  2 +-
 .../adaptive-components/MenuMobileComponent.vue | 10 +++++-----
 luckydiamond/src/main.js                        |  2 ++
 luckydiamond/src/mixins/mixin.js                | 13 +++++++++++++
 luckydiamond/src/pages/HomePage.vue             | 17 ++++++++---------
 luckydiamond/src/pages/ProfilePage.vue          | 15 +++++++++++++--
 6 files changed, 42 insertions(+), 17 deletions(-)
 create mode 100644 luckydiamond/src/mixins/mixin.js

diff --git a/luckydiamond/src/components/adaptive-components/HeaderMobileComponent.vue b/luckydiamond/src/components/adaptive-components/HeaderMobileComponent.vue
index 9ba2ed6..f47145e 100644
--- a/luckydiamond/src/components/adaptive-components/HeaderMobileComponent.vue
+++ b/luckydiamond/src/components/adaptive-components/HeaderMobileComponent.vue
@@ -11,7 +11,7 @@
               <h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
             </div>
             <div class="header-mobile__btn--balance btn-card btn-card__margin">
-              <img src="@/assets/icons-adaptive/home-adaptive/icon-wallet.svg">
+              <a href="#" @click="$router.push({ name: 'profile' })"><img src="@/assets/icons-adaptive/home-adaptive/icon-wallet.svg"></a>
             </div>
           </div>
         </div>
diff --git a/luckydiamond/src/components/adaptive-components/MenuMobileComponent.vue b/luckydiamond/src/components/adaptive-components/MenuMobileComponent.vue
index b086aa6..b6f7687 100644
--- a/luckydiamond/src/components/adaptive-components/MenuMobileComponent.vue
+++ b/luckydiamond/src/components/adaptive-components/MenuMobileComponent.vue
@@ -2,11 +2,11 @@
   <footer class="footer-mobile">
     <div class="footer-mobile__content">
       <div class="footer-mobile__icons icons-size">
-        <a href=""><img class="icon-start" src="@/assets/icons-adaptive/home-adaptive/icon-home-menu.png"></a>
-        <a href=""><img class="icon-center" src="@/assets/icons-adaptive/home-adaptive/icon-wallet-menu.svg"></a>
-        <a href=""><img class="icon-center" src="@/assets/icons-adaptive/home-adaptive/icon-chat-menu.png"></a>
-        <a href=""><img class="icon-center" src="@/assets/icons-adaptive/home-adaptive/icon-info-menu.png"></a>
-        <a href=""><img class="icon-end" src="@/assets/icons-adaptive/home-adaptive/icon-menu.png"></a>
+        <a href="#"><img class="icon-start" src="@/assets/icons-adaptive/home-adaptive/icon-home-menu.png"></a>
+        <a href="#" @click="$router.push({ name: 'profile' })"><img class="icon-center" src="@/assets/icons-adaptive/home-adaptive/icon-wallet-menu.svg"></a>
+        <a href="#"><img class="icon-center" src="@/assets/icons-adaptive/home-adaptive/icon-chat-menu.png"></a>
+        <a href="#"><img class="icon-center" src="@/assets/icons-adaptive/home-adaptive/icon-info-menu.png"></a>
+        <a href="#"><img class="icon-end" src="@/assets/icons-adaptive/home-adaptive/icon-menu.png"></a>
       </div>
     </div>
   </footer>
diff --git a/luckydiamond/src/main.js b/luckydiamond/src/main.js
index 21baa4b..657575d 100644
--- a/luckydiamond/src/main.js
+++ b/luckydiamond/src/main.js
@@ -2,10 +2,12 @@ import { createApp } from 'vue'
 import App from './App.vue'
 
 import router from "@/router/router";
+import { Mixins } from "@/mixins/mixin";
 
 import '@/assets/css/global.css'
 
 const app = createApp(App)
 app.use(router)
+app.mixin(Mixins)
 
 app.mount('#app')
diff --git a/luckydiamond/src/mixins/mixin.js b/luckydiamond/src/mixins/mixin.js
new file mode 100644
index 0000000..b58eccd
--- /dev/null
+++ b/luckydiamond/src/mixins/mixin.js
@@ -0,0 +1,13 @@
+export const Mixins = {
+    methods: {
+        checkWindowSize() {
+            this.mobile = window.innerWidth <= 600
+        },
+        AddWindowListener() {
+            window.addEventListener('resize', this.checkWindowSize)
+        },
+        RemoveWindowListener() {
+            window.removeEventListener('resize', this.checkWindowSize)
+        }
+    }
+}
\ No newline at end of file
diff --git a/luckydiamond/src/pages/HomePage.vue b/luckydiamond/src/pages/HomePage.vue
index b68d671..d074778 100644
--- a/luckydiamond/src/pages/HomePage.vue
+++ b/luckydiamond/src/pages/HomePage.vue
@@ -1,6 +1,6 @@
 <template>
   <homemobile-page v-if="mobile"></homemobile-page>
-  <div class="content-grid" v-if="!mobile">
+  <div class="content-grid" v-else>
     <aside-bar-component></aside-bar-component>
 
     <chat-component></chat-component>
@@ -115,26 +115,25 @@ export default {
       GameModes,
       AnimationOff: false,
       mobile: false,
-      currentPage: 'Desktop'
     }
   },
   methods: {
     // claimSettings(value) {
     //   this.AnimationOff = value
     // },
-    checkWindowSize() {
-      this.mobile = window.innerWidth <= 600
-
-      this.currentPage = this.mobile ? 'Mobile' : 'Desktop'
-    }
+    // checkWindowSize() {
+    //   this.mobile = window.innerWidth <= 600
+    //
+    //   this.currentPage = this.mobile ? 'Mobile' : 'Desktop'
+    // }
   },
   mounted() {
     this.checkWindowSize()
 
-    window.addEventListener('resize', this.checkWindowSize)
+    this.AddWindowListener()
   },
   beforeUnmount() {
-    window.removeEventListener('resize', this.checkWindowSize)
+    this.RemoveWindowListener()
   },
   computed: {
     mainGameMode() {
diff --git a/luckydiamond/src/pages/ProfilePage.vue b/luckydiamond/src/pages/ProfilePage.vue
index 4654eaa..505a23d 100644
--- a/luckydiamond/src/pages/ProfilePage.vue
+++ b/luckydiamond/src/pages/ProfilePage.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="content__grid-profile">
+  <profilemobile-page v-if="mobile"></profilemobile-page>
+  <div class="content__grid-profile" v-else>
     <aside-bar-component></aside-bar-component>
 
     <chat-component id="chat-profile"></chat-component>
@@ -57,22 +58,32 @@ import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
 import PaymentsModal from "@/components/PaymentsModal.vue";
+import ProfilemobilePage from "@/pages/adaptive-pages/ProfilemobilePage.vue";
 import { GetCookie } from "@/assets/js/storage/CookieStorage";
 import '@/assets/css/PagesStyles/profile.css'
 import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
 
 export default {
-  components: { HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal },
+  components: {ProfilemobilePage, HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal },
   data() {
     return {
       username: 'Artemka',
       imageUrl: '',
       balance: 0,
+      mobile: false,
       openModal: false,
       payments: true,
       arrayHistory: [],
     }
   },
+  mounted() {
+    this.checkWindowSize()
+
+    this.AddWindowListener()
+  },
+  beforeUnmount() {
+    this.RemoveWindowListener()
+  },
   created() {
     this.username = GetCookie('SpUserName')