pong online: add: smartphone support
This commit is contained in:
parent
eca5f22d50
commit
96396f0fec
14
django/frontend/static/css/pongOnline.css
Normal file
14
django/frontend/static/css/pongOnline.css
Normal file
@ -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;
|
||||
}
|
@ -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)
|
||||
|
@ -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 */ `
|
||||
<link rel="stylesheet" href="/static/css/pongOnline.css">
|
||||
<h1 id='gamestate'></h1>
|
||||
`;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user