Redesign the bottom bar: troop bar, gold, hotbar and attack rows

index.html

@@ -562,24 +562,27 @@
         class="contents sm:flex sm:flex-col sm:pointer-events-none w-full sm:w-[500px] lg:col-start-2 sm:z-10"
       >
         <attacks-display
-          class="w-full pointer-events-auto order-1 sm:order-none"
+          class="w-full pointer-events-auto order-1 sm:order-none max-sm:side-bar:pe-8"
         ></attacks-display>
         <tutorial-panel
-          class="hidden w-full order-3 sm:order-none"
+          class="hidden w-full order-3 sm:order-none max-sm:side-bar:pe-8"
         ></tutorial-panel>
         <!-- The unit bar is a row below the control panel from lg up, a row
              above it on landscape phones, and a column fixed to the right edge
              below lg in portrait (side-bar). The blur is off there: a
              backdrop-filter would pin the fixed bar to this panel instead of
-             the screen.
+             the screen. The control panel blurs itself instead, as the bar
+             is not inside it.
              The panel runs on into the safe-area insets around it (home
              indicator, notch) so its content reaches the screen edge. Only on
              the edges it touches: left below lg (right instead on landscape
              phones), right below sm, the bottom until it floats from 1200px. -->
         <div
           class="flex flex-col pointer-events-auto hud-panel side-bar:backdrop-blur-none sm:rounded-tr-lg sm:max-lg:landscape:rounded-tr-none sm:max-lg:landscape:rounded-tl-lg lg:rounded-t-lg min-[1200px]:rounded-lg order-3 sm:order-none z-10 max-[1200px]:-mb-[env(safe-area-inset-bottom)] max-lg:-ml-[env(safe-area-inset-left)] sm:max-lg:landscape:ml-0 max-sm:-mr-[env(safe-area-inset-right)] sm:max-lg:landscape:-mr-[env(safe-area-inset-right)]"
         >
-          <control-panel class="w-full"></control-panel>
+          <control-panel
+            class="w-full side-bar:backdrop-blur-hud"
+          ></control-panel>
           <unit-display
             class="block w-full max-lg:landscape:order-first side-bar:w-auto side-bar:fixed side-bar:top-1/2 side-bar:-translate-y-1/2 side-bar:right-[env(safe-area-inset-right)]"
           ></unit-display>

resources/lang/en.json

@@ -213,6 +213,7 @@
       "warship": "Captures trade ships, destroys ships and boats"
     },
     "not_enough_money": "Not enough money",
+    "requires": "Requires {unit}",
     "upgrade_amount": "x{amount}",
     "warship_shift_hint": "Hold Shift and drag to select multiple warships at once"
   },
@@ -839,7 +840,7 @@
   "control_panel": {
     "allied_afk_neighbor_info": "You can attack disconnected players even if you are allied with them.",
     "army_limit_warning": "You're near your army limit! Consider sending troops to teammates.",
-    "attack_ratio": "{percent}%\n({troops})",
+    "attack_ratio": "{percent}%\n{troops}",
     "attack_ratio_button": "Attack ratio: {percent}%",
     "low_troops_warning": "You are very low on troops - You should always keep some troops for defense.",
     "teammate_afk_neighbor_info": "You can attack disconnected teammates.",

src/client/components/OfIcon.ts

@@ -6,7 +6,7 @@ interface IconFile {
   file: string;
   /** Drawn as an <img> to keep its colours; other icons take currentColor. */
   multicolor?: boolean;
-  /** The file is 100×125 with the artist's credit in the bottom 25 units. */
+  /** A 4:5 file whose art is its top square. */
   crop?: boolean;
 }
 
@@ -44,6 +44,20 @@ export const OF_ICONS = {
   nation: { file: "CityIconWhite.svg" },
   tribe: { file: "SwordIconWhite.svg" },
   swap: { file: "SwapIconWhite.svg" },
+  sword: { file: "SwordIconWhite.svg" },
+  max: { file: "UpperLimitIcon.svg" },
+  info: { file: "InfoIconRegularWhite.svg" },
+  warning: { file: "WarningIconWhite.svg" },
+  lock: { file: "LockIconWhite.svg" },
+  city: { file: "CityIconWhite.svg" },
+  factory: { file: "FactoryIconWhite.svg" },
+  port: { file: "PortIcon.svg" },
+  "missile-silo": { file: "MissileSiloIconWhite.svg" },
+  "sam-launcher": { file: "SamLauncherIconWhite.svg" },
+  warship: { file: "BattleshipIconWhite.svg" },
+  "atom-bomb": { file: "NukeIconWhite.svg" },
+  "hydrogen-bomb": { file: "MushroomCloudIconWhite.svg", crop: true },
+  mirv: { file: "MIRVIcon.svg" },
 } as const satisfies Record<string, IconFile>;
 
 export type OfIconName = keyof typeof OF_ICONS;
@@ -82,7 +96,8 @@ export class OfIcon extends LitElement {
       />`;
     }
     // The mask uses the file's alpha, so its fill colour does not matter. A
-    // cropped file is sized to the box's width and the credit falls below it.
+    // cropped file is sized to the box's width, so what is under its top
+    // square falls below the box.
     const mask = `url('${src}') ${icon.crop ? "top / 100% 125%" : "center / contain"} no-repeat`;
     return html`<span
       aria-hidden="true"