adrien
2d36685ca0
The city buildings tab and the HUD's tile panel now draw the same card: an icon, name and status, a bottom-anchored button carrying the estimated price and build time, a quiet remove control and a hatched locked state, with the produce/consume/cost detail in a hover tooltip. The shared card lives in client/js/ui/card.js. The tile dock is now a summary — description, production, people and their ethnic makeup, GDP and the improvements list — with a Management button that opens a full-size panel like the city and nation panels. Its Improvements tab holds the grouped Military, Transportation and Economic cards, so Road and Railway sit with the other works. City buildings sit in a two-row horizontal scroller with the built ones first, and the city panel now matches the nation panel's size. AGENTS.md now asks for a minimal visual preview to be shown before a player-visible change is committed.
54 lines
1.7 KiB
JavaScript
54 lines
1.7 KiB
JavaScript
// The tile management panel: a full-size modal, modelled on the city and nation
|
|
// panels, holding the works a controlled tile can carry. The HUD's tile summary
|
|
// only points at it, so the building cards themselves live here where they have
|
|
// room. The cards are built by the game screen and drawn into #tile-manage-improvements.
|
|
|
|
import { bindTabs } from "./tabs.js";
|
|
import { hideCardTooltip } from "../ui/card.js";
|
|
|
|
export class TileModal {
|
|
constructor() {
|
|
this.$modal = $("#modal-tile");
|
|
this.$title = $("#tile-manage-title");
|
|
this.$sub = $("#tile-manage-sub");
|
|
this.$list = $("#tile-manage-improvements");
|
|
// The tile the panel was opened for, so a snapshot only refreshes the tile
|
|
// whose cards are on show.
|
|
this.coords = null;
|
|
|
|
this.$modal.find(".modal-close").on("click", () => this.close());
|
|
bindTabs(this.$modal, "tile-tab-");
|
|
}
|
|
|
|
isShowing(coords) {
|
|
if (this.$modal.hasClass("hidden") || !this.coords || !coords) return false;
|
|
return this.coords.x === coords.x && this.coords.y === coords.y;
|
|
}
|
|
|
|
isOpen() {
|
|
return !this.$modal.hasClass("hidden");
|
|
}
|
|
|
|
// Opens the panel for a tile. The cards are rendered afterwards by the game
|
|
// screen, which owns the orders they send.
|
|
show(coords, { title = "Tile", sub = "" } = {}) {
|
|
this.coords = { x: coords.x, y: coords.y };
|
|
this.$title.text(title);
|
|
this.$sub.text(sub);
|
|
this.$list.empty();
|
|
this.$modal.removeClass("hidden");
|
|
}
|
|
|
|
// Refreshes the title and summary without disturbing the cards below.
|
|
setSummary({ title, sub } = {}) {
|
|
if (title != null) this.$title.text(title);
|
|
if (sub != null) this.$sub.text(sub);
|
|
}
|
|
|
|
close() {
|
|
hideCardTooltip();
|
|
this.$modal.addClass("hidden");
|
|
this.coords = null;
|
|
}
|
|
}
|