aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--draughts/public/game.html439
-rw-r--r--draughts/public/stylesheets/game.css54
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;
+}