fix: translation broke numbers (#211)

src/client/graphics/layers/BuildMenu.ts

@@ -296,7 +296,7 @@ export class BuildMenu extends LitElement implements Layer {
                     />
                     <span class="build-name">${item.unitType}</span>
                     <span class="build-description">${item.description}</span>
-                    <span class="build-cost">
+                    <span class="build-cost" translate="no">
                       ${renderNumber(
                         this.game && this.game.myPlayer() ? this.cost(item) : 0,
                       )}

src/client/graphics/layers/ControlPanel.ts

@@ -204,6 +204,7 @@ export class ControlPanel extends LitElement implements Layer {
                 class="${this._popRateIsIncreasing
                   ? "text-green-500"
                   : "text-yellow-500"}"
+                translate="no"
                 >(+${renderTroops(this.popRate)})</span
               ></span
             >
@@ -218,7 +219,7 @@ export class ControlPanel extends LitElement implements Layer {
         </div>
 
         <div class="relative mb-4 lg:mb-4">
-          <label class="block text-white mb-1"
+          <label class="block text-white mb-1" translate="no"
             >Troops: <span translate="no">${renderTroops(this._troops)}</span> |
             Workers:
             <span translate="no">${renderTroops(this._workers)}</span></label
@@ -250,7 +251,7 @@ export class ControlPanel extends LitElement implements Layer {
         </div>
 
         <div class="relative mb-0 lg:mb-4">
-          <label class="block text-white mb-1"
+          <label class="block text-white mb-1" translate="no"
             >Attack Ratio: ${(this.attackRatio * 100).toFixed(0)}%
             (${renderTroops(
               this.game?.myPlayer()?.troops() * this.attackRatio,

src/client/graphics/layers/EventsDisplay.ts

@@ -407,6 +407,7 @@ export class EventsDisplay extends LitElement implements Layer {
                 ${this.incomingAttacks.map(
                   (attack) => html`
                     <button
+                      translate="no"
                       class="ml-2"
                       @click=${() =>
                         this.emitGoToPlayerEvent(attack.attackerID)}
@@ -431,6 +432,7 @@ export class EventsDisplay extends LitElement implements Layer {
                 ${this.outgoingAttacks.map(
                   (attack) => html`
                     <button
+                      translate="no"
                       class="ml-2"
                       @click=${() => this.emitGoToPlayerEvent(attack.targetID)}
                     >
@@ -473,7 +475,10 @@ export class EventsDisplay extends LitElement implements Layer {
               >
                 ${this.outgoingBoats.map(
                   (boats) => html`
-                    <button @click=${() => this.emitGoToUnitEvent(boats)}>
+                    <button
+                      translate="no"
+                      @click=${() => this.emitGoToUnitEvent(boats)}
+                    >
                       Boat: ${renderTroops(boats.troops())}
                     </button>
                   `,

src/client/graphics/layers/NameLayer.ts

@@ -200,6 +200,7 @@ export class NameLayer implements Layer {
 
     const troopsDiv = document.createElement("div");
     troopsDiv.classList.add("player-troops");
+    troopsDiv.setAttribute("translate", "no");
     troopsDiv.textContent = renderTroops(player.troops());
     troopsDiv.style.color = this.theme.textColor(player.info());
     troopsDiv.style.fontFamily = this.theme.font();

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -201,10 +201,10 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
           ${player.name()}
         </div>
         <div class="text-sm opacity-80">Type: ${playerType}</div>
-        <div class="text-sm opacity-80">
+        <div class="text-sm opacity-80" translate="no">
           Troops: ${renderTroops(player.troops())}
         </div>
-        <div class="text-sm opacity-80">
+        <div class="text-sm opacity-80" translate="no">
           Gold: ${renderNumber(player.gold())}
         </div>
         ${relationHtml}

src/client/graphics/layers/PlayerPanel.ts

@@ -213,7 +213,10 @@ export class PlayerPanel extends LitElement implements Layer {
               <div class="flex flex-col gap-1">
                 <!-- Gold -->
                 <div class="text-white text-opacity-80 text-sm px-2">Gold</div>
-                <div class="bg-opacity-50 bg-gray-700 rounded p-2 text-white">
+                <div
+                  class="bg-opacity-50 bg-gray-700 rounded p-2 text-white"
+                  translate="no"
+                >
                   ${renderNumber(other.gold() || 0)}
                 </div>
               </div>
@@ -222,7 +225,10 @@ export class PlayerPanel extends LitElement implements Layer {
                 <div class="text-white text-opacity-80 text-sm px-2">
                   Troops
                 </div>
-                <div class="bg-opacity-50 bg-gray-700 rounded p-2 text-white">
+                <div
+                  class="bg-opacity-50 bg-gray-700 rounded p-2 text-white"
+                  translate="no"
+                >
                   ${renderTroops(other.troops() || 0)}
                 </div>
               </div>

src/client/graphics/layers/TopBar.ts

@@ -57,11 +57,12 @@ export class TopBar extends LitElement implements Layer {
           class="sm:col-span-1 flex items-center space-x-1 overflow-x-auto whitespace-nowrap"
         >
           <span class="font-bold shrink-0">Pop:</span>
-          <span
+          <span translate="no"
             >${renderTroops(myPlayer.population())} /
             ${renderTroops(maxPop)}</span
           >
           <span
+            translate="no"
             class="${this._popRateIsIncreasing
               ? "text-green-500"
               : "text-yellow-500"}"
@@ -73,7 +74,7 @@ export class TopBar extends LitElement implements Layer {
           class="flex items-center space-x-2 overflow-x-auto whitespace-nowrap"
         >
           <span class="font-bold shrink-0">Gold:</span>
-          <span
+          <span translate="no"
             >${renderNumber(myPlayer.gold())}
             (+${renderNumber(goldPerSecond)})</span
           >