fixed blips

client/html/app.js

@@ -0,0 +1,45 @@
+class Component {
+  constructor({ id }) {
+    this.$el = document.getElementById(id)
+  }
+}
+
+class DateComponent extends Component {
+  constructor(id) {
+    super(id)
+    this.renderDate()
+  }
+
+  renderDate() {
+    setInterval(() => {
+      const date = new Date()
+      this.$el.textContent = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
+    })
+  }
+}
+
+class EngineHealthComponent extends Component {
+  constructor(id) {
+    super(id)
+  }
+
+  renderEngineHealth(engineHealth) {
+    this.$el.textContent = `engine health: ${engineHealth}`
+  }
+
+  clearDisplay() {
+    this.$el.textContent = ``
+  }
+}
+
+
+const dateComponent = new DateComponent({ id: 'date' })
+const engineHealthComponent = new EngineHealthComponent({ id: 'engineHealth' })
+
+if ('alt' in window) {
+  alt.on('display:engineHealth', engineHealth => engineHealthComponent.renderEngineHealth(engineHealth))
+  alt.on('displayClear:engineHealth', () => engineHealthComponent.clearDisplay())
+  alt.emit('ready')
+} else {
+  engineHealthComponent.$el.textContent = `engine health: 0`
+}

client/html/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./style.css">
+  <title>Document</title>
+</head>
+<body>
+  <div class="container">
+    <div class="container-header">
+      <div class="container-header__title">
+        <p><svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" enable-background="new 0 0 504.503 504.503" height="32" viewBox="0 0 504.503 504.503" width="32"><g><g><path d="m419.091 393.453h-333.679v-180.856c0-91.753 74.38-166.133 166.133-166.133h1.412c91.753 0 166.133 74.38 166.133 166.133v180.856z" fill="#ff5e57"/><path d="m252.958 46.463h-1.412c-4.816 0-9.582.217-14.294.619 85.059 7.25 151.839 78.578 151.839 165.515v180.856h30v-180.857c0-91.752-74.38-166.133-166.133-166.133z" fill="#f7372f"/><path d="m201.412 393.453v-163.259c0-27.685 22.523-50.208 50.208-50.208h1.263c27.685 0 50.208 22.523 50.208 50.208v163.259z" fill="#de2a2e"/><path d="m252.883 179.986h-1.263c-4.993 0-9.813.743-14.368 2.106 20.704 6.196 35.84 25.41 35.84 48.102v163.259h30v-163.259c-.001-27.685-22.524-50.208-50.209-50.208z" fill="#cf1d21"/></g><g><path d="m476.017 504.503h-447.53c-9.196 0-15.374-9.417-11.698-17.832l41.87-95.868c4.6-10.533 15.07-17.35 26.646-17.35h333.895c11.576 0 22.046 6.817 26.646 17.35l41.87 95.868c3.674 8.416-2.503 17.832-11.699 17.832z" fill="#c2d8ed"/><path d="m487.715 486.671-41.87-95.868c-4.6-10.533-15.07-17.35-26.646-17.35h-30c11.576 0 22.046 6.818 26.646 17.35l41.87 95.868c3.675 8.416-2.502 17.832-11.698 17.832h30c9.196 0 15.373-9.416 11.698-17.832z" fill="#b4cae0"/><g><path d="m367.764 219.394c-4.142 0-7.5-3.357-7.5-7.5 0-59.021-48.454-107.037-108.013-107.037-4.142 0-7.5-3.357-7.5-7.5s3.358-7.5 7.5-7.5c67.83 0 123.013 54.746 123.013 122.037 0 4.143-3.358 7.5-7.5 7.5z" fill="#fff"/></g></g><g fill="#ffeebd"><path d="m32.109 11.672c-2.932-2.927-7.681-2.922-10.606.009-2.927 2.932-2.923 7.68.009 10.606l61.174 61.073c1.464 1.462 3.381 2.192 5.299 2.192 1.921 0 3.843-.734 5.308-2.201 2.927-2.932 2.923-7.68-.009-10.606z"/><path d="m107.662 4.866c-1.457-3.877-5.784-5.844-9.658-4.383-3.878 1.456-5.84 5.78-4.384 9.658l15.821 42.118c1.13 3.009 3.987 4.864 7.022 4.864.876 0 1.768-.154 2.636-.48 3.878-1.457 5.84-5.781 4.384-9.659z"/><path d="m66.846 103.13-44.299-16.321c-3.888-1.436-8.198.559-9.63 4.444-1.432 3.887.558 8.198 4.445 9.63l44.299 16.321c.855.315 1.731.465 2.592.465 3.053 0 5.921-1.878 7.039-4.909 1.431-3.887-.559-8.198-4.446-9.63z"/><path d="m483.001 11.681c-2.927-2.933-7.676-2.936-10.606-.009l-61.175 61.073c-2.932 2.927-2.936 7.675-.009 10.606 1.465 1.468 3.386 2.201 5.308 2.201 1.917 0 3.835-.73 5.299-2.192l61.175-61.072c2.931-2.927 2.935-7.675.008-10.607z"/><path d="m406.499.483c-3.875-1.458-8.201.505-9.658 4.383l-15.821 42.118c-1.457 3.878.506 8.202 4.384 9.659.869.326 1.76.48 2.636.48 3.035 0 5.892-1.855 7.022-4.864l15.821-42.118c1.457-3.878-.506-8.202-4.384-9.658z"/><path d="m491.587 91.253c-1.433-3.888-5.743-5.88-9.63-4.444l-44.299 16.321c-3.887 1.432-5.877 5.743-4.445 9.63 1.117 3.032 3.985 4.909 7.039 4.909.861 0 1.737-.149 2.592-.465l44.299-16.321c3.886-1.431 5.876-5.743 4.444-9.63z"/></g></g></svg>
+          <span style="color: #5555ff;">Copchase</span>&nbsp;<span style="color: #f14e4e">server</span></p>
+      </div>
+      <div class="container-header__date">
+        <div id="date">
+          <span></span>
+        </div>
+      </div>
+    </div>
+    <div class="container-footer">
+      <div id="engineHealth">
+        <p></p>
+      </div>
+    </div>
+  </div>
+  <script src="./app.js"></script>
+</body>
+</html>

client/html/style.css

@@ -0,0 +1,54 @@
+@font-face {
+  font-family: "Pricedown";
+  src: url("./Pricedown.ttf") format("truetype");
+}
+
+* {
+  box-sizing: border-box;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;  
+}
+
+ h1, h2, h3, h4, h5, h6, p {
+   padding: 0;
+   margin: 0;
+ }
+
+.container {
+  padding: 25px;
+  color: #fff;
+  font-family: 'Pricedown';
+}
+.container .container-header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.container .container-header .container-header__title {
+  font-size: 38px;
+}
+
+.container .container-header .container-header__title p {
+  display: flex;
+  -webkit-text-stroke-width: 1.6px;
+  -webkit-text-stroke-color: black;
+}
+
+.container .container-header .container-header__title svg {
+  align-items: center;
+  margin-right: 15px;
+  width: 32px;
+}
+
+.container .container-header .container-header__date {
+  font-size: 18px;
+  font-family: 'Open Sans';
+  margin-top: 5px;
+  color: #fff;
+}
+
+.container-footer #engineHealth {
+  color: #fff;
+  font-size: 28px;
+}

client/index.mjs

@@ -6,6 +6,8 @@ import './ui.mjs'
 
 import './modules/blips.mjs'
 
+const webview = new alt.WebView('http://resource/client/html/index.html')
+
 alt.setMsPerGameMinute(30000)
 
 alt.onServer('player:death', () => {
@@ -32,11 +34,20 @@ alt.onServer('player:delInvincible', () => {
 })
 
 alt.onServer('vehicle:setInto', (newVehicle) => {
-  const localPlayer = alt.Player.local.scriptID
-
-  alt.setTimeout(() => {
-    native.setPedIntoVehicle(localPlayer, newVehicle.scriptID, -1)
-  }, 400)
+  let cleared = false;
+    const interval = alt.setInterval(() => {
+        const vehicleScriptId = newVehicle.scriptID;
+        if (vehicleScriptId) {
+            native.setPedIntoVehicle(alt.Player.local.scriptID, vehicleScriptId, -1);
+            alt.clearInterval(interval);
+            cleared = true;
+        }
+    }, 10);
+    alt.setTimeout(() => {
+        if (!cleared) {
+            alt.clearInterval(interval);
+        }
+    }, 500);
 })
 
 alt.onServer('admin:setStat', () => {
@@ -46,3 +57,10 @@ alt.onServer('admin:setStat', () => {
 alt.onServer('admin:setInvincible', toggle => {
   native.setEntityInvincible(alt.Player.local.scriptID, toggle)
 })
+
+
+alt.onServer('webview:load', () => {
+  webview.on('ready', () => {
+    
+  })
+})

client/modules/blips.mjs

@@ -1,37 +1,43 @@
 import * as alt from 'alt'
 
-const blips = {}
-
 alt.everyTick(() => {
   alt.Player.all.forEach(_player => {
-    if (blips[_player.id]) {
-      blips[_player.id].pos = _player.pos
+    if (!_player.valid) {
+      return
+    }
+
+    if (_player.blip && _player.blip !== null) {
+      _player.blip.pos = _player.getSyncedMeta('pos')
     }
   })
 })
 
 alt.onServer('player:createBlipPlayers', ({ players, color }) => {
   players.forEach(_player => {
-    if (_player.name !== alt.Player.local.name) {
-      blips[_player.id] = new alt.PointBlip(_player.pos.x, _player.pos.y, _player.pos.z)
-      blips[_player.id].name = _player.name
-      blips[_player.id].color = color
+    if (_player.id === alt.Player.local.id) {
+      return
     }
+
+    _player.blip = new alt.PointBlip(_player.pos.x, _player.pos.y, _player.pos.z)
+    _player.blip.name = _player.name
+    _player.blip.color = color
+    _player.blip.shortRange = false;
+    _player.blip.owner = _player;
   })
 })
 
 alt.onServer('player:deleteBlipPlayers', () => {
   alt.Player.all.forEach(_player => {
-    if (blips[_player.id]) {
-      blips[_player.id].destroy()
-      blips[_player.id] = null
+    if (_player.blip) {
+      _player.blip.destroy()
+      _player.blip = null
     }
   })
 })
 
 alt.onServer('player:deleteBlipPlayer', player => {
-  if (blips[player.id]) {
-    blips[player.id].destroy()
-    blips[player.id] = null
+  if (player.blip) {
+    player.blip.destroy()
+    player.blip = null
   }
 })

server/modules/copchase.mjs

@@ -34,7 +34,6 @@ class Copchase {
       'vamos',
       'chino',
       'moonbeam',
-      'elegy2',
       'dubsta',
       'dominator',
       'rebla',
@@ -74,14 +73,14 @@ class Copchase {
     this.suspect = null
     this.positions = {
       suspect: [
-        { x: 395.185, y: -999.645, z: 28.755 },
-        { x: 404.691, y: -1907.0604, z: 24.723 },
-        { x: 2619.436, y: 3374.145, z: 55.619 }
+        { x: 387.006, y: -766.760, z: 28.723 },
+        { x: 442.483, y: -1507.068, z: 28.605 },
+        { x: 1924.773, y: 3819.125, z: 31.588 }
       ],
       police: [
         { x: 442.308, y: -1025.066, z: 28.231 },
-        { x: 348.865, y: -1966.507, z: 24.133 },
-        { x: 2681.454, y: 3457.637, z: 55.228 }
+        { x: 396.105, y: -1643.973, z: 28.757 },
+        { x: 1847.670, y: 3671.854, z: 33.172 }
       ]
     }
   }
@@ -99,7 +98,7 @@ class Copchase {
   }
 
   isPlayerInGame(player) {
-    if(this.players.find(_player => _player.name === player.name) !== undefined) {
+    if(this.players.find(_player => _player.id === player.id) !== undefined) {
       send(player, '{EE9A00}[COPCHASE]: {FF0000}Дождитесь окончания игры!')
       return true
     } else {
@@ -108,7 +107,7 @@ class Copchase {
   }
 
   isPlayerInWaitingRoom(player) {
-    if(this.waitingPlayers.find(_player => _player.name === player.name) !== undefined) {
+    if(this.waitingPlayers.find(_player => _player.id === player.id) !== undefined) {
       return true
     } else {
       return false
@@ -125,7 +124,7 @@ class Copchase {
   }
 
   selectSuspect() {
-    this.suspect = this.players[Math.floor(Math.random() * (this.players.length - 1 - 0 + 1) + 0)]
+    this.suspect = this.players[Math.floor(Math.random() * this.players.length)]
   }
 
   messageToPlayersInGame(message) {
@@ -143,7 +142,7 @@ class Copchase {
   }
 
   notifyPolicePlayers(message) {
-    this.players.forEach(_player => _player.name !== this.suspect.name ? alt.emitClient(_player, 'player:notify', message) : false)
+    this.players.forEach(_player => _player.id !== this.suspect.id ? alt.emitClient(_player, 'player:notify', message) : false)
   }
 
   notifySuspectPlayer(message) {
@@ -157,17 +156,13 @@ class Copchase {
 
     return new Promise((resolve, reject) => {
       this.players.forEach(_player => {
-        if (_player.name === this.suspect.name) {
+        if (_player.id === this.suspect.id) {
           _player.pos = suspectPosition
           setTimeout(() => _player.health = 200, 300)
           _player.dimension = this.dimension
           _player.model = skins[Math.floor(Math.random() * (430 - 1 - 422) + 422)]
           alt.emitClient(_player, 'player:delInvincible')
           alt.emitClient(_player, 'player:showMidsizedMessage', '~r~Вы саспект!', 'Уйдите от полицейских.', 5000)
-          this.players.forEach(_player => _player.name === this.suspect.name 
-            ? alt.emitClient(_player, 'player:createBlipPlayers', { players: this.players, color: 38 })  
-            : alt.emitClient(_player, 'player:createBlipPlayers', { players: this.players, color: 1 })
-          )
         } else {
           posX = posX + 3  
           _player.pos = {
@@ -182,6 +177,14 @@ class Copchase {
           _player.giveWeapon('0x3656C8C1', 100, true)
           alt.emitClient(_player, 'player:delInvincible')
           alt.emitClient(_player, 'player:showMidsizedMessage', `~w~Саспект: ~r~${this.suspect.name}`, 'Нейтрализуйте саспекта.', 5000)
+          alt.emitClient(_player, 'player:createBlipPlayers', { 
+            players: this.players.filter(player => player.id !== this.suspect.id), 
+            color: 38 
+          }) // create friendly blips
+          alt.emitClient(_player, 'player:createBlipPlayers', { 
+            players: this.players.filter(player => player.id === this.suspect.id), 
+            color: 1 
+          }) // create suspec blip
         }
       })
 
@@ -191,7 +194,7 @@ class Copchase {
 
   spawnCars() {
     this.players.forEach(_player => {
-      if (_player.name === this.suspect.name) {
+      if (_player.id === this.suspect.id) {
         const carSuspect = new alt.Vehicle(
           this.suspectCars[Math.floor(Math.random() * (this.suspectCars.length - 1 - 0) + 0)], 
           _player.pos.x, _player.pos.y, _player.pos.z, 
@@ -288,7 +291,7 @@ class Copchase {
   
     if (winner === 'police') {
       this.players.forEach(_player => {
-        if (_player.name !== this.suspect.name) {
+        if (_player.id !== this.suspect.id) {
           alt.emitClient(_player, 'player:showMidsizedMessage', '~g~Вы выиграли', 'Саспект был нейтрализован.')
         }
       })
@@ -297,7 +300,7 @@ class Copchase {
 
     if (winner === 'suspect') {
       this.players.forEach(_player => {
-        if (_player.name === this.suspect.name) {
+        if (_player.id === this.suspect.id) {
           alt.emitClient(_player, 'player:showMidsizedMessage', '~g~Вы выиграли', 'Вы успешно ушли от полиции.')
         } else {
           alt.emitClient(_player, 'player:showMidsizedMessage', '~r~Вы проиграли', 'Саспект скрылся.')
@@ -317,7 +320,7 @@ const copchase = new Copchase({
   maxPlayers: 11,
   minPlayers: 2, 
   timeRemaining: 10, 
-  timeToStart: 4
+  timeToStart: 5
 })
 
 export {

server/modules/events/playerConnect.mjs

@@ -14,6 +14,18 @@ alt.on('playerConnect', (player) => {
   player.spawn(config.spawn.x, config.spawn.y,config.spawn.z)
   player.dimension = 0
 
+  alt.emitClient(player, 'webview:load')
   alt.emitClient(player, 'player:setInvincible')
   alt.emitClient(player, 'player:notify', '~g~Добро пожаловать на сервер!')
 })
+
+// sync
+alt.setInterval(() => {
+  alt.Player.all.forEach(_player => {
+    if (!_player.valid) {
+      return
+    }
+  
+    _player.setSyncedMeta('pos', _player.pos)
+  })
+}, 100)

server/modules/events/playerDeath.mjs

@@ -11,9 +11,9 @@ alt.on('playerDeath', (player) => {
   })
   
   if (copchase.isStarted) {
-    if (player.name === copchase.suspect.name) copchase.stopGame({ winner: 'police' })
+    if (player.id === copchase.suspect.id) copchase.stopGame({ winner: 'police' })
   
-    const policemanIndex = copchase.players.findIndex(_player => _player.name === player.name && _player.name !== copchase.suspect.name)
+    const policemanIndex = copchase.players.findIndex(_player => _player.id === player.id && _player.id !== copchase.suspect.id)
     if (policemanIndex !== -1) copchase.players.splice(policemanIndex, 1)
     if (copchase.players.length <= 1 && copchase.suspect !== null) copchase.stopGame({ winner: 'suspect' })
   }
@@ -23,5 +23,6 @@ alt.on('playerDeath', (player) => {
     player.dimension = 0
     player.removeAllWeapons()
     alt.emitClient(player, 'player:setInvincible')
+    alt.emitClient(player, 'player:deleteBlipPlayers')
   }, 5000)
 })

server/modules/events/playerDisconnect.mjs

@@ -6,18 +6,18 @@ alt.on('playerDisconnect', (player) => {
   broadcast(`{EE9A00}[SERVER]: {1CD8FD}😭 ${player.name} {FFF}покинул нас`)
 
   if (copchase.isPlayerInWaitingRoom(player)) {
-    const disconnectedPlayerIndex = copchase.waitingPlayers.findIndex(_player => _player.name === player.name)
+    const disconnectedPlayerIndex = copchase.waitingPlayers.findIndex(_player => _player.id === player.id)
     copchase.waitingPlayers.splice(disconnectedPlayerIndex, 1)
   }
 
   if (copchase.isStarted) {
-    if (player.name === copchase.suspect.name) {
-      const suspectIndex = copchase.players.findIndex(_player => _player.name === copchase.suspect.name)
+    if (player.id === copchase.suspect.id) {
+      const suspectIndex = copchase.players.findIndex(_player => _player.id === copchase.suspect.id)
       copchase.players.splice(suspectIndex, 1)
       copchase.stopGame({ winner: 'police' })
     }
     
-    const policemanIndex = copchase.players.findIndex(_player => _player.name === player.name && _player.name !== copchase.suspect.name)
+    const policemanIndex = copchase.players.findIndex(_player => _player.id === player.id && _player.id !== copchase.suspect.id)
 
     if (policemanIndex !== -1) copchase.players.splice(policemanIndex, 1)
     if (copchase.players.length <= 1 && copchase.suspect !== null) copchase.stopGame({ winner: 'suspect' })

server/modules/events/playerLeftVehicle.mjs

@@ -2,11 +2,11 @@ import alt from 'alt-server'
 import { copchase } from '../copchase.mjs'
 
 alt.on('playerLeftVehicle', player => {
-  if (copchase.isStarted && player.name === copchase.suspect.name) {
+  if (copchase.isStarted && player.id === copchase.suspect.id) {
     player.giveWeapon('0x1B06D571', 25, true);
 
     copchase.players.forEach(_player => {
-      if (_player.name !== copchase.suspect.name) {
+      if (_player.id !== copchase.suspect.id) {
         _player.giveWeapon('0x1B06D571', 50, true);
       }
     })