|
1 | 1 | # Fantasy Map Generator |
2 | 2 |
|
3 | | -Azgaar's Fantasy Map Generator is a web application for creating fantasy maps. It generates detailed fantasy worlds with countries, cities, rivers, biomes, and cultural elements. |
4 | | - |
5 | | -Always reference these instructions first and fallback to search or bash commands only when you encounter unexpected information that does not match the info here. |
6 | | - |
7 | | -## Working Effectively |
8 | | - |
9 | | -- The project uses NPM, Vite, and TypeScript for development and building. |
10 | | -- **Setup**: Run `npm install` to install dependencies (requires Node.js >= 24.0.0) |
11 | | -- **Development**: Run `npm run dev` to start the Vite development server |
12 | | - - Access at: `http://localhost:5173` (Vite's default port) |
13 | | - - Hot module replacement (HMR) enabled - changes are reflected immediately |
14 | | -- **Building**: Run `npm run build` to compile TypeScript and build for production |
15 | | - - TypeScript compilation runs first (`tsc`) |
16 | | - - Vite builds the application to `dist/` directory |
17 | | -- **Preview**: Run `npm run preview` to preview the production build locally |
18 | | - |
19 | | -## Validation |
20 | | - |
21 | | -- Always manually validate any changes by: |
22 | | - 1. Run `npm run dev` to start the development server (wait for "ready" message) |
23 | | - 2. Navigate to the application in browser (typically `http://localhost:5173`) |
24 | | - 3. Click the "►" button to open the menu and generate a new map |
25 | | - 4. **CRITICAL VALIDATION**: Verify the map generates with countries, cities, roads, and geographic features |
26 | | - 5. Test UI interaction: click "Layers" button, verify layer controls work |
27 | | - 6. Test regeneration: click "New Map!" button, verify new map generates correctly |
28 | | -- **Known Issues**: Google Analytics and font loading errors are normal (blocked external resources) |
29 | | -- For production build validation: run `npm run build` followed by `npm run preview` |
30 | | - |
31 | | -## Repository Structure |
32 | | - |
33 | | -### Core Files |
34 | | - |
35 | | -- `package.json` - NPM package configuration with scripts and dependencies |
36 | | -- `vite.config.ts` - Vite build configuration |
37 | | -- `tsconfig.json` - TypeScript compiler configuration |
38 | | - |
39 | | -### Source Directories |
40 | | - |
41 | | -- `src/` - Source code directory (build input) |
42 | | - - `src/index.html` - Main application entry point |
43 | | - - `src/utils/` - TypeScript utility modules (migrated from JS) |
44 | | -- `public/` - Static assets (copied to build output) |
45 | | - - `public/main.js` - Core application logic |
46 | | - - `public/versioning.js` - Version management and update handling |
47 | | - - `public/modules/` - Core functionality modules: |
48 | | - - `modules/ui/` - UI components (editors, tools, style management) |
49 | | - - `modules/dynamic/` - runtime modules (export, installation) |
50 | | - - `modules/renderers/` - drawing and rendering logic |
51 | | - - `public/styles/` - Visual style presets (JSON files) |
52 | | - - `public/libs/` - Third-party libraries (D3.js, TinyMCE, etc.) |
53 | | - - `public/images/` - Backgrounds, UI elements |
54 | | - - `public/charges/` - Heraldic symbols and coat of arms elements |
55 | | - - `public/config/` - Heightmap templates and configurations |
56 | | - - `public/heightmaps/` - Terrain generation data |
57 | | -- `dist/` - Production build output (generated by `npm run build`) |
58 | | - |
59 | | -## Common Tasks |
60 | | - |
61 | | -### Making Code Changes |
62 | | - |
63 | | -1. **TypeScript files** (`src/utils/*.ts`): |
64 | | - - Edit TypeScript files in the `src/utils/` directory |
65 | | - - Changes are automatically recompiled and hot-reloaded in dev mode |
66 | | - - Run `npm run build` to verify TypeScript compilation succeeds |
67 | | -2. **JavaScript files** (`public/*.js`, `public/modules/*.js`): |
68 | | - - Edit JavaScript files directly in the `public/` directory |
69 | | - - Changes are automatically reflected in dev mode via HMR |
70 | | - - **Note**: Core application logic is still in JavaScript and gradually being migrated |
71 | | -3. **Always test map generation** after making changes |
72 | | -4. Update version in `public/versioning.js` for all changes |
73 | | -5. For production builds, update file hashes in `src/index.html` if needed (format: `file.js?v=1.108.1`) |
74 | | - |
75 | | -### Debugging Map Generation |
76 | | - |
77 | | -- Open browser developer tools console |
78 | | -- Look for timing logs, e.g. "TOTAL: ~0.76s" |
79 | | -- Map generation logs show each step (heightmap, rivers, states, etc.) |
80 | | -- Error messages will indicate specific generation failures |
81 | | - |
82 | | -### Testing Different Map Types |
83 | | - |
84 | | -- Use "New Map!" button for quick regeneration |
85 | | -- Access "Layers" menu to change map visualization |
86 | | -- Available presets: Political, Cultural, Religions, Biomes, Heightmap, Physical, Military |
87 | | - |
88 | | -## Troubleshooting |
89 | | - |
90 | | -### Application Won't Load |
91 | | - |
92 | | -- Run `npm install` to ensure dependencies are installed |
93 | | -- Run `npm run dev` to start the development server |
94 | | -- Check console for JavaScript/TypeScript errors |
95 | | -- Verify all files are present in repository |
96 | | -- Ensure Node.js version >= 24.0.0 (`node --version`) |
97 | | - |
98 | | -### Build Failures |
99 | | - |
100 | | -- Check TypeScript compilation errors (`tsc` output) |
101 | | -- Verify all dependencies are installed (`npm install`) |
102 | | -- Check `tsconfig.json` for configuration issues |
103 | | -- Look for import/module resolution errors |
104 | | - |
105 | | -### Map Generation Fails |
106 | | - |
107 | | -- Check browser console for error messages |
108 | | -- Look for specific module failures in generation logs |
109 | | -- Try refreshing page and generating new map |
110 | | -- Verify build completed successfully if using production build |
111 | | - |
112 | | -### Performance Issues |
113 | | - |
114 | | -- Map generation should complete in ~1 second for standard configurations |
115 | | -- If slower, check browser console for errors |
116 | | -- Development mode may be slower due to HMR overhead |
117 | | - |
118 | | -Remember: This is a sophisticated application that generates complete fantasy worlds with political systems, geography, cultures, and detailed cartographic elements. The project is gradually migrating from vanilla JavaScript to TypeScript. Always validate that your changes preserve the core map generation functionality. |
| 3 | +Azgaar's Fantasy Map Generator is a client-only web application for creating fantasy maps. It generates detailed fantasy worlds with countries, cities, rivers, biomes, and cultural elements. |
| 4 | + |
| 5 | +Always reference these instructions first. |
| 6 | + |
| 7 | +# Architecture |
| 8 | + |
| 9 | +The codebase is gradually transitioning from **vanilla JavaScript to TypeScript** while maintaining compatibility with the existing generation pipeline and legacy `.map` user files. |
| 10 | + |
| 11 | +The expected **future architecture** is based on a separation between **world data**, **procedural generation**, **interactive editing**, and **rendering**. |
| 12 | + |
| 13 | +The application is conceptually divided into four main layers: |
| 14 | + |
| 15 | +- **State** — world data and style configuration, the single source of truth |
| 16 | +- **Generators** — procedural world simulation (model) |
| 17 | +- **Editors** — user-driven mutations of the world state (controllers) |
| 18 | +- **Renderer** — map visualization (view) |
| 19 | + |
| 20 | +Flow: |
| 21 | +settings → generators → world data → renderer |
| 22 | +UI → editors → world data → renderer |
| 23 | + |
| 24 | +### Layer responsibilities |
| 25 | + |
| 26 | +**State (world data)** |
| 27 | +Stores all map data and style configuration. |
| 28 | +The data layer must contain **no logic and no rendering code**. |
| 29 | + |
| 30 | +**Generators** |
| 31 | +Implement the procedural world simulation and populate or update world data based on generation settings. |
| 32 | + |
| 33 | +**Editors** |
| 34 | +Implement interactive editing tools used by the user. |
| 35 | +Editors perform controlled mutations of the world state and can be viewed as **interactive generators**. |
| 36 | + |
| 37 | +**Renderer** |
| 38 | +Converts the world state into **SVG or WebGL graphics**. |
| 39 | +Rendering must be a **pure visualization step** and must **not modify world data**. |
| 40 | + |
| 41 | +# Working Effectively |
| 42 | + |
| 43 | +The project uses **NPM**, **Vite**, and **TypeScript** for development and building. |
| 44 | + |
| 45 | +## Setup |
| 46 | + |
| 47 | +Install dependencies: `npm install` |
| 48 | + |
| 49 | +Requirements: Node.js **>= 24.0.0** |
| 50 | + |
| 51 | +## Development |
| 52 | + |
| 53 | +Start the development server: `npm run dev` |
| 54 | + |
| 55 | +Access the application at: http://localhost:5173 |
| 56 | + |
| 57 | +## Build |
| 58 | + |
| 59 | +Create a production build: `npm run build` |
| 60 | + |
| 61 | +Build steps: |
| 62 | + |
| 63 | +1. TypeScript compilation (`tsc`) |
| 64 | +2. Vite build |
| 65 | +3. Output written to `dist/` |
0 commit comments