Maintaining the ball state in the component

As we discussed earlier, the server-side component will maintain the position and direction of the ball. Let's start by bringing in some variables related to the ball that we previously saw in the clients.

Recall that we have these variables to work with:

let ballX, ballY
const ballRadius = 3
let ballHeading; // degrees
let ballSpeed;  // pixels per millisecond

In the version of the code from the last chapter, we maintained two variables, ballDeltaX and ballDeltaY, to indicate the direction of the ball. In this version, we are going to do something slightly different. We will maintain the ball's heading, in radians (with 0 meaning straight to the right and increasing counter-clockwise; a full circle contains 2*PI radians), and the ball's speed. This means that we will need a little basic trigonometry to figure out the ball's updated location when the game loop is run. One reason we did not do this in the client version is that we would...