Make nuke build item. worth 1M

src/client/graphics/Utils.ts

@@ -1,20 +1,24 @@
 
 export function renderTroops(troops: number): string {
-    let troopsStr = ''
+    return renderNumber(troops / 10)
+}
 
-    troops = troops / 10
-
-    if (troops > 100000) {
-        troopsStr = String(Math.floor(troops / 1000)) + "K"
-    } else if (troops > 10000) {
-        troopsStr = String((troops / 1000).toFixed(1)) + "K"
-    } else if (troops > 1000) {
-        troopsStr = String((troops / 1000).toFixed(2)) + "K"
+export function renderNumber(num: number) {
+    let numStr = ''
+    if (num >= 10_000_000) {
+        numStr = (num / 1000000).toFixed(1) + "M"
+    } else if (num >= 1_000_000) {
+        numStr = (num / 1000000).toFixed(2) + "M"
+    } else if (num >= 100000) {
+        numStr = Math.floor(num / 1000) + "K"
+    } else if (num >= 10000) {
+        numStr = (num / 1000).toFixed(1) + "K"
+    } else if (num >= 1000) {
+        numStr = (num / 1000).toFixed(2) + "K"
+    } else {
+        numStr = Math.floor(num).toString()
     }
-    else {
-        troopsStr = String(Math.floor(troops))
-    }
-    return troopsStr
+    return numStr
 }
 
 export function createCanvas(): HTMLCanvasElement {

src/client/graphics/layers/radial/BuildMenu.ts

@@ -3,19 +3,21 @@ import { customElement, state } from 'lit/decorators.js';
 import { EventBus } from '../../../../core/EventBus';
 import { Cell, Game, Player } from '../../../../core/game/Game';
 import { SendNukeIntentEvent } from '../../../Transport';
+import nukeIcon from '../../../../../resources/images/NukeIconWhite.svg';
+import goldCoinIcon from '../../../../../resources/images/GoldCoinIcon.svg';
+import { renderNumber } from '../../Utils';
 
 interface BuildItem {
     id: string;
     name: string;
     icon: string;
     cost: number;
-    buildTime: number;
 }
 
 const buildTable: BuildItem[][] = [
     [
-        { id: 'missile', name: 'Missile', icon: '🚀', cost: 100, buildTime: 5 },
-        { id: 'battleship', name: 'Battleship', icon: '🚢', cost: 500, buildTime: 20 }
+        { id: 'nuke', name: 'Nuke', icon: nukeIcon, cost: 1_000_000 },
+        // { id: 'battleship', name: 'Battleship', icon: '🚢', cost: 500, buildTime: 20 }
     ]
 ];
 
@@ -89,8 +91,7 @@ export class BuildMenu extends LitElement {
             margin-bottom: 5px;
         }
         .build-cost {
-            font-size: 12px;
-            color: #FFD700;
+            font-size: 14px;
         }
         .hidden {
             display: none !important;
@@ -138,11 +139,14 @@ export class BuildMenu extends LitElement {
                 ${buildTable.map(row => html`
                     <div class="build-row">
                         ${row.map(item => html`
-                            <button class="build-button" @click=${() => this.onBuildSelected(item)}>
-                                <span class="build-icon">${item.icon}</span>
-                                <span class="build-name">${item.name}</span>
-                                <span class="build-cost">${item.cost} 💰</span>
-                            </button>
+                       <button class="build-button" @click=${() => this.onBuildSelected(item)}>
+                            <img src=${item.icon} alt="${item.name}" width="40" height="40">
+                            <span class="build-name">${item.name}</span>
+                            <span class="build-cost">
+                                ${renderNumber(item.cost)}
+                                <img src=${goldCoinIcon} alt="gold" width="12" height="12" style="vertical-align: middle;">
+                            </span>
+                        </button> 
                         `)}
                     </div>
                 `)}

src/client/graphics/layers/radial/RadialMenu.ts

@@ -15,7 +15,7 @@ import targetIcon from '../../../../../resources/images/TargetIconWhite.png';
 import emojiIcon from '../../../../../resources/images/EmojiIconWhite.png';
 import disabledIcon from '../../../../../resources/images/DisabledIcon.png';
 import donateIcon from '../../../../../resources/images/DonateIconWhite.png';
-import buildIcon from '../../../../../resources/images/BuildIcon.svg';
+import buildIcon from '../../../../../resources/images/BuildIconWhite.svg';
 import { EmojiTable } from "./EmojiTable";
 import { UIState } from "../../UIState";
 import { BuildMenu } from "./BuildMenu";