Divide updateUI into multiple functions.

blujai831 · Oct 28, 2024 · faaf288 · faaf288
1 parent 0b704a3
commit faaf288
Showing 1 changed file with 29 additions and 12 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -118,14 +118,32 @@ const itemButtons = arrayToRecord(availableItems, item => item.name, item =>
 );
 const statusDisplay = makeElement('div');
 
-function updateUI(state: typeof gameState) {
+function updateGlobalWarmingIndexDisplay(state: typeof gameState) {
     if (state.globalWarmingIndex > 0) {
         globalWarmingIndexDisplay.innerHTML =
             `<p>${state.globalWarmingIndex.toFixed(DECIMAL_PRECISION)}
                 EcD units available</p>`;
     } else {
         globalWarmingIndexDisplay.innerHTML = `<p>${GAME_PREMISE}</p>`;
     }
+}
+
+function updateItemButton(state: typeof gameState, item: Item) {
+    let qty = state.itemQuantities[item.name];
+    let button = itemButtons[item.name];
+    button.disabled = !canAffordItem(state, item);
+    if (!button.disabled) {
+        button.className = 'item-button unlocked';
+    }
+    button.innerHTML = `
+        <strong>${item.name}</strong><br />
+        Cost: ${getItemRealCost(item, qty).toFixed(DECIMAL_PRECISION)}
+            EcD units<br />
+        ${item.description}
+    `;
+}
+
+function updateStatusDisplay(state: typeof gameState) {
     statusDisplay.innerHTML = "";
     if (state.globalWarmingRate > 0) {
         statusDisplay.innerHTML += `
@@ -134,20 +152,12 @@ function updateUI(state: typeof gameState) {
             units of ecological damage per second.</p>
         `;
     }
+}
+
+function appendInventoryListToStatusDisplay(state: typeof gameState) {
     let listInnerHTML = "";
     for (let item of availableItems) {
         let qty = state.itemQuantities[item.name];
-        let button = itemButtons[item.name];
-        button.disabled = !canAffordItem(state, item);
-        if (!button.disabled) {
-            button.className = 'item-button unlocked';
-        }
-        button.innerHTML = `
-            <strong>${item.name}</strong><br />
-            Cost: ${getItemRealCost(item, qty).toFixed(DECIMAL_PRECISION)}
-                EcD units<br />
-            ${item.description}
-        `;
         if (qty > 0) {
             listInnerHTML +=
                 `<li>${qty.toFixed(0)}x ${item.name}</li>`;
@@ -159,6 +169,13 @@ function updateUI(state: typeof gameState) {
     }
 }
 
+function updateUI(state: typeof gameState) {
+    updateGlobalWarmingIndexDisplay(state);
+    for (let item of availableItems) updateItemButton(state, item);
+    updateStatusDisplay(state);
+    appendInventoryListToStatusDisplay(state);
+}
+
 function animateForever(
     what: (interval: number) => void,
     lastTimeStamp: DOMHighResTimeStamp = performance.now(),