diff options
Diffstat (limited to 'src/components/main_panel.svelte')
| -rw-r--r-- | src/components/main_panel.svelte | 25 |
1 files changed, 21 insertions, 4 deletions
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; } |