aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--Assignment 1/game.html194
-rw-r--r--Assignment 1/splash.html15
-rw-r--r--img/mill.png (renamed from Resources/Mill Icon.png)bin1977786 -> 1977786 bytes
-rw-r--r--img/oude-kerk.png (renamed from Resources/Oude Kerk Icon.png)bin1976185 -> 1976185 bytes
-rw-r--r--img/players.png (renamed from Resources/Players Icon.png)bin1972840 -> 1972840 bytes
-rw-r--r--img/raadshuis.png (renamed from Resources/Raadshuis Icon.png)bin1977931 -> 1977931 bytes
-rw-r--r--src/game.html198
-rw-r--r--src/splash.html15
-rw-r--r--src/style.css99
9 files changed, 312 insertions, 209 deletions
diff --git a/Assignment 1/game.html b/Assignment 1/game.html
deleted file mode 100644
index 20cc46a..0000000
--- a/Assignment 1/game.html
+++ /dev/null
@@ -1,194 +0,0 @@
-<!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>
-
- <section id="score">
- <p id="redScore">+</p>
- <p id="blueScore">+</p>
-
- </section>
- <!-- The draughts board is represented using a table -->
- <table id="board">
- <tbody>
- <!-- 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" class="black"></td>
- <td class="white"></td>
- <td id="2" class="black"></td>
- <td class="white"></td>
- <td id="3" class="black"></td>
- <td class="white"></td>
- <td id="4" class="black"></td>
- <td class="white"></td>
- <td id="5" class="black"></td>
- <td class="white"></td>
- </tr>
- <tr>
- <td id="6" class="black"></td>
- <td class="white"></td>
- <td id="7" class="black"></td>
- <td class="white"></td>
- <td id="8" class="black"></td>
- <td class="white"></td>
- <td id="9" class="black"></td>
- <td class="white"></td>
- <td id="10" class="black"></td>
- <td class="white"></td>
- </tr>
- <tr>
- <td id="11" class="black"></td>
- <td class="white"></td>
- <td id="12" class="black"></td>
- <td class="white"></td>
- <td id="13" class="black"></td>
- <td class="white"></td>
- <td id="14" class="black"></td>
- <td class="white"></td>
- <td id="15" class="black"></td>
- <td class="white"></td>
- </tr>
- <tr>
- <td id="16" class="black"></td>
- <td class="white"></td>
- <td id="17" class="black"></td>
- <td class="white"></td>
- <td id="18" class="black"></td>
- <td class="white"></td>
- <td id="19" class="black"></td>
- <td class="white"></td>
- <td id="20" class="black"></td>
- <td class="white"></td>
- </tr>
- <tr>
- <td id="21" class="black"></td>
- <td class="white"></td>
- <td id="22" class="black"></td>
- <td class="white"></td>
- <td id="23" class="black"></td>
- <td class="white"></td>
- <td id="24" class="black"></td>
- <td class="white"></td>
- <td id="25" class="black"></td>
- <td class="white"></td>
- </tr>
- <tr>
- <td id="26" class="black"></td>
- <td class="white"></td>
- <td id="27" class="black"></td>
- <td class="white"></td>
- <td id="28" class="black"></td>
- <td class="white"></td>
- <td id="29" class="black"></td>
- <td class="white"></td>
- <td id="30" class="black"></td>
- <td class="white"></td>
- </tr>
- <tr>
- <td id="31" class="black"></td>
- <td class="white"></td>
- <td id="32" class="black"></td>
- <td class="white"></td>
- <td id="33" class="black"></td>
- <td class="white"></td>
- <td id="34" class="black"></td>
- <td class="white"></td>
- <td id="35" class="black"></td>
- <td class="white"></td>
- </tr>
- <tr>
- <td id="36" class="black"></td>
- <td class="white"></td>
- <td id="37" class="black"></td>
- <td class="white"></td>
- <td id="38" class="black"></td>
- <td class="white"></td>
- <td id="39" class="black"></td>
- <td class="white"></td>
- <td id="40" class="black"></td>
- <td class="white"></td>
- </tr>
- <tr>
- <td id="41" class="black"></td>
- <td class="white"></td>
- <td id="42" class="black"></td>
- <td class="white"></td>
- <td id="43" class="black"></td>
- <td class="white"></td>
- <td id="44" class="black"></td>
- <td class="white"></td>
- <td id="45" class="black"></td>
- <td class="white"></td>
- </tr>
- <tr>
- <td id="46" class="black"></td>
- <td class="white"></td>
- <td id="47" class="black"></td>
- <td class="white"></td>
- <td id="48" class="black"></td>
- <td class="white"></td>
- <td id="49" class="black"></td>
- <td class="white"></td>
- <td id="50" class="black"></td>
- <td class="white"></td>
- </tr>
- </tbody>
- </table>
- <h1>Game 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>
- <tr>
- <td class="turn-no">8</td>
- <td></td>
- <td></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 class="resign">
- <p>Resign</p>
- </div>
-</body>
-</html>
diff --git a/Assignment 1/splash.html b/Assignment 1/splash.html
deleted file mode 100644
index 1e53733..0000000
--- a/Assignment 1/splash.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!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>Document</title>
-</head>
-<body>
- <main>
-
- </main>
-
-</body>
-</html> \ No newline at end of file
diff --git a/Resources/Mill Icon.png b/img/mill.png
index 3fa90b0..3fa90b0 100644
--- a/Resources/Mill Icon.png
+++ b/img/mill.png
Binary files differ
diff --git a/Resources/Oude Kerk Icon.png b/img/oude-kerk.png
index 692b5f5..692b5f5 100644
--- a/Resources/Oude Kerk Icon.png
+++ b/img/oude-kerk.png
Binary files differ
diff --git a/Resources/Players Icon.png b/img/players.png
index ed67933..ed67933 100644
--- a/Resources/Players Icon.png
+++ b/img/players.png
Binary files differ
diff --git a/Resources/Raadshuis Icon.png b/img/raadshuis.png
index ed34991..ed34991 100644
--- a/Resources/Raadshuis Icon.png
+++ b/img/raadshuis.png
Binary files differ
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;
+}