Merge remote-tracking branch 'origin/main' into feat-shader-background

components/GameBoard.vue

@@ -105,6 +105,8 @@ function showWinnerScreen() {
 #market {
     grid-area: market;
     background-image: url("/images/bg-sand.png");
+    border-bottom: 3px solid black;
+    ;
 }
 
 #current_player {

components/GlobalOverlay.vue

@@ -7,7 +7,7 @@ const displayOptions = ref(false)
 
 <template>
     <div :class="`card_overlay`" ref="card">
-        <button class="settings_button" @click="displayOptions = true">bite</button>
+        <img class="settings_button" src="/settings.png" alt="settings" @click="displayOptions = true"/>
     </div>
     <OptionsDialog :isVisible="displayOptions" @close="displayOptions = false" />
 </template>
@@ -25,5 +25,7 @@ const displayOptions = ref(false)
 
 .settings_button {
     pointer-events: all;
+    width: 30px;
+    padding: 5px;
 }
 </style>

components/OptionsDialog.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { Player } from '~/netcode/Player';
 
 const settingsStore = useSettingsStore()
 
@@ -20,28 +19,49 @@ 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-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
+          </template>
+          <template v-if="settingsStore.shaderQuality > 0">
+            {{ settingsStore.shaderQuality }}
+          </template>
+        </span>
+      </div>
+      <div class="dialog-header">
+        <span>Shader Framerate</span>
+      </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>
   </div>
 </template>
@@ -58,6 +78,8 @@ const switchCardStyle = () => {
   justify-content: center;
   align-items: center;
   z-index: 1000;
+  display: grid;
+
 }
 
 .dialog-box {
@@ -70,9 +92,8 @@ const switchCardStyle = () => {
   color: white;
   text-align: center;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
 }
 
 .dialog-box h3 {
@@ -93,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>