Feat: add persistentSettingsStore using LocalStorage plugin

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()
 

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>

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">
 

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>