- <span><b>Gold:</b> ${city.gold.toLocaleString()}</span>
- <span><b>Ore:</b> ${city.ore.toLocaleString()}</span>
- <span><b>Logs:</b> ${city.logs.toLocaleString()}</span>
+ <span>
+ <b data-augmented-ui="all-hex border" title="Credits">₡</b>
+ <span class="text">${city.credits.toLocaleString()}</span>
+ </span>
+ <span>
+ <b data-augmented-ui="all-hex border" title="Alloys">A</b>
+ <span class="text">${city.alloys.toLocaleString()}</span>
+ </span>
+ <span>
+ <b data-augmented-ui="all-hex border" title="Food">F</b>
+ <span class="text">
+ ${city.food.toLocaleString()}
+ <span class="rate-of-change ${foodRateOfChange < 0 ? 'danger-text': 'success-text'}">${foodRateOfChange.toLocaleString()}</span>
+ </span>
+ </span>
+ <span>
+ <b data-augmented-ui="all-hex border" title="Energy">E</b>
+ <span class="text">
+ ${city.energy.toLocaleString()}
+ <span class="rate-of-change ${energyRateOfChange < 0 ? 'danger-text': 'success-text'}">${energyRateOfChange.toLocaleString()}</span>
+ </span>
+ </span>