Merge pull request #6 from danilt2000/DevelopMadara

refactor SettingsPage

luckydiamond/package-lock.json

@@ -15,6 +15,7 @@
         "core-js": "^3.8.3",
         "howler": "^2.2.4",
         "mitt": "^3.0.1",
+        "save": "^2.9.0",
         "swiper": "^11.0.5",
         "vue": "^3.2.13",
         "vue-recaptcha": "^3.0.0-alpha.6",
@@ -5521,8 +5522,7 @@
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
-      "dev": true
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
     },
     "node_modules/easy-stack": {
       "version": "1.0.1",
@@ -6309,6 +6309,20 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/event-stream": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz",
+      "integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==",
+      "dependencies": {
+        "duplexer": "^0.1.1",
+        "from": "^0.1.7",
+        "map-stream": "0.0.7",
+        "pause-stream": "^0.0.11",
+        "split": "^1.0.1",
+        "stream-combiner": "^0.2.2",
+        "through": "^2.3.8"
+      }
+    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -6646,6 +6660,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g=="
+    },
     "node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -7788,6 +7807,11 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -8111,6 +8135,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/map-stream": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
+      "integrity": "sha512-C0X0KQmGm3N2ftbTGBhSyuydQ+vV1LC3f3zPvT3RXHXNZrvfPZcoXp/N5DOa8vedX/rTMm2CjTtivFg2STJMRQ=="
+    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -8230,6 +8259,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/mingo": {
+      "version": "6.4.10",
+      "resolved": "https://registry.npmjs.org/mingo/-/mingo-6.4.10.tgz",
+      "integrity": "sha512-/pOGeZKcZrKKw8YkCMKn9+XPiUYeNhkfaVbTn9tqvZvfccxf1idk8ezSulecZmPdKJLibNDtp4UBfDK3nzvMrQ=="
+    },
     "node_modules/mini-css-extract-plugin": {
       "version": "2.7.6",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz",
@@ -9048,6 +9082,14 @@
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz",
       "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q=="
     },
+    "node_modules/pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
+      "dependencies": {
+        "through": "~2.3"
+      }
+    },
     "node_modules/perfect-debounce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
@@ -10194,6 +10236,22 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/save": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/save/-/save-2.9.0.tgz",
+      "integrity": "sha512-eg8+g8CjvehE/2C6EbLdtK1pINVD27pcJLj4M9PjWWhoeha/y5bWf4dp/0RF+OzbKTcG1bae9qi3PAqiR8CJTg==",
+      "dependencies": {
+        "async": "^3.2.2",
+        "event-stream": "^4.0.1",
+        "lodash.assign": "^4.2.0",
+        "mingo": "^6.1.0"
+      }
+    },
+    "node_modules/save/node_modules/async": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
+      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg=="
+    },
     "node_modules/schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -10647,6 +10705,17 @@
         "wbuf": "^1.7.3"
       }
     },
+    "node_modules/split": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+      "dependencies": {
+        "through": "2"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -10692,6 +10761,15 @@
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.6.0.tgz",
       "integrity": "sha512-aFZ19IgVmhdB2uX599ve2kE6BIE3YMnQ6Gp6BURhW/oIzpXGKr878TQfAQZn1+i0Flcc/UKUy1gOlcfaUBCryg=="
     },
+    "node_modules/stream-combiner": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
+      "integrity": "sha512-6yHMqgLYDzQDcAkL+tjJDC5nSNuNIx0vZtRZeiPh7Saef7VHX9H5Ijn9l2VIol2zaNYlYEX6KyuT/237A58qEQ==",
+      "dependencies": {
+        "duplexer": "~0.1.1",
+        "through": "~2.3.4"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -11115,6 +11193,11 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
+    },
     "node_modules/thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",

luckydiamond/package.json

@@ -16,6 +16,7 @@
     "core-js": "^3.8.3",
     "howler": "^2.2.4",
     "mitt": "^3.0.1",
+    "save": "^2.9.0",
     "swiper": "^11.0.5",
     "vue": "^3.2.13",
     "vue-recaptcha": "^3.0.0-alpha.6",

luckydiamond/src/assets/css/ComponentsStyles/DevelopComponent.css

@@ -0,0 +1,8 @@
+.card {
+    width: 422px;
+    height: 269px;
+    flex-shrink: 0;
+    border-radius: 22px;
+    background-color: #742271;
+
+}

luckydiamond/src/assets/css/PagesStyles/SettingsPage.css

@@ -0,0 +1,9 @@
+.settings {
+    display: flex;
+    grid-area: profile;
+    height: 95%;
+    border-radius: 50px;
+    background: #17181C;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin: 10px 39px 18px 13px;
+}

luckydiamond/src/components/AsidebarComponent.vue

@@ -13,25 +13,20 @@
         </div>
       </div>
       <div class="menu__btn--settings">
-        <a @click="ChangeAnimation" href="#"><img width="73" height="73" src="../assets/icons-menu/settings-icon.svg"></a>
+        <a @click="$router.push({ name: 'settings' })" href="#"><img width="73" height="73" src="../assets/icons-menu/settings-icon.svg"></a>
       </div>
     </div>
   </aside>
+  
 </template>
 
 
 <script>
 // import NotiicationwindowComponent from "@/components/NotiicationwindowComponent.vue";
 import '@/assets/css/ComponentsStyles/asidebar.css'
-
 export default {
   name: 'AsideBar-Element',
-  // components: { NotiicationwindowComponent },
-  data() {
-    return {
-      AnimationOff: false
-    }
-  },
+ 
   // emits: ['animationchange'],
   methods: {
     ChangeAnimation() {

luckydiamond/src/components/DevelopComponent.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="info">
+        <div class="card">
+
+        </div>
+    </div>
+</template>
+
+<script>
+import '@/assets/css/ComponentsStyles/DevelopComponent.css'
+
+export default {
+
+}
+</script>

luckydiamond/src/components/HeaderComponent.vue

@@ -127,6 +127,7 @@ export default {
           <a href="#" @click="$router.push({ name: 'home' })" :class="{ 'header__nav--now' : $route.name === 'home' }">Главная</a>
           <a v-if="authtoken !== ''" href="#" @click="$router.push({ name: 'profile' })" :class="{ 'header__nav--now' : $route.name === 'profile' }">Профиль</a>
           <a href="#">Помощь</a>
+          <a href="#" @click="$router.push({ name: 'about' })" :class="{ 'header__nav--now' : $route.name === 'about' }">О нас</a>
         </nav>
       </div>
       <div class="header__balance">

luckydiamond/src/pages/AboutPage.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="content__grid-profile" >
+        <aside-bar-component></aside-bar-component>
+    
+        
+    
+        <header-component></header-component>
+
+        <develop-component></develop-component>
+      </div>
+</template>
+<script>
+import DevelopComponent from "@/components/DevelopComponent.vue";
+import AsideBarComponent from "@/components/AsidebarComponent.vue";
+import HeaderComponent from "@/components/HeaderComponent.vue";
+
+export default {
+    data () {
+        return {
+           Object: {
+            bg:'value',
+            nickname: 'value',
+            icons: {},
+            textTacholgy: {'text1': 'text2'}
+           }
+        }
+    }, 
+    components: {
+    HeaderComponent,
+    AsideBarComponent,
+    DevelopComponent    
+    }
+}
+
+</script>

luckydiamond/src/pages/SettingsPage.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="content__grid-profile" >
+      <aside-bar-component></aside-bar-component>
+  
+      <chat-component></chat-component>
+  
+      <header-component></header-component>
+  
+    <section class="settings"></section>
+      
+    </div>
+  </template>
+  
+  <script>
+  import AsideBarComponent from "@/components/AsidebarComponent.vue";
+  import ChatComponent from "@/components/ChatComponent.vue";
+  import HeaderComponent from "@/components/HeaderComponent.vue";
+
+  import '@/assets/css/PagesStyles/SettingsPage.css'
+  export default {
+    components: {
+    ChatComponent,
+    HeaderComponent,
+    AsideBarComponent
+  }
+
+  }
+  </script>

luckydiamond/src/router/router.js

@@ -3,12 +3,15 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomePage from "../pages/HomePage.vue";
 import ProfilePage from "@/pages/ProfilePage.vue";
 import SapergamePage from "@/pages/games-pages/SapergamePage.vue";
-
+import SettingsPage from "@/pages/SettingsPage.vue"
+import AboutPage from "@/pages/AboutPage.vue"
 export default createRouter({
     history: createWebHistory(),
     routes: [
         { path: '/', component: HomePage, name: 'home' },
         { path: '/profile', component: ProfilePage, name: 'profile' },
-        { path: '/game/saper', component: SapergamePage, name: 'saper' }
+        { path: '/game/saper', component: SapergamePage, name: 'saper' },
+        { path: '/settings', component: SettingsPage, name: 'settings' },
+        { path: '/about', component: AboutPage, name: 'about' },
     ]
 })