show final color for each guess in solve UI

ayan4m1 · Jan 29, 2024 · 8f00591 · 8f00591
1 parent 692aa6e
commit 8f00591
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/src/components/coloree/colorSolver.js b/src/components/coloree/colorSolver.js
@@ -54,17 +54,31 @@ export default function ColorSolver({
                 />
               </Col>
             ))}
-            <Col xs={2} className="my-2 d-flex align-items-center">
-              {getColorSimilarity(
-                combineColors(
-                  combineColorChoices(
-                    colors,
-                    guess.map(({ color }) => color)
+            <Col xs={4} className="my-2 d-flex justify-content-center">
+              <div
+                className="d-flex color-solver-choice align-items-center justify-content-center"
+                style={{
+                  maxWidth: 96,
+                  width: 96,
+                  backgroundColor: combineColors(
+                    combineColorChoices(
+                      colors,
+                      guess.map(({ color }) => color)
+                    )
                   )
-                ),
-                combineColors(colors)
-              ).toFixed(2)}
-              %
+                }}
+              >
+                {getColorSimilarity(
+                  combineColors(
+                    combineColorChoices(
+                      colors,
+                      guess.map(({ color }) => color)
+                    )
+                  ),
+                  combineColors(colors)
+                ).toFixed(1)}
+                %
+              </div>
             </Col>
           </Row>
         ))}

diff --git a/src/components/coloree/colorSolver.scss b/src/components/coloree/colorSolver.scss
@@ -11,7 +11,7 @@ $choice-lg: $choice-xs * 1.75;
     border-radius: 4px;
 
     &--unused {
-      box-shadow: 0px 0px 4px 4px rgb(56, 54, 58);
+      box-shadow: 0px 0px 4px 4px rgb(74, 32, 32);
     }
 
     &--wrongPlace {

diff --git a/src/components/coloree/game.js b/src/components/coloree/game.js
@@ -19,10 +19,10 @@ export default function ColoreeGame() {
   const [colors, setColors] = useState([]);
   const [currentGuess, setCurrentGuess] = useState([]);
   const [guessHistory, setGuessHistory] = useState([]);
+  const [colorPalette, setColorPalette] = useState([]);
   const [solved, setSolved] = useState(false);
   const [solving, setSolving] = useState(false);
 
-  const [colorPalette, setColorPalette] = useState([]);
   const finalColor = useMemo(
     () =>
       !solving || currentGuess.length !== colors.length