From 53acd91cf3bc4c5a8873e5eeb0afb4eb998934c7 Mon Sep 17 00:00:00 2001 From: Thomas Voss Date: Sat, 1 Jan 2022 19:03:10 +0100 Subject: 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. --- src/game.html | 198 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/splash.html | 15 +++++ src/style.css | 99 ++++++++++++++++++++++++++++ 3 files changed, 312 insertions(+) create mode 100644 src/game.html create mode 100644 src/splash.html create mode 100644 src/style.css (limited to 'src') 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 @@ + + + + + + + + Draughts + + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+

Move History

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
837-3222-28
7
6
5
4
3
2
1
+ +
+

Resign

+
+
+
+ + 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 @@ + + + + + + + Draughts + + +

Draughts

+ + + + + 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; +} -- cgit v1.2.3