diff options
| author | Thomas Voss <thomasvoss@live.com> | 2022-01-09 23:43:40 +0100 |
|---|---|---|
| committer | Thomas Voss <thomasvoss@live.com> | 2022-01-09 23:43:40 +0100 |
| commit | 1053479c039e120fc892384084a76ff0ed11e1a9 (patch) | |
| tree | e7c4dac6e2425b9c0f4c83a3d6a48c2772aee99c | |
| parent | 505cdb2fcc7bdcc722dcae7a05616d8d1d83ecc7 (diff) | |
Add a game script
At the moment this script does not do much, it simply registers an
event listener to inform the server about when one of the clients
resigns the game which activates when someone clicks the "resign"
button. In the future this script will most likely house all the
client-side functionality related to the game.
| -rw-r--r-- | draughts/public/game.html | 81 | ||||
| -rw-r--r-- | draughts/public/javascripts/game.js | 4 |
2 files changed, 45 insertions, 40 deletions
diff --git a/draughts/public/game.html b/draughts/public/game.html index 9b1ac7a..726007a 100644 --- a/draughts/public/game.html +++ b/draughts/public/game.html @@ -6,6 +6,7 @@ <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" /> + <script src="javascripts/game.js" defer></script> <title>Draughts</title> </head> <body> @@ -28,46 +29,46 @@ <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" /> + <img class="piece" id="b0" style="transform: translate(100%, 000%);" src="images/bluepiece.svg" /> + <img class="piece" id="b1" style="transform: translate(300%, 000%);" src="images/bluepiece.svg" /> + <img class="piece" id="b2" style="transform: translate(500%, 000%);" src="images/bluepiece.svg" /> + <img class="piece" id="b3" style="transform: translate(700%, 000%);" src="images/bluepiece.svg" /> + <img class="piece" id="b4" style="transform: translate(900%, 000%);" src="images/bluepiece.svg" /> + <img class="piece" id="b5" style="transform: translate(000%, 100%);" src="images/bluepiece.svg" /> + <img class="piece" id="b6" style="transform: translate(200%, 100%);" src="images/bluepiece.svg" /> + <img class="piece" id="b7" style="transform: translate(400%, 100%);" src="images/bluepiece.svg" /> + <img class="piece" id="b8" style="transform: translate(600%, 100%);" src="images/bluepiece.svg" /> + <img class="piece" id="b9" style="transform: translate(800%, 100%);" src="images/bluepiece.svg" /> + <img class="piece" id="b10" style="transform: translate(100%, 200%);" src="images/bluepiece.svg" /> + <img class="piece" id="b11" style="transform: translate(300%, 200%);" src="images/bluepiece.svg" /> + <img class="piece" id="b12" style="transform: translate(500%, 200%);" src="images/bluepiece.svg" /> + <img class="piece" id="b13" style="transform: translate(700%, 200%);" src="images/bluepiece.svg" /> + <img class="piece" id="b14" style="transform: translate(900%, 200%);" src="images/bluepiece.svg" /> + <img class="piece" id="b15" style="transform: translate(000%, 300%);" src="images/bluepiece.svg" /> + <img class="piece" id="b16" style="transform: translate(200%, 300%);" src="images/bluepiece.svg" /> + <img class="piece" id="b17" style="transform: translate(400%, 300%);" src="images/bluepiece.svg" /> + <img class="piece" id="b18" style="transform: translate(600%, 300%);" src="images/bluepiece.svg" /> + <img class="piece" id="b19" style="transform: translate(800%, 300%);" src="images/bluepiece.svg" /> + <img class="piece" id="r0" style="transform: translate(100%, 600%);" src="images/redpiece.svg" /> + <img class="piece" id="r1" style="transform: translate(300%, 600%);" src="images/redpiece.svg" /> + <img class="piece" id="r2" style="transform: translate(500%, 600%);" src="images/redpiece.svg" /> + <img class="piece" id="r3" style="transform: translate(700%, 600%);" src="images/redpiece.svg" /> + <img class="piece" id="r4" style="transform: translate(900%, 600%);" src="images/redpiece.svg" /> + <img class="piece" id="r5" style="transform: translate(000%, 700%);" src="images/redpiece.svg" /> + <img class="piece" id="r6" style="transform: translate(200%, 700%);" src="images/redpiece.svg" /> + <img class="piece" id="r7" style="transform: translate(400%, 700%);" src="images/redpiece.svg" /> + <img class="piece" id="r8" style="transform: translate(600%, 700%);" src="images/redpiece.svg" /> + <img class="piece" id="r9" style="transform: translate(800%, 700%);" src="images/redpiece.svg" /> + <img class="piece" id="r10" style="transform: translate(100%, 800%);" src="images/redpiece.svg" /> + <img class="piece" id="r11" style="transform: translate(300%, 800%);" src="images/redpiece.svg" /> + <img class="piece" id="r12" style="transform: translate(500%, 800%);" src="images/redpiece.svg" /> + <img class="piece" id="r13" style="transform: translate(700%, 800%);" src="images/redpiece.svg" /> + <img class="piece" id="r14" style="transform: translate(900%, 800%);" src="images/redpiece.svg" /> + <img class="piece" id="r15" style="transform: translate(000%, 900%);" src="images/redpiece.svg" /> + <img class="piece" id="r16" style="transform: translate(200%, 900%);" src="images/redpiece.svg" /> + <img class="piece" id="r17" style="transform: translate(400%, 900%);" src="images/redpiece.svg" /> + <img class="piece" id="r18" style="transform: translate(600%, 900%);" src="images/redpiece.svg" /> + <img class="piece" id="r19" style="transform: translate(800%, 900%);" src="images/redpiece.svg" /> </section> </section> </div> diff --git a/draughts/public/javascripts/game.js b/draughts/public/javascripts/game.js new file mode 100644 index 0000000..ede6459 --- /dev/null +++ b/draughts/public/javascripts/game.js @@ -0,0 +1,4 @@ +//const ws = new WebSocket("ws://localhost:3000") +//ws.addEventListener("open", () => console.log("We are connected!")) + +document.getElementById("resign").addEventListener("click", () => ws.send("RESIGN")) |