From 154d223d173969d5f5bcfcdd4b41bbdf99308037 Mon Sep 17 00:00:00 2001
From: Andrio Celos <AndrioCelos@users.noreply.github.com>
Date: Fri, 24 Feb 2023 23:28:05 +1100
Subject: [PATCH] Visual update

---
 .gitignore                                    |   2 +-
 TableturfBattleClient/assets/InkOverlay.png   | Bin 0 -> 2129 bytes
 .../assets/SpecialOverlay.png                 | Bin 0 -> 1621 bytes
 TableturfBattleClient/assets/Wall.png         | Bin 0 -> 246 bytes
 TableturfBattleClient/assets/site.webmanifest |  17 ++++++
 TableturfBattleClient/index.html              |   8 +--
 TableturfBattleClient/tableturf.css           |  49 +++++++++---------
 7 files changed, 47 insertions(+), 29 deletions(-)
 create mode 100644 TableturfBattleClient/assets/InkOverlay.png
 create mode 100644 TableturfBattleClient/assets/SpecialOverlay.png
 create mode 100644 TableturfBattleClient/assets/Wall.png
 create mode 100644 TableturfBattleClient/assets/site.webmanifest

diff --git a/.gitignore b/.gitignore
index 13dcc59..287f0bf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
-assets/
+external/
 build/
 config/
 
diff --git a/TableturfBattleClient/assets/InkOverlay.png b/TableturfBattleClient/assets/InkOverlay.png
new file mode 100644
index 0000000000000000000000000000000000000000..0bc03c39836943498c1f66ee7211df9f46d19a38
GIT binary patch
literal 2129
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
Hu0mjfN9y^3

literal 0
HcmV?d00001

diff --git a/TableturfBattleClient/assets/SpecialOverlay.png b/TableturfBattleClient/assets/SpecialOverlay.png
new file mode 100644
index 0000000000000000000000000000000000000000..330f6f400ca53e72991f043b8a57f8d5d9c419af
GIT binary patch
literal 1621
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
T$EF=B00000NkvXXu0mjff<E!*

literal 0
HcmV?d00001

diff --git a/TableturfBattleClient/assets/Wall.png b/TableturfBattleClient/assets/Wall.png
new file mode 100644
index 0000000000000000000000000000000000000000..3423ec3fdfa0d9ff5309719cbd28a9285865f868
GIT binary patch
literal 246
zcmeAS@N?(olHy`uVBq!ia0vp^79h;R3?!pgsObVJ#^NA%Cx&(BWL^R}Ea{HEjtmSN
z`?>!lvI6;v0X`wFOP4NPv0}yY<;#~WSu%hA{MoZ-A2@Je&YU^Dy}kYY{SzlnO#Q-G
z1ysyg;1OBOz`%DHgc*<LuSfw3#(BCphFF|VP6#=~$s#eMr{JWfw!sdK$CFHo5(`QX
zEewrRZ8>PF!pmO3>ecpW5|8Xu87Mq5<w*3BUFGMFaHUOYG1w7u<_P1hScx0fg`Vd$
i5*{2<H7|a~#4xoXYzb%I`I$hQ7(8A5T-G@yGywoQfml)i

literal 0
HcmV?d00001

diff --git a/TableturfBattleClient/assets/site.webmanifest b/TableturfBattleClient/assets/site.webmanifest
new file mode 100644
index 0000000..71fe458
--- /dev/null
+++ b/TableturfBattleClient/assets/site.webmanifest
@@ -0,0 +1,17 @@
+{
+	"name": "Tableturf Battle",
+	"icons": [
+		{
+			"src": "external/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "external/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	],
+	"theme_color": "#0c92f2",
+	"background_color": "black"
+}
diff --git a/TableturfBattleClient/index.html b/TableturfBattleClient/index.html
index 252553e..b090e15 100644
--- a/TableturfBattleClient/index.html
+++ b/TableturfBattleClient/index.html
@@ -8,9 +8,9 @@
 			document.getElementsByTagName('base')[0].href = baseUrl;
 		</script>
 		<title>Tableturf Battle</title>
-		<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
-		<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
-		<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
+		<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="manifest" href="assets/site.webmanifest">
 		<link rel="stylesheet" href="tableturf.css"/>
 		<script src="config/config.js"></script>
@@ -25,7 +25,7 @@
 	<body>
 		<div id="noJSPage">This application requires JavaScript.</div>
 		<div id="preGamePage" hidden>
-			<p><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/logo.png"></p>
+			<p><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/external/logo.png"></p>
 			<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/tableturf.css b/TableturfBattleClient/tableturf.css
index 7af2d50..2cfa0db 100644
--- a/TableturfBattleClient/tableturf.css
+++ b/TableturfBattleClient/tableturf.css
@@ -1,11 +1,11 @@
 @font-face {
 	font-family: 'Splatoon 1';
-	src: url('assets/splatoon1.woff2') format('woff2');
+	src: url('assets/external/splatoon1.woff2') format('woff2');
 }
 
 @font-face {
 	font-family: 'Splatoon 2';
-	src: url('assets/splatoon2.woff2') format('woff2');
+	src: url('assets/external/splatoon2.woff2') format('woff2');
 }
 
 body, dialog {
@@ -375,23 +375,24 @@ dialog::backdrop {
 	margin: auto;
 }
 
-#gameBoard td { border: 1px solid grey; }
-#gameBoard td.OutOfBounds { border-color: transparent; }
-#gameBoard td.Wall { background: grey; }
-#gameBoard td.Ink1 { background: var(--primary-colour-1); }
-#gameBoard td.Ink2 { background: var(--primary-colour-2); }
-#gameBoard td.Ink3 { background: var(--primary-colour-3); }
-#gameBoard td.Ink4 { background: var(--primary-colour-4); }
-#gameBoard td.SpecialInactive1 { background: var(--special-colour-1); }
-#gameBoard td.SpecialInactive2 { background: var(--special-colour-2); }
-#gameBoard td.SpecialInactive3 { background: var(--special-colour-3); }
-#gameBoard td.SpecialInactive4 { background: var(--special-colour-4); }
-#gameBoard td.SpecialActive1 { background: radial-gradient(circle, var(--special-accent-colour-1) 25%, var(--special-colour-1) 75%); }
-#gameBoard td.SpecialActive2 { background: radial-gradient(circle, var(--special-accent-colour-2) 25%, var(--special-colour-2) 75%); }
-#gameBoard td.SpecialActive3 { background: radial-gradient(circle, var(--special-accent-colour-3) 25%, var(--special-colour-3) 75%); }
-#gameBoard td.SpecialActive4 { background: radial-gradient(circle, var(--special-accent-colour-4) 25%, var(--special-colour-4) 75%); }
+/* #gameBoard td { border: 1px solid rgba(0, 0, 0, 25%); } */
+#gameBoard td { border: 1px solid transparent; }
+#gameBoard td.Empty { border-color: #80808080; }
+#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/contain, 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.hover {
+#gameBoard td {
 	position: relative;
 }
 
@@ -588,7 +589,7 @@ dialog::backdrop {
 	font-size: inherit;
 }
 #showDeckCloseButton {
-  width: 40%;
+	width: 40%;
 	grid-row: button-row;
 }
 :is(#showDeckCloseButton, #testControlsFooter button):hover { background: var(--player-ui-highlight-colour); }
@@ -598,7 +599,7 @@ dialog::backdrop {
 #testControls:not([hidden]) {
 	grid-column: 1 / span 2;
 	grid-row: 1 / -1;
-  display: grid;
+	display: grid;
 	grid-template-rows: [header] auto [list] 1fr [buttons] auto;
 }
 #testControlsHeader, #testControlsFooter {
@@ -1158,9 +1159,9 @@ dialog::backdrop {
 		justify-items: stretch;
 	}
 .cardListGrid .card {
-    width: auto;
-    justify-self: stretch;
-  }
+	width: auto;
+	justify-self: stretch;
+	}
 
 	/* Lobby - Mobile layout */
 
@@ -1295,7 +1296,7 @@ dialog::backdrop {
 		background: black;
 		z-index: 2;
 		margin-top: 5em;
-  }
+	}
 
 	/* Deck editor - Mobile layout */