show unread mail count in topbar

[browser-rts.git] / src / render / topbar.ts

diff --git a/src/render/topbar.ts b/src/render/topbar.ts
index 94313c55f411b90cd4f5936de818491dc7bde61a..a6dc789d273f3d090e07948ccd764d9956c38365 100644 (file)
--- a/src/render/topbar.ts
+++ b/src/render/topbar.ts
@@ -7,11 +7,22 @@ type Usage = {
   energyProductionPerTick: number;
 }
 
+function renderUnreadBadge(count: number): string {
+  return `<span class="badge danger">${count}</span>`;
 
-export function topbar(city: City & Usage): string {
+}
+
+function mailLink(unreadCount: number): string {
+  return `
+  <a href="#" hx-target="#main" hx-get="/poll/mailroom" hx-trigger="click" id="mail-link" hx-swap-oob="true">Mail ${unreadCount > 0 ? renderUnreadBadge(unreadCount) : ''}</a>
+  `;
+}
+
+export function topbar(city: City & Usage, unreadMail: number): string {
   const foodRateOfChange = city.foodProductionPerTick - city.foodUsagePerTick;
   const energyRateOfChange = city.energyProductionPerTick - city.energyUsagePerTick;
     const oob = `
+    ${mailLink(unreadMail)}
     <div class="col" id="info-bar" hx-swap-oob="true">
     <span>
       <b data-augmented-ui="all-hex border" title="Credits">&#8353;</b>