Add WebSocket support and refactoring

.vscode/settings.json

@@ -49,8 +49,10 @@
     ]
   },
   "cSpell.words": [
+    "bufferutil",
     "dotp",
     "gamepadconnected",
-    "gamepaddisconnected"
+    "gamepaddisconnected",
+    "pino"
   ]
 }

app/components/game.css

@@ -57,7 +57,7 @@
   text-align: center;
   box-sizing: border-box;
   min-width: 120px;
-  min-height: 44px;
+  min-height: 54px;
 }
 
 .gameWrapper .playerControls {
@@ -80,7 +80,7 @@
   border-radius: 5px;
   text-align: center;
   min-height: 120px;
-  min-width: 44px;
+  min-width: 54px;
 }
 
 .gameWrapper .playerControls .item .shortcut {
@@ -107,7 +107,7 @@
   text-align: center;
   box-sizing: border-box;
   min-width: 120px;
-  min-height: 44px;
+  min-height: 54px;
 }
 
 .gameWrapper .gameControls .item .shortcut {

app/components/game.tsx

@@ -8,14 +8,20 @@ import { Game } from '@/lib/game'
 import { MdArrowUpward, MdArrowDownward } from 'react-icons/md'
 import { useTheme } from 'next-themes'
 import { useStopwatch } from 'react-timer-hook'
-// import toast from 'react-hot-toast'
 import '@/components/game.css'
 
 // Init vars
 const isGamepadSupported = typeof window !== 'undefined' && window.navigator.getGamepads !== undefined
 
+// Props represents the component props.
+type Props = {
+  wsAddress?: string
+}
+
 // GameComponent represents a game component.
-export default function GameComponent() {
+export default function GameComponent(props: Props) {
+  const { wsAddress } = props
+
   const { setTheme } = useTheme()
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const gameServiceRef = useRef<GameService>()
@@ -59,7 +65,7 @@ export default function GameComponent() {
 
   // onGameOver handles the game over event.
   const onGameOver = useCallback((game: Game) => {
-    console.debug('GameComponent.onTogglePause', game.getId(), game.getGameState(), game.getWinner())
+    console.debug('GameComponent.onGameOver', game.getId(), game.getGameState(), game.getWinner())
 
     if (game.getWinner() === 'dark') {
       setScore((prevScore) => ({ ...prevScore, dark: prevScore.dark + 1 }))
@@ -76,7 +82,9 @@ export default function GameComponent() {
     if (gameServiceRef.current) {
       if (document.visibilityState !== 'visible') {
         stopwatchControlsRef.current.pause()
-        gameServiceRef.current.pause()
+        if (gameServiceRef.current.getGameState() === 'running') {
+          gameServiceRef.current.pause()
+        }
       }
     }
   }, [])
@@ -92,14 +100,15 @@ export default function GameComponent() {
       gameServiceRef.current = new GameService({
         canvasElement: canvasRef.current,
         gamepadEnabled: isGamepadSupported,
+        wsAddress: wsAddress,
         onNewGame: onNewGame,
         onTogglePause: onTogglePause,
         onGameOver: onGameOver,
       })
-      gameServiceRef.current.handleMouseEvent('controlW', 'w', 'dark')
-      gameServiceRef.current.handleMouseEvent('controlS', 's', 'dark')
-      gameServiceRef.current.handleMouseEvent('controlO', 'o', 'light')
-      gameServiceRef.current.handleMouseEvent('controlL', 'l', 'light')
+      gameServiceRef.current.handleMouseEventByElementId('controlDarkUp', 'dark', 'up')
+      gameServiceRef.current.handleMouseEventByElementId('controlDarkDown', 'dark', 'down')
+      gameServiceRef.current.handleMouseEventByElementId('controlLightUp', 'light', 'up')
+      gameServiceRef.current.handleMouseEventByElementId('controlLightDown', 'light', 'down')
 
       // Splash screen
       if (showSplash) {
@@ -114,7 +123,7 @@ export default function GameComponent() {
       gameServiceRef.current?.destroy()
       document.removeEventListener('visibilitychange', onVisibilityChange)
     }
-  }, [showSplash, onNewGame, onTogglePause, onGameOver, onVisibilityChange, setTheme])
+  }, [wsAddress, showSplash, onNewGame, onTogglePause, onGameOver, onVisibilityChange, setTheme])
 
   return (
     <div className="gameWrapper">
@@ -126,8 +135,8 @@ export default function GameComponent() {
       </div>
       <div className="row">
         <div className="playerControls">
-          <div id="controlW" className="item hover:cursor-pointer bg-light dark:bg-dark"><MdArrowUpward /><span className="shortcut">W</span></div>
-          <div id="controlS" className="item hover:cursor-pointer bg-light dark:bg-dark"><span className="shortcut">S</span><MdArrowDownward /></div>
+          <div id="controlDarkUp" className="item hover:cursor-pointer bg-light dark:bg-dark"><MdArrowUpward /><span className="shortcut">W</span></div>
+          <div id="controlDarkDown" className="item hover:cursor-pointer bg-light dark:bg-dark"><span className="shortcut">S</span><MdArrowDownward /></div>
         </div>
         <div className="canvasContainer">
           <canvas
@@ -145,8 +154,8 @@ export default function GameComponent() {
           />
         </div>
         <div className="playerControls">
-          <div id="controlO" className="item hover:cursor-pointer bg-light dark:bg-dark"><MdArrowUpward /><span className="shortcut">O</span></div>
-          <div id="controlL" className="item hover:cursor-pointer bg-light dark:bg-dark"><span className="shortcut">L</span><MdArrowDownward /></div>
+          <div id="controlLightUp" className="item hover:cursor-pointer bg-light dark:bg-dark"><MdArrowUpward /><span className="shortcut">O</span></div>
+          <div id="controlLightDown" className="item hover:cursor-pointer bg-light dark:bg-dark"><span className="shortcut">L</span><MdArrowDownward /></div>
         </div>
       </div>
       <div className="row">

app/lib/ball.ts

@@ -1,11 +1,11 @@
 // For the full copyright and license information, please view the LICENSE.txt file.
 
-import { Game, PlayerSide } from '@/lib/game'
+import { Game, Side, PlayerSide } from '@/lib/game'
 
 // BallOptions represents the options to create a new ball.
 export interface BallOptions {
   game: Game
-  side: PlayerSide
+  playerSide: PlayerSide
   x: number
   y: number
   speedX: number
@@ -21,7 +21,8 @@ export class Ball {
 
   private options: BallOptions
   private game: Game
-  private side: PlayerSide
+  private side: Side
+  private playerSide: PlayerSide
   private x: number
   private y: number
   private speedX: number
@@ -31,11 +32,15 @@ export class Ball {
 
   // constructor creates a new instance.
   constructor(options: BallOptions) {
-    const { game, side, x, y, speedX, speedY, radius, color } = options
+    const { game, playerSide, x, y, speedX, speedY, radius, color } = options
 
     this.options = options
     this.game = game
-    this.side = side
+    this.playerSide = playerSide
+    // Light ball collides with the light grid cells and dark ball collides with the dark grid cells.
+    // Hence we launch light ball at the dark side and dark ball at the light side,
+    // so that balls can collide with the opposite side grid cells.
+    this.side = playerSide === 'dark' ? 'light' : 'dark'
     this.x = x
     this.y = y
     this.speedX = speedX
@@ -79,9 +84,14 @@ export class Ball {
     return this.speedY
   }
 
+  // getSide returns the side of the ball.
+  public getSide(): Side {
+    return this.side
+  }
+
   // getPlayerSide returns the player side of the paddle.
   public getPlayerSide(): PlayerSide {
-    return this.side
+    return this.playerSide
   }
 
   // setX sets the x position of the ball.

app/lib/collision.ts

@@ -1,25 +1,34 @@
 // For the full copyright and license information, please view the LICENSE.txt file.
 
-import { Game } from '@/lib/game'
+import { Game, PlayerSide } from '@/lib/game'
 import { Ball } from '@/lib/ball'
 import { Paddle } from '@/lib/paddle'
 
 // CollisionManagerOptions represents the options to create a new collision manager.
 export interface CollisionManagerOptions {
   game: Game
+  onBallToBoundaryCollision?: (collision: BallToBoundaryCollision) => void
+  onBallToPaddleCollision?: (collision: BallToPaddleCollision) => void
+  onBallToGridCollision?: (collision: BallToGridCollision) => void
 }
 
 // CollisionManager manages collisions between game components.
 export class CollisionManager {
   private options: CollisionManagerOptions
   private game: Game
+  private onBallToBoundaryCollision?: (collision: BallToBoundaryCollision) => void
+  private onBallToPaddleCollision?: (collision: BallToPaddleCollision) => void
+  private onBallToGridCollision?: (collision: BallToGridCollision) => void
 
   // constructor creates a new instance.
   constructor(options: CollisionManagerOptions) {
     const { game } = options
 
     this.options = options
     this.game = game
+    this.onBallToBoundaryCollision = options.onBallToBoundaryCollision
+    this.onBallToPaddleCollision = options.onBallToPaddleCollision
+    this.onBallToGridCollision = options.onBallToGridCollision
   }
 
   // reset resets the collision manager.
@@ -38,11 +47,10 @@ export class CollisionManager {
       // Check for collision between the ball and boundaries
       const b2b = this.checkBallToBoundaryCollision(ball, ballFutureX, ballFutureY)
       if (b2b.collided) {
+        if (this.onBallToBoundaryCollision) this.onBallToBoundaryCollision(b2b)
+
         if (b2b.oppositeSide) {
-          // Note that we launch light ball at the dark side and dark ball at the light side,
-          // so that balls can collide with the opposite side boundary.
-          // Hence we reverse the player side here.
-          this.game.gameOver(ball.getPlayerSide() === 'dark' ? 'light' : 'dark')
+          this.game.gameOver(ball.getPlayerSide())
           return
         }
         if (b2b.speedX) ball.setSpeedX(b2b.speedX)
@@ -55,6 +63,8 @@ export class CollisionManager {
       for (let j = 0, m = paddles.length; j < m; j++) {
         const b2p = this.checkBallToPaddleCollision(ball, paddles[j], ballFutureX, ballFutureY)
         if (b2p.collided) {
+          if (this.onBallToPaddleCollision) this.onBallToPaddleCollision(b2p)
+
           if (b2p.speedX) ball.setSpeedX(b2p.speedX)
           if (b2p.speedY) ball.setSpeedY(b2p.speedY)
           if (b2p.futureX) ball.setX(b2p.futureX)
@@ -80,14 +90,16 @@ export class CollisionManager {
       // Check for collisions between the balls and the grid
       const b2g = this.checkBallToGridCollision(ball, ballFutureX, ballFutureY)
       if (b2g.collided) {
+        if (this.onBallToGridCollision) this.onBallToGridCollision(b2g)
+
         if (b2g.speedX) ball.setSpeedX(b2g.speedX)
         if (b2g.speedY) ball.setSpeedY(b2g.speedY)
         if (b2g.futureX) ball.setX(b2g.futureX)
         if (b2g.futureY) ball.setY(b2g.futureY)
         if (b2g.cells) {
           for (let k = 0, n = b2g.cells.length; k < n; k++) {
             const cell = b2g.cells[k]
-            this.game.getGrid().setCell(cell[0], cell[1], ball.getPlayerSide() === 'dark' ? 'light' : 'dark')
+            this.game.getGrid().setCell(cell[0], cell[1], ball.getPlayerSide())
           }
         }
       }
@@ -109,18 +121,24 @@ export class CollisionManager {
       collision.speedX = -ball.getSpeedX()
       collision.futureX = radius // for avoiding sticking
 
-      // Check if the ball is on the opposite side of the boundary
-      if (ball.getPlayerSide() === 'dark') {
+      // ballX - radius <= 0 means the ball is on the left side of the boundary (dark side)
+      if (ball.getPlayerSide() === 'light') {
         collision.oppositeSide = true
+      } else {
+        collision.ownSide = true
       }
     } else if (ballX + radius >= canvasWidth) {
       collision.collided = true
       collision.speedX = -ball.getSpeedX()
       collision.futureX = canvasWidth - radius // for avoiding sticking
 
-      // Check if the ball is on the opposite side of the boundary
-      if (ball.getPlayerSide() === 'light') {
+      // ballX + radius >= canvasWidth means the ball is on the right side of the boundary (light side)
+      // If the ball side is light (own by the dark side) then
+      // it's on the opposite side of the boundary, since we launch light ball at the dark side.
+      if (ball.getPlayerSide() === 'dark') {
         collision.oppositeSide = true
+      } else {
+        collision.ownSide = true
       }
     }
 
@@ -135,6 +153,10 @@ export class CollisionManager {
       collision.futureY = canvasHeight - radius // for avoiding sticking
     }
 
+    if (collision.collided) {
+      collision.playerSide = ball.getPlayerSide()
+    }
+
     return collision
   }
 
@@ -174,6 +196,10 @@ export class CollisionManager {
       return collision
     }
 
+    // Set the collision properties
+    collision.playerSide = ball.getPlayerSide()
+    collision.paddlePlayerSide = paddle.getPlayerSide()
+
     // Calculate the angle of the collision
     let collidePoint = ball.getY() - (paddle.getY() + paddle.getHeight() / 2)
     collidePoint = collidePoint / (paddle.getHeight() / 2)
@@ -235,11 +261,12 @@ export class CollisionManager {
 
     // Check if the ball is within the grid bounds
     if (gridY >= 0 && gridY < this.game.getGrid().getRowLength() && gridX >= 0 && gridX < this.game.getGrid().getColLength()) {
-      const cellPlayerSide = this.game.getGrid().getCell(gridX, gridY)
+      const cellSide = this.game.getGrid().getCell(gridX, gridY)
 
-      // Check for collision with a cell of the same player side
-      if (cellPlayerSide === ball.getPlayerSide()) {
+      // If the ball side is the same as the cell side then it's a collision
+      if (cellSide === ball.getSide()) {
         collision.collided = true
+        collision.playerSide = ball.getPlayerSide()
         collision.speedX = -ball.getSpeedX()
         collision.speedY = -ball.getSpeedY()
         collision.futureX = ballX - ball.getSpeedX() * this.game.getSinceLastFrame()
@@ -255,22 +282,26 @@ export class CollisionManager {
 }
 
 // BallToBoundaryCollision represents a collision between a ball and a boundary.
-type BallToBoundaryCollision = {
+export type BallToBoundaryCollision = {
   collided: boolean
   speedX?: number
   speedY?: number
   futureX?: number
   futureY?: number
+  playerSide?: PlayerSide
   oppositeSide?: boolean
+  ownSide?: boolean
 }
 
 // BallToPaddleCollision represents a collision between a ball and a paddle.
-type BallToPaddleCollision = {
+export type BallToPaddleCollision = {
   collided: boolean
   speedX?: number
   speedY?: number
   futureX?: number
   futureY?: number
+  playerSide?: PlayerSide
+  paddlePlayerSide?: PlayerSide
 }
 
 // BallToBallCollision represents a collision between two balls.
@@ -283,11 +314,12 @@ type BallToBallCollision = {
 }
 
 // BallToGridCollision represents a collision between a ball and a grid cell.
-type BallToGridCollision = {
+export type BallToGridCollision = {
   collided: boolean
   speedX?: number
   speedY?: number
   futureX?: number
   futureY?: number
   cells?: number[][]
+  playerSide?: PlayerSide
 }