incentive/psopeeps_site
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Split home server status by region

Browse Source
This commit is contained in:
Your Name
2026-06-13 21:14:59 -04:00
parent 79915431fa
commit d757468b7c
3 changed files with 67 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/index.html
+27 -23
View File
@@ -8,9 +8,9 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css?v=home-server-status-narrow-1"> <link rel="stylesheet" href="style.css?v=home-status-two-boxes-2">
<script src="app.js?v=account-status-label-20260609" defer></script> <script src="app.js?v=account-status-label-20260609" defer></script>
<script src="server-status.js?v=prometheus-status-2" defer></script> <script src="server-status.js?v=home-status-two-boxes-2" defer></script>
</head> </head>
<body> <body>
<div class="site-shell"> <div class="site-shell">
@@ -53,28 +53,32 @@
<h1 id="server-status-heading" class="section-title">Server Status</h1> <h1 id="server-status-heading" class="section-title">Server Status</h1>
<div class="status-list" role="list" aria-label="Current server player counts"> <div class="status-list status-list--regions" role="list" aria-label="Current server player counts">
<div class="status-row status-parent status-server" role="listitem"><span>US Server</span><span>0 Players</span></div> <div class="status-region" role="group" aria-label="US Server player counts">
<div class="status-row status-parent status-ship" role="listitem"><span>Alis</span><span></span></div> <div class="status-row status-parent status-server" role="listitem"><span>US Server</span><span>0 Players</span></div>
<div class="status-row status-child" role="listitem"><span>V2</span><span>0 Players</span></div> <div class="status-row status-parent status-ship" role="listitem"><span>Alis</span><span></span></div>
<div class="status-row status-child" role="listitem"><span>V3</span><span>0 Players</span></div> <div class="status-row status-child" role="listitem"><span>V2</span><span>0 Players</span></div>
<div class="status-row status-child" role="listitem"><span>BB</span><span>0 Players</span></div> <div class="status-row status-child" role="listitem"><span>V3</span><span>0 Players</span></div>
<div class="status-row status-parent status-ship" role="listitem"><span>Abion</span><span></span></div> <div class="status-row status-child" role="listitem"><span>BB</span><span>0 Players</span></div>
<div class="status-row status-child" role="listitem"><span>HC/BB</span><span>0 Players</span></div> <div class="status-row status-parent status-ship" role="listitem"><span>Abion</span><span></span></div>
<div class="status-row status-parent status-ship" role="listitem"><span>AdHoc-US</span><span></span></div> <div class="status-row status-child" role="listitem"><span>HC/BB</span><span>0 Players</span></div>
<div class="status-row status-child" role="listitem"><span>PSP1</span><span>0 Players</span></div> <div class="status-row status-parent status-ship" role="listitem"><span>AdHoc-US</span><span></span></div>
<div class="status-row status-child" role="listitem"><span>PSP2i</span><span>0 Players</span></div> <div class="status-row status-child" role="listitem"><span>PSP1</span><span>0 Players</span></div>
<div class="status-row status-child" role="listitem"><span>PSP2i</span><span>0 Players</span></div>
</div>
<div class="status-row status-parent status-server" role="listitem"><span>EU Server</span><span>0 Players</span></div> <div class="status-region" role="group" aria-label="EU Server player counts">
<div class="status-row status-parent status-ship" role="listitem"><span>Palma</span><span></span></div> <div class="status-row status-parent status-server" role="listitem"><span>EU Server</span><span>0 Players</span></div>
<div class="status-row status-child" role="listitem"><span>V2</span><span>0 Players</span></div> <div class="status-row status-parent status-ship" role="listitem"><span>Palma</span><span></span></div>
<div class="status-row status-child" role="listitem"><span>V3</span><span>0 Players</span></div> <div class="status-row status-child" role="listitem"><span>V2</span><span>0 Players</span></div>
<div class="status-row status-child" role="listitem"><span>BB</span><span>0 Players</span></div> <div class="status-row status-child" role="listitem"><span>V3</span><span>0 Players</span></div>
<div class="status-row status-parent status-ship" role="listitem"><span>Aiedo</span><span></span></div> <div class="status-row status-child" role="listitem"><span>BB</span><span>0 Players</span></div>
<div class="status-row status-child" role="listitem"><span>HC/BB</span><span>0 Players</span></div> <div class="status-row status-parent status-ship" role="listitem"><span>Aiedo</span><span></span></div>
<div class="status-row status-parent status-ship" role="listitem"><span>AdHoc-EU</span><span></span></div> <div class="status-row status-child" role="listitem"><span>HC/BB</span><span>0 Players</span></div>
<div class="status-row status-child" role="listitem"><span>PSP1</span><span>0 Players</span></div> <div class="status-row status-parent status-ship" role="listitem"><span>AdHoc-EU</span><span></span></div>
<div class="status-row status-child" role="listitem"><span>PSP2i</span><span>0 Players</span></div> <div class="status-row status-child" role="listitem"><span>PSP1</span><span>0 Players</span></div>
<div class="status-row status-child" role="listitem"><span>PSP2i</span><span>0 Players</span></div>
</div>
</div> </div>
</section> </section>
site/server-status.js
+13 -10
View File
@@ -19,20 +19,23 @@
const servers = Array.isArray(data?.servers) ? data.servers : []; const servers = Array.isArray(data?.servers) ? data.servers : [];
if (!servers.length) return; if (!servers.length) return;
list.classList.add("status-list--regions");
list.innerHTML = servers.map((server) => ` list.innerHTML = servers.map((server) => `
<div class="status-row status-parent status-server" role="listitem"> <div class="status-region" role="group" aria-label="${esc(server.label)} player counts">
<span>${esc(server.label)}</span><span>${players(server.players)}</span> <div class="status-row status-parent status-server" role="listitem">
</div> <span>${esc(server.label)}</span><span>${players(server.players)}</span>
${(server.ships || []).map((ship) => `
<div class="status-row status-parent status-ship" role="listitem">
<span>${esc(ship.label)}</span><span></span>
</div> </div>
${(ship.rows || []).map((row) => ` ${(server.ships || []).map((ship) => `
<div class="status-row status-child" role="listitem"> <div class="status-row status-parent status-ship" role="listitem">
<span>${esc(row.label)}</span><span>${players(row.players)}</span> <span>${esc(ship.label)}</span><span></span>
</div> </div>
${(ship.rows || []).map((row) => `
<div class="status-row status-child" role="listitem">
<span>${esc(row.label)}</span><span>${players(row.players)}</span>
</div>
`).join("")}
`).join("")} `).join("")}
`).join("")} </div>
`).join(""); `).join("");
}; };
site/style.css
+27 -3
View File
@@ -1886,8 +1886,32 @@ button.inline-link,
} }
/* Home server status: reduce inner table width */ /* Home server status: split US/EU into two inner boxes */
.server-card .status-list { .server-card .status-list.status-list--regions {
max-width: 92%; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
background: transparent;
border: 0;
padding: 0;
}
.server-card .status-region {
display: grid;
gap: 0.35rem;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 0.45rem;
background: rgba(0, 0, 0, 0.35);
}
.server-card .status-region .status-row {
grid-template-columns: minmax(0, 1fr) max-content;
}
@media (max-width: 720px) {
.server-card .status-list.status-list--regions {
grid-template-columns: 1fr;
}
} }