add volume setter

luckydiamond/src/assets/js/storage/LocalStorage.js

@@ -0,0 +1,15 @@
+export function SaveToLocalStorage(key, value) {
+    localStorage.setItem(key, value);
+}
+
+export function GetFromLocalStorage(key) {
+    return localStorage.getItem(key);
+}
+
+export function RemoveFromLocalStorage(key) {
+    localStorage.removeItem(key);
+}
+
+export function ClearLocalStorage() {
+    localStorage.clear();
+}

luckydiamond/src/pages/SettingsPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="content__grid-profile" >
+  <div class="content__grid-profile">
     <aside-bar-component></aside-bar-component>
 
     <chat-component></chat-component>
@@ -7,16 +7,22 @@
     <header-component></header-component>
 
     <section class="settings">
-    
       <!-- <div id="volume-control">
     <button id="volume-up" @click="volumeUp">+</button>
     <button id="volume-down" @click="volumeDown">-</button>
   </div>
      -->
 
-
+      <input
+        id="volumeControl"
+        type="range"
+        min="0"
+        max="10"
+        v-model="volume"
+        @input="handleVolumeChange"
+        ref="volumeControl"
+      />
     </section>
-    
   </div>
 </template>
 
@@ -24,46 +30,33 @@
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
+import {SaveToLocalStorage,GetFromLocalStorage } from "@/assets/js/storage/LocalStorage";
 
-import '@/assets/css/PagesStyles/settings.css'
+import "@/assets/css/PagesStyles/settings.css";
 export default {
   components: {
     ChatComponent,
     HeaderComponent,
-    AsideBarComponent
+    AsideBarComponent,
+  },
+  data() {
+    return {
+      volume: 5, // Значение по умолчанию, на случай, если в LocalStorage ничего нет
+    };
   },
   methods: {
-    volumeUp() {
+    handleVolumeChange() {
-      var volume = document.getElementById("volume-indicator").value;
+      const volume = this.$refs.volumeControl.value;
-      if (volume) {
+      SaveToLocalStorage("volume",volume);
-        volume += 10;
 
-        if (volume > 100) {
+      // Транслировать изменение громкости глобально
-          volume = 100;
-        }
-
-        document.getElementById("volume-indicator").value = volume;
-      } else {
-        console.error("Element with id 'volume-indicator' not found or does not have a value property.");
-      }
-    },
-    // остальной код метода volumeDown()
-  
-    volumeDown() {
-      // Получить текущий уровень громкости
-      var volume = document.getElementById("volume-indicator").value;
-
-      // Уменьшить уровень громкости на 10%
-      volume -= 10;
-
-      // Убедиться, что уровень громкости не ниже 0%
-      if (volume < 0) {
-        volume = 0;
-      }
-
-      // Установить новый уровень громкости
-      document.getElementById("volume-indicator").value = volume;
     },
   },
-}
+  created() {
+    const storedVolume = GetFromLocalStorage("volume"); // Убедитесь, что этот метод существует и правильно работает
+    if (storedVolume !== null) {
+      this.volume = storedVolume;
+    }
+  }
+};
 </script>

luckydiamond/src/pages/games-pages/SapergamePage.vue

@@ -171,6 +171,8 @@ import HeaderElementPage from "@/components/HeaderComponent.vue";
 import { GetPercentageSteps, GetUserData, ClickCirclePlay, GetWinningAmount } from "@/assets/js/games/saper/SaperAPI";
 import { GetCurrentMoney } from "@/assets/js/rest/RestMethods";
 import { GetCookie } from "@/assets/js/storage/CookieStorage";
+import {GetFromLocalStorage} from "@/assets/js/storage/LocalStorage";
+
 
 import { Howl } from 'howler';
 import {eventBus} from "@/main";
@@ -380,7 +382,8 @@ export default {
            this.gameTurn = 0
            const SoundCorrect = new Howl({
              src: ['/sounds/incorrect-sound.mp3'],
-             volume: 0.5
+             volume: GetFromLocalStorage("volume")/100
+            //  volume: 0.5
            })
 
            SoundCorrect.play()
@@ -393,7 +396,8 @@ export default {
          }
          const SoundUncorrect = new Howl({
            src: ['/sounds/correct-click.mp3'],
-           volume: 0.5
+          //  volume: 0.5
+           volume: GetFromLocalStorage("volume")/100
          })
          this.CorrectsClick.push(X_Cordinates)
 
@@ -441,7 +445,7 @@ export default {
 
                 const soundStartGame = new Howl({
                   src: ['/sounds/start-game.mp3'],
-                  volume: 5.0
+                  volume: GetFromLocalStorage("volume")/25
                 })
 
                 soundStartGame.play()
@@ -491,7 +495,8 @@ export default {
         this.offEventPointers = true
         const soundStartGame = new Howl({
           src: ['/sounds/start-game.mp3'],
-          volume: 5.0
+          volume: GetFromLocalStorage("volume")/100
+          // volume: 5.0
         })
 
         soundStartGame.play()

luckydiamond/src/pages/newFile.1.js

@@ -1,22 +0,0 @@
-export default (await import('vue')).defineComponent({
-data() {
-return {
-Object: {
-bg: "value",
-nickname: "value",
-icons: {},
-textTacholgy: { text1: "text2" },
-},
-name: 'HelpPage',
-components: {
-HelpComponent
-}
-};
-
-},
-components: {
-HeaderComponent,
-AsideBarComponent,
-HelpComponent,
-},
-});

luckydiamond/src/pages/newFile.js

@@ -1,16 +0,0 @@
-export default (await import('vue')).defineComponent({
-data() {
-return {
-Object: {
-bg: "value",
-nickname: "value",
-icons: {},
-textTacholgy: { text1: "text2" },
-},
-};
-},
-name: "HelpPage",
-components: {
-HeaderComponent
-},
-});