aboutsummaryrefslogtreecommitdiff
path: root/src/game.html
diff options
context:
space:
mode:
authorThomas Voss <thomasvoss@live.com> 2022-01-01 19:03:10 +0100
committerThomas Voss <thomasvoss@live.com> 2022-01-01 19:03:10 +0100
commit53acd91cf3bc4c5a8873e5eeb0afb4eb998934c7 (patch)
treeea2dd08cdc85abf87481208edb877af6528eeb38 /src/game.html
parent66f6f9a2c66309b5629702bd1e0563a698c19484 (diff)
Reorganize files, and add lots of CSS
All images have been moved to img/ All source code has been moved to src/ The game.html page now has a draughts board, a vertical seperator, an imcomplete move history table, a resign button, and a move history title.
Diffstat (limited to 'src/game.html')
-rw-r--r--src/game.html198
1 files changed, 198 insertions, 0 deletions
diff --git a/src/game.html b/src/game.html
new file mode 100644
index 0000000..4f8d308
--- /dev/null
+++ b/src/game.html
@@ -0,0 +1,198 @@
+<!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="style.css">
+ <title>Draughts</title>
+</head>
+<body>
+ <div class="container left">
+ <!-- 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.
+ -->
+ <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></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>
+ </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></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>
+ </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 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>
+ <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></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>
+ </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></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>
+ </tr>
+ </table>
+ </td>
+ </table>
+ </div>
+ <div class="container 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
+ 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>
+ </table>
+
+ <div id="resign">
+ <p>Resign</p>
+ </div>
+ </div>
+ <div id="vertical-rule"></div>
+</body>
+</html>