Saving while it works xD

client/package-lock.json

@@ -204,6 +204,12 @@
         }
       }
     },
+    "@types/uuid": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.0.tgz",
+      "integrity": "sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ==",
+      "dev": true
+    },
     "@types/webpack": {
       "version": "4.41.26",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.26.tgz",
@@ -3397,6 +3403,13 @@
         "faye-websocket": "^0.11.3",
         "uuid": "^3.4.0",
         "websocket-driver": "^0.7.4"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+        }
       }
     },
     "sockjs-client": {
@@ -3870,9 +3883,9 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
     },
     "uuid": {
-      "version": "3.4.0",
+      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
     "v8-compile-cache": {
       "version": "2.2.0",
@@ -4163,6 +4176,11 @@
           "version": "3.2.4",
           "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
           "integrity": "sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA=="
+        },
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
         }
       }
     },

client/package.json

@@ -20,22 +20,24 @@
   },
   "homepage": "https://github.com/rdarius/global-game-jam-2021#readme",
   "dependencies": {
+    "@types/express": "^4.17.11",
+    "@types/p5": "^0.9.1",
+    "@types/socket.io": "^2.1.13",
     "@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-client": "^3.1.0",
-    "@types/express": "^4.17.11",
-    "@types/p5": "^0.9.1",
-    "@types/socket.io": "^2.1.13",
     "ts-loader": "^8.0.14",
     "typescript": "^4.1.3",
+    "uuid": "^8.3.2",
     "webpack": "^5.19.0",
     "webpack-cli": "^4.4.0",
     "webpack-dev-server": "^3.11.2"
   },
   "devDependencies": {
+    "@types/uuid": "^8.3.0",
     "clean-webpack-plugin": "^3.0.0"
   }
 }

client/src/Bullet.ts

@@ -1,5 +1,5 @@
 import p5 from "p5";
-import OtherPlayer from "./OtherPlayer";
+import Player from "./Player";
 import { Position } from "./types";
 
 export default class Bullet {
@@ -9,7 +9,7 @@ export default class Bullet {
     private _position: Position
 
     constructor(
-        private _shooter: OtherPlayer,
+        private _shooter: Player,
         private direction: Position,
     ) {
         this._position = {..._shooter.position}

client/src/Game.ts

@@ -4,16 +4,32 @@ import OtherPlayer from "./OtherPlayer";
 import UserPlayer from "./UserPlayer";
 import { PlayerDescription } from "./socketDataTypes";
 import Pickable from "./Pickable";
+import Player from "./Player";
+import PlayerList from "./PlayerList";
+import p5 from "p5";
 
 export default class Game {
 
     private player: UserPlayer
-    private otherPlayers: OtherPlayer[] = []
+    private _otherPlayers: PlayerList
-    private bullets: Bullet[] = []
     private items: Pickable[] = []
+    private images: Map<string, p5.Image> = new Map<string, p5.Image>()
 
     constructor(_socket: SocketIOClient.Socket) {
-        this.player = new UserPlayer(_socket.id, _socket, '', {x:0, y:0}, 'white', new Map<number, boolean>(), 100)
+        this.player = new UserPlayer(_socket,_socket.id, 'Player', {x:0, y:0}, 'white', new Map<number, boolean>(), 100, 10, 10)
+        this._otherPlayers = new PlayerList()
+    }
+
+    setImages(images: Map<string, p5.Image>) {
+        this.images = images
+    }
+
+    getImages() {
+        return this.images
+    }
+
+    get otherPlayers() {
+        return this._otherPlayers
     }
 
     addItem(item: Pickable) {
@@ -24,6 +40,12 @@ export default class Game {
         return this.items
     }
 
+    removeItemById(id: string) {
+        this.items = this.items.filter((item) => {
+            return item.id !== id
+        })
+    }
+
     removeItem(pickable: Pickable) {
         this.items = this.items.filter((item) => {
             return item !== pickable
@@ -34,45 +56,4 @@ export default class Game {
         return this.player
     }
 
-    setPlayer(description: PlayerDescription) {
-        this.player.id = description.id
-        this.player.name = description.name
-        this.player.position = description.position
-        this.player.color = description.color
-    }
-
-    addOtherPlayer(player: OtherPlayer) {
-        if (player.id === this.player.id) return
-        let oPlayer = this.otherPlayers.find((otherPlayer) => {
-            return player.id === otherPlayer.id
-        })
-        if (oPlayer) {
-            oPlayer.color = player.color
-            oPlayer.id = player.id
-            oPlayer.name = player.name
-            oPlayer.position = player.position
-        } else {
-            this.otherPlayers.push(player)
-        }
-    }
-
-    removeOtherPlayer(id: string) {
-        this.otherPlayers = this.otherPlayers.filter((player) => {
-            return player.id !== id
-        })
-    }
-
-    getOtherPlayers() {
-        return this.otherPlayers
-    }
-
-    getOtherPlayer(id: string) {
-        for (let player of this.otherPlayers) {
-            if (player.id === id) {
-                return player
-            }
-        }
-        return null
-    }
-
 }

client/src/Pickable.ts

@@ -4,12 +4,17 @@ import { Position } from "./types";
 export default class Pickable {
 
     constructor(
+        private _id: string,
         private _position: Position,
         private _item: Item,
     ) {
 
     }
 
+    get id() {
+        return this._id
+    }
+
     get position() {
         return this._position
     }

client/src/Player.ts

@@ -0,0 +1,183 @@
+import { Position } from './types'
+import p5 from 'p5'
+import Bullet from './Bullet'
+
+export default class Player {
+    
+    private KEY_W = 87
+    private KEY_A = 65
+    private KEY_S = 83
+    private KEY_D = 68
+
+    private MOVEMENT_SPEED = 0.8
+
+    private bullets: Bullet[] = []
+
+    constructor(
+        private _id: string,
+        private _name: string = 'Player',
+        private _position: Position = {x: 0, y: 0},
+        private _color: string = '#ffffff',
+        private _keysPressed: Map<number, boolean> = new Map<number, boolean>(),
+        private _health: number = 100,
+        private _damage: number = 10,
+        private _defence: number = 10,
+    ) {
+        this._keysPressed = new Map<number, boolean>()
+    }
+
+    get keysPressed() {
+        return this._keysPressed
+    }
+
+    get id() {
+        return this._id
+    }
+
+    set id(id: string) {
+        this._id = id
+    }
+
+    get name() {
+        return this._name
+    }
+
+    set name(name: string) {
+        this._name = name
+    }
+
+    get position() {
+        return this._position
+    }
+
+    set position(position: Position) {
+        this._position = position
+    }
+
+    get color() {
+        return this._color
+    }
+
+    set color(color: string) {
+        this._color = color
+    }
+
+    get health() {
+        return this._health
+    }
+
+    set health(health: number) {
+        this._health = health
+    }
+
+    get damage() {
+        return this._damage
+    }
+
+    set damage(damage: number) {
+        this._damage = damage
+    }
+
+    get defence() {
+        return this._defence
+    }
+
+    set defence(defence: number) {
+        this._defence = defence
+    }
+
+    hit(bullet: Bullet, socket: SocketIOClient.Socket) {
+        bullet.timeToLive = -1
+        let dmg = bullet.shooter.damage - this.defence
+        if (dmg < 0) dmg = 0
+        this.health -= dmg
+        socket.emit('hit-player', {id: this.id, health: this.health})
+    }
+
+    keyAction(key: number, isDown: boolean) {
+        this._keysPressed.set(key, isDown)
+    }
+
+    takeDamage(damage: number) {
+        let dmg = damage - this._defence
+        if (dmg < 0) { dmg = 0 }
+        this._health -= dmg
+    }
+
+    getPlayerDescription() {
+        return {
+            name: this.name,
+            color: this.color,
+            position: this.position,
+            id: this._id,
+            health: this.health,
+            damage: this.damage,
+            defence: this.defence
+        }
+    }
+
+    move(delta: number) {
+        if (this.keysPressed.get(this.KEY_A)) {
+            this.position.x -= this.MOVEMENT_SPEED * delta
+        }
+        
+        if (this.keysPressed.get(this.KEY_D)) {
+            this.position.x += this.MOVEMENT_SPEED * delta
+        }
+        
+        if (this.keysPressed.get(this.KEY_W)) {
+            this.position.y -= this.MOVEMENT_SPEED * delta
+        }
+        
+        if (this.keysPressed.get(this.KEY_S)) {
+            this.position.y += this.MOVEMENT_SPEED * delta
+        }
+
+        if (this.position.x < -1600) {
+            this.position.x = -1600
+        }
+
+        if (this.position.y < -2000) {
+            this.position.y = -2000
+        }
+
+        if (this.position.x > 1500) {
+            this.position.x = 1500
+        }
+
+        if (this.position.y > 1900) {
+            this.position.y = 1900
+        }
+    }
+
+    draw(p5: p5, position: Position) {
+        p5.stroke(0, 0, 0)
+        p5.strokeWeight(5)
+        p5.fill(this.color)
+        p5.ellipse(position.x, position.y, 80, 80)
+        p5.textSize(32)
+        p5.fill(255, 255, 255)
+        p5.textAlign(p5.CENTER, p5.CENTER)
+        p5.text(this.name, position.x - 300, position.y - 150, 600, 50)
+        p5.noStroke()
+        p5.fill('#850000')
+        p5.rect(position.x - 50, position.y - 90, 100, 5)
+        p5.fill('#008500')
+        p5.rect(position.x - 50, position.y - 90, this.health, 5)
+    }
+
+    addBullet(bullet: Bullet) {
+        this.bullets.push(bullet)
+    }
+
+    getBullets() {
+        return this.bullets
+    }
+
+    removeExpiredBullets() {
+        this.bullets = this.bullets.filter((bullet: Bullet) => {
+            return bullet.timeToLive > 0
+        })
+    }
+
+}

client/src/PlayerList.ts

@@ -0,0 +1,28 @@
+import Player from "./Player";
+
+export default class PlayerList {
+
+    private players: Map<string, Player>
+
+    constructor() {
+        this.players = new Map<string, Player>()
+    }
+
+    getPlayer(id: string) {
+        return this.players.get(id)
+    }
+
+    getPlayers() {
+        return this.players
+    }
+
+    addPlayer(id: string, player: Player) {
+        if (this.players.has(id)) return
+        this.players.set(id, player)
+    }
+
+    removePlayer(id: string) {
+        this.players.delete(id)
+    }
+
+}

client/src/UserPlayer.ts

@@ -1,20 +1,21 @@
 import SocketIOClient from "socket.io-client";
-import Bullet from "./Bullet";
+import Player from "./Player";
-import OtherPlayer from "./OtherPlayer";
 import { Position } from "./types";
 
-export default class UserPlayer extends OtherPlayer{
+export default class UserPlayer extends Player {
 
     constructor(
-        _id: string,
         private _socket: SocketIOClient.Socket,
+        _id: string,
         _name: string,
         _position: Position,
         _color: string,
         _keysPressed: Map<number, boolean>,
-        _health: number
+        _health: number,
+        _damage: number,
+        _defence: number
     ) {
-        super(_id, _name, _position, _color, _keysPressed, _health)
+        super(_id, _name, _position, _color, _keysPressed, _health, _damage, _defence)
     }
 
     get socket(): SocketIOClient.Socket {
@@ -22,10 +23,12 @@ export default class UserPlayer extends OtherPlayer{
     }
 
     keyUp(key: number) {
+        this.keysPressed.set(key, false)
         this.socket.emit('key-action', {key: key, isDown: false})
     }
 
     keyDown(key: number) {
+        this.keysPressed.set(key, true)
         this.socket.emit('key-action', {key: key, isDown: true})
     }
 

client/src/app.ts

@@ -9,9 +9,10 @@ import Bullet from './Bullet'
 import { Position } from './types'
 import Pickable from './Pickable'
 import Item from './Item'
+import * as uuid from 'uuid'
 
-const socket = io("https://blobbystrike.ioi.lt", {secure: true})
+let socket: SocketIOClient.Socket
-const game = new Game(socket)
+let game: Game
 
 let images: Map<string, P5.Image>
 let fonts: Map<string, P5.Font>
@@ -40,18 +41,15 @@ const getDeltaTime = () => {
     return dt
 }
 
-
 function onKeyDown(e: any) {
   game.getPlayer().keyDown(e.keyCode)
-  game.getPlayer().setKeyPressed(e.keyCode, true)
 }
 function onKeyUp(e: any) {
   game.getPlayer().keyUp(e.keyCode)
-  game.getPlayer().setKeyPressed(e.keyCode, false)
 }
 
 function onContextMenu() {
-  game.getPlayer().clearKeysPressed()
+  game.getPlayer().keysPressed.clear()
 }
 
 function getCursorPosition(canvas: HTMLCanvasElement, event: MouseEvent) {
@@ -72,11 +70,11 @@ function onMouseUp(e: MouseEvent) {
   pos.y -= parseInt(canvas.style.height) / 2
   let length = Math.sqrt((pos.x * pos.x) + (pos.y * pos.y))
   let scale = 1 / length
-  scale *= 5
+  scale *= 2
   pos.x *= scale
   pos.y *= scale
   game.getPlayer().addBullet(new Bullet(game.getPlayer(), pos))
-  socket.emit('shoot', {position: game.getPlayer().position, direction: pos})
+  socket.emit('shoot', {id: game.getPlayer().id, position: game.getPlayer().position, direction: pos})
 }
 
 function onCanvasResize() {
@@ -138,9 +136,18 @@ function drawMap(p5: P5) {
 
 
 const sketch = (p5: P5) => {
+  
+
+  p5.preload = () => {
+    let resources = prealoadResources(p5)
+    
+    images = resources.images
+    fonts = resources.fonts
+  }
+
   p5.setup = () => {
     buildMap()
-    p5.createCanvas(1920, 1080);
+    p5.createCanvas(1920, 1080)
     canvas = document.querySelector('canvas')!
     onCanvasResize()
     window.addEventListener('resize', onCanvasResize)
@@ -150,16 +157,9 @@ const sketch = (p5: P5) => {
     canvas.addEventListener("mousedown", onMouseUp)
     p5.textFont(fonts.get('Ubuntu')!)
 
-    game.addItem(new Pickable({x: 150, y: 150}, new Item(images.get('healthPack')!, "HEAL")))
+    socket = io("https://blobbystrike.ioi.lt", {secure: true})
-    game.addItem(new Pickable({x: 150, y: 100}, new Item(images.get('powerUp')!, "DAMAGE")))
+    game = new Game(socket)
-    game.addItem(new Pickable({x: 150, y: 100}, new Item(images.get('shield')!, "DEFENCE")))
+    game.setImages(images)
-  }
-
-  p5.preload = () => {
-    let resources = prealoadResources(p5)
-    
-    images = resources.images
-    fonts = resources.fonts
 
     setupSocketEvents(socket, game)
   }
@@ -168,12 +168,12 @@ const sketch = (p5: P5) => {
 
     let dt = getDeltaTime()
 
-    p5.background('#000000')
+    p5.background('#690000')
     p5.translate(p5.width/2, p5.height/2)
 
 
     // drawing map background
-    drawMap(p5)
+    // drawMap(p5)
 
 
     // drawing items
@@ -183,24 +183,24 @@ const sketch = (p5: P5) => {
         switch(item.item.type) {
           case "HEAL":
             game.getPlayer().health = 100
-            socket.emit('item-heal')
+            socket.emit('item-picked', {id: item.id})
-            break;
+            socket.emit('hit-player', {id: game.getPlayer().id, health: game.getPlayer().health})
-          case "DAMAGE":
-            game.getPlayer().damage += 2
-            socket.emit('item-damage')
-            break;
-          case "DEFENCE":
-            game.getPlayer().defence += 2
-            socket.emit('item-defence')
             break;
+          // case "DAMAGE":
+          //   game.getPlayer().damage += 2
+          //   socket.emit('item-damage')
+          //   break;
+          // case "DEFENCE":
+          //   game.getPlayer().defence += 2
+          //   socket.emit('item-defence')
+          //   break;
         }
         game.removeItem(item)
       }
     }
 
 
-  
+    game.otherPlayers.getPlayers().forEach((otherPlayer) => {
-    for (let otherPlayer of game.getOtherPlayers()) {
       // going through other player list
 
       // draw player if in range
@@ -209,6 +209,9 @@ const sketch = (p5: P5) => {
           x: otherPlayer.position.x - game.getPlayer().position.x,
           y: otherPlayer.position.y - game.getPlayer().position.y
         })
+
+        // move player if in range (guessing where player will be when request from servers comes back)
+        otherPlayer.move(dt)
       }
 
       // going through bullets of that player
@@ -231,19 +234,19 @@ const sketch = (p5: P5) => {
         }
 
         // check if bullet collides with other player
-        for (let otherPlayerCheck of game.getOtherPlayers()) {
+        game.otherPlayers.getPlayers().forEach((otherPlayerCheck) => {
           if (distance(otherPlayerCheck.position, bullet.position) < BULLET_SIZE + PLAYER_SIZE) {
             // check if player bullet collides with is not the player who shot the bullet
             if (otherPlayerCheck.id !== bullet.shooter.id) {
               bullet.timeToLive = -1
             }
           }
-        }
+        })
       }
 
       // removig bullets that has traveled far enough
       otherPlayer.removeExpiredBullets()
-    }
+    })
     
     // drawing current player
     game.getPlayer().draw(p5, {x: 0, y: 0})
@@ -264,12 +267,13 @@ const sketch = (p5: P5) => {
       bullet.move(dt)
 
       // check if bullet collides with other player
-      for (let otherPlayer of game.getOtherPlayers()) {
+      game.otherPlayers.getPlayers().forEach((otherPlayer) => {
+        if (otherPlayer.id === game.getPlayer().id) return
         if (distance(otherPlayer.position, bullet.position) < BULLET_SIZE + PLAYER_SIZE) {
           // register hit to other player
           otherPlayer.hit(bullet, game.getPlayer().socket)
         }
-      }
+      })
     }
     
     // removig bullets that has traveled far enough
@@ -282,7 +286,12 @@ const sketch = (p5: P5) => {
     p5.text(Math.floor(game.getPlayer().position.x) + ':' + Math.floor(game.getPlayer().position.y), -p5.width/2 + 10, -p5.height/2 + 10)
     
     // moving player depending on keys pressed
+    let previousePosition = {...game.getPlayer().position}
     game.getPlayer().move(dt)
+    let newPosition = {...game.getPlayer().position}
+    if (previousePosition.x !== newPosition.x || previousePosition.y !== newPosition.y) {
+      game.getPlayer().socket.emit('player-moved', {position: newPosition})
+    }
   }
 
 }

client/src/preloadResources.ts

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

client/src/setupSocketEvents.ts

@@ -2,7 +2,10 @@ import SocketIOClient from 'socket.io-client'
 import Bullet from './Bullet'
 import { getCookie } from './Cookie'
 import Game from './Game'
+import Item from './Item'
 import OtherPlayer from './OtherPlayer'
+import Pickable from './Pickable'
+import Player from './Player'
 import { BulletData, PlayerDescription } from './socketDataTypes'
 import { Position } from './types'
 
@@ -22,54 +25,90 @@ export default function setupSocketEvents(socket: SocketIOClient.Socket, game: G
         socket.emit('get-other-players')
     })
 
-    socket.on('players-info', function (playersData: PlayerDescription[]) {
-        for (let playerData of playersData) {
-            game.addOtherPlayer(new OtherPlayer(playerData.id, playerData.name, playerData.position, playerData.color, new Map<number, boolean>(), playerData.health))
-        }
-    })
-
     socket.on('new-player-joined', function (playerData: PlayerDescription) {
         if (game.getPlayer().id !== playerData.id) {
-            game.addOtherPlayer(new OtherPlayer(playerData.id, playerData.name, playerData.position, playerData.color, new Map<number, boolean>(), playerData.health))
+            let oPlayer = game.otherPlayers.getPlayer(playerData.id)
+            if (oPlayer) {
+                oPlayer.name = playerData.name
+                oPlayer.position = playerData.position
+                oPlayer.color = playerData.color
+                oPlayer.health = playerData.health
+                oPlayer.damage = playerData.damage
+                oPlayer.defence = playerData.defence
+            } else {
+                game.otherPlayers.addPlayer(playerData.id, new Player(playerData.id, playerData.name, playerData.position, playerData.color, playerData.keysPressed, playerData.health, playerData.damage, playerData.defence))
+            }
         }
     })
 
     socket.on('player-moved', function (movedPlayerData: {id: string, position: Position}) {
-        for (let playerData of game.getOtherPlayers()) {
+        let otherPlayer = game.otherPlayers.getPlayer(movedPlayerData.id)
-            if (movedPlayerData.id === playerData.id) {
+        if (otherPlayer) {
-                playerData.position = movedPlayerData.position;
+            otherPlayer.position = movedPlayerData.position
-            }
         }
         if (game.getPlayer().id === movedPlayerData.id) {
             game.getPlayer().position = movedPlayerData.position
         }
     })
+
     socket.on('player-disconnected', function (disconnectedPlayer: string) {
-        game.removeOtherPlayer(disconnectedPlayer)
+        game.otherPlayers.removePlayer(disconnectedPlayer)
+    })
+
+    socket.on('key-action', (data: {id: string, key: number, isDown: boolean}) => {
+        let player = game.otherPlayers.getPlayer(data.id)
+        if (player) {
+            player.keysPressed.set(data.key, data.isDown)
+        }
+    })
+
+    socket.on('hit-player', (data: {id: string, health: number}) => {
+        let player = game.otherPlayers.getPlayer(data.id)
+        if (player) {
+            player.health = data.health
+        }
+        if (game.getPlayer().id === data.id) {
+            game.getPlayer().health = data.health
+        }
     })
 
     socket.on('shoot', (data: BulletData) => {
-        let otherPlayer = game.getOtherPlayer(data.id)
+        let otherPlayer = game.otherPlayers.getPlayer(data.id)
         if (otherPlayer) {
             otherPlayer.addBullet(new Bullet(otherPlayer, data.direction))
         }
     })
 
-    socket.on('ded', (data: BulletData) => {
+    socket.on('disconnect', () => {
         window.location.href = '/ded';
     })
 
-    socket.on('health-update', (data: {id: string, health: number}) => {
+    socket.on('ded', () => {
-        let otherPlayer = game.getOtherPlayer(data.id)
+        window.location.href = '/ded';
-        if (otherPlayer) {
+    })
-            otherPlayer.health = data.health
+
-        }
+    socket.on('new-item', (data: {id: string, position: Position, item: {image: 'healthPack', type: "HEAL"}}) => {
-        if (game.getPlayer().socket.id === data.id) {
+        let image = game.getImages().get(data.item.image)
-            game.getPlayer().health = data.health
+        if (image) {
-            if (data.health <= 0) {
+            game.addItem(new Pickable(data.id, data.position, new Item(image, data.item.type)))
-                game.getPlayer().socket.disconnect()
-                window.location.href = '/ded';
-            }
         }
     })
+
+    socket.on('item-picked', (data: {id: string}) => {
+        game.removeItemById(data.id)
+    })
+    
+    // socket.on('health-update', (data: {id: string, health: number}) => {
+    //     let otherPlayer = game.getOtherPlayer(data.id)
+    //     if (otherPlayer) {
+    //         otherPlayer.health = data.health
+    //     }
+    //     if (game.getPlayer().socket.id === data.id) {
+    //         game.getPlayer().health = data.health
+    //         if (data.health <= 0) {
+    //             game.getPlayer().socket.disconnect()
+    //             window.location.href = '/ded';
+    //         }
+    //     }
+    // })
 }

client/src/socketDataTypes.ts

@@ -9,6 +9,9 @@ export type PlayerDescription = {
     },
     id: string,
     health: number,
+    damage: number,
+    defence: number,
+    keysPressed: Map<number, boolean>
 }
 
 export type BulletData = {

server/package.json

@@ -21,12 +21,14 @@
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "p5": "^1.2.0",
-    "socket.io": "^3.1.0"
+    "socket.io": "^3.1.0",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@types/express": "^4.17.11",
-    "@types/socket.io": "^2.1.13",
     "@types/p5": "^0.9.1",
+    "@types/socket.io": "^2.1.13",
+    "@types/uuid": "^8.3.0",
     "typescript": "^4.1.3"
   }
 }

server/src/Item.ts

@@ -0,0 +1,18 @@
+export default class Item {
+
+    constructor(
+        private _image: "healthPack",
+        private _type: "HEAL" | "DAMAGE" | "DEFENCE"
+    ) {
+
+    }
+
+    get image() {
+        return this._image
+    }
+
+    get type() {
+        return this._type
+    }
+
+}

server/src/Pickable.ts

@@ -0,0 +1,27 @@
+import Item from "./Item";
+import { Position } from "./types";
+
+export default class Pickable {
+
+    constructor(
+        private _id: string,
+        private _position: Position,
+        private _item: Item,
+    ) {
+
+    }
+
+    get id() {
+        return this._id
+    }
+
+    get position() {
+        return this._position
+    }
+
+    get item() {
+        return this._item
+    }
+
+
+}

server/src/Player.ts

@@ -11,13 +11,6 @@ export default class Player {
     private defence: number
     private keysPressed: Map<number, boolean>
 
-    private KEY_W = 87
-    private KEY_A = 65
-    private KEY_S = 83
-    private KEY_D = 68
-
-    private MOVEMENT_SPEED = 1
-
     constructor(private _socket: socketIO.Socket) {
         this.name = 'Player#' + Math.floor(Math.random() * 10000)
         this.position = {
@@ -27,7 +20,7 @@ export default class Player {
         this.color = '#' + (Math.floor(Math.random() * 256)).toString(16) + (Math.floor(Math.random() * 256)).toString(16) + (Math.floor(Math.random() * 256)).toString(16)
         this.health = Math.floor(Math.random() * 50) + 50
         this.damage = 10
-        this.defence = 10
+        this.defence = 0
         this.keysPressed = new Map<number, boolean>()
     }
 
@@ -77,7 +70,10 @@ export default class Player {
             color: this.color,
             position: this.position,
             id: this.socket.id,
-            health: this.health
+            health: this.health,
+            damage: this.damage,
+            defence: this.defence,
+            keysPressed: this.keysPressed
         }
     }
 
@@ -97,22 +93,4 @@ export default class Player {
         }
     }
 
-    move(delta: number) {
-        if (this.keysPressed.get(this.KEY_A)) {
-            this.position.x -= this.MOVEMENT_SPEED * delta
-        }
-        
-        if (this.keysPressed.get(this.KEY_D)) {
-            this.position.x += this.MOVEMENT_SPEED * delta
-        }
-        
-        if (this.keysPressed.get(this.KEY_W)) {
-            this.position.y -= this.MOVEMENT_SPEED * delta
-        }
-        
-        if (this.keysPressed.get(this.KEY_S)) {
-            this.position.y += this.MOVEMENT_SPEED * delta
-        }
-    }
-
 }

server/src/PlayerList.ts

@@ -0,0 +1,28 @@
+import Player from "./Player";
+
+export default class PlayerList {
+
+    private players: Map<string, Player>
+
+    constructor() {
+        this.players = new Map<string, Player>()
+    }
+
+    getPlayer(id: string) {
+        return this.players.get(id)
+    }
+
+    getPlayers() {
+        return this.players
+    }
+
+    addPlayer(id: string, player: Player) {
+        if (this.players.has(id)) return
+        this.players.set(id, player)
+    }
+
+    removePlayer(id: string) {
+        this.players.delete(id)
+    }
+
+}

server/src/app.ts

@@ -5,12 +5,19 @@ import cors from 'cors'
 import path from 'path'
 import Players from './Players'
 import Player from './Player'
+import PlayerList from './PlayerList'
+import { Position } from './types'
+import Pickable from './Pickable'
+import Item from './Item'
+import * as uuid from 'uuid'
 
 const app = express()
 const server = new http.Server(app)
 const io = new socketIO.Server(server)
 
 const players = new Players()
+const items: Pickable[] = []
+const playerList = new PlayerList()
 
 app.use(cors())
 
@@ -41,114 +48,171 @@ io.on('connection', function(socket: socketIO.Socket) {
     socket.on('greetings', (data: {name: string}) => {
         let player = new Player(socket)
         player.setName(data.name)
-        players.addPlayer(socket.id, player)
+        playerList.addPlayer(socket.id, player)
 
         socket.emit('your-info', player.getPlayerDescription())
         io.emit('new-player-joined', player.getPlayerDescription())
     })
 
     socket.on('get-other-players', () => {
-        let otherPlayers = []
+        playerList.getPlayers().forEach((player) => {
-        for (let p of players.getPlayers()) {
+            io.emit('new-player-joined', player.getPlayerDescription())
-            if (socket.id !== p.getPlayerDescription().id) {
+        })
-                otherPlayers.push(p.getPlayerDescription())
+
-            }
+        for (let item of items) {
+            io.emit('new-item', {id: item.id, position: item.position, item: {image: item.item.image, type: item.item.type}})
         }
-        socket.emit('players-info', otherPlayers)
     })
 
-    // socket.on('i-moved', (position: {x: number, y: number}) => {
-    //     players.updatePlayerPosition(socket.id, {x: position.x, y: position.y})
-    //     io.emit('player-moved', {id: socket.id, position: position})
-    // })
-
     socket.on('disconnect', () => {
-        console.log(socket.id, 'disconnected')
+        console.log(socket.id, 'disconnected', (playerList.getPlayers().size - 1))
-        players.removePlayer(socket.id)
+        playerList.removePlayer(socket.id)
         io.emit('player-disconnected', socket.id)
     })
 
-    socket.on('shoot', (data: {position: {x: number, y: number}, direction: {x: number, y: number}}) => {
-        io.emit('shoot', {id: socket.id, position: data.position, direction: data.direction})
-    })
-
-    socket.on('hit-player', (data: {player: string, damage: number}) => {
-        let hpLeft = players.takeDamage(data.player, data.damage)
-        io.emit('health-update', {id: data.player, health: hpLeft})
-    })
-
-
-
-
-
-
-
-
-
-
-
-
-
-    // ITEM ACTIONS //
-
-    socket.on('item-heal', () => {
-        let p = players.getPlayer(socket.id)
-        if (p) {
-            p.player.setHealth(100)
-            io.emit('health-update', {id: p.player.socket.id, health: p.player.getHealth()})
-        }
-    })
-
-    socket.on('item-defence', () => {
-        let p = players.getPlayer(socket.id)
-        if (p) {
-            p.player.setDefence(p.player.getDefence() + 5)
-        }
-    })
-
-    socket.on('item-damage', () => {
-        let p = players.getPlayer(socket.id)
-        if (p) {
-            p.player.setDamage(p.player.getDamage() + 5)
-        }
-    })
-
     socket.on('key-action', (data: {key: number, isDown: boolean}) => {
-        let p = players.getPlayer(socket.id)
+        socket.broadcast.emit('key-action', {id: socket.id, key: data.key, isDown: data.isDown})
-        if (p) {
-            p.player.keyAction(data.key, data.isDown)
-        }
     })
 
+    socket.on('player-moved', (data: {position: Position}) => {
+        let player = playerList.getPlayer(socket.id)
+        if (player) {
+            player.setPosition(data.position.x, data.position.y)
+        }
+        socket.broadcast.emit('player-moved', {id: socket.id, position: data.position})
+    })
+
+    socket.on('hit-player', (data: {id: string, health: number}) => {
+        let player = playerList.getPlayer(data.id)
+        if (player) {
+            if (data.health <= 0) {
+                player.socket.disconnect()
+                return
+            }
+            player.setHealth(data.health)
+        }
+        socket.broadcast.emit('hit-player', {id: data.id, health: data.health})
+    })
+
+    socket.on('shoot', (data: {id: string, position: Position, direction: Position}) => {
+        socket.broadcast.emit('shoot', {id: socket.id, position: data.position, direction: data.direction})
+    })
+
+    socket.on('item-picked', (data: {id: string}) => {
+        socket.broadcast.emit('item-picked', {id: data.id})
+    })
+
+
+
+
+    // socket.on('shoot', (data: {position: {x: number, y: number}, direction: {x: number, y: number}}) => {
+    //     console.log(socket.id, 'shoot')
+    //     io.emit('shoot', {id: socket.id, position: data.position, direction: data.direction})
+    // })
+
+    // socket.on('hit-player', (data: {player: string, damage: number}) => {
+    //     console.log(socket.id, 'hit-player')
+    //     let hpLeft = players.takeDamage(data.player, data.damage)
+    //     io.emit('health-update', {id: data.player, health: hpLeft})
+    // })
+
+
+
+
+
+
+
+
+
+
+
+
+
+    // // ITEM ACTIONS //
+
+    // socket.on('item-heal', () => {
+    //     console.log(socket.id, 'item-heal')
+    //     let p = players.getPlayer(socket.id)
+    //     if (p) {
+    //         p.player.setHealth(100)
+    //         io.emit('health-update', {id: p.player.socket.id, health: p.player.getHealth()})
+    //     }
+    // })
+
+    // socket.on('item-defence', () => {
+    //     console.log(socket.id, 'item-defence')
+    //     let p = players.getPlayer(socket.id)
+    //     if (p) {
+    //         p.player.setDefence(p.player.getDefence() + 5)
+    //     }
+    // })
+
+    // socket.on('item-damage', () => {
+    //     console.log(socket.id, 'item-damage')
+    //     let p = players.getPlayer(socket.id)
+    //     if (p) {
+    //         p.player.setDamage(p.player.getDamage() + 5)
+    //     }
+    // })
+
+    // socket.on('key-action', (data: {key: number, isDown: boolean}) => {
+    //     console.log(socket.id, 'key-action')
+    //     let p = playerList.getPlayer(socket.id)
+    //     if (p) {
+    //         p.keyAction(data.key, data.isDown)
+    //     }
+    // })
+
 });
 
-let time = Date.now()
-
-const getDeltaTime = () => {
-    let t = Date.now()
-    let dt = t - time
-    time = t
-    return dt
-}
-
 setInterval(() => {
-    // game tick
-    let delta = getDeltaTime()
 
-    for (let player of players.getPlayers()) {
+    const minx = -1600
-
+    const maxx = 1500
-        if (player.getHealth() <= 0) {
+    const miny = -2000
-            player.socket.disconnect()
+    const maxy = 1900
-        }
-
-        // player movement
-        let previosPosition = player.getPosition()
-        player.move(delta)
-        if (previosPosition.x !== player.getPosition().x || previosPosition.y !== player.getPosition().y) {
-            io.emit('player-moved', {id: player.socket.id, position: player.getPosition()})
-        }
-        // endof: player movement
 
+    if (items.length < 20) {
+        let item = new Item('healthPack', "HEAL")
+        let pickable = new Pickable(
+            uuid.v4(),    
+            {
+                x: Math.floor(Math.random() * (Math.abs(minx) + maxx) + minx),
+                y: Math.floor(Math.random() * (Math.abs(miny) + maxy) + miny),
+            },
+            item
+        )
+        items.push(pickable)
+        io.emit('new-item', {id: pickable.id, position: pickable.position, item: {image: pickable.item.image, type: pickable.item.type}})
     }
+}, 15000)
 
-}, 1000/60)
+// let time = Date.now()
+
+// const getDeltaTime = () => {
+//     let t = Date.now()
+//     let dt = t - time
+//     time = t
+//     return dt
+// }
+
+// setInterval(() => {
+//     // game tick
+//     let delta = getDeltaTime()
+
+//     playerList.getPlayers().forEach((player) => {
+//         if (player.getHealth() <= 0) {
+//             player.socket.disconnect()
+//         }
+
+//         // player movement
+//         let previosPosition = player.getPosition()
+//         player.move(delta)
+//         if (previosPosition.x !== player.getPosition().x || previosPosition.y !== player.getPosition().y) {
+//             io.emit('player-moved', {id: player.socket.id, position: player.getPosition()})
+//         }
+//         // endof: player movement
+
+//     })
+
+// }, 1000/60)