From b94f064118443adc5e7e5449cd99ea3e21e363b8 Mon Sep 17 00:00:00 2001
From: erik <erik@mosswart.snakedesert.se>
Date: Wed, 14 May 2025 09:21:19 +0000
Subject: [PATCH] =?UTF-8?q?Alex=20ville=20ha=20f=C3=A4rger=20p=C3=A5=20met?=
 =?UTF-8?q?astate=20f=C3=B6r=20att=20han=20=C3=A4r=20en=20fisk?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/script.js | 12 ++++++++++++
 static/style.css | 14 +++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/static/script.js b/static/script.js
index 574e22ea..197cb918 100644
--- a/static/script.js
+++ b/static/script.js
@@ -256,6 +256,18 @@ function render(players) {
     <span class="stat onlinetime">${p.onlinetime}</span>
     <span class="stat deaths">${p.deaths}</span>
   `;
+
+    // Color the metastate pill according to its value
+    const metaSpan = li.querySelector('.stat.meta');
+    if (metaSpan) {
+      const goodStates = ['default', 'default2', 'hunt', 'combat'];
+      const state = (p.vt_state || '').toString().toLowerCase();
+      if (goodStates.includes(state)) {
+        metaSpan.classList.add('green');
+      } else {
+        metaSpan.classList.add('red');
+      }
+    }
   
     li.addEventListener('click', () => selectPlayer(p, x, y));
     if (p.character_name === selected) li.classList.add('selected');
diff --git a/static/style.css b/static/style.css
index dc8e2e77..d4655eaf 100644
--- a/static/style.css
+++ b/static/style.css
@@ -202,11 +202,23 @@ body {
 .stat.kills::before   { content: "⚔️ ";                     }
 .stat.kph::after      { content: " KPH"; font-size:0.7em; color:#aaa; }
 .stat.rares::after    { content: " Rares"; font-size:0.7em; color:#aaa; }
-.stat.meta {
+/* metastate pill colors are assigned dynamically: green for “good” states, red otherwise */
+#playerList li .stat.meta {
+  /* fallback */
   background: var(--accent);
   color: #111;
 }
 
+#playerList li .stat.meta.green {
+  background: #2ecc71; /* pleasant green */
+  color: #111;
+}
+
+#playerList li .stat.meta.red {
+  background: #e74c3c; /* vivid red */
+  color: #fff;
+}
+
 /* ---------- chat window styling ------------------------------- */
 .chat-btn {
   margin-top: 4px;