hide colors if soving

ayan4m1 · Jan 24, 2024 · f338db6 · f338db6
1 parent f71e2f6
commit f338db6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/src/components/coloree/colorPicker.js b/src/components/coloree/colorPicker.js
@@ -4,7 +4,7 @@ import { Fragment, useRef, useEffect } from 'react';
 const diameter = 400;
 const radius = diameter / 2;
 
-export default function ColorPicker({ colors, displayColor }) {
+export default function ColorPicker({ colors, displayColor, solving }) {
   const canvasRef = useRef();
 
   useEffect(() => {
@@ -23,20 +23,23 @@ export default function ColorPicker({ colors, displayColor }) {
 
       for (const { color, pct } of colors) {
         const angle = pct * Math.PI;
-        const path = new Path2D();
 
-        path.moveTo(width - 5, height / 2);
-        path.arc(
-          width - 5,
-          height / 2,
-          radius,
-          currentAngle,
-          currentAngle + angle
-        );
-        path.closePath();
+        if (!solving) {
+          const path = new Path2D();
 
-        ctx.fillStyle = color;
-        ctx.fill(path);
+          path.moveTo(width - 5, height / 2);
+          path.arc(
+            width - 5,
+            height / 2,
+            radius,
+            currentAngle,
+            currentAngle + angle
+          );
+          path.closePath();
+
+          ctx.fillStyle = color;
+          ctx.fill(path);
+        }
 
         currentAngle += angle;
 
@@ -85,5 +88,6 @@ export default function ColorPicker({ colors, displayColor }) {
 
 ColorPicker.propTypes = {
   colors: PropTypes.arrayOf(PropTypes.object).isRequired,
-  displayColor: PropTypes.string.isRequired
+  displayColor: PropTypes.string.isRequired,
+  solving: PropTypes.bool.isRequired
 };
diff --git a/src/components/coloree/game.js b/src/components/coloree/game.js
@@ -83,7 +83,11 @@ export default function ColoreeGame() {
       {solved && <Confetti width={width} height={height} />}
       <Row className="mb-4">
         <Col xs={6} className="d-flex justify-content-center">
-          <ColorPicker colors={colors} displayColor={finalColor} />
+          <ColorPicker
+            colors={colors}
+            displayColor={finalColor}
+            solving={solving}
+          />
         </Col>
         <Col xs={6}>
           {getRemainingPct(colors) > 0 ? (