Added crude client rendering with pixi.js

Added keyboard controlling
Added fixed ball reflections on right paddle
added reflections on screen borders
Added goal (miss the paddle) detection

PongGame/wwwroot/js/pong.js

@@ -1,7 +1,5 @@
 "use strict";
 
-console.log("Pong script was run!");
-
 const connection = new signalR.HubConnectionBuilder()
   .withUrl("/pong/hub")
   .withAutomaticReconnect()
@@ -14,7 +12,7 @@ function getElement(id) {
 
 const connectionStatus = getElement("connection");
 const createlobby = getElement("createlobby");
-const roomid = getElement("roomid");
+const roomidinput = getElement("roomid");
 const joinroom = getElement("joinroom");
 const usernameinput = getElement("username");
 const setusername = getElement("setusername");
@@ -44,7 +42,10 @@ connection.onreconnected(function (connectionId) {
 });
 
 createlobby.addEventListener("click", function (event) {
-  connection.invoke("CreateRoom").catch(function (err) {
+  connection.invoke("CreateRoom").then(function (roomId) {
+    roomidinput.value = roomId;
+    console.info(`Joined room [${roomId}]`);
+  }).catch(function (err) {
     return console.error(err.toString());
   });
   event.preventDefault();
@@ -59,7 +60,7 @@ connection.on("UsernameChanged", function (username) {
 });
 
 joinroom.addEventListener("click", function (event) {
-  connection.invoke("JoinRoom", roomid.value).catch(function (err) {
+  connection.invoke("JoinRoom", roomidinput.value).catch(function (err) {
     return console.error(err.toString());
   });
   event.preventDefault();
@@ -89,6 +90,76 @@ function moveUp() { return movePaddle(-1); }
 function stopPaddle() { return movePaddle(0); }
 function moveDown() { return movePaddle(1); }
 
+// Create the application helper and add its render target to the page
+let app = new PIXI.Application({ width: 1000, height: 500 });
+getElement('canvas-container').appendChild(app.view);
+
+let graphics = new PIXI.Graphics();
+app.stage.addChild(graphics);
+
+function renderPaddle(graphics, state, xMid) {
+  var xLeft = xMid - 5;
+  graphics.beginFill(0x00FFFF);
+  graphics.drawRect(xLeft, state.Height - 25, 10, 50);
+  graphics.endFill();
+}
+
+function renderBall(graphics, state) {
+  graphics.beginFill(0xFF00FF);
+  graphics.drawCircle(state.Pos.X, state.Pos.Y, 4);
+  graphics.endFill();
+}
+
+function renderGameState(graphics, state) {
+  graphics.clear();
+  renderPaddle(graphics, state.Paddle1, 50);
+  renderPaddle(graphics, state.Paddle2, 1000 - 50);
+  renderBall(graphics, state.BallState);
+}
+
+connection.on("ReceiveGameState", function (state) {
+  renderGameState(graphics, state);
+});
+
+const keyEvent = (function () {
+  var upPressed = false;
+  var downPressed = false;
+
+  function moveUpdated() {
+    if (upPressed == downPressed) stopPaddle();
+    else if (upPressed) moveUp();
+    else if (downPressed) moveDown();
+    else console.error("unknown move!");
+  }
+
+  function handler(event) {
+    if (event.repeat) return;
+    if (event.path.indexOf(document.body) != 0) return; // only use key if it was pressed on empty space
+    var pressed = event.type == "keyup";
+    // W Key is 87, Up arrow is 87
+    // S Key is 83, Down arrow is 40
+    switch (event.keyCode) {
+      case 87:
+      case 38:
+        upPressed = pressed;
+        break;
+      case 83:
+      case 40:
+        downPressed = pressed;
+        break;
+      default: return;
+    }
+
+    event.preventDefault();
+    moveUpdated();
+  }
+
+  return handler;
+})();
+
+document.addEventListener('keydown', keyEvent);
+document.addEventListener('keyup', keyEvent);
+
 connection.start().then(function () {
   console.info(`Connected!`);
   connectionStatus.textContent = "Connected!";