Feat : add used class binding, add vuejs click listener

src/draw_functions.py

@@ -16,7 +16,7 @@ with open("src/data/translation_fr.json", encoding="utf-8") as f:
 def js_event_function(effect_id: str | None):
     if effect_id is None:
         return None
-    return f"this.dispatchEvent(new CustomEvent( 'activate_effect', {{ bubbles: true, composed:true, detail: '{effect_id}' }} ) );"
+    return f"effectClick({effect_id})"
 
 
 def is_base_effect(effect: Effect):
@@ -34,7 +34,7 @@ def create_icon(
         click_function = "console.warn('unknown interaction')"
     else:
         click_function = js_event_function(effect_id)
-    group = dw.Group(**{"class": "svg_resource_icon"}, onclick=click_function)
+    group = dw.Group(**{"class": "svg_resource_icon", "v-on:click": click_function})
     group.append(dw.Circle(cx=0, cy=0, r=radius, fill=fill_circle, x=0, y=0))
     group.append(
         dw.Text(
@@ -267,7 +267,7 @@ def create_effect_text(effects: list[Effect], height: float, width: int):
 
 
 def create_effect_row(effects: list[Effect], type: str, height: int, width: int):
-    group = dw.Group()
+    group = dw.Group(**{"class": "svg_effect"})
     has_icon = False
     if type == "faction_combo":
         has_icon = True
@@ -326,12 +326,16 @@ def create_effect_row(effects: list[Effect], type: str, height: int, width: int)
     text_width = width
     if has_icon:
         text_width = width - 70
-    group.append(
-        dw.Group(
-            create_effect_text(effect_with_text, text_height, text_width),
-            transform=f"translate({width / 2},{text_y_pos})",
+    if len(effect_with_text) > 0:
+        group.append(
+            dw.Group(
+                create_effect_text(effect_with_text, text_height, text_width),
+                transform=f"translate({width / 2},{text_y_pos})",
+                **{
+                    "v-bind:class": f"{{used:used_effects_indexes.includes({effect_with_text[0].get('index')})}}"
+                },
+            )
         )
-    )
 
     icon_radius = min(height / 3, stats_radius)
     for [i, e] in enumerate(effect_with_icons):

src/generate_cards_mvp.py

@@ -85,7 +85,7 @@ for card_data in cards:
     # Create a new SVG drawing
     output_dir = "output/" + all_skin_data["skin_name"]
     os.makedirs(output_dir, exist_ok=True)
-    d = Drawing(x_width, y_height, id="card"+str(card_data["id"]), id_prefix=str(card_data.get('id')) + "_", **{'class':'card', 'xmlns:v-bind':"https://heron.legonzaur.fr"})
+    d = Drawing(x_width, y_height, id="card"+str(card_data["id"]), id_prefix=str(card_data.get('id')) + "_", **{'class':'card', 'xmlns:v-bind':"https://vuejs.org/guide/essentials/class-and-style.html",'xmlns:v-on':"https://vuejs.org/guide/essentials/event-handling.html"})
     d.append(shadowFilter)
 
     # Define linear colored gradient
@@ -199,4 +199,3 @@ for card_data in cards:
 
     # Save the SVG file
     d.save_svg(f"output/{all_skin_data['skin_name']}/{str(card_data["id"]).zfill(3)}.svg")
-    finish_card(f"output/{all_skin_data['skin_name']}/{str(card_data["id"]).zfill(3)}.svg")