pong online: add: smartphone support

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;
+}

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)

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 */ `
+			<link rel="stylesheet" href="/static/css/pongOnline.css">
 			<h1 id='gamestate'></h1>
 		`;
 	}