From df9e7a2e13cd5d4f9b3a7154bad26918b017a847 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 14 Jul 2024 15:54:22 +0200
Subject: [PATCH] Feat : add discard view

---
 components/CardsGrouped.vue   |   7 ++-
 components/DiscardOverlay.vue | 104 ++++++++++++++++++++++++++++++++++
 pages/game/[id].vue           |  18 +++++-
 3 files changed, 127 insertions(+), 2 deletions(-)
 create mode 100644 components/DiscardOverlay.vue

diff --git a/components/CardsGrouped.vue b/components/CardsGrouped.vue
index 436484e..57679d6 100644
--- a/components/CardsGrouped.vue
+++ b/components/CardsGrouped.vue
@@ -173,7 +173,12 @@ function discardCardClick(card: Card) {
               (t.effect == CardEffects.STUN &&
                 c.cardType == CardType.CHAMPION &&
                 championsKillable) ||
-              t.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT
+              t.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT ||
+              t.effect == CardEffects.RESTACK_DISCARDED_CARD ||
+              (t.effect == CardEffects.RESTACK_DISCARDED_ACTION &&
+                c.cardType == CardType.ACTION) ||
+              (t.effect == CardEffects.RESTACK_DISCARDED_CHAMPION &&
+                c.cardType == CardType.CHAMPION)
             "
           ></TokenComponent>
         </template>
diff --git a/components/DiscardOverlay.vue b/components/DiscardOverlay.vue
new file mode 100644
index 0000000..d3a4758
--- /dev/null
+++ b/components/DiscardOverlay.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { buyCard, buyGem, useToken } from "~/netcode";
+import {
+  CardEffects,
+  type Card,
+  type Container,
+  type Effect,
+  type Game,
+  type Player,
+} from "~/netcode/interfaces";
+import TokenComponent from "./tokens/TokenComponent.vue";
+
+export interface Props {
+  game: Game;
+  discard: Container;
+  player: Player;
+}
+
+const props = defineProps<Props>();
+
+const authStore = useAuthStore();
+
+const emit = defineEmits(["close"]);
+function marketCardClick(e: string) {
+  buyCard(props.game._id, e);
+}
+
+function fireGemCardClick(e: string) {
+  buyGem(props.game._id);
+}
+
+const discardTokens = computed(() =>
+  props.game.currentTurn.tokens.filter((t) =>
+    [
+      CardEffects.RESTACK_DISCARDED_ACTION,
+      CardEffects.RESTACK_DISCARDED_CARD,
+      CardEffects.RESTACK_DISCARDED_CHAMPION,
+    ].includes(t.effect)
+  )
+);
+
+function tokenClick({ card, token }: { card: Card; token: Effect }) {
+  useToken(props.game._id, token._id, card._id);
+}
+</script>
+
+<template>
+  <div class="overlay">
+    <button @click="$emit('close')">Close</button>
+    <span>Discard of {{ player.user.username }}</span>
+
+    <div class="discard_unwrapped" @click.stop>
+      <CardsGrouped
+        :container="discard"
+        :wrapped="false"
+        :hidden="false"
+        :tokens="discardTokens"
+        :noEffects="true"
+        @tokenClick="tokenClick"
+      ></CardsGrouped>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+span {
+  background: white;
+}
+.overlay {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  position: fixed;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+</style>
+
+<style>
+.discard_unwrapped {
+  width: max-content;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  /* position: relative; */
+  gap: 2px;
+  margin: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 10px;
+  border-radius: 10px;
+  /* filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, 0.6)); */
+  /* backdrop-filter: blur(5px) brightness(80%); */
+  background: rgba(60, 47, 117, 0.46);
+  /* left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%); */
+}
+</style>
diff --git a/pages/game/[id].vue b/pages/game/[id].vue
index 12806b3..a33296f 100644
--- a/pages/game/[id].vue
+++ b/pages/game/[id].vue
@@ -335,6 +335,10 @@ function useTokenClick(t: Effect) {
   console.log(t);
   useToken(game.value!._id, t._id);
 }
+
+function showDiscard() {
+  discard_unwrapped.value = true;
+}
 onUnmounted(() => {
   eventSource.close();
 });
@@ -362,7 +366,12 @@ onUnmounted(() => {
           :class="{ invisible: discard_unwrapped }"
           @click="() => (discard_unwrapped = true)"
         >
-          <CardsGrouped :container="focusedPlayer.discard" :wrapped="true">
+          <CardsGrouped
+            :container="focusedPlayer.discard"
+            :wrapped="true"
+            @card-click="showDiscard"
+            :no-effects="true"
+          >
           </CardsGrouped>
         </div>
       </div>
@@ -405,6 +414,13 @@ onUnmounted(() => {
         ></PlayerSlot>
       </Transition>
     </div>
+    <DiscardOverlay
+      v-show="discard_unwrapped"
+      :game="game"
+      :player="focusedPlayer"
+      :discard="focusedPlayer.discard"
+      @close="discard_unwrapped = false"
+    ></DiscardOverlay>
     <ResultDialog
       :isVisible="showResults"
       :won="isWinner"