@plasius/hexagons 1.0.3

package/src/styles/game.module.css

@@ -0,0 +1,208 @@
+.game {
+  --bg-deep: #070d17;
+  --bg-mid: #102035;
+  --bg-bright: #1b3a5a;
+  --panel: rgba(7, 13, 23, 0.72);
+  --panel-border: rgba(163, 198, 255, 0.24);
+  --text: #e7f0ff;
+  --text-muted: #9fb4d2;
+  --accent: #78c9ff;
+  min-height: calc(100vh - 8rem);
+  padding: 1.25rem;
+  color: var(--text);
+  font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
+  background:
+    radial-gradient(120% 120% at 0% 0%, rgba(120, 201, 255, 0.2), transparent 52%),
+    radial-gradient(100% 160% at 100% 20%, rgba(141, 255, 204, 0.15), transparent 48%),
+    linear-gradient(160deg, var(--bg-bright), var(--bg-mid) 46%, var(--bg-deep));
+  border-radius: 1rem;
+  overflow: hidden;
+  animation: reveal 350ms ease-out;
+}
+
+.header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.title {
+  margin: 0;
+  font-size: clamp(1.2rem, 1.4vw + 1rem, 2.1rem);
+  letter-spacing: 0.03em;
+}
+
+.subtitle {
+  margin: 0.25rem 0 0;
+  color: var(--text-muted);
+  max-width: 56ch;
+  line-height: 1.35;
+  font-size: 0.94rem;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+}
+
+.seed {
+  font-size: 0.84rem;
+  color: var(--text-muted);
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 999px;
+  padding: 0.3rem 0.7rem;
+}
+
+.button {
+  border: 0;
+  color: #001323;
+  background: linear-gradient(120deg, #8ad6ff, #87f6d1);
+  border-radius: 999px;
+  padding: 0.55rem 1rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  transition: transform 120ms ease, filter 120ms ease;
+}
+
+.button:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.08);
+}
+
+.button:active {
+  transform: translateY(0);
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
+  gap: 1rem;
+}
+
+.mapCard,
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--panel-border);
+  border-radius: 0.95rem;
+  backdrop-filter: blur(7px);
+}
+
+.mapCard {
+  padding: 0.65rem;
+}
+
+.map {
+  display: block;
+  width: 100%;
+  height: min(72vh, 760px);
+}
+
+.tile {
+  stroke: rgba(7, 11, 18, 0.35);
+  stroke-width: 1.3;
+  transition: filter 140ms ease, stroke 140ms ease, transform 140ms ease;
+  transform-origin: center;
+}
+
+.tile:hover {
+  filter: brightness(1.12);
+  stroke: rgba(240, 248, 255, 0.8);
+}
+
+.tileActive {
+  stroke: #ffffff;
+  stroke-width: 2.1;
+  filter: drop-shadow(0 0 6px rgba(138, 214, 255, 0.6));
+}
+
+.panel {
+  padding: 0.95rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.95rem;
+}
+
+.panelTitle {
+  margin: 0;
+  font-size: 0.96rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+
+.stats {
+  margin: 0;
+  display: grid;
+  gap: 0.5rem;
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  font-size: 0.87rem;
+}
+
+.label {
+  color: var(--text-muted);
+}
+
+.value {
+  text-align: right;
+}
+
+.chipRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.chip {
+  border-radius: 999px;
+  padding: 0.3rem 0.58rem;
+  font-size: 0.74rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: #e8f2ff;
+  background: rgba(120, 201, 255, 0.16);
+  border: 1px solid rgba(120, 201, 255, 0.34);
+}
+
+@keyframes reveal {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 980px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  .game {
+    min-height: auto;
+    padding: 0.8rem;
+    border-radius: 0.75rem;
+  }
+
+  .header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .map {
+    height: min(58vh, 540px);
+  }
+}

package/src/worldMap.ts

@@ -0,0 +1,158 @@
+import {
+  SurfaceCover,
+  TerrainBiome,
+  type HexCell,
+  type TerrainCell,
+} from "@plasius/gpu-world-generator";
+
+export interface HexMapTile {
+  q: number;
+  r: number;
+  x: number;
+  y: number;
+  points: string;
+  color: string;
+  terrain: TerrainCell;
+}
+
+const SQRT3 = Math.sqrt(3);
+
+const SURFACE_COLORS: Record<number, string> = {
+  [SurfaceCover.Grass]: "#5bb768",
+  [SurfaceCover.Dirt]: "#86604a",
+  [SurfaceCover.Sand]: "#d7b273",
+  [SurfaceCover.Rock]: "#7c879a",
+  [SurfaceCover.Gravel]: "#91a0b2",
+  [SurfaceCover.Snowpack]: "#d7ecff",
+  [SurfaceCover.Ice]: "#99e0ff",
+  [SurfaceCover.Mud]: "#69503c",
+  [SurfaceCover.Ash]: "#6f6476",
+  [SurfaceCover.Cobble]: "#9ba7b8",
+  [SurfaceCover.Road]: "#6f6a60",
+  [SurfaceCover.Water]: "#3f83d2",
+  [SurfaceCover.Basalt]: "#4f5a70",
+  [SurfaceCover.Crystal]: "#75ffd8",
+  [SurfaceCover.Sludge]: "#5d7948",
+};
+
+const BIOME_COLORS: Record<number, string> = {
+  [TerrainBiome.Plains]: "#89bf67",
+  [TerrainBiome.Tundra]: "#a5b8ce",
+  [TerrainBiome.Savanna]: "#c8b470",
+  [TerrainBiome.River]: "#498dd6",
+  [TerrainBiome.City]: "#9da9b8",
+  [TerrainBiome.Village]: "#b1906d",
+  [TerrainBiome.Ice]: "#b7f0ff",
+  [TerrainBiome.Snow]: "#e2f4ff",
+  [TerrainBiome.Mountainous]: "#7a8596",
+  [TerrainBiome.Volcanic]: "#8d6c69",
+  [TerrainBiome.Road]: "#7a7469",
+  [TerrainBiome.Town]: "#958774",
+  [TerrainBiome.Castle]: "#9aa7bb",
+  [TerrainBiome.MixedForest]: "#4f9464",
+};
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+function withLightness(hex: string, amount: number): string {
+  const safe = hex.replace("#", "");
+  const channels = safe.length === 3
+    ? safe.split("").map((c) => parseInt(c + c, 16))
+    : [0, 2, 4].map((offset) => parseInt(safe.slice(offset, offset + 2), 16));
+  const factor = clamp(1 + amount, 0.3, 1.8);
+  const next = channels
+    .map((channel) => clamp(Math.round(channel * factor), 0, 255))
+    .map((channel) => channel.toString(16).padStart(2, "0"))
+    .join("");
+  return `#${next}`;
+}
+
+function defaultBiomeColor(terrain: TerrainCell): string {
+  if (terrain.biome in BIOME_COLORS) {
+    return BIOME_COLORS[terrain.biome];
+  }
+  return "#8b9eb6";
+}
+
+export function resolveTileColor(terrain: TerrainCell): string {
+  const base =
+    typeof terrain.surface === "number" && terrain.surface in SURFACE_COLORS
+      ? SURFACE_COLORS[terrain.surface]
+      : defaultBiomeColor(terrain);
+
+  const elevationBoost = clamp(terrain.height * 0.28, -0.2, 0.22);
+  return withLightness(base, elevationBoost);
+}
+
+export function axialToPixel(q: number, r: number, size: number): { x: number; y: number } {
+  return {
+    x: size * 1.5 * q,
+    y: size * SQRT3 * (r + q / 2),
+  };
+}
+
+export function hexPolygonPoints(x: number, y: number, size: number): string {
+  const points: string[] = [];
+  for (let i = 0; i < 6; i += 1) {
+    const angle = (Math.PI / 180) * (60 * i + 30);
+    const px = x + size * Math.cos(angle);
+    const py = y + size * Math.sin(angle);
+    points.push(`${px.toFixed(2)},${py.toFixed(2)}`);
+  }
+  return points.join(" ");
+}
+
+export function buildHexMapTiles(
+  cells: HexCell[],
+  terrain: TerrainCell[],
+  size: number
+): HexMapTile[] {
+  return cells.map((cell, index) => {
+    const terrainCell = terrain[index] ?? {
+      height: 0,
+      heat: 0,
+      moisture: 0,
+      biome: TerrainBiome.Plains,
+    };
+    const { x, y } = axialToPixel(cell.q, cell.r, size);
+    return {
+      q: cell.q,
+      r: cell.r,
+      x,
+      y,
+      points: hexPolygonPoints(x, y, size),
+      color: resolveTileColor(terrainCell),
+      terrain: terrainCell,
+    };
+  });
+}
+
+export function computeMapBounds(
+  tiles: HexMapTile[],
+  size: number
+): { minX: number; maxX: number; minY: number; maxY: number } {
+  if (tiles.length === 0) {
+    return {
+      minX: -size,
+      maxX: size,
+      minY: -size,
+      maxY: size,
+    };
+  }
+
+  let minX = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+
+  for (const tile of tiles) {
+    minX = Math.min(minX, tile.x - size);
+    maxX = Math.max(maxX, tile.x + size);
+    minY = Math.min(minY, tile.y - size);
+    maxY = Math.max(maxY, tile.y + size);
+  }
+
+  return { minX, maxX, minY, maxY };
+}