add banlist

3 files changed, 89 insertions, 19 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>
diff --git a/src/components/main_panel.svelte b/src/components/main_panel.svelte
index 2db7a34..1c55d49 100644
--- a/src/components/main_panel.svelte
+++ b/src/components/main_panel.svelte
@@ -1,6 +1,7 @@
 <script lang="js">
     import CardThumb from './card_thumb.svelte';
-    import { deck, setDeck, deckOps } from '../deck';
+    import { deck, setDeck, deckOps, format, setFormat } from '../deck';
+    import { cardLimit } from '../card_db';
     import {
         parseYdk,
         genYdk,
@@ -74,6 +75,8 @@
     }
 
 
+
+
 </script>
 
 <input bind:this={fileInput} style="display:none;" onchange={loadDeck} type="file" class="file-input" accept=".ydk" />
@@ -84,6 +87,11 @@
         <button class="btn" onclick={saveDeck}>保存</button>
         <button class="btn" onclick={copyDeck}>复制到剪贴板</button>
         <button class="btn" onclick={shareDeck}>分享</button>
+        <select bind:value={$format} class="select-format" id="format" onchange={()=>setFormat($format)}>
+            <option value="none">无禁限</option>
+            <option value="ocg">OCG</option>
+        </select>
+
     </div>
     <div class="deck-section">
         <div class="deck-group">
@@ -91,7 +99,7 @@
             <div role="region" ondragover={(e)=>e.preventDefault()} ondrop={(e)=>onDrop("main", e, -1)} class="card-grid main-deck">
                 {#each $deck.main as card, i}
                     <div class="card-grid-thumb" role="region" ondragover={(e)=>e.preventDefault()} ondrop={(e)=>onDrop("main", e, i)}>
-                        <CardThumb id={card} idx={i} area="main" />
+                        <CardThumb id={card} idx={i} area="main" limitNum={cardLimit(card, $format)} />
                     </div>
                 {/each}
             </div>
@@ -101,7 +109,7 @@
             <div role="region" ondragover={(e)=>e.preventDefault()} ondrop={(e)=>onDrop("extra", e, -1)} class="card-grid extra-deck">
                 {#each $deck.extra as card, i}
                     <div class="card-grid-thumb" role="region" ondragover={(e)=>e.preventDefault()} ondrop={(e)=>onDrop("extra", e, i)}>
-                        <CardThumb id={card} idx={i} area="extra" />
+                        <CardThumb id={card} idx={i} area="extra" limitNum={cardLimit(card, $format)} />
                     </div>
                 {/each}
             </div>
@@ -111,7 +119,7 @@
             <div role="region" ondragover={(e)=>e.preventDefault()} ondrop={(e)=>onDrop("side", e, -1)} class="card-grid side-deck">
                 {#each $deck.side as card, i}
                     <div class="card-grid-thumb" role="region" ondragover={(e)=>e.preventDefault()} ondrop={(e)=>onDrop("side", e, i)}>
-                        <CardThumb id={card} idx={i} area="side" />
+                        <CardThumb id={card} idx={i} area="side" limitNum={cardLimit(card, $format)} />
                     </div>
                 {/each}
             </div>
@@ -142,6 +150,14 @@
     cursor: pointer;
 }
 
+
+.select-format {
+    padding: 8px 8px;
+    margin-right: 10px;
+    cursor: pointer;
+    font-size: 1.1em;
+}
+
 .deck-group {
     margin-bottom: 30px;
 }
@@ -163,6 +179,7 @@
 }
 
 .card-grid-thumb {
+    position: relative;
     aspect-ratio: 1/1.4;
     border-radius: 5px;
 }
diff --git a/src/components/right_panel.svelte b/src/components/right_panel.svelte
index 816687e..9863d97 100644
--- a/src/components/right_panel.svelte
+++ b/src/components/right_panel.svelte
@@ -1,7 +1,8 @@
 <script lang="js">
     import CardThumb from './card_thumb.svelte';
     import { changeInput, showingCards, onPrevPage, onNextPage } from '../search'
-    import { deckOps } from '../deck';
+    import { deckOps, format } from '../deck';
+    import { cardLimit } from '../card_db';
 
     function onChange(event) {
         changeInput(event.target.value);
@@ -24,7 +25,7 @@
            {#each $showingCards as card}
                <div class="card-item">
                    <div class="card-thumbnail">
-                       <CardThumb id={card.id} idx={-1} area="search" />
+                       <CardThumb id={card.id} idx={-1} area="search" limitNum={cardLimit(card.id, $format)} />
                    </div>
                    <span>{card.name}</span>
                </div>
@@ -87,6 +88,7 @@
 }
 
 .card-thumbnail {
+    position: relative;
     width: 50px;
     height: 70px;
     background-color: #eee;