From 38fc94f4e47980ef274f921e45513be749b0f28a Mon Sep 17 00:00:00 2001
From: Andrio Celos <AndrioCelos@users.noreply.github.com>
Date: Sat, 12 Aug 2023 18:09:13 +1000
Subject: [PATCH] Replace the loading spinner with the Splatoon one

The asset isn't included in this repository for copyright reasons, but will be available on the live site
---
 TableturfBattleClient/index.html    |  8 ++---
 TableturfBattleClient/tableturf.css | 48 ++++-------------------------
 2 files changed, 10 insertions(+), 46 deletions(-)

diff --git a/TableturfBattleClient/index.html b/TableturfBattleClient/index.html
index e91fa22..9ccd2cb 100644
--- a/TableturfBattleClient/index.html
+++ b/TableturfBattleClient/index.html
@@ -55,7 +55,7 @@
 					<a id="preGameHelpButton" href="help">Help</a>
 				</p>
 				<div id="preGameLoadingSection" class="loadingContainer" hidden>
-					<div class="lds-ripple"><div></div><div></div></div> <span id="preGameLoadingLabel"></span>
+					<div class="loadingSpinner"><div></div><div></div></div> <span id="preGameLoadingLabel"></span>
 				</div>
 			</form>
 			<footer>
@@ -79,13 +79,13 @@
 					<div class="submitButtonContainer">
 						<button type="submit" id="submitStageButton">Submit</button>
 						<div class="loadingContainer">
-							<div class="lds-ripple"><div></div><div></div></div>
+							<div class="loadingSpinner"><div></div><div></div></div>
 						</div>
 					</div>
 					<div id="stageList">
 						<button type="button" id="stageRandomButton" class="stageRandom">Random</button>
 					</div>
-					<div id="stageListLoadingSection"><div class="lds-ripple"><div></div><div></div></div> Loading stages...</div>
+					<div id="stageListLoadingSection"><div class="loadingSpinner"><div></div><div></div></div> Loading stages...</div>
 				</form>
 			</section>
 			<div id="lobbyDeckSection" hidden>
@@ -94,7 +94,7 @@
 					<div class="submitButtonContainer">
 						<button type="submit" id="submitDeckButton" disabled>Submit</button>
 						<div class="loadingContainer">
-							<div class="lds-ripple"><div></div><div></div></div>
+							<div class="loadingSpinner"><div></div><div></div></div>
 						</div>
 					</div>
 					<div id="lobbyDeckList" class="deckList"></div>
diff --git a/TableturfBattleClient/tableturf.css b/TableturfBattleClient/tableturf.css
index 93fbdcd..db055e8 100644
--- a/TableturfBattleClient/tableturf.css
+++ b/TableturfBattleClient/tableturf.css
@@ -1691,7 +1691,7 @@ dialog::backdrop {
 	}
 }
 
-/* Loading spinner - based on loading.io */
+/* Loading spinner */
 
 .loadingContainer:not([hidden]) {
 	display: flex;
@@ -1699,50 +1699,14 @@ dialog::backdrop {
 	align-items: center;
 	gap: 0.5em;
 }
-.lds-ripple {
-	--border-width: 0.15em;
+.loadingSpinner {
+	background: url(assets/external/IconUp_00.webp) center/cover;
 	position: relative;
 	width: 1.5em;
 	height: 1.5em;
 	display: inline-block;
+	animation: 2s infinite linear loadingSpinner;
 }
-.lds-ripple div {
-	position: absolute;
-	border: var(--border-width) solid #fff;
-	opacity: 1;
-	border-radius: 50%;
-	animation: 1s cubic-bezier(0, 0.2, 0.8, 1) infinite lds-ripple;
-}
-.lds-ripple div:nth-child(2) {
-	animation-delay: -0.5s;
-}
-@keyframes lds-ripple {
-	0% {
-		top: calc(50% - var(--border-width));
-		left: calc(50% - var(--border-width));
-		right: calc(50% - var(--border-width));
-		bottom: calc(50% - var(--border-width));
-		opacity: 0;
-	}
-	4.9% {
-		top: calc(50% - var(--border-width));
-		left: calc(50% - var(--border-width));
-		right: calc(50% - var(--border-width));
-		bottom: calc(50% - var(--border-width));
-		opacity: 0;
-	}
-	5% {
-		top: calc(50% - var(--border-width));
-		left: calc(50% - var(--border-width));
-		right: calc(50% - var(--border-width));
-		bottom: calc(50% - var(--border-width));
-		opacity: 1;
-	}
-	100% {
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		opacity: 0;
-	}
+@keyframes loadingSpinner {
+	to { transform: rotate(360deg); }
 }