Add an option to sort special weapon cards first or last

TableturfBattleClient/index.html

@@ -661,6 +661,7 @@
 			<form id="settingsDialogForm" method="dialog">
 				<p><label for="optionsColourLock"><input type="checkbox" id="optionsColourLock" checked/> Colour lock</label></p>
 				<p><label for="optionsTurnNumberStyle">Turn number style: <select id="optionsTurnNumberStyle"><option value="remaining" selected>Turns remaining</option><option value="absolute">Turn number</option></select></label></p>
+				<p><label for="optionsSpecialWeaponSorting">Special weapon card sorting: <select id="optionsSpecialWeaponSorting"><option value="First" selected>First</option><option value="Last">Last</option><option value="InOrder">In order</option></select></label></p>
 				<button type="submit">Close</button>
 			</form>
 		</dialog>

TableturfBattleClient/src/Card.ts

@@ -62,6 +62,7 @@ class Card {
 	}
 
 	get isUpcoming() { return this.number < 0; }
+	get isSpecialWeapon() { return this.specialCost == 3 && this.size == 12 };
 
 	getSpace(x: number, y: number, rotation: number) {
 		switch (rotation & 3) {

TableturfBattleClient/src/Config.ts

@@ -6,10 +6,17 @@ interface AppConfig {
 	discordTitle?: string
 }
 
+enum SpecialWeaponSorting {
+	First,
+	Last,
+	InOrder
+}
+
 class Config {
 	name: string | null = null;
 	colourLock = true;
 	absoluteTurnNumber = false;
+	specialWeaponSorting = SpecialWeaponSorting.First;
 }
 
 declare var config: AppConfig;

TableturfBattleClient/src/Pages/DeckEditPage.ts

@@ -212,7 +212,7 @@ function createDeckEditEmptySlotButton() {
 	const buttonElement = document.createElement('button');
 	const button = new CheckButton(buttonElement);
 	buttonElement.type = 'button';
-	buttonElement.className = 'card emptySlot';
+	buttonElement.className = 'cardButton emptySlot';
 	buttonElement.addEventListener('click', () => {
 		for (const button2 of cardList.cardButtons)
 			button2.checked = false;
@@ -224,24 +224,36 @@ function createDeckEditEmptySlotButton() {
 	return button;
 }
 
+function deckSortCompare(reverse: boolean, numberA: number, numberB: number) {
+	// Any card is always sorted before empty slots.
+	if (numberA == 0) return numberB == 0 ? 0 : 1;
+	if (numberB == 0) return -1;
+
+	const cardA = cardDatabase.get(numberA);
+	const cardB = cardDatabase.get(numberB);
+	if (userConfig.specialWeaponSorting != SpecialWeaponSorting.InOrder) {
+		if (cardA.isSpecialWeapon && !cardB.isSpecialWeapon)
+			return ((userConfig.specialWeaponSorting == SpecialWeaponSorting.Last) != reverse) ? 1 : -1;
+		else if (cardB.isSpecialWeapon && !cardA.isSpecialWeapon)
+			return ((userConfig.specialWeaponSorting == SpecialWeaponSorting.Last) != reverse) ? -1 : 1;
+	}
+	return CardList.cardSortOrders['size'](cardA, cardB);
+}
+
 deckSortButton.addEventListener('click', _ => {
+	// Check whether the deck is already sorted so that the order will be reversed if so.
 	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)) {
+		if (lastCardNumber == 0 ? entry.value != 0 : (entry.value != 0 && deckSortCompare(false, entry.value, lastCardNumber) < 0)) {
 			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))));
 
+	deckEditCardButtons.entries.sort((a, b) => deckSortCompare(isSorted, a.value, b.value));
 	clearChildren(deckCardListEdit);
 	for (const button of deckEditCardButtons.buttons)
 		deckCardListEdit.appendChild(button.buttonElement);

TableturfBattleClient/src/Pages/PreGamePage.ts

@@ -21,6 +21,7 @@ const goalWinCountBox = document.getElementById('goalWinCountBox') as HTMLSelect
 
 const optionsColourLock = document.getElementById('optionsColourLock') as HTMLInputElement;
 const optionsTurnNumberStyle = document.getElementById('optionsTurnNumberStyle') as HTMLSelectElement;
+const optionsSpecialWeaponSorting = document.getElementById('optionsSpecialWeaponSorting') as HTMLSelectElement;
 
 let shownMaxPlayersWarning = false;
 
@@ -211,6 +212,7 @@ preGameDeckEditorButton.addEventListener('click', e => {
 preGameSettingsButton.addEventListener('click', e => {
 	e.preventDefault();
 	optionsTurnNumberStyle.value = turnNumberLabel.absoluteMode ? 'absolute' : 'remaining';
+	optionsSpecialWeaponSorting.value = SpecialWeaponSorting[userConfig.specialWeaponSorting];
 	settingsDialog.showModal();
 });
 
@@ -261,6 +263,10 @@ optionsColourLock.addEventListener('change', () => {
 })
 
 optionsTurnNumberStyle.addEventListener('change', () => turnNumberLabel.absoluteMode = optionsTurnNumberStyle.value == 'absolute');
+optionsSpecialWeaponSorting.addEventListener('change', () => {
+	userConfig.specialWeaponSorting = SpecialWeaponSorting[optionsSpecialWeaponSorting.value as keyof typeof SpecialWeaponSorting];
+	saveSettings();
+});
 
 let playerName = localStorage.getItem('name');
 (document.getElementById('nameBox') as HTMLInputElement).value = playerName || '';