feat(scoreboard): Scoreboard rewrite.

resources/[system]/scoreboard-basic-theme/fxmanifest.lua

@@ -0,0 +1,16 @@
+-- This resource is part of the default Cfx.re asset pack (cfx-server-data)
+-- Altering or recreating for local use only is strongly discouraged.
+
+fx_version 'cerulean'
+game 'gta5'
+
+version '1.0.0'
+author 'Cfx.re <root@cfx.re>'
+description 'A basic theme for the scoreboard resource.'
+repository 'https://github.com/citizenfx/cfx-server-data'
+
+file 'style.css'
+
+scoreboard_theme 'basic' {
+  styleSheet = 'style.css',
+}

resources/[system]/scoreboard-basic-theme/style.css

@@ -0,0 +1,68 @@
+.scoreboardWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+}
+
+.scoreboard {
+  background-color: #414a4d;
+  width: 1000px;
+  max-width: 100%;
+  height: 600px;
+  overflow: auto;
+  background-image: none;
+}
+.content-table {
+  border-collapse: separate;
+  width: 100%;
+  table-layout: fixed;
+  border: none;
+  margin: 0;
+  border-spacing: 0;
+}
+
+.content-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  background: rgba(35, 35, 35, 1);
+  border-bottom: 2px solid #fff;
+  text-align: left;
+  color: #fff;
+  font-weight: bold;
+}
+
+.content-table th,
+.content-table td {
+  padding: 12px 12px;
+  min-width: 50px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.content-table tbody tr {
+  color: #fff;
+  border-bottom: 1px solid #eeeeee;
+  background-color: rgba(31, 31, 31, 0.75);
+}
+
+.content-table tbody tr:nth-child(2n) {
+  color: #fff;
+  border-bottom: 1px solid #eeeeee;
+  background-color: rgba(31, 31, 31, 0.75);
+}
+
+.content-table tbody tr:hover {
+  background-color: rgba(31, 31, 31, 0.75);
+}
+
+::-webkit-scrollbar {
+  background: #414a4d;
+  width: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #232323;
+}

resources/[system]/scoreboard/.gitignore

@@ -0,0 +1,3 @@
+html
+node_modules
+.yarn.installed

resources/[system]/scoreboard/client.lua

@@ -0,0 +1,131 @@
+local isShowing = false
+local players = {}
+local lastUpdate = 0
+
+RegisterKeyMapping("+scoreboard", "Open the scoreboard.", "keyboard", "z")
+RegisterCommand("+scoreboard", function(source, args, rawcommand)
+  if not isShowing then
+    if GetGameTimer() >= lastUpdate + 3000 then
+      lastUpdate = GetGameTimer()
+      TriggerServerEvent("scoreboard:getPlayers")
+    end
+    sortedColumns = sortColumns(GlobalState.columns)
+    SendNUIMessage({
+      app = 'CfxScoreboard',
+      method = 'setColumns',
+      data = sortedColumns
+    })
+    SendNUIMessage({
+      app = 'CfxScoreboard',
+      method = 'setVisibility',
+      data = true
+    })
+    SetNuiFocus(true, true)
+    SetNuiFocusKeepInput(true)
+    SetCursorLocation(0.5, 0.5)
+    isShowing = true
+    Citizen.CreateThread(function()
+      while isShowing do
+        Citizen.Wait(0)
+        DisableControlAction(0, 1, true) -- INPUT_LOOK_LR - Prevent moving camera when moving mouse.
+        DisableControlAction(0, 2, true) -- INPUT_LOOK_UD - Prevent moving camera when moving mouse.
+        DisableControlAction(0, 16, true) -- INPUT_SELECT_NEXT_WEAPON - Prevent switching weapon when scrolling through list.
+        DisableControlAction(0, 17, true) -- INPUT_SELECT_PREV_WEAPON	 - Prevent switching weapon when scrolling through list.
+        if GetGameTimer() >= lastUpdate + 3000 then
+          TriggerServerEvent("scoreboard:getPlayers")
+          lastUpdate = GetGameTimer()
+        end
+      end
+    end)
+  end
+end, false)
+
+RegisterCommand("-scoreboard", function(source, args, rawcommand)
+  SendNUIMessage({
+    app = 'CfxScoreboard',
+    method = 'setVisibility',
+    data = false
+  })
+  SetNuiFocus(false, false)
+  SetNuiFocusKeepInput(false)
+  isShowing = false
+end, false)
+
+RegisterNetEvent("scoreboard:receivePlayers")
+AddEventHandler("scoreboard:receivePlayers", function(_players)
+  players = _players
+  local nuiData = {}
+  local sortedColumns = sortColumns(GlobalState.columns)
+  SendNUIMessage({
+    app = 'CfxScoreboard',
+    method = 'setColumns',
+    data = sortedColumns
+  })
+  for playerId, playerData in pairs(players) do
+    local nextId = #nuiData+1
+    nuiData[nextId] = {}
+    for id, columnData in pairs(sortedColumns) do
+      nuiData[nextId][id] = playerData[columnData.identifier]
+    end
+  end
+  -- send to NUI to populate players
+  SendNUIMessage({
+    app = 'CfxScoreboard',
+    method = 'setPlayers',
+    data = nuiData
+  })
+end)
+
+TriggerServerEvent("scoreboard:initialize")
+
+function sortColumns(unsortedTable)
+  table.sort(unsortedTable, function(a, b)
+    if not a or not b then return end
+    return a["position"] < b["position"]
+  end)
+  return unsortedTable
+end
+
+--[[
+The following is stolen from the chat resource to allow for themes.
+All credit for this goes to moscovium for writing the theme logic (03362d2).
+]]
+local function refreshThemes()
+  local themes = {}
+
+  for resIdx = 0, GetNumResources() - 1 do
+    local resource = GetResourceByFindIndex(resIdx)
+
+    if GetResourceState(resource) == 'started' then
+      local numThemes = GetNumResourceMetadata(resource, 'scoreboard_theme')
+
+      if numThemes > 0 then
+        local themeName = GetResourceMetadata(resource, 'scoreboard_theme')
+        local themeData = json.decode(GetResourceMetadata(resource, 'scoreboard_theme_extra') or 'null')
+
+        if themeName and themeData then
+          themeData.baseUrl = 'nui://' .. resource .. '/'
+          themes[themeName] = themeData
+        end
+      end
+    end
+  end
+
+  SendNUIMessage({
+    app = 'CfxScoreboard',
+    method = 'updateThemes',
+    data = themes
+  })
+end
+
+AddEventHandler('onClientResourceStart', function(resName)
+  Wait(500)
+
+  refreshThemes()
+end)
+
+AddEventHandler('onClientResourceStop', function(resName)
+  Wait(500)
+
+  refreshThemes()
+end)

resources/[system]/scoreboard/fxmanifest.lua

@@ -0,0 +1,31 @@
+-- This resource is part of the default Cfx.re asset pack (cfx-server-data)
+-- Altering or recreating for local use only is strongly discouraged.
+
+fx_version 'cerulean'
+game 'gta5'
+
+version '1.0.0'
+author 'Cfx.re <root@cfx.re>'
+description 'The scoreboard resource.'
+repository 'https://github.com/citizenfx/cfx-server-data'
+
+ui_page 'html/index.html'
+
+files {
+  'html/index.html',
+  'html/*.js',
+  'html/*.css',
+  'assets/*.png',
+  'assets/*.ttf'
+}
+
+client_script 'client.lua'
+
+server_script 'server.lua'
+
+dependencies {
+  'yarn',
+  'webpack'
+}
+
+webpack_config 'webpack.config.js'

resources/[system]/scoreboard/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "ui",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "4.0.3",
+    "typescript": "^4.1.2",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "cross-env NODE_ENV=production webpack --color --progress",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "copy-webpack-plugin": "^5.1.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.1.0",
+    "html-loader": "^2.1.1",
+    "html-webpack-plugin": "4",
+    "style-loader": "^2.0.0",
+    "ts-loader": "^8.0.18",
+    "url-loader": "^4.1.1",
+    "webpack-cli": "^4.5.0"
+  }
+}