Feat: add persistentSettingsStore using LocalStorage plugin

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>