@thegraid/hexlib 1.0.9 → 1.0.11

package/dist/hex.js

@@ -7,7 +7,7 @@ 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 {
+export class HexCont extends Container {
     hex2;
     constructor(hex2) {
         super();
@@ -95,8 +95,9 @@ export class Hex {
     col;
     /** Link to neighbor in each H.dirs direction [NE, E, SE, SW, W, NW] */
     links = {};
+    metaLinks; // defined only for the center Hex of a metaHex
     get linkDirs() { return Object.keys(this.links); }
-    /** colorScheme(playerColor)@rcs */
+    /** Hex(playerColor)@rcs */
     toString() {
         return `Hex@${this.rcs}`; // hex.toString => Hex@[r,c] | Hex@Skip , Hex@Resign
     }
@@ -137,9 +138,10 @@ export class Hex {
     forEachHexDir(func) {
         this.linkDirs.forEach((dir) => this.hexesInDir(dir).filter(hex => !!hex).map(hex => func(hex, dir, this)));
     }
-    nextHex(ds, ns = 1) {
+    /** from this Hex, follow links[ds], ns times. */
+    nextHex(dir, ns = 1) {
         let hex = this;
-        while (!!(hex = hex.links[ds]) && --ns > 0) { }
+        while (!!(hex = hex.links[dir]) && --ns > 0) { }
         return hex;
     }
     /** return last Hex on axis in given direction */
@@ -170,13 +172,13 @@ export class Hex1 extends Hex {
     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
+    /** COLOR@[r,c]; COLOR = this.(tile??meep).player.color ?? Empty */
+    toString(color = (this.tile ?? this.meep)?.player?.color ?? 'Empty') {
+        return `${color}@${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}`;
+    /** COLOR@[ r, c] or COLOR@Name */
+    rcspString(color = (this.tile ?? this.meep)?.player?.color ?? 'Empty') {
+        return `${color}@${this.rcsp}`;
     }
 }
 /** One Hex cell in the game, shown as a polyStar Shape */
@@ -203,7 +205,7 @@ export class Hex2 extends Hex1 {
     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;
+        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')) {
@@ -256,7 +258,7 @@ export class Hex2 extends Hex1 {
         this.showText(true); // & this.cache()
     }
     /** set visibility of rcText & distText */
-    showText(vis = this.rcText.visible) {
+    showText(vis = !this.rcText.visible) {
         this.rcText.visible = this.distText.visible = vis;
         this.cont.updateCache();
     }
@@ -278,7 +280,7 @@ export class Hex2 extends Hex1 {
         // cont.rotation = this.map.topoRot;
     }
     makeHexShape(shape = HexShape) {
-        const hs = new shape(this.radius, this.map.topoRot);
+        const hs = new shape(this.radius);
         this.cont.addChildAt(hs, 0);
         this.cont.hitArea = hs;
         hs.paint('grey');
@@ -329,69 +331,86 @@ export class Hex2 extends Hex1 {
 }
 export class RecycleHex extends Hex2 {
 }
-/** for contrast paint it black AND white, leave a hole in the middle unpainted. */
+/**
+ * A HexShape/PaintableShape to indicate selected hex of HexMap.
+ *
+ * For contrast paint it (GREY,.3), leave a hole in the middle unpainted.
+ *
+ * @param radius of this HexShape
+ * @param radius0 of removed circle
+ * @param cm of HexShape/ring for mark ['rgba(127,127,127,.3)']
+ */
 export class HexMark extends HexShape {
-    hexMap;
     hex;
-    constructor(hexMap, radius, radius0 = 0) {
+    constructor(radius, radius0 = 0, cm = 'rgba(127,127,127,.3)') {
         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.
-    }
+        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.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.
+     *
+     * (this.hex = hex) ? hex.cont.addChild(this.cont) : this.visible = false
+     */
     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) {
+        let ohex = this.hex, map = ohex?.map;
+        if (ohex) {
             this.visible = false;
-            if (!this.hex.cont.cacheID)
+            if (!ohex.cont.cacheID)
                 debugger;
-            this.hex.cont.updateCache();
+            ohex.cont.updateCache();
+            map = ohex.map;
         }
-        this.hex = hex;
-        if (this.hex) {
+        if (hex) {
             this.visible = true;
             hex.cont.addChild(this);
             if (!hex.cont.cacheID)
                 debugger;
             hex.cont.updateCache();
+            map = hex.map;
         }
-        this.hexMap.update();
+        this.hex = hex;
+        map?.update(); // remove old hex, add new hex
     }
 }
+/** MapCont is an empty Container until .addContainers(cNames) */
 export class MapCont extends Container {
-    hexMap;
-    constructor(hexMap) {
+    constructor() {
         super();
-        this.hexMap = hexMap;
         this.name = 'mapCont';
     }
-    static cNames = ['resaCont', 'hexCont', 'infCont', 'tileCont', 'markCont', 'capCont', 'counterCont', 'eventCont'];
+    /** initial, default, readonly Container names, fields */
+    static cNames = ['resaCont', 'hexCont', 'tileCont', 'markCont', 'counterCont'];
+    /** actual cNames being used for this MapCont, set in addContainers() */
+    _cNames = MapCont.cNames.concat();
+    get cNames() { return this._cNames; }
     resaCont; // playerPanels
     hexCont; // hex shapes on bottom stats: addChild(dsText), parent.rotation
-    infCont; // infMark below tileCont; Hex2.showInf
+    // infCont: Container  // infMark below tileCont; Hex2.showInf
     tileCont; // Tiles & Meeples on Hex2/HexMap.
     markCont; // showMark over Hex2; LegalMark
-    capCont; // for tile.capMark
+    // capCont: Container  // for tile.capMark
     counterCont; // counters for AuctionCont
-    eventCont; // the eventHex & and whatever Tile is on it...
+    // eventCont: Container// the eventHex & and whatever Tile is on it...
     /** add all the layers of Containers. */
-    addContainers() {
+    addContainers(cNames = this.cNames) {
+        this._cNames = cNames.concat();
         this.removeAllChildren();
-        MapCont.cNames.forEach(cname => {
+        this.cNames.forEach(cname => {
             const cont = new Container();
             cont.Aname = cont.name = cname;
             this[cname] = cont;
@@ -401,16 +420,16 @@ export class MapCont extends Container {
     /**
      * Set hexCont(x,y) so hexMap.getBounds() is centered around mapCont(0,0);
      *
-     * [So hexCont.centerHex is at mapCont(0,0)]
+     * [Generally, hexCont.centerHex is ~ mapCont(0,0)]
      *
-     * Move ALL children of mapCont to have that same (x,y) alignment.
-     * @param hexCont use getBounds() of given Container to compute alignment.
+     * Move ALL children of this MapCont to have that same (x,y) alignment.
+     * @param bounds [hexCont.getBounds()] align containers to center of given bounds.
      */
-    centerContainers(hexCont = this.hexCont) {
-        const hexRect = hexCont.getBounds(); // based on aggregate of Hex2.cont.cache(bounds);
-        const { x, y, width, height } = hexRect;
+    centerContainers(bounds = this.hexCont.getBounds()) {
+        // based on aggregate of all added Hex2.cont; == the .cache(bounds);
+        const { x, y, width, height } = bounds;
         const x0 = x + width / 2, y0 = y + height / 2;
-        MapCont.cNames.forEach(cname => {
+        this.cNames.forEach(cname => {
             const cont = this[cname];
             cont.x = -x0;
             cont.y = -y0;
@@ -431,13 +450,29 @@ export class MapCont extends Container {
  */
 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"];
+    /**
+     * 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, Aname = 'mainMap') {
+        super(); // Array<Array<Hex>>()
+        this.hexC = hexC;
+        this.Aname = Aname;
+        this.radius = radius;
+        if (addToMapCont)
+            this.addToMapCont(this.hexC);
+    }
     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
+    mapCont = new MapCont(); // if/when using Hex2
     //
     //                         |    //                         |    //                         |
     //         2        .      |  1 //         1        .      | .5 //         2/sqrt3  .      |  1/sqrt3
@@ -446,6 +481,7 @@ export class HexMap extends Array {
     //  -----------------------+    //  -----------------------+    //  -----------------------+
     //         sqrt3                //         sqrt3/2              //         1
     //
+    allStones = [];
     radius = TP.hexRad;
     /** return this.centerHex.xywh() for this.topo */
     get xywh() { return this.centerHex.xywh(); }
@@ -453,10 +489,14 @@ export class HexMap extends Array {
     maxCol = undefined; // used by rcLinear
     minRow = undefined; // to find centerHex
     maxRow = undefined; // to find centerHex
+    get centerRC() {
+        const row = Math.floor(((this.maxRow ?? 0) + (this.minRow ?? 0)) / 2);
+        const col = Math.floor(((this.minCol ?? 0) + (this.maxCol ?? 0)) / 2);
+        return { row, col };
+    }
     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;
+        const { row, col } = this.centerRC;
+        return this[row][col]; // 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)]; }
@@ -464,41 +504,23 @@ export class HexMap extends Array {
         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 = 'mainMap';
-    /**
-     * 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);
+        const mark = new HexMark(this.radius, this.radius / 2.5);
         return mark;
     }
     /** create/attach Graphical components for HexMap */
-    addToMapCont(hexC) {
+    addToMapCont(hexC, cNames) {
         if (hexC)
             this.hexC = hexC;
+        this.mapCont.addContainers(cNames);
         this.mark = this.makeMark();
-        this.mapCont.addContainers();
         return this;
     }
-    /** ...stage.update() */
+    /** ...stage?.update() */
     update() {
-        this.mapCont.hexCont.updateCache(); // when toggleText: hexInspector
-        this.mapCont.hexCont.parent?.stage.update();
+        this.mapCont?.hexCont?.updateCache(); // when toggleText: hexInspector
+        this.mapCont?.stage?.update();
     }
     /** to build this HexMap: create Hex (or Hex2) and link it to neighbors. */
     addHex(row, col, district, hexC = this.hexC) {
@@ -581,11 +603,30 @@ export class HexMap extends Array {
     get linkDirs() {
         return TP.useEwTopo ? H.ewDirs : H.nsDirs;
     }
+    /** return a new RC; does not mutate the given RC.
+     * @return RC of adjacent Hex in given direction for given topo.
+     */
     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 };
+        return { row: rc.row + dr, col: rc.col + dc };
+    }
+    metaMap = Array(); // hex0 (center Hex) of each MetaHex, has metaLinks to others.
+    addMetaHex(hex, mrc) {
+        const metaMap = this.metaMap, { row: mr, col: mc } = mrc;
+        if (metaMap[mr] === undefined)
+            metaMap[mr] = new Array();
+        if (metaMap[mr][mc] === undefined)
+            metaMap[mr][mc] = hex;
+        this.metaLink(hex, { row: mr, col: mc });
+    }
+    /** link metaHex on metaMap; maybe need ewTopo for nh==1 ?? */
+    metaLink(hex, rc) {
+        // planner expects Dir1 & Dir2 in NsDir; nextMetaRC.mrc: NsDir
+        let nt = (this.nh == 0) ? H.ewTopo(rc) : H.nsTopo(rc); // always nsTopo!!
+        if (!hex.metaLinks)
+            hex.metaLinks = {};
+        this.link(hex, rc, this.metaMap, nt, (hex) => hex.metaLinks);
     }
     /** link hex to/from each extant neighor */
     link(hex, rc = hex, map = this, nt = this.topo(rc), lf = (hex) => hex.links) {
@@ -626,19 +667,112 @@ export class HexMap extends Array {
     _mh;
     get nh() { return this._nh; }
     get mh() { return this._mh; }
+    /** final; set size one time, then it is readonly. */
+    setSize(nh = TP.nHexes, mh = TP.mHexes) {
+        this._nh = nh;
+        this._mh = mh;
+    }
+    /** utility for makeAllDistricts; make hex0 at RC */
+    calculateRC0() {
+        // suitable for makeMetaHexes
+        const offs = Math.ceil(2 * this.nh * (this.mh - .5)); // row incr could be smaller for EwTopo
+        return { row: offs, col: offs }; // row,col to be non-negative
+    }
     /**
-     *
+     * Wrapper for makeAllHexes;
+     * setSize, calculateRC0, makeAllHexes, set this.hexAry, centerContainers()
      * @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.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();
-        this.hexAry = hexAry;
         return hexAry;
     }
+    /**
+     * overridable action for makeAllDistricts;
+     *
+     * Base implementation invokes makeMetaDistrict(nh, mh, rc0)
+     * @param nh
+     * @param mh
+     * @param rc0
+     * @return hexAry of the created hexes, becomes hexMap.hexAry
+     */
+    makeAllHexes(nh = TP.nHexes, mh = TP.mHexes, rc0) {
+        return this.makeMetaHexRings(nh, mh, rc0);
+    }
+    /**
+     * Make the center district, then make (mh-1) rings other meta-hex districts.
+     * @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
+     * @return
+     */
+    makeMetaHexRings(nh = TP.nHexes, mh = TP.mHexes, rc0, mrc = { row: 0, col: 0 }) {
+        const dL = nh, dS = (nh - 1), dirs = this.linkDirs;
+        const nextMetaRC = (rc, nd) => {
+            const dirL = dirs[nd], dirS = dirs[(nd + 5) % 6], metaD = H.nsDirs[(nd + 5) % 6];
+            rc = this.forRCsOnLine(dL, rc, dirL); // step (WS) by dist
+            rc = this.forRCsOnLine(dS, rc, dirS); // step (S) to center of 0-th metaHex
+            mrc = this.nextRowCol(mrc, metaD, H.nsTopo(mrc)); // metaMap uses nsTopo!
+            return rc;
+        };
+        // do metaRing = 0, district 0:
+        let district = 0, rc = rc0;
+        let hexAry = this.makeMetaHex(nh, district++, rc, mrc); // Central District [0]
+        for (let metaRing = 1; metaRing < mh; metaRing++) {
+            rc = nextMetaRC(rc, 4); // step in dirs[4] to initial rc (W or WS of previous rc)
+            // from rc, for each dir, step dir to center of next metaHex.
+            dirs.forEach((dirL, nd) => {
+                for (let nhc = 1; nhc <= metaRing; nhc++) {
+                    rc = nextMetaRC(rc, nd);
+                    const hexAry2 = this.makeMetaHex(nh, district++, rc, mrc);
+                    hexAry = hexAry.concat(...hexAry2);
+                }
+            });
+        }
+        return hexAry;
+    }
+    /**
+     * Make a single metaHex (district) of order nh, at hex[mr, mc]
+     *
+     * addHex for center and each of nh rings.
+     * @param nh order of the metaHex/district
+     * @param district identifying number of district
+     * @param rc location of center Hex
+     * @return array containing all the added Hexes
+     */
+    makeMetaHex(nh, district, rc, mrc) {
+        const hexAry = Array();
+        const hex = this.addHex(rc.row, rc.col, district);
+        hexAry.push(hex); // The *center* hex of district
+        this.addMetaHex(hex, mrc); // for hexline! (link centers of districts)
+        for (let ring = 1; ring < nh; ring++) {
+            rc = this.nextRowCol(rc, this.linkDirs[4]);
+            // place 'ring' of hexes, addHex along each line:
+            rc = this.ringWalk(rc, ring, this.linkDirs, (rc, dir) => {
+                hexAry.push(this.addHex(rc.row, rc.col, district));
+                return this.nextRowCol(rc, dir);
+            });
+        }
+        this.setDistrictAndPaint(hexAry, district);
+        return hexAry;
+    }
+    /**
+     * pickColor and paint all Hexes in hex2Ary
+     *
+     * Optional special color for center hex of each district
+     * @param hex2Aray a Hex2[] of hexes to be colored by pickColor(hexAry)
+     * @param district if district == 0, paint with special distColor[0]
+     * @param cColor color for center hex, else use dcolor from pickColor(hex2Ary)
+     */
+    paintDistrict(hex2Ary, district = 0, cColor) {
+        let dcolor = (district == 0) ? HexMap.distColor[0] : this.pickColor(hex2Ary);
+        hex2Ary.forEach((hex, n) => hex.setHexColor((n == 0) ? cColor ?? dcolor : dcolor));
+    }
+    /** find color not used by hex adjacent to given hexAry */
     pickColor(hexAry) {
         let hex = hexAry[0];
         let adjColor = [HexMap.distColor[0]]; // colors not to use
@@ -653,65 +787,24 @@ export class HexMap extends Array {
         });
         return HexMap.distColor.find(ci => !adjColor.includes(ci)) ?? 'white'; // or undefined or ...
     }
-    /**
-     * Make one meta-hex district.
+    /** record hexAry in this.district[district];
      *
-     * rings of this.hexC with topo derived from Hex.topo (TP.useEwTopo)
-     * @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
+     * paint each Hex using paintDistrict.
      */
-    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 hexAry = [];
-        hexAry['Mr'] = mr;
-        hexAry['Mc'] = mc;
-        const row0 = irow(mr, mc), col0 = icol(mr, mc, row0);
-        hexAry.push(this.addHex(row0, col0, district)); // make centerHex of metaHex
-        //console.groupCollapsed(`makelDistrict [mr: ${mr}, mc: ${mc}] hex0= ${hex.Aname}:${district}-${dcolor}`)
-        //console.log(`.makeDistrict: [mr: ${mr}, mc: ${mc}] hex0= ${hex.Aname}`, hex)
-        let rc = { row: row0, col: col0 };
-        for (let ring = 1; ring < nh; ring++) {
-            rc = this.ringWalk(ring, (rc, dir) => {
-                // place 'ring' hexes along each axis-line:
-                return this.newHexesOnLine(ring, rc, dir, district, hexAry);
-            });
-        }
-        //console.groupEnd()
-        this.setDistrictColor(hexAry, district);
-        return hexAry;
-    }
-    setDistrictColor(hexAry, district = 0) {
+    setDistrictAndPaint(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
+            this.paintDistrict(hexAry, district);
         }
     }
     /**
-     * Make rectangle of hexes (marked with district) created with this.hexC
+     * Make rectangle of hexes created with this.hexC.
+     *
+     * Note: district = 0; hexAry.forEach() to set alternate district.
      *
      * rnd == 1 looks best when nc is odd;
      * @param nr height
      * @param nc width [nr + 1]
-     * @param district district [0]
      * @param rnd 0: all, 1: rm end of row 0 (& half of last row!)
      * @parma half [(rnd === 1) || (nc % 2 === 1)] force/deny final half-row
      * @param hexAry array in which to push the created Hexes [Array()<T>]
@@ -726,24 +819,30 @@ export class HexMap extends Array {
         const ncOdd = (nc % 2) === 0;
         const c00 = (rnd === 0) ? 0 : 1;
         const nc0 = (rnd === 0) ? 0 : nc - (ncOdd ? 1 : 2 * c00);
-        this.addRowOfHex(nc0, 0, c00, district, hexAry);
+        this.addLineOfHex(nc0, 0, c00, district, hexAry);
         for (let row = 1; row < nr - 1; row++) {
-            this.addRowOfHex(nc, row, 0, district, hexAry);
+            this.addLineOfHex(nc, row, 0, district, hexAry);
         }
         const cf0 = (rnd === 0) ? 0 : 2;
         const ncf = nc - ((rnd === 0) ? 0 : 3);
-        const di = (half) ? 2 : 1;
-        this.addRowOfHex(ncf, nr - 1, cf0, district, hexAry, di);
-        this.setDistrictColor(hexAry, district);
-        this.hexAry = hexAry;
+        const dc = (half) ? 2 : 1;
+        this.addLineOfHex(ncf, nr - 1, cf0, district, hexAry, dc);
+        this.setDistrictAndPaint(hexAry, district);
         return hexAry;
     }
-    /** create horizontal row using addHex(row, col++, district) */
-    addRowOfHex(n, row, col, district, hexAry, di = 1) {
-        for (let i = 0; i < n; i += di) {
+    /**
+     * create horizontal row using hexAry.push(addHex(row, col++dc, district))
+     * @param maxc max col to use (esp when dc > 1)
+     * @param row
+     * @param col
+     * @param district
+     * @param hexAry
+     * @param dc delta to column [1]
+     */
+    addLineOfHex(maxc, row, col, district, hexAry, dc = 1) {
+        for (let i = 0; i < maxc; i += dc) {
             hexAry.push(this.addHex(row, col + i, district));
         }
-        return { row, col };
     }
     /**
      * Select RC location of each Hex on a line, and eval f(rc) => Hex.
@@ -755,50 +854,31 @@ export class HexMap extends Array {
      * @param n number of Hex locations to select
      * @param rc {row, col} of selected location
      * @param dir from rc, move by dir to next location
-     * @param f do 'whatever'; must return the given RC [or other RC seed for nextRowCol()!]
-     * @returns RC of n+1-th Hex on the line (where you typically change to next dir)
+     * @param f do 'whatever' based on RC
+     * @returns nextRowCol(rc, dir) from the last rc of the line.
      */
-    forRCsOnLine(n, rc, dir, f) {
+    forRCsOnLine(n, rc, dir, f = (rc) => { }) {
         for (let i = 0; i < n; i++) {
-            rc = this.nextRowCol(f(rc), dir);
+            f(rc);
+            rc = this.nextRowCol(rc, dir);
         }
         return rc;
     }
     /**
-     * Used to create rings of new Hex: this.addHex(row, col, district)
-     * @param n number of Hex to create
-     * @param rc create first Hex in given RC location
-     * @param dir after first Hex move dir for each next Hex
-     * @param district supplied to addHex()
-     * @param hexAry push created Hex(s) on this array
-     * @returns RC of next Hex location on line (typically use next direction and continue...)
-     */
-    newHexesOnLine(n, rc, dir, district, hexAry) {
-        let hex;
-        return this.forRCsOnLine(n, rc, dir, (rc) => {
-            hexAry.push(hex = this.addHex(rc.row, rc.col, district));
-            return rc;
-        });
-    }
-    /**
-     * Apply f(rc, dir) to each of 'n' RCs on nth ring.
+     * Apply f(rc, dir) to each of 'n' lines of RCs on nth ring.
      * Step from centerHex by dirs[4], do a line for each dir in dirs.
      *
      * - if topoEW: step to W; make lines going NE, E, SE, SW, W, NW
      * - if topoNS: step to WS; make lines going N, EN, ES, S, WS, WN
-     * @param n ring number
-     * @param f (RC, dir) => void
+     * @param rc start of first line (heading dirs[0])
+     * @param n ring number; number of hexes per line
      * @param dirs [this.linkDirs] each topo dirs in [clockwise] order.
+     * @param f (RC, dir) => void; run f(rc) then step to next RC
      * @return the *next* RC on the final line (so can easily spiral)
      */
-    ringWalk(n, f, dirs = this.linkDirs) {
-        const startHex = this.centerHex.nextHex(dirs[4], n);
-        let rc = { row: startHex.row, col: startHex.col };
+    ringWalk(rc, n, dirs = this.linkDirs, f) {
         dirs.forEach(dir => {
-            rc = this.forRCsOnLine(n, rc, dir, (rc) => {
-                f(rc, dir);
-                return rc;
-            });
+            rc = this.forRCsOnLine(n, rc, dir, (rc) => f(rc, dir));
         });
         return rc;
     }