Add Zoom on Card

Use Left Alt Key (for now)
Closes #13

components/CardOverlay.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import goStore from '~/netcode';
+
+export interface Props {
+    card_id: number | undefined
+}
+
+const props = defineProps<Props>()
+
+const card: Ref<Element | null> = ref(null)
+
+const x = computed(() => {
+    const bounds = card.value?.getBoundingClientRect()
+    let offset = 1
+    if (!bounds) { return 0 }
+    if ((bounds.width + goStore.clientMouseX) > (window.visualViewport?.width ?? Infinity)) {
+        offset = - (bounds.width + 1)
+    }
+    return goStore.clientMouseX + offset
+})
+const y = computed(() => {
+    const bounds = card.value?.getBoundingClientRect()
+    let offset = 1
+    if (!bounds) { return 0 }
+    if ((bounds.height + goStore.clientMouseY) > (window.visualViewport?.height ?? Infinity)) {
+        offset = - (bounds.height + 1)
+    }
+    return goStore.clientMouseY + offset
+})
+</script>
+
+<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">
+
+        <img :class="`card_image`" v-if="!props.card_id" :src="'/cards/background.png'" draggable="false">
+    </div>
+</template>
+
+<style scoped>
+.card_overlay {
+    /* display: none; */
+    position: fixed;
+    z-index: 999;
+    display: flex;
+}
+</style>

components/CardPreview.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { Card } from '~/netcode/Card';
-
+import goStore from '~/netcode';
 
 export interface Props {
     card_id: number | undefined
@@ -24,10 +23,12 @@ function cardClick() {
 
 const rotation = ref(0)
 
-// onBeforeUpdate(() => {
-//     rotation.value = Math.random() > .5 ? 2 : -2
-// })
-
+function mouseenter(e: Event) {
+    goStore.hoveredCard = props.card_id
+}
+function mouseleave(e: Event) {
+    goStore.hoveredCard = undefined
+}
 
 watch(
     () => props.card_id,
@@ -39,7 +40,8 @@ watch(
 
 <template>
     <div :class="`card ${childCount > 0 ? 'active' : ''} ${wrapped ? 'wrapped' : ''} ${props.locked ? 'locked' : ''}`"
-        @contextmenu.prevent="false" @click.left="cardClick" :style="`rotate:${rotation}deg;`">
+        @contextmenu.prevent="false" @click.left="cardClick" :style="`rotate:${rotation}deg;`" @mouseenter="mouseenter"
+        @mouseleave="mouseleave">
         <div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
             <slot></slot>
         </div>