+type Cost = {
+ credits: number,
+ time: number,
+ alloys?: number,
+ energy?: number,
+ land?: number,
+ food?: number,
+ population?: number,
+ soldiers?: number
+ attackers?: number,
+ defenders?: number
+}
+
+function lineItem(display: string, value: number): string {
+ return `
+ <div>
+ <b>${display}:</b>
+ <span class="text">${value.toLocaleString()}</span>
+ </div>
+ `;
+}
+
+export function renderCost(cost: Cost): string {
+ const costAsArray = [];
+
+ costAsArray.push(lineItem('Credits', cost.credits));
+ costAsArray.push(lineItem('Time', cost.time));
+
+ if(cost.alloys) {
+ costAsArray.push(lineItem('Alloys', cost.alloys));
+ }
+ if(cost.food) {
+ costAsArray.push(lineItem('Food', cost.food));
+ }
+ if(cost.energy) {
+ costAsArray.push(lineItem('Energy', cost.energy));
+ }
+ if(cost.land) {
+ costAsArray.push(lineItem('Space', cost.land));
+ }
+ if(cost.population) {
+ costAsArray.push(lineItem('Pop', cost.population));
+ }
+ if(cost.soldiers) {
+ costAsArray.push(lineItem('Soldiers', cost.soldiers));
+ }
+ if(cost.attackers) {
+ costAsArray.push(lineItem('Attackers', cost.attackers));
+ }
+ if(cost.defenders) {
+ costAsArray.push(lineItem('Defenders', cost.defenders));
+ }
+
+
+ return `<div class="cost-display">${costAsArray.join("")}</div>`;
+}