diff --git a/src/client/pool.ts b/src/client/pool.ts index be5fd17..8ead13b 100644 --- a/src/client/pool.ts +++ b/src/client/pool.ts @@ -9,6 +9,12 @@ const MAX_BONUSES = 3; export default class Pool { node: HTMLElement = html.node("div", {className:"pool"}); _dices: HTMLDice[] = []; + poolHeading: HTMLHeadingElement = html.node("h2", {className:"heading"}); + + constructor(label: string) { + label: this.poolHeading + this.node.prepend(label) + } get remaining() { return this._dices.filter(d => d.mandatory && !d.disabled && !d.blocked); @@ -59,7 +65,7 @@ export class BonusPool extends Pool { _locked = false; constructor() { - super(); + super("Special Routes"); this.node.classList.add("bonus"); ["cross-road-road-rail-road", "cross-road-rail-rail-rail", "cross-road", diff --git a/src/client/round.ts b/src/client/round.ts index 231f624..29b2595 100644 --- a/src/client/round.ts +++ b/src/client/round.ts @@ -17,7 +17,7 @@ export default class Round { _lastClickTs = 0; constructor(readonly number: number, readonly _board: Board, readonly _bonusPool: BonusPool) { - this._pool = new Pool(); + this._pool = new Pool(`Round #${this.number} Routes`); this.node = this._pool.node; this._endButton.textContent = `End round #${this.number}`; diff --git a/src/css/app.less b/src/css/app.less index df78de3..3cc6e0a 100644 --- a/src/css/app.less +++ b/src/css/app.less @@ -5,6 +5,11 @@ h1, h2 { margin-bottom: 0; } +h2 { + font-size: inherit; + width: calc(var(--tile-size) * 1px); +} + body { font-family: sans-serif; margin: 0;