@thegraid/hexlib 1.0.13 → 1.1.0

package/dist/hex.js

@@ -5,8 +5,7 @@ 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. */
+/** to recognize this class in hexUnderPoint and obtain the associated hex2: IHex2 */
 export class HexCont extends Container {
     hex2;
     constructor(hex2) {
@@ -14,10 +13,14 @@ export class HexCont extends Container {
         this.hex2 = hex2;
     }
 }
-/** Base Hex, has no connection to graphics.
- * topological links to adjacent hex objects.
+function nf(n) { return `${n !== undefined ? (n === Math.floor(n)) ? n : n.toFixed(1) : ''}`; }
+/**
+ * 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 +42,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,18 +66,17 @@ 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; }
     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
+    get rcs() { return (this.row >= 0) ? `[${nf(this.row)},${nf(this.col)}]` : this.Aname.substring(4); }
+    get rowsp() { return (nf(this.row ?? -1)).padStart(2); }
+    get colsp() { return (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! */
@@ -90,6 +92,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;
@@ -181,156 +184,178 @@ export class Hex1 extends Hex {
         return `${color}@${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.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.
+/**
+ * Mixin hexlib/Hex2 with (LocalHex extends Hex1)
+ *
+ * class LocalHex1 extends Hex1Lib { ... }
+ *
+ * class LibHex2extendsLocalHex1 extends Hex2Mixin(LocalHex1) { }
+ *
+ * class LocalHex2 extends LibHex2extendsLocalHex1 { ... }
+ */
+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) {
+            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
+        }
+        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.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;
-    }
-    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 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;
+        }
+    };
 }
-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.
  *
@@ -351,11 +376,6 @@ export class HexMark extends HexShape {
         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.
@@ -393,7 +413,7 @@ export class MapCont extends Container {
         super();
         this.name = 'mapCont';
     }
-    /** initial, default, readonly Container names, fields */
+    /** initial, default, readonly Container names, fieldNames */
     static cNames = ['resaCont', 'hexCont', 'tileCont', 'markCont', 'counterCont'];
     /** actual cNames being used for this MapCont, set in addContainers() */
     _cNames = MapCont.cNames.concat();
@@ -406,7 +426,7 @@ export class MapCont extends Container {
     // capCont: Container  // for tile.capMark
     counterCont; // counters for AuctionCont
     // eventCont: Container// the eventHex & and whatever Tile is on it...
-    /** add all the layers of Containers. */
+    /** add all the layers of Containers. update this.cNames */
     addContainers(cNames = this.cNames) {
         this._cNames = cNames.concat();
         this.removeAllChildren();
@@ -438,12 +458,12 @@ export class MapCont extends Container {
 }
 /**
  * Collection of Hex *and* Graphics-Containers for Hex2
- * allStones: HSC[] and districts: Hex[]
+ * 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[]
+ * (TP.mh X TP.nh) hexes in districts;
  *
  * With a Mark and off-map: skipHex & resignHex
  *
@@ -468,8 +488,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
@@ -481,10 +502,9 @@ 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(); }
+    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
@@ -588,7 +608,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;
@@ -799,7 +819,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);
         }
     }