refactor: factorize main.ts

Author: bolinocroustibat

1d/cca_1d.ts

@@ -10,14 +10,15 @@ export class CCA1D {
 	private colors: ColorObject[]
 	private state: ColorObject[]
 	private ctx: CanvasRenderingContext2D
-	renderInterval: number
+	renderInterval: NodeJS.Timer
 
 	constructor(
 		canvasEl: HTMLCanvasElement,
 		width: number,
 		height: number,
 		colorsCount: number,
 	) {
+		this.clear()
 		this.canvasEl = canvasEl
 		this.width = width
 		this.height = height
@@ -37,6 +38,16 @@ export class CCA1D {
 		}
 	}
 
+	clear = (): void => {
+		if (this.renderInterval) {
+			clearInterval(this.renderInterval)
+			this.renderInterval = undefined
+		}
+		if (this.ctx) {
+			this.ctx.clearRect(0, 0, this.width, this.height)
+		}
+	}
+
 	start = (intervalMs: number): void => {
 		let line = 0
 		this.renderInterval = setInterval(() => {

2d/automaton2d.ts

@@ -14,7 +14,7 @@ export class Automaton2D {
 	protected colors: ColorObject[]
 	protected state: ColorObject[][]
 	protected ctx: CanvasRenderingContext2D
-	public renderInterval: number
+	renderInterval: NodeJS.Timer
 
 	constructor(
 		canvasEl: HTMLCanvasElement,
@@ -36,6 +36,13 @@ export class Automaton2D {
 	}
 
 	clear(): void {
+		if (this.renderInterval) {
+			clearInterval(this.renderInterval)
+			this.renderInterval = undefined
+		}
+		if (this.ctx) {
+			this.ctx.clearRect(0, 0, this.width, this.height)
+		}
 		this.setUniformStateAndRender()
 	}
 

2d/cca_2d/cca_2d.ts

@@ -5,7 +5,10 @@ import { Automaton2D } from "../automaton2d"
 export class CCA2D extends Automaton2D {
 	private threshold: number
 
-	constructor(threshold: number, ...args: ConstructorParameters<typeof Automaton2D>) {
+	constructor(
+		threshold: number,
+		...args: ConstructorParameters<typeof Automaton2D>
+	) {
 		super(...args)
 		this.threshold = threshold
 

2d/langton/langton.ts

@@ -8,7 +8,6 @@ export class LangtonAutomaton extends Automaton2D {
 	private orientationY: number
 
 	constructor(...args: ConstructorParameters<typeof Automaton2D>) {
-
 		super(...args)
 		this.colorsCount = 2
 		this.colors = pickColors(this.colorsCount)

main.ts

@@ -288,66 +288,77 @@ window.onload = () => {
 	})
 }
 
-const reset = (): void => {
-	if (automaton) {
-		clearInterval(automaton.renderInterval)
+const cleanupAutomaton = (automaton: AutomatonBase): void => {
+	if (!automaton) return
+	if ("clear" in automaton) {
+		automaton.clear()
 	}
-	const paneState = pane.exportState()
-	// Convert Tweakpane state to a clean "settings" object
-	settings = {}
-	for (const s of paneState.children) {
+}
+
+const getSettings = (pane: Pane): Settings => {
+	const settings = {}
+	for (const s of pane.exportState().children) {
 		if (s.binding) settings[s.binding.key] = s.binding.value
 	}
+	return settings as Settings
+}
 
-	const canvasEl: HTMLCanvasElement | null = document.getElementById(
-		"canvas",
-	) as HTMLCanvasElement
-	const width: number = window.innerWidth
-	const height: number = window.innerHeight
+const createAutomaton = (
+	settings: Settings,
+	canvasEl: HTMLCanvasElement,
+	width: number,
+	height: number,
+): AutomatonBase => {
 	const resolution: number = settings.resolution || 5
 
-	// Create the context
 	switch (settings.algo) {
 		case "cca-1D":
-			automaton = new CCA1D(
-				canvasEl,
-				width,
-				height,
-				settings.cca1dColorsCount || 4,
-			)
-			break
+			return new CCA1D(canvasEl, width, height, settings.cca1dColorsCount || 4)
 		case "cca-2D":
-			automaton = new CCA2D(
+			return new CCA2D(
 				settings.cca2dThreshold,
 				canvasEl,
 				width,
 				height,
 				resolution,
 				settings.cca2dColorsCount,
 			)
-			break
 		case "conway":
-			automaton = new ConwayAutomaton(canvasEl, width, height, resolution)
-			break
+			return new ConwayAutomaton(canvasEl, width, height, resolution)
 		case "immigration":
-			automaton = new ImmigrationAutomaton(canvasEl, width, height, resolution)
-			break
+			return new ImmigrationAutomaton(canvasEl, width, height, resolution)
 		case "quadlife":
-			automaton = new QuadLifeAutomaton(canvasEl, width, height, resolution)
-			break
+			return new QuadLifeAutomaton(canvasEl, width, height, resolution)
 		case "langton":
-			automaton = new LangtonAutomaton(canvasEl, width, height, resolution)
-			break
+			return new LangtonAutomaton(canvasEl, width, height, resolution)
 		case "entropy":
-			automaton = new EntropyAutomaton(
+			return new EntropyAutomaton(
 				canvasEl,
 				width,
 				height,
 				resolution,
 				settings.entropyColorsCount,
 			)
-			break
+		default:
+			throw new Error(`Unknown algorithm: ${settings.algo}`)
 	}
 }
 
+const reset = (): void => {
+	// Cleanup existing automaton
+	cleanupAutomaton(automaton)
+	automaton = undefined
+
+	// Get new settings
+	settings = getSettings(pane)
+
+	// Get canvas and dimensions
+	const canvasEl = document.getElementById("canvas") as HTMLCanvasElement
+	const width = window.innerWidth
+	const height = window.innerHeight
+
+	// Create new automaton
+	automaton = createAutomaton(settings, canvasEl, width, height)
+}
+
 window.onresize = (): void => reset()

types/Automaton.ts

@@ -1,6 +1,6 @@
 export interface AutomatonBase {
-	renderInterval: number
+	renderInterval: NodeJS.Timer
 	start: (fps: number, maxIterations?: number) => void
-	clear: () => void
+	clear?: () => void
 	placePatternRandomly?: (pattern: number[][]) => void
 }