diff options
| author | Thomas Voss <thomasvoss@live.com> | 2022-01-01 19:03:10 +0100 |
|---|---|---|
| committer | Thomas Voss <thomasvoss@live.com> | 2022-01-01 19:03:10 +0100 |
| commit | 53acd91cf3bc4c5a8873e5eeb0afb4eb998934c7 (patch) | |
| tree | ea2dd08cdc85abf87481208edb877af6528eeb38 | |
| parent | 66f6f9a2c66309b5629702bd1e0563a698c19484 (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.
| -rw-r--r-- | Assignment 1/game.html | 188 | ||||
| -rw-r--r-- | Assignment 1/splash.html | 15 | ||||
| -rw-r--r-- | img/mill.png (renamed from Resources/Mill Icon.png) | bin | 1977786 -> 1977786 bytes | |||
| -rw-r--r-- | img/oude-kerk.png (renamed from Resources/Oude Kerk Icon.png) | bin | 1976185 -> 1976185 bytes | |||
| -rw-r--r-- | img/players.png (renamed from Resources/Players Icon.png) | bin | 1972840 -> 1972840 bytes | |||
| -rw-r--r-- | img/raadshuis.png (renamed from Resources/Raadshuis Icon.png) | bin | 1977931 -> 1977931 bytes | |||
| -rw-r--r-- | src/game.html | 198 | ||||
| -rw-r--r-- | src/splash.html | 15 | ||||
| -rw-r--r-- | src/style.css | 99 |
9 files changed, 312 insertions, 203 deletions
diff --git a/Assignment 1/game.html b/Assignment 1/game.html deleted file mode 100644 index dbbf4ac..0000000 --- a/Assignment 1/game.html +++ /dev/null @@ -1,188 +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> - <!-- 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 Binary files differindex 3fa90b0..3fa90b0 100644 --- a/Resources/Mill Icon.png +++ b/img/mill.png diff --git a/Resources/Oude Kerk Icon.png b/img/oude-kerk.png Binary files differindex 692b5f5..692b5f5 100644 --- a/Resources/Oude Kerk Icon.png +++ b/img/oude-kerk.png diff --git a/Resources/Players Icon.png b/img/players.png Binary files differindex ed67933..ed67933 100644 --- a/Resources/Players Icon.png +++ b/img/players.png diff --git a/Resources/Raadshuis Icon.png b/img/raadshuis.png Binary files differindex ed34991..ed34991 100644 --- a/Resources/Raadshuis Icon.png +++ b/img/raadshuis.png 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; +} |
