Allow using vsync

assets/workers/ShaderWorker.ts

@@ -149,9 +149,14 @@ async function main(canvas: OffscreenCanvas) {
         console.log("a")
     }
 
+    requestAnimationFrame(render)
+
     // self.clearInterval(interval)
     // interval = self.setInterval(() => requestAnimationFrame(render), 1000 / shaderOptions.framerate)
     self.clearTimeout(timeout)
+    if (shaderOptions.framerate == 0) {
+        return render
+    }
     timeout = self.setTimeout(() => {
         requestAnimationFrame(render)
     }, 1000 / shaderOptions.framerate)
@@ -163,6 +168,10 @@ self.addEventListener("message", (e) => {
     if (data.command == "initShader") {
         canvas = data.canvas
         shaderOptions.quality = data.shaderOptions.quality
+        shaderOptions.framerate = data.shaderOptions.framerate
+        if (shaderOptions.framerate == 65) {
+            shaderOptions.framerate == Infinity
+        }
         screen.devicePixelRatio = data.screen.devicePixelRatio
         screen.width = data.screen.width
         screen.height = data.screen.height

components/OptionsDialog.vue

@@ -39,18 +39,19 @@ const close = () => {
         <span>Shader Quality</span>
       </div>
       <div class="dialog-body">
-        <input type="range" min="1" max="10" v-model="settingsStore.shaderQuality">
+        <input type="range" min="1" max="10" v-model="settingsStore.shaderQuality"
+          :disabled="settingsStore.shaderFramerate == 0">
       </div>
       <div class="dialog-footer">
-        <span>{{ _window.innerWidth * _devicePixelRatio * settingsStore.shaderQuality / 10 }}x{{ _window.innerHeight *
+        <span>{{ Math.floor(_window.innerWidth * _devicePixelRatio * settingsStore.shaderQuality / 10) }}x{{
-          _devicePixelRatio * settingsStore.shaderQuality / 10 }}</span>
+          Math.floor(_window.innerHeight *
+            _devicePixelRatio * settingsStore.shaderQuality / 10) }}</span>
       </div>
       <div class="dialog-header">
         <span>Shader Framerate</span>
       </div>
       <div class="dialog-body">
-        <input type="range" min="0" max="65" step="5" v-model="settingsStore.shaderFramerate"
+        <input type="range" min="0" max="65" step="5" v-model="settingsStore.shaderFramerate">
-          :disabled="settingsStore.shaderQuality == 0">
       </div>
       <div class="dialog-footer">
         <span v-if="settingsStore.shaderFramerate == 65">vsync</span>

stores/settingsStore.ts

@@ -8,9 +8,9 @@ enum CardStyles {
 export const useSettingsStore = defineStore("settingstore", {
     state: () => ({
         cardStyle: CardStyles.HERON,
-        shaderQuality: 0,
+        shaderQuality: 3,
-        shaderFramerate: 10,
+        shaderFramerate: 0,
-        shaderPixelated: false
+        shaderPixelated: true
     }),
     actions: {
         switchCardStyles() {