Changed render engine, fixed health bug display bug, lowered rendering range

client/src/OtherPlayer.ts

@@ -14,14 +14,13 @@ export default class OtherPlayer {
         private _color: string,
         private _health: number
     ) {
-        this._health = 100
         this._damage = 10
     }
 
     hit(bullet: Bullet, socket: SocketIOClient.Socket) {
-        this.health -= bullet.shooter.damage
+        // this.health -= bullet.shooter.damage
         bullet.timeToLive = -1
-        socket.emit('health-update', {player: this.id, health: this.health})
+        socket.emit('hit-player', {player: this.id, damage: bullet.shooter.damage})
     }
 
     addBullet(bullet: Bullet) {

client/src/app.ts

@@ -140,7 +140,7 @@ function distance(p1: any, p2: any) {
 
 function drawMap(p5: P5) {
   for (let tile of mapTiles) {
-    if (isVisible(game.getPlayer().position, tile.position)) {
+    if (isVisible(game.getPlayer().position, {x: tile.position.x - tile.image.width / 2, y: tile.position.y - tile.image.height / 2})) {
       p5.image(tile.image, tile.position.x - game.getPlayer().position.x - tile.image.width/2, tile.position.y - game.getPlayer().position.y - tile.image.height/2)
     }
   }
@@ -149,7 +149,7 @@ function drawMap(p5: P5) {
 const sketch = (p5: P5) => {
   p5.setup = () => {
     buildMap()
-    p5.createCanvas(1920, 1080, p5.WEBGL);
+    p5.createCanvas(1920, 1080);
     canvas = document.querySelector('canvas')!
     onCanvasResize()
     window.addEventListener('resize', onCanvasResize)
@@ -175,7 +175,7 @@ const sketch = (p5: P5) => {
 
   p5.draw = () => {
     p5.background('#000000')
-    // p5.translate(p5.width/2, p5.height/2)
+    p5.translate(p5.width/2, p5.height/2)
 
 
     // drawing map background

client/src/preloadResources.ts

@@ -8,7 +8,7 @@ export default function prealoadResources(p5: P5): {
     let images = new Map<string, P5.Image>()
     let fonts = new Map<string, P5.Font>()
 
-    images.set('grass', p5.loadImage('images/grass.png'))
+    images.set('grass', p5.loadImage('images/grass.jpg'))
     images.set('powerUp', p5.loadImage('images/PowerUp.png'))
     images.set('shield', p5.loadImage('images/Shield.png'))
     images.set('healthPack', p5.loadImage('images/HealthPack.png'))

client/src/setupSocketEvents.ts

@@ -43,6 +43,10 @@ export default function setupSocketEvents(socket: SocketIOClient.Socket, game: G
             otherPlayer.addBullet(new Bullet(otherPlayer, data.direction))
         }
     })
+
+    socket.on('ded', (data: BulletData) => {
+        window.location.href = '/ded';
+    })
     
     socket.on('health-update', (data: {id: string, health: number}) => {
         let otherPlayer = game.getOtherPlayer(data.id)
@@ -52,6 +56,7 @@ export default function setupSocketEvents(socket: SocketIOClient.Socket, game: G
         if (game.getPlayer().socket.id === data.id) {
             game.getPlayer().health = data.health
             if (data.health <= 0) {
+                game.getPlayer().socket.disconnect()
                 window.location.href = '/ded';
             }
         }