diff --git a/DEBUG-GRID-NUMBERS.md b/DEBUG-GRID-NUMBERS.md new file mode 100644 index 00000000..d2c38b1d --- /dev/null +++ b/DEBUG-GRID-NUMBERS.md @@ -0,0 +1,48 @@ +## Grid Numbering Debug Checklist + +Looking at your screenshot, I can see the hex grid is displaying but no numbers. Here's what to check: + +### Step 1: Open the Style Panel (RIGHT sidebar) + +I see the Layers panel on the LEFT in your screenshot, but you need the **Style** panel on the RIGHT. + +**Click the "Style" tab** in the top-right area of the screen (next to "Options" and "Tools"). + +### Step 2: In the Style Panel: + +1. From the dropdown that says "Select element", choose **"Grid"** +2. You should see these options appear: + - Type: (select "Hex grid (pointy)") + - Scale + - Shift by axes + - **☑ Show grid numbers** ← CHECK THIS BOX! + - Number size + - Number color + +### Step 3: If you DON'T see "Show grid numbers" checkbox: + +The JavaScript didn't load. Open browser console (F12) and check for errors: +- Press F12 +- Click "Console" tab +- Look for any red error messages +- Take a screenshot and share it + +### Quick JavaScript Test + +Open browser console (F12) and paste this: + +```javascript +// Check if the function exists +console.log("drawGridNumbers function exists:", typeof drawGridNumbers === "function"); + +// Check grid overlay attributes +console.log("Grid data-show-numbers:", gridOverlay.attr("data-show-numbers")); + +// Manually enable grid numbering +gridOverlay.attr("data-show-numbers", "1"); +gridOverlay.attr("data-number-size", "12"); +gridOverlay.attr("data-number-color", "#000000"); +drawGrid(); +``` + +If this makes numbers appear, the code works but the UI isn't connected properly. diff --git a/GRID-NUMBERING-README.md b/GRID-NUMBERING-README.md new file mode 100644 index 00000000..7ea6ce65 --- /dev/null +++ b/GRID-NUMBERING-README.md @@ -0,0 +1,250 @@ +# Grid Auto-Numbering Feature for Azgaar Fantasy Map Generator + +## Overview + +Added sequential auto-numbering to the grid overlay system, allowing users to reference specific grid cells (e.g., "POI located in grid 0247"). Numbers are displayed centered within each grid cell with customizable size and color. + +## Features Added + +- ✅ Sequential numbering starting from top-left (0001, 0002, 0003...) +- ✅ Works with: **Pointy Hex**, **Square**, and **Truncated Square** grids +- ✅ Customizable font size (1-50px) +- ✅ Customizable color +- ✅ Toggle on/off via checkbox +- ✅ Proper centering in grid cells +- ✅ Full map coverage + +## Known Limitations + +**Grid Types Not Yet Supported**: +The following grid types require additional positioning calculations and are not currently supported: +- ❌ Hex grid (flat) +- ❌ Square 45 degrees grid +- ❌ Tetrakis square grid +- ❌ Triangle grid (horizontal) +- ❌ Triangle grid (vertical) +- ❌ Trihexagonal grid +- ❌ Rhombille grid + +The numbering feature will display on these grid types but numbers will not align correctly with cell centers. Each grid type has unique geometry that requires specific positioning logic in the `getGridCellCenter()` function. + +## Files Modified + +### 1. `index.html` +**Location**: Lines 889-910 (in `
` section) + +**Changes**: Added UI controls for grid numbering in the Style panel: +```html +