diff options
| -rw-r--r-- | draughts/public/game.html | 408 | ||||
| -rw-r--r-- | draughts/public/stylesheets/game.css | 185 |
2 files changed, 182 insertions, 411 deletions
diff --git a/draughts/public/game.html b/draughts/public/game.html index 71fbb08..9b1ac7a 100644 --- a/draughts/public/game.html +++ b/draughts/public/game.html @@ -1,354 +1,78 @@ -<!-- -*- tab-width: 4 -*- --> +<!-- -*- sgml-basic-offset: 4; tab-width: 4; evil-shift-width: 4 -*- --> <!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="stylesheets/game.css"> + <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="stylesheets/game.css" /> <title>Draughts</title> </head> <body> - <div class="container left"> - <!-- <div id="score"> --> - <!-- <p>+0</p> --> - <!-- <img src=path> --> - <!-- <p>+0</p> --> - <!-- <img src=path> --> - <!-- </div> --> - <!-- 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. - --> + <div id="left"> + <table id="delta-table"> + <tbody> + <tr> + <td class="delta-text" id="delta-blue">+0</td> + <td><img class="delta-img" src="images/bluepiece.svg" /></td> + </tr> <tr> - <td id="1"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - <td id="2"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - <td id="3"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - <td id="4"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - <td id="5"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - </tr> - <tr> - <td></td> - <td id="6"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - <td id="7"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - <td id="8"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - <td id="9"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - <td id="10"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - </tr> - <tr> - <td id="11"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - <td id="12"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - <td id="13"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - <td id="14"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - <td id="15"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - </tr> - <tr> - <td></td> - <td id="16"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - <td id="17"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - <td id="18"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - <td id="19"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </td> - <td></td> - <td id="20"> - <div class="circle-outer blue-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner blue-inner-circle"></div> - </div> - </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></td> - <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> - </tr> - <tr> - <td id="31"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - <td id="32"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - <td id="33"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - <td id="34"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - <td id="35"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - </tr> - <tr> - <td></td> - <td id="36"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - <td id="37"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - <td id="38"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - <td id="39"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - <td id="40"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - </tr> - <tr> - <td id="41"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - <td id="42"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - <td id="43"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - <td id="44"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - <td id="45"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - </tr> - <tr> - <td></td> - <td id="46"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - <td id="47"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - <td id="48"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - <td id="49"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - <td></td> - <td id="50"> - <div class="circle-outer red-outer-circle"> - <div class="top-pad"></div> - <div class="circle-inner red-inner-circle"></div> - </div> - </td> - </tr> - </table> - </td> + <td class="delta-text" id="delta-red">+0</td> + <td><img class="delta-img" src="images/redpiece.svg" /></td> + </tr> + </tbody> </table> + + <section id="board-border"> + <section id="board-container"> + <img id="board" src="images/board.svg" /> + <!-- The transform styles set the initial positions of the pieces, these will get + updated during the game --> + <img class="piece" id="b1" style="transform: translate(000%, 000%);" src="images/bluepiece.svg" /> + <img class="piece" id="b2" style="transform: translate(200%, 000%);" src="images/bluepiece.svg" /> + <img class="piece" id="b3" style="transform: translate(400%, 000%);" src="images/bluepiece.svg" /> + <img class="piece" id="b4" style="transform: translate(600%, 000%);" src="images/bluepiece.svg" /> + <img class="piece" id="b5" style="transform: translate(800%, 000%);" src="images/bluepiece.svg" /> + <img class="piece" id="b6" style="transform: translate(100%, 100%);" src="images/bluepiece.svg" /> + <img class="piece" id="b7" style="transform: translate(300%, 100%);" src="images/bluepiece.svg" /> + <img class="piece" id="b8" style="transform: translate(500%, 100%);" src="images/bluepiece.svg" /> + <img class="piece" id="b9" style="transform: translate(700%, 100%);" src="images/bluepiece.svg" /> + <img class="piece" id="b10" style="transform: translate(900%, 100%);" src="images/bluepiece.svg" /> + <img class="piece" id="b11" style="transform: translate(000%, 200%);" src="images/bluepiece.svg" /> + <img class="piece" id="b12" style="transform: translate(200%, 200%);" src="images/bluepiece.svg" /> + <img class="piece" id="b13" style="transform: translate(400%, 200%);" src="images/bluepiece.svg" /> + <img class="piece" id="b14" style="transform: translate(600%, 200%);" src="images/bluepiece.svg" /> + <img class="piece" id="b15" style="transform: translate(800%, 200%);" src="images/bluepiece.svg" /> + <img class="piece" id="b16" style="transform: translate(100%, 300%);" src="images/bluepiece.svg" /> + <img class="piece" id="b17" style="transform: translate(300%, 300%);" src="images/bluepiece.svg" /> + <img class="piece" id="b18" style="transform: translate(500%, 300%);" src="images/bluepiece.svg" /> + <img class="piece" id="b19" style="transform: translate(700%, 300%);" src="images/bluepiece.svg" /> + <img class="piece" id="b20" style="transform: translate(900%, 300%);" src="images/bluepiece.svg" /> + <img class="piece" id="r1" style="transform: translate(000%, 600%);" src="images/redpiece.svg" /> + <img class="piece" id="r2" style="transform: translate(200%, 600%);" src="images/redpiece.svg" /> + <img class="piece" id="r3" style="transform: translate(400%, 600%);" src="images/redpiece.svg" /> + <img class="piece" id="r4" style="transform: translate(600%, 600%);" src="images/redpiece.svg" /> + <img class="piece" id="r5" style="transform: translate(800%, 600%);" src="images/redpiece.svg" /> + <img class="piece" id="r6" style="transform: translate(100%, 700%);" src="images/redpiece.svg" /> + <img class="piece" id="r7" style="transform: translate(300%, 700%);" src="images/redpiece.svg" /> + <img class="piece" id="r8" style="transform: translate(500%, 700%);" src="images/redpiece.svg" /> + <img class="piece" id="r9" style="transform: translate(700%, 700%);" src="images/redpiece.svg" /> + <img class="piece" id="r10" style="transform: translate(900%, 700%);" src="images/redpiece.svg" /> + <img class="piece" id="r11" style="transform: translate(000%, 800%);" src="images/redpiece.svg" /> + <img class="piece" id="r12" style="transform: translate(200%, 800%);" src="images/redpiece.svg" /> + <img class="piece" id="r13" style="transform: translate(400%, 800%);" src="images/redpiece.svg" /> + <img class="piece" id="r14" style="transform: translate(600%, 800%);" src="images/redpiece.svg" /> + <img class="piece" id="r15" style="transform: translate(800%, 800%);" src="images/redpiece.svg" /> + <img class="piece" id="r16" style="transform: translate(100%, 900%);" src="images/redpiece.svg" /> + <img class="piece" id="r17" style="transform: translate(300%, 900%);" src="images/redpiece.svg" /> + <img class="piece" id="r18" style="transform: translate(500%, 900%);" src="images/redpiece.svg" /> + <img class="piece" id="r19" style="transform: translate(700%, 900%);" src="images/redpiece.svg" /> + <img class="piece" id="r20" style="transform: translate(900%, 900%);" src="images/redpiece.svg" /> + </section> + </section> </div> - <div class="container right"> + + <div id="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 diff --git a/draughts/public/stylesheets/game.css b/draughts/public/stylesheets/game.css index ed84c3e..fe2fbaa 100644 --- a/draughts/public/stylesheets/game.css +++ b/draughts/public/stylesheets/game.css @@ -1,101 +1,103 @@ +/* Ensure we always have good fonts */ +@import url("https://fonts.googleapis.com/css2?family=Saira&family=Saira+Condensed&display=swap"); + +/* Set some colors */ :root { --light-blue: #B3E0F2; + --blue: #007BBD; --dark-blue: #204C6D; + --darker-blue: #302C5D; + --red: #9E3C2F; } -.container { - top: 0; - bottom: 0; - left: 0; - right: 0; +body { + /* Set the default font */ + font-family: "Saira Condensed"; - /* Take up half of the screen */ - position: absolute; - height: 100%; + /* Remove the margin on the sides of the screen */ + margin: 0; +} + +body > div { + /* Take up exactly half the screen */ width: 50%; + height: 100%; + position: absolute; - /* Center all child elements */ + /* Center all children */ display: flex; align-items: center; } -.left { +#left { + /* Center all elements on the left side of the screen */ justify-content: center; } -.right { +#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: calc(7vmin * 10); -} - -#board { - border-collapse: collapse; /* Make all the cells snap together */ - height: calc(7vmin * 10); /* Make sure height == width */ -} - -#board tr { - display: table; -} - -#board td { - height: 7vmin; - width: 7vmin; - display: inline-block; -} - -#board tr:nth-child(even) td:nth-child(even), #board tr:nth-child(odd) td:nth-child(odd) { - background: black; -} + right: 0; -.top-pad { - height: 1vmin; + /* Stack all elements on the right of the screen */ + flex-direction: column; } -.circle-outer, .circle-inner { - border-radius: 50%; -} +#board-border { + /* Make the board border take up the same space as the board, +32px so that we can have a + * visible gap between the board and its border + */ + width: calc(70% + 32px); + padding-top: calc(70% + 32px); + position: relative; -.circle-outer { - height: 7vmin; - width: 7vmin; + border: 8px solid black; } -.circle-inner { - width: 5vmin; - height: 5vmin; - margin-left: 1vmin; -} +#board-container { + /* Take up the full space of the board border besides a padding of 32px */ + width: calc(100% - 32px); + padding-top: calc(100% - 32px); -.blue-outer-circle { - background: #204C6D; + /* Center the board within the border */ + top: 16px; + left: 16px; + position: absolute; } -.red-outer-circle { - background: #803B2F; +#board-container > * { + /* Set the initial positions of all the elements within the board container to the upper left + * corner + */ + position: absolute; + top: 0; + left: 0; } -.blue-inner-circle { - background: #007BBD; +#board { + /* Make the board take up the full space of the container */ + height: 100%; + width: 100%; } -.red-inner-circle { - background: #9E3C2F; +.piece { + /* The board is 10x10, so each piece should take up 10% of the container */ + width: 10%; + height: 10%; } #vertical-rule { - position: absolute; + /* Place the vertical rule somewhere between the left and right sections of the screen + * but slightly to the right + */ + width: 6px; height: 80%; - border-left: 6px solid var(--light-blue); - left: calc(50% - 3px); /* -3px offset because the left border is 6px */ + position: absolute; + left: calc(57%); - /* Vertically center */ + /* Give it a color */ + background-color: var(--light-blue); + + /* Vertically center the vertical rule */ top: 0; bottom: 0; margin-top: auto; @@ -103,35 +105,45 @@ } #history-title { + font-size: 4em; margin-top: 10%; margin-bottom: 5%; } #history { + /* Connect the borders of the cells */ border-collapse: collapse; } #history tr td { + /* Align the text in the center and make everything readable */ text-align: center; height: 40px; width: 80px; - font-size: 1.2em; + font-size: 1.5em; } .turn-no { + /* Add a light-blue border between the turn number and the moves */ border-right: 3px solid var(--light-blue); } #resign { + /* Make the resign button nice and big */ margin-top: 5%; background-color: var(--dark-blue); text-align: center; width: 30%; } +#resign:hover { + /* Make the resign button darker and add an outline when you hover over it */ + border: 3px grey solid; + background-color: var(--darker-blue); +} + #resign p { - /* TODO: Make fonts work */ - font-family: "Saira Condensed"; + /* Make the resign text look nice */ font-style: normal; font-weight: normal; font-size: 1.5em; @@ -139,6 +151,7 @@ } #blue-bar, #red-bar { + /* Add bars above the table to signify which player each column corresponds to */ height: 8px; width: 80%; margin-top: 10%; @@ -146,9 +159,43 @@ } #blue-bar { - background-color: #007BBD; + background-color: var(--blue); } #red-bar { - background-color: #9E3C2F; + background-color: var(--red); +} + +#delta-table { + /* Make the table tall and wide enough, and give it some spacing from the board */ + height: 10%; + width: 15%; + margin-right: 2%; + + /* Give it a nice border */ + border: 4px black solid; +} + +#delta-table tr { + /* Vertically align the text with the pieces */ + vertical-align: top; +} + +#delta-table td { + /* Ensure the cells take up half of the table each */ + width: 50%; +} + +.delta-text { + /* Make the text readable */ + text-align: center; + font-size: 2em; +} + +.delta-img { + /* Make the pieces slightly transparent, and make them take up the full space of the + * container + */ + opacity: 0.7; + height: 100%; } |