From 23e5f9f432850b1800d81f30df55b5f3b5a0cfe9 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Thu, 1 Aug 2024 17:31:09 +0200
Subject: [PATCH] Chore : components cleanup

---
 .vscode/launch.json                           |  34 ++
 .vscode/settings.json                         |   3 +-
 app.vue                                       |   7 +-
 assets/workers/ShaderWorker.ts                |   1 -
 components/CardComponent.vue                  |  23 -
 components/CardOverlay.disabled               |  51 ---
 components/CardPreview.vue                    | 410 ------------------
 components/GlobalOverlay.vue                  |  33 --
 components/PlayerList.vue                     |   0
 components/SelfView.vue                       | 114 -----
 components/game/Card.vue                      |  31 ++
 .../{MarketCards.vue => game/Market.vue}      |  28 +-
 .../TokenComponent.vue => game/Token.vue}     |   0
 .../card/Grouped.vue}                         |   9 +-
 components/game/card/Preview.vue              | 260 +++++++++++
 .../overlay/Discard.vue}                      |   5 +-
 .../{ => game/overlay}/LoadingScreen.vue      |   0
 .../{ => game/overlay}/ResultDialog.vue       |   4 +-
 .../overlay/options/Dialog.vue}               |   0
 .../{PlayerIcon.vue => game/player/Icon.vue}  |   0
 .../player/ListElement.vue}                   |   5 +-
 components/game/player/Self.vue               | 108 +++++
 .../{PlayerSlot.vue => game/player/Slot.vue}  |   6 +-
 .../player/Stats.vue}                         |   0
 middleware/auth.global.ts                     |   6 +-
 pages/game.vue                                | 146 ++++---
 pages/lobby.vue                               |   3 +-
 pages/rules.vue                               |  69 +--
 pages/test.vue                                |   1 +
 public/webgl-utils.js                         | 175 +++++---
 services/loadCards.ts                         |   4 +-
 31 files changed, 720 insertions(+), 816 deletions(-)
 create mode 100644 .vscode/launch.json
 delete mode 100644 components/CardComponent.vue
 delete mode 100644 components/CardOverlay.disabled
 delete mode 100644 components/CardPreview.vue
 delete mode 100644 components/GlobalOverlay.vue
 delete mode 100644 components/PlayerList.vue
 delete mode 100644 components/SelfView.vue
 create mode 100644 components/game/Card.vue
 rename components/{MarketCards.vue => game/Market.vue} (80%)
 rename components/{tokens/TokenComponent.vue => game/Token.vue} (100%)
 rename components/{CardsGrouped.vue => game/card/Grouped.vue} (97%)
 create mode 100644 components/game/card/Preview.vue
 rename components/{DiscardOverlay.vue => game/overlay/Discard.vue} (95%)
 rename components/{ => game/overlay}/LoadingScreen.vue (100%)
 rename components/{ => game/overlay}/ResultDialog.vue (95%)
 rename components/{OptionsDialog.vue => game/overlay/options/Dialog.vue} (100%)
 rename components/{PlayerIcon.vue => game/player/Icon.vue} (100%)
 rename components/{PlayerListElement.vue => game/player/ListElement.vue} (95%)
 create mode 100644 components/game/player/Self.vue
 rename components/{PlayerSlot.vue => game/player/Slot.vue} (99%)
 rename components/{PlayerStats.vue => game/player/Stats.vue} (100%)

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..35dcc6d
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,34 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "type": "chrome",
+        "request": "launch",
+        "name": "client: chrome",
+        "url": "http://localhost:3000",
+        "webRoot": "${workspaceFolder}"
+      },
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "server: nuxt",
+        "outputCapture": "std",
+        "program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
+        "args": [
+          "dev"
+        ],
+      }
+    ],
+    "compounds": [
+      {
+        "name": "fullstack: nuxt",
+        "configurations": [
+          "server: nuxt",
+          "client: chrome"
+        ]
+      }
+    ]
+  }
+  
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index bfc886b..47a53a9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,5 +4,6 @@
         "**/node_modules": true
     },
     "vue.server.hybridMode": true,
-    "editor.formatOnSave": true
+    "editor.formatOnSave": true,
+    "javascript.updateImportsOnFileMove.enabled": "never"
 }
\ No newline at end of file
diff --git a/app.vue b/app.vue
index 15080ed..e20f6e9 100644
--- a/app.vue
+++ b/app.vue
@@ -5,7 +5,6 @@ import { getCurrentInstance } from "vue";
 
 const nuxtApp = useNuxtApp();
 
-const router = useRouter();
 const authStore = useAuthStore();
 
 console.log("compiling cards...");
@@ -14,16 +13,14 @@ if (!app) {
   throw new Error("Couldn't bake cards: instance is null");
 }
 await compileCards(app);
-
-const _cards = cards;
 console.log("compiling done");
 
 useHead({
   title: "Héron Realms",
 });
-onMounted(()=>{
+onMounted(() => {
   authStore.whoami();
-})
+});
 </script>
 <template>
   <div class="root_dom_div">
diff --git a/assets/workers/ShaderWorker.ts b/assets/workers/ShaderWorker.ts
index e27c7a6..282c970 100644
--- a/assets/workers/ShaderWorker.ts
+++ b/assets/workers/ShaderWorker.ts
@@ -201,7 +201,6 @@ self.addEventListener("message", (e) => {
     screen.height = data.screen.height;
     loadShader();
   } else if (data.command == "killShader") {
-    console.log("killShader");
     self.clearInterval(interval);
     self.clearTimeout(timeout);
   } else if (data.command == "resumeShader") {
diff --git a/components/CardComponent.vue b/components/CardComponent.vue
deleted file mode 100644
index 6b2ee97..0000000
--- a/components/CardComponent.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-import type { Card } from "~/netcode/interfaces";
-import { cards } from "~/services/loadCards";
-
-export default {
-  props: ["card", "used_effects_indexes"],
-  data() {
-    const _card = this.card as Card;
-    return { cards };
-  },
-  beforeCreate() {
-    (this as any).component = () => cards[this.card.cardId];
-  },
-};
-</script>
-
-<template>
-  <Component
-    :is="cards[card.cardId]"
-    :used_effects_indexes="used_effects_indexes"
-    v-if="card"
-  />
-</template>
diff --git a/components/CardOverlay.disabled b/components/CardOverlay.disabled
deleted file mode 100644
index 4d0d885..0000000
--- a/components/CardOverlay.disabled
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import goStore from '~/netcode';
-
-export interface Props {
-    card_id: number | undefined
-}
-
-const settingsStore = useSettingsStore()
-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/${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"> -->
-    </div>
-</template>
-
-<style scoped>
-.card_overlay {
-    /* display: none; */
-    position: fixed;
-    z-index: 999;
-    display: flex;
-    pointer-events: none;
-}
-</style>
\ No newline at end of file
diff --git a/components/CardPreview.vue b/components/CardPreview.vue
deleted file mode 100644
index 37fe83c..0000000
--- a/components/CardPreview.vue
+++ /dev/null
@@ -1,410 +0,0 @@
-<script setup lang="ts">
-import type { Card } from "~/netcode/interfaces";
-
-export interface Props {
-  card?: Card;
-  card_id?: number;
-  locked?: boolean;
-  wrapped?: boolean;
-  tilted?: boolean;
-  interactible?: boolean;
-  noEffects?: boolean;
-  used_effects_indexes?: number[];
-  discardable?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  wrapped: () => false,
-  tilted: () => true,
-  locked: () => true,
-  interactible: () => true,
-  noEffects: () => false,
-  discardable: () => false,
-});
-
-const emit = defineEmits([
-  "click",
-  "effectClick",
-  "drop",
-  "move",
-  "startMove",
-  "stopMove",
-]);
-
-const settingsStore = useSettingsStore();
-
-const childCount = ref<number>(0);
-
-const card = ref<HTMLElement>();
-
-const dragStatus = ref<{
-  hasClickedDown: boolean;
-  dragging: boolean;
-  intervalEvent?: ReturnType<typeof setTimeout>;
-}>({
-  hasClickedDown: false,
-  dragging: false,
-});
-const initialOffsetX = ref(0);
-const initialOffsetY = ref(0);
-
-const mousePageX = ref(0);
-const mousePageY = ref(0);
-
-const offsetX = ref(0);
-const offsetY = ref(0);
-const offsetWidth = ref(0);
-const offsetHeight = ref(0);
-
-const translateX = ref(0);
-const translateY = ref(0);
-
-const extension = computed(() => {
-  if (settingsStore.cardStyle == CardStyles.SVG) {
-    return ".svg";
-  }
-  return ".png";
-});
-
-function cardClick() {
-  if (!props.card_id) return;
-  emit("click");
-}
-
-const isZooming = ref<boolean>(false);
-
-function mouseenter(e: MouseEvent) {
-  // User is Right Clicking
-  if ((e.buttons & 2) == 2) {
-    isZooming.value = true;
-  }
-
-  // goStore.hoveredCard = props.card_id
-}
-function mouseleave(e: MouseEvent) {
-  isZooming.value = false;
-}
-
-function rightClickDown(e: MouseEvent) {
-  isZooming.value = true;
-}
-
-function rightClickUp(e: MouseEvent) {
-  isZooming.value = false;
-}
-
-function startDrag(e: MouseEvent) {
-  emit("startMove");
-  dragStatus.value.dragging = true;
-  translateX.value = 0;
-  translateY.value = 0;
-  const cardElement = card.value;
-  if (!cardElement) {
-    return;
-  }
-  mousePageX.value = e.pageX;
-  mousePageY.value = e.pageY;
-  initialOffsetX.value = e.offsetX;
-  initialOffsetY.value = e.offsetY;
-  offsetX.value = cardElement.offsetLeft + e.offsetX;
-  offsetY.value = cardElement.offsetTop + e.offsetY;
-  translateX.value = mousePageX.value - offsetX.value;
-  translateY.value = mousePageY.value - offsetY.value;
-}
-
-function leftClickDown(e: MouseEvent) {
-  dragStatus.value.hasClickedDown = true;
-  window.addEventListener("mousemove", mouseMove, false);
-}
-
-function leftClickUpGlobal(e: MouseEvent) {
-  mousePageX.value = e.pageX;
-  mousePageY.value = e.pageY;
-
-  if (dragStatus.value.dragging && dragStatus.value.hasClickedDown) {
-    dragStatus.value.dragging = false;
-    emit("drop", { x: e.pageX, y: e.pageY, uuid: props.card?._id });
-    emit("stopMove");
-  }
-  dragStatus.value.hasClickedDown = false;
-  clearTimeout(dragStatus.value.intervalEvent);
-  window.removeEventListener("mousemove", mouseMove, false);
-}
-
-function leftClickUp(e: MouseEvent) {
-  if (dragStatus.value.dragging == false && dragStatus.value.hasClickedDown) {
-    dragStatus.value.hasClickedDown = false;
-    cardClick();
-    return;
-  }
-}
-
-const sensitivity = 0.5;
-function mouseMove(e: MouseEvent) {
-  if (
-    dragStatus.value.hasClickedDown &&
-    !dragStatus.value.dragging &&
-    Math.sqrt(Math.abs(e.movementX * e.movementY)) > sensitivity
-    && settingsStore.enableDragging
-  ) {
-    startDrag(e);
-  }
-
-  const cardElement = card.value;
-  if (!cardElement) {
-    return;
-  }
-  mousePageX.value = e.pageX;
-  mousePageY.value = e.pageY;
-  // console.log(cardElement.offsetLeft);
-  offsetX.value = cardElement.offsetLeft + initialOffsetX.value;
-  offsetY.value = cardElement.offsetTop + initialOffsetY.value;
-
-  translateX.value = mousePageX.value - offsetX.value;
-  translateY.value = mousePageY.value - offsetY.value;
-
-  // emit("move", { x: e.pageX, y: e.pageY, uuid: props.card?._id });
-}
-
-defineExpose({
-  offsetX,
-  offsetY,
-  offsetWidth,
-  offsetHeight,
-  uuid: props.card?._id,
-});
-
-onMounted(() => {
-  window.addEventListener("mouseup", leftClickUpGlobal, false);
-  const cardElement = card.value;
-  if (!cardElement) {
-    return;
-  }
-  offsetX.value = cardElement.offsetLeft;
-  offsetY.value = cardElement.offsetTop;
-  offsetWidth.value = cardElement.offsetWidth;
-  offsetHeight.value = cardElement.offsetHeight;
-  cardElement.offsetWidth;
-});
-
-// onRenderTriggered(() => {
-//   const cardElement = card.value;
-//   if (!cardElement) {
-//     return;
-//   }
-//   offsetX.value = cardElement.offsetLeft + initialOffsetX.value;
-//   offsetY.value = cardElement.offsetTop + initialOffsetY.value;
-
-//   translateX.value = mousePageX.value - offsetX.value;
-//   translateY.value = mousePageY.value - offsetY.value;
-// });
-
-onUpdated(() => {
-  const cardElement = card.value;
-  if (!cardElement) {
-    return;
-  }
-  offsetX.value = cardElement.offsetLeft + initialOffsetX.value;
-  offsetY.value = cardElement.offsetTop + initialOffsetY.value;
-
-  translateX.value = mousePageX.value - offsetX.value;
-  translateY.value = mousePageY.value - offsetY.value;
-});
-
-onUnmounted(() => {
-  window.removeEventListener("mouseup", leftClickUpGlobal, false);
-  // window.addEventListener("mousemove", mouseMove, false);
-});
-</script>
-
-<template>
-  <div ref="card" class="card" :class="{
-    dragging: dragStatus.dragging,
-    active: childCount > 0,
-    wrapped,
-    unlocked: !props.locked,
-    zoom: isZooming,
-    no_effects: noEffects || !props.locked,
-    discardable,
-  }" @contextmenu.prevent="false" @mousedown.right="rightClickDown" @mouseup.right="rightClickUp"
-    @mousedown.left="leftClickDown" @mouseup.left="leftClickUp" @mouseenter="mouseenter" @mouseleave="mouseleave">
-    <template v-if="props.card_id">
-      <!-- <svg
-        width="180"
-        height="250"
-        
-        viewBox="0 0 298 417"
-      >
-        <use
-          :xlink:href="
-            `/cards/${settingsStore.cardStyle}/` +
-            props.card_id.toString().padStart(3, '0') +
-            extension +
-            '#card' +
-            props.card_id
-          "
-          @activate_effect="activateEffect($event)"
-        ></use>
-      </svg> -->
-      <CardComponent v-if="settingsStore.cardStyle == CardStyles.SVG && props.card" :card="props.card"
-        :used_effects_indexes="used_effects_indexes" @effectClick="emit('effectClick', $event)"></CardComponent>
-      <img :class="`card_image`" v-else :src="`/cards/${settingsStore.cardStyle}/` +
-        props.card_id.toString().padStart(3, '0') +
-        extension
-        " draggable="false" />
-      <div id="overlay">
-        <slot></slot>
-      </div>
-    </template>
-
-    <img :class="`card_image`" v-else :src="'/cards/background.png'" draggable="false" />
-  </div>
-</template>
-
-<style scoped>
-.card.dragging {
-  transform: translateX(v-bind("translateX + 'px'")) translateY(v-bind("translateY + 'px'"));
-  cursor: grabbing;
-  z-index: 999;
-}
-
-.card.dragging>svg {
-  transform: scale(110%);
-}
-
-.card.active {
-  cursor: pointer;
-}
-
-.card_image {
-  max-height: var(--max-height);
-  z-index: 1;
-  height: var(--max-height);
-}
-
-.card.wrapped {
-  height: 1px;
-  margin: 0;
-}
-
-.card.wrapped .card_image {
-  filter: drop-shadow(0.5px 0.5px 0.5px gray) drop-shadow(-0.5px -0.5px 0.5px gray);
-}
-
-.card.zoom {
-  transform: scale(200%);
-  z-index: 10;
-}
-
-#contextMenuButtons {
-  position: absolute;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  word-break: break-word;
-  bottom: 0;
-  width: 99%;
-  transform: translateY(-0px);
-  transition: 0.1s transform cubic-bezier(1, 1.81, 0.59, 1.42);
-}
-
-.card.active:hover #contextMenuButtons {
-  transform: translateY(100%);
-}
-</style>
-<style>
-.card.no_effects svg>* {
-  pointer-events: none;
-}
-
-#contextMenuButtons>* {
-  flex: 1;
-  border-radius: 12px;
-  min-height: 50px;
-}
-
-@keyframes gelatine {
-
-  from,
-  to {}
-
-  25% {
-    transform: scale(1, 1.5);
-  }
-
-  50% {
-    transform: scale(1.5, 1);
-  }
-
-  75% {
-    transform: scale(1.1, 1.3);
-  }
-}
-
-.svg_resource_icon {
-  cursor: pointer;
-  animation: gelatine 0.3s normal;
-  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.svg_resource_icon:active {
-  animation: none;
-}
-
-.svg_resource_icon:hover {
-  transform: scale(130%);
-}
-
-.used {
-  opacity: 0.2;
-  filter: grayscale(0.6);
-  pointer-events: none;
-}
-
-.svg_effect text {
-  cursor: pointer;
-}
-
-.card {
-  --max-height: 250px;
-  --max-width: 179px;
-  --margin-bottom: calc(var(--max-height) * 0.05);
-  position: relative;
-  display: flex;
-  justify-content: center;
-  margin-bottom: 0px;
-  margin-top: var(--margin-bottom);
-  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  pointer-events: all;
-  max-height: var(--max-height);
-  max-width: var(--max-width);
-  /* cursor: grab; */
-}
-
-.card:not(svg) {
-  cursor: grab;
-}
-
-#overlay {
-  position: absolute;
-  top: 20%;
-  width: calc(100% - 8%);
-  height: 49%;
-}
-
-.card.unlocked {
-  margin-top: 0px;
-  margin-bottom: var(--margin-bottom);
-  transform: translateY(calc(var(--margin-bottom) * -0.25));
-  filter: drop-shadow(calc(var(--margin-bottom) * 0.3) var(--margin-bottom) 1px rgba(0, 0, 0, 0.6));
-  cursor: pointer;
-}
-
-.card.discardable {
-  cursor: not-allowed;
-}
-
-.card.discardable svg {
-  pointer-events: none;
-}
-</style>
diff --git a/components/GlobalOverlay.vue b/components/GlobalOverlay.vue
deleted file mode 100644
index ec9e45b..0000000
--- a/components/GlobalOverlay.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-const displayOptions = ref(false);
-</script>
-
-<template>
-  <div :class="`card_overlay`" ref="card">
-    <img
-      class="settings_button"
-      src="/img/settings.png"
-      alt="settings"
-      @click="displayOptions = true"
-    />
-  </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;
-  width: 30px;
-  padding: 5px;
-}
-</style>
diff --git a/components/PlayerList.vue b/components/PlayerList.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/components/SelfView.vue b/components/SelfView.vue
deleted file mode 100644
index f74a76e..0000000
--- a/components/SelfView.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script setup lang="ts">
-import type { Container } from '~/netcode/interfaces';
-
-export interface Props {
-    container: Container
-}
-
-const props = defineProps<Props>()
-
-</script>
-
-<template>
-    <div class="cards_container" id="self_hand">
-        <!-- <CardPreview :card_id="c.cardId" v-for="c in container.cards "> -->
-        <!-- <button v-if="c && goStore.self?.turn && (goStore.self.turn.fuck_u_markers ?? 0) > 0"
-                @click.stop="discard(c)">DISCARD</button> -->
-        <!-- </CardPreview> -->
-        <CardsGrouped :container="container" :wrapped="false">
-        </CardsGrouped>
-    </div>
-
-</template>
-
-<style scoped>
-.cards_container {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: center;
-}
-
-.stack_and_discard {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: center;
-
-}
-
-#play_all {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    font-size: 10em;
-}
-
-#turn_data {
-    position: fixed;
-    bottom: 10px;
-    left: 50%;
-    right: 50%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    z-index: 9;
-}
-
-.warning {
-    background-color: rgba(255, 0, 0, 0.7);
-    color: white;
-    padding: 5px;
-    border-radius: 5px;
-    width: 60px;
-    font-size: 0.9em;
-}
-
-#end_turn {
-    z-index: 10;
-}
-
-#self_hand {
-    position: fixed;
-    z-index: 1;
-    display: flex;
-    align-items: stretch;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    left: 50%;
-    bottom: -50px;
-    max-width: 100vw;
-    justify-content: flex-start;
-    transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
-    transform: translate(-50%, 150px)
-}
-
-#self_hand:hover {
-    transform: translate(-50%, 0px);
-}
-
-#end_turn {
-    width: 50px;
-    height: 50px;
-}
-</style>
-
-<style>
-#self_hand .card {
-    transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
-    overflow: visible;
-}
-
-#self_hand .card #contextMenuButtons {
-    top: 0;
-    bottom: unset;
-}
-
-#self_hand .card.active:hover #contextMenuButtons {
-    transform: translateY(-100%);
-}
-
-
-#self_hand .card:hover {
-    transform: translateY(-40px);
-
-}
-</style>
\ No newline at end of file
diff --git a/components/game/Card.vue b/components/game/Card.vue
new file mode 100644
index 0000000..a4eb3d6
--- /dev/null
+++ b/components/game/Card.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import { cards } from "~/services/loadCards";
+
+export default {
+  props: {
+    cardId: {
+      required: true,
+      type: Number,
+    },
+    used_effects_indexes: {
+      default: [],
+      type: Array,
+    },
+  },
+  data() {
+    return { cards };
+  },
+  beforeCreate() {
+    console.log(cards);
+    (this as any).component = () => cards[this.cardId];
+  },
+};
+</script>
+
+<template>
+  <Component
+    :is="cards[cardId]"
+    :cardId="cardId"
+    :used_effects_indexes="used_effects_indexes"
+  />
+</template>
diff --git a/components/MarketCards.vue b/components/game/Market.vue
similarity index 80%
rename from components/MarketCards.vue
rename to components/game/Market.vue
index 280b845..64eeaab 100644
--- a/components/MarketCards.vue
+++ b/components/game/Market.vue
@@ -7,7 +7,6 @@ import {
   type Effect,
   type Game,
 } from "~/netcode/interfaces";
-import TokenComponent from "./tokens/TokenComponent.vue";
 
 export interface Props {
   game: Game;
@@ -61,14 +60,29 @@ function tokenClick({ card, token }: { card: Card; token: Effect }) {
 
 <template>
   <div class="market">
-    <CardsGrouped :container="market" @cardClick="marketCardClick" :noEffects="true" :tokens="marketTokens"
-      @tokenClick="tokenClick">
-    </CardsGrouped>
+    <GameCardGrouped
+      :container="market"
+      @cardClick="marketCardClick"
+      :noEffects="true"
+      :tokens="marketTokens"
+      @tokenClick="tokenClick"
+    >
+    </GameCardGrouped>
     <div class="separator"></div>
-    <CardsGrouped :container="fire_gems" :wrapped="true" @cardClick="fireGemCardClick" :noEffects="true"
-      :tokens="gemsTokens" @tokenClick="tokenClick"></CardsGrouped>
+    <GameCardGrouped
+      :container="fire_gems"
+      :wrapped="true"
+      @cardClick="fireGemCardClick"
+      :noEffects="true"
+      :tokens="gemsTokens"
+      @tokenClick="tokenClick"
+    ></GameCardGrouped>
     <div class="separator"></div>
-    <CardsGrouped :container="marketStack" :wrapped="true" :hidden="true"></CardsGrouped>
+    <GameCardGrouped
+      :container="marketStack"
+      :wrapped="true"
+      :hidden="true"
+    ></GameCardGrouped>
   </div>
 </template>
 
diff --git a/components/tokens/TokenComponent.vue b/components/game/Token.vue
similarity index 100%
rename from components/tokens/TokenComponent.vue
rename to components/game/Token.vue
diff --git a/components/CardsGrouped.vue b/components/game/card/Grouped.vue
similarity index 97%
rename from components/CardsGrouped.vue
rename to components/game/card/Grouped.vue
index 4c98145..0a193e8 100644
--- a/components/CardsGrouped.vue
+++ b/components/game/card/Grouped.vue
@@ -8,7 +8,6 @@ import {
   type Effect,
   type PlayingTurn,
 } from "~/netcode/interfaces";
-import TokenComponent from "./tokens/TokenComponent.vue";
 
 export interface Props {
   container: Container;
@@ -138,7 +137,7 @@ function discardCardClick(card: Card) {
     :class="{ wrapped, rotate: container.shuffling }"
   >
     <TransitionGroup name="list">
-      <CardPreview
+      <GameCardPreview
         @click="$emit('cardClick', c._id)"
         @effectClick="$emit('effectClick', c._id, $event)"
         v-for="(c, i) in cards"
@@ -159,7 +158,7 @@ function discardCardClick(card: Card) {
         :discardable="discardable"
       >
         <template v-for="t in tokens">
-          <TokenComponent
+          <GameToken
             :token="t"
             @useToken="tokenClick(t, c)"
             v-if="
@@ -181,7 +180,7 @@ function discardCardClick(card: Card) {
               (t.effect == CardEffects.RESTACK_DISCARDED_CHAMPION &&
                 c.cardType == CardType.CHAMPION)
             "
-          ></TokenComponent>
+          ></GameToken>
         </template>
         <button
           v-if="championsKillable && c.cardType == CardType.CHAMPION"
@@ -199,7 +198,7 @@ function discardCardClick(card: Card) {
         >
           Discard
         </button>
-      </CardPreview>
+      </GameCardPreview>
     </TransitionGroup>
     <!-- <img :class="`card_image`" :src="'/cards/background.png'" draggable="false"> -->
   </div>
diff --git a/components/game/card/Preview.vue b/components/game/card/Preview.vue
new file mode 100644
index 0000000..198d397
--- /dev/null
+++ b/components/game/card/Preview.vue
@@ -0,0 +1,260 @@
+<script setup lang="ts">
+export interface Props {
+  uuid?: string;
+  cardId?: number;
+  locked?: boolean;
+  wrapped?: boolean;
+  tilted?: boolean;
+  interactible?: boolean;
+  noEffects?: boolean;
+  used_effects_indexes?: number[];
+  discardable?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  wrapped: () => false,
+  tilted: () => true,
+  locked: () => true,
+  interactible: () => true,
+  noEffects: () => false,
+  discardable: () => false,
+});
+
+const emit = defineEmits([
+  "click",
+  "effectClick",
+  "drop",
+  "move",
+  "startMove",
+  "stopMove",
+]);
+
+const settingsStore = useSettingsStore();
+
+const childCount = ref<number>(0);
+
+const extension = computed(() => {
+  if (settingsStore.cardStyle == CardStyles.SVG) {
+    return ".svg";
+  }
+  return ".png";
+});
+
+function cardClick() {
+  if (!props.cardId) return;
+  emit("click");
+}
+
+const isZooming = ref<boolean>(false);
+
+function mouseenter(e: MouseEvent) {
+  // User is Right Clicking
+  if ((e.buttons & 2) == 2) {
+    isZooming.value = true;
+  }
+
+  // goStore.hoveredCard = props.card_id
+}
+function mouseleave(e: MouseEvent) {
+  isZooming.value = false;
+}
+
+function rightClickDown(e: MouseEvent) {
+  isZooming.value = true;
+}
+
+function rightClickUp(e: MouseEvent) {
+  isZooming.value = false;
+}
+</script>
+
+<template>
+  <div
+    ref="cardHTMLElement"
+    class="card"
+    :class="{
+      active: childCount > 0,
+      wrapped,
+      unlocked: !props.locked,
+      zoom: isZooming,
+      no_effects: noEffects || !props.locked,
+      discardable,
+    }"
+    @contextmenu.prevent="false"
+    @mousedown.right="rightClickDown"
+    @mouseup.right="rightClickUp"
+    @mouseenter="mouseenter"
+    @mouseleave="mouseleave"
+  >
+    <template v-if="props.cardId">
+      <GameCard
+        v-if="settingsStore.cardStyle == CardStyles.SVG"
+        :cardId="props.cardId"
+        :used_effects_indexes="used_effects_indexes"
+        @effectClick="emit('effectClick', $event)"
+      ></GameCard>
+      <div id="overlay">
+        <slot></slot>
+      </div>
+    </template>
+
+    <img
+      :class="`card_image`"
+      v-else
+      :src="'/cards/background.png'"
+      draggable="false"
+    />
+  </div>
+</template>
+
+<style scoped>
+/* .card.dragging {
+  transform: translateX(v-bind("translateX + 'px'"))
+    translateY(v-bind("translateY + 'px'"));
+  cursor: grabbing;
+  z-index: 999;
+} */
+
+/* .card.dragging > svg {
+  transform: scale(110%);
+} */
+
+.card.active {
+  cursor: pointer;
+}
+
+.card_image {
+  max-height: var(--max-height);
+  z-index: 1;
+  height: var(--max-height);
+}
+
+.card.wrapped {
+  height: 1px;
+  margin: 0;
+}
+
+.card.wrapped .card_image {
+  filter: drop-shadow(0.5px 0.5px 0.5px gray)
+    drop-shadow(-0.5px -0.5px 0.5px gray);
+}
+
+.card.zoom {
+  transform: scale(200%);
+  z-index: 10;
+}
+
+#contextMenuButtons {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  word-break: break-word;
+  bottom: 0;
+  width: 99%;
+  transform: translateY(-0px);
+  transition: 0.1s transform cubic-bezier(1, 1.81, 0.59, 1.42);
+}
+
+.card.active:hover #contextMenuButtons {
+  transform: translateY(100%);
+}
+</style>
+<style>
+.card.no_effects svg > * {
+  pointer-events: none;
+}
+
+#contextMenuButtons > * {
+  flex: 1;
+  border-radius: 12px;
+  min-height: 50px;
+}
+
+@keyframes gelatine {
+  from,
+  to {
+  }
+
+  25% {
+    transform: scale(1, 1.5);
+  }
+
+  50% {
+    transform: scale(1.5, 1);
+  }
+
+  75% {
+    transform: scale(1.1, 1.3);
+  }
+}
+
+.svg_resource_icon {
+  cursor: pointer;
+  animation: gelatine 0.3s normal;
+  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.svg_resource_icon:active {
+  animation: none;
+}
+
+.svg_resource_icon:hover {
+  transform: scale(130%);
+}
+
+.used {
+  opacity: 0.2;
+  filter: grayscale(0.6);
+  pointer-events: none;
+}
+
+.svg_effect text {
+  cursor: pointer;
+}
+
+.card {
+  --max-height: 250px;
+  --max-width: 179px;
+  --margin-bottom: calc(var(--max-height) * 0.05);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0px;
+  margin-top: var(--margin-bottom);
+  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  pointer-events: all;
+  max-height: var(--max-height);
+  max-width: var(--max-width);
+  /* cursor: grab; */
+}
+
+.card:not(svg) {
+  cursor: grab;
+}
+
+#overlay {
+  position: absolute;
+  top: 20%;
+  width: calc(100% - 8%);
+  height: 49%;
+}
+
+.card.unlocked {
+  margin-top: 0px;
+  margin-bottom: var(--margin-bottom);
+  transform: translateY(calc(var(--margin-bottom) * -0.25));
+  filter: drop-shadow(
+    calc(var(--margin-bottom) * 0.3) var(--margin-bottom) 1px rgba(0, 0, 0, 0.6)
+  );
+  cursor: pointer;
+}
+
+.card.discardable {
+  cursor: not-allowed;
+}
+
+.card.discardable svg {
+  pointer-events: none;
+}
+</style>
diff --git a/components/DiscardOverlay.vue b/components/game/overlay/Discard.vue
similarity index 95%
rename from components/DiscardOverlay.vue
rename to components/game/overlay/Discard.vue
index 0989d37..9f58925 100644
--- a/components/DiscardOverlay.vue
+++ b/components/game/overlay/Discard.vue
@@ -8,7 +8,6 @@ import {
   type Game,
   type Player,
 } from "~/netcode/interfaces";
-import TokenComponent from "./tokens/TokenComponent.vue";
 
 export interface Props {
   game: Game;
@@ -51,7 +50,7 @@ function tokenClick({ card, token }: { card: Card; token: Effect }) {
     <span>Discard of {{ player.user.username }}</span>
 
     <div class="discard_unwrapped" @click.stop>
-      <CardsGrouped
+      <GameCardPreview
         :container="discard"
         :wrapped="false"
         :hidden="false"
@@ -59,7 +58,7 @@ function tokenClick({ card, token }: { card: Card; token: Effect }) {
         :noEffects="true"
         :playingTurn="game.currentTurn"
         @tokenClick="tokenClick"
-      ></CardsGrouped>
+      ></GameCardPreview>
     </div>
   </div>
 </template>
diff --git a/components/LoadingScreen.vue b/components/game/overlay/LoadingScreen.vue
similarity index 100%
rename from components/LoadingScreen.vue
rename to components/game/overlay/LoadingScreen.vue
diff --git a/components/ResultDialog.vue b/components/game/overlay/ResultDialog.vue
similarity index 95%
rename from components/ResultDialog.vue
rename to components/game/overlay/ResultDialog.vue
index 18a569a..98c18ef 100644
--- a/components/ResultDialog.vue
+++ b/components/game/overlay/ResultDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Player } from "~/netcode/Player";
+import type { Player } from "~/netcode/interfaces";
 
 export interface Props {
   isVisible: Boolean;
@@ -27,7 +27,7 @@ const close = () => {
         <h3 v-else>Défaite!</h3>
       </div>
       <div class="dialog-body">
-        <PlayerIcon :player="players[0]"></PlayerIcon>
+        <GamePlayerIcon :player="players[0]"></GamePlayerIcon>
         <p v-if="won">Vous avez gagné!</p>
         <p v-else>
           Vous avez perdu face à ce magnifique individu qui a très clairement
diff --git a/components/OptionsDialog.vue b/components/game/overlay/options/Dialog.vue
similarity index 100%
rename from components/OptionsDialog.vue
rename to components/game/overlay/options/Dialog.vue
diff --git a/components/PlayerIcon.vue b/components/game/player/Icon.vue
similarity index 100%
rename from components/PlayerIcon.vue
rename to components/game/player/Icon.vue
diff --git a/components/PlayerListElement.vue b/components/game/player/ListElement.vue
similarity index 95%
rename from components/PlayerListElement.vue
rename to components/game/player/ListElement.vue
index f194206..0eea52f 100644
--- a/components/PlayerListElement.vue
+++ b/components/game/player/ListElement.vue
@@ -60,11 +60,12 @@ function damage() {
         Prêt!
       </div> -->
       <div id="player_info">
-        <PlayerIcon :player="props.player"></PlayerIcon>
+        <GamePlayerIcon :player="props.player"></GamePlayerIcon>
       </div>
       <div id="player_stats">
         <!-- <template v-if="goStore.current_game?.started"> -->
-        <PlayerStats :game="props.game" :player="props.player"> </PlayerStats>
+        <GamePlayerStats :game="props.game" :player="props.player">
+        </GamePlayerStats>
         <!-- </template> -->
       </div>
       <button
diff --git a/components/game/player/Self.vue b/components/game/player/Self.vue
new file mode 100644
index 0000000..c6578b7
--- /dev/null
+++ b/components/game/player/Self.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { Container } from "~/netcode/interfaces";
+
+export interface Props {
+  container: Container;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div class="cards_container" id="self_hand">
+    <!-- <CardPreview :card_id="c.cardId" v-for="c in container.cards "> -->
+    <!-- <button v-if="c && goStore.self?.turn && (goStore.self.turn.fuck_u_markers ?? 0) > 0"
+                @click.stop="discard(c)">DISCARD</button> -->
+    <!-- </CardPreview> -->
+    <GameCardGrouped :container="container" :wrapped="false"> </GameCardGrouped>
+  </div>
+</template>
+
+<style scoped>
+.cards_container {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: center;
+}
+
+.stack_and_discard {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: center;
+}
+
+#play_all {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 10em;
+}
+
+#turn_data {
+  position: fixed;
+  bottom: 10px;
+  left: 50%;
+  right: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 9;
+}
+
+.warning {
+  background-color: rgba(255, 0, 0, 0.7);
+  color: white;
+  padding: 5px;
+  border-radius: 5px;
+  width: 60px;
+  font-size: 0.9em;
+}
+
+#end_turn {
+  z-index: 10;
+}
+
+#self_hand {
+  position: fixed;
+  z-index: 1;
+  display: flex;
+  align-items: stretch;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  left: 50%;
+  bottom: -50px;
+  max-width: 100vw;
+  justify-content: flex-start;
+  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
+  transform: translate(-50%, 150px);
+}
+
+#self_hand:hover {
+  transform: translate(-50%, 0px);
+}
+
+#end_turn {
+  width: 50px;
+  height: 50px;
+}
+</style>
+
+<style>
+#self_hand .card {
+  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
+  overflow: visible;
+}
+
+#self_hand .card #contextMenuButtons {
+  top: 0;
+  bottom: unset;
+}
+
+#self_hand .card.active:hover #contextMenuButtons {
+  transform: translateY(-100%);
+}
+
+#self_hand .card:hover {
+  transform: translateY(-40px);
+}
+</style>
diff --git a/components/PlayerSlot.vue b/components/game/player/Slot.vue
similarity index 99%
rename from components/PlayerSlot.vue
rename to components/game/player/Slot.vue
index fe873f4..b89d5db 100644
--- a/components/PlayerSlot.vue
+++ b/components/game/player/Slot.vue
@@ -198,7 +198,7 @@ function discardCardClick(card: Card) {
             </div> -->
       <!-- <br /> -->
 
-      <CardsGrouped
+      <GameCardGrouped
         :container="player.board"
         :wrapped="false"
         :playingTurn="props.game.currentTurn"
@@ -213,8 +213,8 @@ function discardCardClick(card: Card) {
         @damageChampionClick="damageChampionClick"
         @discardCardClick="discardCardClick"
       >
-      </CardsGrouped>
-      <br>
+      </GameCardGrouped>
+      <br />
       <!-- <div class="cards_container"> -->
       <!-- HAND -->
       <!-- <template v-if="isSelf">
diff --git a/components/PlayerStats.vue b/components/game/player/Stats.vue
similarity index 100%
rename from components/PlayerStats.vue
rename to components/game/player/Stats.vue
diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
index 43717f3..6776533 100644
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@@ -33,12 +33,8 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
   //         return navigateTo('/login')
   //     }
   // }
-  console.log(to.path);
+
   if (to.path.startsWith("/game")) {
-    console.log(to.query.id);
-    // if (Array.isArray(to.query.id)) {
-    //   return navigateTo("/lobby");
-    // }
     return;
   }
   if (to.path == "/login") {
diff --git a/pages/game.vue b/pages/game.vue
index e91a3a3..7780ba1 100644
--- a/pages/game.vue
+++ b/pages/game.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import LoadingScreen from "~/components/LoadingScreen.vue";
+import LoadingScreen from "~/components/game/overlay/LoadingScreen.vue";
 import { endTurn, subscribe, useToken } from "~/netcode";
 import { delay } from "~/netcode/events";
 import {
@@ -9,7 +9,6 @@ import {
   type Player,
 } from "~/netcode/interfaces";
 import { playSound } from "~/helpers/audioHelpers";
-import TokenComponent from "~/components/tokens/TokenComponent.vue";
 
 const config = useRuntimeConfig();
 const settingsStore = useSettingsStore();
@@ -18,19 +17,18 @@ const authStore = useAuthStore();
 const route = useRoute();
 const gameId = route.query.id;
 
-
 const {
   data: game,
   pending,
   error,
   refresh,
-  execute
+  execute,
 } = await useFetch<Game>(config.public.endpoint + `/games/${gameId}`, {
   credentials: "include",
-  server: false
+  server: false,
 });
 
-const awaitGameReady = execute()
+const awaitGameReady = execute();
 
 const containers = computed<Record<string, Container>>(() => ({
   [game.value!.fireGems._id]: game.value!.fireGems,
@@ -70,7 +68,7 @@ async function execAction(callback: () => Promise<any>) {
 
 const handlers = {
   start: async () => {
-    throw new Error("not implemented")
+    throw new Error("not implemented");
   },
   populateContainer: async (data: any) => {
     const fromContainer = containers.value[data.container._id as string];
@@ -146,9 +144,7 @@ const handlers = {
     await delay(settingsStore.animationSpeed);
   },
   unlockEffect: async (data: any, game: Game) => {
-    const effectIndex = game.currentTurn.lockedEffects.indexOf(
-      data.effect
-    );
+    const effectIndex = game.currentTurn.lockedEffects.indexOf(data.effect);
     game.currentTurn.lockedEffects.splice(effectIndex, 1);
     await delay(settingsStore.animationSpeed);
   },
@@ -183,9 +179,7 @@ const handlers = {
   },
   "player.addFuckUMarker": async (data: any, game: Game) => {
     console.log(`adding fuckUMarkers : ` + data.operation);
-    const targetPlayer = playerList.value?.find(
-      (p) => p._id == data.playerId
-    );
+    const targetPlayer = playerList.value?.find((p) => p._id == data.playerId);
     if (!targetPlayer) {
       throw new Error("Cannot add fuckU Markers : player not found");
     }
@@ -193,9 +187,7 @@ const handlers = {
   },
   "player.removeFuckUMarker": async (data: any, game: Game) => {
     console.log(`adding fuckUMarkers : ` + data.operation);
-    const targetPlayer = playerList.value?.find(
-      (p) => p._id == data.playerId
-    );
+    const targetPlayer = playerList.value?.find((p) => p._id == data.playerId);
     if (!targetPlayer) {
       throw new Error("Cannot remove fuckU Markers : player not found");
     }
@@ -203,9 +195,7 @@ const handlers = {
   },
   "player.addDiscardMarker": async (data: any, game: Game) => {
     console.log(`adding discardMarkers : ` + data.operation);
-    const targetPlayer = playerList.value?.find(
-      (p) => p._id == data.playerId
-    );
+    const targetPlayer = playerList.value?.find((p) => p._id == data.playerId);
     if (!targetPlayer) {
       throw new Error("Cannot add discard Markers : player not found");
     }
@@ -213,9 +203,7 @@ const handlers = {
   },
   "player.removeDiscardMarker": async (data: any, game: Game) => {
     console.log(`adding fuckUMarkers : ` + data.operation);
-    const targetPlayer = playerList.value?.find(
-      (p) => p._id == data.playerId
-    );
+    const targetPlayer = playerList.value?.find((p) => p._id == data.playerId);
     if (!targetPlayer) {
       throw new Error("Cannot remove discard Markers : player not found");
     }
@@ -231,21 +219,21 @@ const handlers = {
     game.teams.splice(index, 1);
   },
   consumeEffect: async (data: any) => {
-    console.warn("consumeEffect not implemented")
+    console.warn("consumeEffect not implemented");
   },
   endGame: async () => {
-    alert("game ended")
-  }
-}
+    alert("game ended");
+  },
+};
 
 onMounted(async () => {
   awaitGameReady.then(() => {
-    console.log(game.value)
+    console.log(game.value);
     if (game.value == null) {
       navigateTo("/lobby");
       throw new Error("game not found");
     }
-    focusedPlayer.value = (selfPlayer.value ?? playerList.value![0])
+    focusedPlayer.value = selfPlayer.value ?? playerList.value![0];
 
     eventSource = subscribe(`/games/${gameId}/subscribe`);
     eventSource.addEventListener("message", async (message) => {
@@ -255,15 +243,16 @@ onMounted(async () => {
       }
       const data = JSON.parse(message.data);
       queueAction(async () => {
-        await handlers[data.type as keyof typeof handlers](data, current_game)
-      })
+        await handlers[data.type as keyof typeof handlers](data, current_game);
+      });
     });
-  })
-
+  });
 });
 
-const playerList = computed(() =>
-  game.value && game.value.teams.reduce((acc, t) => acc.concat(t.players), [] as Player[])
+const playerList = computed(
+  () =>
+    game.value &&
+    game.value.teams.reduce((acc, t) => acc.concat(t.players), [] as Player[])
 );
 const selfPlayer = computed(() =>
   authStore.logged
@@ -275,7 +264,7 @@ const isTurn = computed(
     game.value &&
     selfPlayer.value &&
     game.value.teams.find((t) => t.players.includes(selfPlayer.value!))?._id ==
-    game.value.currentTurn.currentTeam
+      game.value.currentTurn.currentTeam
 );
 
 const turnChangeAnimationSpeed = computed(
@@ -338,48 +327,95 @@ onUnmounted(() => {
 
 <template>
   <div @contextmenu.prevent="false" id="game_board">
-    <AnimatedBackground @ready="loaded = true" :isTurn="isTurn ?? false"></AnimatedBackground>
+    <AnimatedBackground
+      @ready="loaded = true"
+      :isTurn="isTurn ?? false"
+    ></AnimatedBackground>
     <!-- <AnimatedBackground :isTurn="false"></AnimatedBackground> -->
     <template v-if="game && focusedPlayer && playerList">
       <Transition name="slide-left" mode="out-in">
         <div id="stack_discard" :key="focusedPlayer?._id">
           <div id="stack">
-            <CardsGrouped :container="focusedPlayer.stack" :wrapped="true" :hidden="true">
-            </CardsGrouped>
+            <GameCardGrouped
+              :container="focusedPlayer.stack"
+              :wrapped="true"
+              :hidden="true"
+            >
+            </GameCardGrouped>
           </div>
 
-          <div id="discard" :class="{ invisible: discard_unwrapped }" @click="() => (discard_unwrapped = true)">
-            <CardsGrouped :container="focusedPlayer.discard" :wrapped="true" @card-click="showDiscard"
-              :no-effects="true">
-            </CardsGrouped>
+          <div
+            id="discard"
+            :class="{ invisible: discard_unwrapped }"
+            @click="() => (discard_unwrapped = true)"
+          >
+            <GameCardGrouped
+              :container="focusedPlayer.discard"
+              :wrapped="true"
+              @card-click="showDiscard"
+              :no-effects="true"
+            >
+            </GameCardGrouped>
           </div>
         </div>
       </Transition>
 
-      <MarketCards :game="game" :market="game.market" :fire_gems="game.fireGems" :marketStack="game.marketStack">
-      </MarketCards>
+      <GameMarket
+        :game="game"
+        :market="game.market"
+        :fire_gems="game.fireGems"
+        :marketStack="game.marketStack"
+      >
+      </GameMarket>
       <div>
-        <TokenComponent :token="t" v-for="t in game.currentTurn.tokens" @useToken="useTokenClick"></TokenComponent>
+        <GameToken
+          :token="t"
+          v-for="t in game.currentTurn.tokens"
+          @useToken="useTokenClick"
+        ></GameToken>
       </div>
       <div id="player_list_container">
         <div id="player_list">
-          <PlayerListElement v-for="p in playerList" :player="p" :game="game" @click="focusPlayer(p)"
-            :focused="focusedPlayer == p" :self="selfPlayer == p">
-          </PlayerListElement>
+          <GamePlayerListElement
+            v-for="p in playerList"
+            :player="p"
+            :game="game"
+            @click="focusPlayer(p)"
+            :focused="focusedPlayer == p"
+            :self="selfPlayer == p"
+          >
+          </GamePlayerListElement>
         </div>
       </div>
 
       <div id="current_player">
         <Transition name="slide-left" mode="out-in">
-          <PlayerSlot v-if="focusedPlayer" :player="focusedPlayer" :game="game" :key="focusedPlayer._id"></PlayerSlot>
+          <GamePlayerSlot
+            v-if="focusedPlayer"
+            :player="focusedPlayer"
+            :game="game"
+            :key="focusedPlayer._id"
+          ></GamePlayerSlot>
         </Transition>
       </div>
-      <DiscardOverlay v-show="discard_unwrapped" :game="game" :player="focusedPlayer" :discard="focusedPlayer.discard"
-        @close="discard_unwrapped = false"></DiscardOverlay>
-      <ResultDialog :isVisible="showResults" :won="isWinner" :players="playerList" @close="showResults = false">
-      </ResultDialog>
-      <GlobalOverlay></GlobalOverlay>
-      <SelfView v-if="selfPlayer" :container="selfPlayer.hand"></SelfView>
+      <GameOverlayDiscard
+        v-show="discard_unwrapped"
+        :game="game"
+        :player="focusedPlayer"
+        :discard="focusedPlayer.discard"
+        @close="discard_unwrapped = false"
+      ></GameOverlayDiscard>
+      <GameOverlayResultDialog
+        :isVisible="showResults"
+        :won="isWinner"
+        :players="playerList"
+        @close="showResults = false"
+      >
+      </GameOverlayResultDialog>
+      <GamePlayerSelf
+        v-if="selfPlayer"
+        :container="selfPlayer.hand"
+      ></GamePlayerSelf>
     </template>
     <!-- <LoadingScreen v-if="!loaded"></LoadingScreen> -->
   </div>
diff --git a/pages/lobby.vue b/pages/lobby.vue
index 6c6e687..67499f4 100644
--- a/pages/lobby.vue
+++ b/pages/lobby.vue
@@ -20,7 +20,6 @@ function killErika() {
 
 onBeforeMount(async () => {
   games.value = (await getLobby()).value;
-  console.log(games.value);
   eventSource = subscribe("/games/subscribe");
   eventSource.addEventListener("message", (message) => {
     const data = JSON.parse(message.data);
@@ -61,7 +60,7 @@ onUnmounted(() => {
         <div v-for="g in games">
           <button
             v-if="g"
-            @click="router.push({ path: `/game`, query:{id:g._id} })"
+            @click="router.push({ path: `/game`, query: { id: g._id } })"
             :class="
               authStore.selfUser.userId == g.owner.userId ? 'own_game' : ''
             "
diff --git a/pages/rules.vue b/pages/rules.vue
index 6fb8196..2276204 100644
--- a/pages/rules.vue
+++ b/pages/rules.vue
@@ -31,10 +31,10 @@ const router = useRouter();
         <p>&#8203;</p>
         <p>Et quoi de mieux pour faire ça que des cartes colorées?</p>
         <div class="card-row">
-          <CardPreview :card_id="6" :tilted="false"></CardPreview>
-          <CardPreview :card_id="19" :tilted="false"></CardPreview>
-          <CardPreview :card_id="36" :tilted="false"></CardPreview>
-          <CardPreview :card_id="46" :tilted="false"></CardPreview>
+          <GameCardPreview :card_id="6" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="19" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="36" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="46" :tilted="false"></GameCardPreview>
         </div>
         <p>&#8203;</p>
         <hr />
@@ -60,7 +60,10 @@ const router = useRouter();
           "deck" et ce qui nous permet de le "build".
         </p>
         <div class="card-row">
-          <CardPreview :card_id="undefined" :tilted="false"></CardPreview>
+          <GameCardPreview
+            :card_id="undefined"
+            :tilted="false"
+          ></GameCardPreview>
         </div>
         <p>&#8203;</p>
         <p>
@@ -87,10 +90,10 @@ const router = useRouter();
           <li>1x Dégats (2)</li>
         </ul>
         <div class="card-row">
-          <CardPreview :card_id="56" :tilted="false"></CardPreview>
-          <CardPreview :card_id="59" :tilted="false"></CardPreview>
-          <CardPreview :card_id="58" :tilted="false"></CardPreview>
-          <CardPreview :card_id="57" :tilted="false"></CardPreview>
+          <GameCardPreview :card_id="56" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="59" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="58" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="57" :tilted="false"></GameCardPreview>
         </div>
         <p>
           La pioche est formée au hasard: on peut donc avoir une main de départ
@@ -112,15 +115,15 @@ const router = useRouter();
           champions.
         </p>
         <div class="card-row">
-          <CardPreview :card_id="56" :tilted="false"></CardPreview>
-          <CardPreview :card_id="52" :tilted="false"></CardPreview>
-          <CardPreview :card_id="43" :tilted="false"></CardPreview>
+          <GameCardPreview :card_id="56" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="52" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="43" :tilted="false"></GameCardPreview>
         </div>
         <p>&#8203;</p>
         <h3>Objets & actions</h3>
         <div class="card-row">
-          <CardPreview :card_id="56" :tilted="false"></CardPreview>
-          <CardPreview :card_id="52" :tilted="false"></CardPreview>
+          <GameCardPreview :card_id="56" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="52" :tilted="false"></GameCardPreview>
         </div>
         <p>
           Par simplicité, disons que les objets et les actions sont pareil: on
@@ -129,7 +132,7 @@ const router = useRouter();
         </p>
         <h3>Champions (& gardes)</h3>
         <div class="card-row">
-          <CardPreview :card_id="43" :tilted="false"></CardPreview>
+          <GameCardPreview :card_id="43" :tilted="false"></GameCardPreview>
         </div>
         <p>
           Les champions sont un peu plus complexes: ils restent sur le terrain,
@@ -150,7 +153,7 @@ const router = useRouter();
           de dégats pendant un tour, et un peu le tour d'après pour les tuer.
         </p>
         <div class="card-row">
-          <CardPreview :card_id="49" :tilted="false"></CardPreview>
+          <GameCardPreview :card_id="49" :tilted="false"></GameCardPreview>
         </div>
         <p>
           Par ailleurs, certains champions sont des Gardes
@@ -180,10 +183,10 @@ const router = useRouter();
           exclusivement à accomplir ce but: acheter des cartes.
         </p>
         <div class="card-row">
-          <CardPreview :card_id="6" :tilted="false"></CardPreview>
-          <CardPreview :card_id="19" :tilted="false"></CardPreview>
-          <CardPreview :card_id="36" :tilted="false"></CardPreview>
-          <CardPreview :card_id="46" :tilted="false"></CardPreview>
+          <GameCardPreview :card_id="6" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="19" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="36" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="46" :tilted="false"></GameCardPreview>
         </div>
         <p>
           Un marché est mis à disposition de tous les joueurs, mettant à
@@ -208,9 +211,9 @@ const router = useRouter();
         </p>
         <p>&#8203;</p>
         <div class="card-row">
-          <CardPreview :card_id="13" :tilted="false"></CardPreview>
-          <CardPreview :card_id="3" :tilted="false"></CardPreview>
-          <CardPreview :card_id="1" :tilted="false"></CardPreview>
+          <GameCardPreview :card_id="13" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="3" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="1" :tilted="false"></GameCardPreview>
         </div>
         <p>&#8203;</p>
         <p>
@@ -222,9 +225,9 @@ const router = useRouter();
         </p>
         <p>&#8203;</p>
         <div class="card-row">
-          <CardPreview :card_id="39" :tilted="false"></CardPreview>
-          <CardPreview :card_id="34" :tilted="false"></CardPreview>
-          <CardPreview :card_id="40" :tilted="false"></CardPreview>
+          <GameCardPreview :card_id="39" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="34" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="40" :tilted="false"></GameCardPreview>
         </div>
         <p>&#8203;</p>
         <p>
@@ -237,9 +240,9 @@ const router = useRouter();
         </p>
         <p>&#8203;</p>
         <div class="card-row">
-          <CardPreview :card_id="52" :tilted="false"></CardPreview>
-          <CardPreview :card_id="46" :tilted="false"></CardPreview>
-          <CardPreview :card_id="47" :tilted="false"></CardPreview>
+          <GameCardPreview :card_id="52" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="46" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="47" :tilted="false"></GameCardPreview>
         </div>
         <p>&#8203;</p>
         <p>
@@ -252,9 +255,9 @@ const router = useRouter();
         </p>
         <p>&#8203;</p>
         <div class="card-row">
-          <CardPreview :card_id="24" :tilted="false"></CardPreview>
-          <CardPreview :card_id="25" :tilted="false"></CardPreview>
-          <CardPreview :card_id="19" :tilted="false"></CardPreview>
+          <GameCardPreview :card_id="24" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="25" :tilted="false"></GameCardPreview>
+          <GameCardPreview :card_id="19" :tilted="false"></GameCardPreview>
         </div>
         <p>&#8203;</p>
         <p>
@@ -272,7 +275,7 @@ const router = useRouter();
           Les effets de cartes peuvent se déclencher pour 3 raisons différentes.
         </p>
         <div class="card-row">
-          <CardPreview :card_id="14" :tilted="false"></CardPreview>
+          <GameCardPreview :card_id="14" :tilted="false"></GameCardPreview>
         </div>
         <p>Sur cette carte, on peut voir les trois en même temps.</p>
         <p>La 1ère ligne s'active tout le temps.</p>
diff --git a/pages/test.vue b/pages/test.vue
index 5d5fce4..1c10032 100644
--- a/pages/test.vue
+++ b/pages/test.vue
@@ -6,5 +6,6 @@ config.public.welcomeMessage;
 <template>
   <div>
     {{ config.public.welcomeMessage }}
+    <GameCardPreview :cardId="6" :tilted="false"></GameCardPreview>
   </div>
 </template>
diff --git a/public/webgl-utils.js b/public/webgl-utils.js
index aaa9125..61f08a4 100644
--- a/public/webgl-utils.js
+++ b/public/webgl-utils.js
@@ -30,17 +30,18 @@
  */
 
 /* global define */
-(function(root, factory) {  // eslint-disable-line
-  if (typeof define === 'function' && define.amd) {
+(function (root, factory) {
+  // eslint-disable-line
+  if (typeof define === "function" && define.amd) {
     // AMD. Register as an anonymous module.
-    define([], function() {
+    define([], function () {
       return factory.call(root);
     });
   } else {
     // Browser globals
     root.webglUtils = factory.call(root);
   }
-}(this, function() {
+})(this, function () {
   "use strict";
 
   const topWindow = this;
@@ -53,8 +54,8 @@
   }
 
   if (!isInIFrame()) {
-    console.log("%c%s", 'color:blue;font-weight:bold;', 'for more about webgl-utils.js see:');  // eslint-disable-line
-    console.log("%c%s", 'color:blue;font-weight:bold;', 'http://webgl2fundamentals.org/webgl/lessons/webgl-boilerplate.html');  // eslint-disable-line
+    // console.log("%c%s", 'color:blue;font-weight:bold;', 'for more about webgl-utils.js see:');  // eslint-disable-line
+    // console.log("%c%s", 'color:blue;font-weight:bold;', 'http://webgl2fundamentals.org/webgl/lessons/webgl-boilerplate.html');  // eslint-disable-line
   }
 
   /**
@@ -72,23 +73,27 @@
   }
 
   const errorRE = /ERROR:\s*\d+:(\d+)/gi;
-  function addLineNumbersWithError(src, log = '') {
+  function addLineNumbersWithError(src, log = "") {
     // Note: Error message formats are not defined by any spec so this may or may not work.
     const matches = [...log.matchAll(errorRE)];
-    const lineNoToErrorMap = new Map(matches.map((m, ndx) => {
-      const lineNo = parseInt(m[1]);
-      const next = matches[ndx + 1];
-      const end = next ? next.index : log.length;
-      const msg = log.substring(m.index, end);
-      return [lineNo - 1, msg];
-    }));
-    return src.split('\n').map((line, lineNo) => {
-      const err = lineNoToErrorMap.get(lineNo);
-      return `${lineNo + 1}: ${line}${err ? `\n\n^^^ ${err}` : ''}`;
-    }).join('\n');
+    const lineNoToErrorMap = new Map(
+      matches.map((m, ndx) => {
+        const lineNo = parseInt(m[1]);
+        const next = matches[ndx + 1];
+        const end = next ? next.index : log.length;
+        const msg = log.substring(m.index, end);
+        return [lineNo - 1, msg];
+      })
+    );
+    return src
+      .split("\n")
+      .map((line, lineNo) => {
+        const err = lineNoToErrorMap.get(lineNo);
+        return `${lineNo + 1}: ${line}${err ? `\n\n^^^ ${err}` : ""}`;
+      })
+      .join("\n");
   }
 
-
   /**
    * Error Callback
    * @callback ErrorCallback
@@ -120,7 +125,12 @@
     if (!compiled) {
       // Something went wrong during compilation; get the error
       const lastError = gl.getShaderInfoLog(shader);
-      errFn(`Error compiling shader: ${lastError}\n${addLineNumbersWithError(shaderSource, lastError)}`);
+      errFn(
+        `Error compiling shader: ${lastError}\n${addLineNumbersWithError(
+          shaderSource,
+          lastError
+        )}`
+      );
       gl.deleteShader(shader);
       return null;
     }
@@ -139,18 +149,24 @@
    * @memberOf module:webgl-utils
    */
   function createProgram(
-      gl, shaders, opt_attribs, opt_locations, opt_errorCallback) {
+    gl,
+    shaders,
+    opt_attribs,
+    opt_locations,
+    opt_errorCallback
+  ) {
     const errFn = opt_errorCallback || error;
     const program = gl.createProgram();
-    shaders.forEach(function(shader) {
+    shaders.forEach(function (shader) {
       gl.attachShader(program, shader);
     });
     if (opt_attribs) {
-      opt_attribs.forEach(function(attrib, ndx) {
+      opt_attribs.forEach(function (attrib, ndx) {
         gl.bindAttribLocation(
-            program,
-            opt_locations ? opt_locations[ndx] : ndx,
-            attrib);
+          program,
+          opt_locations ? opt_locations[ndx] : ndx,
+          attrib
+        );
       });
     }
     gl.linkProgram(program);
@@ -158,18 +174,20 @@
     // Check the link status
     const linked = gl.getProgramParameter(program, gl.LINK_STATUS);
     if (!linked) {
-        // something went wrong with the link
-        const lastError = gl.getProgramInfoLog(program);
-        errFn(`Error in program linking: ${lastError}\n${
-          shaders.map(shader => {
+      // something went wrong with the link
+      const lastError = gl.getProgramInfoLog(program);
+      errFn(
+        `Error in program linking: ${lastError}\n${shaders
+          .map((shader) => {
             const src = addLineNumbersWithError(gl.getShaderSource(shader));
             const type = gl.getShaderParameter(shader, gl.SHADER_TYPE);
             return `${glEnumToString(gl, type)}:\n${src}`;
-          }).join('\n')
-        }`);
+          })
+          .join("\n")}`
+      );
 
-        gl.deleteProgram(program);
-        return null;
+      gl.deleteProgram(program);
+      return null;
     }
     return program;
   }
@@ -184,12 +202,16 @@
    * @return {WebGLShader} The created shader.
    */
   function createShaderFromScript(
-      gl, scriptId, opt_shaderType, opt_errorCallback) {
+    gl,
+    scriptId,
+    opt_shaderType,
+    opt_errorCallback
+  ) {
     let shaderSource = "";
     let shaderType;
     const shaderScript = document.getElementById(scriptId);
     if (!shaderScript) {
-      throw ("*** Error: unknown script element" + scriptId);
+      throw "*** Error: unknown script element" + scriptId;
     }
     shaderSource = shaderScript.text;
 
@@ -198,20 +220,23 @@
         shaderType = gl.VERTEX_SHADER;
       } else if (shaderScript.type === "x-shader/x-fragment") {
         shaderType = gl.FRAGMENT_SHADER;
-      } else if (shaderType !== gl.VERTEX_SHADER && shaderType !== gl.FRAGMENT_SHADER) {
-        throw ("*** Error: unknown shader type");
+      } else if (
+        shaderType !== gl.VERTEX_SHADER &&
+        shaderType !== gl.FRAGMENT_SHADER
+      ) {
+        throw "*** Error: unknown shader type";
       }
     }
 
     return loadShader(
-        gl, shaderSource, opt_shaderType ? opt_shaderType : shaderType,
-        opt_errorCallback);
+      gl,
+      shaderSource,
+      opt_shaderType ? opt_shaderType : shaderType,
+      opt_errorCallback
+    );
   }
 
-  const defaultShaderType = [
-    "VERTEX_SHADER",
-    "FRAGMENT_SHADER",
-  ];
+  const defaultShaderType = ["VERTEX_SHADER", "FRAGMENT_SHADER"];
 
   /**
    * Creates a program from 2 script tags.
@@ -229,13 +254,30 @@
    * @memberOf module:webgl-utils
    */
   function createProgramFromScripts(
-      gl, shaderScriptIds, opt_attribs, opt_locations, opt_errorCallback) {
+    gl,
+    shaderScriptIds,
+    opt_attribs,
+    opt_locations,
+    opt_errorCallback
+  ) {
     const shaders = [];
     for (let ii = 0; ii < shaderScriptIds.length; ++ii) {
-      shaders.push(createShaderFromScript(
-          gl, shaderScriptIds[ii], gl[defaultShaderType[ii]], opt_errorCallback));
+      shaders.push(
+        createShaderFromScript(
+          gl,
+          shaderScriptIds[ii],
+          gl[defaultShaderType[ii]],
+          opt_errorCallback
+        )
+      );
     }
-    return createProgram(gl, shaders, opt_attribs, opt_locations, opt_errorCallback);
+    return createProgram(
+      gl,
+      shaders,
+      opt_attribs,
+      opt_locations,
+      opt_errorCallback
+    );
   }
 
   /**
@@ -254,13 +296,30 @@
    * @memberOf module:webgl-utils
    */
   function createProgramFromSources(
-      gl, shaderSources, opt_attribs, opt_locations, opt_errorCallback) {
+    gl,
+    shaderSources,
+    opt_attribs,
+    opt_locations,
+    opt_errorCallback
+  ) {
     const shaders = [];
     for (let ii = 0; ii < shaderSources.length; ++ii) {
-      shaders.push(loadShader(
-          gl, shaderSources[ii], gl[defaultShaderType[ii]], opt_errorCallback));
+      shaders.push(
+        loadShader(
+          gl,
+          shaderSources[ii],
+          gl[defaultShaderType[ii]],
+          opt_errorCallback
+        )
+      );
     }
-    return createProgram(gl, shaders, opt_attribs, opt_locations, opt_errorCallback);
+    return createProgram(
+      gl,
+      shaders,
+      opt_attribs,
+      opt_locations,
+      opt_errorCallback
+    );
   }
 
   /**
@@ -273,10 +332,10 @@
    */
   function resizeCanvasToDisplaySize(canvas, multiplier) {
     multiplier = multiplier || 1;
-    const width  = canvas.clientWidth  * multiplier | 0;
-    const height = canvas.clientHeight * multiplier | 0;
-    if (canvas.width !== width ||  canvas.height !== height) {
-      canvas.width  = width;
+    const width = (canvas.clientWidth * multiplier) | 0;
+    const height = (canvas.clientHeight * multiplier) | 0;
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width;
       canvas.height = height;
       return true;
     }
@@ -289,6 +348,4 @@
     createProgramFromSources: createProgramFromSources,
     resizeCanvasToDisplaySize: resizeCanvasToDisplaySize,
   };
-
-}));
-
+});
diff --git a/services/loadCards.ts b/services/loadCards.ts
index da25a33..c2d7525 100644
--- a/services/loadCards.ts
+++ b/services/loadCards.ts
@@ -42,7 +42,7 @@ export async function compileCards(app: App<any>) {
       try {
         let template: string;
         if (process.dev && !process.client) {
-          template = (await import(k + "?raw" /* @vite-ignore */)).default;
+          template = (await import(/* @vite-ignore */ k + "?raw")).default;
         } else {
           template = await (await fetch(url)).text();
         }
@@ -56,7 +56,7 @@ export async function compileCards(app: App<any>) {
             defineAsyncComponent({
               loader: async () =>
                 defineComponent({
-                  props: ["used_effects_indexes", "card"],
+                  props: ["used_effects_indexes", "cardId"],
                   methods: {
                     effectClick(effect: number) {
                       this.$emit("effectClick", effect);