From 3a1de160291321943f581a6e1372a6f5b769c950 Mon Sep 17 00:00:00 2001 From: Thomas Voss Date: Thu, 6 Jan 2022 16:32:34 +0100 Subject: Add pieces to the board --- draughts/public/game.html | 439 ++++++++++++++++++++++++++--------- draughts/public/stylesheets/game.css | 54 ++++- 2 files changed, 376 insertions(+), 117 deletions(-) diff --git a/draughts/public/game.html b/draughts/public/game.html index 2605c5f..65c1858 100644 --- a/draughts/public/game.html +++ b/draughts/public/game.html @@ -4,7 +4,7 @@ - + Draughts @@ -24,52 +24,152 @@ black cells have IDs since a piece cannot land on a white cell. --> - - - - - - - - - + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ - - - - - - - - - + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ - - - - - - - - - + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ - - - - - - - - - + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ @@ -84,6 +184,7 @@ + @@ -93,55 +194,154 @@ - - - - - - - - - - + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ - - - - - - - - - + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ - - - - - - - - - + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ - - - - - - - - - + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ @@ -153,46 +353,55 @@ row is the number of moves ago it was, the second column is blues move, and the third is reds move. --> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
837-3222-28
7
6
5
4
3
2
1
837-3222-28
7
6
5
4
3
2
1
@@ -201,4 +410,4 @@
- \ No newline at end of file + diff --git a/draughts/public/stylesheets/game.css b/draughts/public/stylesheets/game.css index 23d756f..3a01d34 100644 --- a/draughts/public/stylesheets/game.css +++ b/draughts/public/stylesheets/game.css @@ -49,6 +49,41 @@ background: black; } +.top-pad { + height: 10px; +} + +.circle-outer, .circle-inner { + border-radius: 50%; +} + +.circle-outer { + height: 70px; + width: 70px; +} + +.circle-inner { + width: 50px; + height: 50px; + margin-left: 10px; +} + +.blue-outer-circle { + background: #204C6D; +} + +.red-outer-circle { + background: #803B2F; +} + +.blue-inner-circle { + background: #007BBD; +} + +.red-inner-circle { + background: #9E3C2F; +} + #vertical-rule { position: absolute; height: 80%; @@ -86,7 +121,7 @@ margin-top: 5%; background-color: var(--dark-blue); text-align: center; - width: 400px; + width: 30%; } #resign p { @@ -96,4 +131,19 @@ font-weight: normal; font-size: 1.5em; color: white; -} \ No newline at end of file +} + +#blue-bar, #red-bar { + height: 8px; + width: 80%; + margin-top: 10%; + margin-left: 10%; +} + +#blue-bar { + background-color: #007BBD; +} + +#red-bar { + background-color: #9E3C2F; +} -- cgit v1.2.3