@jjlmoya/utils-tabletop 1.23.0 → 1.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-tabletop",
-    "version": "1.23.0",
+    "version": "1.25.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/tool/dungeon-map-generator/component.astro

@@ -16,12 +16,12 @@ const initialEvaluation = evaluateMap(initialMap, ui);
 <div class="dmg" data-dungeon-generator data-style="dungeon">
   <script is:inline type="application/json" data-ui set:html={JSON.stringify(ui)} />
   <section class="dmg-controls" aria-label={ui.styleLabel}>
-    <div class="dmg-seed-row">
-      <label class="dmg-field dmg-field--seed">
-        <span>{ui.seedLabel}</span>
-        <input name="seed" type="text" value={DEFAULT_CONFIG.seed} maxlength="48" spellcheck="false" />
-      </label>
-      <button class="dmg-shuffle" type="button" data-random-seed>{ui.randomSeed}</button>
+    <div class="dmg-field dmg-field-seed">
+      <label for="dmg-seed-input">{ui.seedLabel}</label>
+      <div class="dmg-seed-input-group">
+        <input id="dmg-seed-input" name="seed" type="text" value={DEFAULT_CONFIG.seed} maxlength="48" spellcheck="false" />
+        <button class="dmg-shuffle" type="button" data-random-seed>{ui.randomSeed}</button>
+      </div>
     </div>
 
     <fieldset class="dmg-styles">
@@ -113,6 +113,7 @@ const initialEvaluation = evaluateMap(initialMap, ui);
     <div class="dmg-actions">
       <button class="dmg-action-primary" type="button" data-export-png>{ui.exportPng}</button>
       <button type="button" data-export-svg>{ui.exportSvg}</button>
+      <button type="button" data-export-print>{ui.exportPrint}</button>
       <button type="button" data-copy-link>{ui.copyLink}</button>
       <details class="dmg-map-data">
         <summary>{ui.mapData}</summary>

package/src/tool/dungeon-map-generator/controller.ts

@@ -102,6 +102,7 @@ function bindActions(state: GeneratorState): void {
   state.root.querySelector('[data-copy-link]')?.addEventListener('click', () => void copyLink(state));
   state.root.querySelector('[data-export-svg]')?.addEventListener('click', () => exportSvg(state.map));
   state.root.querySelector('[data-export-png]')?.addEventListener('click', () => void exportPng(state.map));
+  state.root.querySelector('[data-export-print]')?.addEventListener('click', () => void exportPng(state.map, true));
   state.root.querySelector('[data-export-json]')?.addEventListener('click', () => exportJson(state.map, state.edits));
   state.root.querySelector<HTMLInputElement>('[data-import-json]')?.addEventListener('change', (event) => {
     void importJson(state, event.currentTarget as HTMLInputElement);

package/src/tool/dungeon-map-generator/dom-views.ts

@@ -11,15 +11,16 @@ interface RenderContext {
 
 const CELL = 20;
 
-export function buildMapSvg(map: DungeonMap, standalone = false): string {
+export function buildMapSvg(map: DungeonMap, standalone = false, isPrint = false): string {
   const width = map.config.columns * CELL;
   const height = map.config.rows * CELL;
+  const style = isPrint ? 'print' : map.config.style;
   const cells = map.tiles.flatMap((row, y) =>
-    row.map((tile, x) => tileSvg(tile, x, y, map.config.style))).join('');
-  const palette = standalone ? standaloneStyle(map.config.style) : '';
+    row.map((tile, x) => tileSvg(tile, x, y, style))).join('');
+  const palette = standalone ? standaloneStyle(style) : '';
   const doors = map.doors.map(doorSvg).join('');
   const hitGrid = standalone ? '' : interactionGridSvg(map);
-  return `<svg class="dmg-map dmg-map-${map.config.style}" viewBox="0 0 ${width} ${height}" role="img" aria-label="Generated dungeon map" xmlns="http://www.w3.org/2000/svg">${palette}<rect class="dmg-map-void" width="${width}" height="${height}"/>${cells}${doors}${compassSvg(width, height)}${hitGrid}</svg>`;
+  return `<svg class="dmg-map dmg-map-${style}" viewBox="0 0 ${width} ${height}" role="img" aria-label="Generated dungeon map" xmlns="http://www.w3.org/2000/svg">${palette}<rect class="dmg-map-void" width="${width}" height="${height}"/>${cells}${doors}${compassSvg(width, height)}${hitGrid}</svg>`;
 }
 
 function tileSvg(tile: Tile, x: number, y: number, style: string): string {
@@ -52,6 +53,9 @@ function interactionGridSvg(map: DungeonMap): string {
 }
 
 function standaloneStyle(style: string): string {
+  if (style === 'print') {
+    return `<style>.dmg-map-void{fill:#ffffff}.dmg-map-floor{fill:#ffffff;stroke:#333333;stroke-width:.6}.dmg-map-door line{stroke:#000000;stroke-width:4}.dmg-map-door circle{fill:#000000}.dmg-map-compass circle{fill:#ffffff;stroke:#000000;stroke-width:1}.dmg-map-compass path{fill:#000000}</style>`;
+  }
   const floor = style === 'scifi' ? '#d9f6f0' : '#ead9b7';
   const door = style === 'cavern' ? '#d7774f' : '#b98142';
   return `<style>.dmg-map-void{fill:#171b22}.dmg-map-floor{fill:${floor};stroke:#6d6253;stroke-width:.7}.dmg-map-door line{stroke:${door};stroke-width:4}.dmg-map-door circle{fill:#fff}.dmg-map-compass circle{fill:#171b22;stroke:#c5a25c;stroke-width:1}.dmg-map-compass path{fill:#c5a25c}</style>`;
@@ -91,14 +95,15 @@ function downloadBlob(blob: Blob, filename: string): void {
   URL.revokeObjectURL(url);
 }
 
-function filename(map: DungeonMap, extension: string): string {
+function filename(map: DungeonMap, extension: string, suffix = ''): string {
   const seed = map.config.seed.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
-  return `dungeon-${seed || 'map'}.${extension}`;
+  return `dungeon-${seed || 'map'}${suffix}.${extension}`;
 }
 
-export function exportSvg(map: DungeonMap): void {
-  const blob = new Blob([buildMapSvg(map, true)], { type: 'image/svg+xml;charset=utf-8' });
-  downloadBlob(blob, filename(map, 'svg'));
+export function exportSvg(map: DungeonMap, isPrint = false): void {
+  const svg = buildMapSvg(map, true, isPrint);
+  const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+  downloadBlob(blob, filename(map, 'svg', isPrint ? '-print' : ''));
 }
 
 export function exportJson(map: DungeonMap, edits: DungeonEdit[]): void {
@@ -106,18 +111,18 @@ export function exportJson(map: DungeonMap, edits: DungeonEdit[]): void {
   downloadBlob(new Blob([data], { type: 'application/json' }), filename(map, 'json'));
 }
 
-export async function exportPng(map: DungeonMap): Promise<void> {
-  const svg = buildMapSvg(map, true);
+export async function exportPng(map: DungeonMap, isPrint = false): Promise<void> {
+  const svg = buildMapSvg(map, true, isPrint);
   const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
   const source = URL.createObjectURL(blob);
   try {
-    await drawPng(map, source);
+    await drawPng(map, source, isPrint ? '-print' : '');
   } finally {
     URL.revokeObjectURL(source);
   }
 }
 
-async function drawPng(map: DungeonMap, source: string): Promise<void> {
+async function drawPng(map: DungeonMap, source: string, suffix = ''): Promise<void> {
   const image = await loadImage(source);
   const canvas = document.createElement('canvas');
   canvas.width = map.config.columns * CELL * 2;
@@ -126,7 +131,7 @@ async function drawPng(map: DungeonMap, source: string): Promise<void> {
   if (!context) return;
   context.drawImage(image, 0, 0, canvas.width, canvas.height);
   const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/png'));
-  if (blob) downloadBlob(blob, filename(map, 'png'));
+  if (blob) downloadBlob(blob, filename(map, 'png', suffix));
 }
 
 function loadImage(source: string): Promise<HTMLImageElement> {

package/src/tool/dungeon-map-generator/i18n/en.ts

@@ -40,8 +40,9 @@ const ui: DungeonMapGeneratorUI = {
   mapData: 'Map data',
   copyLink: 'Copy map link',
   linkCopied: 'Link copied',
-  exportPng: 'Download PNG',
-  exportSvg: 'Download SVG',
+  exportPng: 'Export PNG',
+  exportSvg: 'Export SVG',
+  exportPrint: 'Printable',
   exportJson: 'Save setup JSON',
   importJson: 'Open setup JSON',
   importError: 'This file does not contain a valid dungeon map setup.',

package/src/tool/dungeon-map-generator/i18n/es.ts

@@ -42,6 +42,7 @@ const ui: DungeonMapGeneratorUI = {
   linkCopied: 'Enlace copiado',
   exportPng: 'Descargar PNG',
   exportSvg: 'Descargar SVG',
+  exportPrint: 'Imprimir',
   exportJson: 'Guardar JSON',
   importJson: 'Abrir JSON',
   importError: 'Este archivo no contiene una configuración válida de mapa de mazmorra.',

package/src/tool/dungeon-map-generator/logic.ts

@@ -200,15 +200,52 @@ function carvePoint(grid: Tile[][], point: Point, style: DungeonStyle, isDoor: b
   if (style === 'scifi' && nextRow?.[point.x] !== undefined) nextRow[point.x] = 1;
 }
 
+function isRoomCorner(point: Point, rooms: Room[]): boolean {
+  return rooms.some((r) => (point.x === r.x || point.x === r.x + r.width - 1)
+    && (point.y === r.y || point.y === r.y + r.height - 1));
+}
+
+function tileAt(grid: Tile[][], x: number, y: number): Tile {
+  return grid[y]?.[x] ?? 0;
+}
+
+function isVerticalDoorFrame(grid: Tile[][], x: number, y: number): boolean {
+  const isWallPair = tileAt(grid, x, y - 1) === 0 && tileAt(grid, x, y + 1) === 0;
+  const isFloorPair = tileAt(grid, x - 1, y) !== 0 && tileAt(grid, x + 1, y) !== 0;
+  return isWallPair && isFloorPair;
+}
+
+function isHorizontalDoorFrame(grid: Tile[][], x: number, y: number): boolean {
+  const isWallPair = tileAt(grid, x - 1, y) === 0 && tileAt(grid, x + 1, y) === 0;
+  const isFloorPair = tileAt(grid, x, y - 1) !== 0 && tileAt(grid, x, y + 1) !== 0;
+  return isWallPair && isFloorPair;
+}
+
+function hasDoorWallFrame(grid: Tile[][], point: Point): boolean {
+  return isVerticalDoorFrame(grid, point.x, point.y) || isHorizontalDoorFrame(grid, point.x, point.y);
+}
+
+function filterValidDoors(grid: Tile[][], rooms: Room[], candidateDoors: Door[]): Door[] {
+  const validDoors: Door[] = [];
+  for (const door of uniqueDoors(candidateDoors)) {
+    if (isRoomCorner(door, rooms) || !hasDoorWallFrame(grid, door)) {
+      if (grid[door.y]?.[door.x] !== undefined) grid[door.y]![door.x] = 1;
+    } else {
+      validDoors.push(door);
+    }
+  }
+  return validDoors;
+}
+
 function connectRooms(grid: Tile[][], rooms: Room[], config: DungeonConfig, random: RandomSource): Door[] {
   const ordered = [...rooms].sort((a, b) => center(a).x - center(b).x);
-  const doors: Door[] = [];
+  const candidateDoors: Door[] = [];
   for (let index = 1; index < ordered.length; index += 1) {
     const from = center(ordered[index - 1]!);
     const to = center(ordered[index]!);
-    doors.push(...carvePath(grid, corridorPoints(from, to, random), config.style));
+    candidateDoors.push(...carvePath(grid, corridorPoints(from, to, random), config.style));
   }
-  return uniqueDoors(doors);
+  return filterValidDoors(grid, rooms, candidateDoors);
 }
 
 function uniqueDoors(doors: Door[]): Door[] {
@@ -232,14 +269,7 @@ export function generateDungeon(input: Partial<DungeonConfig>): DungeonMap {
   const rooms = placeRooms(config, random);
   rooms.forEach((room) => carveRoom(tiles, room, config, random));
   const doors = connectRooms(tiles, rooms, config, random);
-  return {
-    config,
-    tiles,
-    rooms,
-    doors,
-    doorCount: doors.length,
-    floorCount: countTiles(tiles, 1) + countTiles(tiles, 2),
-  };
+  return { config, tiles, rooms, doors, doorCount: doors.length, floorCount: countTiles(tiles, 1) + countTiles(tiles, 2) };
 }
 
 export function encodeConfig(config: DungeonConfig): string {
@@ -247,9 +277,5 @@ export function encodeConfig(config: DungeonConfig): string {
 }
 
 export function decodeConfig(value: string): DungeonConfig | undefined {
-  try {
-    return normalizeConfig(JSON.parse(value) as Partial<DungeonConfig>);
-  } catch {
-    return undefined;
-  }
+  try { return normalizeConfig(JSON.parse(value) as Partial<DungeonConfig>); } catch { return undefined; }
 }

package/src/tool/dungeon-map-generator/random-dungeon-map-generator.css

@@ -92,18 +92,18 @@
   border-right: 1px solid var(--n-dmg-line);
 }
 
-.dmg-seed-row {
+.dmg-field {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 0.55rem;
-  align-items: end;
+  gap: 0.4rem;
 }
 
-.dmg-field {
-  display: grid;
+.dmg-field-seed {
+  display: flex;
+  flex-direction: column;
   gap: 0.4rem;
 }
 
+.dmg-field-seed label,
 .dmg-field > span,
 .dmg-styles legend,
 .dmg-section-label,
@@ -115,6 +115,13 @@
   text-transform: uppercase;
 }
 
+.dmg-seed-input-group {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  width: 100%;
+}
+
 .dmg-field input {
   width: 100%;
   min-height: 2.65rem;
@@ -125,7 +132,13 @@
   border-radius: 0.65rem;
 }
 
+.dmg-seed-input-group input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 .dmg-shuffle {
+  flex: 0 0 auto;
   min-height: 2.65rem;
   padding: 0.55rem 0.72rem;
   color: var(--n-dmg-accent);
@@ -134,6 +147,7 @@
   border-radius: 0.65rem;
   font-size: 0.78rem;
   font-weight: 800;
+  white-space: nowrap;
 }
 
 .dmg-styles {

package/src/tool/dungeon-map-generator/ui.ts

@@ -39,6 +39,7 @@ export interface DungeonMapGeneratorUI {
   linkCopied: string;
   exportPng: string;
   exportSvg: string;
+  exportPrint: string;
   exportJson: string;
   importJson: string;
   importError: string;