Finish the HTML and CSS for the main game screen

author: Thomas Voss <thomasvoss@live.com> 2022-01-09 15:29:55 +0100
committer: Thomas Voss <thomasvoss@live.com> 2022-01-09 15:29:55 +0100
commit: cf920d016e931678a269054511df71a4e429488e (patch)
tree: 83e3167d9df38c9294d69607c4c2b1d8f12dbe4c /draughts
parent: 48c4d4f82531c2ac7a808cab81d152701afbba21 (diff)
2 files changed, 182 insertions, 411 deletions
diff --git a/draughts/public/game.html b/draughts/public/game.html
index 71fbb08..9b1ac7a 100644
--- a/draughts/public/game.html
+++ b/draughts/public/game.html
@@ -1,354 +1,78 @@
-<!-- -*- tab-width: 4 -*- -->
+<!-- -*- sgml-basic-offset: 4; tab-width: 4; evil-shift-width: 4 -*- -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="stylesheet" type="text/css" href="stylesheets/game.css">
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<link rel="stylesheet" type="text/css" href="stylesheets/game.css" />
 	<title>Draughts</title>
 </head>
 <body>
-	<div class="container left">
-		<!-- <div id="score"> -->
-		<!-- 	<p>+0</p> -->
-		<!-- 	<img src=path> -->
-		<!-- 	<p>+0</p> -->
-		<!-- 	<img src=path> -->
-		<!-- </div> -->
-		<!-- The draughts board is represented using a table, the outer table allows us to have the
-			fancy spaced-out table border. -->
-		<table id="outer-board">
-			<td>
-				<table id="board">
-					<!-- Each row has squares which are either black or white, and only
-					     black cells have IDs since a piece cannot land on a white cell.
-					     -->
+	<div id="left">
+		<table id="delta-table">
+			<tbody>
+				<tr>
+					<td class="delta-text" id="delta-blue">+0</td>
+					<td><img class="delta-img" src="images/bluepiece.svg" /></td>
+				</tr>
 				<tr>
-						<td id="1">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="2">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="3">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="4">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="5">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-					</tr>
-					<tr>
-						<td></td>
-						<td id="6">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="7">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="8">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="9">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="10">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-					</tr>
-					<tr>
-						<td id="11">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="12">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="13">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="14">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="15">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-					</tr>
-					<tr>
-						<td></td>
-						<td id="16">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="17">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="18">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="19">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="20">
-							<div class="circle-outer blue-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner blue-inner-circle"></div>
-							</div>
-						</td>
-					</tr>
-					<tr>
-						<td id="21"></td>
-						<td></td>
-						<td id="22"></td>
-						<td></td>
-						<td id="23"></td>
-						<td></td>
-						<td id="24"></td>
-						<td></td>
-						<td id="25"></td>
-						<td></td>
-					</tr>
-					<tr>
-						<td></td>
-						<td id="26"></td>
-						<td></td>
-						<td id="27"></td>
-						<td></td>
-						<td id="28"></td>
-						<td></td>
-						<td id="29"></td>
-						<td></td>
-						<td id="30"></td>
-					</tr>
-					<tr>
-						<td id="31">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="32">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="33">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="34">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="35">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-					</tr>
-					<tr>
-						<td></td>
-						<td id="36">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="37">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="38">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="39">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="40">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-					</tr>
-					<tr>
-						<td id="41">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="42">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="43">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="44">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="45">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-					</tr>
-					<tr>
-						<td></td>
-						<td id="46">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="47">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="48">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="49">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-						<td></td>
-						<td id="50">
-							<div class="circle-outer red-outer-circle">
-								<div class="top-pad"></div>
-								<div class="circle-inner red-inner-circle"></div>
-							</div>
-						</td>
-					</tr>
-				</table>
-			</td>
+					<td class="delta-text" id="delta-red">+0</td>
+					<td><img class="delta-img" src="images/redpiece.svg" /></td>
+				</tr>
+			</tbody>
 		</table>
+
+		<section id="board-border">
+			<section id="board-container">
+				<img id="board" src="images/board.svg" />
+				<!-- The transform styles set the initial positions of the pieces, these will get
+					 updated during the game -->
+				<img class="piece" id="b1"  style="transform: translate(000%, 000%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b2"  style="transform: translate(200%, 000%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b3"  style="transform: translate(400%, 000%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b4"  style="transform: translate(600%, 000%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b5"  style="transform: translate(800%, 000%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b6"  style="transform: translate(100%, 100%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b7"  style="transform: translate(300%, 100%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b8"  style="transform: translate(500%, 100%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b9"  style="transform: translate(700%, 100%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b10" style="transform: translate(900%, 100%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b11" style="transform: translate(000%, 200%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b12" style="transform: translate(200%, 200%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b13" style="transform: translate(400%, 200%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b14" style="transform: translate(600%, 200%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b15" style="transform: translate(800%, 200%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b16" style="transform: translate(100%, 300%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b17" style="transform: translate(300%, 300%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b18" style="transform: translate(500%, 300%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b19" style="transform: translate(700%, 300%);" src="images/bluepiece.svg" />
+				<img class="piece" id="b20" style="transform: translate(900%, 300%);" src="images/bluepiece.svg" />
+				<img class="piece" id="r1"  style="transform: translate(000%, 600%);" src="images/redpiece.svg" />
+				<img class="piece" id="r2"  style="transform: translate(200%, 600%);" src="images/redpiece.svg" />
+				<img class="piece" id="r3"  style="transform: translate(400%, 600%);" src="images/redpiece.svg" />
+				<img class="piece" id="r4"  style="transform: translate(600%, 600%);" src="images/redpiece.svg" />
+				<img class="piece" id="r5"  style="transform: translate(800%, 600%);" src="images/redpiece.svg" />
+				<img class="piece" id="r6"  style="transform: translate(100%, 700%);" src="images/redpiece.svg" />
+				<img class="piece" id="r7"  style="transform: translate(300%, 700%);" src="images/redpiece.svg" />
+				<img class="piece" id="r8"  style="transform: translate(500%, 700%);" src="images/redpiece.svg" />
+				<img class="piece" id="r9"  style="transform: translate(700%, 700%);" src="images/redpiece.svg" />
+				<img class="piece" id="r10" style="transform: translate(900%, 700%);" src="images/redpiece.svg" />
+				<img class="piece" id="r11" style="transform: translate(000%, 800%);" src="images/redpiece.svg" />
+				<img class="piece" id="r12" style="transform: translate(200%, 800%);" src="images/redpiece.svg" />
+				<img class="piece" id="r13" style="transform: translate(400%, 800%);" src="images/redpiece.svg" />
+				<img class="piece" id="r14" style="transform: translate(600%, 800%);" src="images/redpiece.svg" />
+				<img class="piece" id="r15" style="transform: translate(800%, 800%);" src="images/redpiece.svg" />
+				<img class="piece" id="r16" style="transform: translate(100%, 900%);" src="images/redpiece.svg" />
+				<img class="piece" id="r17" style="transform: translate(300%, 900%);" src="images/redpiece.svg" />
+				<img class="piece" id="r18" style="transform: translate(500%, 900%);" src="images/redpiece.svg" />
+				<img class="piece" id="r19" style="transform: translate(700%, 900%);" src="images/redpiece.svg" />
+				<img class="piece" id="r20" style="transform: translate(900%, 900%);" src="images/redpiece.svg" />
+			</section>
+		</section>
 	</div>
-	<div class="container right">
+
+	<div id="right">
 		<h1 id="history-title">Move History</h1>
 		<!-- The game/move history table is made up of 8 rows where the first column of each
 		     row is the number of moves ago it was, the second column is blues move, and the
diff --git a/draughts/public/stylesheets/game.css b/draughts/public/stylesheets/game.css
index ed84c3e..fe2fbaa 100644
--- a/draughts/public/stylesheets/game.css
+++ b/draughts/public/stylesheets/game.css
@@ -1,101 +1,103 @@
+/* Ensure we always have good fonts */
+@import url("https://fonts.googleapis.com/css2?family=Saira&family=Saira+Condensed&display=swap");
+
+/* Set some colors */
 :root {
 	--light-blue: #B3E0F2;
+	--blue: #007BBD;
 	--dark-blue: #204C6D;
+	--darker-blue: #302C5D;
+	--red: #9E3C2F;
 }
 
-.container {
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
+body {
+	/* Set the default font */
+	font-family: "Saira Condensed";
 
-	/* Take up half of the screen */
-	position: absolute;
-	height: 100%;
+	/* Remove the margin on the sides of the screen */
+	margin: 0;
+}
+
+body > div {
+	/* Take up exactly half the screen */
 	width: 50%;
+	height: 100%;
+	position: absolute;
 
-	/* Center all child elements */
+	/* Center all children */
 	display: flex;
 	align-items: center;
 }
 
-.left {
+#left {
+	/* Center all elements on the left side of the screen */
 	justify-content: center;
 }
 
-.right {
+#right {
 	/* Take up the right side of the screen */
-	margin-left: 50%;
-	flex-direction: column;
-}
-
-#outer-board {
-	border: 8px black solid;
-	border-spacing: 8px;
-	height: calc(7vmin * 10);
-}
-
-#board {
- 	border-collapse: collapse; /* Make all the cells snap together */
- 	height: calc(7vmin * 10);  /* Make sure height == width */
-}
-
-#board tr {
-	display: table;
-}
-
-#board td {
-	height: 7vmin;
-	width: 7vmin;
-	display: inline-block;
-}
-
-#board tr:nth-child(even) td:nth-child(even), #board tr:nth-child(odd) td:nth-child(odd) {
-	background: black;
-}
+	right: 0;
 
-.top-pad {
-	height: 1vmin;
+	/* Stack all elements on the right of the screen */
+	flex-direction: column;
 }
 
-.circle-outer, .circle-inner {
-	border-radius: 50%;
-}
+#board-border {
+	/* Make the board border take up the same space as the board, +32px so that we can have a
+	 * visible gap between the board and its border
+	 */
+	width: calc(70% + 32px);
+	padding-top: calc(70% + 32px);
+	position: relative;
 
-.circle-outer {
-	height: 7vmin;
-	width: 7vmin;
+	border: 8px solid black;
 }
 
-.circle-inner {
-	width: 5vmin;
-	height: 5vmin;
-	margin-left: 1vmin;
-}
+#board-container {
+	/* Take up the full space of the board border besides a padding of 32px */
+	width: calc(100% - 32px);
+	padding-top: calc(100% - 32px);
 
-.blue-outer-circle {
-	background: #204C6D;
+	/* Center the board within the border */
+	top: 16px;
+	left: 16px;
+	position: absolute;
 }
 
-.red-outer-circle {
-	background: #803B2F;
+#board-container > * {
+	/* Set the initial positions of all the elements within the board container to the upper left
+	 * corner
+	 */
+	position: absolute;
+	top: 0;
+	left: 0;
 }
 
-.blue-inner-circle {
-	background: #007BBD;
+#board {
+	/* Make the board take up the full space of the container */
+	height: 100%;
+	width: 100%;
 }
 
-.red-inner-circle {
-	background: #9E3C2F;
+.piece {
+	/* The board is 10x10, so each piece should take up 10% of the container */
+	width: 10%;
+	height: 10%;
 }
 
 #vertical-rule {
-	position: absolute;
+	/* Place the vertical rule somewhere between the left and right sections of the screen
+	 * but slightly to the right
+	 */
+	width: 6px;
 	height: 80%;
-	border-left: 6px solid var(--light-blue);
-	left: calc(50% - 3px); /* -3px offset because the left border is 6px */
+	position: absolute;
+	left: calc(57%);
 
-	/* Vertically center */
+	/* Give it a color */
+	background-color: var(--light-blue);
+
+	/* Vertically center the vertical rule */
 	top: 0;
 	bottom: 0;
 	margin-top: auto;
@@ -103,35 +105,45 @@
 }
 
 #history-title {
+	font-size: 4em;
 	margin-top: 10%;
 	margin-bottom: 5%;
 }
 
 #history {
+	/* Connect the borders of the cells */
 	border-collapse: collapse;
 }
 
 #history tr td {
+	/* Align the text in the center and make everything readable */
 	text-align: center;
 	height: 40px;
 	width: 80px;
-	font-size: 1.2em;
+	font-size: 1.5em;
 }
 
 .turn-no {
+	/* Add a light-blue border between the turn number and the moves */
 	border-right: 3px solid var(--light-blue);
 }
 
 #resign {
+	/* Make the resign button nice and big */
 	margin-top: 5%;
 	background-color: var(--dark-blue);
 	text-align: center;
 	width: 30%;
 }
 
+#resign:hover {
+	/* Make the resign button darker and add an outline when you hover over it */
+	border: 3px grey solid;
+	background-color: var(--darker-blue);
+}
+
 #resign p {
-	/* TODO: Make fonts work */
-	font-family: "Saira Condensed";
+	/* Make the resign text look nice */
 	font-style: normal;
 	font-weight: normal;
 	font-size: 1.5em;
@@ -139,6 +151,7 @@
 }
 
 #blue-bar, #red-bar {
+	/* Add bars above the table to signify which player each column corresponds to */
 	height: 8px;
 	width: 80%;
 	margin-top: 10%;
@@ -146,9 +159,43 @@
 }
 
 #blue-bar {
-	background-color: #007BBD;
+	background-color: var(--blue);
 }
 
 #red-bar {
-	background-color: #9E3C2F;
+	background-color: var(--red);
+}
+
+#delta-table {
+	/* Make the table tall and wide enough, and give it some spacing from the board */
+	height: 10%;
+	width: 15%;
+	margin-right: 2%;
+
+	/* Give it a nice border */
+	border: 4px black solid;
+}
+
+#delta-table tr {
+	/* Vertically align the text with the pieces */
+	vertical-align: top;
+}
+
+#delta-table td {
+	/* Ensure the cells take up half of the table each */
+	width: 50%;
+}
+
+.delta-text {
+	/* Make the text readable */
+	text-align: center;
+	font-size: 2em;
+}
+
+.delta-img {
+	/* Make the pieces slightly transparent, and make them take up the full space of the
+	 * container
+	 */
+	opacity: 0.7;
+	height: 100%;
 }
author	Thomas Voss <thomasvoss@live.com>	2022-01-09 15:29:55 +0100
committer	Thomas Voss <thomasvoss@live.com>	2022-01-09 15:29:55 +0100
commit	cf920d016e931678a269054511df71a4e429488e (patch)
tree	83e3167d9df38c9294d69607c4c2b1d8f12dbe4c /draughts
parent	48c4d4f82531c2ac7a808cab81d152701afbba21 (diff)