Chore: cleanup settings view

components/OptionsDialog.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { Player } from '~/netcode/Player';
 
 const settingsStore = useSettingsStore()
 
@@ -20,28 +19,30 @@ watch(() => settingsStore.shaderQuality, async () => {
   console.log(settingsStore.shaderQuality)
 })
 
-const switchCardStyle = () => {
-  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>
+        <h3>Visuals</h3>
+      </div>
+      <div class="dialog-header">
+        <span>Toggle Card Style</span>
       </div>
       <div class="dialog-body">
-        <button @click="switchCardStyle">Toggle Card style</button>
+        <button @click="settingsStore.switchCardStyles">Toggle Card style</button>
       </div>
-      <div class="dialog-body">
+      <div class="dialog-header">
+        <h3>Graphics</h3>
+      </div>
+      <div class="dialog-header">
         <span>Shader Quality</span>
+      </div>
+      <div class="dialog-body">
         <input type="range" min="0" max="10" v-model="settingsStore.shaderQuality">
+      </div>
+      <div class="dialog-footer">
         <span>
           <template v-if="settingsStore.shaderQuality == 0">
             Disabled
@@ -51,9 +52,14 @@ const switchCardStyle = () => {
           </template>
         </span>
       </div>
-      <div class="dialog-body">
+      <div class="dialog-header">
         <span>Shader Framerate</span>
-        <input type="range" min="10" max="60" step="5" v-model="settingsStore.shaderFramerate">
+      </div>
+      <div class="dialog-body">
+        <input type="range" min="10" max="60" step="5" v-model="settingsStore.shaderFramerate"
+          :disabled="settingsStore.shaderQuality == 0">
+      </div>
+      <div class="dialog-footer">
         <span>{{ settingsStore.shaderFramerate }} fps</span>
       </div>
     </div>
@@ -72,6 +78,8 @@ const switchCardStyle = () => {
   justify-content: center;
   align-items: center;
   z-index: 1000;
+  display: grid;
+
 }
 
 .dialog-box {
@@ -84,9 +92,8 @@ const switchCardStyle = () => {
   color: white;
   text-align: center;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
-  display: flex;
+  display: grid;
-  justify-content: center;
+  grid-template-columns: 33% 33% 33%;
-  flex-direction: column;
 }
 
 .dialog-box h3 {
@@ -107,7 +114,16 @@ const switchCardStyle = () => {
   padding: 10px 0;
 }
 
+.dialog-header {
+  grid-column-start: 1;
+}
+
 .dialog-body {
   padding: 10px 0;
+  grid-column-start: 2;
+}
+
+.dialog-footer {
+  grid-column-start: 3;
 }
 </style>

stores/settingsStore.ts

@@ -1,14 +1,24 @@
 import { defineStore } from "pinia";
 
-const CARDS_COOKIE_NAME = 'cards_type';
+enum CardStyles {
-const CARDS_DEFAULT_VALUE = 'heron';
+    HERON = "heron",
-
+    ORIGINAL = "original"
+}
 
 export const useSettingsStore = defineStore("settingstore", {
     state: () => ({
-        cardStyle: "heron",
+        cardStyle: CardStyles.HERON,
         shaderQuality: 0,
         shaderFramerate: 10,
     }),
+    actions: {
+        switchCardStyles() {
+            if (this.cardStyle === CardStyles.HERON) {
+                this.cardStyle = CardStyles.ORIGINAL
+            } else {
+                this.cardStyle = CardStyles.HERON
+            }
+        }
+    },
     persist: true
 });