From 0891a53da1c2ea7c1ecb684a7fbf2581bd99a1b3 Mon Sep 17 00:00:00 2001
From: Andrio Celos <AndrioCelos@users.noreply.github.com>
Date: Fri, 8 Mar 2024 12:45:03 +1100
Subject: [PATCH] Reorganise assets and convert images to WebP

---
 TableturfBattleClient/assets/site.webmanifest |  8 ++--
 TableturfBattleClient/index.html              |  6 +--
 TableturfBattleClient/src/CardDisplay.ts      |  8 ++--
 .../src/Pages/GalleryPage.ts                  |  2 +-
 TableturfBattleClient/src/StageButton.ts      |  6 +--
 TableturfBattleClient/tableturf.css           | 48 +++++++++----------
 6 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/TableturfBattleClient/assets/site.webmanifest b/TableturfBattleClient/assets/site.webmanifest
index 71fe458..d8ccc1f 100644
--- a/TableturfBattleClient/assets/site.webmanifest
+++ b/TableturfBattleClient/assets/site.webmanifest
@@ -2,14 +2,14 @@
 	"name": "Tableturf Battle",
 	"icons": [
 		{
-			"src": "external/android-chrome-192x192.png",
+			"src": "external/android-chrome-192x192.webp",
 			"sizes": "192x192",
-			"type": "image/png"
+			"type": "image/webp"
 		},
 		{
-			"src": "external/android-chrome-512x512.png",
+			"src": "external/android-chrome-512x512.webp",
 			"sizes": "512x512",
-			"type": "image/png"
+			"type": "image/webp"
 		}
 	],
 	"theme_color": "#0c92f2",
diff --git a/TableturfBattleClient/index.html b/TableturfBattleClient/index.html
index 9a8ff76..9525010 100644
--- a/TableturfBattleClient/index.html
+++ b/TableturfBattleClient/index.html
@@ -9,8 +9,8 @@
 		</script>
 		<title>Tableturf Battle</title>
 		<link rel="apple-touch-icon" sizes="180x180" href="assets/external/apple-touch-icon.png">
-		<link rel="icon" type="image/png" sizes="32x32" href="assets/external/favicon-32x32.png">
-		<link rel="icon" type="image/png" sizes="16x16" href="assets/external/favicon-16x16.png">
+		<link rel="icon" type="image/webp" sizes="32x32" href="assets/external/favicon-32x32.webp">
+		<link rel="icon" type="image/webp" sizes="16x16" href="assets/external/favicon-16x16.webp">
 		<link rel="manifest" href="assets/site.webmanifest">
 		<link rel="stylesheet" href="tableturf.css"/>
 		<script src="config/config.js"></script>
@@ -50,7 +50,7 @@
 			</defs>
 		</svg>
 		<div id="preGamePage" hidden>
-			<div id="logoBanner"><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/external/logo.png"></div>
+			<div id="logoBanner"><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/external/logo.webp"></div>
 			<h1>Tableturf Battle</h1>
 			<form id="preGameForm">
 				<p><label for="nameBox">Choose a nickname: <input type="text" id="nameBox" required minlength="1" maxlength="20"/></label></p>
diff --git a/TableturfBattleClient/src/CardDisplay.ts b/TableturfBattleClient/src/CardDisplay.ts
index 21002dd..43dcf5b 100644
--- a/TableturfBattleClient/src/CardDisplay.ts
+++ b/TableturfBattleClient/src/CardDisplay.ts
@@ -66,7 +66,7 @@ class CardDisplay implements ICardElement {
 			const db = (card.inkColour2.b - card.inkColour1.b) / 255;
 			svg.insertAdjacentHTML('beforeend', `
 				<filter id="ink-${this.idNumber}" class="inkFilter" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="${dr} 0 0 0 ${r1} 0 ${dg} 0 0 ${g1} 0 0 ${db} 0 ${b1} 0 0 0 0.88 0"/></filter>
-				<image href="assets/external/CardInk_00.png" width="100%" height="100%" clip-path="url(#cardBorder)" filter="url(#ink-${this.idNumber})"/>
+				<image href="assets/external/CardInk_00.webp" width="100%" height="100%" clip-path="url(#cardBorder)" filter="url(#ink-${this.idNumber})"/>
 				<image href="assets/external/CardFrame_01.webp" width="100%" height="100%" clip-path="url(#cardBorder)"/>
 			`);
 		}
@@ -141,7 +141,7 @@ class CardDisplay implements ICardElement {
 		svg.appendChild(text1);
 
 		// Size
-		svg.insertAdjacentHTML('beforeend', `<image class='cardSizeBackground' href='assets/external/Game Assets/CardCost_0${card.rarity}.png' width='74.1' height='74.1' transform='translate(8.4 555) rotate(-45)'/>`);
+		svg.insertAdjacentHTML('beforeend', `<image class='cardSizeBackground' href='assets/external/CardCost_0${card.rarity}.webp' width='74.1' height='74.1' transform='translate(8.4 555) rotate(-45)'/>`);
 		svg.insertAdjacentHTML('beforeend', `<text fill='white' stroke='${card.rarity == Rarity.Common ? '#482BB4' : card.rarity == Rarity.Rare ? '#8B7E25' : '#481EF9'}' paint-order='stroke' stroke-width='5' font-size='33.4' x='13.7%' y='92.2%' text-anchor='middle'>${card.size}</text>`);
 		this.sizeElement = svg.lastElementChild as SVGTextElement;
 
@@ -171,7 +171,7 @@ class CardDisplay implements ICardElement {
 					rect.classList.add(card.grid[x][y] == Space.SpecialInactive1 ? 'special' : 'ink');
 					const elements: Element[] = [rect];
 					const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-					image.setAttribute('href', card.grid[x][y] == Space.SpecialInactive1 ? 'assets/SpecialOverlay.png' : 'assets/InkOverlay.png');
+					image.setAttribute('href', card.grid[x][y] == Space.SpecialInactive1 ? 'assets/SpecialOverlay.webp' : 'assets/InkOverlay.webp');
 					elements.push(image);
 
 					for (const el of elements) {
@@ -191,7 +191,7 @@ class CardDisplay implements ICardElement {
 		for (let i = 0; i < value; i++) {
 			let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
 			const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-			image.setAttribute('href', 'assets/SpecialOverlay.png');
+			image.setAttribute('href', 'assets/SpecialOverlay.webp');
 			for (const el of [ rect, image ]) {
 				el.setAttribute('x', (110 * (i % 5)).toString());
 				el.setAttribute('y', (-125 * Math.floor(i / 5)).toString());
diff --git a/TableturfBattleClient/src/Pages/GalleryPage.ts b/TableturfBattleClient/src/Pages/GalleryPage.ts
index aab5b2a..fd8fe66 100644
--- a/TableturfBattleClient/src/Pages/GalleryPage.ts
+++ b/TableturfBattleClient/src/Pages/GalleryPage.ts
@@ -385,7 +385,7 @@ galleryCardEditorRarityBox.addEventListener('change', () => {
 	display.element.classList.add(Rarity[parseInt(galleryCardEditorRarityBox.value)].toLowerCase());
 
 	const sizeImage = <SVGImageElement> display.svg.getElementsByClassName('cardSizeBackground')[0];
-	sizeImage.setAttribute('href', `assets/external/Game Assets/CardCost_0${galleryCardEditorRarityBox.value}.png`);
+	sizeImage.setAttribute('href', `assets/external/CardCost_0${galleryCardEditorRarityBox.value}.webp`);
 
 	const backgroundImage = <SVGImageElement> display.svg.getElementsByClassName('cardDisplayBackground')[0];
 	backgroundImage.setAttribute('href', `assets/external/CardBackground-custom-${galleryCardEditorRarityBox.value}-1.webp`);
diff --git a/TableturfBattleClient/src/StageButton.ts b/TableturfBattleClient/src/StageButton.ts
index 22fbb73..02a860e 100644
--- a/TableturfBattleClient/src/StageButton.ts
+++ b/TableturfBattleClient/src/StageButton.ts
@@ -37,7 +37,7 @@ class StageButton extends CheckButton {
 
 					if (stage.grid[x][y] & Space.SpecialInactive1) {
 						const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-						image.setAttribute('href', 'assets/SpecialOverlay.png');
+						image.setAttribute('href', 'assets/SpecialOverlay.webp');
 						image.setAttribute('x', rect.getAttribute('x')!);
 						image.setAttribute('y', rect.getAttribute('y')!);
 						image.setAttribute('width', rect.getAttribute('width')!);
@@ -45,7 +45,7 @@ class StageButton extends CheckButton {
 						gridSvg.appendChild(image);
 					} else if (stage.grid[x][y] & Space.Ink1) {
 						const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-						image.setAttribute('href', 'assets/InkOverlay.png');
+						image.setAttribute('href', 'assets/InkOverlay.webp');
 						image.setAttribute('x', rect.getAttribute('x')!);
 						image.setAttribute('y', rect.getAttribute('y')!);
 						image.setAttribute('width', rect.getAttribute('width')!);
@@ -82,7 +82,7 @@ class StageButton extends CheckButton {
 			cell.setAttribute('class', `SpecialInactive${i + 1}`);
 
 			const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-			image.setAttribute('href', 'assets/SpecialOverlay.png');
+			image.setAttribute('href', 'assets/SpecialOverlay.webp');
 			image.setAttribute('x', cell.getAttribute('x')!);
 			image.setAttribute('y', cell.getAttribute('y')!);
 			image.setAttribute('width', cell.getAttribute('width')!);
diff --git a/TableturfBattleClient/tableturf.css b/TableturfBattleClient/tableturf.css
index 76bbcc0..04e4eaf 100644
--- a/TableturfBattleClient/tableturf.css
+++ b/TableturfBattleClient/tableturf.css
@@ -33,7 +33,7 @@ body {
 	--player-special-accent-colour: var(--special-accent-colour-1);
 	--theme-colour: #0c92f2;
 	color: white;
-	background: url('assets/external/BannerBackground.png') black;
+	background: url('assets/external/BannerBackground.webp') black;
 	background-position: 50% -72px;
 	color-scheme: dark;
 }
@@ -593,7 +593,7 @@ dialog::backdrop {
 .cardSpecialPoint, .playHintSpecial {
 	display: inline-block;
 	color: transparent;
-	background: url('assets/SpecialOverlay.png') center/cover, var(--player-special-colour);
+	background: url('assets/SpecialOverlay.webp') center/cover, var(--player-special-colour);
 	width: 1ch;
 	height: 1ch;
 	vertical-align: middle;
@@ -605,10 +605,10 @@ dialog::backdrop {
 	width: 1.5ch;
 	height: 1.5ch;
 }
-.playHintSpecial:nth-of-type(1):not(:last-of-type) { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-1); }
-.playHintSpecial:nth-of-type(2) { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-2); }
-.playHintSpecial:nth-of-type(3) { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-3); }
-.playHintSpecial:nth-of-type(4) { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-4); }
+.playHintSpecial:nth-of-type(1):not(:last-of-type) { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-1); }
+.playHintSpecial:nth-of-type(2) { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-2); }
+.playHintSpecial:nth-of-type(3) { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-3); }
+.playHintSpecial:nth-of-type(4) { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-4); }
 
 .card {
 	position: relative;
@@ -712,19 +712,19 @@ rect.special, g.specialCost rect {
 }
 
 #gameBoard td.Empty { background: #000000C0; outline: 1px solid #80808080; outline-offset: -1px; }
-#gameBoard td.Wall { background: url('assets/Wall.png') center/cover, grey; }
-#gameBoard td.Ink1 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-1); }
-#gameBoard td.Ink2 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-2); }
-#gameBoard td.Ink3 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-3); }
-#gameBoard td.Ink4 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-4); }
-#gameBoard td.SpecialInactive1 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-1); }
-#gameBoard td.SpecialInactive2 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-2); }
-#gameBoard td.SpecialInactive3 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-3); }
-#gameBoard td.SpecialInactive4 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-4); }
-#gameBoard td.SpecialActive1 { background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour-1) 25%, var(--special-colour-1) 75%); }
-#gameBoard td.SpecialActive2 { background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour-2) 25%, var(--special-colour-2) 75%); }
-#gameBoard td.SpecialActive3 { background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour-3) 25%, var(--special-colour-3) 75%); }
-#gameBoard td.SpecialActive4 { background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour-4) 25%, var(--special-colour-4) 75%); }
+#gameBoard td.Wall { background: url('assets/Wall.webp') center/cover, grey; }
+#gameBoard td.Ink1 { background: url('assets/InkOverlay.webp') center/cover, var(--primary-colour-1); }
+#gameBoard td.Ink2 { background: url('assets/InkOverlay.webp') center/cover, var(--primary-colour-2); }
+#gameBoard td.Ink3 { background: url('assets/InkOverlay.webp') center/cover, var(--primary-colour-3); }
+#gameBoard td.Ink4 { background: url('assets/InkOverlay.webp') center/cover, var(--primary-colour-4); }
+#gameBoard td.SpecialInactive1 { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-1); }
+#gameBoard td.SpecialInactive2 { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-2); }
+#gameBoard td.SpecialInactive3 { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-3); }
+#gameBoard td.SpecialInactive4 { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-4); }
+#gameBoard td.SpecialActive1 { background: url('assets/SpecialOverlay.webp') center/cover, radial-gradient(circle, var(--special-accent-colour-1) 25%, var(--special-colour-1) 75%); }
+#gameBoard td.SpecialActive2 { background: url('assets/SpecialOverlay.webp') center/cover, radial-gradient(circle, var(--special-accent-colour-2) 25%, var(--special-colour-2) 75%); }
+#gameBoard td.SpecialActive3 { background: url('assets/SpecialOverlay.webp') center/cover, radial-gradient(circle, var(--special-accent-colour-3) 25%, var(--special-colour-3) 75%); }
+#gameBoard td.SpecialActive4 { background: url('assets/SpecialOverlay.webp') center/cover, radial-gradient(circle, var(--special-accent-colour-4) 25%, var(--special-colour-4) 75%); }
 
 #gameBoard.specialAttackVisual td:is(.Ink1, .Ink2, .Ink3, .Ink4) {
 	opacity: 0.5;
@@ -1300,10 +1300,10 @@ rect.special, g.specialCost rect {
 .playerBar .specialPoint {
 	position: relative;
 	color: transparent;
-  background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour);
+  background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour);
 }
 .playerBar .specialPoint.specialAnimation {
-	background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour) 25%, var(--special-colour) 75%);
+	background: url('assets/SpecialOverlay.webp') center/cover, radial-gradient(circle, var(--special-accent-colour) 25%, var(--special-colour) 75%);
 }
 .playerBar .specialPoint.specialAnimation > div {
 	background: color-mix(in srgb, var(--special-colour), var(--special-accent-colour) 75%);
@@ -1968,11 +1968,11 @@ button.dragging {
 }
 #galleryCardEditorGrid button[data-state="4"] {
 	border: 1px solid grey;
-	background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-1);
+	background: url('assets/InkOverlay.webp') center/cover, var(--primary-colour-1);
 }
 #galleryCardEditorGrid button[data-state="8"] {
 	border: 1px solid grey;
-	background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-1);
+	background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-1);
 }
 
 .galleryCardEditorToolbar {
@@ -2018,7 +2018,7 @@ button.dragging {
 	position: relative;
 }
 #galleryCardEditorSpecialCost button.active {
-	background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-1);
+	background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-1);
 }
 
 #galleryCardEditorSpecialCost label {