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

.gitea/workflows/build.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
 
     env:
-      DOCKER_ORG: legonzaur
+      DOCKER_ORG: heronfief
       DOCKER_LATEST: nightly
       ENDPOINT: git.legonzaur.fr
 

assets/shaders/noise.frag

@@ -22,8 +22,8 @@ void main(){
     
     q=q*.5+.5;
     vec2 r=vec2(0.);
-    r.x=fbm(st+1.*q+vec2(1.7,9.2)+.0115*u_time);
-    r.y=fbm(st+1.*q+vec2(8.3,2.8)+.0226*u_time);
+    r.x=fbm(st+1.*q+vec2(1.7,9.2)+.00515*u_time);
+    r.y=fbm(st+1.*q+vec2(8.3,2.8)+.0126*u_time);
     r=r*.5+.5;
     
     float f=fbm(st+r);

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>

stores/settingsStore.ts

@@ -1,14 +1,24 @@
 import { defineStore } from "pinia";
 
-const CARDS_COOKIE_NAME = 'cards_type';
-const CARDS_DEFAULT_VALUE = 'heron';
-
+enum CardStyles {
+    HERON = "heron",
+    ORIGINAL = "original"
+}
 
 export const useSettingsStore = defineStore("settingstore", {
     state: () => ({
-        cardStyle: "heron",
-        shaderQuality: 6,
-        shaderFramerate: 60,
+        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
 });