Now the hand of cards is sorted, thanks to the Hand class used in Game

src/ai/greedy_player.test.js

@@ -2,6 +2,7 @@ import { hexOf } from "../lib/hexlib.js";
 import { ORDER_3_LEFT_CARD, ORDER_HEAVY_TROOPS_CARD, ORDER_LIGHT_TROOPS_CARD } from "../model/cards.js";
 import { makeMoveCommand } from "../model/commands/move_command.js";
 import makeGame from "../model/game.js";
+import { Hand } from "../model/Hand.js";
 import { MovementPhase } from "../model/phases/MovementPhase.js";
 import { NullScenario } from "../model/scenarios.js";
 import { Side } from "../model/side.js";
@@ -30,7 +31,7 @@ function cardEvaluation(game, card) {
 test('Greedy player chooses a card', () => {
     const player = new GreedyPlayer(cardEvaluation);
     const game = makeGame(new NullScenario());
-    game.handSouth = [ORDER_3_LEFT_CARD, ORDER_HEAVY_TROOPS_CARD, ORDER_LIGHT_TROOPS_CARD];
+    game.handSouth = new Hand([ORDER_3_LEFT_CARD, ORDER_HEAVY_TROOPS_CARD, ORDER_LIGHT_TROOPS_CARD]);
     game.placeUnit(hexOf(0, 0), new RomanHeavyInfantry());
     game.placeUnit(hexOf(1, 0), new RomanLightInfantry());
 

src/ai/tree_node.test.js

@@ -3,6 +3,7 @@ import { ORDER_HEAVY_TROOPS_CARD } from "../model/cards.js";
 import { makePlayCardCommand } from "../model/commands/play_card_command.js";
 import { diceReturningAlways, RESULT_HEAVY } from "../model/dice.js";
 import makeGame from "../model/game.js";
+import { Hand } from "../model/Hand.js";
 import { NullScenario } from "../model/scenarios.js";
 import { Side } from "../model/side.js";
 import { CarthaginianHeavyInfantry, RomanHeavyInfantry } from "../model/units.js";
@@ -103,7 +104,7 @@ describe('Decision node', () => {
         it('should expand the node with the valid commands', () => {
             const game = makeGame(new NullScenario());
             game.placeUnit(hexOf(0, 0), new RomanHeavyInfantry());
-            game.handSouth = [ORDER_HEAVY_TROOPS_CARD];
+            game.handSouth = new Hand([ORDER_HEAVY_TROOPS_CARD]);
             const node = new DecisionNode(game);
 
             node.expand();
@@ -119,7 +120,7 @@ describe('Decision node', () => {
             const game = makeGame(new NullScenario());
             game.placeUnit(hexOf(0, 0), new RomanHeavyInfantry());
             game.placeUnit(hexOf(1, 0), new CarthaginianHeavyInfantry());
-            game.handSouth = [ORDER_HEAVY_TROOPS_CARD];
+            game.handSouth = new Hand([ORDER_HEAVY_TROOPS_CARD]);
             game.executeCommand(game.validCommands()[0]); // play card
             game.executeCommand(game.validCommands()[0]); // end phase
             game.executeCommand(game.validCommands()[0]); // move from 0,0 to 0,1
@@ -233,7 +234,7 @@ describe('Chance node', () => {
     function evolveGameToCloseCombat(game) {
         game.placeUnit(hexOf(0, 0), new RomanHeavyInfantry());
         game.placeUnit(hexOf(1, 0), new CarthaginianHeavyInfantry());
-        game.handSouth = [ORDER_HEAVY_TROOPS_CARD];
+        game.handSouth = new Hand([ORDER_HEAVY_TROOPS_CARD]);
         game.executeCommand(game.validCommands()[0]); // play card
         game.executeCommand(game.validCommands()[0]); // end phase
         game.executeCommand(game.validCommands()[0]); // move from 0,0 to 0,1

src/interactive_game.test.js

@@ -107,6 +107,7 @@ test('click and move one unit', () => {
 test('hilighted hexes when no unit is selected', () => {
     const game = makeGame(new NullScenario());
     const interactiveGame = new InteractiveGame(game);
+    game.handSouth.add(ORDER_HEAVY_TROOPS_CARD);
     game.playCard(ORDER_HEAVY_TROOPS_CARD);
     game.placeUnit(hexOf(0, 0), new RomanHeavyInfantry());
     game.placeUnit(hexOf(0, 1), new RomanHeavyInfantry());

src/main.js

@@ -17,7 +17,7 @@ import { findHexFromPixel, MAP_HEIGHT, MAP_WIDTH, resizeCanvas, scalePoint } fro
 
 // create canvas
 const canvas = document.createElement('canvas');
-canvas.width = MAP_WIDTH + CARD_IMAGE_SIZE.x;
+canvas.width = MAP_WIDTH + 1.5*CARD_IMAGE_SIZE.x;
 canvas.height = MAP_HEIGHT + CARD_IMAGE_SIZE.y;
 document.body.appendChild(canvas);
 const graphics = new GraphicalContext(canvas.getContext('2d'));

src/model/Hand.js

@@ -30,4 +30,16 @@ export class Hand {
     _sortCards() {
         this.cards.sort((a, b) => a.order - b.order);
     }
+
+    clone() {
+        return new Hand(this.cards);
+    }
+
+    get length() {
+        return this.cards.length;
+    }
+
+    at(index) {
+        return this.cards[index];
+    }
 }

src/model/game.js

@@ -1,17 +1,12 @@
 import { Hex } from "../lib/hexlib.js";
 import { mapToString, stringify } from "../lib/to_string.js";
 import { Board } from "./board.js";
-import {
-    ORDER_3_LEFT_CARD,
-    ORDER_HEAVY_TROOPS_CARD,
-    ORDER_LIGHT_TROOPS_CARD,
-    ORDER_MEDIUM_TROOPS_CARD,
-} from "./cards.js";
 import { THE_DECK } from "./deck.js";
 import { Dice, DiceResult } from "./dice.js";
 import { SideSwitchedTo } from "./events.js";
 import GameStatus from "./game_status.js";
 import { Graveyard } from "./graveyard.js";
+import { Hand } from "./Hand.js";
 import { PlayCardPhase } from "./phases/play_card_phase.js";
 import { Unit } from "./units.js";
 
@@ -37,7 +32,9 @@ export class Game {
     unitStrengths = new Map();
     graveyard = new Graveyard();
     orderedUnits = [];
+    /** @type {Hand} */
     handNorth;
+    /** @type {Hand} */
     handSouth;
     currentCard = null;
     turnCount = 0;
@@ -56,8 +53,8 @@ export class Game {
         this.currentSideRaw = this.scenario.firstSide;
         this.scenario.placeUnitsOn(this);
         this.deck.shuffle();
-        this.handSouth = this.deck.deal(this.scenario.commandSouth);
-        this.handNorth = this.deck.deal(this.scenario.commandNorth);
+        this.handSouth = new Hand(this.deck.deal(this.scenario.commandSouth));
+        this.handNorth = new Hand(this.deck.deal(this.scenario.commandNorth));
     }
 
     toString() {
@@ -207,8 +204,8 @@ export class Game {
         game.orderedUnits = this.orderedUnits.slice();
         game.currentCard = this.currentCard;
         game.deck = this.deck.clone();
-        game.handNorth = this.handNorth.slice();
-        game.handSouth = this.handSouth.slice();
+        game.handNorth = this.handNorth.clone();
+        game.handSouth = this.handSouth.clone();
         return game;
     }
 
@@ -434,6 +431,10 @@ export class Game {
         }
     }
 
+    /**
+     * @param {Side} side
+     * @returns {Hand}
+     */
     hand(side) {
         if (!side) {
             side = this.currentSide;
@@ -466,9 +467,9 @@ export class Game {
             side = this.currentSide;
         }
         if (side === this.scenario.sideNorth) {
-            this.handNorth.push(card);
+            this.handNorth.add(card);
         } else {
-            this.handSouth.push(card);
+            this.handSouth.add(card);
         }
     }
 
@@ -477,24 +478,15 @@ export class Game {
             side = this.currentSide;
         }
         if (side === this.scenario.sideNorth) {
-            this.handNorth = this.handNorth.filter(c => c !== card);
+            this.handNorth.play(card);
         } else {
-            this.handSouth = this.handSouth.filter(c => c !== card);
+            this.handSouth.play(card);
         }
         this.deck.discard(card);
     }
 
     drawCard(side) {
-        if (!side) {
-            side = this.currentSide;
-        }
-        if (side === this.scenario.sideNorth) {
-            this.handNorth.push(this.deck.deal(1)[0]);
-        } else {
-            this.handSouth.push(this.deck.deal(1)[0]);
-        }
-        console.log(`Hand N: ${this.handNorth.map(c => c.name)}`);
-        console.log(`Hand S: ${this.handSouth.map(c => c.name)}`);
+        this.__addCardToHand(this.deck.deal(1)[0], side);
     }
 
     neighbors(hex) {

src/model/phases/play_card_phase.js

@@ -1,7 +1,7 @@
 import { CARD_IMAGE_SIZE } from "../../config.js";
-import { Phase } from "./Phase.js";
-import { makePlayCardCommand } from "../commands/play_card_command.js";
 import { MAP_HEIGHT } from "../../view/map.js";
+import { makePlayCardCommand } from "../commands/play_card_command.js";
+import { Phase } from "./Phase.js";
 
 const EMPTY_SET = new Set();
 
@@ -11,7 +11,7 @@ export class PlayCardPhase extends Phase {
     }
 
     validCommands(game) {
-        return game.hand().
+        return [...game.hand()].
             filter(card => card.eligibleUnits(game).length > 0).
             map(card => makePlayCardCommand(card));
     }
@@ -20,16 +20,19 @@ export class PlayCardPhase extends Phase {
         return EMPTY_SET;
     }
 
+    logCommands(game) {
+        game.validCommands().forEach((c, i) => console.log(i, c.toString()));
+    }
+
     onClick(hex, game, pixel) {
         if (pixel.y < MAP_HEIGHT || pixel.y > MAP_HEIGHT + CARD_IMAGE_SIZE.y) {
-            return [];
+            return undefined;
         }
         const index = Math.trunc(pixel.x / CARD_IMAGE_SIZE.x);
-        const commands = game.validCommands();
-        if (index >= commands.length) {
+        if (index >= game.handSouth.length) {
             return undefined;
         }
-        return commands[index];
+        return makePlayCardCommand(game.handSouth.at(index));
     }
 
     requiresDeepThought() {