diff --git a/TODO.txt b/TODO.txt index 6d3d9d56d..d17d7f272 100644 --- a/TODO.txt +++ b/TODO.txt @@ -171,7 +171,10 @@ * add troop max DONE 10/31/2024 * rewrite EventsDisplay DONE 11/1/2024 * update Mena NPC locations DONE 11/1/2024 -* create build menu +* create build menu DONE 11/3/2024 +* add gold +* add troop/worker slider +* add battleship * NPC has relations * fix name rendering * use twitter emojis diff --git a/resources/images/BuildIconWhite.svg b/resources/images/BuildIconWhite.svg new file mode 100644 index 000000000..4cc261d10 --- /dev/null +++ b/resources/images/BuildIconWhite.svg @@ -0,0 +1,49 @@ + + + + + + + + + diff --git a/resources/images/GoldCoinIcon.svg b/resources/images/GoldCoinIcon.svg new file mode 100644 index 000000000..031b5324b --- /dev/null +++ b/resources/images/GoldCoinIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/images/NukeIconWhite.svg b/resources/images/NukeIconWhite.svg new file mode 100644 index 000000000..99de2116c --- /dev/null +++ b/resources/images/NukeIconWhite.svg @@ -0,0 +1,54 @@ + + diff --git a/src/client/graphics/Utils.ts b/src/client/graphics/Utils.ts index 6368fffa5..46cbb983e 100644 --- a/src/client/graphics/Utils.ts +++ b/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 { diff --git a/src/client/graphics/layers/radial/BuildMenu.ts b/src/client/graphics/layers/radial/BuildMenu.ts index 835ceeb1f..7d06b6483 100644 --- a/src/client/graphics/layers/radial/BuildMenu.ts +++ b/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`
${row.map(item => html` - + `)}
`)} diff --git a/src/client/graphics/layers/radial/RadialMenu.ts b/src/client/graphics/layers/radial/RadialMenu.ts index 3a1df4b5c..48a8010f1 100644 --- a/src/client/graphics/layers/radial/RadialMenu.ts +++ b/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";