From 0e7ca27e3b587b49864232863d453e60e0c69a51 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sat, 9 Mar 2024 20:52:02 -0600
Subject: [PATCH] Move common board node CSS to class

---
 src/game/boards/Board.vue     | 11 +++++++++--
 src/game/boards/Draggable.vue | 10 +---------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/game/boards/Board.vue b/src/game/boards/Board.vue
index 8d33818..c11a084 100644
--- a/src/game/boards/Board.vue
+++ b/src/game/boards/Board.vue
@@ -26,7 +26,7 @@ import type { PanZoom } from "panzoom";
 import type { ComponentPublicInstance } from "vue";
 import { computed, ref } from "vue";
 // Required to make sure panzoom component gets registered:
-import "features/boards/board";
+import "./board";
 
 defineExpose({
     panZoomInstance: computed(() => stage.value?.panZoomInstance)
@@ -90,5 +90,12 @@ function onInit(panzoomInstance: PanZoom) {
     height: calc(100% + 100px);
     margin: -50px -10px;
 }
+
+.board-node {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transition-duration: 0s;
+}
 </style>
-game/boards/board
\ No newline at end of file
+game/boards/board
diff --git a/src/game/boards/Draggable.vue b/src/game/boards/Draggable.vue
index 9d59db6..b181b8b 100644
--- a/src/game/boards/Draggable.vue
+++ b/src/game/boards/Draggable.vue
@@ -1,5 +1,6 @@
 <template>
     <div
+        class="board-node"
         :style="`transform: translate(calc(${unref(position).x}px - 50%), ${unref(position).y}px);`"
         @mousedown="e => mouseDown(e)"
         @touchstart.passive="e => mouseDown(e)"
@@ -26,12 +27,3 @@ const props = defineProps<{
 
 const comp = shallowRef(coerceComponent(jsx(() => renderJSX(props.element))));
 </script>
-
-<style scoped>
-div {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transition-duration: 0s;
-}
-</style>