fix : dockerfile

.gitignore

@@ -24,4 +24,6 @@ logs
 !.env.example
 
 assets/images/*
-public/img/skins
+public/img/skins
+public/img/icon
+public/img/tokens

Dockerfile

@@ -4,11 +4,19 @@ COPY package*.json ./
 RUN npm install
 COPY . .
 
-FROM git.legonzaur.fr/heronfief/cards-gen:main AS svg-stage
+FROM git.legonzaur.fr/heronfief/cards-gen:main AS card-svg-stage
 RUN python3 -u ./src/generate_cards_mvp.py
 
+FROM git.legonzaur.fr/heronfief/tokens-gen:main AS token-svg-stage
+RUN python3 -u ./src/generate_tokens_mvp.py
+
 FROM install-stage AS build-stage
-COPY --from=svg-stage /app/output/heron ./assets/images/cards/heron-svg
+COPY --from=card-svg-stage /app/output/heron ./assets/images/cards/heron-svg
+COPY --from=card-svg-stage /app/img/skins ./public/img
+
+COPY --from=token-svg-stage /app/output/heron ./assets/images/tokens
+COPY --from=token-svg-stage /app/img/icon ./public/img
+
 
 ARG NUXT_PUBLIC_ENDPOINT
 ARG NUXT_PUBLIC_DISCORD_LOGIN_ENDPOINT
@@ -19,4 +27,6 @@ RUN npx nuxi generate
 # étape de production
 FROM nginx:stable-alpine AS production-stage
 COPY --from=build-stage /app/.output/public /usr/share/nginx/html
+COPY --from=card-svg-stage /app/img/skins /usr/share/nginx/html/img/skins
+COPY --from=token-svg-stage /app/img/icon /usr/share/nginx/html/img/icon
 COPY ./nginx.conf /etc/nginx/conf.d/default.conf

app.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cards, compileCards } from "./services/loadCards";
+import { compileCards, compileTokens } from "./services/loadCards";
 import { getCurrentInstance } from "vue";
 // import goStore, { oauth2_register_discord, setup_websocket, heron_cookie_login } from "@/netcode";
 
@@ -12,7 +12,8 @@ const app = getCurrentInstance()?.appContext.app;
 if (!app) {
   throw new Error("Couldn't bake cards: instance is null");
 }
-await compileCards(app);
+await compileCards();
+await compileTokens();
 console.log("compiling done");
 
 useHead({

assets/locales/effects.json

@@ -0,0 +1,10 @@
+{
+    "sacrifice":{
+        "title": "Sacrifice",
+        "description": "Destroy a card, forever"
+    },
+    "make_discard":{
+        "title": "Make Discard",
+        "description": "Give a fuck to your opponent"
+    }
+}

components/game/Token.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Effect } from "~/netcode/interfaces";
-
+import { tokens } from "~/services/loadCards";
+import effect_locales from "~/assets/locales/effects.json";
 type Props = {
   token: Effect;
 };
@@ -14,24 +15,57 @@ function onClick(e: MouseEvent) {
 </script>
 
 <template>
-  <div @click.stop="onClick" @mousedown.left.stop="" id="token">
-    {{ props.token.effect }}
+  <div @click.stop="onClick" @mousedown.left.stop="" class="token_container">
+    <Component
+      :is="tokens[props.token.effect]"
+      v-if="props.token.effect in tokens"
+    />
+    <span v-else>{{ props.token.effect }}</span>
+    <div class="token_description" v-if="props.token.effect in effect_locales">
+      <span
+        ><b>{{ effect_locales[props.token.effect].title }}</b></span
+      >
+      <span>{{ effect_locales[props.token.effect].description }}</span>
+    </div>
   </div>
 </template>
 
-<style scoped>
-#token {
-  width: 50px;
-  height: 50px;
-  background: white;
-  border: 1px solid white;
+<style>
+.token_container {
+  margin: 15px;
+  /* backdrop-filter: blur(60px); */
+  background: rgba(201, 212, 38, 1);
+  border: 5px solid black;
+  width: min-content;
   cursor: pointer;
-  box-sizing: border-box;
   transition: 0.2s all;
-  border-radius: 15px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: row;
+  transition: 0.1s all var(--animation-curve);
+  position: relative;
+  z-index: 50;
 }
 
-#token:hover {
-  border: 1px solid red;
+.token_container:hover {
+  border: 5px solid red;
+  transform: scale(110%);
+}
+
+.token_description {
+  min-width: max-content;
+  min-height: 45px;
+  position: absolute;
+  right: -10px;
+  transform: translateX(100%);
+  display: none;
+  flex-direction: column;
+  background: rgb(168, 175, 74);
+  border: 5px solid red;
+  border-radius: 10px;
+}
+
+.token_container:hover .token_description {
+  display: flex;
 }
 </style>

components/game/card/ChampionSmall.vue

@@ -56,14 +56,38 @@ const active = ref(false);
           ></GameCardAtom>
         </div>
       </foreignObject>
+      <circle
+        cx="2"
+        cy="-1"
+        r="1"
+        :fill="card.guard ? 'black' : 'lightgray'"
+        stroke="white"
+        stroke-width="0.2"
+        class="champion_small_defense"
+        :class="{ active }"
+      ></circle>
+      <text
+        text-anchor="middle"
+        font-family="Helvetica"
+        font-weight="bold"
+        class="champion_small_defense"
+        font-size="1.5"
+        :class="{ active }"
+        x="2"
+        y="-.5"
+        :fill="card.guard ? 'white' : 'black'"
+      >
+        {{ card.defense }}
+      </text>
     </svg>
   </div>
 </template>
 
 <style>
 .champion_small {
-  z-index: 10;
+  z-index: 2;
   width: 100%;
+  margin-top: 10px;
 }
 
 .champion_small_svg {
@@ -75,8 +99,8 @@ const active = ref(false);
   clip-path: polygon(
     58% 62%,
     67% 56%,
-    59% 34%,
-    40% 34%,
+    59% 35.8%,
+    40% 35.8%,
     31% 55%,
     41% 62%,
     49% 67.77%
@@ -86,6 +110,15 @@ const active = ref(false);
   cursor: pointer;
 }
 
+.champion_small_defense {
+  transition: 0.15s all var(--animation-curve);
+  pointer-events: none;
+}
+
+.champion_small_defense.active {
+  opacity: 0;
+}
+
 .champion_small_foreignObject.active {
   clip-path: polygon(100% 100%, 100% 50%, 100% 0, 0 0, 0 50%, 0 100%, 49% 100%);
   transform: translate(-50%, -50%);
@@ -97,7 +130,6 @@ const active = ref(false);
   transform: translate(0, -20%) scale(50%);
   display: flex;
   position: relative;
-  z-index: 10;
 }
 
 .champion_small_foreignObject.active .champion_small_inside {

components/game/player/Slot.vue

@@ -309,7 +309,6 @@ function discardCardClick(card: Card) {
     "turn_buttons";
   justify-items: center;
   transition: all 1s;
-  overflow-x: hidden;
 }
 
 #current_player_board {

netcode/interfaces.ts

@@ -107,4 +107,6 @@ export interface Card extends GameObject {
   cardId: number;
   cardType: CardType;
   effects: Effect[];
+  defense?: number;
+  guard?: boolean;
 }

pages/game.vue

@@ -489,7 +489,7 @@ footer {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  overflow-x: hidden;
+  overflow-x: clip;
   /* background: url('/img/bg-darkgrass.png'); */
 }
 

services/loadCards.ts

@@ -1,40 +1,13 @@
 import type { App, Component, DefineComponent } from "vue";
 
 export const cards = {} as Record<string, Component>;
+export const tokens = {} as Record<string, Component>;
 
-export async function compileCards(app: App<any>) {
+export async function compileCards() {
   const svgs = import.meta.glob("@/assets/images/cards/heron-svg/*.svg", {
     eager: true,
   });
 
-  // const components = await Promise.all(
-  //   Object.entries(svgs).map(async ([k, v]) => {
-  //     const regex = /([\d]+)(?=\.svg)/gm;
-  //     const url = (v as any).default as string;
-  //     let template = await (await fetch(url)).text();
-  //     let arrayTemplate = template.split("\n");
-  //     arrayTemplate.splice(0, 1);
-  //     template = arrayTemplate.join("\n");
-
-  //     return [
-  //       k.match(regex)![0],
-  //       defineComponent({
-  //         props: ["used_effects_indexes", "card"],
-  //         setup(_props) {
-  //           const count = ref(0);
-  //           return { count };
-  //         },
-  //         methods: {
-  //           effectClick(effect: number) {
-  //             this.$emit("effectClick", effect);
-  //           },
-  //         },
-  //         template: template,
-  //       }),
-  //     ];
-  //   })
-  // );
-
   const components = await Promise.all(
     Object.entries(svgs).map(async ([k, v]) => {
       const regex = /([\d]+)(?=\.svg)/gm;
@@ -52,18 +25,29 @@ export async function compileCards(app: App<any>) {
         template = arrayTemplate.join("\n");
         return [
           Number(k.match(regex)![0]).toString(),
+          // markRaw(
+          //   defineAsyncComponent({
+          //     loader: async () =>
+          //       defineComponent({
+          //         props: ["used_effects_indexes", "cardId"],
+          //         methods: {
+          //           effectClick(effect: number) {
+          //             this.$emit("effectClick", effect);
+          //           },
+          //         },
+          //         template: template,
+          //       }),
+          //   })
+          // ),
           markRaw(
-            defineAsyncComponent({
-              loader: async () =>
-                defineComponent({
-                  props: ["used_effects_indexes", "cardId"],
-                  methods: {
-                    effectClick(effect: number) {
-                      this.$emit("effectClick", effect);
-                    },
-                  },
-                  template: template,
-                }),
+            defineComponent({
+              props: ["used_effects_indexes", "cardId"],
+              methods: {
+                effectClick(effect: number) {
+                  this.$emit("effectClick", effect);
+                },
+              },
+              template: template,
             })
           ),
         ];
@@ -79,3 +63,40 @@ export async function compileCards(app: App<any>) {
 
   Object.assign(cards, Object.fromEntries(components));
 }
+
+export async function compileTokens() {
+  const svgs = import.meta.glob("@/assets/images/tokens/*.svg", {
+    eager: true,
+  });
+
+  const components = await Promise.all(
+    Object.entries(svgs).map(async ([k, v]) => {
+      const regex = /([\w]+)(?=\.svg)/gm;
+      const url = (v as any).default as string;
+      try {
+        let template: string;
+        if (process.dev && !process.client) {
+          template = (await import(/* @vite-ignore */ k + "?raw")).default;
+        } else {
+          template = await (await fetch(url)).text();
+        }
+
+        let arrayTemplate = template.split("\n");
+        arrayTemplate.splice(0, 1);
+        template = arrayTemplate.join("\n");
+        return [
+          k.match(regex)![0].toString(),
+          markRaw(
+            defineComponent({
+              template: template,
+            })
+          ),
+        ];
+      } catch (e) {
+        console.error(e, k);
+        return [];
+      }
+    })
+  );
+  Object.assign(tokens, Object.fromEntries(components));
+}