@ntmats/hc-ui 0.6.0 → 0.8.0

package/dist/index.d.ts

@@ -310,6 +310,7 @@ export interface DialogProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'ti
  */
 export declare const Dialog: ForwardRefExoticComponent<DialogProps & RefAttributes<HTMLDialogElement>>;
 export type SheetPresentation = 'bottom' | 'center' | 'auto';
+export type SheetHeight = 'content' | 'half';
 interface SheetBaseProps extends Omit<DialogProps, 'size' | 'actions' | 'description' | 'closeLabel' | 'title'> {
     /** Slot under the scrolling body, for the buttons (Clear | Done). */
     footer?: ReactNode;
@@ -321,6 +322,13 @@ interface SheetBaseProps extends Omit<DialogProps, 'size' | 'actions' | 'descrip
     presentation?: SheetPresentation;
     /** Maximum width of the centered panel, in px. Default 440. */
     width?: number;
+    /**
+     * Resting height at the bottom. `content` (default) grows with the content up to almost the
+     * whole screen. `half` rests at half the screen, so what is behind stays in sight (dimmed),
+     * and the content scrolls inside; a drag up from the grabber or header still goes to full
+     * height, and a drag down from there comes back to half. No effect on the centered panel.
+     */
+    height?: SheetHeight;
 }
 /**
  * `Sheet` props. By default the sheet has a header with the title (its accessible name) and a
@@ -346,7 +354,8 @@ export type SheetProps = SheetBaseProps & ({
  * Tab trap, Esc, focus return, scroll lock, stacking and controlled `open`/`onClose`.
  * At the bottom it has a grabber, drag to close (past 20% of its height or a quick
  * flick) and drag up from the grabber or header to full height; content that has
- * scrolled down scrolls back before the sheet moves.
+ * scrolled down scrolls back before the sheet moves. `height="half"` rests at half the
+ * screen instead of growing with the content.
  */
 export declare const Sheet: ForwardRefExoticComponent<SheetProps & RefAttributes<HTMLDialogElement>>;
 export interface SheetOption<T extends string> {
@@ -1358,6 +1367,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 +1392,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 +1614,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

@@ -602,7 +602,7 @@ function useSheetDrag(sheet, latest) {
     };
   }, [sheet, latest]);
 }
-var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, footer, dismissible = true, header = true, onClose, className, style, ...props }, ref) {
+var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, height = "content", footer, dismissible = true, header = true, onClose, className, style, ...props }, ref) {
   const [node, setNode] = useState(null);
   const setRef = useCallback((element) => {
     setNode(element);
@@ -626,7 +626,8 @@ var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, foo
       headerless: !header,
       className: classes("hc-ui-sheet", className),
       style: sized,
-      "data-presentation": presentation
+      "data-presentation": presentation,
+      "data-height": height === "half" ? "half" : void 0
     }
   );
 });
@@ -2468,6 +2469,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 +2548,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 +2568,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 +3181,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 +3192,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 +3302,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/dist/styles.css

@@ -854,6 +854,11 @@
   border-radius: 20px 20px 0 0;
 }
 [data-hc-ds] .hc-ui-sheet[data-presentation='bottom'][data-closing] { animation: hc-ui-sheet-down var(--hc-dur-medium) var(--hc-ease-emphasized-accel) forwards; }
+/* height="half": rests at half the screen; the body scrolls. Expanded still wins (full height). */
+[data-hc-ds] .hc-ui-sheet[data-presentation='bottom'][data-height='half']:not([data-expanded]) {
+  height: 50dvh;
+  max-height: 50dvh;
+}
 
 @media (max-width: 959.98px) {
   [data-hc-ds] .hc-ui-sheet[data-presentation='auto'] {
@@ -888,6 +893,10 @@
     border-radius: 20px 20px 0 0;
   }
   [data-hc-ds] .hc-ui-sheet[data-presentation='auto'][data-closing] { animation: hc-ui-sheet-down var(--hc-dur-medium) var(--hc-ease-emphasized-accel) forwards; }
+  [data-hc-ds] .hc-ui-sheet[data-presentation='auto'][data-height='half']:not([data-expanded]) {
+    height: 50dvh;
+    max-height: 50dvh;
+  }
 }
 
 /* Closing by drag: the backdrop fades with the sheet instead of waiting for the exit. */

package/package.json

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