diff --git a/TableturfBattleClient/index.html b/TableturfBattleClient/index.html index 56a4da2..16f1ac4 100644 --- a/TableturfBattleClient/index.html +++ b/TableturfBattleClient/index.html @@ -585,6 +585,7 @@
+
diff --git a/TableturfBattleClient/src/Pages/DeckEditPage.ts b/TableturfBattleClient/src/Pages/DeckEditPage.ts index eb91c7a..ea4a4f4 100644 --- a/TableturfBattleClient/src/Pages/DeckEditPage.ts +++ b/TableturfBattleClient/src/Pages/DeckEditPage.ts @@ -13,6 +13,7 @@ const deckTestButton = document.getElementById('deckTestButton') as HTMLButtonEl const deckSaveButton = document.getElementById('deckSaveButton') as HTMLButtonElement; const deckCancelButton = document.getElementById('deckCancelButton') as HTMLButtonElement; const deckCardListBackButton = document.getElementById('deckCardListBackButton') as HTMLLinkElement; +const deckEditorRemoveButton = document.getElementById('deckEditorRemoveButton') as HTMLButtonElement; const cardListFilterBox = document.getElementById('cardListFilterBox') as HTMLSelectElement; const testStageSelectionList = document.getElementById('testStageSelectionList')!; const testStageButtons = new CheckButtonGroup(testStageSelectionList); @@ -67,6 +68,28 @@ function addCardToDeckEditor(card: Card) { }); } +deckEditorRemoveButton.addEventListener('click', () => { + const index = deckEditCardButtons.entries.findIndex(el => el.button.checked); + if (index < 0) return; + const oldEntry = deckEditCardButtons.entries[index]; + const oldCardNumber = oldEntry.value; + + if (oldCardNumber != 0) + cardListButtonGroup.entries.find(e => e.value.number == oldCardNumber || e.value.altNumber == oldCardNumber)!.button.enabled = true; + + const button3 = createDeckEditEmptySlotButton(); + button3.checked = true; + + deckEditCardButtons.replace(index, button3, 0); + deckEditUpdateSize(); + + cardList.listElement.parentElement!.classList.remove('selecting'); + if (!deckModified) { + deckModified = true; + window.addEventListener('beforeunload', onBeforeUnload_deckEditor); + } +}); + function deckEditInitStageDatabase(stages: Stage[]) { for (const stage of stages) { const button = new StageButton(stage); @@ -156,6 +179,7 @@ function createDeckEditCardButton(cardNumber: number) { button2.checked = button2.card.number == cardNumber; } cardList.listElement.parentElement!.classList.add('selecting'); + deckEditorRemoveButton.hidden = false; }); button.buttonElement.addEventListener('dragstart', e => { if (e.dataTransfer == null) return; @@ -235,6 +259,7 @@ function createDeckEditEmptySlotButton() { for (const button2 of cardList.cardButtons) button2.checked = false; cardList.listElement.parentElement!.classList.add('selecting'); + deckEditorRemoveButton.hidden = true; }); buttonElement.addEventListener('dragenter', e => e.preventDefault()); buttonElement.addEventListener('dragover', deckEditCardButton_dragover); diff --git a/TableturfBattleClient/tableturf.css b/TableturfBattleClient/tableturf.css index 770b7d0..f7b196e 100644 --- a/TableturfBattleClient/tableturf.css +++ b/TableturfBattleClient/tableturf.css @@ -806,6 +806,7 @@ rect.special, g.specialCost rect { #cardList { grid-row: 2; grid-column: 1 / -1; + padding-bottom: 4rem; } .cardListControl { display: grid; @@ -819,6 +820,14 @@ rect.special, g.specialCost rect { grid-auto-rows: max-content; } +#deckEditorRemoveButton { + position: absolute; + right: 1em; + bottom: 1em; + font-size: 100%; + padding: 0.5em; +} + /* Game page */ #gamePage:not([hidden]) {