From 7e65ad2a5fd9aaff4c2ca859c69277af2057c8fc Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Mon, 20 Nov 2023 22:12:42 +0300
Subject: [PATCH] added logic for off animation text

---
 luckydiamond/src/assets/css/PagesStyles/home.css  |  6 +++++-
 luckydiamond/src/components/AsidebarComponent.vue | 15 +++++++++++++--
 luckydiamond/src/pages/HomePage.vue               | 12 +++++++++---
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/luckydiamond/src/assets/css/PagesStyles/home.css b/luckydiamond/src/assets/css/PagesStyles/home.css
index 2f11c85..ffb3803 100644
--- a/luckydiamond/src/assets/css/PagesStyles/home.css
+++ b/luckydiamond/src/assets/css/PagesStyles/home.css
@@ -55,7 +55,11 @@
     }
 }
 
-.main__content h4 span {
+.default__text--main__block {
+    color: #6EEB21;
+}
+
+.animate__text--main__block {
     animation: RaindowAnimate 5s infinite;
     animation-delay: 5s;
 }
diff --git a/luckydiamond/src/components/AsidebarComponent.vue b/luckydiamond/src/components/AsidebarComponent.vue
index 5f751da..ba344e0 100644
--- a/luckydiamond/src/components/AsidebarComponent.vue
+++ b/luckydiamond/src/components/AsidebarComponent.vue
@@ -13,7 +13,7 @@
         </div>
       </div>
       <div class="menu__btn--settings">
-        <a href="#"><img width="73" height="73" src="../assets/icons-menu/settings-icon.svg"></a>
+        <a @click="ChangeAnimation" href="#"><img width="73" height="73" src="../assets/icons-menu/settings-icon.svg"></a>
       </div>
     </div>
   </aside>
@@ -24,7 +24,18 @@
 import '@/assets/css/ComponentsStyles/asidebar.css'
 
 export default {
-  name: 'AsideBar-Element'
+  name: 'AsideBar-Element',
+  data() {
+    return {
+      AnimationOff: false
+    }
+  },
+  methods: {
+    ChangeAnimation() {
+      this.AnimationOff = !this.AnimationOff
+      return this.$emit('animationchange', this.AnimationOff)
+    }
+  }
 }
 </script>
 
diff --git a/luckydiamond/src/pages/HomePage.vue b/luckydiamond/src/pages/HomePage.vue
index 6c4672e..5227bb2 100644
--- a/luckydiamond/src/pages/HomePage.vue
+++ b/luckydiamond/src/pages/HomePage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="content-grid">
-    <aside-bar-element></aside-bar-element>
+    <aside-bar-element @animationchange="claimSettings"></aside-bar-element>
 
     <chat-element></chat-element>
 
@@ -10,7 +10,7 @@
       <div class="main__content">
         <h3>онлайн-казино</h3>
         <h1>lucky diamond</h1>
-        <h4>minecraft casino - <span>spm</span></h4>
+        <h4>minecraft casino - <span :class="{ 'animate__text--main__block': !AnimationOff, 'default__text--main__block': AnimationOff }">spm</span></h4>
       </div>
     </main>
 
@@ -34,7 +34,13 @@ export default {
   components: {AsideBarElement, HeaderElementPage, ChatElement },
   data() {
     return {
-      GameModes
+      GameModes,
+      AnimationOff: false
+    }
+  },
+  methods: {
+    claimSettings(value) {
+      this.AnimationOff = value
     }
   },
   computed: {