Merge branch 'feature/onlinelist' into develop

ReallifeGamemode.Client/Gui/playerlist.ts

@@ -8,6 +8,8 @@ export default function playerList(globalData: IGlobalData): void {
 
     var playerlistBrowser: BrowserMp = null;
     var pList;
+    var factionPlayersMap: Map<number, number> = new Map<number, number>();
+    const factionIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
     mp.events.add("showPlayerlist", (playersJson) => {
 
@@ -20,18 +22,33 @@ export default function playerList(globalData: IGlobalData): void {
         }
         else if (!globalData.InMenu) {
             globalData.InMenu = true;
-            playerlistBrowser = mp.browsers.new('package://assets/html/Playerlist/Tabliste.html');
+            playerlistBrowser = mp.browsers.new('package://assets/html/onlinelist/index.html');
             mp.gui.chat.activate(false);
             mp.gui.cursor.show(true, true);
             pList = JSON.parse(playersJson);
-            pList.forEach((player) => {
+
-                playerlistBrowser.execute(`ad_row('${JSON.stringify(player.Id)}','${JSON.stringify(player.Name)}',${JSON.stringify(player.FactionName)},'${JSON.stringify(player.Ping)}');`);
+
-            });
         }
     });
 
-    mp.events.add("CEF:fetchPlayerList", () => {
+    mp.events.add("CEF:PlayerList_Loaded", () => {
+        factionIds.forEach(f => {
+            factionPlayersMap.set(f, 0);
+        });
 
+        pList.forEach((player) => {
+            var facId = player.FactionId;
+
+            playerlistBrowser.execute(`addPlayerEntry('${player.Id}','${player.Name}', '${facId}', '${player.FactionName}','${player.Ping}');`);
+
+            factionPlayersMap.set(facId, factionPlayersMap.get(facId) + 1);
+        });
+
+        factionPlayersMap.forEach((value, key) => {
+            playerlistBrowser.execute(`setPlayerCount(${key}, ${value});`)
+        });
+
+        playerlistBrowser.execute(`setPlayerCount(-1, ${pList.length});`);
     });
 }
 

ReallifeGamemode.Client/assets/css/onlinelist/style.css

@@ -0,0 +1,220 @@
+html {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  height: 100vh;
+  background: transparent;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+html, body {
+  margin: unset;
+}
+
+*, *:before, *:after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+}
+
+body {
+  margin: 10vh auto 0;
+  width: 32vw;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 1em;
+}
+
+h1, h2 {
+  margin: unset;
+  line-height: 1;
+}
+
+h1 {
+  font-size: 1.75em;
+}
+
+h2 {
+  font-size: 1.125em;
+}
+
+.heading {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  margin-bottom: 1.5em;
+  padding: 1em 1em 0;
+}
+
+.wrapper {
+  height: 80vh;
+  overflow-y: scroll;
+  border-radius: .25em;
+  background-color: rgba(0, 0, 0, 0.75);
+}
+
+.wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  border-radius: inherit;
+}
+
+table th {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  text-align: left;
+  z-index: 2;
+  background-color: black;
+}
+
+table th:first-child {
+  border-top-left-radius: .25em;
+}
+
+table th:last-child {
+  border-top-right-radius: .25em;
+}
+
+table th, table td {
+  padding: .75em .5em;
+}
+
+table th:first-child, table td:first-child {
+  padding-left: 1em;
+}
+
+table th:last-child, table td:last-child {
+  padding-right: 1em;
+}
+
+table tr td {
+  overflow: hidden;
+}
+
+table tr td:nth-child(1) {
+  width: 7ch !important;
+}
+
+table tr td:nth-child(2) {
+  max-width: 36ch;
+  font-weight: bold;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+table tr td:nth-child(2)::-webkit-scrollbar {
+  display: none;
+}
+
+table tr td:nth-child(3) {
+  width: 14ch !important;
+}
+
+table tr td:nth-child(4) {
+  width: 13ch !important;
+}
+
+table tr:nth-child(even) {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+.group::before {
+  content: "";
+  height: .65em;
+  width: .65em;
+  border-radius: 50%;
+  display: inline-block;
+  color: inherit;
+  border: 2px solid rgba(255, 255, 255, 0.125);
+  margin-right: .4em;
+  margin-bottom: 1px;
+}
+
+.group--0::before {
+  background-color: white;
+}
+
+.group--1::before {
+  background-color: #005fbe;
+}
+
+.group--2::before {
+  background-color: #c80000;
+}
+
+.group--3::before {
+  background-color: #0000aa;
+}
+
+.group--4::before {
+  background-color: #ffb400;
+}
+
+.group--5::before {
+  background-color: #ffb400;
+}
+
+.group--6::before {
+  background-color: white;
+}
+
+.group--7::before {
+  background-color: #004000;
+}
+
+.group--8::before {
+  background-color: #ab0096;
+}
+
+.group--9::before {
+  background-color: #00a685;
+}
+
+ol.inline {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  list-style: unset;
+  list-style-type: none;
+  margin: 0;
+  padding: unset;
+}
+
+ol.inline li:not(:last-child) {
+  margin-right: 1em;
+}
+
+ol.inline.stats {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+ol.inline.stats:first-of-type {
+  margin-top: 1em !important;
+}
+
+ol.inline.stats:last-of-type {
+  margin-bottom: 1em;
+}
+
+ol.inline.stats:not(:last-of-type) {
+  margin-bottom: .125em;
+}
+
+ol.inline.stats abbr {
+  text-decoration: none;
+}
+/*# sourceMappingURL=style.css.map */

ReallifeGamemode.Client/assets/css/onlinelist/style.css.map

@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "style.scss"
+    ],
+    "names": [],
+    "file": "style.css"
+}

ReallifeGamemode.Client/assets/css/onlinelist/style.scss

@@ -0,0 +1,137 @@
+html {
+  box-sizing: border-box;
+  height: 100vh;
+  background: transparent;
+  user-select: none;
+}
+
+html, body { margin: unset; }
+*, *:before, *:after { box-sizing: inherit; }
+
+body {
+  margin: 10vh auto 0;
+
+  width: 32vw;
+  color: white;
+
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 1em;
+}
+
+h1, h2 {
+  margin: unset;
+  line-height: 1;
+}
+
+h1 { font-size: 1.75em; }
+h2 { font-size: 1.125em; }
+
+.heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1.5em;
+  padding: 1em 1em 0;
+}
+
+.wrapper {
+  height: 80vh;
+  overflow-y: scroll;
+  
+  border-radius: .25em;
+  background-color: rgba(0, 0, 0, .75);
+
+  &::-webkit-scrollbar { display: none; }
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  border-radius: inherit;
+
+  th {
+    position: sticky;
+    top: 0;
+    text-align: left;
+    z-index: 2;
+
+    background-color: black;
+
+    &:first-child { border-top-left-radius: .25em; }
+    &:last-child { border-top-right-radius: .25em; }
+  }
+
+  th, td {
+    padding: .75em .5em;
+
+    &:first-child { padding-left: 1em; }
+    &:last-child { padding-right: 1em; }
+  }
+
+  tr {
+    td {
+      overflow: hidden;
+
+      &:nth-child(1) { width: 7ch !important; }
+      &:nth-child(2) {
+        max-width: 36ch;
+        font-weight: bold;
+        overflow-x: auto;
+        white-space: nowrap;
+        
+        &::-webkit-scrollbar { display: none; }
+      }
+      &:nth-child(3) { width: 14ch !important; }
+      &:nth-child(4) { width: 13ch !important; }
+    }
+
+    &:nth-child(even) { background-color: rgba(0, 0, 0, .25); }
+  }
+}
+
+.group {
+  &::before {
+    content: "";
+    height: .65em;
+    width: .65em;
+    border-radius: 50%;
+    display: inline-block;
+    color: inherit;
+    border: 2px solid rgba(255, 255, 255, 0.125);
+
+    margin-right: .4em;
+    margin-bottom: 1px;
+  }
+
+  &--0::before { background-color: rgb(255, 255, 255); }
+  &--1::before { background-color: rgb(0, 95, 190); }
+  &--2::before { background-color: rgb(200, 0, 0); }
+  &--3::before { background-color: rgb(0, 0, 170); }
+  &--4::before { background-color: rgb(255, 180, 0); }
+  &--5::before { background-color: rgb(255, 180, 0); }
+  &--6::before { background-color: rgb(255, 255, 255); }
+  &--7::before { background-color: rgb(0, 64, 0); }
+  &--8::before { background-color: rgb(171, 0, 150); }
+  &--9::before { background-color: rgb(0, 166, 133); }
+}
+
+ol.inline {
+  display: flex;
+
+  list-style: unset;
+  list-style-type: none;
+  margin: 0;
+  padding: unset;
+
+  li:not(:last-child) { margin-right: 1em; }
+}
+
+ol.inline.stats {
+  justify-content: center;
+  
+  &:first-of-type { margin-top: 1em !important; }
+  &:last-of-type { margin-bottom: 1em; }
+  &:not(:last-of-type) { margin-bottom: .125em; }
+
+  abbr { text-decoration: none; }
+}

ReallifeGamemode.Client/assets/html/onlinelist/index.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="de" class="colorblind-mode">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, target-densitydpi=device-dpi, user-scalable=no">
+    <title>Spielerliste</title>
+    <link rel="stylesheet" href="package://assets/css/onlinelist/style.css">
+  </head>
+  <body>
+    <div class="wrapper">
+      <div class="heading">
+        <h1>Spielerliste</h1>
+        <h2>Spieler: <span id="player-count">0</span></h2>
+      </div>
+
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Fraktion</th>
+            <th>Ping (ms)</th>
+          <tr>
+        </thead>
+
+        <tbody id="players">
+        </tbody>
+      </table>
+
+      <ol class="inline stats">
+        <li><abbr title="Los Santos Police Department" class="group group--1">LSPD</abbr>: <span id="1">0</span></li>
+        <li><abbr title="Federal Investigation Bureau" class="group group--3">FIB</abbr>: <span id="3">0</span></li>
+        <li><abbr title="Los Santos Emergency Department" class="group group--2">LSED</abbr>: <span id="2">0</span></li>
+      </ol>
+
+      <ol class="inline stats">
+        <li><abbr title="Grove Street Families" class="group group--7">GSF</abbr>: <span id="7">0</span></li>
+        <li><abbr title="Front Yard Ballas" class="group group--8">FYB</abbr>: <span id="8">0</span></li>
+        <li><abbr title="Los Santos Vagos" class="group group--5">LSV</abbr>: <span id="5">0</span></li>
+      </ol>
+
+      <ol class="inline stats">
+        <li><abbr title="Weazel News" class="group group--9">NR</abbr>: <span id="9">0</span></li>
+        <li><abbr title="Zivilisten" class="group group--0">Zivilisten</abbr>: <span id="0">0</span></li>
+      </ol>
+    </div>
+
+    <script src="../../js/jquery-3.3.1.min.js"></script>
+    <script src="package://assets/js/onlinelist/script.js"></script>
+  </body>
+</html>

ReallifeGamemode.Client/assets/js/onlinelist/script.js

@@ -0,0 +1,23 @@
+window.onbeforeunload = () => { window.scrollTo(0, 0); }
+
+$(document).ready(function () {
+    mp.trigger('CEF:PlayerList_Loaded');
+});
+
+setPlayerCount = (factionId, value) => {
+    if (factionId == -1) {
+        document.getElementById('player-count').innerHTML = value;
+    } else if (factionId >= 0 && factionId <= 9) {
+        document.getElementById(factionId).innerHTML = value;
+    }
+}
+
+function addPlayerEntry(userId, userName, factionId, factionName, userPing) {
+    document.getElementById('players').innerHTML += `<tr><td>${userId}</td> <td>${userName}</td> <td class="group group--${factionId}">${factionName}</td> <td>${userPing}</td></tr>`;
+}
+
+addPlayerEntries = (json) => {
+    JSON.parse(json).forEach(e => {
+
+    });
+}

ReallifeGamemode.Server/Events/Key.cs

@@ -686,12 +686,18 @@ namespace ReallifeGamemode.Server.Events
 
       List<Player> players = NAPI.Pools.GetAllPlayers().Where(p => p.IsLoggedIn() == true).OrderBy(o => o.Handle.Value).ToList();
 
-      var listPlayers = players.Select(p => new
+      var listPlayers = players.Select(p =>
+      {
+        User u = p.GetUser();
+
+        return new
         {
           Id = p.Handle.Value,
           p.Name,
           p.Ping,
-        FactionName = p.GetUser()?.Faction?.Name ?? "Zivilist",
+          FactionName = u?.Faction?.Name ?? "Zivilist",
+          FactionId = u?.FactionId ?? 0
+        };
       });
       player.TriggerEvent("showPlayerlist", JsonConvert.SerializeObject(listPlayers));
     }