Leahnaya/TableturfBattleApp
1
0
Fork 0
mirror of https://github.com/AndrioCelos/TableturfBattleApp.git synced 2026-07-13 14:41:34 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add a sort button to the deck editor

Browse Source
This commit is contained in:
Andrio Celos 2023-08-30 19:21:30 +10:00
parent d4eb72ee3e
commit 252b326262
3 changed files with 56 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
TableturfBattleClient/index.html
View File

@ -493,6 +493,7 @@
<section id="deckEditordeckEditPage">
<h3 id="deckName2">Deck</h3>
<div>
<button type="button" id="deckSortButton">Sort</button>
<button type="button" id="deckTestButton">Test</button>
<button type="button" id="deckSaveButton">Save</button>
<button type="button" id="deckCancelButton">Cancel</button>

11
TableturfBattleClient/src/CardList.ts
View File

@ -5,10 +5,10 @@ class CardList {
readonly cardButtons: CardButton[] = [ ];
static readonly cardSortOrders: { [key: string]: (a: Card, b: Card) => number } = {
'number': (a, b) => compareCardNumbers(a, b),
'number': (a, b) => compareCardNumbers(a.number, b.number),
'name': (a, b) => a.name.localeCompare(b.name),
'size': (a, b) => a.size != b.size ? a.size - b.size : compareCardNumbers(a, b),
'rarity': (a, b) => a.rarity != b.rarity ? a.rarity - b.rarity : compareCardNumbers(a, b),
'size': (a, b) => a.size != b.size ? a.size - b.size : compareCardNumbers(a.number, b.number),
'rarity': (a, b) => a.rarity != b.rarity ? a.rarity - b.rarity : compareCardNumbers(a.number, b.number),
}
constructor(listElement: HTMLElement, sortBox: HTMLSelectElement, filterBox: HTMLInputElement) {
@ -55,7 +55,8 @@ class CardList {
button.buttonElement.hidden = false;
}
}
function compareCardNumbers(a: Card, b: Card) {
function compareCardNumbers(a: number, b: number) {
// Sort upcoming cards after released cards.
return a.number >= 0 ? (b.number >= 0 ? a.number - b.number : -1) : (b.number >= 0 ? 1 : b.number - a.number);
return a >= 0 ? (b >= 0 ? a - b : -1) : (b >= 0 ? 1 : b - a);
}

63
TableturfBattleClient/src/Pages/DeckEditPage.ts
View File

@ -5,6 +5,7 @@ const deckEditSize = document.getElementById('deckEditSize')!;
const deckCardListEdit = document.getElementById('deckCardListEdit')!;
const cardList = CardList.fromId('cardList', 'cardListSortBox', 'cardListFilterBox');
const cardListButtonGroup = new CheckButtonGroup<Card>();
const deckSortButton = document.getElementById('deckSortButton') as HTMLButtonElement;
const deckTestButton = document.getElementById('deckTestButton') as HTMLButtonElement;
const deckSaveButton = document.getElementById('deckSaveButton') as HTMLButtonElement;
const deckCancelButton = document.getElementById('deckCancelButton') as HTMLButtonElement;
@ -24,22 +25,29 @@ function deckEditInitCardDatabase(cards: Card[]) {
cardList.add(button);
cardListButtonGroup.add(button, card);
button.buttonElement.addEventListener('click', () => {
if (!button.enabled) return;
for (const button2 of cardList.cardButtons) {
if (button2 != button)
button2.checked = false;
}
if (selectedDeckCardIndex == null) return;
const oldButton = deckEditCardButtons.entries[selectedDeckCardIndex].button;
const oldEntry = deckEditCardButtons.entries[selectedDeckCardIndex];
const oldCardNumber = oldEntry.value;
const button3 = createDeckEditCardButton(selectedDeckCardIndex, card.number);
if (oldCardNumber != 0)
cardListButtonGroup.entries.find(e => e.value.number == oldCardNumber)!.button.enabled = true;
cardListButtonGroup.entries.find(e => e.value.number == card.number)!.button.enabled = false;
const button3 = createDeckEditCardButton(card.number);
button3.checked = true;
const oldElement = oldButton.buttonElement;
const oldElement = oldEntry.button.buttonElement;
deckCardListEdit.insertBefore(button3.buttonElement, oldElement);
deckCardListEdit.removeChild(oldElement);
deckEditCardButtons.replace(selectedDeckCardIndex, button3, selectedDeckCardIndex);
deckEditCardButtons.replace(selectedDeckCardIndex, button3, card.number);
deckEditUpdateSize();
cardList.listElement.parentElement!.classList.remove('selecting');
@ -90,24 +98,27 @@ function editDeck() {
for (let i = 0; i < 15; i++) {
if (selectedDeck.cards[i]) {
const button = createDeckEditCardButton(i, selectedDeck.cards[i]);
deckEditCardButtons.add(button, i);
const button = createDeckEditCardButton(selectedDeck.cards[i]);
deckEditCardButtons.add(button, selectedDeck.cards[i]);
} else {
const element = createDeckEditEmptySlotButton(i);
deckEditCardButtons.add(element, i);
const element = createDeckEditEmptySlotButton();
deckEditCardButtons.add(element, 0);
}
}
for (const entry of cardListButtonGroup.entries)
entry.button.enabled = !selectedDeck.cards.includes(entry.value.number);
deckEditUpdateSize();
cardList.clearFilter();
editingDeck = true;
showPage('deckEdit');
}
function createDeckEditCardButton(index: number, cardNumber: number) {
function createDeckEditCardButton(cardNumber: number) {
const button = new CardButton(cardDatabase.get(cardNumber));
button.buttonElement.addEventListener('click', () => {
selectedDeckCardIndex = index;
selectedDeckCardIndex = deckEditCardButtons.entries.findIndex(e => e.button == button);
for (const button2 of cardList.cardButtons) {
button2.checked = button2.card.number == cardNumber;
}
@ -116,22 +127,46 @@ function createDeckEditCardButton(index: number, cardNumber: number) {
return button;
}
function createDeckEditEmptySlotButton(index: number) {
function createDeckEditEmptySlotButton() {
const buttonElement = document.createElement('button');
const button = new CheckButton(buttonElement);
buttonElement.type = 'button';
buttonElement.className = 'card emptySlot';
buttonElement.addEventListener('click', () => {
selectedDeckCardIndex = index;
selectedDeckCardIndex = deckEditCardButtons.entries.findIndex(e => e.button == button);
for (const button2 of cardList.cardButtons)
button2.checked = false;
cardList.listElement.parentElement!.classList.add('selecting');
});
return new CheckButton(buttonElement);
return button;
}
deckSortButton.addEventListener('click', _ => {
let isSorted = true;
let lastCardNumber = deckEditCardButtons.entries[0].value;
for (let i = 1; i < deckEditCardButtons.entries.length; i++) {
const entry = deckEditCardButtons.entries[i];
if (lastCardNumber == 0 ? entry.value != 0 : (entry.value != 0 && cardDatabase.get(entry.value).size < cardDatabase.get(lastCardNumber).size)) {
isSorted = false;
break;
}
lastCardNumber = entry.value;
}
const comparer = CardList.cardSortOrders['size'];
if (isSorted)
// If the deck is already sorted, reverse the order.
deckEditCardButtons.entries.sort((a, b) => a.value == 0 ? (b.value == 0 ? 0 : 1) : (b.value == 0 ? -1 : comparer(cardDatabase.get(b.value), cardDatabase.get(a.value))));
else
deckEditCardButtons.entries.sort((a, b) => a.value == 0 ? (b.value == 0 ? 0 : 1) : (b.value == 0 ? -1 : comparer(cardDatabase.get(a.value), cardDatabase.get(b.value))));
clearChildren(deckCardListEdit);
for (const button of deckEditCardButtons.buttons)
deckCardListEdit.appendChild(button.buttonElement);
});
deckSaveButton.addEventListener('click', () => {
if (selectedDeck == null) return;
selectedDeck.cards = deckEditCardButtons.buttons.map(o => (o as CardButton).card?.number ?? 0);
selectedDeck.cards = deckEditCardButtons.entries.map(e => e.value);
saveDecks();
selectDeck();
stopEditingDeck();