diff options
author | Thomas Voss <thomasvoss@live.com> | 2022-01-06 16:32:34 +0100 |
---|---|---|
committer | Thomas Voss <thomasvoss@live.com> | 2022-01-06 16:32:34 +0100 |
commit | 3a1de160291321943f581a6e1372a6f5b769c950 (patch) | |
tree | 7a5e64305e573463626650dc7a324142d0c4caab | |
parent | bdd093a40a73a8e3988829ff4ec1000d7be8f8ab (diff) |
Add pieces to the board
-rw-r--r-- | draughts/public/game.html | 439 | ||||
-rw-r--r-- | 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 @@ <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" href="stylesheets/game.css" /> + <link rel="stylesheet" type="text/css" href="stylesheets/game.css"> <title>Draughts</title> </head> <body> @@ -24,52 +24,152 @@ black cells have IDs since a piece cannot land on a white cell. --> <tr> - <td id="1"></td> - <td></td> - <td id="2"></td> - <td></td> - <td id="3"></td> - <td></td> - <td id="4"></td> - <td></td> - <td id="5"></td> + <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 id="6"></td> - <td></td> - <td id="7"></td> - <td></td> - <td id="8"></td> - <td></td> - <td id="9"></td> - <td></td> - <td id="10"></td> <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"></td> - <td></td> - <td id="12"></td> - <td></td> - <td id="13"></td> - <td></td> - <td id="14"></td> - <td></td> - <td id="15"></td> + <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 id="16"></td> - <td></td> - <td id="17"></td> - <td></td> - <td id="18"></td> - <td></td> - <td id="19"></td> - <td></td> - <td id="20"></td> <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> @@ -84,6 +184,7 @@ <td></td> </tr> <tr> + <td></td> <td id="26"></td> <td></td> <td id="27"></td> @@ -93,55 +194,154 @@ <td id="29"></td> <td></td> <td id="30"></td> - <td></td> </tr> <tr> - <td id="31"></td> - <td></td> - <td id="32"></td> - <td></td> - <td id="33"></td> - <td></td> - <td id="34"></td> - <td></td> - <td id="35"></td> + <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 id="36"></td> - <td></td> - <td id="37"></td> - <td></td> - <td id="38"></td> - <td></td> - <td id="39"></td> - <td></td> - <td id="40"></td> <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"></td> - <td></td> - <td id="42"></td> - <td></td> - <td id="43"></td> - <td></td> - <td id="44"></td> - <td></td> - <td id="45"></td> + <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 id="46"></td> - <td></td> - <td id="47"></td> - <td></td> - <td id="48"></td> - <td></td> - <td id="49"></td> - <td></td> - <td id="50"></td> <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> @@ -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. --> <table id="history"> - <tr> - <td class="turn-no">8</td> - <td>37-32</td> - <td>22-28</td> - </tr> - <tr> - <td class="turn-no">7</td> - <td></td> - <td></td> - </tr> - <tr> - <td class="turn-no">6</td> - <td></td> - <td></td> - </tr> - <tr> - <td class="turn-no">5</td> - <td></td> - <td></td> - </tr> - <tr> - <td class="turn-no">4</td> - <td></td> - <td></td> - </tr> - <tr> - <td class="turn-no">3</td> - <td></td> - <td></td> - </tr> - <tr> - <td class="turn-no">2</td> - <td></td> - <td></td> - </tr> - <tr> - <td class="turn-no">1</td> - <td></td> - <td></td> - </tr> + <thead> + <tr> + <td></td> + <td><div id="blue-bar"></div></td> + <td><div id="red-bar"></div></td> + </tr> + </thead> + <tbody> + <tr> + <td class="turn-no">8</td> + <td>37-32</td> + <td>22-28</td> + </tr> + <tr> + <td class="turn-no">7</td> + <td></td> + <td></td> + </tr> + <tr> + <td class="turn-no">6</td> + <td></td> + <td></td> + </tr> + <tr> + <td class="turn-no">5</td> + <td></td> + <td></td> + </tr> + <tr> + <td class="turn-no">4</td> + <td></td> + <td></td> + </tr> + <tr> + <td class="turn-no">3</td> + <td></td> + <td></td> + </tr> + <tr> + <td class="turn-no">2</td> + <td></td> + <td></td> + </tr> + <tr> + <td class="turn-no">1</td> + <td></td> + <td></td> + </tr> + </tbody> </table> <div id="resign"> @@ -201,4 +410,4 @@ </div> <div id="vertical-rule"></div> </body> -</html>
\ No newline at end of file +</html> 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; +} |