From 02e6548eea860d47302ac585297189e0c9bcb855 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 19 May 2024 18:44:57 +0200
Subject: [PATCH] Feat: add persistentSettingsStore using LocalStorage plugin

---
 app.vue                      |  4 +---
 components/CardOverlay.vue   |  7 +++----
 components/CardPreview.vue   |  4 ++--
 components/OptionsDialog.vue | 36 +++++++++++++++++++++---------------
 4 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/app.vue b/app.vue
index 4086e2f..7e0f710 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import goStore, { setReady, oauth2_register_discord, setup_websocket, heron_cookie_login } from "@/netcode";
+import goStore, { oauth2_register_discord, setup_websocket, heron_cookie_login } from "@/netcode";
 
 await setup_websocket()
 
@@ -10,8 +10,6 @@ useHead
       : 'Héron Realms',
   })
 
-
-
 const heron_session = useCookie('heron_session')
 const route = useRoute()
 
diff --git a/components/CardOverlay.vue b/components/CardOverlay.vue
index b7575d3..4d0d885 100644
--- a/components/CardOverlay.vue
+++ b/components/CardOverlay.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import { getCardsType } from '~/helpers/settingsCookies';
 import goStore from '~/netcode';
 
 export interface Props {
     card_id: number | undefined
 }
 
+const settingsStore = useSettingsStore()
 const props = defineProps<Props>()
 
-const cardsType = ref(getCardsType().value)
-
 const card: Ref<Element | null> = ref(null)
 
 const x = computed(() => {
@@ -35,7 +33,8 @@ const y = computed(() => {
 <template>
     <div :class="`card_overlay`" :style="`top: ${y}px; left: ${x}px`" ref="card">
         <img :class="`card_image`" v-if="props.card_id"
-            :src="`/cards/${cardsType}/` + props.card_id.toString().padStart(3, '0') + '.png'" draggable="false">
+            :src="`/cards/${settingsStore.cardStyle}/` + props.card_id.toString().padStart(3, '0') + '.png'"
+            draggable="false">
 
         <!-- <img :class="`card_image`" v-if="!props.card_id" :src="'/cards/background.png'" draggable="false"> -->
     </div>
diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 3e9df19..3455620 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { getCardsType } from '~/helpers/settingsCookies';
 import goStore from '~/netcode';
 import { useSettingsStore } from '~/stores/settingsStore';
 
@@ -52,7 +51,8 @@ watch(
             <slot></slot>
         </div>
         <img :class="`card_image`" v-if="props.card_id"
-            :src="`/cards/${settingsStore.cardStyle}/` + props.card_id.toString().padStart(3, '0') + '.png'" draggable="false">
+            :src="`/cards/${settingsStore.cardStyle}/` + props.card_id.toString().padStart(3, '0') + '.png'"
+            draggable="false">
 
         <img :class="`card_image`" v-if="!props.card_id" :src="'/cards/background.png'" draggable="false">
 
diff --git a/components/OptionsDialog.vue b/components/OptionsDialog.vue
index a2772e0..82d0f01 100644
--- a/components/OptionsDialog.vue
+++ b/components/OptionsDialog.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { getCardsType } from '~/helpers/settingsCookies';
 import type { Player } from '~/netcode/Player';
 
 const settingsStore = useSettingsStore()
@@ -17,27 +16,34 @@ const close = () => {
   emit('close')
 }
 
+watch(() => settingsStore.shaderQuality, async () => {
+  console.log(settingsStore.shaderQuality)
+})
+
 const switchCardStyle = () => {
-    if (settingsStore.cardStyle === 'heron') {
-        settingsStore.changeCardStyle('original')
-    } else {
-        settingsStore.changeCardStyle('heron')
-    }
+  if (settingsStore.cardStyle === 'heron') {
+    settingsStore.cardStyle = 'original'
+  } else {
+    settingsStore.cardStyle = 'heron'
+  }
 }
 
 </script>
 
 <template>
-    <div v-if="isVisible" class="dialog-overlay" @click="close">
-        <div class="dialog-box" @click.stop>
-            <div class="dialog-header">
-                <h3>Options</h3>
-            </div>
-            <div class="dialog-body">
-                <button @click="switchCardStyle">Toggle Card style</button>
-            </div>
-        </div>
+  <div v-if="isVisible" class="dialog-overlay" @click="close">
+    <div class="dialog-box" @click.stop>
+      <div class="dialog-header">
+        <h3>Options</h3>
+      </div>
+      <div class="dialog-body">
+        <button @click="switchCardStyle">Toggle Card style</button>
+      </div>
+      <div class="dialog-body">
+        <input type="range" min="0" max="10" v-model="settingsStore.shaderQuality">
+      </div>
     </div>
+  </div>
 </template>
 
 <style scoped>