client: add ID, weapons state to UI

altmp · Aug 11, 2022 · 5196d66 · 5196d66
1 parent 1eacd26
commit 5196d66
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 10 deletions.
diff --git a/freeroam-extended/client/html/Inter-Bold.ttf b/freeroam-extended/client/html/Inter-Bold.ttf
diff --git a/freeroam-extended/client/html/app.js b/freeroam-extended/client/html/app.js
@@ -167,11 +167,33 @@ function addString(text) {
 }
 
 function updatePlayersOnline (number) {
-  document.querySelector(".players-online").textContent = `${number} players online`;
+  document.querySelector(".players-online-number").textContent = `${number}`;
+}
+
+function setPlayerId (id) {
+  document.querySelector(".player-id-number").textContent = `${id}`;
+}
+
+function setWeaponsDisabled (disabled) {
+  const el = document.querySelector(".weapons-enabled").children[0];
+  const [, styleClass] = el.classList;
+
+  if (disabled) {
+    el.classList.remove("weapons-enabled-on");
+    el.classList.add("weapons-enabled-off");
+    el.textContent = "OFF";
+  }
+  else {
+    el.classList.remove("weapons-enabled-off");
+    el.classList.add("weapons-enabled-on");
+    el.textContent = "ON";
+  }
 }
 
 alt.on("addString", (text) => addString(colorify(text)));
 alt.on("addMessage", (name, text) => addString("<b>" + name + ": </b>" + colorify(text)));
 alt.on("openChat", openChat);
 alt.on("closeChat", closeChat);
 alt.on("updatePlayersOnline", updatePlayersOnline);
+alt.on("setPlayerId", setPlayerId);
+alt.on("setWeaponsDisabled", setWeaponsDisabled);
diff --git a/freeroam-extended/client/html/index.html b/freeroam-extended/client/html/index.html
@@ -11,8 +11,16 @@
     <div class="stress-test-label">
       Public Stress Test - xx.xx.2022
     </div>
-    <div class="players-online">
-      x players online
+    <div class="info">
+      <div class="players-online">
+        <div class="info-number players-online-number">xxxx</div> players online
+      </div> 
+      <div class="player-id">
+        <div class="info-number player-id-number">xxxx</div> your ID
+      </div>
+      <div class="weapons-enabled">
+        <div class="info-number weapons-enabled-on">ON</div> weapons
+      </div>
     </div>
     <div class="help-keys">
       <ol>
@@ -32,7 +40,6 @@
       </ol>
     </div>
     <div class="content">
-      <!-- <div class="shblock"></div> -->
       <div class="chatbox">
         <div class="msglist">
           <div class="messages"></div>

diff --git a/freeroam-extended/client/html/style.css b/freeroam-extended/client/html/style.css
@@ -1,6 +1,12 @@
 @font-face {
   font-family: "Inter";
-  src: url("./Inter-Medium.ttf"),
+  src: url("./Inter-Medium.ttf");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: bold;
+  src: url("./Inter-Bold.ttf");
 }
 
 * {
@@ -11,7 +17,7 @@
   -webkit-font-smoothing: antialiased;
   -webkit-user-drag: none;
   font-family: Inter, "Segoe UI", "Segoe UI Symbol", Arial, sans-serif;
-  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.793);
+  text-shadow: 0px 0px 0.1em rgba(0, 0, 0, 0.6);
 }
 
 *:focus {
@@ -28,7 +34,7 @@ body {
 
 .help-keys {
   position: absolute;
-  top: 3.0em;
+  top: 7em;
   right: 1.5em;
   text-align: right;
 }
@@ -210,13 +216,43 @@ body {
   }
 }
 
-.players-online {
+.info {
   font-size: .9em;
-  color: rgb(60, 255, 180);
   position: absolute;
   top: 1.5em;
   right: 1.5em;
   text-align: right;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-weight: bold;
+}
+
+.info > div {
+  justify-self: right;
+  margin-bottom: 0.2em;
+  border-radius: 1.5em;
+  padding: 0.2em 0.5em;
+  width: fit-content;
+  flex-grow: 20%;
+}
+
+.info > div > .info-number {
+  background:rgb(255, 255, 255);
+  box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.69);
+  border-radius: 0.5em;
+  color: black;
+  display: inline;
+  padding: 0.2em 0.5em;
+  text-shadow: none;
+}
+
+.players-online-number {
+  /* background: rgb(0,0, 0, 0.3);
+  padding: 0.1em;
+  border-radius: 0.5em; */
+  display: inline;
 }
 
 .stress-test-label {
@@ -229,3 +265,19 @@ body {
   position: absolute;
   color: rgba(255, 255, 255, 0.628);
 }
+
+.weapons-enabled > * {
+  color: rgb(255, 255, 255) !important;
+}
+
+.weapons-enabled-on {
+  --bg-color: rgb(98, 218, 114);
+  background: var(--bg-color) !important;
+  box-shadow: 0 0 0.5em var(--bg-color) !important;
+}
+
+.weapons-enabled-off {
+  --bg-color: rgb(235, 91, 86);
+  background: var(--bg-color) !important;
+  box-shadow: 0 0 0.5em var(--bg-color) !important;
+}
diff --git a/freeroam-extended/client/src/index.ts b/freeroam-extended/client/src/index.ts
@@ -15,6 +15,8 @@ alt.setConfigFlag(ConfigFlag.DisableIdleCamera, true)
 alt.setStat(StatName.Stamina, 100)
 alt.setWatermarkPosition(WatermarkPosition.TopCenter)
 
+view.emit("setPlayerId", LOCAL_PLAYER.id)
+
 setInterval(() => {
   if (!playerData.areNametagsVisible) return
   view.emit("updatePlayersOnline", alt.Player.all.length)
@@ -24,6 +26,10 @@ playerData.onAreNametagsVisibleChange = (value) => {
   playerNametags.enable(value)
 }
 
+playerData.onAreWeaponsDisabledChange = (value) => {
+  view.emit("setWeaponsDisabled", value)
+}
+
 alt.everyTick(() => {
   if (playerData.areWeaponsDisabled) {
     native.setCanPedEquipAllWeapons(LOCAL_PLAYER, false)

diff --git a/freeroam-extended/client/src/playerdata.ts b/freeroam-extended/client/src/playerdata.ts
@@ -1,5 +1,6 @@
 class PlayerData {
   public onAreNametagsVisibleChange: ((value: boolean) => void) | null = null
+  public onAreWeaponsDisabledChange: ((value: boolean) => void) | null = null
 
   private _areNametagsVisible = true
   private _areWeaponsDisabled = true
@@ -23,6 +24,7 @@ class PlayerData {
 
   public set areWeaponsDisabled(value: boolean) {
     this._areWeaponsDisabled = value
+    this.onAreWeaponsDisabledChange?.(value)
   }
 
   public get lastCommandTimestamp(): number {

diff --git a/freeroam-extended/client/src/view.ts b/freeroam-extended/client/src/view.ts
@@ -5,7 +5,9 @@ type EventNames =
   "openChat" |
   "closeChat" |
   "addString" |
-  "addMessage"
+  "addMessage" |
+  "setPlayerId" |
+  "setWeaponsDisabled"
 
 class View extends alt.WebView {
   public override emit(eventName: EventNames, ...args: unknown[]) {