Sync to HuggingFace Spaces

.github/workflows/on-push-to-main.yml

@@ -0,0 +1,17 @@
+name: On Push To Main
+on:
+  push:
+    branches: ["main"]
+jobs:
+  sync-to-hf:
+    name: Sync to HuggingFace Spaces
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: JacobLinCool/huggingface-sync@v1
+        with:
+          github: ${{ secrets.GITHUB_TOKEN }}
+          user: ${{ vars.HF_SPACE_OWNER }}
+          space: ${{ vars.HF_SPACE_NAME }}
+          token: ${{ secrets.HF_TOKEN }}
+          configuration: "hf-space-config.yml"

.gitignore

@@ -0,0 +1,5 @@
+/node_modules
+/js13kserver
+/*.zip
+/.vscode
+.DS_Store

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps = true

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

Dockerfile

@@ -0,0 +1,14 @@
+FROM node:20-slim
+ENV PORT ${PORT:-7860}
+EXPOSE ${PORT}
+ARG USERNAME=node
+USER ${USERNAME}
+WORKDIR /home/${USERNAME}/app 
+COPY --chown=${USERNAME}:${USERNAME} ./package.json ./package.json
+COPY --chown=${USERNAME}:${USERNAME} ./package-lock.json ./package-lock.json
+COPY --chown=${USERNAME}:${USERNAME} ./.npmrc ./.npmrc
+RUN npm ci
+COPY --chown=${USERNAME}:${USERNAME} . .
+RUN npm run build
+WORKDIR /home/${USERNAME}/app/js13kserver
+CMD [ "index.js" ]

README.md

@@ -0,0 +1,59 @@
+---
+title: YoYo Haku Pool
+emoji: 🪀🎱
+colorFrom: green
+colorTo: indigo
+short_description: You in control of a yoyo on a multiplayer pool table!
+pinned: false
+sdk: docker
+---
+
+# YoYo Haku Pool - A game for JS13K 2022
+
+YoYo Haku Pool puts you in control of a yoyo on a multiplayer pool table!
+
+![Game Screenshot](./screenshot.png)
+
+The goal is to keep the highest score as long as possible.
+
+Click or touch the table to pull your yoyo.
+
+Each ball has a value, and you should use yoyo maneuvers to bring them into the corner pockets.
+
+If you push another yoyo into a corner pocket, you get part of their score, implying that you also lose part of your score if you end up in a corner pocket.
+
+When the table is clean, balls are brought back to the table. Tip: Focus on pocketing the balls with high value first.
+
+There are several tables in the room, and you can communicate with players from other tables through the chat area.
+
+You can also run the following commands there:
+
+> Command: /nick <nickname>  
+> Effect: Changes your nickname.
+
+> Command: /newtable  
+> Effect: Starts a new game on an empty table.
+
+> Command: /jointable <number>  
+> Effect: Joins the game from a specific table.
+
+> Command: /soundon  
+> Effect: Enables sounds.
+
+> Command: /soundoff  
+> Effect: Disables sounds.
+
+_The game follows the rules of [JS13K Server Category](https://github.com/js13kGames/js13kserver), which requires us to [host the server on Heroku](https://github.com/js13kGames/js13kserver#deploy-to-heroku)._
+
+## Credits
+
+- Pool Table from the [8 Ball Pool SMS Asset Pack by chasersgaming](https://chasersgaming.itch.io/asset-pack-8-ball-pool-sms)
+- Several NPM Packages, which are listed on [package.json](./package.json)
+
+## Tools used during development
+
+- [Gitpod - Ready-to-code developer environments in the cloud](https://gitpod.io)
+- [Piskel - Free online editor for animated sprites & pixel art](https://www.piskelapp.com)
+- [Squoosh - Reduce file size from a image while maintain high quality](https://squoosh.app)
+- [vConsole - Front-end developer tool for mobile web pages](https://github.com/Tencent/vConsole)
+- [CSS Grid Layout generator](https://vue-grid-generator.netlify.app)

hf-space-config.yml

@@ -0,0 +1,7 @@
+title: YoYo Haku Pool
+emoji: 🪀🎱
+colorFrom: green
+colorTo: indigo
+short_description: You in control of a yoyo on a multiplayer pool table!
+pinned: false
+sdk: docker

license.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Victor Nogueira
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package-scripts/downloadGameServer.ts

@@ -0,0 +1,22 @@
+import { existsSync } from "node:fs";
+import { resolve } from "node:path";
+import { execSync } from "node:child_process";
+import download from "download";
+
+const serverFolder = resolve(__dirname, "..", "js13kserver");
+
+if (existsSync(serverFolder)) process.exit();
+
+(async () => {
+  await download(
+    "https://github.com/js13kGames/js13kserver/archive/63a3f1631aaad819d50b5f1b0478f26be3d4700a.zip",
+    serverFolder,
+    {
+      extract: true,
+      strip: 1,
+    }
+  );
+  console.log("Finished downloading the game server.");
+  execSync("npm ci", { cwd: serverFolder });
+  console.log("Finished installing game server dependencies.");
+})();

package-scripts/zip.ts

@@ -0,0 +1,58 @@
+import { resolve } from "node:path";
+import { createWriteStream, statSync } from "node:fs";
+import { EOL } from "node:os";
+import archiver from "archiver";
+import tasuku from "tasuku";
+import { greenBright, redBright } from "colorette";
+// @ts-ignore
+import crossExecFile from "cross-exec-file";
+// @ts-ignore
+import efficientCompressionTool from "ect-bin";
+// @ts-ignore
+import zipstats from "zipstats";
+
+const publicFolderPath = resolve(__dirname, "..", "js13kserver", "public");
+const zipFilePath = resolve(__dirname, "..", "game.zip");
+const archive = archiver("zip", { zlib: { level: 9 } });
+
+tasuku.group((task) => [
+  task("Creating zip file", async () => {
+    return new Promise((resolve, reject) => {
+      const output = createWriteStream(zipFilePath);
+      output.on("close", resolve);
+      output.on("error", reject);
+      archive.pipe(output);
+      archive.directory(publicFolderPath, "");
+      archive.finalize();
+    });
+  }),
+  task("Optimizing zip file", async ({ setOutput, setError }) => {
+    const result: { stdout: string; stderr: string } = await crossExecFile(efficientCompressionTool, [
+      "-9",
+      "-zip",
+      zipFilePath,
+    ]);
+
+    if (result.stderr.length) {
+      setError(result.stderr);
+    } else {
+      setOutput(result.stdout);
+    }
+  }),
+  task("Checking zip file", async ({ setOutput }) => {
+    setOutput(zipstats(zipFilePath));
+  }),
+  task("Checking size limit", async ({ setOutput, setError }) => {
+    const maxSizeAllowed = 13 * 1024;
+    const fileSize = statSync(zipFilePath).size;
+    const fileSizeDifference = Math.abs(maxSizeAllowed - fileSize);
+    const isUnderSizeLimit = fileSize <= maxSizeAllowed;
+    const message = `${fileSizeDifference} bytes ${isUnderSizeLimit ? "under" : "over"} the 13KB limit!${EOL}`;
+
+    if (isUnderSizeLimit) {
+      setOutput(greenBright(message));
+    } else {
+      setError(redBright(message));
+    }
+  }),
+]);

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "js13k-2022",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "start": "npm run build && cd js13kserver && node index.js",
+    "dev": "npm run build && npm-run-all --parallel --race rollup-watch nodemon",
+    "build": "npm-run-all --sequential download-game-server clear-public-folder rollup-build minify-html roadroller zip",
+    "nodemon": "cd js13kserver && npx nodemon",
+    "rollup-build": "rollup -c",
+    "rollup-watch": "rollup -c -w",
+    "download-game-server": "ts-node package-scripts/downloadGameServer",
+    "zip": "ts-node package-scripts/zip.ts",
+    "clear-public-folder": "del js13kserver/public",
+    "minify-html": "html-minifier --collapse-whitespace --remove-comments --remove-optional-tags --remove-redundant-attributes --remove-script-type-attributes --use-short-doctype --minify-css true --minify-js true public/index.html > js13kserver/public/index.html",
+    "roadroller": "cd js13kserver/public/ && roadroller client.js -o client.js && roadroller server.js -o server.js"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.3.4",
+    "@types/archiver": "^5.3.1",
+    "@types/download": "^8.0.1",
+    "@types/mainloop.js": "^1.0.5",
+    "archiver": "^5.3.1",
+    "colorette": "^2.0.19",
+    "create-pubsub": "^1.4.0",
+    "cross-exec-file": "^2.0.0",
+    "del-cli": "^5.0.0",
+    "download": "^8.0.0",
+    "ect-bin": "^1.4.1",
+    "html-minifier": "^4.0.0",
+    "kontra": "^8.0.0",
+    "mainloop.js": "^1.0.4",
+    "npm-run-all": "^4.1.5",
+    "pocket-physics": "^10.1.1",
+    "roadroller": "^2.1.0",
+    "rollup": "^2.78.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-watch": "^1.0.1",
+    "socket.io": "^4.5.1",
+    "socket.io-client": "^4.5.1",
+    "tasuku": "^2.0.0",
+    "ts-node": "^10.9.1",
+    "tslib": "^2.4.0",
+    "typescript": "^4.7.4",
+    "zipstats": "^1.1.0",
+    "zzfx": "^1.1.8"
+  }
+}

public/index.html

@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎱</text></svg>"
+    />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <meta name="monetization" content="$ilp.uphold.com/JKriL7R2DZfa" />
+    <style>
+      :root {
+        --inner-height: 100vh;
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        outline: none;
+      }
+
+      html,
+      body {
+        width: 100vw;
+        height: var(--inner-height);
+        overflow: hidden;
+        background-color: #370000;
+        touch-action: none;
+      }
+
+      img {
+        display: none;
+      }
+
+      button {
+        cursor: pointer;
+      }
+
+      #a {
+        display: grid;
+        width: 100%;
+        height: 100%;
+      }
+
+      @media (orientation: landscape) {
+        #a {
+          grid-template-areas: "a1 a2";
+          grid-template-columns: 300px 1fr;
+        }
+
+        #canvas {
+          max-width: calc(100vw - 300px);
+          max-height: var(--inner-height);
+        }
+      }
+
+      @media (orientation: portrait) {
+        #a {
+          grid-template-areas:
+            "a1"
+            "a2";
+          grid-template-rows: 200px 1fr;
+        }
+
+        #canvas {
+          max-width: 100vw;
+          max-height: calc(var(--inner-height) - 200px);
+        }
+      }
+
+      #a1 {
+        grid-area: a1;
+      }
+
+      #a2 {
+        grid-area: a2;
+      }
+
+      #b {
+        display: grid;
+        width: 100%;
+        height: 100%;
+        max-height: var(--inner-height);
+      }
+
+      @media (orientation: landscape) {
+        #b {
+          grid-template-areas:
+            "b1 b1"
+            "b2 b2"
+            "b3 b4";
+          grid-template-columns: 1fr 56px;
+          grid-template-rows: 1fr 2fr 36px;
+        }
+      }
+
+      @media (orientation: portrait) {
+        #b {
+          grid-template-areas:
+            "b2 b2 b1"
+            "b3 b4 b1";
+          grid-template-columns: 1fr 56px 1fr;
+          grid-template-rows: 1fr 36px;
+        }
+      }
+
+      #b1 {
+        grid-area: b1;
+      }
+
+      #b2 {
+        grid-area: b2;
+      }
+
+      #b1,
+      #b2 {
+        background-color: #550000;
+        padding: 5px;
+        border: 3px solid #aa0000;
+      }
+
+      #b3 {
+        grid-area: b3;
+        background-color: #550000;
+        padding: 0 5px;
+        border: 3px solid #aa0000;
+      }
+
+      #b4 {
+        grid-area: b4;
+        border: 3px solid #aa0000;
+      }
+
+      #b textarea,
+      #b input,
+      #b button {
+        width: 100%;
+        height: 100%;
+        border: none;
+        color: white;
+        font-family: "Courier New", Courier, monospace;
+        font-weight: bold;
+      }
+
+      #b input {
+        background-color: #550000;
+      }
+
+      #b textarea {
+        background-color: #550000;
+        resize: none;
+      }
+
+      #b textarea:disabled {
+        opacity: 1;
+      }
+
+      #b button {
+        background-color: #55aa00;
+        text-align: center;
+        display: inline-block;
+      }
+
+      #b1 textarea {
+        white-space: pre;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="a">
+      <div id="a1">
+        <div id="b">
+          <div id="b1">
+            <textarea disabled="disabled" wrap="off">CONNECTING...</textarea>
+          </div>
+          <div id="b2">
+            <textarea disabled="disabled"></textarea>
+          </div>
+          <div id="b3">
+            <input placeholder="Message" type="text" autocomplete="off" autocapitalize="off" />
+          </div>
+          <div id="b4">
+            <button>Send</button>
+          </div>
+        </div>
+      </div>
+      <div id="a2">
+        <canvas id="canvas"></canvas>
+      </div>
+    </div>
+    <img src="table.webp" />
+    <script src="socket.io/socket.io.js"></script>
+    <script src="client.js"></script>
+  </body>
+</html>

rollup.config.ts

@@ -0,0 +1,52 @@
+import { defineConfig } from "rollup";
+import { terser } from "rollup-plugin-terser";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import typescript from "@rollup/plugin-typescript";
+import commonjs from "@rollup/plugin-commonjs";
+import copy from "rollup-plugin-copy";
+import watch from "rollup-plugin-watch";
+
+export default defineConfig([
+  {
+    input: "src/server.ts",
+    output: [
+      {
+        file: "js13kserver/public/server.js",
+        format: "commonjs",
+        exports: "default",
+      },
+    ],
+    plugins: [
+      typescript(),
+      nodeResolve(),
+      commonjs(),
+      terser({
+        format: {
+          comments: false,
+        },
+      }),
+    ],
+  },
+  {
+    input: "src/client.ts",
+    output: [
+      {
+        file: "js13kserver/public/client.js",
+        format: "iife",
+        name: "client",
+      },
+    ],
+    plugins: [
+      typescript(),
+      nodeResolve(),
+      commonjs(),
+      terser({
+        format: {
+          comments: false,
+        },
+      }),
+      watch({ dir: "public" }),
+      copy({ targets: [{ src: "public/**/*", dest: "js13kserver/public" }] }),
+    ],
+  },
+]);

src/client.ts

@@ -0,0 +1,433 @@
+import type { Socket } from "socket.io-client";
+import { createPubSub } from "create-pubsub";
+import {
+  init,
+  GameLoop,
+  Vector,
+  Text,
+  Sprite,
+  initPointer,
+  onPointer,
+  getPointer,
+  degToRad,
+  radToDeg,
+  Pool,
+} from "kontra";
+import {
+  BallsPositions,
+  ballsPositionsUpdatesPerSecond,
+  Ball,
+  squareCanvasSizeInPixels,
+  ServerToClientEvents,
+  ClientToServerEvents,
+  ballRadius,
+  ClientToServerEventName,
+  ServerToClientEventName,
+  Scoreboard,
+} from "./shared";
+import { zzfx } from "zzfx";
+
+const gameName = "YoYo Haku Pool";
+
+const gameFramesPerSecond = 60;
+
+const gameStateUpdateFramesInterval = gameFramesPerSecond / ballsPositionsUpdatesPerSecond;
+
+const ballIdToBallSpriteMap = new Map<number, Sprite>();
+
+const { canvas, context } = init(document.querySelector("#canvas") as HTMLCanvasElement);
+
+const scoreboardTextArea = document.querySelector("#b1 textarea") as HTMLTextAreaElement;
+
+const chatHistory = document.querySelector("#b2 textarea") as HTMLTextAreaElement;
+
+const chatInputField = document.querySelector("#b3 input") as HTMLInputElement;
+
+const chatButton = document.querySelector("#b4 button") as HTMLButtonElement;
+
+const tableImage = document.querySelector("img[src='table.webp']") as HTMLImageElement;
+
+const socket = io({ upgrade: false, transports: ["websocket"] }) as Socket<ServerToClientEvents, ClientToServerEvents>;
+
+const [publishMainLoopUpdate, subscribeToMainLoopUpdate] = createPubSub<number>();
+
+const [publishMainLoopDraw, subscribeToMainLoopDraw] = createPubSub<number>();
+
+const [publishPageWithImagesLoaded, subscribeToPageWithImagesLoaded] = createPubSub<Event>();
+
+const [publishGamePreparationComplete, subscribeToGamePreparationCompleted] = createPubSub();
+
+const [publishPointerPressed, subscribeToPointerPressed, isPointerPressed] = createPubSub(false);
+
+const [setOwnSprite, , getOwnSprite] = createPubSub<Sprite | null>(null);
+
+const [setLastTimeEmittedPointerPressed, , getLastTimeEmittedPointerPressed] = createPubSub(Date.now());
+
+const [publishSoundEnabled, , isSoundEnabled] = createPubSub(false);
+
+const messageReceivedSound = [2.01, , 773, 0.02, 0.01, 0.01, 1, 1.14, 44, -27, , , , , 0.9, , 0.18, 0.81, 0.01];
+
+const scoreIncreasedSound = [
+  1.35,
+  ,
+  151,
+  0.1,
+  0.17,
+  0.26,
+  1,
+  0.34,
+  -4.1,
+  -5,
+  -225,
+  0.02,
+  0.14,
+  0.1,
+  ,
+  0.1,
+  0.13,
+  0.9,
+  0.22,
+  0.17,
+];
+
+const acceleratingSound = [, , 999, 0.2, 0.04, 0.15, 4, 2.66, -0.5, 22, , , , 0.1, , , , , 0.02];
+
+const scoreDecreasedSound = [, , 727, 0.02, 0.03, 0, 3, 0.09, 4.4, -62, , , , , , , 0.19, 0.65, 0.2, 0.51];
+
+const tableSprite = Sprite({
+  image: tableImage,
+});
+
+const scoreTextPool = Pool({
+  create: Text as any,
+});
+
+function setCanvasWidthAndHeight() {
+  canvas.width = canvas.height = squareCanvasSizeInPixels;
+}
+
+function prepareGame() {
+  updateDocumentTitleWithGameName();
+  printWelcomeMessage();
+  setCanvasWidthAndHeight();
+  handleWindowResized();
+  initPointer({ radius: 0 });
+  publishGamePreparationComplete();
+}
+
+function emitPointerPressedIfNeeded() {
+  if (!isPointerPressed() || Date.now() - getLastTimeEmittedPointerPressed() < 1000 / ballsPositionsUpdatesPerSecond)
+    return;
+  const { x, y } = getPointer();
+  socket.emit(ClientToServerEventName.Click, Math.trunc(x), Math.trunc(y));
+  setLastTimeEmittedPointerPressed(Date.now());
+}
+
+function updateScene() {
+  emitPointerPressedIfNeeded();
+
+  ballIdToBallSpriteMap.forEach((sprite) => {
+    const newRotationDegree = radToDeg(sprite.rotation) + (Math.abs(sprite.dx) + Math.abs(sprite.dy)) * 7;
+    sprite.rotation = degToRad(newRotationDegree > 360 ? newRotationDegree - 360 : newRotationDegree);
+    sprite.update();
+  });
+
+  scoreTextPool.update();
+}
+
+function drawLine(fromPoint: { x: number; y: number }, toPoint: { x: number; y: number }) {
+  context.beginPath();
+  context.strokeStyle = "#fff";
+  context.moveTo(fromPoint.x, fromPoint.y);
+  context.lineTo(toPoint.x, toPoint.y);
+  context.stroke();
+}
+
+function renderOtherSprites() {
+  ballIdToBallSpriteMap.forEach((sprite) => {
+    if (sprite !== getOwnSprite()) sprite.render();
+  });
+}
+
+function renderOwnSpritePossiblyWithWire() {
+  const ownSprite = getOwnSprite();
+
+  if (!ownSprite) return;
+
+  if (isPointerPressed()) drawLine(ownSprite.position, getPointer());
+
+  ownSprite.render();
+}
+
+function renderScene() {
+  tableSprite.render();
+  renderOtherSprites();
+  renderOwnSpritePossiblyWithWire();
+  scoreTextPool.render();
+}
+
+function startMainLoop() {
+  return GameLoop({ update: publishMainLoopUpdate, render: publishMainLoopDraw }).start();
+}
+
+function fitCanvasInsideItsParent(canvasElement: HTMLCanvasElement) {
+  if (!canvasElement.parentElement) return;
+  const { width, height, style, parentElement } = canvasElement;
+  const { clientWidth, clientHeight } = parentElement;
+  const widthScale = clientWidth / width;
+  const heightScale = clientHeight / height;
+  const scale = widthScale < heightScale ? widthScale : heightScale;
+  style.marginTop = `${(clientHeight - height * scale) / 2}px`;
+  style.marginLeft = `${(clientWidth - width * scale) / 2}px`;
+  style.width = `${width * scale}px`;
+  style.height = `${height * scale}px`;
+}
+
+function handleBallsPositionsReceived(balls: Ball[]) {
+  ballIdToBallSpriteMap.clear();
+
+  balls.forEach((ball) => createSpriteForBall(ball));
+}
+
+function createSpriteForBall(ball: Ball) {
+  const sprite = Sprite({
+    x: squareCanvasSizeInPixels / 2,
+    y: squareCanvasSizeInPixels / 2,
+    anchor: { x: 0.5, y: 0.5 },
+    render: () => {
+      sprite.context.fillStyle = ball.color;
+      sprite.context.beginPath();
+      sprite.context.arc(0, 0, ballRadius, 0, 2 * Math.PI);
+      sprite.context.fill();
+    },
+  });
+
+  const whiteCircle = Sprite({
+    anchor: { x: 0.5, y: 0.5 },
+    render: () => {
+      sprite.context.fillStyle = "#fff";
+      sprite.context.beginPath();
+      sprite.context.arc(0, 0, ballRadius / 1.5, 0, 2 * Math.PI);
+      sprite.context.fill();
+    },
+  });
+  sprite.addChild(whiteCircle);
+
+  const ballLabel = Text({
+    text: ball.label,
+    font: `${ballRadius}px monospace`,
+    color: "black",
+    anchor: { x: 0.5, y: 0.5 },
+    textAlign: "center",
+  });
+  sprite.addChild(ballLabel);
+
+  ballIdToBallSpriteMap.set(ball.id, sprite);
+
+  if (ball.ownerSocketId === socket.id) setOwnSprite(sprite);
+
+  return sprite;
+}
+
+function setSpriteVelocity(expectedPosition: Vector, sprite: Sprite) {
+  const difference = expectedPosition.subtract(sprite.position);
+  sprite.dx = difference.x / gameStateUpdateFramesInterval;
+  sprite.dy = difference.y / gameStateUpdateFramesInterval;
+}
+
+function stopSprite(sprite: Sprite) {
+  sprite.ddx = sprite.ddy = sprite.dx = sprite.dy = 0;
+}
+
+function handleChatMessageReceived(message: string) {
+  playSound(messageReceivedSound);
+  chatHistory.value += `${getHoursFromLocalTime()}:${getMinutesFromLocalTime()} ${message}\n`;
+  if (chatHistory !== document.activeElement) chatHistory.scrollTop = chatHistory.scrollHeight;
+}
+
+function getMinutesFromLocalTime() {
+  return new Date().getMinutes().toString().padStart(2, "0");
+}
+
+function getHoursFromLocalTime() {
+  return new Date().getHours().toString().padStart(2, "0");
+}
+
+function sendChatMessage() {
+  const messageToSend = chatInputField.value.trim();
+  chatInputField.value = "";
+  if (!messageToSend.length) {
+    return;
+  } else if (messageToSend.startsWith("/help")) {
+    return printHelpText();
+  } else if (messageToSend.startsWith("/soundon")) {
+    handleChatMessageReceived("📢 Sounds enabled.");
+    return publishSoundEnabled(true);
+  } else if (messageToSend.startsWith("/soundoff")) {
+    handleChatMessageReceived("📢 Sounds disabled.");
+    return publishSoundEnabled(false);
+  } else {
+    socket.emit(ClientToServerEventName.Message, messageToSend);
+  }
+}
+
+function handleKeyPressedOnChatInputField(event: KeyboardEvent) {
+  if (event.key === "Enter") sendChatMessage();
+}
+
+function updateInnerHeightProperty() {
+  document.documentElement.style.setProperty("--inner-height", `${window.innerHeight}px`);
+}
+
+function handleWindowResized() {
+  updateInnerHeightProperty();
+  fitCanvasInsideItsParent(canvas);
+}
+
+function playSound(sound: (number | undefined)[]) {
+  if (isSoundEnabled()) zzfx(...sound);
+}
+
+function enableSounds() {
+  publishSoundEnabled(true);
+  playSound(messageReceivedSound);
+}
+
+function handlePointerDown() {
+  if (!getOwnSprite()) return;
+  playSound(acceleratingSound);
+  publishPointerPressed(true);
+}
+
+function handlePointerUp() {
+  publishPointerPressed(false);
+}
+
+function handleObjectDeleted(id: number) {
+  const spriteToDelete = ballIdToBallSpriteMap.get(id);
+
+  if (!spriteToDelete) return;
+
+  if (spriteToDelete === getOwnSprite()) setOwnSprite(null);
+
+  ballIdToBallSpriteMap.delete(id);
+}
+
+function handlePositionsUpdated(positions: BallsPositions): void {
+  positions.forEach(([objectId, x, y]) => {
+    const sprite = ballIdToBallSpriteMap.get(objectId);
+    if (sprite) {
+      const expectedPosition = Vector(x, y);
+      expectedPosition.distance(sprite.position) != 0
+        ? setSpriteVelocity(expectedPosition, sprite)
+        : stopSprite(sprite);
+    }
+  });
+}
+
+function handleScoreboardUpdated(overallScoreboard: Scoreboard, tableScoreboard: Scoreboard): void {
+  let zeroPaddingLengthForScore = 0;
+
+  if (overallScoreboard[0]) {
+    const [, score] = overallScoreboard[0];
+    zeroPaddingLengthForScore = score.toString().length;
+  }
+
+  const maxNickLength = overallScoreboard.reduce((maxLength, [nick]) => Math.max(maxLength, nick.length), 0);
+
+  scoreboardTextArea.value = "TABLE SCOREBOARD\n\n";
+
+  function writeScore([nick, score, tableId]: [nick: string, score: number, tableId: number]) {
+    const formattedScore = String(score).padStart(zeroPaddingLengthForScore, "0");
+    const formattedNick = nick.padEnd(maxNickLength, " ");
+    scoreboardTextArea.value += `${formattedScore} | ${formattedNick} | Table ${tableId}\n`;
+  }
+
+  tableScoreboard.forEach(writeScore);
+
+  scoreboardTextArea.value += "\n\nOVERALL SCOREBOARD\n\n";
+
+  overallScoreboard.forEach(writeScore);
+}
+
+function handleScoredEvent(value: number, x: number, y: number) {
+  playSound(value < 0 ? scoreDecreasedSound : scoreIncreasedSound);
+
+  const scoreText = scoreTextPool.get({
+    text: `${value > 0 ? "+" : ""}${value}${value > 0 ? "✨" : "💀"}`,
+    font: "36px monospace",
+    color: value > 0 ? "#F9D82B" : "#3B3B3B",
+    x,
+    y,
+    anchor: { x: 0.5, y: 0.5 },
+    textAlign: "center",
+    dy: -1,
+    dx: 1,
+    update: () => {
+      scoreText.advance();
+
+      scoreText.opacity -= 0.01;
+
+      if (scoreText.opacity < 0) scoreText.ttl = 0;
+
+      if (scoreText.x > x + 2 || scoreText.x < x - 2) scoreText.dx *= -1;
+    },
+  }) as Text;
+}
+
+function handlePointerPressed(isPointerPressed: boolean) {
+  canvas.style.cursor = isPointerPressed ? "grabbing" : "grab";
+}
+
+function printWelcomeMessage() {
+  return handleChatMessageReceived(
+    `👋 Welcome to ${gameName}!\n\nℹ️ New to this game? Enter /help in the message field below to learn about it.\n`
+  );
+}
+
+function updateDocumentTitleWithGameName() {
+  document.title = gameName;
+}
+
+function printHelpText() {
+  handleChatMessageReceived(
+    `ℹ️ ${gameName} puts you in control of a yoyo on a multiplayer pool table!\n\n` +
+      `The goal is to keep the highest score as long as possible.\n\n` +
+      `Click or touch the table to pull your yoyo.\n\n` +
+      `Each ball has a value, and you should use yoyo maneuvers to bring them into the corner pockets.\n\n` +
+      `If you push another yoyo into a corner pocket, you get part of their score, implying that you also lose part of your score if you end up in a corner pocket.\n\n` +
+      `When the table is clean, balls are brought back to the table. Tip: Focus on pocketing the balls with high value first.\n\n` +
+      `There are several tables in the room, and you can communicate with players from other tables through this chat.\n\n` +
+      `You can also run the following commands here:\n\n` +
+      `Command: /nick <nickname>\n` +
+      `Effect: Changes your nickname.\n\n` +
+      `Command: /newtable\n` +
+      `Effect: Starts a new game on an empty table.\n\n` +
+      `Command: /jointable <number>\n` +
+      `Effect: Joins the game from a specific table.\n\n` +
+      `Command: /soundon\n` +
+      `Effect: Enables sounds.\n\n` +
+      `Command: /soundoff\n` +
+      `Effect: Disables sounds.\n`
+  );
+}
+
+subscribeToMainLoopUpdate(updateScene);
+subscribeToMainLoopDraw(renderScene);
+subscribeToGamePreparationCompleted(startMainLoop);
+subscribeToPageWithImagesLoaded(prepareGame);
+subscribeToPointerPressed(handlePointerPressed);
+onPointer("down", handlePointerDown);
+onPointer("up", handlePointerUp);
+window.addEventListener("load", publishPageWithImagesLoaded);
+window.addEventListener("resize", handleWindowResized);
+window.addEventListener("click", enableSounds, { once: true });
+chatButton.addEventListener("click", sendChatMessage);
+chatInputField.addEventListener("keyup", handleKeyPressedOnChatInputField);
+socket.on(ServerToClientEventName.Message, handleChatMessageReceived);
+socket.on(ServerToClientEventName.Objects, handleBallsPositionsReceived);
+socket.on(ServerToClientEventName.Positions, handlePositionsUpdated);
+socket.on(ServerToClientEventName.Creation, createSpriteForBall);
+socket.on(ServerToClientEventName.Deletion, handleObjectDeleted);
+socket.on(ServerToClientEventName.Scored, handleScoredEvent);
+socket.on(ServerToClientEventName.Scoreboard, handleScoreboardUpdated);

src/server.ts

@@ -0,0 +1,513 @@
+import type { Socket } from "socket.io";
+import type { DefaultEventsMap } from "socket.io/dist/typed-events";
+import MainLoop from "mainloop.js";
+import {
+  accelerate,
+  add,
+  collideCircleCircle,
+  collideCircleEdge,
+  inertia,
+  normalize,
+  overlapCircleCircle,
+  rewindToCollisionPoint,
+  sub,
+  v2,
+  Vector2,
+  distance,
+  scale,
+} from "pocket-physics";
+import {
+  Ball,
+  ballsPositionsUpdatesPerSecond,
+  squareCanvasSizeInPixels,
+  ballRadius,
+  ClientToServerEvents,
+  ServerToClientEvents,
+  ServerToClientEventName,
+  ClientToServerEventName,
+  BallsPositions,
+  Scoreboard,
+} from "./shared";
+
+type GameSocketData = {
+  ball: Ball;
+  nickname: string;
+  score: number;
+  table: Table;
+};
+
+type GameSocket = Socket<ClientToServerEvents, ServerToClientEvents, DefaultEventsMap, GameSocketData>;
+
+type Table = {
+  id: number;
+  sockets: Map<string, GameSocket>;
+  balls: Map<number, Ball>;
+};
+
+let lastScoreboardEmitted = "";
+
+let uniqueIdCounter = 1;
+
+let timePassedSinceLastStateUpdateEmitted = 0;
+
+let timePassedSinceLastScoreboardUpdate = 0;
+
+const nonPlayableBallsValuesRange = [1, 8] as [min: number, max: number];
+
+const maxSocketsPerTable = 4;
+
+const scoreboardUpdateMillisecondsInterval = 1000;
+
+const objectsPositionsUpdateMillisecondsInterval = 1000 / ballsPositionsUpdatesPerSecond;
+
+const massOfImmovableObjects = -1;
+
+const tables = new Map<number, Table>();
+
+const ballColors = ["#fff", "#ffff00", "#0000ff", "#ff0000", "#aa00aa", "#ffaa00", "#1f952f", "#550000", "#1a191e"];
+
+const collisionDamping = 0.9;
+
+const cornerPocketSize = 100;
+
+const tablePadding = 64;
+
+const maximumNicknameLength = 21;
+
+const tableLeftRailPoints = [
+  v2(tablePadding, cornerPocketSize),
+  v2(tablePadding, squareCanvasSizeInPixels - cornerPocketSize),
+] as [Vector2, Vector2];
+
+const tableRightRailPoints = [
+  v2(squareCanvasSizeInPixels - tablePadding, cornerPocketSize),
+  v2(squareCanvasSizeInPixels - tablePadding, squareCanvasSizeInPixels - cornerPocketSize),
+] as [Vector2, Vector2];
+
+const tableTopRailPoints = [
+  v2(cornerPocketSize, tablePadding),
+  v2(squareCanvasSizeInPixels - cornerPocketSize, tablePadding),
+] as [Vector2, Vector2];
+
+const tableBottomRailPoints = [
+  v2(cornerPocketSize, squareCanvasSizeInPixels - tablePadding),
+  v2(squareCanvasSizeInPixels - cornerPocketSize, squareCanvasSizeInPixels - tablePadding),
+] as [Vector2, Vector2];
+
+const tableRails = [tableLeftRailPoints, tableRightRailPoints, tableTopRailPoints, tableBottomRailPoints];
+
+const scoreLineDistanceFromCorner = 140;
+
+const scoreLines = [
+  [v2(0, scoreLineDistanceFromCorner), v2(scoreLineDistanceFromCorner, 0)],
+  [
+    v2(squareCanvasSizeInPixels - scoreLineDistanceFromCorner, 0),
+    v2(squareCanvasSizeInPixels, scoreLineDistanceFromCorner),
+  ],
+  [
+    v2(0, squareCanvasSizeInPixels - scoreLineDistanceFromCorner),
+    v2(scoreLineDistanceFromCorner, squareCanvasSizeInPixels),
+  ],
+  [
+    v2(squareCanvasSizeInPixels, squareCanvasSizeInPixels - scoreLineDistanceFromCorner),
+    v2(squareCanvasSizeInPixels - scoreLineDistanceFromCorner, squareCanvasSizeInPixels),
+  ],
+] as [Vector2, Vector2][];
+
+function getUniqueId() {
+  const id = uniqueIdCounter;
+  id < Number.MAX_SAFE_INTEGER ? uniqueIdCounter++ : 1;
+  return id;
+}
+
+function getRandomElementFrom(object: any[] | string) {
+  return object[Math.floor(Math.random() * object.length)];
+}
+
+function getRandomTextualSmile() {
+  return `${getRandomElementFrom(":=")}${getRandomElementFrom("POD)]")}`;
+}
+
+function addBallToTable(table: Table, properties?: Partial<Ball>) {
+  const ball = {
+    id: getUniqueId(),
+    cpos: v2(),
+    ppos: v2(),
+    acel: v2(),
+    radius: 1,
+    mass: 1,
+    value: 0,
+    label: getRandomTextualSmile(),
+    lastTouchedTimestamp: Date.now(),
+    ...properties,
+  } as Ball;
+
+  placeBallInRandomPosition(ball);
+
+  table.balls.set(ball.id, ball);
+
+  table.sockets.forEach((socket) => socket.emit(ServerToClientEventName.Creation, ball));
+
+  return ball;
+}
+
+function getRandomPositionForBallOnTable() {
+  return (
+    tablePadding + ballRadius + Math.floor(Math.random() * (squareCanvasSizeInPixels - (tablePadding + ballRadius) * 2))
+  );
+}
+
+function placeBallInRandomPosition(ball: Ball) {
+  const x = getRandomPositionForBallOnTable();
+  const y = getRandomPositionForBallOnTable();
+  ball.cpos = v2(x, y);
+  ball.ppos = v2(x, y);
+}
+
+function isColliding(firstObject: Ball, secondObject: Ball) {
+  return overlapCircleCircle(
+    firstObject.cpos.x,
+    firstObject.cpos.y,
+    firstObject.radius,
+    secondObject.cpos.x,
+    secondObject.cpos.y,
+    secondObject.radius
+  );
+}
+
+function handleCollision(firstObject: Ball, secondObject: Ball) {
+  if (firstObject.ownerSocketId || secondObject.ownerSocketId) {
+    if (firstObject.ownerSocketId) secondObject.lastTouchedBySocketId = firstObject.ownerSocketId;
+
+    if (secondObject.ownerSocketId) firstObject.lastTouchedBySocketId = secondObject.ownerSocketId;
+  } else {
+    if (firstObject.lastTouchedTimestamp > secondObject.lastTouchedTimestamp) {
+      secondObject.lastTouchedBySocketId = firstObject.lastTouchedBySocketId;
+    } else {
+      firstObject.lastTouchedBySocketId = secondObject.lastTouchedBySocketId;
+    }
+  }
+
+  firstObject.lastTouchedTimestamp = secondObject.lastTouchedTimestamp = Date.now();
+
+  collideCircleCircle(
+    firstObject,
+    firstObject.radius,
+    firstObject.mass,
+    secondObject,
+    secondObject.radius,
+    secondObject.mass,
+    true,
+    collisionDamping
+  );
+}
+
+function createBallForSocket(socket: GameSocket) {
+  if (!socket.data.table) return;
+
+  socket.data.ball = addBallToTable(socket.data.table, {
+    radius: ballRadius,
+    ownerSocketId: socket.id,
+    color: getRandomHexColor(),
+    value: 9,
+  });
+}
+
+function deleteBallFromSocket(socket: GameSocket) {
+  if (!socket.data.table || !socket.data.ball) return;
+
+  deleteBallFromTable(socket.data.ball, socket.data.table);
+
+  socket.data.ball = undefined;
+}
+
+function getNumberOfNonPlayableBallsOnTable(table: Table) {
+  return Array.from(table.balls.values()).filter((ball) => !ball.ownerSocketId).length;
+}
+
+function handleSocketConnected(socket: GameSocket) {
+  socket.data.nickname = `Player ${getUniqueId()}`;
+  socket.data.score = 0;
+
+  const table =
+    Array.from(tables.values()).find((currentTable) => currentTable.sockets.size < maxSocketsPerTable) ?? createTable();
+
+  addSocketToTable(socket, table);
+
+  setupSocketListeners(socket);
+}
+
+function handleSocketDisconnected(socket: GameSocket) {
+  if (!socket.data.table) return;
+  removeSocketFromTable(socket, socket.data.table);
+}
+
+function broadcastChatMessageToTable(message: string, table: Table) {
+  return table.sockets.forEach((socket) => socket.emit(ServerToClientEventName.Message, message));
+}
+
+function broadcastChatMessageToAllTables(message: string) {
+  return tables.forEach((table) => broadcastChatMessageToTable(message, table));
+}
+
+function accelerateBallFromSocket(x: number, y: number, socket: GameSocket) {
+  if (!socket.data.ball) return;
+  const accelerationVector = v2();
+  sub(accelerationVector, v2(x, y), socket.data.ball.cpos);
+  normalize(accelerationVector, accelerationVector);
+  const elasticityFactor = 20 * (distance(v2(x, y), socket.data.ball.cpos) / squareCanvasSizeInPixels);
+  scale(accelerationVector, accelerationVector, elasticityFactor);
+  add(socket.data.ball.acel, socket.data.ball.acel, accelerationVector);
+}
+
+function handleMessageReceivedFromSocket(message: string, socket: GameSocket) {
+  if (message.startsWith("/nick ")) {
+    const trimmedNickname = message.replace("/nick ", "").trim().substring(0, maximumNicknameLength);
+
+    if (trimmedNickname.length) {
+      broadcastChatMessageToAllTables(`📢 ${socket.data.nickname} is now known as ${trimmedNickname}!`);
+      socket.data.nickname = trimmedNickname;
+    }
+  } else if (message.startsWith("/newtable")) {
+    removeSocketFromTable(socket, socket.data.table);
+    addSocketToTable(socket, createTable());
+  } else if (message.startsWith("/jointable ")) {
+    const tableId = Number(message.replace("/jointable ", "").trim());
+
+    if (isNaN(tableId) || !tables.has(tableId)) {
+      socket.emit(ServerToClientEventName.Message, `📢 Table not found!`);
+    } else if (tables.get(tableId) === socket.data.table) {
+      socket.emit(ServerToClientEventName.Message, `📢 Already on table ${tableId}!`);
+    } else if ((tables.get(tableId) as Table).sockets.size >= maxSocketsPerTable) {
+      socket.emit(ServerToClientEventName.Message, `📢 Table is full!`);
+    } else {
+      removeSocketFromTable(socket, socket.data.table);
+      addSocketToTable(socket, tables.get(tableId) as Table);
+    }
+  } else {
+    broadcastChatMessageToAllTables(`💬 ${socket.data.nickname}: ${message}`);
+  }
+}
+
+function setupSocketListeners(socket: GameSocket) {
+  socket.on("disconnect", () => handleSocketDisconnected(socket));
+  socket.on(ClientToServerEventName.Message, (message) => handleMessageReceivedFromSocket(message, socket));
+  socket.on(ClientToServerEventName.Click, (x, y) => accelerateBallFromSocket(x, y, socket));
+}
+
+function checkCollisionWithTableRails(ball: Ball) {
+  tableRails.forEach(([pointA, pointB]) => {
+    if (rewindToCollisionPoint(ball, ball.radius, pointA, pointB))
+      collideCircleEdge(
+        ball,
+        ball.radius,
+        ball.mass,
+        {
+          cpos: pointA,
+          ppos: pointA,
+        },
+        massOfImmovableObjects,
+        {
+          cpos: pointB,
+          ppos: pointB,
+        },
+        massOfImmovableObjects,
+        true,
+        collisionDamping
+      );
+  });
+}
+
+function deleteBallFromTable(ball: Ball, table: Table) {
+  if (table.balls.has(ball.id)) {
+    table.balls.delete(ball.id);
+    table.sockets.forEach((targetSocket) => targetSocket.emit(ServerToClientEventName.Deletion, ball.id));
+  }
+
+  if (getNumberOfNonPlayableBallsOnTable(table) == 0) addNonPlayableBallsToTable(table);
+}
+
+function checkCollisionWithScoreLines(ball: Ball, table: Table) {
+  scoreLines.forEach(([pointA, pointB]) => {
+    if (rewindToCollisionPoint(ball, ball.radius, pointA, pointB)) {
+      deleteBallFromTable(ball, table);
+
+      if (ball.ownerSocketId) {
+        const socket = table.sockets.get(ball.ownerSocketId);
+
+        if (socket) {
+          const negativeScore = -ball.value;
+          socket.data.score = Math.max(0, (socket.data.score as number) + negativeScore);
+          socket.emit(ServerToClientEventName.Scored, negativeScore, ball.cpos.x, ball.cpos.y);
+          createBallForSocket(socket);
+        }
+      }
+
+      if (ball.lastTouchedBySocketId) {
+        const socket = table.sockets.get(ball.lastTouchedBySocketId);
+
+        if (socket) {
+          socket.data.score = (socket.data.score as number) + ball.value;
+          socket.emit(ServerToClientEventName.Scored, ball.value, ball.cpos.x, ball.cpos.y);
+        }
+      }
+    }
+  });
+}
+
+function emitObjectsPositionsToConnectedSockets() {
+  Array.from(tables.values())
+    .filter((table) => table.balls.size)
+    .forEach((table) => {
+      const positions = Array.from(table.balls.values()).reduce<BallsPositions>((resultArray, ball) => {
+        resultArray.push([ball.id, Math.trunc(ball.cpos.x), Math.trunc(ball.cpos.y)]);
+        return resultArray;
+      }, []);
+
+      table.sockets.forEach((socket) => {
+        socket.emit(ServerToClientEventName.Positions, positions);
+      });
+    });
+}
+
+function emitScoreboardToConnectedSockets() {
+  const tableIdPerScoreboardMap = new Map<number, Scoreboard>();
+
+  tables.forEach((table) => {
+    const tableScoreboard = Array.from(table.sockets.values())
+      .sort((a, b) => (b.data.score as number) - (a.data.score as number))
+      .reduce<Scoreboard>((scoreboard, socket) => {
+        scoreboard.push([socket.data.nickname as string, socket.data.score as number, table.id as number]);
+        return scoreboard;
+      }, []);
+
+    tableIdPerScoreboardMap.set(table.id, tableScoreboard);
+  });
+
+  const overallScoreboard = [] as Scoreboard;
+
+  tableIdPerScoreboardMap.forEach((tableScoreboard) => overallScoreboard.push(...tableScoreboard));
+
+  overallScoreboard.sort(([, scoreA], [, scoreB]) => scoreB - scoreA);
+
+  const scoreBoardToEmit = JSON.stringify(overallScoreboard);
+
+  if (lastScoreboardEmitted === scoreBoardToEmit) return;
+
+  lastScoreboardEmitted = scoreBoardToEmit;
+
+  tables.forEach((table) => {
+    table.sockets.forEach((socket) => {
+      let tableScoreboard = [] as Scoreboard;
+      if (socket.data.table && tableIdPerScoreboardMap.has(socket.data.table.id)) {
+        tableScoreboard = tableIdPerScoreboardMap.get(socket.data.table.id) as Scoreboard;
+      }
+      socket.emit(ServerToClientEventName.Scoreboard, overallScoreboard, tableScoreboard);
+    });
+  });
+}
+
+function repositionBallIfItIsOutOfTable(ball: Ball) {
+  if (
+    ball.cpos.x < 0 ||
+    ball.cpos.x > squareCanvasSizeInPixels ||
+    ball.cpos.y < 0 ||
+    ball.cpos.y > squareCanvasSizeInPixels
+  ) {
+    placeBallInRandomPosition(ball);
+  }
+}
+
+function updatePhysics(deltaTime: number) {
+  tables.forEach((table) => {
+    Array.from(table.balls.values()).forEach((ball, _, balls) => {
+      repositionBallIfItIsOutOfTable(ball);
+
+      accelerate(ball, deltaTime);
+
+      balls
+        .filter((otherBalls) => ball !== otherBalls && isColliding(ball, otherBalls))
+        .forEach((otherBall) => handleCollision(ball, otherBall));
+
+      checkCollisionWithTableRails(ball);
+
+      checkCollisionWithScoreLines(ball, table);
+
+      inertia(ball);
+    });
+  });
+}
+
+function getRandomHexColor() {
+  const randomInteger = (max: number) => Math.floor(Math.random() * (max + 1));
+  const randomRgbColor = () => [randomInteger(255), randomInteger(255), randomInteger(255)];
+  const [r, g, b] = randomRgbColor();
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+}
+
+function handleMainLoopUpdate(deltaTime: number) {
+  updatePhysics(deltaTime);
+
+  timePassedSinceLastStateUpdateEmitted += deltaTime;
+  if (timePassedSinceLastStateUpdateEmitted > objectsPositionsUpdateMillisecondsInterval) {
+    timePassedSinceLastStateUpdateEmitted -= objectsPositionsUpdateMillisecondsInterval;
+    emitObjectsPositionsToConnectedSockets();
+  }
+
+  timePassedSinceLastScoreboardUpdate += deltaTime;
+  if (timePassedSinceLastScoreboardUpdate > scoreboardUpdateMillisecondsInterval) {
+    timePassedSinceLastScoreboardUpdate -= scoreboardUpdateMillisecondsInterval;
+    emitScoreboardToConnectedSockets();
+  }
+}
+
+function addNonPlayableBallsToTable(table: Table) {
+  const [min, max] = nonPlayableBallsValuesRange;
+  for (let value = min; value <= max; value++) {
+    addBallToTable(table, {
+      radius: ballRadius,
+      value,
+      label: `${value}`,
+      color: ballColors[value],
+    });
+  }
+}
+
+function addSocketToTable(socket: GameSocket, table: Table) {
+  table.sockets.set(socket.id, socket);
+  socket.data.table = table;
+  createBallForSocket(socket);
+  socket.emit(ServerToClientEventName.Objects, Array.from(table.balls.values()));
+  broadcastChatMessageToAllTables(`📢 ${socket.data.nickname} joined Table ${table.id}!`);
+}
+
+function removeSocketFromTable(socket: GameSocket, table?: Table) {
+  if (!table) return;
+  deleteBallFromSocket(socket);
+  table.sockets.delete(socket.id);
+  socket.data.table = undefined;
+  if (!table.sockets.size) deleteTable(table);
+}
+
+function createTable() {
+  const table = {
+    id: getUniqueId(),
+    sockets: new Map<string, GameSocket>(),
+    balls: new Map<number, Ball>(),
+  } as Table;
+
+  tables.set(table.id, table);
+
+  addNonPlayableBallsToTable(table);
+
+  return table;
+}
+
+function deleteTable(table: Table) {
+  Array.from(table.balls.values()).forEach((ball) => deleteBallFromTable(ball, table));
+  tables.delete(table.id);
+}
+
+MainLoop.setUpdate(handleMainLoopUpdate).start();
+
+export default { io: handleSocketConnected };

src/shared.ts

@@ -0,0 +1,53 @@
+import type { Integratable } from "pocket-physics";
+
+export const ballsPositionsUpdatesPerSecond = 8;
+
+export const ballRadius = 14;
+
+export const squareCanvasSizeInPixels = 680;
+
+export type Ball = Integratable & {
+  id: number;
+  radius: number;
+  mass: number;
+  value: number;
+  label: string;
+  color: string;
+  lastTouchedTimestamp: number;
+  lastTouchedBySocketId?: string;
+  ownerSocketId?: string;
+};
+
+export type BallsPositions = [objectId: number, x: number, y: number][];
+
+export type Scoreboard = [nick: string, score: number, tableId: number][];
+
+export enum ServerToClientEventName {
+  Message = "A",
+  Objects = "B",
+  Creation = "C",
+  Deletion = "D",
+  Scored = "E",
+  Positions = "F",
+  Scoreboard = "G",
+}
+
+export enum ClientToServerEventName {
+  Message = "A",
+  Click = "B",
+}
+
+export interface ServerToClientEvents {
+  [ServerToClientEventName.Message]: (message: string) => void;
+  [ServerToClientEventName.Objects]: (objects: Ball[]) => void;
+  [ServerToClientEventName.Creation]: (object: Ball) => void;
+  [ServerToClientEventName.Deletion]: (id: number) => void;
+  [ServerToClientEventName.Scored]: (value: number, positionX: number, positionY: number) => void;
+  [ServerToClientEventName.Positions]: (ballsPositions: BallsPositions) => void;
+  [ServerToClientEventName.Scoreboard]: (overallScoreboard: Scoreboard, tableScoreboard: Scoreboard) => void;
+}
+
+export interface ClientToServerEvents {
+  [ClientToServerEventName.Message]: (message: string) => void;
+  [ClientToServerEventName.Click]: (positionX: number, positionY: number) => void;
+}

src/types.d.ts

@@ -0,0 +1,26 @@
+declare const io: typeof import("socket.io-client").io;
+
+declare module "zzfx" {
+  export function zzfx(
+    volume?: number,
+    randomness?: number,
+    frequency?: number,
+    attack?: number,
+    sustain?: number,
+    release?: number,
+    shape?: number,
+    shapeCurve?: number,
+    slide?: number,
+    deltaSlide?: number,
+    pitchJump?: number,
+    pitchJumpTime?: number,
+    repeatTime?: number,
+    noise?: number,
+    modulation?: number,
+    bitCrush?: number,
+    delay?: number,
+    sustainVolume?: number,
+    decay?: number,
+    tremolo?: number
+  ): AudioBufferSourceNode;
+}

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  }
+}