add banlist

1 files changed, 64 insertions, 13 deletions

diff --git a/src/components/card_thumb.svelte b/src/components/card_thumb.svelte
index 8e701ea..e68a37e 100644
--- a/src/components/card_thumb.svelte
+++ b/src/components/card_thumb.svelte
@@ -1,9 +1,8 @@
 <script lang="js">
-
     import { setLeftPanelCard } from '../left_panel';
     import { cardImageUrl } from '../utils';
 
-    let {id, area, idx} = $props();
+    let {id, area, idx, limitNum} = $props();
 
     function onhover() {
         setLeftPanelCard(id); 
@@ -12,22 +11,74 @@
     function onDragStart(e) {
         e.dataTransfer.setData('text', JSON.stringify({id, area, idx}))
     }
-
 </script>
 
 {#if id}
-    <img
-        style="margin:2px;"
-        draggable="true"
-        onmouseover={onhover}
-        onfocus={onhover}
-        ondragstart={onDragStart}
-        height="100%"
-        src={cardImageUrl(id)}
-        alt="yugioh card {id}"
-    />
+   <img
+       style="margin:2px;"
+       draggable="true"
+       onmouseover={onhover}
+       onfocus={onhover}
+       ondragstart={onDragStart}
+       height="100%"
+       src={cardImageUrl(id)}
+       alt="yugioh card {id}"
+   />
+   {#if limitNum === 1 || limitNum == 2}
+       <div class="overlay">{limitNum}</div>
+   {:else if limitNum === 0}
+       <div class="ban-overlay"></div>
+   {/if}
 {/if}
 
 <style>
+    .overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 3px solid red;
+        border-radius: 50%;
+        background-color: black;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+        color: yellow;
+        font-size: 15px;
+        font-family: Arial, sans-serif;
+        box-sizing: border-box;
+        pointer-events: none;
+    }
+    
+    .ban-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 3px solid red;
+        border-radius: 50%;
+        background-color: black;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+        color: yellow;
+        font-size: 15px;
+        font-family: Arial, sans-serif;
+        box-sizing: border-box;
+        pointer-events: none;
+    }
 
+    .ban-overlay::after {
+        content: '';
+        width: 15px;
+        height: 3px;
+        background-color: red;
+        transform: rotate(45deg);
+        position: absolute;
+        pointer-events: none;
+    }
 </style>