@thegraid/hexlib 1.0.0

package/dist/shapes.js

@@ -0,0 +1,304 @@
+import { C, className } from "@thegraid/common-lib";
+import { CenterText } from "@thegraid/easeljs-lib";
+import { Container, Graphics, Shape, Text } from "@thegraid/easeljs-module";
+import { H } from "./hex-intfs";
+import { TP } from "./table-params";
+export class C1 {
+    static GREY = 'grey';
+    static grey = 'grey';
+    static lightgrey2 = 'rgb(225,225,225)'; // needs to contrast with WHITE influence lines
+    static lightgrey_8 = 'rgb(225,225,225,.8)'; // needs to contrast with WHITE influence lines
+}
+/**
+ * Usage: ??? [obsolete?]
+ * - ps = super.makeShape(); // ISA PaintableShape
+ * - ps.cgf = (color) => new CGF(color);
+ * - ...
+ * - ps.paint(red); --> ps.graphics = gf(red) --> new CG(red);
+ * -
+ * - const cgf: CGF = (color: string, g = new Graphics()) => {
+ * -     return g.f(this.color).dc(0, 0, rad);
+ * -   }
+ * - }
+ */
+export class PaintableShape extends Shape {
+    _cgf;
+    colorn;
+    /** initial/baseline Graphics, clone to create cgfGraphics */
+    g0;
+    /** previous/current Graphics that were rendered. (optimization... paint(color, true) to overrixe) */
+    cgfGraphics; // points to this.graphics after cgf runs.
+    /**
+     *
+     * @param _cgf Create Graphics Function
+     * @param colorn paint with this color
+     * @param g0 Graphics to clone (or create); used as baseline Graphics for each paint()
+     */
+    constructor(_cgf, colorn = C.BLACK, g0) {
+        super();
+        this._cgf = _cgf;
+        this.colorn = colorn;
+        this.g0 = g0?.clone() ?? new Graphics(); // clone, because original is NOT immutable.
+        this.name = className(this);
+    }
+    updateCacheInPaint = true; // except for unusual cases
+    get cgf() { return this._cgf; }
+    /** set new cgf; and clear "previously rendered Graphics" */
+    set cgf(cgf) {
+        this._cgf = cgf;
+        if (this.cgfGraphics) {
+            this.paint(this.colorn, true);
+        }
+    }
+    /** render graphics from cgf. */
+    paint(colorn = this.colorn, force = false) {
+        if (force || this.graphics !== this.cgfGraphics || this.colorn !== colorn) {
+            // need to repaint, even if same color:
+            this.graphics = this.g0.clone(); // reset to initial Graphics.
+            this.graphics = this.cgfGraphics = this.cgf(this.colorn = colorn); // apply this.cgf(color)
+            if (this.updateCacheInPaint && this.cacheID)
+                this.updateCache();
+        }
+        return this.graphics;
+    }
+}
+/**
+ * The colored PaintableShape that fills a Hex.
+ * @param radius in call to drawPolyStar()
+ */
+export class HexShape extends PaintableShape {
+    radius;
+    tilt;
+    constructor(radius = TP.hexRad, tilt = TP.useEwTopo ? 30 : 0) {
+        super((fillc) => this.hscgf(fillc));
+        this.radius = radius;
+        this.tilt = tilt;
+        this.setHexBounds(); // Assert radius & tilt are readonly, so bounds never changes!
+    }
+    setHexBounds(r = this.radius, tilt = this.tilt) {
+        const b = H.hexBounds(r, tilt);
+        this.setBounds(b.x, b.y, b.width, b.height);
+    }
+    setCacheID() {
+        const b = this.getBounds(); // Bounds are set
+        this.cache(b.x, b.y, b.width, b.height);
+    }
+    /**
+     * Draw a Hexagon 1/60th inside the given radius.
+     * overrides should include call to setHexBounds(radius, angle)
+     * or in other way setBounds().
+     */
+    hscgf(color, g0 = this.graphics) {
+        return g0.f(color).dp(0, 0, Math.floor(this.radius * 59 / 60), 6, 0, this.tilt); // 30 or 0
+    }
+}
+export class EllipseShape extends PaintableShape {
+    fillc;
+    radx;
+    rady;
+    strokec;
+    /**
+     * ellipse centered on (0,0), axis is NS/EW, rotate after.
+     * @param radx radius in x dir
+     * @param rady radisu in y dir
+     * retain g0, to use as baseline Graphics for each paint()
+     */
+    constructor(fillc = C.white, radx = 30, rady = 30, strokec = C.black, g0) {
+        super((fillc) => this.cscgf(fillc), strokec, g0);
+        this.fillc = fillc;
+        this.radx = radx;
+        this.rady = rady;
+        this.strokec = strokec;
+        this._cgf = this.cscgf; // overwrite to remove indirection...
+        this.paint(fillc);
+    }
+    cscgf(fillc, g = this.g0.clone()) {
+        ((this.fillc = fillc) ? g.f(fillc) : g.ef());
+        (this.strokec ? g.s(this.strokec) : g.es());
+        g.de(-this.radx, -this.rady, 2 * this.radx, 2 * this.rady); // easlejs can determine Bounds of Ellipse
+        return g;
+    }
+}
+/**
+ * Circle centered on (0,0)
+ * @param rad radius
+ * retain g0, to use as baseline Graphics for each paint()
+ */
+export class CircleShape extends EllipseShape {
+    constructor(fillc = C.white, rad = 30, strokec = C.black, g0) {
+        super(fillc, rad, rad, strokec, g0);
+    }
+}
+export class PolyShape extends PaintableShape {
+    nsides;
+    tilt;
+    fillc;
+    rad;
+    strokec;
+    constructor(nsides = 4, tilt = 0, fillc = C.white, rad = 30, strokec = C.black, g0) {
+        super((fillc) => this.pscgf(fillc), fillc, g0);
+        this.nsides = nsides;
+        this.tilt = tilt;
+        this.fillc = fillc;
+        this.rad = rad;
+        this.strokec = strokec;
+        this._cgf = this.pscgf;
+        this.paint(fillc);
+    }
+    pscgf(fillc, g = this.g0?.clone() ?? new Graphics()) {
+        ((this.fillc = fillc) ? g.f(fillc) : g.ef());
+        (this.strokec ? g.s(this.strokec) : g.es());
+        g.dp(0, 0, this.rad, this.nsides, 0, this.tilt * H.degToRadians);
+        return g;
+    }
+}
+export class RectShape extends PaintableShape {
+    fillc;
+    strokec;
+    static rectWHXY(w, h, x = -w / 2, y = -h / 2, g0 = new Graphics()) {
+        return g0.dr(x, y, w, h);
+    }
+    static rectWHXYr(w, h, x = -w / 2, y = -h / 2, r = 0, g0 = new Graphics()) {
+        return g0.rr(x, y, w, h, r);
+    }
+    /** draw rectangle suitable for given Text; with border, textAlign. */
+    static rectText(t, fs, b, align = (t instanceof Text) ? t.textAlign : 'center', g0 = new Graphics()) {
+        const txt = (t instanceof Text) ? t : new CenterText(t, fs ?? 30);
+        txt.textAlign = align;
+        if (txt.text === undefined)
+            return g0; // or RectShape.rectWHXY(0,0,0,0); ??
+        if (fs === undefined)
+            fs = txt.getMeasuredHeight();
+        if (b === undefined)
+            b = fs * .1;
+        const txtw = txt.getMeasuredWidth(), w = b + txtw + b, h = b + fs + b;
+        const x = (align == 'right') ? w - b : (align === 'left') ? -b : w / 2;
+        return RectShape.rectWHXY(w, h, -x, -h / 2, g0);
+    }
+    rect;
+    rc = 0;
+    constructor({ x = 0, y = 0, w = 30, h = 30, r = 0 }, fillc = C.white, strokec = C.black, g0) {
+        super((fillc) => this.rscgf(fillc), fillc, g0);
+        this.fillc = fillc;
+        this.strokec = strokec;
+        this._cgf = this.rscgf;
+        this.rect = { x, y, w, h };
+        this.setBounds(x, y, w, h);
+        this.rc = r;
+        this.g0 = g0?.clone() ?? new Graphics();
+        this.paint(fillc, true); // this.graphics = rscgf(...)
+    }
+    rscgf(fillc, g = this.g0?.clone() ?? new Graphics()) {
+        const { x, y, w, h } = this.rect;
+        (fillc ? g.f(fillc) : g.ef());
+        (this.strokec ? g.s(this.strokec) : g.es());
+        if (this.rc === 0) {
+            g.dr(x ?? 0, y ?? 0, w ?? 30, h ?? 30);
+        }
+        else {
+            g.rr(x ?? 0, y ?? 0, w ?? 30, h ?? 30, this.rc);
+        }
+        return g;
+    }
+}
+/** from hextowns, with translucent center. */
+export class TileShape extends HexShape {
+    static fillColor = C1.lightgrey_8; // 'rgba(200,200,200,.8)'
+    constructor(radius, tilt) {
+        super(radius, tilt); // sets Bounnds & this.cgf
+        this.cgf = this.tscgf;
+    }
+    replaceDisk(colorn, r2 = this.radius) {
+        if (!this.cacheID)
+            this.setCacheID();
+        else
+            this.updateCache(); // write curent graphics to cache
+        const g = this.graphics;
+        g.c().f(C.BLACK).dc(0, 0, r2); // bits to remove
+        this.updateCache("destination-out"); // remove disk from solid hexagon
+        g.c().f(colorn).dc(0, 0, r2); // fill with translucent disk
+        this.updateCache("source-over"); // update with new disk
+        return g;
+    }
+    bgColor = C.nameToRgbaString(C.WHITE, .8);
+    /** colored HexShape filled with very-lightgrey disk: */
+    tscgf(colorn, g0 = this.cgfGraphics?.clone() ?? new Graphics(), super_cgf = (color) => new Graphics()) {
+        // HexShape.cgf(rgba(C.WHITE, .8))
+        const g = this.graphics = super_cgf.call(this, this.bgColor); // paint HexShape(White)
+        const fillColor = C.nameToRgbaString(colorn, .8);
+        this.replaceDisk(fillColor, this.radius * H.sqrt3_2 * (55 / 60));
+        return this.graphics = g;
+    }
+}
+export class LegalMark extends Shape {
+    hex2;
+    setOnHex(hex) {
+        this.hex2 = hex;
+        const parent = hex.mapCont.markCont;
+        this.graphics.f(C.legalGreen).dc(0, 0, TP.hexRad / 2);
+        hex.cont.parent.localToLocal(hex.x, hex.y, parent, this);
+        this.hitArea = hex.hexShape; // legal mark is used for hexUnderObject, so need to cover whole hex.
+        this.mouseEnabled = true;
+        this.visible = false;
+        parent.addChild(this);
+    }
+}
+export class UtilButton extends Container {
+    fontSize;
+    textColor;
+    blocked = false;
+    shape;
+    label;
+    get label_text() { return this.label.text; }
+    set label_text(t) {
+        this.label.text = t;
+        this.paint(undefined, true);
+    }
+    constructor(color, text, fontSize = 30, textColor = C.black, cgf) {
+        super();
+        this.fontSize = fontSize;
+        this.textColor = textColor;
+        this.label = new CenterText(text, fontSize, textColor);
+        this.shape = new PaintableShape(cgf ?? ((c) => this.ubcsf(c)));
+        this.shape.paint(color);
+        this.addChild(this.shape, this.label);
+    }
+    ubcsf(color, g = new Graphics()) {
+        return RectShape.rectText(this.label.text, this.fontSize, this.fontSize * .3, this.label.textAlign, g.f(color));
+    }
+    paint(color = this.shape.colorn, force = false) {
+        return this.shape.paint(color, force);
+    }
+    /**
+     * Repaint the stage with button visible or not.
+     *
+     * Allow Chrome to finish stage.update before proceeding with afterUpdate().
+     *
+     * Other code can watch this.blocked; then call updateWait(false) to reset.
+     * @param hide true to hide and disable the turnButton
+     * @param afterUpdate callback ('drawend') when stage.update is done [none]
+     * @param scope thisArg for afterUpdate [this TurnButton]
+     * @deprecated use easeljs-lib afterUpdate(container, function)
+     */
+    updateWait(hide, afterUpdate, scope = this) {
+        this.blocked = hide;
+        this.visible = this.mouseEnabled = !hide;
+        // using @thegraid/easeljs-module@^1.1.8: on(once=true) will now 'just work'
+        afterUpdate && this.stage.on('drawend', afterUpdate, scope, true);
+        this.stage.update();
+    }
+}
+export class EdgeShape extends Shape {
+    color;
+    hex;
+    dir;
+    constructor(color, hex, dir, parent) {
+        super();
+        this.color = color;
+        this.hex = hex;
+        this.dir = dir;
+        this.reset();
+        parent.addChild(this);
+    }
+    reset(color = this.color) { this.graphics.c().ss(12, 'round', 'round').s(color); }
+}

package/dist/stream-writer.js

@@ -0,0 +1,192 @@
+import { AT, S, stime } from "@thegraid/common-lib";
+class FileBase {
+    name;
+    buttonId;
+    constructor(name = 'logFile', buttonId = "fsOpenFileButton") {
+        this.name = name;
+        this.buttonId = buttonId;
+    }
+    /** FileHandle obtained from FilePicker Button. */
+    fileHandle;
+    /** stime ident string in 'red' */
+    ident(id, color = 'red') { return AT.ansiText([color], `.${id}:`); }
+    /** multi-purpose picker button: (callback arg-type changes)
+     *
+     * @param method 'showOpenFilePicker' | 'showSaveFilePicker' | 'showDirectoryPicker'
+     * @param options from "wicg-file-system-access":
+     * - OpenFilePickerOptions { multiple?: boolean }
+     * - SaveFilePickerOptions { suggestedName?: string }
+     * - DirectoryPickerOptions {}
+     * @param cb returns the fileHandle/fileHandleAry
+     * @param inText set innerText of button ['OpenFile', 'SaveFile', 'Directory'] based on method
+     */
+    setButton(method, options, cb, inText = method.substring(4, method.length - 6)) {
+        const picker = window[method]; // showSaveFilePicker showDirectoryPicker
+        const fsOpenButton = document.getElementById(this.buttonId); // must exist!
+        fsOpenButton.innerText = inText;
+        fsOpenButton.onclick = () => {
+            picker(options).then((value) => cb(value), (rej) => console.warn(`${method} failed: `, rej));
+        };
+        return fsOpenButton;
+    }
+}
+/**
+ * Supply a button-id in HTML, when user clicks the file is opened for write-append.
+ *
+ * Other code can: new LogWriter().writeLine('first line...')
+ * to queue writes before user clicks.
+ *
+ * file is flushed/closed & re-opened after every writeLine.
+ * (so log is already saved if browser crashes...)
+ */
+export class LogWriter extends FileBase {
+    atZero;
+    atEnd;
+    /** when fulfilled, value is a WriteableFileStream; from createWriteable(). */
+    streamPromise;
+    /** WriteableFileStream Promise that is fulfilled when stream is open & ready for write */
+    async openWriteStream(fileHandle = this.fileHandle, options = { keepExistingData: true }) {
+        const promise = fileHandle.createWritable(options), thus = this;
+        this.streamPromise = promise;
+        const x = promise.then(() => this.writeBacklog(thus));
+        return promise;
+    }
+    /**
+     * @param name suggested name for write file
+     * @param atEnd insert at end-of-file; but remove before writeLine. [\n]
+     * @param buttonId DOM id of button to click to bring up FilePicker
+     */
+    constructor(name = 'logFile', atZero = '', atEnd = '\n', buttonId = "fsOpenFileButton") {
+        super(name, buttonId);
+        this.atZero = atZero;
+        this.atEnd = atEnd;
+        this.setButtonToSaveLog();
+    }
+    setButtonToSaveLog(name = this.name) {
+        const options = {
+            id: 'logWriter',
+            startIn: 'downloads',
+            suggestedName: name,
+            types: [{
+                    description: 'Text/Javascript Files',
+                    accept: { 'text/plain': ['.txt', '.js'], },
+                },],
+        };
+        // console.log(stime(this, `.new LogWriter:`), { file: this.fileHandle })
+        // Note return type changes: [FileHandle], [DirHandle], FileHandle
+        this.setButton('showSaveFilePicker', options, (fileHandle) => {
+            this.fileHandle = fileHandle;
+            this.fileName = fileHandle.name;
+            console.log(stime(this, `${this.ident('FilePicker')}.picked:`), fileHandle);
+            this.openWriteStream(fileHandle);
+        }, 'SaveLog');
+    }
+    fileName;
+    xfileName; // retain last fileName when file is closed
+    backlog = [];
+    writeLine(text = '') {
+        const wasNoBacklog = (this.backlog.length === 0);
+        this.backlog.push(`${text}\n`);
+        if (wasNoBacklog && this.streamPromise) {
+            this.writeBacklog(this); // try write new backlog.
+        }
+    }
+    showBacklog() {
+        console.log(stime(this, `.showBacklog:\n`));
+        const backlog = this.backlog.join('');
+        console.log(backlog);
+    }
+    /**
+     * called when openWriteStream has fulfilled streamPromise with a new writeableStream.
+     *
+     * or when application invokes writeline when stream is already open.
+     */
+    async writeBacklog(thus = this) {
+        //console.log(stime(this, ident), `Backlog:`, this.backlog.length, this.backlog)
+        if (thus.backlog.length > 0)
+            try {
+                const stream = await thus.streamPromise; // indicates writeable is ready
+                const fileHandle = await thus.fileHandle.getFile();
+                const size = fileHandle.size;
+                const line0 = (size === 0) ? this.atZero : '';
+                await stream.seek(Math.max(0, size - this.atEnd.length));
+                const nlines = thus.backlog.length;
+                const lines = `${line0}${this.backlog.slice(0, nlines).join('')}${this.atEnd}`; // shift all lines; commit to writing
+                await stream.write({ type: 'write', data: lines }); // write to tmp store
+                await stream.close(); // flush to file system.
+                thus.backlog.splice(0, nlines); // remove from backlog
+                thus.streamPromise = thus.openWriteStream(); // begin open new stream (streamPromise will be fullfiled)
+            }
+            catch (err) {
+                console.warn(stime(thus, thus.ident('writeBacklog')), `failed:`, err);
+                throw err;
+            }
+    }
+    async closeFile() {
+        if (this.streamPromise)
+            try {
+                const stream = await this.streamPromise;
+                const promise = stream.close();
+                this.streamPromise = undefined;
+                this.xfileName = this.fileName;
+                this.fileName = undefined;
+                return promise;
+            }
+            catch (err) {
+                console.warn(stime(this, `.closeFile failed:`), err);
+                throw err;
+            }
+    }
+    pickLogFile(name = this.name) {
+        const fsOpenButton = document.getElementById(this.buttonId);
+        this.setButtonToSaveLog(name);
+        fsOpenButton.click();
+    }
+    /** Old technique: creates a *new* file each time it saves/downloads the given Blob(text) */
+    downloadViaHiddenButton(name, text) {
+        const a = document.createElement('a');
+        let blob = new Blob([text], { type: "text/plain;charset=utf-8" });
+        a.href = URL.createObjectURL(blob);
+        a.download = name;
+        a.addEventListener(S.click, (e) => {
+            setTimeout(() => URL.revokeObjectURL(a.href), 3 * 1000); // is there no completion callback?
+        });
+        a.click();
+    }
+}
+export class LogReader extends FileBase {
+    constructor(name = 'logFile', buttonId = "fsReadFileButton") {
+        super(name, buttonId);
+    }
+    pickFileToRead() {
+        const fsOpenButton = document.getElementById(this.buttonId); // ASSERT: button element exists.
+        let fileReadPromise = this.setButtonToReadFile();
+        fsOpenButton.click();
+        return fileReadPromise;
+    }
+    /**  OpenFilePickerOptions:
+     * - types?: FilePickerAcceptType[] | undefined;
+     * - excludeAcceptAllOption?: boolean | undefined;
+     * - multiple?: false;
+     */
+    setButtonToReadFile() {
+        return new Promise((fulfill => {
+            this.setButton('showOpenFilePicker', {}, ([fileHandle]) => {
+                this.fileHandle = fileHandle;
+                fulfill(this.fileHandle.getFile());
+            }, 'LoadFile');
+        }));
+    }
+    // async readPickedFile(fileReadPromise: File | Promise<File> = this.pickFileToRead()) {
+    //   return this.readFile(await fileReadPromise)
+    // }
+    async readFile(file) {
+        return new Promise((fulfill) => {
+            let fileReader = new FileReader();
+            fileReader.onload = () => {
+                fulfill(fileReader.result);
+            };
+            fileReader.readAsText(file); // , encoding=utf-8 => void!
+        });
+    }
+}

package/dist/table-params.js

@@ -0,0 +1,48 @@
+export const playerColors = ['b', 'w']; // Player Colors!
+export const playerColorsC = ['b', 'w', 'c']; // Player Colors + Criminal!
+export const playerColor0 = playerColors[0];
+export const playerColor1 = playerColors[1];
+export const playerColor2 = playerColorsC[2];
+export function otherColor(color) { return color === playerColor0 ? playerColor1 : playerColor0; }
+export function playerColorRecord(b, w, c) { return { b, w, c }; }
+;
+export function playerColorRecordF(f) { return playerColorRecord(f(playerColor0), f(playerColor1), f(playerColor2)); }
+export function buildURL(scheme = 'wss', host = TP.ghost, domain = TP.gdomain, port = TP.gport, path = '') {
+    return `${scheme}://${host}.${domain}:${port}${path}`;
+}
+export class TP {
+    static colorScheme = playerColorRecordF(n => n);
+    static useEwTopo = true; // spiral districts require useEwTopo === true
+    static cacheTiles = 2;
+    static snapToPixel = true;
+    static textLogLines = 13;
+    static log = 0; // log level; see also: GamePlay.ll(n)
+    static numPlayers = 2;
+    static maxPlayers = 6;
+    static mapRows = 7; /// standard: 6 (AnkhMap)
+    static mapCols = 12; /// standard: 15
+    static nHexes = 6;
+    static mHexes = 1;
+    static playerRGBcolors = []; // filled by Player.initialize()
+    static autoEvent = 2000;
+    // timeout: see also 'autoEvent'
+    static moveDwell = 600;
+    static flashDwell = 500;
+    static flipDwell = 200; // chooseStartPlayer dwell between each card flip
+    static bgColor = 'rgba(155, 100, 150, .3)';
+    static bgRect = { x: -2400, y: -1000, w: 8000, h: 5000 };
+    static ghost = 'game7'; // game-setup.network()
+    static gdomain = 'thegraid.com';
+    static gport = 8447;
+    static networkUrl = 'wss://game7.thegraid.com:8447'; // URL to cgserver (wspbserver)
+    static networkGroup = 'citymap:game1';
+    static vpToWin = 20;
+    static roboDrawTile = 1.0; // Bias toward draw Tile
+    static trapNotDropTarget = true; // warn & alert when D&D to non-DropTarget
+    static hexRad = 60;
+    static meepleRad = 45;
+    static meepleY0 = 15;
+    // for AI control:
+    static maxPlys = 3;
+    static maxBreadth = 3;
+}