diff --git a/django/frontend/static/css/pongOnline.css b/django/frontend/static/css/pongOnline.css new file mode 100644 index 0000000..0ac4114 --- /dev/null +++ b/django/frontend/static/css/pongOnline.css @@ -0,0 +1,14 @@ +#up:active, #down:active { + color: red; +} + +#up, #down { + min-height: 60px; + min-width: 60px; + + font-size: 40px; +} + +#up, #down { + position: relative; +} \ No newline at end of file diff --git a/django/frontend/static/js/api/game/pong/PongGame.js b/django/frontend/static/js/api/game/pong/PongGame.js index c4f3e91..749783f 100644 --- a/django/frontend/static/js/api/game/pong/PongGame.js +++ b/django/frontend/static/js/api/game/pong/PongGame.js @@ -171,10 +171,8 @@ export class PongGame extends AGame async _receiveEliminated(data) { - console.log('bozo') let eliminated = this.players.find(player => player.id === data.eliminated_id) eliminated.isEliminated = true; - console.log(eliminated) } async _receiveFinish(data) diff --git a/django/frontend/static/js/views/PongOnlineView.js b/django/frontend/static/js/views/PongOnlineView.js index 6290826..25fdd8e 100644 --- a/django/frontend/static/js/views/PongOnlineView.js +++ b/django/frontend/static/js/views/PongOnlineView.js @@ -126,6 +126,7 @@ export default class PongOnlineView extends AbstractAuthenticatedView { this.gamestate.innerHTML = this.game.getState(); this.destroyGameboard(); + this.destroyButtons() this.displayWinner(winner) } @@ -174,6 +175,66 @@ export default class PongOnlineView extends AbstractAuthenticatedView this.gameboard = this.canva.getContext('2d'); } + createButtons() + { + this.upButton = document.createElement("button"); + this.downButton = document.createElement("button"); + + this.upButton.id = "up"; + this.downButton.id = "down"; + + this.downButton.onmousedown = () => { + ['s', 'a'].forEach(key => { + this.keyPressHandler({key: key}); + }); + }; + this.downButton.onmouseup = () => { + ['s', 'a'].forEach(key => { + this.keyReleaseHandler({key: key}); + }); + }; + this.downButton.ontouchstart = () => { + ['s', 'a'].forEach(key => { + this.keyPressHandler({key: key}); + }); + }; + this.downButton.ontouchend = () => { + ['s', 'a'].forEach(key => { + this.keyReleaseHandler({key: key}); + }); + }; + + this.upButton.onmousedown = () => { + ['w', 'd'].forEach(key => { + this.keyPressHandler({key: key}); + }); + }; + this.upButton.onmouseup = () => { + ['w', 'd'].forEach(key => { + this.keyReleaseHandler({key: key}); + }); + }; + this.upButton.ontouchstart = () => { + ['w', 'd'].forEach(key => { + this.keyPressHandler({key: key}); + }); + }; + this.upButton.ontouchend = () => { + ['w', 'd'].forEach(key => { + this.keyReleaseHandler({key: key}); + }); + }; + + this.app.appendChild(this.downButton); + this.app.appendChild(this.upButton); + } + + destroyButtons() + { + this.app.removeChild(this.upButton); + this.app.removeChild(this.downButton); + } + destroyGameboard() { this.app.removeChild(this.canva); @@ -219,6 +280,7 @@ export default class PongOnlineView extends AbstractAuthenticatedView await this.connect(); this.createScoreboard(); this.createGameboard(); + this.createButtons(); this.createMyPlayer(); this.render(); } @@ -249,6 +311,7 @@ export default class PongOnlineView extends AbstractAuthenticatedView async getHtml() { return /* HTML */ ` +
`; }