fix edge case with lose/win messages both showing, show pie colors on…

… solve or fail, new game button
ayan4m1 · Jan 30, 2024 · 5dce746 · 5dce746
1 parent 82fe36a
commit 5dce746
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 14 deletions.
diff --git a/src/components/coloree/colorSolver.js b/src/components/coloree/colorSolver.js
@@ -20,8 +20,11 @@ export default function ColorSolver({
   colorPalette,
   currentGuess,
   guessHistory,
+  solved,
+  failed,
   onGuessAdd,
-  onGuessRemove
+  onGuessRemove,
+  onGameReset
 }) {
   const remainingGuesses = useMemo(
     () => totalGuesses - guessHistory.length,
@@ -42,11 +45,17 @@ export default function ColorSolver({
           <Col xs={4} className="d-flex align-items-center">
             <ProgressBar
               className="w-100"
-              variant={guessPercentage > 0 ? 'success' : 'danger'}
+              variant={solved ? 'success' : failed ? 'danger' : 'info'}
               min={0}
               max={100}
               now={guessPercentage > 0 ? guessPercentage : 100}
-              label={guessPercentage > 0 ? `${guessPercentage}%` : 'You Lost'}
+              label={
+                solved
+                  ? 'You Win!'
+                  : failed
+                    ? 'You Lost!'
+                    : `${guessPercentage}%`
+              }
             />
           </Col>
         </Row>
@@ -86,6 +95,15 @@ export default function ColorSolver({
             )}
           </Row>
         )}
+        {solved && (
+          <Row>
+            <Col xs={12} className="d-flex justify-content-end">
+              <Button variant="success">
+                <FontAwesomeIcon icon={faUndo} onClick={onGameReset} /> New Game
+              </Button>
+            </Col>
+          </Row>
+        )}
         <hr />
         <Row>
           <Col xs={12}>
@@ -112,6 +130,9 @@ ColorSolver.propTypes = {
   colorPalette: PropTypes.arrayOf(PropTypes.object).isRequired,
   currentGuess: PropTypes.arrayOf(PropTypes.string).isRequired,
   guessHistory: PropTypes.arrayOf(PropTypes.object).isRequired,
+  solved: PropTypes.bool.isRequired,
+  failed: PropTypes.bool.isRequired,
   onGuessAdd: PropTypes.func.isRequired,
-  onGuessRemove: PropTypes.func.isRequired
+  onGuessRemove: PropTypes.func.isRequired,
+  onGameReset: PropTypes.func.isRequired
 };
diff --git a/src/components/coloree/game.js b/src/components/coloree/game.js
@@ -29,10 +29,20 @@ export default function ColoreeGame() {
 
   const finalColor = useMemo(
     () =>
-      failed || !solving || currentGuess.length !== colors.length
+      solved || failed || !solving || currentGuess.length !== colors.length
         ? combineColors(colors)
         : combineColors(combineColorChoices(colors, currentGuess)),
-    [failed, solving, currentGuess, colors]
+    [solved, failed, solving, currentGuess, colors]
+  );
+  const pieColors = useMemo(
+    () =>
+      solved || failed || !solving
+        ? colors
+        : colors.map(({ pct }, index) => ({
+            color: currentGuess[index] ?? '#666',
+            pct
+          })),
+    [colors, solved, failed, solving]
   );
 
   const handleColorAdd = useCallback(
@@ -132,6 +142,13 @@ export default function ColoreeGame() {
       }),
     [colors, handleGuessComplete]
   );
+  const handleGameReset = useCallback(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    window.location.replace('/coloree');
+  }, []);
   const handleBuilderReset = useCallback(() => setColors([]), []);
   const handleSoloPlayClick = useCallback(() => {
     if (typeof window === 'undefined') {
@@ -175,14 +192,7 @@ export default function ColoreeGame() {
         <Col xs={12} md={6} className="d-flex justify-content-center mb-2">
           <ColorPicker
             diameter={Math.min(400, width / 2 - 24)}
-            pieColors={
-              solving && !failed
-                ? colors.map(({ pct }, index) => ({
-                    color: currentGuess[index] ?? '#666',
-                    pct
-                  }))
-                : colors
-            }
+            pieColors={pieColors}
             finalColor={finalColor}
           />
         </Col>
@@ -205,8 +215,11 @@ export default function ColoreeGame() {
               colorPalette={colorPalette}
               currentGuess={currentGuess}
               guessHistory={guessHistory}
+              solved={solved}
+              failed={failed}
               onGuessAdd={handleGuessAdd}
               onGuessRemove={handleGuessRemove}
+              onGameReset={handleGameReset}
             />
           )}
         </Col>