Chore : various fixes

components/CardPreview.vue

@@ -10,6 +10,7 @@ export interface Props {
   interactible?: boolean;
   noEffects?: boolean;
   used_effects_indexes?: number[];
+  discardable?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -18,6 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
   locked: () => true,
   interactible: () => true,
   noEffects: () => false,
+  discardable: () => false,
 });
 
 const emit = defineEmits([
@@ -225,6 +227,7 @@ onUnmounted(() => {
       unlocked: !props.locked,
       zoom: isZooming,
       no_effects: noEffects || !props.locked,
+      discardable,
     }"
     @contextmenu.prevent="false"
     @mousedown.right="rightClickDown"
@@ -281,43 +284,6 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.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; */
-}
-
-#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:not(svg) {
-  cursor: grab;
-}
-
 .card.dragging {
   transform: translateX(v-bind("translateX + 'px'"))
     translateY(v-bind("translateY + 'px'"));
@@ -421,4 +387,49 @@ onUnmounted(() => {
 .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>

components/CardsGrouped.vue

@@ -18,6 +18,7 @@ export interface Props {
   noEffects?: boolean;
   tokens?: Effect[];
   championsKillable?: boolean;
+  discardable?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -26,6 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
   noEffects: () => false,
   tokens: () => [],
   championsKillable: () => false,
+  discardable: () => false,
 });
 
 const emit = defineEmits([
@@ -33,6 +35,7 @@ const emit = defineEmits([
   "effectClick",
   "tokenClick",
   "damageChampionClick",
+  "discardCardClick",
 ]);
 
 const settingsStore = useSettingsStore();
@@ -123,6 +126,10 @@ function tokenClick(token: Effect, card: Card) {
 function damageChampionClick(card: Card) {
   emit("damageChampionClick", card);
 }
+
+function discardCardClick(card: Card) {
+  emit("discardCardClick", card);
+}
 </script>
 
 <template>
@@ -149,28 +156,24 @@ function damageChampionClick(card: Card) {
           return prev
         },[] as number[])"
         :noEffects="noEffects"
+        :discardable="discardable"
       >
         <template v-for="t in tokens">
           <TokenComponent
             :token="t"
             @useToken="tokenClick(t, c)"
             v-if="
-              !(
+              (t.effect == CardEffects.SACRIFICE &&
-                t.effect == CardEffects.SACRIFICE &&
+                playingTurn &&
-                (!playingTurn ||
+                !playingTurn?.cardsLocked.includes(c._id.toString())) ||
-                  playingTurn?.cardsLocked.includes(c._id.toString()))
+              (t.effect == CardEffects.PREPARE &&
-              ) &&
+                c.cardType == CardType.CHAMPION) ||
-              !(
+              (t.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT &&
-                t.effect == CardEffects.PREPARE &&
+                c.cardType == CardType.ACTION) ||
-                c.cardType == CardType.CHAMPION
+              (t.effect == CardEffects.STUN &&
-              ) &&
+                c.cardType == CardType.CHAMPION &&
-              !(
+                championsKillable) ||
-                t.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT &&
+              t.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT
-                c.cardType != CardType.ACTION
-              ) &&
-              t.effect == CardEffects.STUN &&
-              c.cardType == CardType.CHAMPION &&
-              championsKillable
             "
           ></TokenComponent>
         </template>
@@ -181,6 +184,15 @@ function damageChampionClick(card: Card) {
         >
           Damage
         </button>
+        <button
+          v-if="
+            discardable && !playingTurn?.cardsLocked.includes(c._id.toString())
+          "
+          @mousedown.left.stop=""
+          @click.stop="discardCardClick(c)"
+        >
+          Discard
+        </button>
       </CardPreview>
     </TransitionGroup>
     <!-- <img :class="`card_image`" :src="'/cards/background.png'" draggable="false"> -->

components/PlayerSlot.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
   damageChampion,
+  discardCard,
   endTurn,
   joinGame,
   lockCard,
@@ -142,6 +143,9 @@ function tokenClick({ card, token }: { card: Card; token: Effect }) {
 function damageChampionClick(card: Card) {
   damageChampion(props.game._id, props.player._id, card._id);
 }
+function discardCardClick(card: Card) {
+  discardCard(props.game._id, card._id);
+}
 </script>
 
 <template>
@@ -203,7 +207,11 @@ function damageChampionClick(card: Card) {
         :tokens="cardTokens"
         @tokenClick="tokenClick"
         :championsKillable="!isSelf && isSelfTurn.value"
+        :discardable="
+          (player.fuckUMarkers > 0 || player.discardMarkers > 0) && isSelf
+        "
         @damageChampionClick="damageChampionClick"
+        @discardCardClick="discardCardClick"
       >
       </CardsGrouped>
 

netcode/index.ts

@@ -127,7 +127,7 @@ export async function buyGem(game: string) {
 export async function useToken(
   game: string,
   tokenId: string,
-  cardId: string,
+  cardId?: string,
   playerId?: string
 ) {
   const config = useRuntimeConfig();
@@ -209,3 +209,15 @@ export async function damageChampion(
     }
   );
 }
+
+export async function discardCard(game: string, cardId: string) {
+  const config = useRuntimeConfig();
+  await $fetch(
+    new URL(`games/${game}/turn/discardCard/${cardId}`, config.public.endpoint)
+      .href,
+    {
+      method: "POST",
+      credentials: "include",
+    }
+  );
+}

pages/game/[id].vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
 import LoadingScreen from "~/components/LoadingScreen.vue";
-import { subscribe } from "~/netcode";
+import { subscribe, useToken } from "~/netcode";
 import { delay } from "~/netcode/events";
-import { type Container, type Game, type Player } from "~/netcode/interfaces";
+import {
+  type Container,
+  type Effect,
+  type Game,
+  type Player,
+} from "~/netcode/interfaces";
 import { playSound } from "~/helpers/audioHelpers";
 import TokenComponent from "~/components/tokens/TokenComponent.vue";
 
@@ -174,7 +179,7 @@ eventSource.addEventListener("message", async (message) => {
     });
   } else if (data.type == "unlockEffect") {
     queueAction(async () => {
-      const effectIndex = current_game.currentTurn.lockedEffects.findIndex(
+      const effectIndex = current_game.currentTurn.lockedEffects.indexOf(
         data.effect
       );
       current_game.currentTurn.lockedEffects.splice(effectIndex, 1);
@@ -212,6 +217,42 @@ eventSource.addEventListener("message", async (message) => {
       console.log(`adding health amount : ` + data.operation);
       team.health = data.health;
     });
+  } else if (data.type == "player.addFuckUMarker") {
+    queueAction(async () => {
+      console.log(`adding fuckUMarkers : ` + data.operation);
+      const targetPlayer = playerList.value.find((p) => p._id == data.playerId);
+      if (!targetPlayer) {
+        throw new Error("Cannot add fuckU Markers : player not found");
+      }
+      targetPlayer.fuckUMarkers = data.fuckUMarkers;
+    });
+  } else if (data.type == "player.removeFuckUMarker") {
+    queueAction(async () => {
+      console.log(`adding fuckUMarkers : ` + data.operation);
+      const targetPlayer = playerList.value.find((p) => p._id == data.playerId);
+      if (!targetPlayer) {
+        throw new Error("Cannot remove fuckU Markers : player not found");
+      }
+      targetPlayer.fuckUMarkers = data.fuckUMarkers;
+    });
+  } else if (data.type == "player.addDiscardMarker") {
+    queueAction(async () => {
+      console.log(`adding discardMarkers : ` + data.operation);
+      const targetPlayer = playerList.value.find((p) => p._id == data.playerId);
+      if (!targetPlayer) {
+        throw new Error("Cannot add discard Markers : player not found");
+      }
+      targetPlayer.discardMarkers = data.discardMarkers;
+    });
+  } else if (data.type == "player.removeDiscardMarker") {
+    queueAction(async () => {
+      console.log(`adding fuckUMarkers : ` + data.operation);
+      const targetPlayer = playerList.value.find((p) => p._id == data.playerId);
+      if (!targetPlayer) {
+        throw new Error("Cannot remove discard Markers : player not found");
+      }
+      targetPlayer.discardMarkers = data.discardMarkers;
+    });
   } else if (data.type == "killTeam") {
     queueAction(async () => {
       const index = game.value?.teams.findIndex((t) => t._id == data.teamId);
@@ -290,6 +331,10 @@ function focusPlayer(p: Player) {
 //     focusPlayer(first_player)
 // })
 
+function useTokenClick(t: Effect) {
+  console.log(t);
+  useToken(game.value!._id, t._id);
+}
 onUnmounted(() => {
   eventSource.close();
 });
@@ -333,6 +378,7 @@ onUnmounted(() => {
       <TokenComponent
         :token="t"
         v-for="t in game.currentTurn.tokens"
+        @useToken="useTokenClick"
       ></TokenComponent>
     </div>
     <div id="player_list_container">
@@ -482,7 +528,7 @@ onUnmounted(() => {
 
 .slide-left-enter-active,
 .slide-left-leave-active {
-  transition: all v-bind("turnChangeAnimationSpeed") ease-out;
+  transition: all v-bind("settingsStore.animationSpeed * 2 + 'ms'") ease-out;
 }
 
 .slide-left-enter-from {