fix: use a sync pickColors

Author: bolinocroustibat

1d/cca_1d.ts

@@ -1,6 +1,6 @@
 import type { ColorObject } from "../types/ColorObject"
 import { nextCellColorId } from "../utils/nextCellColorId"
-import { pickRandomColors } from "../utils/pickColors"
+import { pickColors } from "../utils/pickColors"
 import { setupCanvas } from "../utils/setupCanvas"
 
 export class CCA1D {
@@ -22,7 +22,7 @@ export class CCA1D {
 		this.canvasEl = canvasEl
 		this.width = width
 		this.height = height
-		this.colors = pickRandomColors(colorsCount)
+		this.colors = pickColors(colorsCount)
 		this.state = []
 		this.ctx = setupCanvas(this.canvasEl, width, height)
 		this.setRandomState()

2d/automaton2d.ts

@@ -1,5 +1,5 @@
 import type { ColorObject } from "../types/ColorObject"
-import { pickRandomColors } from "../utils/pickColors"
+import { pickColors } from "../utils/pickColors"
 import { randomInt } from "../utils/randomInt"
 import { setupCanvas } from "../utils/setupCanvas"
 
@@ -30,7 +30,7 @@ export class Automaton2D {
 		this.rowsCount = this.height / resolution
 		this.colsCount = this.width / resolution
 		this.colorsCount = colorsCount
-		this.colors = pickRandomColors(colorsCount)
+		this.colors = pickColors(colorsCount)
 		this.state = []
 		this.ctx = setupCanvas(this.canvasEl, this.width, this.height)
 	}

2d/conway/conway.ts

@@ -1,5 +1,5 @@
 import type { ColorObject } from "../../types/ColorObject"
-import { pickRandomColors } from "../../utils/pickColors"
+import { pickColors } from "../../utils/pickColors"
 import { Automaton2D } from "../automaton2d"
 
 export class ConwayAutomaton extends Automaton2D {
@@ -8,7 +8,7 @@ export class ConwayAutomaton extends Automaton2D {
 
 	constructor(...args: ConstructorParameters<typeof Automaton2D>) {
 		super(...args)
-		this.colors = pickRandomColors(this.colorsCount)
+		this.colors = pickColors(this.colorsCount)
 		this.colorOff = this.colors[0]
 		this.colorOn = this.colors[1]
 

2d/langton/langton.ts

@@ -1,4 +1,4 @@
-import { pickRandomColors } from "../../utils/pickColors"
+import { pickColors } from "../../utils/pickColors"
 import { Automaton2D } from "../automaton2d"
 
 export class LangtonAutomaton extends Automaton2D {
@@ -10,7 +10,7 @@ export class LangtonAutomaton extends Automaton2D {
 	constructor(...args: ConstructorParameters<typeof Automaton2D>) {
 		super(...args)
 		this.colorsCount = 2
-		this.colors = pickRandomColors(this.colorsCount)
+		this.colors = pickColors(this.colorsCount)
 
 		this.setUniformStateAndRender()
 

3d/cca_3d.ts

@@ -2,7 +2,7 @@ import * as THREE from "three"
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
 import type { Cell } from "../types/ Cell"
 import { nextCellColorId } from "../utils/nextCellColorId"
-import { pickRandomColors } from "../utils/pickColors"
+import { pickColors } from "../utils/pickColors"
 
 interface Cell3D extends Cell {
 	mesh?: THREE.Mesh
@@ -53,7 +53,7 @@ export class CCA3D {
 		this.cellSize = Math.min(width, height) / resolution / 4
 		this.cellFilling = 1.0
 		this.threshold = threshold // 4 is good
-		this.colors = pickRandomColors(colorsCount) // 10 is good
+		this.colors = pickColors(colorsCount) // 10 is good
 		this.state = []
 		this.bufferState = []
 		this.initialRotationSpeed = 0.004

main.ts

@@ -21,10 +21,15 @@ import { LangtonAutomaton } from "./2d/langton/langton"
 import { QuadLifeAutomaton } from "./2d/quadlife/quadlife"
 import { CCA3D } from "./3d/cca_3d"
 import type { AutomatonBase } from "./types/Automaton"
-import type { Movie } from "./types/MoviePalette"
 import type { Settings } from "./types/Settings"
 import { slugify } from "./utils/slugify"
 
+interface StoredPalette {
+	colors: [number, number, number][]
+}
+
+const moviePalettes = new Map<string, StoredPalette>()
+
 let pane: Pane
 let settings: Settings
 let automaton: AutomatonBase
@@ -353,13 +358,24 @@ window.onload = () => {
 	fetch(`${MOVIES_PALETTES_API}/movies`)
 		.then((response) => response.json())
 		.then((data) => {
-			const options = [
-				{ text: "Random", value: null },
-				...data.movies.map((movie) => ({
-					text: `${movie.title} (${movie.year || "N/A"})`,
-					value: slugify(movie.title),
-				})),
-			]
+			const options = [{ text: "Random", value: null }]
+
+			// Filter movies with palettes and store their colors
+			data.movies.forEach((movie) => {
+				if (movie.palettes && movie.palettes.length > 0) {
+					const slug = slugify(movie.title)
+					// Store the palette colors
+					moviePalettes.set(slug, {
+						colors: movie.palettes[0].colors,
+					})
+					// Add to dropdown options
+					options.push({
+						text: `${movie.title} (${movie.year || "N/A"})`,
+						value: slug,
+					})
+				}
+			})
+
 			paletteSelector.options = options
 		})
 		.catch((error) => {
@@ -383,17 +399,26 @@ const getSettings = (pane: Pane): Settings => {
 	return settings as Settings
 }
 
-const createAutomaton = (
+const createAutomaton = async (
 	canvasEl: HTMLCanvasElement,
 	width: number,
 	height: number,
 	settings: Settings,
-): AutomatonBase => {
+): Promise<AutomatonBase> => {
 	const resolution: number = settings.resolution || 5
+	const paletteColors = settings.palette
+		? moviePalettes.get(settings.palette)?.colors
+		: undefined
 
 	switch (settings.algo) {
 		case "cca-1D":
-			return new CCA1D(canvasEl, width, height, settings.cca1dColorsCount || 4)
+			return await CCA1D.create(
+				canvasEl,
+				width,
+				height,
+				settings.cca1dColorsCount || 4,
+				paletteColors,
+			)
 		case "cca-2D":
 			return new CCA2D(
 				settings.cca2dThreshold,

utils/pickColors.ts

@@ -1,6 +1,6 @@
 import chroma from "chroma-js"
 import type { ColorObject } from "../types/ColorObject"
-import type { MoviePalette } from "../types/MoviePalette"
+import type { RGB } from "../types/MoviePalette"
 
 const MOVIES_PALETTES_API = import.meta.env.VITE_MOVIES_PALETTES_API
 
@@ -37,49 +37,25 @@ export const pickRandomColors = (colorsCount: number): ColorObject[] => {
 	}))
 }
 
-export const pickColors = async (
+export const pickColors = (
 	colorsCount: number,
-	palette?: string,
-): Promise<ColorObject[]> => {
-	if (!palette) {
-		return pickRandomColors(colorsCount)
-	}
-
-	try {
-		// Fetch movie palette
-		const response = await fetch(`${MOVIES_PALETTES_API}/palettes/${palette}`)
-		if (!response.ok) {
-			throw new Error(`HTTP error! status: ${response.status}`)
-		}
-		const data = await response.json()
-
-		if (!data.palettes?.length) {
-			console.warn(`No palettes found for movie ${palette}`)
-			return pickRandomColors(colorsCount)
-		}
-
-		const firstPalette = data.palettes[0]
-		const paletteColors = firstPalette.colors
-		console.log(paletteColors.length)
-		console.log(colorsCount)
-
-		// Check if we have enough colors
-		if (paletteColors.length < colorsCount) {
+	paletteColors?: RGB[],
+): ColorObject[] => {
+	// If no palette colors provided or not enough colors, use random colors
+	if (!paletteColors || paletteColors.length < colorsCount) {
+		if (paletteColors) {
 			console.warn(
-				`Not enough colors in palette for ${palette} (needed: ${colorsCount}, got: ${paletteColors.length}). Using random colors instead.`,
+				`Not enough colors in palette (needed: ${colorsCount}, got: ${paletteColors.length}). Using random colors instead.`,
 			)
-			return pickRandomColors(colorsCount)
 		}
-
-		// Use palette colors
-		return Array.from({ length: colorsCount }, (_, i) => ({
-			id: i,
-			colorRgb: paletteColors[i],
-		}))
-	} catch (error) {
-		console.error("Failed to fetch movie palette:", error)
 		return pickRandomColors(colorsCount)
 	}
+
+	// Use palette colors
+	return Array.from({ length: colorsCount }, (_, i) => ({
+		id: i,
+		colorRgb: paletteColors[i],
+	}))
 }
 
 /*