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>