Add Zoom on Card

Use Left Alt Key (for now)
Closes #13

app.vue

@@ -26,6 +26,41 @@ onMounted(async () => {
   heron_cookie_login(heron_session.value)
 })
 
+function keyDownHandler(e: KeyboardEvent) {
+  if (e.repeat) { return }
+  console.log(e.code)
+  if (e.code != "AltLeft") { return }
+  goStore.zoomKeyPressed = true
+  e.preventDefault()
+  return false
+}
+
+function keyUpHandler(e: KeyboardEvent) {
+  if (e.repeat) { return }
+  if (e.code != "AltLeft") { return }
+  goStore.zoomKeyPressed = false
+  e.preventDefault()
+  return false
+}
+
+function follow_mouse(e: MouseEvent) {
+  goStore.clientMouseX = e.clientX
+  goStore.clientMouseY = e.clientY
+}
+
+onMounted(() => {
+  window.addEventListener("keydown", (keyDownHandler))
+  window.addEventListener("keyup", keyUpHandler)
+  document.addEventListener("mousemove", follow_mouse)
+})
+
+onUnmounted(() => {
+  window.removeEventListener("keydown", (keyDownHandler))
+  window.removeEventListener("keyup", keyUpHandler)
+  document.removeEventListener("mousemove", follow_mouse)
+})
+
+onDeactivated
 </script>
 <template>
   <div class="root_dom_div">

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>

netcode/index.ts

@@ -30,6 +30,11 @@ export class GameObjectRegister {
   current_game: Ref<Game | null>;
   lobby: Ref<Lobby | null>;
   self: Ref<Player | null>;
+  zoomKeyPressed: Ref<boolean>
+  hoveredCard: Ref<number | undefined>
+
+  clientMouseX: Ref<number>
+  clientMouseY: Ref<number>
   constructor() {
     this.effects = reactive(new Map());
     this.cards = reactive(new Map());
@@ -42,6 +47,10 @@ export class GameObjectRegister {
     this.current_game = ref(null);
     this.lobby = ref(null);
     this.self = ref(null);
+    this.zoomKeyPressed = ref(false);
+    this.hoveredCard = ref()
+    this.clientMouseX = ref(0)
+    this.clientMouseY = ref(0)
   }
 
   update_object(obj: GameObjectNetcode) {

pages/index.vue

@@ -18,6 +18,8 @@ import goStore, { setReady } from "@/netcode";
     <GameBoard v-if="goStore.context != 'lobby' && goStore.context != 'login'"></GameBoard>
     <LobbyView v-if="goStore.context == 'lobby'"></LobbyView>
     <RulesDisplay v-if="goStore.context == 'rules'"></RulesDisplay>
+    <CardOverlay v-if="goStore.zoomKeyPressed" :card_id="goStore.hoveredCard">
+    </CardOverlay>
   </div>
 </template>