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

app.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import goStore, { setReady, oauth2_register_discord, setup_websocket, heron_cookie_login } from "@/netcode";
+import goStore, { oauth2_register_discord, setup_websocket, heron_cookie_login } from "@/netcode";
 
 await setup_websocket()
 
@@ -10,8 +10,6 @@ useHead
       : 'Héron Realms',
   })
 
-
-
 const heron_session = useCookie('heron_session')
 const route = useRoute()
 

components/CardOverlay.vue

@@ -5,6 +5,7 @@ export interface Props {
     card_id: number | undefined
 }
 
+const settingsStore = useSettingsStore()
 const props = defineProps<Props>()
 
 const card: Ref<Element | null> = ref(null)
@@ -32,7 +33,8 @@ const y = computed(() => {
 <template>
     <div :class="`card_overlay`" :style="`top: ${y}px; left: ${x}px`" ref="card">
         <img :class="`card_image`" v-if="props.card_id"
-            :src="'/cards/' + props.card_id.toString().padStart(3, '0') + '.png'" draggable="false">
+            :src="`/cards/${settingsStore.cardStyle}/` + props.card_id.toString().padStart(3, '0') + '.png'"
+            draggable="false">
 
         <!-- <img :class="`card_image`" v-if="!props.card_id" :src="'/cards/background.png'" draggable="false"> -->
     </div>

components/CardPreview.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import goStore from '~/netcode';
+import { useSettingsStore } from '~/stores/settingsStore';
 
 export interface Props {
     card_id: number | undefined
@@ -16,6 +17,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["click"])
 
+const settingsStore = useSettingsStore()
+
 const childCount = ref<number>(0)
 
 function cardClick() {
@@ -48,7 +51,8 @@ watch(
             <slot></slot>
         </div>
         <img :class="`card_image`" v-if="props.card_id"
-            :src="'/cards/' + props.card_id.toString().padStart(3, '0') + '.png'" draggable="false">
+            :src="`/cards/${settingsStore.cardStyle}/` + props.card_id.toString().padStart(3, '0') + '.png'"
+            draggable="false">
 
         <img :class="`card_image`" v-if="!props.card_id" :src="'/cards/background.png'" draggable="false">
 

components/GameBoard.vue

@@ -41,6 +41,7 @@ watch(
     })
 
 const showResults = ref(false)
+const showOptions = ref(false)
 const isWinner = ref(false)
 
 function showLoserScreen() {
@@ -78,6 +79,7 @@ function showWinnerScreen() {
     <ResultDialog :isVisible="showResults" :won="isWinner" :players="goStore.current_game?.players"
         @close="showResults = false">
     </ResultDialog>
+    <GlobalOverlay></GlobalOverlay>
     <SelfView></SelfView>
 </template>
 

components/GlobalOverlay.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import goStore from '~/netcode';
+
+const displayOptions = ref(false)
+
+</script>
+
+<template>
+    <div :class="`card_overlay`" ref="card">
+        <button class="settings_button" @click="displayOptions = true">bite</button>
+    </div>
+    <OptionsDialog :isVisible="displayOptions" @close="displayOptions = false" />
+</template>
+
+<style scoped>
+.card_overlay {
+    /* display: none; */
+    position: fixed;
+    z-index: 999;
+    display: flex;
+    pointer-events: none;
+    /* top: left: */
+    top: 0;
+}
+
+.settings_button {
+    pointer-events: all;
+}
+</style>

components/OptionsDialog.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { Player } from '~/netcode/Player';
+
+const settingsStore = useSettingsStore()
+
+export interface Props {
+  isVisible: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+})
+
+const emit = defineEmits(['close'])
+
+const close = () => {
+  emit('close')
+}
+
+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>
+      </div>
+      <div class="dialog-body">
+        <button @click="switchCardStyle">Toggle Card style</button>
+      </div>
+      <div class="dialog-body">
+        <input type="range" min="0" max="10" v-model="settingsStore.shaderQuality">
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.dialog-box {
+  background-image: url('../images/bg-grass.png');
+  padding: 0 20px;
+  border-radius: 5px;
+  width: 800px;
+  border-radius: 30px;
+  max-width: 100%;
+  color: white;
+  text-align: center;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.dialog-box h3 {
+  font-size: 30px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  margin: 0;
+  width: 100%;
+  padding: 10px 0;
+  color: white;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+}
+
+.dialog-header,
+.dialog-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+}
+
+.dialog-body {
+  padding: 10px 0;
+}
+</style>

nuxt.config.ts

@@ -10,6 +10,7 @@ export default defineNuxtConfig({
   },
   modules: [
     '@pinia/nuxt',
+    '@pinia-plugin-persistedstate/nuxt',
   ],
   app: {
     head: {

package-lock.json

@@ -12,6 +12,9 @@
         "pinia": "^2.1.7",
         "vue": "^3.4.21",
         "vue-router": "^4.3.0"
+      },
+      "devDependencies": {
+        "@pinia-plugin-persistedstate/nuxt": "^1.2.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -2093,6 +2096,21 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/@pinia-plugin-persistedstate/nuxt": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@pinia-plugin-persistedstate/nuxt/-/nuxt-1.2.0.tgz",
+      "integrity": "sha512-2rtgx5viGSMQMCoFYZMHguA2FhFKCUvw0PwETfqQegsWeBHlqk1/D0G/9xqep8Hq+c1BuFx+jNLJzoLXtYfivg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.8.0",
+        "defu": "^6.1.2",
+        "pinia-plugin-persistedstate": ">=3.2.0"
+      },
+      "peerDependencies": {
+        "@pinia/nuxt": "^0.5.0"
+      }
+    },
     "node_modules/@pinia/nuxt": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.5.1.tgz",
@@ -7803,6 +7821,16 @@
         }
       }
     },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.1.tgz",
+      "integrity": "sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "pinia": "^2.0.0"
+      }
+    },
     "node_modules/pinia/node_modules/vue-demi": {
       "version": "0.14.7",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",

package.json

@@ -15,5 +15,8 @@
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@pinia-plugin-persistedstate/nuxt": "^1.2.0"
   }
 }