Client converted to TypeScript, client uses webpack

.gitignore

@@ -1,2 +1 @@
 node_modules
-server/dist

client/.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

client/package.json

@@ -4,8 +4,8 @@
   "description": "",
   "main": "dist/app.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "tsc": "tsc -w"
+    "tsc": "tsc -w",
+    "build": "webpack"
   },
   "repository": {
     "type": "git",
@@ -18,15 +18,21 @@
   },
   "homepage": "https://github.com/rdarius/global-game-jam-2021#readme",
   "dependencies": {
+    "@types/socket.io-client": "^1.4.35",
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "p5": "^1.2.0",
-    "socket.io": "^3.1.0"
+    "socket.io": "^3.1.0",
+    "socket.io-client": "^3.1.0"
   },
   "devDependencies": {
     "@types/express": "^4.17.11",
-    "@types/socket.io": "^2.1.13",
     "@types/p5": "^0.9.1",
-    "typescript": "^4.1.3"
+    "@types/socket.io": "^2.1.13",
+    "ts-loader": "^8.0.14",
+    "typescript": "^4.1.3",
+    "webpack": "^5.19.0",
+    "webpack-cli": "^4.4.0",
+    "webpack-dev-server": "^3.11.2"
   }
 }

client/src/app.ts

@@ -1,33 +1,35 @@
-var canvas;
+import P5 from 'p5'
+import io from 'socket.io-client'
 
-var tileTypes, mapTiles = [];
+const socket = io("https://blobbystrike.ioi.lt", {secure: true});
+
+let canvas: HTMLCanvasElement;
+
+var tileTypes, mapTiles: any = [];
 
 const PLAYER_SPEED = 10;
 
-var Player = {
+let Player = {
   id: '',
   name: '',
   position: {x:0, y:0},
   color: '#' + (Math.floor(Math.random() * 256)).toString(16) + (Math.floor(Math.random() * 256)).toString(16) + (Math.floor(Math.random() * 256)).toString(16),
-  keysPressed: [],
+  keysPressed: [false],
 }
 
-var OtherPlayers = []
+var OtherPlayers: any = []
 
 var KEY_W = 87;
 var KEY_A = 65;
 var KEY_S = 83;
 var KEY_D = 68;
 
-let grassImage;
-function preload() {
-  grassImage = loadImage('grass.png');
-}
+let grassImage: P5.Image;
 
-function onKeyDown(e) {
+function onKeyDown(e: any) {
   Player.keysPressed[e.keyCode] = true;
 }
-function onKeyUp(e) {
+function onKeyUp(e: any) {
   Player.keysPressed[e.keyCode] = false;
 }
 
@@ -53,19 +55,19 @@ function onCanvasResize() {
   }
 }
 
-function drawPlayer(player, x, y) {
-  stroke(0, 0, 0)
-  strokeWeight(5)
+function drawPlayer(p5: P5, player: any, x: any, y: any) {
+  p5.stroke(0, 0, 0)
+  p5.strokeWeight(5)
   // translate(-width/2, -height/2)
-  fill(player.color)
-  ellipse(x, y, 80, 80);
-  textSize(32);
-  fill(255, 255, 255);
-  textAlign(CENTER, CENTER);
-  text(player.name, x - 300,y - 100, 600, 50);
+  p5.fill(player.color)
+  p5.ellipse(x, y, 80, 80);
+  p5.textSize(32);
+  p5.fill(255, 255, 255);
+  p5.textAlign(p5.CENTER, p5.CENTER);
+  p5.text(player.name, x - 300,y - 100, 600, 50);
 }
 
-function relativePosition(pos1, pos2) {
+function relativePosition(pos1: any, pos2: any) {
   return {
     x: pos2.x - pos1.x,
     y: pos2.y - pos1.y,
@@ -93,7 +95,7 @@ function buildMap() {
   console.log(mapTiles)
 }
 
-function isVisible(middlePoint, visibleAreaSize, position, size) {
+function isVisible(middlePoint: any, visibleAreaSize: any, position: any, size: any) {
   if (
     position.x - size.width > middlePoint.x - visibleAreaSize.width/2 &&
     position.x + size.width < middlePoint.x + visibleAreaSize.width/2 &&
@@ -107,31 +109,64 @@ function isVisible(middlePoint, visibleAreaSize, position, size) {
   return false;
 }
 
-function distance(p1, p2) {
+function distance(p1: any, p2: any) {
   return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2))
 }
 
-function drawMap() {
+function drawMap(p5: P5) {
 
   for (let xTiles of mapTiles) {
     for (let yTile of xTiles) {
       if (distance(Player.position, {x: yTile.x, y: yTile.y}) < 2000) {
-        image(yTile.tile, yTile.x + width/2, yTile.y + height/2)
+        p5.image(yTile.tile, yTile.x + p5.width/2, yTile.y + p5.height/2)
       }
     }
   }
 
 }
 
-function setup() {
+socket.on('your-info', function (playerData: any) {
+  Player.name = playerData.name;
+  Player.position = playerData.position;
+  Player.color = playerData.color;
+  Player.id = playerData.id;
+})
+socket.on('players-info', function (playersData: any) {
+  for (let playerData of playersData) {
+    if (Player.id !== playerData.id) {
+      OtherPlayers.push({
+        name: playerData.name,
+        position: playerData.position,
+        color: playerData.color,
+        id: playerData.id,
+      })
+    }
+  }
+})
+socket.on('new-player-joined', function (playerData: any) {
+  if (Player.id !== playerData.id) {
+    OtherPlayers.push({
+      name: playerData.name,
+      position: playerData.position,
+      color: playerData.color,
+      id: playerData.id,
+    })
+  }
+})
+socket.on('player-moved', function (movedPlayerData: any) {
+  for (let playerData of OtherPlayers) {
+    if (Player.id !== movedPlayerData.id && movedPlayerData.id === playerData.id) {
+      playerData.position = movedPlayerData.position;
+    }
+  }
+})
 
-  // TESTING //
-
-  // END: TESTING //
+const sketch = (p5: P5) => {
 
+  p5.setup = () => {
     buildMap()
-  createCanvas(1920, 1080);
-  canvas = document.querySelector('canvas')
+    p5.createCanvas(1920, 1080);
+    canvas = document.querySelector('canvas')!
     onCanvasResize()
     window.addEventListener('resize', onCanvasResize)
     document.addEventListener('keydown', onKeyDown)
@@ -139,21 +174,22 @@ function setup() {
     document.addEventListener("contextmenu", onContextMenu);
   }
 
-function draw() {
-  translate(-Player.position.x, Player.position.y)
-
-  drawMap()
-
-  for (let otherPlayer of OtherPlayers) {
-    drawPlayer(otherPlayer, otherPlayer.position.x + width/2, -otherPlayer.position.y + height/2)
+  p5.preload = () => {
+    grassImage = p5.loadImage('grass.png');
   }
 
-  translate(Player.position.x, -Player.position.y)
-  drawPlayer(Player, width/2, height/2)
-  text(Math.floor(Player.position.x) + ':' + Math.floor(Player.position.y), width/2, 50)
+  p5.draw = () => {
+    p5.translate(-Player.position.x, Player.position.y)
 
+    drawMap(p5)
   
+    for (let otherPlayer of OtherPlayers) {
+      drawPlayer(p5, otherPlayer, otherPlayer.position.x + p5.width/2, -otherPlayer.position.y + p5.height/2)
+    }
   
+    p5.translate(Player.position.x, -Player.position.y)
+    drawPlayer(p5, Player, p5.width/2, p5.height/2)
+    p5.text(Math.floor(Player.position.x) + ':' + Math.floor(Player.position.y), p5.width/2, 50)
     
     let previousPosition = {
       x: Player.position.x,
@@ -177,38 +213,6 @@ function draw() {
     }
   }
 
-socket.on('your-info', function (playerData) {
-  Player.name = playerData.name;
-  Player.position = playerData.position;
-  Player.color = playerData.color;
-  Player.id = playerData.id;
-})
-socket.on('players-info', function (playersData) {
-  for (let playerData of playersData) {
-    if (Player.id !== playerData.id) {
-      OtherPlayers.push({
-        name: playerData.name,
-        position: playerData.position,
-        color: playerData.color,
-        id: playerData.id,
-      })
 }
-  }
-})
-socket.on('new-player-joined', function (playerData) {
-  if (Player.id !== playerData.id) {
-    OtherPlayers.push({
-      name: playerData.name,
-      position: playerData.position,
-      color: playerData.color,
-      id: playerData.id,
-    })
-  }
-})
-socket.on('player-moved', function (movedPlayerData) {
-  for (let playerData of OtherPlayers) {
-    if (Player.id !== movedPlayerData.id && movedPlayerData.id === playerData.id) {
-      playerData.position = movedPlayerData.position;
-    }
-  }
-})
+
+new P5(sketch)

client/static/assets/bundle.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! p5.js v1.2.0 December 19, 2020 */

client/static/index.html

@@ -9,11 +9,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script src="./socket.io.min.js"></script>
-    <script>
-      const socket = io("https://blobbystrike.ioi.lt", {secure: true});
-    </script>
-    <script src="./p5js/p5.min.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

client/tsconfig.json

@@ -4,18 +4,23 @@
 
     /* Basic Options */
     // "incremental": true,                   /* Enable incremental compilation */
-    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
-    "module": "amd",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
-    // "lib": [],                             /* Specify library files to be included in the compilation. */
+    "target": "es6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "module": "ES6",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "lib": [
+      "DOM",
+      "ES6",
+      "DOM.Iterable",
+      "ScriptHost"
+    ],                             /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
     // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
     "sourceMap": true,                     /* Generates corresponding '.map' file. */
-    "outFile": "./static/assets/bundle.js",                       /* Concatenate and emit output to single file. */
+    // "outFile": "./static/assets/bundle.js",                       /* Concatenate and emit output to single file. */
     "outDir": "./dist",                        /* Redirect output structure to the directory. */
-    "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "composite": true,                     /* Enable project compilation */
     // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
     "removeComments": true,                /* Do not emit comments to output. */
@@ -23,6 +28,7 @@
     // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
     // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
     // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+    // "noEmitOnError": true,
 
     /* Strict Type-Checking Options */
     "strict": true,                           /* Enable all strict type-checking options. */

client/webpack.config.js

@@ -0,0 +1,22 @@
+const path = require('path')
+
+module.exports = {
+    entry: './src/app.ts',
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'static/assets')
+    },
+    devtool: 'inline-source-map',
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                use: 'ts-loader',
+                exclude: /node_modules/
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.ts', '.js']
+    }
+}

server/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

server/tsconfig.json

@@ -23,6 +23,7 @@
     // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
     // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
     // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+    "noEmitOnError": true,
 
     /* Strict Type-Checking Options */
     "strict": true,                           /* Enable all strict type-checking options. */