@thegraid/hexlib 1.0.0

package/dist/hex.js

@@ -0,0 +1,714 @@
+import { C, F } from "@thegraid/easeljs-lib";
+import { Container, Point, Text } from "@thegraid/easeljs-module";
+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 ';
+export function newHSC(hex, sc, Aname = hex.Aname) { return { Aname, hex, sc }; }
+/** to recognize this class in hexUnderPoint and obtain the associated Hex2. */
+class HexCont extends Container {
+    hex2;
+    constructor(hex2) {
+        super();
+        this.hex2 = hex2;
+    }
+}
+/** Base Hex, has no connection to graphics.
+ * topological links to adjacent hex objects.
+ */
+export class Hex {
+    /** return indicated Hex from otherMap */
+    static ofMap(ihex, otherMap) {
+        try {
+            return otherMap[ihex.row][ihex.col];
+        }
+        catch (err) {
+            console.warn(`ofMap failed:`, err, { ihex, otherMap }); // eg: otherMap is different (mh,nh)
+            throw err;
+        }
+    }
+    static aname(row, col) {
+        return (row >= 0) ? `Hex@[${row},${col}]` : col == -1 ? S_Skip : S_Resign;
+    }
+    constructor(map, row, col, name = Hex.aname(row, col)) {
+        this.Aname = name;
+        this.map = map;
+        this.row = row;
+        this.col = col;
+        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 row [this.row]
+     * @param col [this.col]
+     * @returns \{ x, y, w, h, dxdc, dydr } of cell at [row, col]
+     */
+    xywh(radius = TP.hexRad, ewTopo = TP.useEwTopo, row = this.row, col = this.col) {
+        if (ewTopo) { // tiltDir = 'NE'; tilt = 30-degrees; nsTOPO
+            const h = 2 * radius, w = radius * H.sqrt3; // h height of hexagon (long-vertical axis)
+            const dxdc = w;
+            const dydr = 1.5 * radius;
+            const x = (col + Math.abs(Math.floor(row) % 2) / 2) * dxdc;
+            const y = (row) * dydr; // dist between rows
+            return { x, y, w, h, dxdc, dydr };
+        }
+        else { // tiltdir == 'N'; tile = 0-degrees; ewTOPO
+            const w = 2 * radius, h = radius * H.sqrt3; // radius * 1.732
+            const dxdc = 1.5 * radius;
+            const dydr = h;
+            const x = (col) * dxdc;
+            const y = (row + Math.abs(Math.floor(col) % 2) / 2) * dydr;
+            return { x, y, w, h, dxdc, dydr };
+        }
+    }
+    get xywh0() { return this.xywh(); } // so can see xywh from debugger
+    Aname;
+    /** reduce to serializable IHex (removes map, inf, links, etc) */
+    get iHex() { return { Aname: this.Aname, row: this.row, col: this.col }; }
+    nf(n) { return `${n !== undefined ? (n === Math.floor(n)) ? n : n.toFixed(1) : ''}`; }
+    /** [row,col] OR special name */
+    get rcs() { return (this.row >= 0) ? `[${this.nf(this.row)},${this.nf(this.col)}]` : this.Aname.substring(4); }
+    get rowsp() { return (this.nf(this.row ?? -1)).padStart(2); }
+    get colsp() { return (this.nf(this.col ?? -1)).padStart(2); } // col== -1 ? S_Skip; -2 ? S_Resign
+    /** [row,col] OR special name */
+    get rcsp() { return (this.row >= 0) ? `[${this.rowsp},${this.colsp}]` : this.Aname.substring(4).padEnd(7); }
+    /** compute ONCE, *after* HexMap is populated with all the Hex! */
+    get rc_linear() { return this._rcLinear || (this._rcLinear = this.map.rcLinear(this.row, this.col)); }
+    _rcLinear = undefined;
+    /** accessor so Hex2 can override-advise */
+    _district; // district ID
+    get district() { return this._district; }
+    set district(d) {
+        this._district = d;
+    }
+    get isOnMap() { return this.district !== undefined; } // also: (row !== undefined) && (col !== undefined)
+    _isLegal;
+    get isLegal() { return this._isLegal; }
+    set isLegal(v) { this._isLegal = v; }
+    map; // Note: this.parent == this.map.hexCont [cached] TODO: typify ??
+    row;
+    col;
+    /** Link to neighbor in each H.dirs direction [NE, E, SE, SW, W, NW] */
+    links = {};
+    get linkDirs() { return Object.keys(this.links); }
+    /** colorScheme(playerColor)@rcs */
+    toString() {
+        return `Hex@${this.rcs}`; // hex.toString => Hex@[r,c] | Hex@Skip , Hex@Resign
+    }
+    /** hex.rcspString => Hex@[ r, c] | 'Hex@Skip   ' , 'Hex@Resign ' */
+    rcspString() {
+        return `Hex@${this.rcsp}`;
+    }
+    /** convert LINKS object to Array of Hex */
+    get linkHexes() {
+        return Object.keys(this.links).map((dir) => this.links[dir]);
+    }
+    forEachLinkHex(func, inclCenter = false) {
+        if (inclCenter)
+            func(this, undefined, this);
+        this.linkDirs.forEach((dir) => func(this.links[dir], dir, this));
+    }
+    /** return HexDir to the first linked hex that satisfies predicate. */
+    findLinkHex(pred) {
+        return this.linkDirs.find((dir) => pred(this.links[dir], dir, this));
+    }
+    /** continue in HexDir until pred is satisfied. */
+    findInDir(dir, pred) {
+        let hex = this;
+        do {
+            if (pred(hex, dir, this))
+                return hex;
+        } while (!!(hex = hex.nextHex(dir)));
+        return undefined;
+    }
+    /** array of all hexes in line from dir. */
+    hexesInDir(dir, rv = []) {
+        let hex = this;
+        while (!!(hex = hex.links[dir]))
+            rv.push(hex);
+        return rv;
+    }
+    /** for each Hex in each Dir: func(hex, dir, this) */
+    forEachHexDir(func) {
+        this.linkDirs.forEach((dir) => this.hexesInDir(dir).filter(hex => !!hex).map(hex => func(hex, dir, this)));
+    }
+    nextHex(ds, ns = 1) {
+        let hex = this;
+        while (!!(hex = hex.links[ds]) && --ns > 0) { }
+        return hex;
+    }
+    /** return last Hex on axis in given direction */
+    lastHex(ds) {
+        let hex = this, nhex;
+        while (!!(nhex = hex.links[ds])) {
+            hex = nhex;
+        }
+        return hex;
+    }
+    /** distance between Hexes: adjacent = 1, based on row, col, 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);
+        let dx = tx - hx, dy = ty - hy;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+}
+/**
+ * Hex1 may be occupied by [tile?: MapTile, meep?: Meeple].
+ */
+export class Hex1 extends Hex {
+    _tile;
+    get tile() { return this._tile; }
+    set tile(tile) { this._tile = tile; } // override in Hex2!
+    // Note: set hex.tile mostly invoked from: tile.hex = hex;
+    _meep;
+    get meep() { return this._meep; }
+    set meep(meep) { this._meep = meep; }
+    get occupied() { return (this.tile || this.meep) ? [this.tile, this.meep] : undefined; }
+    /** colorScheme(playerColor)@rcs */
+    toString(sc = this.tile?.player?.color || this.meep?.player?.color) {
+        return `${sc ?? 'Empty'}@${this.rcs}`; // hex.toString => COLOR@[r,c] | COLOR@Skip , COLOR@Resign
+    }
+    /** hex.rcspString => COLOR@[ r, c] | 'COLOR@Skip   ' , 'COLOR@Resign ' */
+    rcspString(sc = this.tile?.player?.color || this.meep?.player?.color) {
+        return `${sc ?? 'Empty'}@${this.rcsp}`;
+    }
+}
+/** 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.map.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();
+        }
+    }
+    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:
+     * - polyStar Shape of radius @ (XY=0,0)
+     * - stoneIdText (user settable stoneIdText.text)
+     * - rcText (r,c)
+     * - distText (d)
+     */
+    constructor(map, row, col, name) {
+        super(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)}`, tdy = -25;
+        const rct = this.rcText = new Text(rc, F.fontSpec(26), 'white'); // radius/2 ?
+        rct.textAlign = 'center';
+        rct.y = tdy; // based on fontSize? & radius
+        this.cont.addChild(rct);
+        this.distText = new Text(``, F.fontSpec(20));
+        this.distText.textAlign = 'center';
+        this.distText.y = tdy + 46; // yc + 26+20
+        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;
+    }
+    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.map.topoRot);
+        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. */
+    edgePoint(dir) {
+        let a = H.ewDirRot[dir] * H.degToRadians, h = this.radius * H.sqrt3_2;
+        return new Point(this.x + Math.sin(a) * h, this.y - Math.cos(a) * h);
+    }
+}
+export class RecycleHex extends Hex2 {
+}
+/** for contrast paint it black AND white, leave a hole in the middle unpainted. */
+export class HexMark extends HexShape {
+    hexMap;
+    hex;
+    constructor(hexMap, radius, radius0 = 0) {
+        super(radius);
+        this.hexMap = hexMap;
+        const mark = this;
+        const cm = "rgba(127,127,127,.3)";
+        mark.graphics.f(cm).dp(0, 0, this.radius, 6, 0, this.tilt);
+        mark.cache(-radius, -radius, 2 * radius, 2 * radius);
+        mark.graphics.c().f(C.BLACK).dc(0, 0, radius0);
+        mark.updateCache("destination-out");
+        mark.setHexBounds();
+        mark.mouseEnabled = false;
+    }
+    paint(color) {
+        this.setHexBounds();
+        return this.graphics; // do not repaint.
+    }
+    // Fail: markCont to be 'above' tileCont...
+    showOn(hex) {
+        // when mark is NOT showing, this.visible === false && this.hex === undefined.
+        // when mark IS showing, this.visible === true && (this.hex instanceof Hex2)
+        if (this.hex === hex)
+            return;
+        if (this.hex) {
+            this.visible = false;
+            if (!this.hex.cont.cacheID)
+                debugger;
+            this.hex.cont.updateCache();
+        }
+        this.hex = hex;
+        if (this.hex) {
+            this.visible = true;
+            hex.cont.addChild(this);
+            if (!hex.cont.cacheID)
+                debugger;
+            hex.cont.updateCache();
+        }
+        this.hexMap.update();
+    }
+}
+export class MapCont extends Container {
+    hexMap;
+    constructor(hexMap) {
+        super();
+        this.hexMap = hexMap;
+        this.name = 'mapCont';
+    }
+    static cNames = ['resaCont', 'hexCont', 'infCont', 'tileCont', 'markCont', 'capCont', 'counterCont', 'eventCont'];
+    resaCont; // playerPanels
+    hexCont; // hex shapes on bottom stats: addChild(dsText), parent.rotation
+    infCont; // infMark below tileCont; Hex2.showInf
+    tileCont; // Tiles & Meeples on Hex2/HexMap.
+    markCont; // showMark over Hex2; LegalMark
+    capCont; // for tile.capMark
+    counterCont; // counters for AuctionCont
+    eventCont; // the eventHex & and whatever Tile is on it...
+    /** add all the layers of Containers. */
+    addContainers() {
+        MapCont.cNames.forEach(cname => {
+            const cont = new Container();
+            cont.Aname = cont.name = cname;
+            this[cname] = cont;
+            this.addChild(cont);
+        });
+    }
+}
+/**
+ * Collection of Hex *and* Graphics-Containers for Hex2
+ * allStones: HSC[] and districts: Hex[]
+ *
+ * HexMap[row][col]: Hex or Hex2 elements.
+ * If mapCont is set, then populate with Hex2
+ *
+ * (TP.mh X TP.nh) hexes in districts; allStones: HSC[]
+ *
+ * With a Mark and off-map: skipHex & resignHex
+ *
+ */
+export class HexMap extends Array {
+    hexC;
+    // A color for each District: 'rgb(198,198,198)'
+    static distColor = ['lightgrey', "limegreen", "deepskyblue", "rgb(255,165,0)", "violet", "rgb(250,80,80)", "yellow"];
+    get asHex2Map() { return this; }
+    /** Each occupied Hex, with the occupying PlayerColor  */
+    district = [];
+    hexAry; // set by makeAllDistricts()
+    mapCont = new MapCont(this.asHex2Map); // if/when using Hex2
+    //
+    //                         |    //                         |    //                         |
+    //         2        .      |  1 //         1        .      | .5 //         2/sqrt3  .      |  1/sqrt3
+    //            .            |    //            .            |    //            .            |
+    //      .                  |    //      .                  |    //      .                  |
+    //  -----------------------+    //  -----------------------+    //  -----------------------+
+    //         sqrt3                //         sqrt3/2              //         1
+    //
+    radius = TP.hexRad;
+    /** return this.centerHex.xywh() for this.topo */
+    get xywh() { return this.centerHex.xywh(); }
+    minCol = undefined; // Array.forEach does not look at negative indices!
+    maxCol = undefined; // used by rcLinear
+    minRow = undefined; // to find centerHex
+    maxRow = undefined; // to find centerHex
+    get centerHex() {
+        let cr = Math.floor(((this.maxRow ?? 0) + (this.minRow ?? 0)) / 2);
+        let cc = Math.floor(((this.minCol ?? 0) + (this.maxCol ?? 0)) / 2);
+        return this[cr][cc]; // as Hex2; as T;
+    }
+    // when called, maxRow, etc are defined...
+    get nRowCol() { return [(this.maxRow ?? 0) - (this.minRow ?? 0), (this.maxCol ?? 0) - (this.minCol ?? 0)]; }
+    getCornerHex(dn) {
+        return this.centerHex.lastHex(dn);
+    }
+    rcLinear(row, col) { return col + row * (1 + (this.maxCol ?? 0) - (this.minCol ?? 0)); }
+    metaMap = Array(); // hex0 (center Hex) of each MetaHex, has metaLinks to others.
+    mark; // a cached DisplayObject, used by showMark
+    Aname = '';
+    /**
+     * HexMap: TP.nRows X TP.nCols hexes.
+     *
+     * 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...)
+     */
+    constructor(radius = TP.hexRad, addToMapCont = false, hexC = Hex) {
+        super(); // Array<Array<Hex>>()
+        this.hexC = hexC;
+        this.radius = radius;
+        if (addToMapCont)
+            this.addToMapCont(this.hexC);
+    }
+    // the 'tilt' to apply to a HexShape to align with map.topo:
+    get topoRot() { return TP.useEwTopo ? 30 : 0; }
+    makeMark() {
+        const mark = new HexMark(this.asHex2Map, this.radius, this.radius / 2.5);
+        return mark;
+    }
+    /** create/attach Graphical components for HexMap */
+    addToMapCont(hexC) {
+        if (hexC)
+            this.hexC = hexC;
+        this.mark = this.makeMark();
+        this.mapCont.addContainers();
+        return this;
+    }
+    /** ...stage.update() */
+    update() {
+        this.mapCont.hexCont.updateCache(); // when toggleText: hexInspector
+        this.mapCont.hexCont.parent?.stage.update();
+    }
+    /** to build this HexMap: create Hex (or Hex2) and link it to neighbors. */
+    addHex(row, col, district, hexC = this.hexC) {
+        // If we have an on-screen Container, then use Hex2: (addToMapCont *before* makeAllDistricts)
+        const hex = new hexC(this, row, col);
+        hex.district = district; // and set Hex2.districtText
+        if (this[row] === undefined) { // create new row array
+            this[row] = new Array();
+            if (this.minRow === undefined || row < this.minRow)
+                this.minRow = row;
+            if (this.maxRow === undefined || row > this.maxRow)
+                this.maxRow = row;
+        }
+        if (this.minCol === undefined || col < this.minCol)
+            this.minCol = col;
+        if (this.maxCol === undefined || col > this.maxCol)
+            this.maxCol = col;
+        this[row][col] = hex; // addHex to this Array<Array<Hex>>
+        this.link(hex); // link to existing neighbors
+        return hex;
+    }
+    hexUnderObj(dragObj, legalOnly = true) {
+        const pt = dragObj.parent.localToLocal(dragObj.x, dragObj.y, this.mapCont.markCont);
+        return this.hexUnderPoint(pt.x, pt.y, legalOnly);
+    }
+    /** find first Hex matching the given predicate function */
+    findHex(fn) {
+        for (let hexRow of this) {
+            if (hexRow === undefined)
+                continue;
+            const found = hexRow.find((hex) => hex && fn(hex));
+            if (found !== undefined)
+                return found;
+        }
+        return undefined;
+    }
+    /** Array.forEach does not use negative indices: ASSERT [row,col] is non-negative (so 'of' works) */
+    forEachHex(fn) {
+        // minRow generally [0 or 1] always <= 5, so not worth it
+        //for (let ir = this.minRow || 0; ir < this.length; ir++) {
+        for (let ir of this) {
+            // beginning and end of this AND ir may be undefined
+            if (ir !== undefined)
+                for (let hex of ir) {
+                    hex !== undefined && fn(hex);
+                }
+        }
+    }
+    /** return array of results of mapping fn over each Hex */
+    mapEachHex(fn) {
+        const rv = [];
+        this.forEachHex(hex => rv.push(fn(hex)));
+        return rv;
+    }
+    /** find all Hexes matching given predicate */
+    filterEachHex(fn) {
+        const rv = [];
+        this.forEachHex(hex => fn(hex) && rv.push(hex));
+        return rv;
+    }
+    /** make this.mark visible above the given Hex */
+    showMark(hex) {
+        const mark = this.mark;
+        if (!hex) { // || hex.Aname === S_Skip || hex.Aname === S_Resign) {
+            mark.visible = false;
+        }
+        else if (hex instanceof Hex2) {
+            mark.scaleX = hex.scaleX;
+            mark.scaleY = hex.scaleY;
+            mark.visible = true;
+            // put the mark, at location of hex, on hex.markCont:
+            hex.cont.localToLocal(0, 0, hex.markCont, mark);
+            hex.markCont.addChild(mark);
+            this.update();
+        }
+    }
+    /** neighborhood topology, E-W & N-S orientation; even(n0) & odd(n1) rows: */
+    topo = TP.useEwTopo ? H.ewTopo : H.nsTopo;
+    /** see also: Hex.linkDirs */
+    get linkDirs() {
+        return TP.useEwTopo ? H.ewDirs : H.nsDirs;
+    }
+    nextRowCol(rc, dir, nt = this.topo(rc)) {
+        const ntdir = nt[dir];
+        const { dr, dc } = ntdir; // OR (nt as TopoEW[dir as EwDir]) OR simply: nt[dir]
+        let row = rc.row + dr, col = rc.col + dc;
+        return { row, col };
+    }
+    /** link hex to/from each extant neighor */
+    link(hex, rc = hex, map = this, nt = this.topo(rc), lf = (hex) => hex.links) {
+        const topoDirs = Object.keys(nt);
+        topoDirs.forEach(dir => {
+            const { dr, dc } = nt[dir]; // OR (nt as TopoEW[dir as EwDir])
+            const nr = rc.row + dr;
+            const nc = rc.col + dc;
+            const nHex = map[nr] && map[nr][nc];
+            if (!!nHex) {
+                lf(hex)[dir] = nHex;
+                lf(nHex)[H.dirRev[dir]] = hex;
+            }
+        });
+    }
+    /**
+     * The [Legal] Hex under the given x,y coordinates.
+     * If on the line, then the top (last drawn) Hex.
+     * @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)
+     */
+    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!
+        if (mark instanceof LegalMark)
+            return mark.hex2;
+        if (legal)
+            return undefined;
+        const hexc = this.mapCont.hexCont.getObjectUnderPoint(x, y, 1); // 0=all, 1=mouse-enabled (Hex, not Stone)
+        if (hexc instanceof HexCont)
+            return hexc.hex2;
+        return undefined;
+    }
+    // not sure if these will be useful:
+    _nh;
+    _mh;
+    get nh() { return this._nh; }
+    get mh() { return this._mh; }
+    /**
+     *
+     * @param nh number of hexes on on edge of metaHex
+     * @param mh order of metaHexes (greater than 0);
+     */
+    makeAllDistricts(nh = TP.nHexes, mh = TP.mHexes) {
+        this._nh = nh;
+        this._mh = mh;
+        const hexAry = this.makeDistrict(nh, 0, mh, 0); // nh hexes on outer ring; single meta-hex
+        this.mapCont.hexCont && this.centerOnContainer();
+        this.hexAry = hexAry;
+        return hexAry;
+    }
+    centerOnContainer() {
+        let mapCont = this.mapCont;
+        let hexRect = mapCont.hexCont.getBounds(); // based on aggregate of Hex2.cont.cache(bounds);
+        const { x, y, width, height } = hexRect;
+        let x0 = x + width / 2, y0 = y + height / 2;
+        MapCont.cNames.forEach(cname => {
+            const cont = mapCont[cname];
+            cont.x = -x0;
+            cont.y = -y0;
+        });
+        // mapCont.x = x0; mapCont.y = y0;
+    }
+    pickColor(hexAry) {
+        let hex = hexAry[0];
+        let adjColor = [HexMap.distColor[0]]; // colors not to use
+        this.linkDirs.forEach(hd => {
+            let nhex = hex;
+            while (!!(nhex = nhex.nextHex(hd))) {
+                if (nhex.district != hex.district) {
+                    adjColor.push(nhex.distColor);
+                    return;
+                }
+            }
+        });
+        return HexMap.distColor.find(ci => !adjColor.includes(ci)) ?? 'white'; // or undefined or ...
+    }
+    /**
+     * rings of Hex with EwTopo; HexShape(tilt = 'NE')
+     * @param nh order of inner-hex: number hexes on side of meta-hex
+     * @param district identifying number of this district
+     * @param mr make new district on meta-row
+     * @param mc make new district on meta-col
+     */
+    makeDistrict(nh, district, mr, mc) {
+        const mcp = Math.abs(mc % 2), mrp = Math.abs(mr % 2), dia = 2 * nh - 1;
+        // irow-icol define topology of MetaHex composed of HexDistrict
+        // TODO: generalize using this.topo to compute offsets!
+        const irow = (mr, mc) => {
+            let ir = mr * dia - nh * (mcp + 1) + 1;
+            ir -= Math.floor((mc) / 2); // - half a row for each metaCol
+            return ir;
+        };
+        const icol = (mr, mc, row) => {
+            let np = Math.abs(nh % 2), rp = Math.abs(row % 2);
+            let ic = Math.floor(mc * ((nh * 3 - 1) / 2));
+            ic += (nh - 1); // from left edge to center
+            ic -= Math.floor((mc + (2 - np)) / 4); // 4-metaCol means 2-rows, mean 1-col
+            ic += Math.floor((mr - rp) / 2); // 2-metaRow means +1 col
+            return ic;
+        };
+        const row0 = irow(mr, mc), col0 = icol(mr, mc, row0);
+        const hexAry = Array();
+        hexAry['Mr'] = mr;
+        hexAry['Mc'] = mc;
+        const hex = this.addHex(row0, col0, district);
+        hexAry.push(hex); // The *center* hex
+        let rc = { row: row0, col: col0 }; // == {hex.row, hex.col}
+        //console.groupCollapsed(`makelDistrict [mr: ${mr}, mc: ${mc}] hex0= ${hex.Aname}:${district}-${dcolor}`)
+        //console.log(`.makeDistrict: [mr: ${mr}, mc: ${mc}] hex0= ${hex.Aname}`, hex)
+        const dirs = this.linkDirs; // HexDirs of the extant Topo.
+        const startDir = dirs.includes('W') ? 'W' : 'WN'; // 'W' or 'WN'
+        for (let ring = 1; ring < nh; ring++) {
+            rc = this.nextRowCol(rc, startDir); // step West to start a ring
+            // place 'ring' hexes along each axis-line:
+            dirs.forEach(dir => rc = this.newHexesOnLine(ring, rc, dir, district, hexAry));
+        }
+        //console.groupEnd()
+        this.setDistrictColor(hexAry, district);
+        return hexAry;
+    }
+    setDistrictColor(hexAry, district = 0) {
+        this.district[district] = hexAry;
+        if (hexAry[0] instanceof Hex2) {
+            const hex2Ary = hexAry;
+            const dcolor = district == 0 ? HexMap.distColor[0] : this.pickColor(hex2Ary);
+            hex2Ary.forEach(hex => hex.setHexColor(dcolor)); // makeDistrict: dcolor=lightgrey
+        }
+    }
+    /**
+     *
+     * @param n number of Hex to create
+     * @param hex start with a Hex to the West of this Hex
+     * @param dir after first Hex move this Dir for each other hex
+     * @param district
+     * @param hexAry push created Hex(s) on this array
+     * @returns RC of next Hex to create (==? RC of original hex)
+     */
+    newHexesOnLine(n, rc, dir, district, hexAry) {
+        let hex;
+        for (let i = 0; i < n; i++) {
+            hexAry.push(hex = this.addHex(rc.row, rc.col, district));
+            rc = this.nextRowCol(hex, dir);
+        }
+        return rc;
+    }
+}
+/** Marker class for HexMap used by GamePlayD */
+export class HexMapD extends HexMap {
+}