diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/card_thumb.svelte | 77 | ||||
| -rw-r--r-- | src/components/main_panel.svelte | 25 | ||||
| -rw-r--r-- | src/components/right_panel.svelte | 6 |
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; |