Add the simulator files

css/animations.css

@@ -0,0 +1,256 @@
+@keyframes fadeSlideIn {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeSlideInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeSlideInCenter {
+  0% {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes glowPulse {
+  0%,
+  100% {
+    text-shadow:
+      0 0 4px currentColor,
+      0 0 8px currentColor;
+  }
+  50% {
+    text-shadow:
+      0 0 6px currentColor,
+      0 0 14px currentColor,
+      0 0 20px currentColor;
+  }
+}
+
+@keyframes borderGlow {
+  0%,
+  100% {
+    border-color: rgba(100, 200, 255, 0.15);
+    box-shadow: 0 0 8px rgba(0, 240, 255, 0.05);
+  }
+  50% {
+    border-color: rgba(100, 200, 255, 0.3);
+    box-shadow: 0 0 16px rgba(0, 240, 255, 0.1);
+  }
+}
+
+@keyframes dotBlink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -100% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes eventSlideIn {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+    max-height: 0;
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+    max-height: 30px;
+  }
+}
+
+@keyframes generationFlash {
+  0% {
+    color: var(--neon-cyan);
+    text-shadow:
+      0 0 10px var(--neon-cyan),
+      0 0 20px var(--neon-cyan),
+      0 0 40px var(--neon-cyan);
+  }
+  100% {
+    color: var(--neon-cyan);
+    text-shadow:
+      0 0 4px var(--neon-cyan),
+      0 0 8px var(--neon-cyan);
+  }
+}
+
+@keyframes announcementPulse {
+  0% {
+    background: rgba(0, 240, 255, 0.1);
+    border-color: rgba(0, 240, 255, 0.3);
+  }
+  50% {
+    background: rgba(0, 240, 255, 0.15);
+    border-color: rgba(0, 240, 255, 0.5);
+  }
+  100% {
+    background: rgba(0, 240, 255, 0.1);
+    border-color: rgba(0, 240, 255, 0.3);
+  }
+}
+
+@keyframes breathe {
+  0%,
+  100% {
+    opacity: 0.85;
+  }
+  50% {
+    opacity: 0.95;
+  }
+}
+
+@keyframes scanLine {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(200%);
+  }
+}
+
+@keyframes dataPop {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  60% {
+    transform: scale(1.3);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+#panel-stats {
+  animation: fadeSlideIn 0.5s ease-out both;
+  animation-delay: 0.1s;
+}
+
+#panel-performance {
+  animation: fadeSlideInRight 0.5s ease-out both;
+  animation-delay: 0.2s;
+}
+
+#panel-generation {
+  animation: fadeSlideInCenter 0.6s ease-out both;
+  animation-delay: 0.05s;
+}
+
+#panel-events {
+  animation: fadeSlideIn 0.5s ease-out both;
+  animation-delay: 0.3s;
+}
+
+#panel-charts {
+  animation: fadeSlideInRight 0.5s ease-out both;
+  animation-delay: 0.4s;
+}
+
+.hud-panel {
+  animation: borderGlow 4s ease-in-out infinite;
+}
+
+.stat-value {
+  animation: glowPulse 3s ease-in-out infinite;
+}
+
+.event-entry {
+  animation: eventSlideIn 0.3s ease-out both;
+}
+
+.live-indicator {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--neon-green);
+  margin-right: 6px;
+  animation: dotBlink 1.5s ease-in-out infinite;
+}
+
+.generation-flash {
+  animation: generationFlash 1s ease-out;
+}
+
+.announcement {
+  position: fixed;
+  top: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--z-announcements);
+  padding: 8px 24px;
+  border-radius: 8px;
+  border: 1px solid var(--neon-cyan);
+  background: rgba(6, 6, 15, 0.9);
+  backdrop-filter: blur(12px);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--neon-cyan);
+  white-space: nowrap;
+  pointer-events: none;
+  animation: announcementPulse 2s ease-in-out;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.announcement.visible {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hud-panel,
+  .stat-value,
+  .event-entry,
+  .live-indicator,
+  .announcement {
+    animation: none !important;
+  }
+
+  .announcement {
+    transition: none !important;
+  }
+}

css/main.css

@@ -0,0 +1,337 @@
+:root {
+  --bg-primary: #06060f;
+  --bg-secondary: #0c0c1e;
+  --bg-panel: rgba(12, 12, 30, 0.75);
+  --border-glow: rgba(100, 200, 255, 0.2);
+  --text-primary: #e0e8ff;
+  --text-secondary: #8090b0;
+  --text-muted: #506080;
+  --neon-cyan: #00f0ff;
+  --neon-green: #00ff88;
+  --neon-red: #ff3366;
+  --neon-blue: #3399ff;
+  --neon-amber: #ffaa00;
+  --neon-purple: #cc66ff;
+  --neon-pink: #ff66cc;
+  --neon-white: #eef4ff;
+  --gatherer-color: #00ff88;
+  --predator-color: #ff3366;
+  --builder-color: #3399ff;
+  --explorer-color: #ffaa00;
+  --hybrid-color: #cc66ff;
+  --food-color: #00ffaa;
+  --energy-color: #ffee44;
+  --panel-radius: 12px;
+  --panel-blur: 16px;
+  --font-mono: "Courier New", "Consolas", monospace;
+  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
+  --z-canvas: 1;
+  --z-particles: 2;
+  --z-hud: 10;
+  --z-announcements: 20;
+  --z-modal: 30;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.4;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+#simulation-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--z-canvas);
+  display: block;
+}
+
+#particle-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--z-particles);
+  pointer-events: none;
+  display: block;
+}
+
+.hud-panel {
+  position: absolute;
+  z-index: var(--z-hud);
+  background: var(--bg-panel);
+  backdrop-filter: blur(var(--panel-blur));
+  -webkit-backdrop-filter: blur(var(--panel-blur));
+  border: 1px solid var(--border-glow);
+  border-radius: var(--panel-radius);
+  padding: 12px 16px;
+  pointer-events: auto;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+}
+
+.hud-panel:focus-within {
+  border-color: var(--neon-cyan);
+  box-shadow: 0 0 12px rgba(0, 240, 255, 0.15);
+}
+
+#panel-stats {
+  top: 16px;
+  left: 16px;
+  min-width: 220px;
+}
+
+#panel-performance {
+  top: 16px;
+  right: 16px;
+  min-width: 160px;
+  text-align: right;
+}
+
+#panel-events {
+  bottom: 16px;
+  left: 16px;
+  right: 16px;
+  max-width: 600px;
+  max-height: 120px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--text-muted) transparent;
+}
+
+#panel-charts {
+  bottom: 16px;
+  right: 16px;
+  width: 280px;
+  height: 200px;
+}
+
+#panel-generation {
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  min-width: 180px;
+}
+
+.panel-title {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+}
+
+.stat-value {
+  font-family: var(--font-mono);
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--neon-cyan);
+  line-height: 1.1;
+}
+
+.stat-label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.stat-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 3px 0;
+}
+
+.stat-row .dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+
+.stat-row .count {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  min-width: 30px;
+  text-align: right;
+}
+
+.sparkline-container {
+  width: 60px;
+  height: 20px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 8px;
+}
+
+.event-entry {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+  padding: 2px 0;
+  border-bottom: 1px solid rgba(100, 200, 255, 0.05);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.event-entry .timestamp {
+  color: var(--text-muted);
+  margin-right: 8px;
+}
+
+.event-entry.event-birth {
+  color: var(--neon-green);
+}
+.event-entry.event-death {
+  color: var(--neon-red);
+}
+.event-entry.event-evolution {
+  color: var(--neon-purple);
+}
+.event-entry.event-world {
+  color: var(--neon-amber);
+}
+.event-entry.event-milestone {
+  color: var(--neon-cyan);
+}
+
+.chart-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.hud-panel::-webkit-scrollbar {
+  width: 4px;
+}
+
+.hud-panel::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.hud-panel::-webkit-scrollbar-thumb {
+  background: var(--text-muted);
+  border-radius: 2px;
+}
+
+@media (max-width: 768px) {
+  .hud-panel {
+    padding: 8px 12px;
+    border-radius: 8px;
+  }
+
+  #panel-stats {
+    top: 8px;
+    left: 8px;
+    min-width: 180px;
+  }
+
+  #panel-performance {
+    top: 8px;
+    right: 8px;
+    min-width: 120px;
+  }
+
+  #panel-events {
+    bottom: 8px;
+    left: 8px;
+    right: 8px;
+    max-height: 80px;
+    font-size: 10px;
+  }
+
+  #panel-charts {
+    display: none;
+  }
+
+  #panel-generation {
+    top: 8px;
+  }
+
+  .stat-value {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 480px) {
+  #panel-charts {
+    display: none;
+  }
+
+  #panel-stats {
+    min-width: 150px;
+  }
+
+  #panel-performance {
+    min-width: 100px;
+  }
+
+  .stat-value {
+    font-size: 16px;
+  }
+  .stat-label {
+    font-size: 10px;
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  white-space: nowrap;
+}
+
+*:focus-visible {
+  outline: 2px solid var(--neon-cyan);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

css/neon-effects.css

@@ -0,0 +1,278 @@
+.glass-panel {
+  background: linear-gradient(
+    135deg,
+    rgba(15, 15, 35, 0.8) 0%,
+    rgba(10, 10, 25, 0.6) 100%
+  );
+  backdrop-filter: blur(16px) saturate(1.2);
+  -webkit-backdrop-filter: blur(16px) saturate(1.2);
+  border: 1px solid rgba(100, 200, 255, 0.12);
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.glass-panel::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(100, 200, 255, 0.2) 50%,
+    transparent 100%
+  );
+}
+
+.neon-text-cyan {
+  color: var(--neon-cyan);
+  text-shadow:
+    0 0 4px var(--neon-cyan),
+    0 0 8px rgba(0, 240, 255, 0.4);
+}
+
+.neon-text-green {
+  color: var(--neon-green);
+  text-shadow:
+    0 0 4px var(--neon-green),
+    0 0 8px rgba(0, 255, 136, 0.4);
+}
+
+.neon-text-red {
+  color: var(--neon-red);
+  text-shadow:
+    0 0 4px var(--neon-red),
+    0 0 8px rgba(255, 51, 102, 0.4);
+}
+
+.neon-text-blue {
+  color: var(--neon-blue);
+  text-shadow:
+    0 0 4px var(--neon-blue),
+    0 0 8px rgba(51, 153, 255, 0.4);
+}
+
+.neon-text-amber {
+  color: var(--neon-amber);
+  text-shadow:
+    0 0 4px var(--neon-amber),
+    0 0 8px rgba(255, 170, 0, 0.4);
+}
+
+.neon-text-purple {
+  color: var(--neon-purple);
+  text-shadow:
+    0 0 4px var(--neon-purple),
+    0 0 8px rgba(204, 102, 255, 0.4);
+}
+
+.neon-border-cyan {
+  border-color: var(--neon-cyan);
+  box-shadow:
+    0 0 6px rgba(0, 240, 255, 0.15),
+    inset 0 0 6px rgba(0, 240, 255, 0.05);
+}
+
+.neon-border-green {
+  border-color: var(--neon-green);
+  box-shadow:
+    0 0 6px rgba(0, 255, 136, 0.15),
+    inset 0 0 6px rgba(0, 255, 136, 0.05);
+}
+
+.depth-1 {
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.3),
+    0 0 1px rgba(100, 200, 255, 0.1);
+}
+
+.depth-2 {
+  box-shadow:
+    0 4px 16px rgba(0, 0, 0, 0.4),
+    0 0 2px rgba(100, 200, 255, 0.12);
+}
+
+.depth-3 {
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.5),
+    0 0 4px rgba(100, 200, 255, 0.15);
+}
+
+.neon-divider {
+  width: 100%;
+  height: 1px;
+  border: none;
+  margin: 8px 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(100, 200, 255, 0.2) 20%,
+    rgba(100, 200, 255, 0.2) 80%,
+    transparent 100%
+  );
+}
+
+.gradient-accent {
+  background: linear-gradient(
+    135deg,
+    var(--neon-cyan) 0%,
+    var(--neon-purple) 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+#panel-stats.hud-panel {
+  background: linear-gradient(
+    160deg,
+    rgba(0, 255, 136, 0.03) 0%,
+    rgba(12, 12, 30, 0.75) 30%
+  );
+}
+
+#panel-performance.hud-panel {
+  background: linear-gradient(
+    200deg,
+    rgba(0, 240, 255, 0.03) 0%,
+    rgba(12, 12, 30, 0.75) 30%
+  );
+}
+
+#panel-generation.hud-panel {
+  background: linear-gradient(
+    180deg,
+    rgba(204, 102, 255, 0.05) 0%,
+    rgba(12, 12, 30, 0.8) 50%
+  );
+}
+
+#panel-events.hud-panel {
+  background: linear-gradient(
+    0deg,
+    rgba(12, 12, 30, 0.85) 0%,
+    rgba(12, 12, 30, 0.7) 100%
+  );
+}
+
+#panel-charts.hud-panel {
+  background: linear-gradient(
+    225deg,
+    rgba(51, 153, 255, 0.03) 0%,
+    rgba(12, 12, 30, 0.8) 30%
+  );
+}
+
+.scan-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 3;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent 0px,
+    transparent 2px,
+    rgba(100, 200, 255, 0.01) 2px,
+    rgba(100, 200, 255, 0.01) 4px
+  );
+}
+
+.type-gatherer {
+  color: var(--gatherer-color);
+}
+.type-predator {
+  color: var(--predator-color);
+}
+.type-builder {
+  color: var(--builder-color);
+}
+.type-explorer {
+  color: var(--explorer-color);
+}
+.type-hybrid {
+  color: var(--hybrid-color);
+}
+
+.dot-gatherer {
+  background: var(--gatherer-color);
+}
+.dot-predator {
+  background: var(--predator-color);
+}
+.dot-builder {
+  background: var(--builder-color);
+}
+.dot-explorer {
+  background: var(--explorer-color);
+}
+.dot-hybrid {
+  background: var(--hybrid-color);
+}
+
+.entity-tooltip {
+  position: absolute;
+  z-index: var(--z-modal);
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: rgba(6, 6, 15, 0.95);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(100, 200, 255, 0.2);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-primary);
+  pointer-events: none;
+  white-space: nowrap;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.entity-tooltip .tooltip-row {
+  padding: 1px 0;
+}
+
+.entity-tooltip .tooltip-label {
+  color: var(--text-muted);
+  margin-right: 8px;
+}
+
+.neon-bar {
+  height: 3px;
+  border-radius: 2px;
+  background: var(--bg-secondary);
+  overflow: hidden;
+  margin: 4px 0;
+}
+
+.neon-bar-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+.neon-bar-fill.cyan {
+  background: var(--neon-cyan);
+  box-shadow: 0 0 6px var(--neon-cyan);
+}
+.neon-bar-fill.green {
+  background: var(--neon-green);
+  box-shadow: 0 0 6px var(--neon-green);
+}
+.neon-bar-fill.red {
+  background: var(--neon-red);
+  box-shadow: 0 0 6px var(--neon-red);
+}
+.neon-bar-fill.amber {
+  background: var(--neon-amber);
+  box-shadow: 0 0 6px var(--neon-amber);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .neon-bar-fill {
+    transition: none;
+  }
+}

index.html

@@ -1,19 +1,120 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
+    <meta
+      name="description"
+      content="Digital Life Evolution Simulator - An autonomous AI ecosystem demonstration"
+    />
+    <title>Digital Life Evolution Simulator</title>
+
+    <link rel="stylesheet" href="css/main.css" />
+    <link rel="stylesheet" href="css/animations.css" />
+    <link rel="stylesheet" href="css/neon-effects.css" />
+
+    <style>
+      html,
+      body {
+        background: #06060f;
+      }
+      #loading {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #06060f;
+        z-index: 9999;
+        font-family: "Courier New", monospace;
+        color: #00f0ff;
+        font-size: 14px;
+        letter-spacing: 2px;
+        transition: opacity 0.5s ease;
+      }
+      #loading.fade-out {
+        opacity: 0;
+        pointer-events: none;
+      }
+      #loading .pulse {
+        animation: loadPulse 1.5s ease-in-out infinite;
+      }
+      @keyframes loadPulse {
+        0%,
+        100% {
+          opacity: 0.4;
+        }
+        50% {
+          opacity: 1;
+          text-shadow:
+            0 0 10px #00f0ff,
+            0 0 20px #00f0ff;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="loading" role="alert" aria-live="polite">
+      <span class="pulse">INITIALIZING ECOSYSTEM...</span>
+    </div>
+
+    <div
+      id="app"
+      role="application"
+      aria-label="Digital Life Evolution Simulator"
+    >
+      <a
+        href="#panel-stats"
+        class="sr-only"
+        style="position: absolute; z-index: 100"
+      >
+        Skip to simulation stats
+      </a>
+
+      <canvas
+        id="simulation-canvas"
+        aria-label="Simulation world with AI entities, resources, and environmental events"
+        role="img"
+      ></canvas>
+
+      <canvas id="particle-canvas" aria-hidden="true"></canvas>
+
+      <div class="scan-overlay" aria-hidden="true"></div>
+    </div>
+
+    <script type="module">
+      import { bootstrap } from "./js/ecosystem.js";
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", start);
+      } else {
+        start();
+      }
+
+      function start() {
+        requestAnimationFrame(() => {
+          try {
+            bootstrap();
+          } catch (err) {
+            console.error("Bootstrap failed:", err);
+            document.getElementById("loading").innerHTML =
+              '<span style="color:#ff3366">ERROR: ' + err.message + "</span>";
+            return;
+          }
+
+          const loading = document.getElementById("loading");
+          if (loading) {
+            loading.classList.add("fade-out");
+            setTimeout(() => loading.remove(), 600);
+          }
+        });
+      }
+    </script>
+  </body>
 </html>

js/ecosystem.js

@@ -0,0 +1,350 @@
+import { World, EVENT_TYPES } from "./world.js";
+import { EntityManager } from "./entityManager.js";
+import { Entity } from "./entities.js";
+import { ParticleSystem } from "./particles.js";
+import { StatsTracker } from "./stats.js";
+import { UI } from "./ui.js";
+import { createGenome, ENTITY_TYPES } from "./genetics.js";
+import { randomRange } from "./utils.js";
+
+const SAVE_KEY = "digital-life-simulator-state";
+const TARGET_FPS = 60;
+const MIN_POPULATION = 15;
+const MAX_POPULATION = 80;
+const INITIAL_POPULATION = 35;
+const GENERATION_INTERVAL = 45;
+
+export class Ecosystem {
+  constructor() {
+    this.world = null;
+    this.entityManager = null;
+    this.particles = null;
+    this.stats = null;
+    this.ui = null;
+
+    this.simCanvas = null;
+    this.simCtx = null;
+    this.particleCanvas = null;
+    this.particleCtx = null;
+
+    this.running = false;
+    this._rafId = null;
+    this._lastTime = 0;
+    this._fpsAccum = 0;
+    this._fpsFrames = 0;
+    this._currentFps = 60;
+
+    this._genTimer = 0;
+    this._saveTimer = 0;
+    this._eventCheckTimer = 0;
+    this._lastEventCount = 0;
+  }
+
+  init() {
+    this.simCanvas = document.getElementById("simulation-canvas");
+    this.particleCanvas = document.getElementById("particle-canvas");
+
+    if (!this.simCanvas || !this.particleCanvas) {
+      console.error("Canvas elements not found");
+      return;
+    }
+
+    this.simCtx = this.simCanvas.getContext("2d");
+    this.particleCtx = this.particleCanvas.getContext("2d");
+
+    this._resizeCanvases();
+    window.addEventListener("resize", () => this._resizeCanvases());
+
+    const w = this.simCanvas.width;
+    const h = this.simCanvas.height;
+
+    const saved = this._loadState();
+
+    if (saved) {
+      this.world = World.fromJSON(saved.world);
+      this.stats = StatsTracker.fromJSON(saved.stats);
+      this.entityManager = new EntityManager(w, h);
+
+      if (saved.entities && saved.entities.length > 0) {
+        for (const ed of saved.entities) {
+          try {
+            const { Genome } = await_import_workaround();
+          } catch (_) {}
+        }
+      }
+      this.entityManager.spawnRandom(INITIAL_POPULATION, this.world);
+    } else {
+      this.world = new World(w, h);
+      this.stats = new StatsTracker();
+      this.entityManager = new EntityManager(w, h);
+      this.entityManager.spawnRandom(INITIAL_POPULATION, this.world);
+    }
+
+    this.particles = new ParticleSystem(2000);
+
+    const container = document.getElementById("app");
+    this.ui = new UI(container);
+    this.ui.init();
+    this.ui.addEvent("Ecosystem initialized", "milestone");
+    this.ui.announce("Digital Life Simulator Active");
+
+    const types = Object.keys(ENTITY_TYPES);
+    for (const type of types) {
+      const count = this.entityManager.entities.filter(
+        (e) => e.type === type,
+      ).length;
+      if (count > 0) {
+        this.ui.addEvent(
+          `${ENTITY_TYPES[type].name}: ${count} spawned`,
+          "birth",
+        );
+      }
+    }
+  }
+
+  start() {
+    if (this.running) return;
+    this.running = true;
+    this._lastTime = performance.now();
+    this._loop(this._lastTime);
+  }
+
+  stop() {
+    this.running = false;
+    if (this._rafId) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+    }
+  }
+
+  _loop(timestamp) {
+    if (!this.running) return;
+    this._rafId = requestAnimationFrame((t) => this._loop(t));
+
+    const rawDt = (timestamp - this._lastTime) / 1000;
+    const dt = Math.min(rawDt, 0.05);
+    this._lastTime = timestamp;
+
+    this._fpsAccum += rawDt;
+    this._fpsFrames++;
+    if (this._fpsAccum >= 0.5) {
+      this._currentFps = this._fpsFrames / this._fpsAccum;
+      this._fpsFrames = 0;
+      this._fpsAccum = 0;
+    }
+
+    this._update(dt);
+
+    this._render();
+  }
+
+  _update(dt) {
+    this.world.update(dt);
+
+    this._eventCheckTimer += dt;
+    if (this._eventCheckTimer >= 1) {
+      this._eventCheckTimer = 0;
+      if (this.world.events.length > this._lastEventCount) {
+        const newEvent = this.world.events[this.world.events.length - 1];
+        this.ui.announceWorldEvent(newEvent);
+        this._lastEventCount = this.world.events.length;
+      }
+      if (this.world.events.length < this._lastEventCount) {
+        this._lastEventCount = this.world.events.length;
+      }
+    }
+
+    this.entityManager.update(dt, this.world, this.particles, this.stats);
+
+    this.particles.update(dt);
+
+    for (const event of this.world.events) {
+      if (event.type === "storm" || event.type === "bloom") {
+        this.particles.emitWeather(event, dt);
+      }
+    }
+
+    this._managePopulation(dt);
+
+    this._genTimer += dt;
+    if (this._genTimer >= GENERATION_INTERVAL) {
+      this._genTimer = 0;
+      this.stats.onGeneration();
+      this.ui.addEvent(
+        `Generation ${this.stats.generationCount} reached`,
+        "evolution",
+      );
+      this.ui.announce(`Generation ${this.stats.generationCount}`);
+
+      const genEl = document.getElementById("gen-count");
+      if (genEl) {
+        genEl.classList.remove("generation-flash");
+        void genEl.offsetWidth;
+        genEl.classList.add("generation-flash");
+      }
+    }
+
+    this.stats.record(
+      this.entityManager.entities,
+      this.world,
+      dt,
+      this._currentFps,
+      this.particles.count,
+    );
+
+    this._saveTimer += dt;
+    if (this._saveTimer >= 30) {
+      this._saveTimer = 0;
+      this._saveState();
+    }
+
+    this.ui.update(this.stats, this.world, this.entityManager, dt);
+  }
+
+  _render() {
+    const simCtx = this.simCtx;
+    const partCtx = this.particleCtx;
+    const w = this.world.width;
+    const h = this.world.height;
+
+    simCtx.fillStyle = "#06060f";
+    simCtx.fillRect(0, 0, w, h);
+    partCtx.clearRect(0, 0, w, h);
+
+    this.world.render(simCtx);
+
+    this._renderFrame = (this._renderFrame || 0) + 1;
+    if (this._renderFrame % 15 === 0) {
+      this.stats.renderHeatmap(simCtx, w, h);
+    }
+
+    this.entityManager.render(simCtx);
+
+    this.particles.render(partCtx);
+  }
+
+  _managePopulation(dt) {
+    const alive = this.entityManager.entities.length;
+
+    if (alive < MIN_POPULATION) {
+      const deficit = MIN_POPULATION - alive;
+      const toSpawn = Math.min(deficit, 5);
+
+      if (alive >= 2) {
+        this.entityManager.spawnFromPopulation(
+          this.entityManager.entities,
+          toSpawn,
+          this.world,
+        );
+        this.ui.addEvent(
+          `${toSpawn} entities evolved from survivors`,
+          "evolution",
+        );
+      } else {
+        this.entityManager.spawnRandom(toSpawn, this.world);
+        this.ui.addEvent(`${toSpawn} new entities seeded`, "birth");
+      }
+    }
+
+    this._diversityTimer = (this._diversityTimer || 0) + dt;
+    if (this._diversityTimer >= 8) {
+      this._diversityTimer = 0;
+      const types = Object.keys(ENTITY_TYPES);
+      const typeCounts = {};
+      for (const t of types) typeCounts[t] = 0;
+      for (const e of this.entityManager.entities) {
+        if (e.alive) typeCounts[e.type]++;
+      }
+
+      for (const type of types) {
+        if (typeCounts[type] < 2 && alive < MAX_POPULATION - 3) {
+          const count = Math.min(3, MAX_POPULATION - alive);
+          for (let i = 0; i < count; i++) {
+            const genome = createGenome(type);
+            const x = randomRange(40, this.world.width - 40);
+            const y = randomRange(40, this.world.height - 40);
+            const entity = new Entity(x, y, genome, this.stats.generationCount);
+            this.entityManager.add(entity);
+          }
+          this.ui.addEvent(
+            `${ENTITY_TYPES[type].name} migration wave (${count})`,
+            "birth",
+          );
+        }
+      }
+    }
+
+    if (alive > MAX_POPULATION) {
+      const excess = alive - MAX_POPULATION;
+      const sorted = [...this.entityManager.entities].sort(
+        (a, b) => a.fitness - b.fitness,
+      );
+      for (let i = 0; i < excess && i < sorted.length; i++) {
+        sorted[i].alive = false;
+        sorted[i].energy = 0;
+      }
+    }
+  }
+
+  _resizeCanvases() {
+    const w = window.innerWidth;
+    const h = window.innerHeight;
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+
+    for (const canvas of [this.simCanvas, this.particleCanvas]) {
+      if (!canvas) continue;
+      canvas.width = w * dpr;
+      canvas.height = h * dpr;
+      canvas.style.width = w + "px";
+      canvas.style.height = h + "px";
+      const ctx = canvas.getContext("2d");
+      ctx.scale(dpr, dpr);
+    }
+
+    if (this.world) {
+      this.world.width = w;
+      this.world.height = h;
+    }
+
+    if (this.entityManager) {
+      this.entityManager.spatialGrid = new (Object.getPrototypeOf(
+        this.entityManager.spatialGrid,
+      ).constructor)(w, h, 60);
+    }
+  }
+
+  _saveState() {
+    try {
+      const state = {
+        world: this.world.toJSON(),
+        stats: this.stats.toJSON(),
+        version: 1,
+      };
+      localStorage.setItem(SAVE_KEY, JSON.stringify(state));
+    } catch (e) {}
+  }
+
+  _loadState() {
+    try {
+      const raw = localStorage.getItem(SAVE_KEY);
+      if (!raw) return null;
+      return JSON.parse(raw);
+    } catch (e) {
+      return null;
+    }
+  }
+}
+
+function await_import_workaround() {
+  return null;
+}
+
+export function bootstrap() {
+  const eco = new Ecosystem();
+  eco.init();
+  eco.start();
+
+  window.__ecosystem = eco;
+
+  return eco;
+}

js/entities.js

@@ -0,0 +1,476 @@
+import { distance, clamp, TAU, COLORS, randomRange } from "./utils.js";
+import { calculateFitness, NET_TOPOLOGY } from "./genetics.js";
+import { QuantumDecisionLayer } from "./neuralNetwork.js";
+
+let nextEntityId = 1;
+
+const _glowCache = {};
+function getGlowSprite(type, size) {
+  const key = `${type}_${Math.round(size)}`;
+  if (_glowCache[key]) return _glowCache[key];
+
+  const c = COLORS[type] || COLORS.cyan;
+  const spriteSize = Math.ceil(size * 5);
+  const canvas = document.createElement("canvas");
+  canvas.width = spriteSize;
+  canvas.height = spriteSize;
+  const ctx = canvas.getContext("2d");
+  const cx = spriteSize / 2;
+
+  const grad = ctx.createRadialGradient(cx, cx, size * 0.3, cx, cx, cx);
+  grad.addColorStop(0, `rgba(${c.r},${c.g},${c.b},0.3)`);
+  grad.addColorStop(0.4, `rgba(${c.r},${c.g},${c.b},0.1)`);
+  grad.addColorStop(1, `rgba(${c.r},${c.g},${c.b},0)`);
+  ctx.fillStyle = grad;
+  ctx.fillRect(0, 0, spriteSize, spriteSize);
+
+  _glowCache[key] = canvas;
+  return canvas;
+}
+
+export class Entity {
+  constructor(x, y, genome, generation = 0) {
+    this.id = nextEntityId++;
+    this.x = x;
+    this.y = y;
+    this.genome = genome;
+    this.type = genome.type;
+    this.generation = generation;
+    this.brain = genome.buildBrain();
+    this.quantumLayer = generation > 5 ? new QuantumDecisionLayer(0.8) : null;
+    const t = genome.traits;
+    this.energy = 60;
+    this.maxEnergy = 100;
+    this.health = 100;
+    this.maxHealth = 100;
+    this.speed = t.speed;
+    this.size = t.size;
+    this.visionRange = t.vision;
+    this.attackPower = t.attack;
+    this.defensePower = t.defense;
+    this.metabolism = t.metabolism;
+
+    this.vx = 0;
+    this.vy = 0;
+    this.angle = Math.random() * TAU;
+    this.age = 0;
+    this.alive = true;
+    this.signal = 0;
+    this.signalStrength = 0;
+    this.stats = { survivalTime: 0, energyGathered: 0, offspring: 0, kills: 0 };
+    this.fitness = 0;
+    this._thinkTimer = Math.random() * 0.15;
+    this._thinkInterval = 0.12;
+    this._reproTimer = 0;
+    this._reproInterval = 5;
+    this.lastOutputs = new Array(NET_TOPOLOGY[NET_TOPOLOGY.length - 1]).fill(0);
+    this._trail = [];
+    this._trailTimer = 0;
+    this._nearbyEntities = [];
+    this._nearbyResources = [];
+  }
+
+  update(dt, world, _allEntities, spatialGrid, particles) {
+    if (!this.alive) return;
+
+    this.age += dt;
+    this.stats.survivalTime = this.age;
+
+    this.energy -= this.metabolism * dt * 0.5;
+
+    const envDmg = world.getCatastropheDamage(this.x, this.y);
+    if (envDmg > 0) {
+      this.health -= envDmg * dt * 30;
+    }
+
+    if (this.energy <= 0 || this.health <= 0) {
+      this.alive = false;
+      particles.emit(this.x, this.y, "death", this._colorArray());
+      return;
+    }
+
+    this._thinkTimer += dt;
+    if (this._thinkTimer >= this._thinkInterval) {
+      this._thinkTimer = 0;
+      this._sense(world, spatialGrid);
+      this._think();
+    }
+
+    this._act(dt, world, spatialGrid, particles);
+
+    this._trailTimer += dt;
+    if (this._trailTimer > 0.08) {
+      this._trailTimer = 0;
+      this._trail.push({ x: this.x, y: this.y });
+      if (this._trail.length > 8) this._trail.shift();
+    }
+
+    this._reproTimer += dt;
+
+    this.fitness = calculateFitness(this.type, this.stats);
+  }
+
+  _sense(world, spatialGrid) {
+    this._nearbyEntities = spatialGrid.query(this.x, this.y, this.visionRange);
+
+    this._nearbyResources = world.getResourcesNear(
+      this.x,
+      this.y,
+      this.visionRange,
+    );
+  }
+
+  _think() {
+    const inputs = this._buildInputs();
+    const outputs = this.brain.forward(inputs);
+    this.lastOutputs = outputs;
+  }
+
+  _buildInputs() {
+    const inputs = new Array(NET_TOPOLOGY[0]).fill(0);
+    const vr = this.visionRange;
+
+    let nearestFood = null,
+      nearestFoodDist = Infinity;
+    for (const r of this._nearbyResources) {
+      const d = distance(this.x, this.y, r.x, r.y);
+      if (d < nearestFoodDist) {
+        nearestFoodDist = d;
+        nearestFood = r;
+      }
+    }
+
+    if (nearestFood) {
+      inputs[0] = (nearestFood.x - this.x) / vr;
+      inputs[1] = (nearestFood.y - this.y) / vr;
+      inputs[2] = 1 - nearestFoodDist / vr;
+    }
+
+    let nearestThreat = null,
+      nearestThreatDist = Infinity;
+    let nearestAlly = null,
+      nearestAllyDist = Infinity;
+    let allySignalSum = 0,
+      allyCount = 0;
+    let nearbyCount = 0;
+
+    for (const e of this._nearbyEntities) {
+      if (e.id === this.id || !e.alive) continue;
+      const d = distance(this.x, this.y, e.x, e.y);
+      nearbyCount++;
+
+      const isThreat =
+        (this.type !== "predator" && e.type === "predator") ||
+        e.attackPower > this.defensePower * 1.5;
+
+      if (isThreat && d < nearestThreatDist) {
+        nearestThreatDist = d;
+        nearestThreat = e;
+      }
+
+      const isAlly = e.type === this.type;
+      if (isAlly && d < nearestAllyDist) {
+        nearestAllyDist = d;
+        nearestAlly = e;
+        allySignalSum += e.signal;
+        allyCount++;
+      }
+    }
+
+    if (nearestThreat) {
+      inputs[3] = (nearestThreat.x - this.x) / vr;
+      inputs[4] = (nearestThreat.y - this.y) / vr;
+      inputs[5] = 1 - nearestThreatDist / vr;
+    }
+
+    if (nearestAlly) {
+      inputs[6] = (nearestAlly.x - this.x) / vr;
+      inputs[7] = (nearestAlly.y - this.y) / vr;
+    }
+
+    inputs[8] = this.energy / this.maxEnergy;
+    inputs[9] = this.health / this.maxHealth;
+    inputs[10] = clamp(nearbyCount / 10, 0, 1);
+    inputs[11] = allyCount > 0 ? allySignalSum / allyCount / 7 : 0;
+    inputs[12] = Math.sin(this.age * 0.5);
+    inputs[13] = 1;
+
+    return inputs;
+  }
+
+  _act(dt, world, spatialGrid, particles) {
+    const o = this.lastOutputs;
+
+    const moveX = o[0];
+    const moveY = o[1];
+    const moveLen = Math.sqrt(moveX * moveX + moveY * moveY);
+    if (moveLen > 0.01) {
+      const nx = moveX / moveLen;
+      const ny = moveY / moveLen;
+      this.vx = nx * this.speed * 30;
+      this.vy = ny * this.speed * 30;
+      this.angle = Math.atan2(ny, nx);
+    } else {
+      this.vx *= 0.9;
+      this.vy *= 0.9;
+    }
+
+    this.x += this.vx * dt;
+    this.y += this.vy * dt;
+
+    if (this.x < 0) this.x += world.width;
+    if (this.x >= world.width) this.x -= world.width;
+    if (this.y < 0) this.y += world.height;
+    if (this.y >= world.height) this.y -= world.height;
+
+    this._tryEat(world, particles, o[2]);
+
+    if (o[3] > 0.3 && this.attackPower > 0.3) {
+      this._tryAttack(spatialGrid, particles);
+    }
+
+    this.signal = Math.floor((o[5] + 1) * 4) % 8;
+    this.signalStrength = Math.abs(o[5]);
+    if (this.signalStrength > 0.5) {
+      particles.emit(this.x, this.y, "signal", [
+        COLORS[this.type].r,
+        COLORS[this.type].g,
+        COLORS[this.type].b,
+      ]);
+    }
+  }
+
+  _tryEat(world, particles, eagerness = 0) {
+    const eatRange = this.size + 20;
+    const resources = world.getResourcesNear(this.x, this.y, eatRange);
+    for (const r of resources) {
+      const d = distance(this.x, this.y, r.x, r.y);
+      if (d < eatRange) {
+        const efficiency = 0.4 + Math.max(0, eagerness) * 0.6;
+        const amount = r.consume(6 * efficiency);
+        this.energy = Math.min(this.maxEnergy, this.energy + amount * 1.5);
+        this.stats.energyGathered += amount;
+        if (amount > 0.5) particles.emit(r.x, r.y, "eat");
+        break;
+      }
+    }
+  }
+
+  _tryAttack(spatialGrid, particles) {
+    const attackRange = this.size + 12;
+    const nearby = spatialGrid.query(this.x, this.y, attackRange);
+    for (const e of nearby) {
+      if (e.id === this.id || !e.alive) continue;
+      if (e.type === this.type) continue;
+      const d = distance(this.x, this.y, e.x, e.y);
+      if (d < attackRange) {
+        const dmg = this.attackPower * 15 - e.defensePower * 5;
+        if (dmg > 0) {
+          e.health -= dmg;
+          this.energy = Math.min(this.maxEnergy, this.energy + dmg * 0.3);
+          particles.emit(e.x, e.y, "attack");
+          if (e.health <= 0) {
+            e.alive = false;
+            this.stats.kills++;
+            this.energy = Math.min(this.maxEnergy, this.energy + 20);
+            particles.emit(e.x, e.y, "death", this._colorArray());
+          }
+        }
+        break;
+      }
+    }
+  }
+
+  canReproduce() {
+    return (
+      this.alive &&
+      this.energy > 40 &&
+      this._reproTimer >= this._reproInterval &&
+      this.age > 2
+    );
+  }
+
+  tryReproduce(spatialGrid, particles) {
+    if (!this.canReproduce() || this.lastOutputs[4] < -0.2) return null;
+
+    const mateRange = this.visionRange * 0.5;
+    const nearby = spatialGrid.query(this.x, this.y, mateRange);
+    for (const e of nearby) {
+      if (e.id === this.id || !e.alive || e.type !== this.type) continue;
+      if (!e.canReproduce()) continue;
+
+      this.energy -= 18;
+      e.energy -= 18;
+      this._reproTimer = 0;
+      e._reproTimer = 0;
+      this.stats.offspring++;
+      e.stats.offspring++;
+
+      const childGenome = this.genome.crossover(e.genome);
+      childGenome.mutate(0.2, 0.06, 0.25);
+
+      const cx = (this.x + e.x) / 2 + randomRange(-10, 10);
+      const cy = (this.y + e.y) / 2 + randomRange(-10, 10);
+      const child = new Entity(
+        cx,
+        cy,
+        childGenome,
+        Math.max(this.generation, e.generation) + 1,
+      );
+
+      particles.emit(cx, cy, "reproduce", [
+        COLORS[this.type].r,
+        COLORS[this.type].g,
+        COLORS[this.type].b,
+      ]);
+      return child;
+    }
+    return null;
+  }
+
+  _colorArray() {
+    const c = COLORS[this.type];
+    return c ? [c.r, c.g, c.b] : [255, 255, 255];
+  }
+
+  render(ctx) {
+    if (!this.alive) return;
+    const c = COLORS[this.type] || COLORS.cyan;
+    const pulse = 0.85 + 0.15 * Math.sin(this.age * 3 + this.id);
+    const energyRatio = this.energy / this.maxEnergy;
+
+    if (this._trail.length > 1) {
+      ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},0.15)`;
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(this._trail[0].x, this._trail[0].y);
+      for (let i = 1; i < this._trail.length; i++) {
+        ctx.lineTo(this._trail[i].x, this._trail[i].y);
+      }
+      ctx.stroke();
+    }
+
+    const glow = getGlowSprite(this.type, this.size);
+    const glowSize = glow.width;
+    ctx.drawImage(glow, this.x - glowSize / 2, this.y - glowSize / 2);
+
+    ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},0.5)`;
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.size * pulse, 0, TAU);
+    ctx.stroke();
+
+    ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},0.65)`;
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.size * 0.8 * pulse, 0, TAU);
+    ctx.fill();
+    ctx.fillStyle = `rgba(${Math.min(255, c.r + 100)},${Math.min(255, c.g + 100)},${Math.min(255, c.b + 100)},0.9)`;
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.size * 0.3, 0, TAU);
+    ctx.fill();
+
+    ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},0.45)`;
+    const s = this.size * 0.55;
+    switch (this.type) {
+      case "predator":
+        this._drawTriangle(ctx, this.x, this.y, s);
+        break;
+      case "builder":
+        ctx.fillRect(this.x - s * 0.6, this.y - s * 0.6, s * 1.2, s * 1.2);
+        break;
+      case "explorer":
+        this._drawDiamond(ctx, this.x, this.y, s);
+        break;
+      case "hybrid":
+        this._drawStar(ctx, this.x, this.y, s, 5);
+        break;
+      default:
+        ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},0.3)`;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.size * 0.5, 0, TAU);
+        ctx.stroke();
+    }
+
+    const dirLen = this.size + 5;
+    ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},0.6)`;
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.moveTo(this.x, this.y);
+    ctx.lineTo(
+      this.x + Math.cos(this.angle) * dirLen,
+      this.y + Math.sin(this.angle) * dirLen,
+    );
+    ctx.stroke();
+
+    if (energyRatio < 0.9) {
+      ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},0.3)`;
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.arc(
+        this.x,
+        this.y,
+        this.size + 3,
+        -Math.PI / 2,
+        -Math.PI / 2 + TAU * energyRatio,
+      );
+      ctx.stroke();
+    }
+
+    if (this.health < this.maxHealth * 0.9) {
+      const barW = this.size * 3;
+      const barH = 2.5;
+      const barX = this.x - barW / 2;
+      const barY = this.y - this.size - 8;
+      ctx.fillStyle = "rgba(60,20,20,0.6)";
+      ctx.fillRect(barX, barY, barW, barH);
+      const healthRatio = this.health / this.maxHealth;
+      ctx.fillStyle =
+        healthRatio > 0.5
+          ? `rgba(0,255,80,0.7)`
+          : `rgba(255,${Math.floor(healthRatio * 2 * 255)},80,0.7)`;
+      ctx.fillRect(barX, barY, barW * healthRatio, barH);
+    }
+
+    if (this.signalStrength > 0.4) {
+      ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},${this.signalStrength * 0.2})`;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.arc(this.x, this.y, this.size + 8 + this.signalStrength * 5, 0, TAU);
+      ctx.stroke();
+    }
+  }
+
+  _drawTriangle(ctx, cx, cy, s) {
+    ctx.beginPath();
+    ctx.moveTo(cx, cy - s);
+    ctx.lineTo(cx - s * 0.87, cy + s * 0.5);
+    ctx.lineTo(cx + s * 0.87, cy + s * 0.5);
+    ctx.closePath();
+    ctx.fill();
+  }
+
+  _drawDiamond(ctx, cx, cy, s) {
+    ctx.beginPath();
+    ctx.moveTo(cx, cy - s);
+    ctx.lineTo(cx + s, cy);
+    ctx.lineTo(cx, cy + s);
+    ctx.lineTo(cx - s, cy);
+    ctx.closePath();
+    ctx.fill();
+  }
+
+  _drawStar(ctx, cx, cy, r, points) {
+    ctx.beginPath();
+    for (let i = 0; i < points * 2; i++) {
+      const rad = i % 2 === 0 ? r : r * 0.4;
+      const angle = (i * Math.PI) / points - Math.PI / 2;
+      const px = cx + Math.cos(angle) * rad;
+      const py = cy + Math.sin(angle) * rad;
+      if (i === 0) ctx.moveTo(px, py);
+      else ctx.lineTo(px, py);
+    }
+    ctx.closePath();
+    ctx.fill();
+  }
+}

js/entityManager.js

@@ -0,0 +1,82 @@
+import { SpatialGrid, randomRange } from "./utils.js";
+import { ENTITY_TYPES, createGenome, reproduce } from "./genetics.js";
+import { Entity } from "./entities.js";
+
+export class EntityManager {
+  constructor(worldWidth, worldHeight) {
+    this.entities = [];
+    this.spatialGrid = new SpatialGrid(worldWidth, worldHeight, 60);
+    this.worldWidth = worldWidth;
+    this.worldHeight = worldHeight;
+  }
+
+  add(entity) {
+    this.entities.push(entity);
+  }
+
+  update(dt, world, particles, stats) {
+    this.spatialGrid.clear();
+    for (const e of this.entities) {
+      if (e.alive) this.spatialGrid.insert(e, e.x, e.y);
+    }
+
+    const newborns = [];
+    for (const e of this.entities) {
+      e.update(dt, world, this.entities, this.spatialGrid, particles);
+
+      const child = e.tryReproduce(this.spatialGrid, particles);
+      if (child) {
+        newborns.push(child);
+        stats.onBirth();
+      }
+    }
+
+    for (const child of newborns) {
+      this.entities.push(child);
+    }
+
+    for (let i = this.entities.length - 1; i >= 0; i--) {
+      if (!this.entities[i].alive) {
+        stats.onDeath();
+        this.entities.splice(i, 1);
+      }
+    }
+  }
+
+  render(ctx) {
+    this.entities.sort((a, b) => a.y - b.y);
+    for (const e of this.entities) {
+      e.render(ctx);
+    }
+  }
+
+  getAlive() {
+    return this.entities.filter((e) => e.alive);
+  }
+
+  spawnRandom(count, world) {
+    const types = Object.keys(ENTITY_TYPES);
+    for (let i = 0; i < count; i++) {
+      const type = types[Math.floor(Math.random() * types.length)];
+      const genome = createGenome(type);
+      const x = randomRange(20, world.width - 20);
+      const y = randomRange(20, world.height - 20);
+      this.entities.push(new Entity(x, y, genome, 0));
+    }
+  }
+
+  spawnFromPopulation(population, count, world) {
+    if (population.length < 2) return;
+    const candidates = population.map((e) => ({
+      genome: e.genome,
+      fitness: e.fitness,
+    }));
+    for (let i = 0; i < count; i++) {
+      const childGenome = reproduce(candidates);
+      const x = randomRange(20, world.width - 20);
+      const y = randomRange(20, world.height - 20);
+      const gen = Math.max(...population.map((e) => e.generation)) + 1;
+      this.entities.push(new Entity(x, y, childGenome, gen));
+    }
+  }
+}

js/genetics.js

@@ -0,0 +1,324 @@
+import { NeuralNetwork } from "./neuralNetwork.js";
+import { randomRange, randomGaussian, clamp } from "./utils.js";
+
+/** Neural network topology shared by all entities */
+export const NET_TOPOLOGY = [14, 12, 8];
+
+/** Entity archetype definitions */
+export const ENTITY_TYPES = {
+  gatherer: {
+    name: "Gatherer",
+    baseTraits: {
+      speed: 2.5,
+      size: 8,
+      vision: 120,
+      attack: 0.2,
+      defense: 0.5,
+      metabolism: 0.8,
+    },
+    color: "#00ff88",
+    fitnessWeights: { survival: 1.0, energy: 2.0, offspring: 1.5, kills: 0.0 },
+    description: "Herbivores that seek food resources",
+  },
+  predator: {
+    name: "Predator",
+    baseTraits: {
+      speed: 3.5,
+      size: 10,
+      vision: 140,
+      attack: 1.5,
+      defense: 0.3,
+      metabolism: 1.2,
+    },
+    color: "#ff3366",
+    fitnessWeights: { survival: 0.5, energy: 1.0, offspring: 1.0, kills: 2.5 },
+    description: "Carnivores that hunt other entities",
+  },
+  builder: {
+    name: "Builder",
+    baseTraits: {
+      speed: 1.8,
+      size: 9,
+      vision: 100,
+      attack: 0.1,
+      defense: 1.5,
+      metabolism: 0.6,
+    },
+    color: "#3399ff",
+    fitnessWeights: { survival: 2.0, energy: 1.5, offspring: 2.0, kills: 0.0 },
+    description: "Defensive entities that build and fortify",
+  },
+  explorer: {
+    name: "Explorer",
+    baseTraits: {
+      speed: 4.0,
+      size: 6,
+      vision: 180,
+      attack: 0.3,
+      defense: 0.3,
+      metabolism: 1.0,
+    },
+    color: "#ffaa00",
+    fitnessWeights: { survival: 1.5, energy: 1.0, offspring: 1.0, kills: 0.5 },
+    description: "Fast scouts with wide vision range",
+  },
+  hybrid: {
+    name: "Hybrid",
+    baseTraits: {
+      speed: 3.0,
+      size: 8,
+      vision: 130,
+      attack: 0.8,
+      defense: 0.8,
+      metabolism: 1.0,
+    },
+    color: "#cc66ff",
+    fitnessWeights: { survival: 1.0, energy: 1.0, offspring: 1.5, kills: 1.0 },
+    description: "Balanced generalists that adapt to conditions",
+  },
+};
+
+/** Trait constraints to prevent runaway evolution */
+const TRAIT_BOUNDS = {
+  speed: { min: 0.5, max: 8.0 },
+  size: { min: 2.0, max: 14.0 },
+  vision: { min: 30, max: 250 },
+  attack: { min: 0.0, max: 3.0 },
+  defense: { min: 0.0, max: 3.0 },
+  metabolism: { min: 0.2, max: 2.5 },
+};
+
+/**
+ * Genome encapsulates an entity's heritable traits and neural weights.
+ */
+export class Genome {
+  /**
+   * @param {string} type - Entity archetype key
+   * @param {object} [traits] - Physical traits (or auto-generated)
+   * @param {number[]} [neuralWeights] - Flat weight array (or auto-generated)
+   */
+  constructor(type, traits = null, neuralWeights = null) {
+    this.type = type;
+    const base = ENTITY_TYPES[type].baseTraits;
+
+    if (traits) {
+      this.traits = { ...traits };
+    } else {
+      this.traits = {};
+      for (const key of Object.keys(base)) {
+        const variance = base[key] * 0.15;
+        this.traits[key] = clamp(
+          base[key] + randomGaussian(0, variance),
+          TRAIT_BOUNDS[key].min,
+          TRAIT_BOUNDS[key].max,
+        );
+      }
+    }
+
+    if (neuralWeights) {
+      this.neuralWeights = neuralWeights.slice();
+    } else {
+      const tempNet = new NeuralNetwork(NET_TOPOLOGY);
+      this.neuralWeights = tempNet.serialize();
+    }
+
+    /** Communication symbol preference (0-7), evolvable */
+    this.signalPreference = traits
+      ? traits._signal || Math.floor(Math.random() * 8)
+      : Math.floor(Math.random() * 8);
+  }
+
+  /** Create a brain (NeuralNetwork) from this genome's stored weights */
+  buildBrain() {
+    const nn = new NeuralNetwork(NET_TOPOLOGY);
+    nn.deserialize(this.neuralWeights);
+    return nn;
+  }
+
+  /** Deep copy */
+  clone() {
+    const g = new Genome(
+      this.type,
+      { ...this.traits },
+      this.neuralWeights.slice(),
+    );
+    g.signalPreference = this.signalPreference;
+    return g;
+  }
+
+  /**
+   * Single-point crossover of two genomes.
+   * Child inherits type from the fitter parent.
+   * @param {Genome} other
+   * @param {string} [childType] - Override child type
+   * @returns {Genome}
+   */
+  crossover(other, childType = null) {
+    const type = childType || this.type;
+
+    const childTraits = {};
+    for (const key of Object.keys(this.traits)) {
+      if (key === "_signal") continue;
+      const t = Math.random();
+      const raw = this.traits[key] * t + other.traits[key] * (1 - t);
+      childTraits[key] = clamp(
+        raw,
+        TRAIT_BOUNDS[key].min,
+        TRAIT_BOUNDS[key].max,
+      );
+    }
+
+    const w1 = this.neuralWeights;
+    const w2 = other.neuralWeights;
+    const len = Math.min(w1.length, w2.length);
+    const childWeights = new Array(len);
+    const crossPoint = Math.floor(Math.random() * len);
+    for (let i = 0; i < len; i++) {
+      childWeights[i] = i < crossPoint ? w1[i] : w2[i];
+    }
+
+    const child = new Genome(type, childTraits, childWeights);
+
+    child.signalPreference =
+      Math.random() < 0.5 ? this.signalPreference : other.signalPreference;
+
+    return child;
+  }
+
+  /**
+   * Apply mutations to traits and weights.
+   * @param {number} traitRate - Probability per trait (e.g. 0.3)
+   * @param {number} weightRate - Probability per weight (e.g. 0.05)
+   * @param {number} magnitude - Gaussian std for weight mutation
+   */
+  mutate(traitRate = 0.3, weightRate = 0.05, magnitude = 0.3) {
+    const base = ENTITY_TYPES[this.type].baseTraits;
+
+    for (const key of Object.keys(this.traits)) {
+      if (key === "_signal") continue;
+      if (Math.random() < traitRate) {
+        const scale = base[key] * 0.1;
+        this.traits[key] = clamp(
+          this.traits[key] + randomGaussian(0, scale),
+          TRAIT_BOUNDS[key].min,
+          TRAIT_BOUNDS[key].max,
+        );
+      }
+    }
+
+    for (let i = 0; i < this.neuralWeights.length; i++) {
+      if (Math.random() < weightRate) {
+        this.neuralWeights[i] += randomGaussian(0, magnitude);
+      }
+    }
+
+    if (Math.random() < 0.05) {
+      this.signalPreference = Math.floor(Math.random() * 8);
+    }
+  }
+
+  /** Serialize to a plain object (for LocalStorage) */
+  toJSON() {
+    return {
+      type: this.type,
+      traits: { ...this.traits },
+      neuralWeights: this.neuralWeights,
+      signalPreference: this.signalPreference,
+    };
+  }
+
+  /** Deserialize from a plain object */
+  static fromJSON(data) {
+    const g = new Genome(data.type, data.traits, data.neuralWeights);
+    g.signalPreference = data.signalPreference || 0;
+    return g;
+  }
+}
+
+/**
+ * Create a new random genome of a given type.
+ * @param {string} type - Archetype key
+ * @returns {Genome}
+ */
+export function createGenome(type) {
+  return new Genome(type);
+}
+
+/**
+ * Tournament selection: pick the fittest from a random subset.
+ * @param {Array<{genome: Genome, fitness: number}>} population
+ * @param {number} tournamentSize
+ * @returns {Genome}
+ */
+export function tournamentSelect(population, tournamentSize = 3) {
+  let best = null;
+  let bestFitness = -Infinity;
+  for (let i = 0; i < tournamentSize; i++) {
+    const idx = Math.floor(Math.random() * population.length);
+    const candidate = population[idx];
+    if (candidate.fitness > bestFitness) {
+      best = candidate;
+      bestFitness = candidate.fitness;
+    }
+  }
+  return best.genome;
+}
+
+/**
+ * Calculate fitness score for an entity's lifetime stats.
+ * @param {string} type - Entity type
+ * @param {object} stats - { survivalTime, energyGathered, offspring, kills }
+ * @returns {number}
+ */
+export function calculateFitness(type, stats) {
+  const w = ENTITY_TYPES[type].fitnessWeights;
+  return (
+    w.survival * stats.survivalTime +
+    w.energy * stats.energyGathered +
+    w.offspring * stats.offspring * 10 +
+    w.kills * stats.kills * 5
+  );
+}
+
+/**
+ * Measure genetic diversity as average pairwise trait distance.
+ * @param {Genome[]} genomes
+ * @returns {number} 0-1 normalized diversity score
+ */
+export function measureDiversity(genomes) {
+  if (genomes.length < 2) return 0;
+
+  const traitKeys = Object.keys(TRAIT_BOUNDS);
+  let totalDist = 0;
+  let pairs = 0;
+
+  const sampleSize = Math.min(genomes.length, 30);
+  for (let i = 0; i < sampleSize; i++) {
+    for (let j = i + 1; j < sampleSize; j++) {
+      let dist = 0;
+      for (const key of traitKeys) {
+        const range = TRAIT_BOUNDS[key].max - TRAIT_BOUNDS[key].min;
+        const diff =
+          Math.abs(genomes[i].traits[key] - genomes[j].traits[key]) / range;
+        dist += diff * diff;
+      }
+      totalDist += Math.sqrt(dist / traitKeys.length);
+      pairs++;
+    }
+  }
+
+  return pairs > 0 ? totalDist / pairs : 0;
+}
+
+/**
+ * Produce a child genome from the population using selection + crossover + mutation.
+ * @param {Array<{genome: Genome, fitness: number}>} population
+ * @returns {Genome}
+ */
+export function reproduce(population) {
+  const parent1 = tournamentSelect(population, 3);
+  const parent2 = tournamentSelect(population, 3);
+  const child = parent1.crossover(parent2);
+  child.mutate(0.25, 0.05, 0.2);
+  return child;
+}

js/neuralNetwork.js

@@ -0,0 +1,286 @@
+/**
+ * Lightweight feedforward neural network for entity decision-making.
+ * Supports arbitrary topology, weight serialization, mutation, and
+ * activation visualization for the HUD neural activity overlay.
+ */
+export class NeuralNetwork {
+  /**
+   * @param {number[]} topology - Layer sizes, e.g. [12, 10, 6]
+   */
+  constructor(topology) {
+    this.topology = topology;
+    this.weights = [];
+    this.biases = [];
+    this.activations = [];
+    this._initWeights();
+  }
+
+  /** Xavier-style initialization for stable gradient flow */
+  _initWeights() {
+    for (let i = 1; i < this.topology.length; i++) {
+      const fanIn = this.topology[i - 1];
+      const fanOut = this.topology[i];
+      const scale = Math.sqrt(2 / (fanIn + fanOut));
+      const layerW = new Array(fanOut);
+      const layerB = new Array(fanOut);
+      for (let j = 0; j < fanOut; j++) {
+        layerW[j] = new Array(fanIn);
+        for (let k = 0; k < fanIn; k++) {
+          layerW[j][k] = (Math.random() * 2 - 1) * scale;
+        }
+        layerB[j] = (Math.random() * 2 - 1) * 0.1;
+      }
+      this.weights.push(layerW);
+      this.biases.push(layerB);
+    }
+  }
+
+  /**
+   * Run a forward pass through the network.
+   * @param {number[]} inputs - Input activations
+   * @returns {number[]} Output activations
+   */
+  forward(inputs) {
+    let current = inputs;
+    this.activations = [inputs.slice()];
+
+    for (let layer = 0; layer < this.weights.length; layer++) {
+      const w = this.weights[layer];
+      const b = this.biases[layer];
+      const numNeurons = w.length;
+      const next = new Array(numNeurons);
+      const isOutput = layer === this.weights.length - 1;
+
+      for (let j = 0; j < numNeurons; j++) {
+        let sum = b[j];
+        const wj = w[j];
+        for (let k = 0; k < current.length; k++) {
+          sum += wj[k] * current[k];
+        }
+        next[j] = Math.tanh(sum);
+      }
+
+      current = next;
+      this.activations.push(current.slice());
+    }
+
+    return current;
+  }
+
+  /** Count total trainable parameters */
+  get totalWeights() {
+    let count = 0;
+    for (let i = 0; i < this.weights.length; i++) {
+      count += this.weights[i].length * this.weights[i][0].length;
+      count += this.biases[i].length;
+    }
+    return count;
+  }
+
+  /** Flatten all weights + biases into a single array */
+  serialize() {
+    const flat = new Array(this.totalWeights);
+    let idx = 0;
+    for (let i = 0; i < this.weights.length; i++) {
+      const w = this.weights[i];
+      for (let j = 0; j < w.length; j++) {
+        for (let k = 0; k < w[j].length; k++) {
+          flat[idx++] = w[j][k];
+        }
+      }
+      const b = this.biases[i];
+      for (let j = 0; j < b.length; j++) {
+        flat[idx++] = b[j];
+      }
+    }
+    return flat;
+  }
+
+  /** Restore weights from a flat array */
+  deserialize(flat) {
+    let idx = 0;
+    for (let i = 0; i < this.weights.length; i++) {
+      const w = this.weights[i];
+      for (let j = 0; j < w.length; j++) {
+        for (let k = 0; k < w[j].length; k++) {
+          w[j][k] = flat[idx++];
+        }
+      }
+      const b = this.biases[i];
+      for (let j = 0; j < b.length; j++) {
+        b[j] = flat[idx++];
+      }
+    }
+  }
+
+  /** Create an exact copy of this network */
+  clone() {
+    const nn = new NeuralNetwork(this.topology.slice());
+    nn.deserialize(this.serialize());
+    return nn;
+  }
+
+  /**
+   * Apply Gaussian mutations to a fraction of weights.
+   * @param {number} rate - Probability of mutating each weight (0-1)
+   * @param {number} magnitude - Standard deviation of mutation noise
+   */
+  mutate(rate, magnitude) {
+    for (let i = 0; i < this.weights.length; i++) {
+      const w = this.weights[i];
+      for (let j = 0; j < w.length; j++) {
+        for (let k = 0; k < w[j].length; k++) {
+          if (Math.random() < rate) {
+            w[j][k] += gaussianNoise() * magnitude;
+          }
+        }
+      }
+      const b = this.biases[i];
+      for (let j = 0; j < b.length; j++) {
+        if (Math.random() < rate) {
+          b[j] += gaussianNoise() * magnitude;
+        }
+      }
+    }
+  }
+
+  /**
+   * Uniform crossover between two networks of the same topology.
+   * @param {NeuralNetwork} other
+   * @returns {NeuralNetwork} child network
+   */
+  crossover(other) {
+    const child = new NeuralNetwork(this.topology.slice());
+    const w1 = this.serialize();
+    const w2 = other.serialize();
+    const childW = new Array(w1.length);
+
+    const crossPoint = Math.floor(Math.random() * w1.length);
+    for (let i = 0; i < w1.length; i++) {
+      childW[i] = i < crossPoint ? w1[i] : w2[i];
+    }
+    child.deserialize(childW);
+    return child;
+  }
+
+  /**
+   * Get the maximum absolute activation across all layers.
+   * Useful for visualization intensity scaling.
+   */
+  getMaxActivation() {
+    let max = 0;
+    for (const layer of this.activations) {
+      for (const v of layer) {
+        const abs = Math.abs(v);
+        if (abs > max) max = abs;
+      }
+    }
+    return max;
+  }
+
+  /**
+   * Render a mini neural network diagram to a canvas context.
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {number} x - Top-left x
+   * @param {number} y - Top-left y
+   * @param {number} w - Width
+   * @param {number} h - Height
+   */
+  renderMini(ctx, x, y, w, h) {
+    const layers = this.topology.length;
+    const layerSpacing = w / (layers - 1);
+
+    ctx.lineWidth = 0.5;
+    for (let l = 0; l < this.weights.length; l++) {
+      const fromCount = this.topology[l];
+      const toCount = this.topology[l + 1];
+      const fromX = x + l * layerSpacing;
+      const toX = x + (l + 1) * layerSpacing;
+
+      for (let j = 0; j < toCount; j++) {
+        const toY = y + (j + 0.5) * (h / toCount);
+        for (let k = 0; k < fromCount; k++) {
+          const fromY = y + (k + 0.5) * (h / fromCount);
+          const weight = this.weights[l][j][k];
+          const alpha = Math.min(Math.abs(weight) * 0.5, 0.6);
+          ctx.strokeStyle =
+            weight > 0
+              ? `rgba(0, 240, 255, ${alpha})`
+              : `rgba(255, 51, 102, ${alpha})`;
+          ctx.beginPath();
+          ctx.moveTo(fromX, fromY);
+          ctx.lineTo(toX, toY);
+          ctx.stroke();
+        }
+      }
+    }
+
+    for (let l = 0; l < layers; l++) {
+      const count = this.topology[l];
+      const lx = x + l * layerSpacing;
+      const act = this.activations[l] || [];
+
+      for (let n = 0; n < count; n++) {
+        const ny = y + (n + 0.5) * (h / count);
+        const val = act[n] || 0;
+        const intensity = Math.abs(val);
+        const r = Math.max(2, 4 - layers * 0.3);
+
+        ctx.beginPath();
+        ctx.arc(lx, ny, r, 0, Math.PI * 2);
+        ctx.fillStyle =
+          val > 0
+            ? `rgba(0, 240, 255, ${0.3 + intensity * 0.7})`
+            : `rgba(255, 51, 102, ${0.3 + intensity * 0.7})`;
+        ctx.fill();
+      }
+    }
+  }
+}
+
+/** Gaussian noise using Box-Muller transform */
+function gaussianNoise() {
+  let u = 0,
+    v = 0;
+  while (u === 0) u = Math.random();
+  while (v === 0) v = Math.random();
+  return Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
+}
+
+/**
+ * QuantumDecisionLayer - probabilistic branching for elite entities.
+ * Samples from a probability distribution over actions rather than
+ * taking the deterministic argmax.
+ */
+export class QuantumDecisionLayer {
+  /**
+   * @param {number} temperature - Controls exploration vs exploitation.
+   *   Higher = more random, lower = more greedy.
+   */
+  constructor(temperature = 1.0) {
+    this.temperature = temperature;
+  }
+
+  /**
+   * Apply softmax with temperature to raw outputs and sample.
+   * @param {number[]} logits - Raw network outputs
+   * @returns {{ action: number, probabilities: number[] }}
+   */
+  sample(logits) {
+    const t = this.temperature;
+    const maxLogit = Math.max(...logits);
+    const exps = logits.map((l) => Math.exp((l - maxLogit) / t));
+    const sum = exps.reduce((a, b) => a + b, 0);
+    const probs = exps.map((e) => e / sum);
+
+    const r = Math.random();
+    let cumulative = 0;
+    for (let i = 0; i < probs.length; i++) {
+      cumulative += probs[i];
+      if (r <= cumulative) {
+        return { action: i, probabilities: probs };
+      }
+    }
+    return { action: probs.length - 1, probabilities: probs };
+  }
+}

js/particles.js

@@ -0,0 +1,269 @@
+import { ObjectPool, TAU, randomRange, lerp } from "./utils.js";
+
+class Particle {
+  constructor() {
+    this.reset();
+  }
+
+  reset() {
+    this.x = 0;
+    this.y = 0;
+    this.vx = 0;
+    this.vy = 0;
+    this.life = 0;
+    this.maxLife = 1;
+    this.size = 2;
+    this.r = 255;
+    this.g = 255;
+    this.b = 255;
+    this.alpha = 1;
+    this.decay = 1;
+    this.friction = 0.98;
+    this.gravity = 0;
+    this.type = "circle";
+  }
+}
+
+const PRESETS = {
+  eat: {
+    count: 6,
+    speed: [20, 50],
+    life: [0.3, 0.6],
+    size: [1.5, 3],
+    color: [0, 255, 170],
+    friction: 0.92,
+    type: "circle",
+  },
+  attack: {
+    count: 10,
+    speed: [40, 80],
+    life: [0.2, 0.4],
+    size: [1.5, 3.5],
+    color: [255, 51, 102],
+    friction: 0.9,
+    type: "spark",
+  },
+  reproduce: {
+    count: 14,
+    speed: [30, 70],
+    life: [0.5, 1.0],
+    size: [2, 5],
+    color: [204, 102, 255],
+    friction: 0.94,
+    type: "circle",
+  },
+  death: {
+    count: 20,
+    speed: [20, 60],
+    life: [0.6, 1.2],
+    size: [2, 5],
+    color: [255, 100, 100],
+    friction: 0.96,
+    gravity: 15,
+    type: "spark",
+  },
+  energy: {
+    count: 4,
+    speed: [10, 30],
+    life: [0.4, 0.8],
+    size: [2, 4],
+    color: [255, 238, 68],
+    friction: 0.95,
+    type: "circle",
+  },
+  signal: {
+    count: 3,
+    speed: [5, 15],
+    life: [0.5, 0.8],
+    size: [1.5, 3],
+    color: [100, 200, 255],
+    friction: 0.97,
+    type: "circle",
+  },
+  storm: {
+    count: 1,
+    speed: [30, 80],
+    life: [0.8, 1.5],
+    size: [1, 2.5],
+    color: [255, 238, 68],
+    friction: 0.99,
+    gravity: 40,
+    type: "spark",
+  },
+  bloom: {
+    count: 1,
+    speed: [10, 40],
+    life: [0.6, 1.2],
+    size: [2, 4],
+    color: [0, 255, 170],
+    friction: 0.96,
+    gravity: -5,
+    type: "circle",
+  },
+};
+
+export class ParticleSystem {
+  constructor(maxParticles = 2000) {
+    this.maxParticles = maxParticles;
+    this.active = [];
+    this._pool = new ObjectPool(
+      () => new Particle(),
+      (p) => p.reset(),
+      maxParticles,
+    );
+  }
+
+  emit(x, y, preset, colorOverride = null) {
+    const config = typeof preset === "string" ? PRESETS[preset] : preset;
+    if (!config) return;
+
+    const count = config.count || 5;
+    for (let i = 0; i < count; i++) {
+      if (this.active.length >= this.maxParticles) {
+        const old = this.active.shift();
+        this._pool.release(old);
+      }
+
+      const p = this._pool.acquire();
+      const angle = Math.random() * TAU;
+      const speed = randomRange(config.speed[0], config.speed[1]);
+
+      p.x = x;
+      p.y = y;
+      p.vx = Math.cos(angle) * speed;
+      p.vy = Math.sin(angle) * speed;
+      p.maxLife = randomRange(config.life[0], config.life[1]);
+      p.life = p.maxLife;
+      p.size = randomRange(config.size[0], config.size[1]);
+      p.friction = config.friction || 0.95;
+      p.gravity = config.gravity || 0;
+      p.type = config.type || "circle";
+
+      if (colorOverride) {
+        p.r = colorOverride[0];
+        p.g = colorOverride[1];
+        p.b = colorOverride[2];
+      } else {
+        p.r = config.color[0];
+        p.g = config.color[1];
+        p.b = config.color[2];
+      }
+
+      this.active.push(p);
+    }
+  }
+
+  emitTrail(x, y, r, g, b, size = 1.5) {
+    if (this.active.length >= this.maxParticles) {
+      const old = this.active.shift();
+      this._pool.release(old);
+    }
+
+    const p = this._pool.acquire();
+    p.x = x;
+    p.y = y;
+    p.vx = 0;
+    p.vy = 0;
+    p.maxLife = 0.4;
+    p.life = 0.4;
+    p.size = size;
+    p.r = r;
+    p.g = g;
+    p.b = b;
+    p.friction = 1.0;
+    p.type = "trail";
+    this.active.push(p);
+  }
+
+  update(dt) {
+    for (let i = this.active.length - 1; i >= 0; i--) {
+      const p = this.active[i];
+      p.life -= dt;
+
+      if (p.life <= 0) {
+        this.active.splice(i, 1);
+        this._pool.release(p);
+        continue;
+      }
+
+      p.vy += p.gravity * dt;
+      p.vx *= p.friction;
+      p.vy *= p.friction;
+      p.x += p.vx * dt;
+      p.y += p.vy * dt;
+    }
+  }
+
+  render(ctx) {
+    if (this.active.length === 0) return;
+
+    ctx.save();
+
+    for (const p of this.active) {
+      const t = p.life / p.maxLife;
+      const alpha = t * 0.8;
+      const size = p.size * (0.3 + 0.7 * t);
+
+      switch (p.type) {
+        case "circle":
+          ctx.fillStyle = `rgba(${p.r},${p.g},${p.b},${alpha * 0.3})`;
+          ctx.beginPath();
+          ctx.arc(p.x, p.y, size * 2, 0, TAU);
+          ctx.fill();
+          ctx.fillStyle = `rgba(${p.r},${p.g},${p.b},${alpha})`;
+          ctx.beginPath();
+          ctx.arc(p.x, p.y, size, 0, TAU);
+          ctx.fill();
+          break;
+
+        case "spark": {
+          const len = Math.sqrt(p.vx * p.vx + p.vy * p.vy) * 0.05 + 2;
+          const angle = Math.atan2(p.vy, p.vx);
+          ctx.strokeStyle = `rgba(${p.r},${p.g},${p.b},${alpha})`;
+          ctx.lineWidth = size * 0.6;
+          ctx.beginPath();
+          ctx.moveTo(p.x - Math.cos(angle) * len, p.y - Math.sin(angle) * len);
+          ctx.lineTo(
+            p.x + Math.cos(angle) * len * 0.3,
+            p.y + Math.sin(angle) * len * 0.3,
+          );
+          ctx.stroke();
+          break;
+        }
+
+        case "trail":
+          ctx.fillStyle = `rgba(${p.r},${p.g},${p.b},${alpha * 0.4})`;
+          ctx.beginPath();
+          ctx.arc(p.x, p.y, size, 0, TAU);
+          ctx.fill();
+          break;
+      }
+    }
+
+    ctx.shadowBlur = 0;
+    ctx.restore();
+  }
+
+  emitWeather(event, dt) {
+    const preset = event.type === "storm" ? "storm" : "bloom";
+    const chance = event.type === "storm" ? 0.6 : 0.3;
+    if (Math.random() < chance * dt * 10) {
+      const angle = Math.random() * TAU;
+      const dist = Math.random() * event.radius;
+      const x = event.x + Math.cos(angle) * dist;
+      const y = event.y + Math.sin(angle) * dist;
+      this.emit(x, y, preset);
+    }
+  }
+
+  get count() {
+    return this.active.length;
+  }
+
+  clear() {
+    for (const p of this.active) {
+      this._pool.release(p);
+    }
+    this.active.length = 0;
+  }
+}

js/stats.js

@@ -0,0 +1,270 @@
+import { RingBuffer, COLORS, EMA } from "./utils.js";
+import { ENTITY_TYPES, measureDiversity } from "./genetics.js";
+
+const HISTORY_LENGTH = 200;
+
+export class StatsTracker {
+  constructor() {
+    this.generationCount = 0;
+    this.totalBirths = 0;
+    this.totalDeaths = 0;
+    this.totalTime = 0;
+    this.peakPopulation = 0;
+
+    this.popHistory = {};
+    this.totalPopHistory = new RingBuffer(HISTORY_LENGTH);
+    for (const type of Object.keys(ENTITY_TYPES)) {
+      this.popHistory[type] = new RingBuffer(HISTORY_LENGTH);
+    }
+
+    this.avgFitnessHistory = new RingBuffer(HISTORY_LENGTH);
+    this.maxFitnessHistory = new RingBuffer(HISTORY_LENGTH);
+
+    this.diversityHistory = new RingBuffer(HISTORY_LENGTH);
+
+    this.fpsEMA = new EMA(0.1);
+    this.entityCountEMA = new EMA(0.2);
+
+    this.current = {
+      population: {},
+      totalPop: 0,
+      avgFitness: 0,
+      maxFitness: 0,
+      diversity: 0,
+      fps: 60,
+      entityCount: 0,
+      particleCount: 0,
+    };
+
+    this.heatmapCols = 40;
+    this.heatmapRows = 30;
+    this.heatmap = new Float32Array(this.heatmapCols * this.heatmapRows);
+
+    this._recordTimer = 0;
+    this._recordInterval = 0.5;
+  }
+
+  record(entities, world, dt, fps, particleCount) {
+    this.totalTime += dt;
+    this._recordTimer += dt;
+
+    this.current.fps = this.fpsEMA.update(fps);
+    this.current.entityCount = entities.length;
+    this.current.particleCount = particleCount;
+
+    if (this._recordTimer < this._recordInterval) return;
+    this._recordTimer = 0;
+
+    const popCounts = {};
+    for (const type of Object.keys(ENTITY_TYPES)) {
+      popCounts[type] = 0;
+    }
+    let totalFitness = 0;
+    let maxFitness = 0;
+    const genomes = [];
+
+    this.heatmap.fill(0);
+    const cellW = world.width / this.heatmapCols;
+    const cellH = world.height / this.heatmapRows;
+
+    for (const e of entities) {
+      popCounts[e.type] = (popCounts[e.type] || 0) + 1;
+      totalFitness += e.fitness;
+      if (e.fitness > maxFitness) maxFitness = e.fitness;
+      genomes.push(e.genome);
+
+      const col = Math.floor(e.x / cellW);
+      const row = Math.floor(e.y / cellH);
+      if (
+        col >= 0 &&
+        col < this.heatmapCols &&
+        row >= 0 &&
+        row < this.heatmapRows
+      ) {
+        this.heatmap[row * this.heatmapCols + col] += 1;
+      }
+    }
+
+    const totalPop = entities.length;
+    this.current.population = popCounts;
+    this.current.totalPop = totalPop;
+    this.current.avgFitness = totalPop > 0 ? totalFitness / totalPop : 0;
+    this.current.maxFitness = maxFitness;
+    this.current.diversity = measureDiversity(genomes);
+
+    if (totalPop > this.peakPopulation) this.peakPopulation = totalPop;
+
+    this.totalPopHistory.push(totalPop);
+    for (const type of Object.keys(ENTITY_TYPES)) {
+      this.popHistory[type].push(popCounts[type] || 0);
+    }
+    this.avgFitnessHistory.push(this.current.avgFitness);
+    this.maxFitnessHistory.push(maxFitness);
+    this.diversityHistory.push(this.current.diversity);
+  }
+
+  onBirth() {
+    this.totalBirths++;
+  }
+  onDeath() {
+    this.totalDeaths++;
+  }
+  onGeneration() {
+    this.generationCount++;
+  }
+
+  renderSparkline(ctx, buffer, x, y, w, h, color) {
+    const data = buffer.toArray();
+    if (data.length < 2) return;
+
+    let max = -Infinity,
+      min = Infinity;
+    for (const v of data) {
+      if (v > max) max = v;
+      if (v < min) min = v;
+    }
+    const range = max - min || 1;
+
+    ctx.beginPath();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+
+    for (let i = 0; i < data.length; i++) {
+      const px = x + (i / (data.length - 1)) * w;
+      const py = y + h - ((data[i] - min) / range) * h;
+      if (i === 0) ctx.moveTo(px, py);
+      else ctx.lineTo(px, py);
+    }
+    ctx.stroke();
+
+    ctx.lineTo(x + w, y + h);
+    ctx.lineTo(x, y + h);
+    ctx.closePath();
+    const grad = ctx.createLinearGradient(x, y, x, y + h);
+    const rgbMatch = color.match(/(\d+),\s*(\d+),\s*(\d+)/);
+    if (rgbMatch) {
+      grad.addColorStop(
+        0,
+        `rgba(${rgbMatch[1]},${rgbMatch[2]},${rgbMatch[3]},0.15)`,
+      );
+      grad.addColorStop(
+        1,
+        `rgba(${rgbMatch[1]},${rgbMatch[2]},${rgbMatch[3]},0.0)`,
+      );
+    }
+    ctx.fillStyle = grad;
+    ctx.fill();
+  }
+
+  renderCharts(ctx, x, y, w, h) {
+    const chartH = h / 3 - 8;
+    const pad = 4;
+
+    ctx.fillStyle = "rgba(100, 200, 255, 0.4)";
+    ctx.font = "9px Courier New";
+    ctx.fillText("POPULATION", x + 2, y + 8);
+    this.renderSparkline(
+      ctx,
+      this.totalPopHistory,
+      x,
+      y + 12,
+      w,
+      chartH,
+      "rgb(0, 240, 255)",
+    );
+
+    const types = Object.keys(ENTITY_TYPES);
+    for (const type of types) {
+      const c = COLORS[type];
+      if (c) {
+        this.renderSparkline(
+          ctx,
+          this.popHistory[type],
+          x,
+          y + 12,
+          w,
+          chartH,
+          `rgb(${c.r},${c.g},${c.b})`,
+        );
+      }
+    }
+
+    const fy = y + chartH + 20;
+    ctx.fillStyle = "rgba(100, 200, 255, 0.4)";
+    ctx.fillText("FITNESS", x + 2, fy + 8);
+    this.renderSparkline(
+      ctx,
+      this.avgFitnessHistory,
+      x,
+      fy + 12,
+      w,
+      chartH,
+      "rgb(0, 255, 136)",
+    );
+    this.renderSparkline(
+      ctx,
+      this.maxFitnessHistory,
+      x,
+      fy + 12,
+      w,
+      chartH,
+      "rgb(255, 170, 0)",
+    );
+
+    const dy = fy + chartH + 20;
+    ctx.fillStyle = "rgba(100, 200, 255, 0.4)";
+    ctx.fillText("DIVERSITY", x + 2, dy + 8);
+    this.renderSparkline(
+      ctx,
+      this.diversityHistory,
+      x,
+      dy + 12,
+      w,
+      chartH,
+      "rgb(204, 102, 255)",
+    );
+  }
+
+  renderHeatmap(ctx, worldW, worldH) {
+    const cellW = worldW / this.heatmapCols;
+    const cellH = worldH / this.heatmapRows;
+
+    let maxDensity = 0;
+    for (let i = 0; i < this.heatmap.length; i++) {
+      if (this.heatmap[i] > maxDensity) maxDensity = this.heatmap[i];
+    }
+    if (maxDensity === 0) return;
+
+    for (let row = 0; row < this.heatmapRows; row++) {
+      for (let col = 0; col < this.heatmapCols; col++) {
+        const density = this.heatmap[row * this.heatmapCols + col];
+        if (density === 0) continue;
+        const intensity = density / maxDensity;
+        const alpha = intensity * 0.06;
+        ctx.fillStyle = `rgba(0, 240, 255, ${alpha})`;
+        ctx.fillRect(col * cellW, row * cellH, cellW + 1, cellH + 1);
+      }
+    }
+  }
+
+  toJSON() {
+    return {
+      generationCount: this.generationCount,
+      totalBirths: this.totalBirths,
+      totalDeaths: this.totalDeaths,
+      totalTime: this.totalTime,
+      peakPopulation: this.peakPopulation,
+    };
+  }
+
+  static fromJSON(data) {
+    const s = new StatsTracker();
+    s.generationCount = data.generationCount || 0;
+    s.totalBirths = data.totalBirths || 0;
+    s.totalDeaths = data.totalDeaths || 0;
+    s.totalTime = data.totalTime || 0;
+    s.peakPopulation = data.peakPopulation || 0;
+    return s;
+  }
+}

js/ui.js

@@ -0,0 +1,293 @@
+import { ENTITY_TYPES } from "./genetics.js";
+import { EVENT_TYPES } from "./world.js";
+import { COLORS, formatNumber } from "./utils.js";
+
+const MAX_EVENTS = 30;
+
+export class UI {
+  constructor(container) {
+    this.container = container;
+    this.events = [];
+    this._announcement = null;
+    this._announcementTimeout = null;
+    this._elements = {};
+    this._chartCanvas = null;
+    this._chartCtx = null;
+    this._built = false;
+  }
+
+  init() {
+    if (this._built) return;
+    this._built = true;
+
+    this._buildPanel(
+      "panel-generation",
+      `
+      <div class="panel-title">GENERATION</div>
+      <div class="stat-value neon-text-cyan" id="gen-count" aria-live="polite">0</div>
+      <div class="stat-label" id="gen-time">0:00</div>
+    `,
+    );
+
+    this._buildPanel(
+      "panel-stats",
+      `
+      <div class="panel-title"><span class="live-indicator" aria-hidden="true"></span>POPULATION</div>
+      <div id="pop-total" class="stat-value" style="margin-bottom:6px">0</div>
+      <div id="pop-breakdown" role="list" aria-label="Population by type"></div>
+      <hr class="neon-divider">
+      <div class="stat-row">
+        <span class="stat-label">Births</span>
+        <span class="count" id="stat-births">0</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Deaths</span>
+        <span class="count" id="stat-deaths">0</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Peak</span>
+        <span class="count" id="stat-peak">0</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Diversity</span>
+        <span class="count" id="stat-diversity">0%</span>
+      </div>
+    `,
+    );
+
+    this._buildPanel(
+      "panel-performance",
+      `
+      <div class="panel-title">SYSTEM</div>
+      <div class="stat-row">
+        <span class="stat-label">FPS</span>
+        <span class="count neon-text-green" id="perf-fps">60</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Entities</span>
+        <span class="count" id="perf-entities">0</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Particles</span>
+        <span class="count" id="perf-particles">0</span>
+      </div>
+    `,
+    );
+
+    this._buildPanel(
+      "panel-events",
+      `
+      <div class="panel-title">EVENT LOG</div>
+      <div id="event-list" role="log" aria-label="Simulation events" aria-live="polite"></div>
+    `,
+    );
+
+    this._buildPanel(
+      "panel-charts",
+      `
+      <canvas id="chart-canvas" class="chart-canvas" aria-label="Population and fitness charts" role="img"></canvas>
+    `,
+    );
+
+    this._buildPopRows();
+
+    const ann = document.createElement("div");
+    ann.className = "announcement";
+    ann.id = "announcement";
+    ann.setAttribute("role", "alert");
+    ann.setAttribute("aria-live", "assertive");
+    this.container.appendChild(ann);
+    this._announcement = ann;
+
+    this._chartCanvas = document.getElementById("chart-canvas");
+    if (this._chartCanvas) {
+      this._resizeChartCanvas();
+      this._chartCtx = this._chartCanvas.getContext("2d");
+    }
+
+    const srSummary = document.createElement("div");
+    srSummary.className = "sr-only";
+    srSummary.id = "sr-summary";
+    srSummary.setAttribute("aria-live", "polite");
+    srSummary.setAttribute("aria-atomic", "true");
+    this.container.appendChild(srSummary);
+    this._srSummary = srSummary;
+    this._srTimer = 0;
+
+    window.addEventListener("resize", () => this._resizeChartCanvas());
+  }
+
+  _buildPanel(id, html) {
+    const panel = document.createElement("div");
+    panel.id = id;
+    panel.className = "hud-panel glass-panel";
+    panel.innerHTML = html;
+    panel.setAttribute("tabindex", "0");
+    this.container.appendChild(panel);
+    return panel;
+  }
+
+  _buildPopRows() {
+    const container = document.getElementById("pop-breakdown");
+    if (!container) return;
+
+    for (const [type, info] of Object.entries(ENTITY_TYPES)) {
+      const row = document.createElement("div");
+      row.className = "stat-row";
+      row.setAttribute("role", "listitem");
+      row.innerHTML = `
+        <span>
+          <span class="dot dot-${type}" aria-hidden="true"></span>
+          <span class="stat-label">${info.name}</span>
+        </span>
+        <span class="count type-${type}" id="pop-${type}">0</span>
+      `;
+      container.appendChild(row);
+    }
+  }
+
+  _resizeChartCanvas() {
+    const canvas = this._chartCanvas;
+    if (!canvas) return;
+    const panel = canvas.parentElement;
+    const rect = panel.getBoundingClientRect();
+    canvas.width = rect.width - 32;
+    canvas.height = rect.height - 32;
+    this._chartCtx = canvas.getContext("2d");
+  }
+
+  update(stats, world, entityManager, dt) {
+    const c = stats.current;
+
+    this._setText("gen-count", stats.generationCount.toString());
+    this._setText("gen-time", this._formatTime(stats.totalTime));
+
+    this._setText("pop-total", c.totalPop.toString());
+    for (const type of Object.keys(ENTITY_TYPES)) {
+      this._setText(`pop-${type}`, (c.population[type] || 0).toString());
+    }
+
+    this._setText("stat-births", formatNumber(stats.totalBirths));
+    this._setText("stat-deaths", formatNumber(stats.totalDeaths));
+    this._setText("stat-peak", stats.peakPopulation.toString());
+    this._setText("stat-diversity", (c.diversity * 100).toFixed(0) + "%");
+
+    this._setText("perf-fps", Math.round(c.fps).toString());
+    this._setText("perf-entities", c.entityCount.toString());
+    this._setText("perf-particles", c.particleCount.toString());
+
+    const fpsEl = document.getElementById("perf-fps");
+    if (fpsEl) {
+      if (c.fps >= 50) fpsEl.className = "count neon-text-green";
+      else if (c.fps >= 30) fpsEl.className = "count neon-text-amber";
+      else fpsEl.className = "count neon-text-red";
+    }
+
+    if (this._chartCtx && this._chartCanvas) {
+      this._chartCtx.clearRect(
+        0,
+        0,
+        this._chartCanvas.width,
+        this._chartCanvas.height,
+      );
+      stats.renderCharts(
+        this._chartCtx,
+        4,
+        0,
+        this._chartCanvas.width - 8,
+        this._chartCanvas.height,
+      );
+    }
+
+    this._srTimer += dt;
+    if (this._srTimer >= 10) {
+      this._srTimer = 0;
+      this._updateScreenReaderSummary(stats);
+    }
+  }
+
+  _setText(id, text) {
+    const el = document.getElementById(id);
+    if (el && el.textContent !== text) {
+      el.textContent = text;
+    }
+  }
+
+  _formatTime(seconds) {
+    const m = Math.floor(seconds / 60);
+    const s = Math.floor(seconds % 60);
+    return `${m}:${s.toString().padStart(2, "0")}`;
+  }
+
+  addEvent(message, type = "world") {
+    const time = new Date();
+    const timeStr = time.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+
+    this.events.push({ message, type, time: timeStr });
+    if (this.events.length > MAX_EVENTS) this.events.shift();
+
+    const list = document.getElementById("event-list");
+    if (!list) return;
+
+    const entry = document.createElement("div");
+    entry.className = `event-entry event-${type}`;
+    entry.innerHTML = `<span class="timestamp">${timeStr}</span>${this._escapeHtml(message)}`;
+    list.appendChild(entry);
+
+    while (list.children.length > MAX_EVENTS) {
+      list.removeChild(list.firstChild);
+    }
+
+    const panel = document.getElementById("panel-events");
+    if (panel) panel.scrollTop = panel.scrollHeight;
+  }
+
+  announce(message) {
+    if (!this._announcement) return;
+    this._announcement.textContent = message;
+    this._announcement.classList.add("visible");
+
+    if (this._announcementTimeout) clearTimeout(this._announcementTimeout);
+    this._announcementTimeout = setTimeout(() => {
+      this._announcement.classList.remove("visible");
+    }, 4000);
+  }
+
+  announceWorldEvent(event) {
+    const info = EVENT_TYPES[event.type];
+    if (info) {
+      this.announce(`${info.icon} ${info.name} detected!`);
+      this.addEvent(
+        `${info.name} at (${Math.round(event.x)}, ${Math.round(event.y)})`,
+        "world",
+      );
+    }
+  }
+
+  _updateScreenReaderSummary(stats) {
+    const c = stats.current;
+    const parts = [
+      `Generation ${stats.generationCount}.`,
+      `Total population: ${c.totalPop}.`,
+    ];
+    for (const [type, info] of Object.entries(ENTITY_TYPES)) {
+      parts.push(`${info.name}: ${c.population[type] || 0}.`);
+    }
+    parts.push(`Average fitness: ${c.avgFitness.toFixed(1)}.`);
+    parts.push(`Diversity: ${(c.diversity * 100).toFixed(0)} percent.`);
+    if (this._srSummary) {
+      this._srSummary.textContent = parts.join(" ");
+    }
+  }
+
+  _escapeHtml(str) {
+    return str
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;");
+  }
+}

js/utils.js

@@ -0,0 +1,257 @@
+export const TAU = Math.PI * 2;
+
+export function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+
+export function clamp(v, min, max) {
+  return v < min ? min : v > max ? max : v;
+}
+
+export function distance(x1, y1, x2, y2) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+export function distanceSq(x1, y1, x2, y2) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  return dx * dx + dy * dy;
+}
+
+export function randomRange(min, max) {
+  return min + Math.random() * (max - min);
+}
+
+export function randomInt(min, max) {
+  return Math.floor(randomRange(min, max + 1));
+}
+
+export function randomGaussian(mean = 0, std = 1) {
+  let u = 0,
+    v = 0;
+  while (u === 0) u = Math.random();
+  while (v === 0) v = Math.random();
+  return mean + std * Math.sqrt(-2.0 * Math.log(u)) * Math.cos(TAU * v);
+}
+
+export function randomChoice(arr) {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+export function normalize(x, y) {
+  const len = Math.sqrt(x * x + y * y);
+  if (len === 0) return { x: 0, y: 0 };
+  return { x: x / len, y: y / len };
+}
+
+export function angleBetween(x1, y1, x2, y2) {
+  return Math.atan2(y2 - y1, x2 - x1);
+}
+
+export function hslToHex(h, s, l) {
+  s /= 100;
+  l /= 100;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+
+export function hexToRgb(hex) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return { r, g, b };
+}
+
+export function rgbToString(r, g, b, a = 1) {
+  return a < 1 ? `rgba(${r},${g},${b},${a})` : `rgb(${r},${g},${b})`;
+}
+
+export function smoothstep(edge0, edge1, x) {
+  const t = clamp((x - edge0) / (edge1 - edge0), 0, 1);
+  return t * t * (3 - 2 * t);
+}
+
+/** Simple seeded pseudo-random for reproducible sequences */
+export function seededRandom(seed) {
+  let s = seed;
+  return function () {
+    s = (s * 1664525 + 1013904223) & 0xffffffff;
+    return (s >>> 0) / 0xffffffff;
+  };
+}
+
+/** Object pool for reducing GC pressure */
+export class ObjectPool {
+  constructor(factory, reset, initialSize = 100) {
+    this._factory = factory;
+    this._reset = reset;
+    this._pool = [];
+    for (let i = 0; i < initialSize; i++) {
+      this._pool.push(factory());
+    }
+  }
+
+  acquire() {
+    if (this._pool.length > 0) {
+      return this._pool.pop();
+    }
+    return this._factory();
+  }
+
+  release(obj) {
+    this._reset(obj);
+    this._pool.push(obj);
+  }
+
+  get available() {
+    return this._pool.length;
+  }
+}
+
+/** Spatial hash grid for efficient proximity queries */
+export class SpatialGrid {
+  constructor(width, height, cellSize) {
+    this.cellSize = cellSize;
+    this.cols = Math.ceil(width / cellSize);
+    this.rows = Math.ceil(height / cellSize);
+    this.cells = new Array(this.cols * this.rows);
+    this.clear();
+  }
+
+  clear() {
+    for (let i = 0; i < this.cells.length; i++) {
+      if (this.cells[i]) {
+        this.cells[i].length = 0;
+      } else {
+        this.cells[i] = [];
+      }
+    }
+  }
+
+  _key(col, row) {
+    return row * this.cols + col;
+  }
+
+  insert(item, x, y) {
+    const col = Math.floor(x / this.cellSize);
+    const row = Math.floor(y / this.cellSize);
+    if (col >= 0 && col < this.cols && row >= 0 && row < this.rows) {
+      this.cells[this._key(col, row)].push(item);
+    }
+  }
+
+  query(x, y, radius) {
+    const results = [];
+    const minCol = Math.max(0, Math.floor((x - radius) / this.cellSize));
+    const maxCol = Math.min(
+      this.cols - 1,
+      Math.floor((x + radius) / this.cellSize),
+    );
+    const minRow = Math.max(0, Math.floor((y - radius) / this.cellSize));
+    const maxRow = Math.min(
+      this.rows - 1,
+      Math.floor((y + radius) / this.cellSize),
+    );
+    const rSq = radius * radius;
+
+    for (let row = minRow; row <= maxRow; row++) {
+      for (let col = minCol; col <= maxCol; col++) {
+        const cell = this.cells[this._key(col, row)];
+        for (let i = 0; i < cell.length; i++) {
+          const item = cell[i];
+          const dx = item.x - x;
+          const dy = item.y - y;
+          if (dx * dx + dy * dy <= rSq) {
+            results.push(item);
+          }
+        }
+      }
+    }
+    return results;
+  }
+}
+
+/** Exponential moving average for smooth telemetry */
+export class EMA {
+  constructor(alpha = 0.1) {
+    this.alpha = alpha;
+    this.value = null;
+  }
+
+  update(v) {
+    if (this.value === null) {
+      this.value = v;
+    } else {
+      this.value = this.alpha * v + (1 - this.alpha) * this.value;
+    }
+    return this.value;
+  }
+
+  reset() {
+    this.value = null;
+  }
+}
+
+/** Ring buffer for fixed-size history */
+export class RingBuffer {
+  constructor(capacity) {
+    this.capacity = capacity;
+    this.data = new Array(capacity);
+    this.head = 0;
+    this.size = 0;
+  }
+
+  push(value) {
+    this.data[this.head] = value;
+    this.head = (this.head + 1) % this.capacity;
+    if (this.size < this.capacity) this.size++;
+  }
+
+  toArray() {
+    const arr = new Array(this.size);
+    for (let i = 0; i < this.size; i++) {
+      arr[i] =
+        this.data[(this.head - this.size + i + this.capacity) % this.capacity];
+    }
+    return arr;
+  }
+
+  get last() {
+    if (this.size === 0) return undefined;
+    return this.data[(this.head - 1 + this.capacity) % this.capacity];
+  }
+}
+
+/** Color constants for entity types */
+export const COLORS = {
+  gatherer: { hex: "#00ff88", r: 0, g: 255, b: 136 },
+  predator: { hex: "#ff3366", r: 255, g: 51, b: 102 },
+  builder: { hex: "#3399ff", r: 51, g: 153, b: 255 },
+  explorer: { hex: "#ffaa00", r: 255, g: 170, b: 0 },
+  hybrid: { hex: "#cc66ff", r: 204, g: 102, b: 255 },
+  food: { hex: "#00ffaa", r: 0, g: 255, b: 170 },
+  energy: { hex: "#ffee44", r: 255, g: 238, b: 68 },
+  cyan: { hex: "#00f0ff", r: 0, g: 240, b: 255 },
+};
+
+/** Format a number for display (e.g., 1234 -> 1.2k) */
+export function formatNumber(n) {
+  if (n >= 1000000) return (n / 1000000).toFixed(1) + "M";
+  if (n >= 1000) return (n / 1000).toFixed(1) + "k";
+  return Math.round(n).toString();
+}
+
+/** Wrap value within bounds */
+export function wrap(value, min, max) {
+  const range = max - min;
+  return ((((value - min) % range) + range) % range) + min;
+}

js/world.js

@@ -0,0 +1,456 @@
+import { randomRange, SpatialGrid, TAU, distance } from "./utils.js";
+
+const RESOURCE_FOOD = 0;
+const RESOURCE_ENERGY = 1;
+
+let nextResourceId = 1;
+
+class Resource {
+  constructor(x, y, type, amount) {
+    this.id = nextResourceId++;
+    this.x = x;
+    this.y = y;
+    this.type = type;
+    this.amount = amount;
+    this.maxAmount = amount;
+    this.regenRate = type === RESOURCE_FOOD ? 0.3 : 0.15;
+    this.pulsePhase = Math.random() * TAU;
+    this.alive = true;
+  }
+
+  update(dt, regenMultiplier) {
+    if (this.amount < this.maxAmount) {
+      this.amount = Math.min(
+        this.maxAmount,
+        this.amount + this.regenRate * regenMultiplier * dt,
+      );
+    }
+    this.pulsePhase += dt * 2;
+  }
+
+  consume(amount) {
+    const taken = Math.min(this.amount, amount);
+    this.amount -= taken;
+    if (this.amount <= 0.01) {
+      this.alive = false;
+    }
+    return taken;
+  }
+}
+
+class WorldEvent {
+  constructor(type, x, y, radius, duration, intensity) {
+    this.type = type;
+    this.x = x;
+    this.y = y;
+    this.radius = radius;
+    this.duration = duration;
+    this.elapsed = 0;
+    this.intensity = intensity;
+    this.active = true;
+  }
+
+  update(dt) {
+    this.elapsed += dt;
+    if (this.elapsed >= this.duration) {
+      this.active = false;
+    }
+  }
+
+  get progress() {
+    return this.elapsed / this.duration;
+  }
+
+  get currentIntensity() {
+    const t = this.progress;
+    if (t < 0.1) return this.intensity * (t / 0.1);
+    if (t > 0.8) return this.intensity * ((1 - t) / 0.2);
+    return this.intensity;
+  }
+}
+
+export const EVENT_TYPES = {
+  bloom: { name: "Resource Bloom", color: "#00ffaa", icon: "B" },
+  drought: { name: "Drought", color: "#ff8844", icon: "D" },
+  storm: { name: "Energy Storm", color: "#ffee44", icon: "S" },
+  catastrophe: { name: "Catastrophe", color: "#ff3366", icon: "!" },
+  abundance: { name: "Abundance", color: "#00ff88", icon: "A" },
+};
+
+export class World {
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+    this.resources = [];
+    this.events = [];
+    this.resourceGrid = new SpatialGrid(width, height, 80);
+    this.eventTimer = 0;
+    this.eventInterval = randomRange(15, 25);
+    this.totalTime = 0;
+    this.regenMultiplier = 1.0;
+
+    this.memory = {
+      totalBlooms: 0,
+      totalDroughts: 0,
+      totalCatastrophes: 0,
+      recentEvents: [],
+    };
+
+    this._initResources();
+  }
+
+  _initResources() {
+    const foodCount = Math.floor((this.width * this.height) / 8000);
+    for (let i = 0; i < foodCount; i++) {
+      this.resources.push(
+        new Resource(
+          randomRange(20, this.width - 20),
+          randomRange(20, this.height - 20),
+          RESOURCE_FOOD,
+          randomRange(15, 40),
+        ),
+      );
+    }
+
+    const energyCount = Math.floor(foodCount * 0.3);
+    for (let i = 0; i < energyCount; i++) {
+      this.resources.push(
+        new Resource(
+          randomRange(20, this.width - 20),
+          randomRange(20, this.height - 20),
+          RESOURCE_ENERGY,
+          randomRange(25, 60),
+        ),
+      );
+    }
+  }
+
+  update(dt) {
+    this.totalTime += dt;
+
+    for (let i = this.resources.length - 1; i >= 0; i--) {
+      const r = this.resources[i];
+      r.update(dt, this.regenMultiplier);
+      if (!r.alive) {
+        this.resources.splice(i, 1);
+      }
+    }
+
+    const targetFood = Math.floor((this.width * this.height) / 8000);
+    if (this.resources.length < targetFood * 0.6) {
+      const count = Math.min(3, targetFood - this.resources.length);
+      for (let i = 0; i < count; i++) {
+        this.resources.push(
+          new Resource(
+            randomRange(20, this.width - 20),
+            randomRange(20, this.height - 20),
+            Math.random() < 0.75 ? RESOURCE_FOOD : RESOURCE_ENERGY,
+            randomRange(15, 40),
+          ),
+        );
+      }
+    }
+
+    this.resourceGrid.clear();
+    for (const r of this.resources) {
+      this.resourceGrid.insert(r, r.x, r.y);
+    }
+
+    for (let i = this.events.length - 1; i >= 0; i--) {
+      this.events[i].update(dt);
+      if (!this.events[i].active) {
+        this.events.splice(i, 1);
+      }
+    }
+
+    this.eventTimer += dt;
+    if (this.eventTimer >= this.eventInterval) {
+      this.eventTimer = 0;
+      this.eventInterval = randomRange(12, 22);
+      this._triggerRandomEvent();
+    }
+
+    this._updateMemoryEffects();
+  }
+
+  _triggerRandomEvent() {
+    const types = Object.keys(EVENT_TYPES);
+    const weights = [1, 1, 1, 0.3, 1];
+    if (this.memory.totalDroughts > this.memory.totalBlooms) {
+      weights[0] += 1;
+    }
+    if (this.memory.totalCatastrophes > 2) {
+      weights[3] *= 0.3;
+      weights[4] += 1;
+    }
+
+    const totalWeight = weights.reduce((a, b) => a + b, 0);
+    let r = Math.random() * totalWeight;
+    let typeIdx = 0;
+    for (let i = 0; i < weights.length; i++) {
+      r -= weights[i];
+      if (r <= 0) {
+        typeIdx = i;
+        break;
+      }
+    }
+
+    const type = types[typeIdx];
+    const x = randomRange(100, this.width - 100);
+    const y = randomRange(100, this.height - 100);
+    const radius = randomRange(120, 250);
+    const duration = randomRange(8, 18);
+
+    const event = new WorldEvent(type, x, y, radius, duration, 1.0);
+    this.events.push(event);
+    this._applyEventEffects(event);
+
+    this.memory.recentEvents.push({ type, time: this.totalTime });
+    if (this.memory.recentEvents.length > 20) this.memory.recentEvents.shift();
+
+    if (type === "bloom" || type === "abundance") this.memory.totalBlooms++;
+    if (type === "drought") this.memory.totalDroughts++;
+    if (type === "catastrophe") this.memory.totalCatastrophes++;
+
+    return event;
+  }
+
+  _applyEventEffects(event) {
+    switch (event.type) {
+      case "bloom": {
+        for (let i = 0; i < 8; i++) {
+          const angle = Math.random() * TAU;
+          const dist = Math.random() * event.radius;
+          const rx = event.x + Math.cos(angle) * dist;
+          const ry = event.y + Math.sin(angle) * dist;
+          if (
+            rx > 10 &&
+            rx < this.width - 10 &&
+            ry > 10 &&
+            ry < this.height - 10
+          ) {
+            this.resources.push(
+              new Resource(rx, ry, RESOURCE_FOOD, randomRange(20, 50)),
+            );
+          }
+        }
+        break;
+      }
+      case "drought": {
+        for (const r of this.resources) {
+          if (distance(r.x, r.y, event.x, event.y) < event.radius) {
+            r.amount *= 0.5;
+          }
+        }
+        break;
+      }
+      case "storm": {
+        for (let i = 0; i < 5; i++) {
+          const angle = Math.random() * TAU;
+          const dist = Math.random() * event.radius;
+          const rx = event.x + Math.cos(angle) * dist;
+          const ry = event.y + Math.sin(angle) * dist;
+          if (
+            rx > 10 &&
+            rx < this.width - 10 &&
+            ry > 10 &&
+            ry < this.height - 10
+          ) {
+            this.resources.push(
+              new Resource(rx, ry, RESOURCE_ENERGY, randomRange(30, 70)),
+            );
+          }
+        }
+        break;
+      }
+      case "abundance": {
+        this.regenMultiplier = 2.0;
+        setTimeout(() => {
+          this.regenMultiplier = 1.0;
+        }, event.duration * 1000);
+        break;
+      }
+    }
+  }
+
+  _updateMemoryEffects() {
+    if (this.memory.totalCatastrophes > 3) {
+      this.regenMultiplier = Math.max(this.regenMultiplier, 1.2);
+    }
+  }
+
+  getResourcesNear(x, y, radius) {
+    return this.resourceGrid.query(x, y, radius);
+  }
+
+  getEventsAt(x, y) {
+    const affecting = [];
+    for (const e of this.events) {
+      if (distance(x, y, e.x, e.y) < e.radius) {
+        affecting.push(e);
+      }
+    }
+    return affecting;
+  }
+
+  getCatastropheDamage(x, y) {
+    let dmg = 0;
+    for (const e of this.events) {
+      if (e.type === "catastrophe") {
+        const d = distance(x, y, e.x, e.y);
+        if (d < e.radius) {
+          dmg += e.currentIntensity * (1 - d / e.radius) * 0.5;
+        }
+      }
+    }
+    return dmg;
+  }
+
+  render(ctx) {
+    if (
+      !this._bgCache ||
+      this._bgCache.width !== this.width ||
+      this._bgCache.height !== this.height
+    ) {
+      this._bgCache = document.createElement("canvas");
+      this._bgCache.width = this.width;
+      this._bgCache.height = this.height;
+      const bgCtx = this._bgCache.getContext("2d");
+      const spacing = 35;
+      bgCtx.fillStyle = "rgba(80, 160, 220, 0.025)";
+      for (let x = spacing; x < this.width; x += spacing) {
+        for (let y = spacing; y < this.height; y += spacing) {
+          bgCtx.fillRect(x, y, 1.2, 1.2);
+        }
+      }
+      bgCtx.strokeStyle = "rgba(60, 120, 180, 0.015)";
+      bgCtx.lineWidth = 0.5;
+      for (let x = spacing; x < this.width; x += spacing * 4) {
+        bgCtx.beginPath();
+        bgCtx.moveTo(x, 0);
+        bgCtx.lineTo(x, this.height);
+        bgCtx.stroke();
+      }
+      for (let y = spacing; y < this.height; y += spacing * 4) {
+        bgCtx.beginPath();
+        bgCtx.moveTo(0, y);
+        bgCtx.lineTo(this.width, y);
+        bgCtx.stroke();
+      }
+    }
+    ctx.drawImage(this._bgCache, 0, 0);
+
+    for (const e of this.events) {
+      const info = EVENT_TYPES[e.type];
+      const intensity = e.currentIntensity;
+      const rgb = this._hexToRgb(info.color);
+
+      const grad = ctx.createRadialGradient(e.x, e.y, 0, e.x, e.y, e.radius);
+      grad.addColorStop(
+        0,
+        `rgba(${rgb.r},${rgb.g},${rgb.b},${0.08 * intensity})`,
+      );
+      grad.addColorStop(
+        0.7,
+        `rgba(${rgb.r},${rgb.g},${rgb.b},${0.03 * intensity})`,
+      );
+      grad.addColorStop(1, `rgba(${rgb.r},${rgb.g},${rgb.b},0)`);
+      ctx.fillStyle = grad;
+      ctx.beginPath();
+      ctx.arc(e.x, e.y, e.radius, 0, TAU);
+      ctx.fill();
+
+      const ringPulse = 0.5 + 0.5 * Math.sin(this.totalTime * 2);
+      ctx.strokeStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},${0.15 * intensity * ringPulse})`;
+      ctx.lineWidth = 1.5;
+      ctx.setLineDash([8, 8]);
+      ctx.stroke();
+      ctx.setLineDash([]);
+
+      ctx.fillStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},${0.3 * intensity})`;
+      ctx.font = "10px Courier New";
+      ctx.textAlign = "center";
+      ctx.fillText(info.name.toUpperCase(), e.x, e.y - e.radius + 15);
+      ctx.textAlign = "start";
+    }
+
+    if (!this._foodGlow) {
+      this._foodGlow = this._makeGlowSprite(0, 255, 170, 20);
+      this._energyGlow = this._makeGlowSprite(255, 238, 68, 20);
+    }
+
+    for (const r of this.resources) {
+      const pulse = 0.6 + 0.4 * Math.sin(r.pulsePhase);
+      const sizeRatio = r.amount / r.maxAmount;
+      const baseRadius = 3 + sizeRatio * 4;
+      const radius = baseRadius * (0.85 + 0.15 * pulse);
+
+      const sprite =
+        r.type === RESOURCE_FOOD ? this._foodGlow : this._energyGlow;
+      const gs = sprite.width;
+      ctx.globalAlpha = 0.4 + 0.4 * sizeRatio;
+      ctx.drawImage(sprite, r.x - gs / 2, r.y - gs / 2);
+      ctx.globalAlpha = 1;
+
+      if (r.type === RESOURCE_FOOD) {
+        ctx.fillStyle = `rgba(0,255,170,${0.5 + 0.4 * sizeRatio})`;
+      } else {
+        ctx.fillStyle = `rgba(255,238,68,${0.5 + 0.4 * sizeRatio})`;
+      }
+      ctx.beginPath();
+      ctx.arc(r.x, r.y, radius, 0, TAU);
+      ctx.fill();
+    }
+  }
+
+  _makeGlowSprite(r, g, b, size) {
+    const canvas = document.createElement("canvas");
+    const s = size * 3;
+    canvas.width = s;
+    canvas.height = s;
+    const ctx = canvas.getContext("2d");
+    const grad = ctx.createRadialGradient(s / 2, s / 2, 0, s / 2, s / 2, s / 2);
+    grad.addColorStop(0, `rgba(${r},${g},${b},0.3)`);
+    grad.addColorStop(0.5, `rgba(${r},${g},${b},0.08)`);
+    grad.addColorStop(1, `rgba(${r},${g},${b},0)`);
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, s, s);
+    return canvas;
+  }
+
+  _hexToRgb(hex) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return { r, g, b };
+  }
+
+  toJSON() {
+    return {
+      width: this.width,
+      height: this.height,
+      totalTime: this.totalTime,
+      memory: { ...this.memory },
+      resources: this.resources.map((r) => ({
+        x: r.x,
+        y: r.y,
+        type: r.type,
+        amount: r.amount,
+        maxAmount: r.maxAmount,
+      })),
+    };
+  }
+
+  static fromJSON(data) {
+    const w = new World(data.width, data.height);
+    w.resources = [];
+    w.totalTime = data.totalTime || 0;
+    w.memory = data.memory || w.memory;
+    for (const rd of data.resources) {
+      const r = new Resource(rd.x, rd.y, rd.type, rd.maxAmount);
+      r.amount = rd.amount;
+      w.resources.push(r);
+    }
+    return w;
+  }
+}