@ntmats/hc-ui 0.6.0 → 0.7.0

package/dist/index.d.ts

@@ -1358,6 +1358,21 @@ export interface HCMapJson {
     ramps?: JsonRamp[];
     ziplines?: JsonWall[];
 }
+/** The grid's line between squares. */
+export declare const MAP_GRID_COLOR = "#222222";
+/** `soft` grid: the line between two plain squares (clear, at floor level). */
+export declare const MAP_GRID_SOFT_COLOR = "#D4D2CC";
+/** `soft` grid: between two squares of the same terrain, the fill darkened by this fraction. */
+export declare const MAP_GRID_TERRAIN_SHADE = 0.22;
+export interface MapDrawOptions {
+    /**
+     * `dark` (default): every square outlined in the dark grid, as printed. `soft`: the line between
+     * two plain squares (clear terrain at floor level) is light gray; between two squares of the same
+     * terrain, a darker tone of that terrain's color; between different kinds and on the map's edge,
+     * the dark grid.
+     */
+    grid?: 'dark' | 'soft';
+}
 export declare class HCMap {
     width: number;
     height: number;
@@ -1368,7 +1383,13 @@ export declare class HCMap {
     constructor(json: HCMapJson);
     private getTile;
     private tryAddEdge;
-    draw(ctx: CanvasRenderingContext2D): void;
+    /**
+     * The `soft` grid's color for the line between two squares: light gray between plain squares
+     * (clear, floor level, no starting zone), a tone of the terrain's own color between two squares
+     * of the same kind, and the dark grid between different kinds or on the map's edge.
+     */
+    private softGridColor;
+    draw(ctx: CanvasRenderingContext2D, { grid }?: MapDrawOptions): void;
     private drawWall;
 }
 export declare function mapSquare(map: HCMapJson, x: number, y: number): {
@@ -1584,6 +1605,8 @@ export interface MapBoardViewProps extends Omit<HTMLAttributes<HTMLDivElement>,
     onLeave?(): void;
     /** Drawing failed (a JSON outside the expected format). */
     onDrawError?(): void;
+    /** The grid between squares: `dark` (default) or `soft` (light between plain squares). */
+    grid?: MapDrawOptions['grid'];
 }
 /**
  * The map's 2D board: the hcmaps drawing in a canvas and, over it, the inspection's

package/dist/index.js

@@ -2468,6 +2468,16 @@ var Tile = class {
     ctx.restore();
   }
 };
+var MAP_GRID_COLOR = "#222222";
+var MAP_GRID_SOFT_COLOR = "#D4D2CC";
+var MAP_GRID_TERRAIN_SHADE = 0.22;
+function shadeHex(color, amount) {
+  const m = /^#([0-9a-f]{6})$/i.exec(color);
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  const ch = (shift) => Math.round((n >> shift & 255) * (1 - amount)).toString(16).padStart(2, "0");
+  return `#${ch(16)}${ch(8)}${ch(0)}`;
+}
 var HCMap = class {
   constructor(json) {
     __publicField(this, "width");
@@ -2537,7 +2547,19 @@ var HCMap = class {
       t0.addEdge(edgeType, MAP_TERRAIN_EDGE_COLORS[t0.terrain] ?? "#FFFFFF", dashed);
     }
   }
-  draw(ctx) {
+  /**
+   * The `soft` grid's color for the line between two squares: light gray between plain squares
+   * (clear, floor level, no starting zone), a tone of the terrain's own color between two squares
+   * of the same kind, and the dark grid between different kinds or on the map's edge.
+   */
+  softGridColor(a, b) {
+    if (!a || !b) return MAP_GRID_COLOR;
+    const same = a.terrain === b.terrain && a.type === b.type && String(a.elevation) === String(b.elevation) && !!a.isStartingZone === !!b.isStartingZone && !!a.isStartingZone4p === !!b.isStartingZone4p && a.fillStyle === b.fillStyle;
+    if (!same) return MAP_GRID_COLOR;
+    if (a.terrain === "clear" && Number(a.elevation) === 1 && !a.isStartingZone && !a.isStartingZone4p) return MAP_GRID_SOFT_COLOR;
+    return shadeHex(a.fillStyle, MAP_GRID_TERRAIN_SHADE) ?? MAP_GRID_COLOR;
+  }
+  draw(ctx, { grid = "dark" } = {}) {
     ctx.save();
     for (const tile of this.tiles) tile.draw(ctx);
     ctx.restore();
@@ -2545,11 +2567,29 @@ var HCMap = class {
     for (const tile of this.tiles) tile.drawEdges(ctx);
     ctx.restore();
     ctx.save();
-    ctx.strokeStyle = "#222222";
+    ctx.strokeStyle = MAP_GRID_COLOR;
     ctx.lineWidth = 1;
-    for (let y = 0; y < this.height; y++) {
-      for (let x = 0; x < this.width; x++) {
-        ctx.strokeRect(x * MAP_TILE_SIZE, y * MAP_TILE_SIZE, MAP_TILE_SIZE, MAP_TILE_SIZE);
+    if (grid === "dark") {
+      for (let y = 0; y < this.height; y++) {
+        for (let x = 0; x < this.width; x++) {
+          ctx.strokeRect(x * MAP_TILE_SIZE, y * MAP_TILE_SIZE, MAP_TILE_SIZE, MAP_TILE_SIZE);
+        }
+      }
+    } else {
+      const lines = [];
+      for (let y = 0; y <= this.height; y++) {
+        for (let x = 0; x < this.width; x++) lines.push({ x0: x, y0: y, x1: x + 1, y1: y, color: this.softGridColor(this.getTile(x, y - 1), this.getTile(x, y)) });
+      }
+      for (let x = 0; x <= this.width; x++) {
+        for (let y = 0; y < this.height; y++) lines.push({ x0: x, y0: y, x1: x, y1: y + 1, color: this.softGridColor(this.getTile(x - 1, y), this.getTile(x, y)) });
+      }
+      lines.sort((a, b) => Number(a.color === MAP_GRID_COLOR) - Number(b.color === MAP_GRID_COLOR));
+      for (const l of lines) {
+        ctx.strokeStyle = l.color;
+        ctx.beginPath();
+        ctx.moveTo(l.x0 * MAP_TILE_SIZE, l.y0 * MAP_TILE_SIZE);
+        ctx.lineTo(l.x1 * MAP_TILE_SIZE, l.y1 * MAP_TILE_SIZE);
+        ctx.stroke();
       }
     }
     ctx.restore();
@@ -3140,7 +3180,7 @@ function renderMapThumbnail(json, height = MAP_THUMBNAIL_HEIGHT) {
   tctx.drawImage(full, 0, 0, thumb.width, thumb.height);
   return thumb.toDataURL("image/png");
 }
-var MapBoardView = forwardRef(function MapBoardView2({ map, canvasLabel, selection, onInspect, onLeave, onDrawError, className, style, ...rest }, ref) {
+var MapBoardView = forwardRef(function MapBoardView2({ map, canvasLabel, selection, onInspect, onLeave, onDrawError, grid = "dark", className, style, ...rest }, ref) {
   const canvasRef = useRef(null);
   const failed = useRef(onDrawError);
   failed.current = onDrawError;
@@ -3151,11 +3191,11 @@ var MapBoardView = forwardRef(function MapBoardView2({ map, canvasLabel, selecti
     if (!ctx) return;
     try {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
-      new HCMap(map).draw(ctx);
+      new HCMap(map).draw(ctx, { grid });
     } catch {
       failed.current?.();
     }
-  }, [map]);
+  }, [map, grid]);
   function pointer(event) {
     const bounds = event.currentTarget.getBoundingClientRect();
     onInspect?.((event.clientX - bounds.left) / bounds.width * map.width, (event.clientY - bounds.top) / bounds.height * map.height, event.clientX, event.clientY);
@@ -3261,6 +3301,9 @@ export {
   MAP_DEFAULT_CAMERA,
   MAP_ELEVATION_EDGE_COLOR,
   MAP_ELEVATION_TILE_COLORS,
+  MAP_GRID_COLOR,
+  MAP_GRID_SOFT_COLOR,
+  MAP_GRID_TERRAIN_SHADE,
   MAP_INDOOR_EDGE_COLOR,
   MAP_SCENE_BASE_Z,
   MAP_SCENE_LEVEL_HEIGHT,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntmats/hc-ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "description": "Shared HCUI/Arena React presentation primitives.",
   "license": "UNLICENSED",