@jjlmoya/utils-science 1.38.0 → 1.39.0

package/src/tool/conway-life-rule-lab/logic/LifeLabRuntime.ts

@@ -0,0 +1,253 @@
+import { LIFE_PATTERNS } from './LifePatterns';
+import { LifeAchievements } from './LifeAchievements';
+import { LifeCanvasRenderer } from './LifeCanvasRenderer';
+import { fillPatternSelect, getLabels, getOutputs, type RuntimeLabels } from './LifeLabDom';
+import { parseRuleNotation } from './LifeRules';
+import { LifeUniverse, type LifeSnapshot } from './LifeUniverse';
+
+interface CellPoint {
+  x: number;
+  y: number;
+}
+
+const grid = { width: 72, height: 48 };
+
+export function startLifeLab(root: HTMLElement): void {
+  new LifeLabRuntime(root).start();
+}
+
+class LifeLabRuntime {
+  private readonly universe = new LifeUniverse(grid.width, grid.height);
+  private ruleSet = parseRuleNotation('B3/S23');
+  private running = false;
+  private lastTick = 0;
+  private latestPopulation = 0;
+  private drawing = false;
+  private drawAlive = true;
+  private lastDrawnCell = '';
+  private randomSeedDensity = 0.28;
+  private readonly labels: RuntimeLabels;
+
+  private readonly canvas: HTMLCanvasElement;
+  private readonly playButton: HTMLButtonElement;
+  private readonly stepButton: HTMLButtonElement;
+  private readonly clearButton: HTMLButtonElement;
+  private readonly randomizeButton: HTMLButtonElement;
+  private readonly placePatternButton: HTMLButtonElement;
+  private readonly ruleInput: HTMLInputElement;
+  private readonly speedInput: HTMLInputElement;
+  private readonly densityInput: HTMLInputElement;
+  private readonly patternSelect: HTMLSelectElement;
+  private readonly rulePresets: NodeListOf<HTMLButtonElement>;
+  private readonly outputs: Record<string, HTMLElement | null>;
+  private readonly renderer: LifeCanvasRenderer;
+  private readonly achievements: LifeAchievements;
+
+  public constructor(private readonly root: HTMLElement) {
+    this.canvas = this.byId('life-lab-canvas') as HTMLCanvasElement;
+    this.playButton = this.byId('life-lab-play') as HTMLButtonElement;
+    this.stepButton = this.byId('life-lab-step') as HTMLButtonElement;
+    this.clearButton = this.byId('life-lab-clear') as HTMLButtonElement;
+    this.randomizeButton = this.byId('life-lab-randomize') as HTMLButtonElement;
+    this.placePatternButton = this.byId('life-lab-place-pattern') as HTMLButtonElement;
+    this.ruleInput = this.byId('life-lab-rule') as HTMLInputElement;
+    this.speedInput = this.byId('life-lab-speed') as HTMLInputElement;
+    this.densityInput = this.byId('life-lab-seed-density') as HTMLInputElement;
+    this.patternSelect = this.byId('life-lab-pattern') as HTMLSelectElement;
+    this.rulePresets = document.querySelectorAll<HTMLButtonElement>('.life-lab-rule-preset');
+    this.outputs = getOutputs((id) => this.byId(id));
+    this.labels = getLabels(this.root, this.playButton);
+    this.renderer = new LifeCanvasRenderer(this.root, this.canvas, this.universe, grid);
+    this.achievements = new LifeAchievements({
+      pulsar: this.outputs.pulsar,
+      immortal: this.outputs.immortal,
+      bigBang: this.outputs.bigBang,
+    });
+  }
+
+  public start(): void {
+    fillPatternSelect(this.root, this.patternSelect);
+    this.bindEvents();
+    this.drawSnapshot(this.universe.randomize(this.randomSeedDensity));
+    this.rememberSeed();
+  }
+
+  private byId(id: string): HTMLElement {
+    return document.getElementById(id) as HTMLElement;
+  }
+
+  private bindEvents(): void {
+    this.playButton.addEventListener('click', () => this.setRunning(!this.running));
+    this.stepButton.addEventListener('click', () => this.stepOnce());
+    this.randomizeButton.addEventListener('click', () => this.randomize());
+    this.placePatternButton.addEventListener('click', () => this.placePattern());
+    this.clearButton.addEventListener('click', () => this.enterEditCanvas());
+    this.ruleInput.addEventListener('change', () => this.updateRule());
+    this.rulePresets.forEach((preset) => preset.addEventListener('click', () => this.selectRule(preset)));
+    this.canvas.addEventListener('pointerdown', (event) => this.startDrawing(event));
+    this.canvas.addEventListener('pointermove', (event) => this.continueDrawing(event));
+    this.canvas.addEventListener('pointerup', (event) => this.stopDrawing(event));
+    this.canvas.addEventListener('pointercancel', () => this.cancelDrawing());
+    window.addEventListener('resize', () => this.render());
+  }
+
+  private updateRule(): void {
+    this.rulePresets.forEach((preset) => preset.classList.toggle('active', preset.dataset.rule === this.ruleInput.value));
+    this.parseRuleFromInput();
+  }
+
+  private selectRule(preset: HTMLButtonElement): void {
+    this.rulePresets.forEach((button) => button.classList.remove('active'));
+    preset.classList.add('active');
+    this.ruleInput.value = preset.dataset.rule || 'B3/S23';
+    this.parseRuleFromInput();
+  }
+
+  private parseRuleFromInput(): void {
+    try {
+      this.ruleSet = parseRuleNotation(this.ruleInput.value);
+      this.ruleInput.classList.remove('life-lab-invalid');
+      this.ruleInput.removeAttribute('aria-label');
+    } catch {
+      this.ruleInput.classList.add('life-lab-invalid');
+      this.ruleInput.setAttribute('aria-label', this.labels.invalidRule);
+    }
+  }
+
+  private setRunning(next: boolean): void {
+    this.running = next;
+    this.playButton.setAttribute('aria-label', this.running ? this.labels.pause : this.labels.play);
+    this.playButton.classList.toggle('life-lab-running', this.running);
+    this.playButton.classList.toggle('life-lab-paused-icon', this.running);
+    if (this.running) requestAnimationFrame((time) => this.loop(time));
+  }
+
+  private loop(time: number): void {
+    if (!this.running) return;
+    const interval = 1000 / parseInt(this.speedInput.value, 10);
+    if (time - this.lastTick >= interval) this.stepAt(time);
+    requestAnimationFrame((nextTime) => this.loop(nextTime));
+  }
+
+  private stepAt(time: number): void {
+    this.parseRuleFromInput();
+    this.processSnapshot(this.universe.step(this.ruleSet));
+    this.lastTick = time;
+  }
+
+  private stepOnce(): void {
+    this.parseRuleFromInput();
+    this.processSnapshot(this.universe.step(this.ruleSet));
+  }
+
+  private processSnapshot(snapshot: LifeSnapshot): void {
+    this.drawSnapshot(snapshot);
+    this.achievements.evaluate(snapshot, this.universe.getCells(), this.randomSeedDensity);
+  }
+
+  private randomize(): void {
+    this.randomSeedDensity = parseInt(this.densityInput.value, 10) / 100;
+    this.drawSnapshot(this.universe.randomize(this.randomSeedDensity));
+    this.rememberSeed();
+    this.exitEditCanvas();
+  }
+
+  private placePattern(): void {
+    const pattern = LIFE_PATTERNS.find((item) => item.id === this.patternSelect.value) || LIFE_PATTERNS[0];
+    this.drawSnapshot(this.universe.clear());
+    this.drawSnapshot(this.universe.placePattern(pattern, Math.floor(grid.width * 0.36), Math.floor(grid.height * 0.36)));
+    this.randomSeedDensity = 1;
+    this.rememberSeed();
+    this.exitEditCanvas();
+  }
+
+  private enterEditCanvas(): void {
+    this.setRunning(false);
+    this.drawSnapshot(this.universe.clear());
+    this.rememberSeed();
+    this.root.classList.add('life-lab-editing');
+  }
+
+  private exitEditCanvas(): void {
+    this.root.classList.remove('life-lab-editing');
+  }
+
+  private drawSnapshot(snapshot: LifeSnapshot): void {
+    this.updateStats(snapshot);
+    this.render();
+  }
+
+  private updateStats(snapshot: LifeSnapshot): void {
+    const stats = snapshot.stats;
+    this.latestPopulation = stats.population;
+    this.setText('generation', stats.generation.toLocaleString());
+    this.setText('population', stats.population.toLocaleString());
+    this.setText('density', `${(stats.density * 100).toFixed(1)}%`);
+    this.setText('stability', `${(stats.stability * 100).toFixed(0)}%`);
+    this.setText('births', stats.births.toLocaleString());
+    this.setText('deaths', stats.deaths.toLocaleString());
+    this.setText('status', this.statusFor(stats.population, stats.births, stats.deaths, stats.stability));
+  }
+
+  private setText(key: string, value: string): void {
+    const output = this.outputs[key];
+    if (output) output.textContent = value;
+  }
+
+  private statusFor(population: number, births: number, deaths: number, stability: number): string {
+    if (population === 0 || stability > 0.9) return this.labels.frozen;
+    return this.activityStatus(births, deaths);
+  }
+
+  private activityStatus(births: number, deaths: number): string {
+    if (births > deaths * 1.4) return this.labels.growing;
+    if (deaths > births * 1.4) return this.labels.fading;
+    return this.labels.chaotic;
+  }
+
+  private render(): void {
+    this.renderer.render(this.latestPopulation);
+  }
+  private startDrawing(event: PointerEvent): void {
+    if (this.running) return;
+    const cell = this.renderer.canvasToCell(event);
+    if (!cell) return;
+    this.drawAlive = this.universe.getCells()[cell.y * grid.width + cell.x] === 0;
+    this.drawing = true;
+    this.lastDrawnCell = '';
+    this.canvas.setPointerCapture(event.pointerId);
+    this.paintCellAt(cell);
+  }
+
+  private continueDrawing(event: PointerEvent): void {
+    if (!this.drawing || this.running) return;
+    const cell = this.renderer.canvasToCell(event);
+    if (cell) this.paintCellAt(cell);
+  }
+
+  private stopDrawing(event: PointerEvent): void {
+    this.drawing = false;
+    this.lastDrawnCell = '';
+    this.canvas.releasePointerCapture(event.pointerId);
+    this.rememberSeed();
+    this.root.classList.add('life-lab-editing');
+  }
+
+  private cancelDrawing(): void {
+    this.drawing = false;
+    this.lastDrawnCell = '';
+  }
+
+  private paintCellAt(cell: CellPoint): void {
+    const key = `${cell.x}:${cell.y}`;
+    if (key === this.lastDrawnCell) return;
+    this.lastDrawnCell = key;
+    this.drawSnapshot(this.universe.setCell(cell.x, cell.y, this.drawAlive));
+  }
+
+  private rememberSeed(): void {
+    this.achievements.resetHistory(this.universe.getCells());
+  }
+}
+
+

package/src/tool/conway-life-rule-lab/logic/LifePatterns.ts

@@ -0,0 +1,35 @@
+export interface LifePattern {
+  id: string;
+  cells: Array<[number, number]>;
+}
+
+export const LIFE_PATTERNS: LifePattern[] = [
+  {
+    id: 'glider',
+    cells: [[1, 0], [2, 1], [0, 2], [1, 2], [2, 2]],
+  },
+  {
+    id: 'gosper',
+    cells: [
+      [24, 0], [22, 1], [24, 1], [12, 2], [13, 2], [20, 2], [21, 2], [34, 2], [35, 2],
+      [11, 3], [15, 3], [20, 3], [21, 3], [34, 3], [35, 3], [0, 4], [1, 4], [10, 4],
+      [16, 4], [20, 4], [21, 4], [0, 5], [1, 5], [10, 5], [14, 5], [16, 5], [17, 5],
+      [22, 5], [24, 5], [10, 6], [16, 6], [24, 6], [11, 7], [15, 7], [12, 8], [13, 8],
+    ],
+  },
+  {
+    id: 'pulsar',
+    cells: [
+      [2, 0], [3, 0], [4, 0], [8, 0], [9, 0], [10, 0],
+      [0, 2], [5, 2], [7, 2], [12, 2], [0, 3], [5, 3], [7, 3], [12, 3],
+      [0, 4], [5, 4], [7, 4], [12, 4], [2, 5], [3, 5], [4, 5], [8, 5], [9, 5], [10, 5],
+      [2, 7], [3, 7], [4, 7], [8, 7], [9, 7], [10, 7], [0, 8], [5, 8], [7, 8], [12, 8],
+      [0, 9], [5, 9], [7, 9], [12, 9], [0, 10], [5, 10], [7, 10], [12, 10],
+      [2, 12], [3, 12], [4, 12], [8, 12], [9, 12], [10, 12],
+    ],
+  },
+  {
+    id: 'r-pentomino',
+    cells: [[1, 0], [2, 0], [0, 1], [1, 1], [1, 2]],
+  },
+];

package/src/tool/conway-life-rule-lab/logic/LifeRules.ts

@@ -0,0 +1,60 @@
+export type NeighborCount = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+
+export interface LifeRuleSet {
+  birth: Set<NeighborCount>;
+  survival: Set<NeighborCount>;
+  notation: string;
+}
+
+export interface RulePreset {
+  id: string;
+  notation: string;
+}
+
+const countPattern = /^[0-8]*$/;
+
+export const RULE_PRESETS: RulePreset[] = [
+  {
+    id: 'classic',
+    notation: 'B3/S23',
+  },
+  {
+    id: 'highlife',
+    notation: 'B36/S23',
+  },
+  {
+    id: 'seeds',
+    notation: 'B2/S',
+  },
+  {
+    id: 'day-night',
+    notation: 'B3678/S34678',
+  },
+];
+
+export function parseRuleNotation(input: string): LifeRuleSet {
+  const normalized = input.trim().toUpperCase().replace(/\s+/g, '');
+  const match = /^B([0-8]*)\/?S([0-8]*)$/.exec(normalized);
+
+  if (!match || !countPattern.test(match[1]) || !countPattern.test(match[2])) {
+    throw new Error('INVALID_RULE_NOTATION');
+  }
+
+  return {
+    birth: toCountSet(match[1]),
+    survival: toCountSet(match[2]),
+    notation: `B${match[1]}/S${match[2]}`,
+  };
+}
+
+export function formatRuleSet(ruleSet: LifeRuleSet): string {
+  return `B${formatCounts(ruleSet.birth)}/S${formatCounts(ruleSet.survival)}`;
+}
+
+function toCountSet(value: string): Set<NeighborCount> {
+  return new Set([...value].map((count) => Number(count) as NeighborCount));
+}
+
+function formatCounts(counts: Set<NeighborCount>): string {
+  return [...counts].sort((a, b) => a - b).join('');
+}

package/src/tool/conway-life-rule-lab/logic/LifeUniverse.ts

@@ -0,0 +1,165 @@
+import type { LifePattern } from './LifePatterns';
+import type { LifeRuleSet, NeighborCount } from './LifeRules';
+
+export interface LifeGenerationStats {
+  generation: number;
+  population: number;
+  births: number;
+  deaths: number;
+  stability: number;
+  density: number;
+}
+
+export interface LifeSnapshot {
+  cells: Uint8Array;
+  stats: LifeGenerationStats;
+}
+
+export class LifeUniverse {
+  private current: Uint8Array;
+  private next: Uint8Array;
+  private generation = 0;
+  private previousPopulation = 0;
+
+  public constructor(
+    public readonly width: number,
+    public readonly height: number,
+  ) {
+    this.current = new Uint8Array(width * height);
+    this.next = new Uint8Array(width * height);
+  }
+
+  public clear(): LifeSnapshot {
+    this.current.fill(0);
+    this.next.fill(0);
+    this.generation = 0;
+    this.previousPopulation = 0;
+    return this.snapshot(0, 0);
+  }
+
+  public load(cells: Uint8Array): LifeSnapshot {
+    if (cells.length !== this.current.length) {
+      throw new Error('INVALID_LIFE_SNAPSHOT');
+    }
+
+    this.current.set(cells);
+    this.next.fill(0);
+    this.generation = 0;
+    this.previousPopulation = this.current.reduce((sum, alive) => sum + alive, 0);
+    return this.snapshot(0, 0);
+  }
+
+  public randomize(fillRatio: number): LifeSnapshot {
+    const clamped = Math.max(0, Math.min(1, fillRatio));
+    let population = 0;
+
+    for (let index = 0; index < this.current.length; index += 1) {
+      const alive = Math.random() < clamped ? 1 : 0;
+      this.current[index] = alive;
+      population += alive;
+    }
+
+    this.generation = 0;
+    this.previousPopulation = population;
+    return this.snapshot(population, 0);
+  }
+
+  public toggle(x: number, y: number): LifeSnapshot {
+    const index = this.index(x, y);
+    this.current[index] = this.current[index] ? 0 : 1;
+    return this.snapshot(0, 0);
+  }
+
+  public setCell(x: number, y: number, alive: boolean): LifeSnapshot {
+    this.current[this.index(x, y)] = alive ? 1 : 0;
+    return this.snapshot(0, 0);
+  }
+
+  public placePattern(pattern: LifePattern, originX: number, originY: number): LifeSnapshot {
+    for (const [x, y] of pattern.cells) {
+      this.current[this.index(originX + x, originY + y)] = 1;
+    }
+
+    return this.snapshot(0, 0);
+  }
+
+  public step(ruleSet: LifeRuleSet): LifeSnapshot {
+    let births = 0;
+    let deaths = 0;
+    let population = 0;
+    const previousPopulation = this.previousPopulation;
+
+    for (let y = 0; y < this.height; y += 1) {
+      for (let x = 0; x < this.width; x += 1) {
+        const result = this.stepCell(x, y, ruleSet);
+        population += result.population;
+        births += result.births;
+        deaths += result.deaths;
+      }
+    }
+
+    [this.current, this.next] = [this.next, this.current];
+    this.next.fill(0);
+    this.generation += 1;
+    this.previousPopulation = population;
+    return this.snapshot(births, deaths, previousPopulation);
+  }
+
+  public getCells(): Uint8Array {
+    return this.current;
+  }
+
+  private snapshot(births: number, deaths: number, previousPopulation = this.previousPopulation): LifeSnapshot {
+    const population = this.current.reduce((sum, alive) => sum + alive, 0);
+    const changed = births + deaths;
+    const stability = population === 0 ? 1 : Math.max(0, 1 - changed / Math.max(population, previousPopulation, 1));
+
+    return {
+      cells: this.current,
+      stats: {
+        generation: this.generation,
+        population,
+        births,
+        deaths,
+        stability,
+        density: population / this.current.length,
+      },
+    };
+  }
+
+  private countNeighbors(x: number, y: number): NeighborCount {
+    let total = 0;
+
+    for (let dy = -1; dy <= 1; dy += 1) {
+      for (let dx = -1; dx <= 1; dx += 1) {
+        if (dx === 0 && dy === 0) continue;
+        total += this.current[this.index(x + dx, y + dy)];
+      }
+    }
+
+    return total as NeighborCount;
+  }
+
+  private willLive(alive: boolean, neighbors: NeighborCount, ruleSet: LifeRuleSet): boolean {
+    if (alive) return ruleSet.survival.has(neighbors);
+    return ruleSet.birth.has(neighbors);
+  }
+
+  private stepCell(x: number, y: number, ruleSet: LifeRuleSet): { population: number; births: number; deaths: number } {
+    const index = this.index(x, y);
+    const alive = this.current[index] === 1;
+    const nextAlive = this.willLive(alive, this.countNeighbors(x, y), ruleSet);
+    this.next[index] = nextAlive ? 1 : 0;
+    return {
+      population: nextAlive ? 1 : 0,
+      births: !alive && nextAlive ? 1 : 0,
+      deaths: alive && !nextAlive ? 1 : 0,
+    };
+  }
+
+  private index(x: number, y: number): number {
+    const wrappedX = (x + this.width) % this.width;
+    const wrappedY = (y + this.height) % this.height;
+    return wrappedY * this.width + wrappedX;
+  }
+}

package/src/tool/conway-life-rule-lab/logic.ts

@@ -0,0 +1,6 @@
+export { LIFE_PATTERNS } from './logic/LifePatterns';
+export type { LifePattern } from './logic/LifePatterns';
+export { RULE_PRESETS, formatRuleSet, parseRuleNotation } from './logic/LifeRules';
+export type { LifeRuleSet, NeighborCount, RulePreset } from './logic/LifeRules';
+export { LifeUniverse } from './logic/LifeUniverse';
+export type { LifeGenerationStats, LifeSnapshot } from './logic/LifeUniverse';

package/src/tool/conway-life-rule-lab/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { conwayLifeRuleLab } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await conwayLifeRuleLab.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tools.ts

@@ -21,6 +21,7 @@ import { THREE_BODY_PROBLEM_TOOL } from './tool/three-body-problem/index';
 import { ROCHE_LIMIT_SATELLITE_DISRUPTION_TOOL } from './tool/roche-limit-satellite-disruption/index';
 import { DYSON_SPHERE_ENERGY_CAPTURE_TOOL } from './tool/dyson-sphere-energy-capture/index';
 import { GLOBAL_ALBEDO_SNOWBALL_SIMULATOR_TOOL } from './tool/global-albedo-snowball-simulator/index';
+import { CONWAY_LIFE_RULE_LAB_TOOL } from './tool/conway-life-rule-lab/index';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   COLONY_COUNTER_TOOL,
@@ -44,4 +45,5 @@ export const ALL_TOOLS: ToolDefinition[] = [
   ROCHE_LIMIT_SATELLITE_DISRUPTION_TOOL,
   DYSON_SPHERE_ENERGY_CAPTURE_TOOL,
   GLOBAL_ALBEDO_SNOWBALL_SIMULATOR_TOOL,
+  CONWAY_LIFE_RULE_LAB_TOOL,
 ];