diff options
| -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")) |