feat: card lock

components/MarketCards.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import type { Container } from '~/netcode/interfaces';
-
-
+import type { Container } from "~/netcode/interfaces";
 
 export interface Props {
-    market: Container
-    fire_gems: Container
+  market: Container;
+  fire_gems: Container;
 }
 
-const props = defineProps<Props>()
+const props = defineProps<Props>();
 
-const authStore = useAuthStore()
+const authStore = useAuthStore();
 
 // const selfPlayer = computed(() => authStore.logged ? playerList.value?.find(p => p.user.userId == authStore.selfUser.userId) : undefined)
 
@@ -19,58 +17,53 @@ const authStore = useAuthStore()
 
 // const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
 
-
-function onBeforeEnter(el: Element) {
-    (el as HTMLElement).style.visibility = "hidden"
-    const element = el as HTMLElement
-    element.style.top = element.offsetTop + "px"
-    element.style.left = element.offsetLeft + "px"
-    element.style.zIndex = "999"
+function marketCardClick(e: string) {
+  console.log(e);
 }
 
-function onEnter(el: any, done: () => unknown) {
-    console.log("enter")
-    // setTimeout(() => {
-    //     el.style.visibility = null
-    //     done()
-    // }, 1000)
-    done()
-
+function fireGemCardClick(e: string) {
+  console.log(e);
 }
-
 </script>
 
 <template>
-    <div id="market">
-        <CardPreview :tilted="false" :card_id="undefined"></CardPreview>
-        <div class="separator"></div>
-        <CardsGrouped :container="market"></CardsGrouped>
-        <div class="separator"></div>
-        <CardsGrouped :container="fire_gems" :wrapped="true"></CardsGrouped>
-    </div>
+  <div id="market">
+    <CardPreview :tilted="false" :card_id="undefined"></CardPreview>
+    <div class="separator"></div>
+    <CardsGrouped
+      :container="market"
+      @cardClick="marketCardClick"
+    ></CardsGrouped>
+    <div class="separator"></div>
+    <CardsGrouped
+      :container="fire_gems"
+      :wrapped="true"
+      @cardClick="fireGemCardClick"
+    ></CardsGrouped>
+  </div>
 </template>
 
 <style scoped>
 #market {
-    width: min-content;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    z-index: 2;
-    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, .60));
-    backdrop-filter: blur(5px) brightness(80%);
-    background: rgba(155, 62, 62, 0.46);
+  width: min-content;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+  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(155, 62, 62, 0.46);
 }
 
 .separator {
-    width: 50px;
+  width: 50px;
 }
-</style>
+</style>