fix solving mode color display

ayan4m1 · Jan 24, 2024 · 983791d · 983791d
1 parent 90c2f4f
commit 983791d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 17 deletions.
diff --git a/src/components/coloree/colorPicker.js b/src/components/coloree/colorPicker.js
@@ -4,7 +4,12 @@ import { Fragment, useRef, useEffect } from 'react';
 const diameter = 400;
 const radius = diameter / 2;
 
-export default function ColorPicker({ colors, displayColor, solving }) {
+export default function ColorPicker({
+  colors,
+  colorChoices,
+  displayColor,
+  solving
+}) {
   const canvasRef = useRef();
 
   useEffect(() => {
@@ -21,25 +26,30 @@ export default function ColorPicker({ colors, displayColor, solving }) {
 
       let currentAngle = Math.PI / 2;
 
-      for (const { color, pct } of colors) {
+      const renderColors = solving
+        ? colors.map(({ pct }, index) => ({
+            color: colorChoices[index] ?? '#666',
+            pct
+          }))
+        : colors;
+
+      for (const { color, pct } of renderColors) {
         const angle = pct * Math.PI;
 
-        if (!solving) {
-          const path = new Path2D();
+        const path = new Path2D();
 
-          path.moveTo(width - 5, height / 2);
-          path.arc(
-            width - 5,
-            height / 2,
-            radius,
-            currentAngle,
-            currentAngle + angle
-          );
-          path.closePath();
+        path.moveTo(width - 5, height / 2);
+        path.arc(
+          width - 5,
+          height / 2,
+          radius,
+          currentAngle,
+          currentAngle + angle
+        );
+        path.closePath();
 
-          ctx.fillStyle = color;
-          ctx.fill(path);
-        }
+        ctx.fillStyle = color;
+        ctx.fill(path);
 
         currentAngle += angle;
 
@@ -58,7 +68,7 @@ export default function ColorPicker({ colors, displayColor, solving }) {
         ctx.resetTransform();
       }
     }
-  }, [colors]);
+  }, [colors, colorChoices, solving]);
 
   return (
     <Fragment>
@@ -88,6 +98,7 @@ export default function ColorPicker({ colors, displayColor, solving }) {
 
 ColorPicker.propTypes = {
   colors: PropTypes.arrayOf(PropTypes.object).isRequired,
+  colorChoices: PropTypes.arrayOf(PropTypes.string),
   displayColor: PropTypes.string.isRequired,
   solving: PropTypes.bool.isRequired
 };
diff --git a/src/components/coloree/game.js b/src/components/coloree/game.js
@@ -85,6 +85,7 @@ export default function ColoreeGame() {
         <Col xs={6} className="d-flex justify-content-center">
           <ColorPicker
             colors={colors}
+            colorChoices={colorChoices}
             displayColor={finalColor}
             solving={solving}
           />