feat(wip): button to switch assets

components/CardOverlay.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { getCardsType } from '~/helpers/settingsCookies';
 import goStore from '~/netcode';
 
 export interface Props {
@@ -7,6 +8,8 @@ export interface Props {
 
 const props = defineProps<Props>()
 
+const cardsType = ref(getCardsType().value)
+
 const card: Ref<Element | null> = ref(null)
 
 const x = computed(() => {
@@ -32,7 +35,7 @@ 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/${cardsType}/` + 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,7 @@
 <script setup lang="ts">
+import { getCardsType } from '~/helpers/settingsCookies';
 import goStore from '~/netcode';
+import { useSettingsStore } from '~/stores/settingsStore';
 
 export interface Props {
     card_id: number | undefined
@@ -16,6 +18,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["click"])
 
+const settingsStore = useSettingsStore()
+
 const childCount = ref<number>(0)
 
 function cardClick() {
@@ -48,7 +52,7 @@ 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() {
@@ -76,6 +77,7 @@ function showWinnerScreen() {
         :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,93 @@
+<script setup lang="ts">
+import { getCardsType } from '~/helpers/settingsCookies';
+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')
+}
+
+const switchCardStyle = () => {
+    if (settingsStore.cardStyle === 'heron') {
+        settingsStore.changeCardStyle('original')
+    } else {
+        settingsStore.changeCardStyle('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>
+    </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>

helpers/settingsCookies.ts

@@ -0,0 +1,10 @@
+const CARDS_COOKIE_NAME = 'cards_type';
+const CARDS_DEFAULT_VALUE = 'heron';
+
+export function getCardsType(): CookieRef<string | null | undefined> {
+    const cookie = useCookie(CARDS_COOKIE_NAME)
+    if (!cookie.value) {
+        cookie.value = CARDS_DEFAULT_VALUE;
+    }
+    return cookie;
+}