Alex ville ha färger på metastate för att han är en fisk

This commit is contained in:
erik 2025-05-14 09:21:19 +00:00
parent 337eff56aa
commit b94f064118
2 changed files with 25 additions and 1 deletions

View file

@ -256,6 +256,18 @@ function render(players) {
<span class="stat onlinetime">${p.onlinetime}</span> <span class="stat onlinetime">${p.onlinetime}</span>
<span class="stat deaths">${p.deaths}</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)); li.addEventListener('click', () => selectPlayer(p, x, y));
if (p.character_name === selected) li.classList.add('selected'); if (p.character_name === selected) li.classList.add('selected');

View file

@ -202,11 +202,23 @@ body {
.stat.kills::before { content: "⚔️ "; } .stat.kills::before { content: "⚔️ "; }
.stat.kph::after { content: " KPH"; font-size:0.7em; color:#aaa; } .stat.kph::after { content: " KPH"; font-size:0.7em; color:#aaa; }
.stat.rares::after { content: " Rares"; 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); background: var(--accent);
color: #111; 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 window styling ------------------------------- */
.chat-btn { .chat-btn {
margin-top: 4px; margin-top: 4px;