src/render/land-development.ts

   1 import { BuildQueue } from "../repository/build-queue";
   2 import { CityWithLocation } from "../repository/city";
   3 import { Building } from '../repository/buildings';
   4 import _ from "lodash";
   5
   6 function progressBar(current, max): string {
   7     const percent = Math.ceil((current/max) * 100);
   8     return `
   9     <div class="progress-bar construction" style="background: background: var(--green-bg);
  10     background: linear-gradient(90deg, var(--green-bg) 0%, var(--green-bg) ${percent}%, #000 ${percent}%); border-color: var(--green-border); ">
  11     ${percent}%
  12     </div>
  13     `;
  14 }
  15
  16 export function renderLandDevelopment(city: CityWithLocation, buildings: Building[], buildQueues: BuildQueue[]): string {
  17     const freeSpace = city.totalSpace - city.usedSpace;
  18     let html = `
  19     <div hx-trigger="reload-construction-queue, every 600s" hx-get="/poll/construction">
  20     <h2 data-augmented-ui="tl-clip bl-clip none">Construction</h2>
  21     <table>
  22     <tr>
  23         <th>Type</th>
  24         <th>Current</th>
  25         <th>Space Available: ${(city.totalSpace - city.usedSpace).toLocaleString()} (${Math.ceil(freeSpace/city.totalSpace * 100)}% available)</th>
  26         <th width="200">Cost</th>
  27     </tr>
  28     ${
  29         buildings.map(building => {
  30             return `
  31             <tr>
  32                 <th>${building.display}</th>
  33                 <td>${city[building.slug]}</td>
  34                 <td>
  35                     <form hx-post="/build" hx-swap="innerHTML" hx-target="#notifications">
  36                         <input type="number" size="6" name="amount" hx-post="/cost/construction" hx-trigger="keyup" hx-target="#${building.slug}-cost" hx-swap="innerHTML">
  37                         <input type="hidden" name="building_type" value="${building.slug}">
  38                         <button type="submit">Build</button>
  39                     </form>
  40                 </td>
  41                 <td id="${building.slug}-cost"></td>
  42             </tr>
  43             `;
  44         }).join("\n")
  45     }
  46     </table>
  47     `;
  48
  49     const quickFindBuilding = _.keyBy(buildings, 'slug');
  50
  51     const queues = `
  52     <hr>
  53     <h2 data-augmented-ui="tl-clip bl-clip none">Build Queues</h2>
  54     <table>
  55     <tr>
  56     <th>Building</th>
  57     <th>Amount Expected</th>
  58     <th>Progress</th>
  59     </tr>
  60     ${buildQueues.sort((a, b) => {
  61         return a.due - b.due;
  62     }).map(queue => {
  63         const now = Date.now() - queue.created;
  64         const duration = queue.due - queue.created;
  65
  66         return `
  67         <tr>
  68         <td>${quickFindBuilding[queue.building_type].display}</td>
  69         <td>${queue.amount}</td>
  70         <td>${progressBar(now, duration)}</td>
  71         </tr>
  72         `;
  73     }).join("\n")}
  74     </table>
  75     </div>
  76     `;
  77     return html + queues;
  78 }