Add SVG layer snapshots for various components

- Added ruler layer snapshot with hidden display.
- Added scale bar layer snapshot with detailed structure and styling.
- Added temperature layer snapshot with opacity and stroke settings.
- Added terrain layer snapshot with ocean and land heights groups.
- Added vignette layer snapshot with mask and opacity settings.
- Added zones layer snapshot with specified opacity and stroke settings.

playwright.config.ts

@@ -1,14 +1,18 @@
 import { defineConfig, devices } from '@playwright/test'
 
+const isCI = !!process.env.CI
+
 export default defineConfig({
-  testDir: './e2e',
+  testDir: './tests/e2e',
   fullyParallel: true,
-  forbidOnly: !!process.env.CI,
+  forbidOnly: isCI,
-  retries: process.env.CI ? 2 : 0,
+  retries: isCI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
+  workers: isCI ? 1 : undefined,
-  reporter: [['html', { open: 'always' }]],
+  reporter: 'html',
+  // Use OS-independent snapshot names (HTML content is the same across platforms)
+  snapshotPathTemplate: '{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}{ext}',
   use: {
-    baseURL: 'http://localhost:4173',
+    baseURL: isCI ? 'http://localhost:4173' : 'http://localhost:5173',
     trace: 'on-first-retry',
     // Fixed viewport to ensure consistent map rendering
     viewport: { width: 1280, height: 720 },
@@ -20,9 +24,11 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: 'npm run build && npm run preview',
+    // In CI: build and preview for production-like testing
-    url: 'http://localhost:4173',
+    // In dev: use vite dev server (faster, no rebuild needed)
-    reuseExistingServer: !process.env.CI,
+    command: isCI ? 'npm run build && npm run preview' : 'npm run dev',
+    url: isCI ? 'http://localhost:4173' : 'http://localhost:5173',
+    reuseExistingServer: !isCI,
     timeout: 120000,
   },
 })

public/main.js

@@ -1227,8 +1227,12 @@ function showStatistics() {
     Cultures: ${pack.cultures.length - 1}`;
 
   mapId = Date.now(); // unique map id is it's creation date number
+  window.mapId = mapId; // expose for test automation
   mapHistory.push({seed, width: graphWidth, height: graphHeight, template: heightmap, created: mapId});
   INFO && console.info(stats);
+
+  // Dispatch event for test automation and external integrations
+  window.dispatchEvent(new CustomEvent('map:generated', { detail: { seed, mapId } }));
 }
 
 const regenerateMap = debounce(async function (options) {

tests/e2e/layers.spec.ts

@@ -10,24 +10,19 @@ test.describe('map layers', () => {
       localStorage.clear()
       sessionStorage.clear()
     })
-    
+
-    // Navigate with seed parameter
+    // Navigate with seed parameter and wait for full load
     // NOTE:
     // - We use a fixed seed ("test-seed") to make map generation deterministic for snapshot tests.
-    // - The resulting snapshots are platform-specific (Playwright stores them with suffixes such as
+    // - Snapshots are OS-independent (configured in playwright.config.ts).
-    //   "-darwin", "-linux", "-win32").
-    // - Currently, only macOS ("-darwin") snapshots may be present in the repository. On other
-    //   platforms (Linux/Windows), you must generate/update the corresponding snapshots for the
-    //   tests to pass, or configure Playwright to use per-platform snapshot directories.
     await page.goto('/?seed=test-seed')
-
+    
-    const mapElement = page.locator('#map')
+    // Wait for map generation to complete by checking window.mapId
-    await expect(mapElement).toBeVisible()
+    // mapId is exposed on window at the very end of showStatistics()
-
+    await page.waitForFunction(() => (window as any).mapId !== undefined, { timeout: 60000 })
-    // Wait for map generation to complete
+    
-    await expect(mapElement.locator('#terrs')).toBeAttached({ timeout: 30000 })
+    // Additional wait for any rendering/animations to settle
-    await expect(mapElement.locator('#labels')).toBeAttached()
+    await page.waitForTimeout(500)
-    await expect(page.locator('#loading')).toBeHidden({ timeout: 30000 })
   })
 
   // Ocean and water layers