restore color selection

src/components/CanvasBoard.vue

@@ -121,7 +121,7 @@
       drawCanvas(board, width, height) {
         const d = this.cellProperties.size;
         // bool to RGBA colors
-        const img = boardToPic(board, width, height);
+        const img = boardToPic(board, width, height, this.cellProperties);
         // rescale and draw
         this.ctx.save();
         this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

src/modules/picture.js

@@ -1,3 +1,13 @@
+// https://stackoverflow.com/questions/21646738/convert-hex-to-rgba
+// [
+function hexToRGB(hex) {
+  return [
+    parseInt(hex.slice(1, 3), 16),
+    parseInt(hex.slice(3, 5), 16),
+    parseInt(hex.slice(5, 7), 16),
+  ];
+}
+
 // https://stackoverflow.com/questions/4492385/convert-simple-array-into-two-dimensional-array-matrix
 // convert a 1D array into a 2D matrix
 export function toMatrix(array, width) {
@@ -39,13 +49,17 @@ export function picToBoard(pixels, width, height) {
 }
 
 // convert board to ImageData
-export function boardToPic(board, width, height) {
+// TODO : different cell to color functions
+// (binary, intermediate states, camaieux, etc)
+export function boardToPic(board, width, height, cellProperties) {
+  const live = cellProperties.liveColor;
+  const dead = cellProperties.deadColor;
   return board.flat().reduce((acc, cell, index) => {
-    const color = cell === 1 ? 0 : 255;
+    const color = cell === 1 ? hexToRGB(live) : hexToRGB(dead);
     const i = index * 4;
-    acc.data[i] = color;
-    acc.data[i + 1] = color;
-    acc.data[i + 2] = color;
+    acc.data[i] = color[0];
+    acc.data[i + 1] = color[1];
+    acc.data[i + 2] = color[2];
     acc.data[i + 3] = 255;
     return acc;
   }, new ImageData(width, height));