components/AnimatedBackground.vue

@@ -109,10 +109,9 @@ async function main(canvas: HTMLCanvasElement, fragmentShader2: string) {
             0,     // offset
             6,     // num vertices to process
         );
-        interval.value = setTimeout(() => requestAnimationFrame(render), targetFramerate)
     }
-    clearTimeout(interval.value)
-    requestAnimationFrame(render)
+    clearInterval(interval.value)
+    interval.value = setInterval(() => requestAnimationFrame(render), targetFramerate)
 }
 
 
@@ -120,6 +119,7 @@ async function reloadShader() {
     nextTick(() => {
         if (!canvas.value) { return }
         let fragmentShader2 = fragmentShader.replace("#define FBM_OCTAVES 6", "#define FBM_OCTAVES " + settingsStore.shaderQuality);
+        clearInterval(interval.value)
         main(canvas.value, fragmentShader2);
     })
 
@@ -128,6 +128,10 @@ watch(() => settingsStore.shaderQuality, (newValue, oldValue) => {
     reloadShader()
 })
 
+watch(() => settingsStore.shaderFramerate, (newValue, oldValue) => {
+    reloadShader()
+})
+
 
 
 onMounted(async () => {

components/GameBoard.vue

@@ -115,7 +115,7 @@ function showWinnerScreen() {
 
 #player_list {
     grid-area: player_list;
-    border-left: 3px solid black;
+    border-left: 5px solid black;
     height: 100%;
     background-image: url("/images/bg-darkgrass.png");
 }

components/OptionsDialog.vue

@@ -40,7 +40,21 @@ const switchCardStyle = () => {
         <button @click="switchCardStyle">Toggle Card style</button>
       </div>
       <div class="dialog-body">
+        <span>Shader Quality</span>
         <input type="range" min="0" max="10" v-model="settingsStore.shaderQuality">
+        <span>
+          <template v-if="settingsStore.shaderQuality == 0">
+            Disabled
+          </template>
+          <template v-if="settingsStore.shaderQuality > 0">
+            {{ settingsStore.shaderQuality }}
+          </template>
+        </span>
+      </div>
+      <div class="dialog-body">
+        <span>Shader Framerate</span>
+        <input type="range" min="10" max="60" step="5" v-model="settingsStore.shaderFramerate">
+        <span>{{ settingsStore.shaderFramerate }} fps</span>
       </div>
     </div>
   </div>

stores/settingsStore.ts

@@ -7,8 +7,8 @@ const CARDS_DEFAULT_VALUE = 'heron';
 export const useSettingsStore = defineStore("settingstore", {
     state: () => ({
         cardStyle: "heron",
-        shaderQuality: 6,
-        shaderFramerate: 60,
+        shaderQuality: 0,
+        shaderFramerate: 10,
     }),
     persist: true
 });