@thegraid/hexlib 1.0.14 → 1.1.3

package/dist/hex.js

@@ -1,11 +1,12 @@
 import { C, CenterText, F } from "@thegraid/easeljs-lib";
 import { Container, Point } from "@thegraid/easeljs-module";
+import { NamedContainer } from "./game-play";
 import { H } from "./hex-intfs";
 import { HexShape, LegalMark } from "./shapes";
 import { TP } from "./table-params";
 export const S_Resign = 'Hex@Resign';
 export const S_Skip = 'Hex@skip ';
-/** to recognize this class in hexUnderPoint and obtain the associated Hex2. */
+/** to recognize this class in hexUnderPoint and obtain the associated hex2: IHex2 */
 export class HexCont extends Container {
     hex2;
     constructor(hex2) {
@@ -14,10 +15,13 @@ export class HexCont extends Container {
     }
 }
 function nf(n) { return `${n !== undefined ? (n === Math.floor(n)) ? n : n.toFixed(1) : ''}`; }
-/** Base Hex, has no connection to graphics.
- * topological links to adjacent hex objects.
+/**
+ * Minimal Hex, with topological links to adjacent hex objects,
+ * has no connection to graphics.
  */
 export class Hex {
+    /** Identify Hex instance derived from Hex2Mixin; and so implements IHex2. */
+    static isIHex2(hex) { return hex.implementsIHex2; }
     /** return indicated Hex from otherMap */
     static ofMap(ihex, otherMap) {
         try {
@@ -39,8 +43,8 @@ export class Hex {
         this.links = {};
     }
     /** (x,y): center of hex; (width,height) of hex; scaled by radius if supplied
-     * @param radius [1] radius used in drawPolyStar(radius,,, H.dirRot[tiltDir])
-     * @param ewTopo [TP.useEwTopo] true -> suitable for ewTopo (long axis of hex is N/S)
+     * @param radius [TP.hexRad] 'size' of hex; radius used in drawPolyStar(radius,,, H.dirRot[tiltDir])
+     * @param ewTopo [TP.useEwTopo] true -> suitable for ewTopo (has E & W [vertical] sides)
      * @param row [this.row]
      * @param col [this.col]
      * @returns \{ x, y, w, h, dxdc, dydr } of cell at [row, col]
@@ -63,7 +67,7 @@ export class Hex {
             return { x, y, w, h, dxdc, dydr };
         }
     }
-    get xywh0() { return this.xywh(); } // so can see xywh from debugger
+    get xywh0() { return this.xywh(TP.hexRad); } // so can see xywh from debugger
     // _Aname: string;
     // get Aname() { return this._Aname; }
     // protected set Aname (name: string) { this._Aname = name; }
@@ -89,6 +93,7 @@ export class Hex {
     _isLegal;
     get isLegal() { return this._isLegal; }
     set isLegal(v) { this._isLegal = v; }
+    /** hexlib.Hex uses only the HexM slice of a HexMap. */
     map; // Note: this.parent == this.map.hexCont [cached] TODO: typify ??
     row;
     col;
@@ -151,7 +156,7 @@ export class Hex {
         }
         return hex;
     }
-    /** distance between Hexes: adjacent = 1, based on row, col, sqrt3 */
+    /** distance between Hexes: adjacent = 1, based on row, col, unit = 1 / H.sqrt3 */
     radialDist(hex) {
         let unit = 1 / H.sqrt3; // so w = delta(col) = 1
         let { x: tx, y: ty } = this.xywh(unit), { x: hx, y: hy } = hex.xywh(unit);
@@ -180,169 +185,183 @@ export class Hex1 extends Hex {
         return `${color}@${this.rcsp}`;
     }
 }
-/** Mixin Hex2Lib with (Hex1Local extends Hex1Lib) */
-export function Hex2LibMixer(Base) {
-    return class Hex2Code extends Base {
+/**
+ * Mixin hexlib/Hex2 with (LocalHex extends Hex1)
+ *
+ * class LocalHex1 extends Hex1Lib { ... }
+ *
+ * class LibHex2extendsLocalHex1 extends Hex2Mixin(LocalHex1) { }
+ *
+ * class LocalHex2 extends LibHex2extendsLocalHex1 { ... }
+ *
+ * https://www.typescriptlang.org/docs/handbook/mixins.html
+ */
+export function Hex2Mixin(Base) {
+    return class Hex2Impl extends Base {
+        /**
+          * add Hex2 to map?.mapCont.hexCont; not in map.hexAry!
+          *
+          * Hex2.cont contains:
+          * - hexShape: polyStar Shape of radius @ (XY=0,0)
+          * - rcText: '(r,c)' slightly above center, WHITE
+          * - distText: initially distText.text = `${district}` slightly below center, BLACK
+          */
         constructor(...args) {
-            super(...args); // invoke the given Base constructor: Hex2Lib
+            const [map, row, col, name] = args;
+            super(map, row, col, name); // invoke the given Base constructor: LocalHex1
+            this.constructorCode(map, row, col, name);
             return; // breakpoint able
         }
-    };
-}
-/** One Hex cell in the game, shown as a polyStar Shape */
-export class Hex2 extends Hex1 {
-    /** Child of mapCont.hexCont: HexCont holds hexShape(color), rcText, distText, capMark */
-    cont = new HexCont(this); // Hex IS-A Hex0, HAS-A HexCont Container
-    radius = TP.hexRad; // determines width & height
-    hexShape = this.makeHexShape(); // shown on this.cont: colored hexagon
-    get mapCont() { return this.map.mapCont; }
-    get markCont() { return this.mapCont.markCont; }
-    get x() { return this.cont.x; }
-    set x(v) { this.cont.x = v; }
-    get y() { return this.cont.y; }
-    set y(v) { this.cont.y = v; }
-    get scaleX() { return this.cont.scaleX; }
-    get scaleY() { return this.cont.scaleY; }
-    // if override set, then must override get!
-    get district() { return this._district; }
-    set district(d) {
-        this._district = d; // cannot use super.district = d [causes recursion, IIRC]
-        this.distText.text = `${d}`;
-    }
-    distColor; // district color of hexShape (paintHexShape)
-    distText; // shown on this.cont
-    rcText; // shown on this.cont
-    setUnit(unit, meep = false) {
-        const cont = this.mapCont.tileCont, x = this.x, y = this.y;
-        let k = true; // debug double tile
-        const this_unit = (meep ? this.meep : this.tile);
-        if (unit !== undefined && this_unit !== undefined && !(meep && this_unit.recycleVerb === 'demolished')) {
-            if (this === this_unit.source?.hex && this === unit.source?.hex) {
-                // Table.dragStart does moveTo(undefined); which triggers source.nextUnit()
-                // so if we drop to the startHex, we have a collision.
-                // Resolve by putting this_unit (the 'nextUnit') back in the source.
-                // (availUnit will recurse to set this.unit = undefined)
-                this_unit.source.availUnit(this_unit); // Meeple extends Tile, but TS seems confused.
+        implementsIHex2 = true;
+        /** Child of mapCont.hexCont: HexCont holds hexShape(color), rcText, distText, capMark */
+        cont = new HexCont(this); // Hex IS-A Hex0, HAS-A HexCont Container
+        radius = TP.hexRad; // determines width & height
+        hexShape = this.makeHexShape(); // shown on this.cont: colored hexagon
+        get mapCont() { return this.map.mapCont; }
+        get markCont() { return this.mapCont.markCont; }
+        get x() { return this.cont.x; }
+        set x(v) { this.cont.x = v; }
+        get y() { return this.cont.y; }
+        set y(v) { this.cont.y = v; }
+        get scaleX() { return this.cont.scaleX; }
+        get scaleY() { return this.cont.scaleY; }
+        // if override set, then must override get!
+        get district() { return this._district; }
+        set district(d) {
+            this._district = d; // cannot use super.district = d [causes recursion, IIRC]
+            this.distText.text = `${d}`;
+        }
+        distColor; // district color of hexShape (paintHexShape)
+        distText; // shown on this.cont
+        rcText; // shown on this.cont
+        setUnit(unit, meep = false) {
+            const cont = this.mapCont.tileCont, x = this.x, y = this.y;
+            let k = true; // debug double tile
+            const this_unit = (meep ? this.meep : this.tile);
+            if (unit !== undefined && this_unit !== undefined && !(meep && this_unit.recycleVerb === 'demolished')) {
+                if (this === this_unit.source?.hex && this === unit.source?.hex) {
+                    // Table.dragStart does moveTo(undefined); which triggers source.nextUnit()
+                    // so if we drop to the startHex, we have a collision.
+                    // Resolve by putting this_unit (the 'nextUnit') back in the source.
+                    // (availUnit will recurse to set this.unit = undefined)
+                    this_unit.source.availUnit(this_unit); // Meeple extends Tile, but TS seems confused.
+                }
+                else if (k)
+                    debugger;
+            }
+            meep ? (super.meep = unit) : (super.tile = unit); // set _meep or _tile;
+            if (unit !== undefined) {
+                unit.x = x;
+                unit.y = y;
+                cont.addChild(unit); // meep will go under tile
+                // after source.hex is set, updateCounter:
+                if (this === unit.source?.hex)
+                    unit.source.updateCounter();
             }
-            else if (k)
-                debugger;
         }
-        meep ? (super.meep = unit) : (super.tile = unit); // set _meep or _tile;
-        if (unit !== undefined) {
-            unit.x = x;
-            unit.y = y;
-            cont.addChild(unit); // meep will go under tile
-            // after source.hex is set, updateCounter:
-            if (this === unit.source?.hex)
-                unit.source.updateCounter();
+        get tile() { return super.tile; }
+        set tile(tile) { this.setUnit(tile, false); }
+        get meep() { return super.meep; }
+        set meep(meep) { this.setUnit(meep, true); }
+        constructorCode(map, row, col, name) {
+            this.initCont(row, col);
+            map?.mapCont.hexCont.addChild(this.cont);
+            this.hexShape.name = this.Aname;
+            const nf = (n) => `${n !== undefined ? (n === Math.floor(n)) ? n : n.toFixed(1) : ''}`;
+            const rc = `${nf(row)},${nf(col)}`, rcf = 26 * TP.hexRad / 60;
+            const rct = this.rcText = new CenterText(rc, F.fontSpec(rcf), 'white');
+            rct.y -= rcf / 2; // raise it up
+            this.cont.addChild(rct);
+            const dtf = 20 * TP.hexRad / 60;
+            this.distText = new CenterText(``, F.fontSpec(dtf));
+            this.distText.y += dtf; // push it down
+            this.cont.addChild(this.distText);
+            this.legalMark.setOnHex(this);
+            this.showText(true); // & this.cache()
         }
-    }
-    get tile() { return super.tile; }
-    set tile(tile) { this.setUnit(tile, false); }
-    get meep() { return super.meep; }
-    set meep(meep) { this.setUnit(meep, true); }
-    /**
-     * add Hex2 to map?.mapCont.hexCont; not in map.hexAry!
-     * Hex2.cont contains:
-     * - hexShape: polyStar Shape of radius @ (XY=0,0)
-     * - rcText: '(r,c)' slightly above center, WHITE
-     * - distText: initially distText.text = `${district}` slightly below center, BLACK
-     */
-    constructor(map, row, col, name) {
-        super(map, row, col, name);
-        this.constructorCode(map, row, col, name);
-    }
-    constructorCode(map, row, col, name) {
-        this.initCont(row, col);
-        map?.mapCont.hexCont.addChild(this.cont);
-        this.hexShape.name = this.Aname;
-        const nf = (n) => `${n !== undefined ? (n === Math.floor(n)) ? n : n.toFixed(1) : ''}`;
-        const rc = `${nf(row)},${nf(col)}`, rcf = 26 * TP.hexRad / 60;
-        const rct = this.rcText = new CenterText(rc, F.fontSpec(rcf), 'white');
-        rct.y -= rcf / 2; // raise it up
-        this.cont.addChild(rct);
-        const dtf = 20 * TP.hexRad / 60;
-        this.distText = new CenterText(``, F.fontSpec(dtf));
-        this.distText.y += dtf; // push it down
-        this.cont.addChild(this.distText);
-        this.legalMark.setOnHex(this);
-        this.showText(true); // & this.cache()
-    }
-    /** set visibility of rcText & distText */
-    showText(vis = !this.rcText.visible) {
-        this.rcText.visible = this.distText.visible = vis;
-        this.cont.updateCache();
-    }
-    legalMark = new LegalMark();
-    get isLegal() { return this._isLegal; }
-    set isLegal(v) {
-        super.isLegal = v;
-        this.legalMark.visible = v;
-    }
-    /** place this.cont; setBounds(); cont.cache() */
-    initCont(row, col) {
-        const cont = this.cont;
-        const { x, y, w, h } = this.xywh(this.radius, TP.useEwTopo, row, col); // include margin space between hexes
-        cont.x = x;
-        cont.y = y;
-        // initialize cache bounds:
-        cont.setBounds(-w / 2, -h / 2, w, h);
-        const b = cont.getBounds();
-        cont.cache(b.x, b.y, b.width, b.height);
-        // cont.rotation = this.map.topoRot;
-    }
-    makeHexShape(shape = HexShape) {
-        const hs = new shape(this.radius);
-        this.cont.addChildAt(hs, 0);
-        this.cont.hitArea = hs;
-        hs.paint('grey');
-        return hs;
-    }
-    /** set hexShape using color: draw border and fill
-     * @param color
-     * @param district if supplied, set this.district
-     */
-    setHexColor(color, district) {
-        if (district !== undefined)
-            this.district = district; // hex.setHexColor update district
-        this.distColor = color;
-        this.hexShape.paint(color);
-        this.cont.updateCache();
-    }
-    // The following were created for the map in hexmarket:
-    /** unit distance between Hexes: adjacent = 1; see also: radialDist */
-    metricDist(hex) {
-        let { x: tx, y: ty } = this.xywh(1), { x: hx, y: hy } = hex.xywh(1);
-        let dx = tx - hx, dy = ty - hy;
-        return Math.sqrt(dx * dx + dy * dy); // tw == H.sqrt3
-    }
-    /** location of corner between dir0 and dir1; in parent coordinates.
-     * @param dir0 an EwDir
-     * @param dir1 an EwDir
-     */
-    // hexmarket uses to find ewDir corner between two nsDir edges.
-    cornerPoint(dir0, dir1) {
-        const d0 = H.ewDirRot[dir0], d1 = H.ewDirRot[dir1];
-        let a2 = (d0 + d1) / 2, h = this.radius;
-        if (Math.abs(d0 - d1) > 180)
-            a2 += 180;
-        let a = a2 * H.degToRadians;
-        return new Point(this.x + Math.sin(a) * h, this.y - Math.cos(a) * h);
-    }
-    /** Location of edge point in dir; in parent coordinates.
-     * @param dir indicates direction to edge
-     * @param rad [1] per-unit distance from center: 0 --> center, 1 --> exactly on edge, 1+ --> outside hex
-     * @param point [new Point()] set location-x,y in point and return it.
-     */
-    edgePoint(dir, rad = 1, point = new Point()) {
-        const a = H.nsDirRot[dir] * H.degToRadians, h = rad * this.radius * H.sqrt3_2;
-        point.x = this.hexShape.x + Math.sin(a) * h;
-        point.y = this.hexShape.y - Math.cos(a) * h;
-        return point;
-    }
+        /** set visibility of rcText & distText */
+        showText(vis = !this.rcText.visible) {
+            this.rcText.visible = this.distText.visible = vis;
+            this.cont.updateCache();
+        }
+        legalMark = new LegalMark();
+        get isLegal() { return this._isLegal; }
+        set isLegal(v) {
+            super.isLegal = v;
+            this.legalMark.visible = v;
+        }
+        /** place this.cont; setBounds(); cont.cache() */
+        initCont(row, col) {
+            const cont = this.cont;
+            const { x, y, w, h } = this.xywh(this.radius, TP.useEwTopo, row, col); // include margin space between hexes
+            cont.x = x;
+            cont.y = y;
+            // initialize cache bounds:
+            cont.setBounds(-w / 2, -h / 2, w, h);
+            const b = cont.getBounds();
+            cont.cache(b.x, b.y, b.width, b.height);
+            // cont.rotation = this.map.topoRot;
+        }
+        makeHexShape(shape = HexShape) {
+            const hs = new shape(this.radius);
+            this.cont.addChildAt(hs, 0);
+            this.cont.hitArea = hs;
+            hs.paint('grey');
+            return hs;
+        }
+        /** set hexShape using color: draw border and fill
+         * @param color
+         * @param district if supplied, set this.district
+         */
+        setHexColor(color, district) {
+            if (district !== undefined)
+                this.district = district; // hex.setHexColor update district
+            this.distColor = color;
+            this.hexShape.paint(color);
+            this.cont.updateCache();
+        }
+        // The following were created for the map in hexmarket:
+        /** unit distance between Hexes: adjacent = 1; see also: radialDist */
+        metricDist(hex) {
+            let { x: tx, y: ty } = this.xywh(1), { x: hx, y: hy } = hex.xywh(1);
+            let dx = tx - hx, dy = ty - hy;
+            return Math.sqrt(dx * dx + dy * dy); // tw == H.sqrt3
+        }
+        /** Location of corner between dir0 and dir1; in parent coordinates.
+         * @param dir0 a HexDir
+         * @param dir1 a HexDir
+         * @param point [new Point()] set location-x,y in point and return it.
+         * @param rad [this.radius]
+         */
+        cornerPoint(dir0, dir1, point = new Point(), rad = this.radius) {
+            const d0 = H.dirRot[dir0], d1 = H.dirRot[dir1];
+            let a2 = (d0 + d1) / 2;
+            if (Math.abs(d0 - d1) > 180)
+                a2 += 180;
+            const a = a2 * H.degToRadians;
+            point.x = this.x + Math.sin(a) * rad;
+            point.y = this.y - Math.cos(a) * rad;
+            return point;
+        }
+        /** Location of edge point in dir; in parent coordinates.
+         * @param dir indicates direction to edge
+         * @param rad [1] per-unit distance from center: 0 --> center, 1 --> exactly on edge, 1+ --> outside hex
+         * @param point [new Point()] set location-x,y in point and return it.
+         */
+        edgePoint(dir, rad = 1, point = new Point()) {
+            const a = H.dirRot[dir] * H.degToRadians, h = rad * this.radius * H.sqrt3_2;
+            point.x = this.x + Math.sin(a) * h;
+            point.y = this.y - Math.cos(a) * h;
+            return point;
+        }
+    };
 }
-export class RecycleHex extends Hex2 {
+/** a default Constructor and implementation of IHex2 */
+export class Hex2 extends Hex2Mixin(Hex1) {
 }
+/** a default Constructor and impl for RecycleHex. */
+export class RecycleHex extends Hex2 {
+} // RecycleHex
 /**
  * A HexShape/PaintableShape to indicate selected hex of HexMap.
  *
@@ -359,15 +378,10 @@ export class HexMark extends HexShape {
         this.graphics.f(cm).dp(0, 0, this.radius, 6, 0, this.tilt);
         this.cache(-radius, -radius, 2 * radius, 2 * radius);
         this.graphics.c().f(C.BLACK).dc(0, 0, radius0);
-        this.updateCache("destination-out");
+        this.updateCache('destination-out');
         this.setHexBounds(); // bounds are based on readonly, should be const
         this.mouseEnabled = false;
     }
-    // don't invoke Mark.paint(new_color); TODO: remove this override.
-    // override paint(color: string): Graphics {
-    //   this.setHexBounds();    // <--- likely redundant, see HexSHape
-    //   return this.graphics;   // do not repaint.
-    // }
     // Fail: markCont to be 'above' tileCont...
     /**
      * Show or hide mark on given hex; and hex.updateCache.
@@ -423,8 +437,7 @@ export class MapCont extends Container {
         this._cNames = cNames.concat();
         this.removeAllChildren();
         this.cNames.forEach(cname => {
-            const cont = new Container();
-            cont.Aname = cont.name = cname;
+            const cont = new NamedContainer(cname);
             this[cname] = cont;
             this.addChild(cont);
         });
@@ -449,28 +462,34 @@ export class MapCont extends Container {
     }
 }
 /**
- * Collection of Hex *and* Graphics-Containers for Hex2
- * districts: Hex[]
+ * 2-D Array[row][col]: Hex; plus a mapCont of Graphics-Containers for IHex2.
+ *
+ * hexAry[n]: all the Hex (or IHex2) elements.
  *
- * HexMap[row][col]: Hex or Hex2 elements.
- * If mapCont is set, then populate with Hex2
+ * district[i]: Hex[]; all the Hex in a given district.
  *
  * (TP.mh X TP.nh) hexes in districts;
  *
- * With a Mark and off-map: skipHex & resignHex
+ * Use addToMapCont(hexC), to populate with new hexC()
+ *
+ * mark: a HexMark to visually indicate a selected IHex2.
  *
  */
 export class HexMap extends Array {
     hexC;
     Aname;
-    // A color for each District: 'rgb(198,198,198)'
-    static distColor = ['lightgrey', "limegreen", "deepskyblue", "rgb(255,165,0)", "violet", "rgb(250,80,80)", "yellow"];
+    /** A color for each District: 'rgb(198,198,198)' */
+    static distColor = ['lightgrey', 'limegreen', 'deepskyblue', 'rgb(255,165,0)', 'violet', 'rgb(250,80,80)', 'yellow'];
     /**
-     * HexMap: TP.nRows X TP.nCols hexes.
+     * HexMap: TP.nRows X TP.nCols of Hex [new hexC()]
      *
-     * Basic map is non-GUI, addToMapCont uses Hex2 elements to enable GUI interaction.
-     * @param addToMapCont use Hex2 for Hex, make Containers: hexCont, infCont, markCont, stoneCont
-     * @param hexC Constructor<T> for the Hex elements (typed as HexConstructor<Hex> for Typescript...)
+     * Basic map is non-GUI, addToMapCont(hexC) makes IHex2 elements to enable GUI interaction.
+     * Use hexC() to make Hex; mapCont has layers of Containers per HexMap.cNames;
+     *
+     * @param radius [TP.hexRad] typically 60
+     * @param addToMapCont [false] set true to include addToMapCont(hexC)
+     * @param hexC [Hex] HexConstructor\<Hex\> for each element
+     * @param Aname ['mainMap'] a name for debugger
      */
     constructor(radius = TP.hexRad, addToMapCont = false, hexC = Hex, Aname = 'mainMap') {
         super(); // Array<Array<Hex>>()
@@ -480,8 +499,9 @@ export class HexMap extends Array {
         if (addToMapCont)
             this.addToMapCont(this.hexC);
     }
-    get asHex2Map() { return this; }
-    /** Each occupied Hex, with the occupying PlayerColor  */
+    /** may be obsolete when using IHex2 */
+    get asIHex2Map() { return this; }
+    /** Each occupied Hex, with the associated district color */
     district = [];
     hexAry; // set by makeAllDistricts()
     mapCont = new MapCont(); // if/when using Hex2
@@ -495,7 +515,7 @@ export class HexMap extends Array {
     //
     radius = TP.hexRad;
     /** return this.centerHex.xywh() for this.topo */
-    get xywh() { return this.centerHex.xywh(); }
+    get xywh() { return this.centerHex.xywh(this.radius); }
     minCol = undefined; // Array.forEach does not look at negative indices!
     maxCol = undefined; // used by rcLinear
     minRow = undefined; // to find centerHex
@@ -599,7 +619,7 @@ export class HexMap extends Array {
         if (!hex) { // || hex.Aname === S_Skip || hex.Aname === S_Resign) {
             mark.visible = false;
         }
-        else if (hex instanceof Hex2) {
+        else if (Hex.isIHex2(hex)) {
             mark.scaleX = hex.scaleX;
             mark.scaleY = hex.scaleY;
             mark.visible = true;
@@ -655,16 +675,19 @@ export class HexMap extends Array {
         });
     }
     /**
-     * The [Legal] Hex (LegalMark.hex2) under the given x,y coordinates.
-     * If on the line, then the top (last drawn) Hex.
+     * Return the Hex under the given x,y coordinates.
+     *
+     * Conceptually: (legal ? LegalMark : HexCont)?.hex2 as \<T extends IHex2\>;
+     *
+     * If multiple HexCont at x,y, return the top (last drawn) HexCont.
      * @param x in local coordinates of this HexMap.mapCont
      * @param y
-     * @param legal - returnn ONLY hex with LegalMark visible & mouseenabled.
-     * @returns the Hex2 under mouse or undefined, if not a Hex (background)
+     * @param legal - return ONLY a Hex with LegalMark visible & mouseenabled.
+     * @returns the IHex2 of the LegalMark or HexCont at the given point (or undefined if no such HexCont)
      */
     hexUnderPoint(x, y, legal = true) {
         const mark = this.mapCont.markCont.getObjectUnderPoint(x, y, 1);
-        // Note: in theory, mark could be on a Hex2 that is NOT in hexCont!
+        // Note: in theory, mark could be on a IHex2 that is NOT in hexCont!
         if (mark instanceof LegalMark)
             return mark.hex2;
         if (legal)
@@ -703,13 +726,15 @@ export class HexMap extends Array {
         this.setSize(nh, mh);
         const rc0 = this.calculateRC0();
         const hexAry = this.hexAry = this.makeAllHexes(nh, mh, rc0); // nh hexes on outer ring; single meta-hex
-        this.mapCont.hexCont && this.mapCont.centerContainers();
         return hexAry;
     }
     /**
      * overridable action for makeAllDistricts;
      *
-     * Base implementation invokes makeMetaDistrict(nh, mh, rc0)
+     * Base implementation invokes makeMetaHexRings(nh, mh, rc0)
+     *
+     * Alterative: makeRect(nrow, ncol, ...)
+     *
      * @param nh
      * @param mh
      * @param rc0
@@ -720,6 +745,11 @@ export class HexMap extends Array {
     }
     /**
      * Make the center district, then make (mh-1) rings other meta-hex districts.
+     *
+     * Spiral clockwise from center, placing a line of meta-hex [using makeMetaHex()].
+     *
+     * MakeMetaHex likewise spirals from center, placing a line of Hex.
+     *
      * @param nh order [number of 'rings'] of meta-hexes (2 or 3 for this game) [TP.mHexes]
      * @param mh size ['rings' in each meta-hex] of meta-hex (1..6) [TP.nHexes]
      * @param rc0 location of initial, central Hex
@@ -810,7 +840,7 @@ export class HexMap extends Array {
      */
     setDistrictAndPaint(hexAry, district = 0) {
         this.district[district] = hexAry;
-        if (hexAry[0] instanceof Hex2) {
+        if (Hex.isIHex2(hexAry[0])) {
             this.paintDistrict(hexAry, district);
         }
     }