aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/game.html198
-rw-r--r--src/splash.html15
-rw-r--r--src/style.css99
3 files changed, 312 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>
diff --git a/src/splash.html b/src/splash.html
new file mode 100644
index 0000000..1f7f130
--- /dev/null
+++ b/src/splash.html
@@ -0,0 +1,15 @@
+<!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">
+ <title>Draughts</title>
+</head>
+<body>
+ <h1>Draughts</h1>
+ <img src=></img>
+ <img src=></img>
+ <img src=></img>
+</body>
+</html>
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..2c15d2f
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,99 @@
+:root {
+ --light-blue: #B3E0F2;
+ --dark-blue: #204C6D;
+}
+
+.container {
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ /* Take up half of the screen */
+ position: absolute;
+ height: 100%;
+ width: 50%;
+
+ /* Center all child elements */
+ display: flex;
+ align-items: center;
+}
+
+.left {
+ justify-content: center;
+}
+
+.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: 80%;
+}
+
+#board {
+ border-collapse: collapse; /* Make all the cells snap together */
+ height: 100%; /* Make sure height == width */
+}
+
+#board td {
+ height: 70px;
+ width: 70px;
+}
+
+#board tr:nth-child(even) td:nth-child(even), #board tr:nth-child(odd) td:nth-child(odd) {
+ background: black;
+}
+
+#vertical-rule {
+ position: absolute;
+ height: 80%;
+ border-left: 6px solid var(--light-blue);
+ left: calc(50% - 3px); /* -3px offset because the left border is 6px */
+
+ /* Vertically center */
+ top: 0;
+ bottom: 0;
+ margin-top: auto;
+ margin-bottom: auto;
+}
+
+#history-title {
+ margin-top: 10%;
+ margin-bottom: 5%;
+}
+
+#history {
+ border-collapse: collapse;
+}
+
+#history tr td {
+ text-align: center;
+ height: 40px;
+ width: 80px;
+ font-size: 1.2em;
+}
+
+.turn-no {
+ border-right: 3px solid var(--light-blue);
+}
+
+#resign {
+ margin-top: 5%;
+ background-color: var(--dark-blue);
+ text-align: center;
+ width: 400px;
+}
+
+#resign p {
+ /* TODO: Make fonts work */
+ font-family: "Saira Condensed";
+ font-style: normal;
+ font-weight: normal;
+ font-size: 1.5em;
+ color: white;
+}