more comprehensive analysis

src/app/pages/ColorGame/components/Instructions/Instructions.module.scss

@@ -2,7 +2,6 @@
     padding: 20px;
     border: 2px solid var(--silver);
     border-radius: 18px;
-    // width: min-content;
 
     .header {
         display: grid;
@@ -14,7 +13,7 @@
         margin: 20px 0;
         line-height: 1.3em;
         width: fit-content;
-        font-size: 1.3em;
+        font-size: 1.1em;
 
         @media screen and (max-width: 1000px) {
             font-size: 1em;

src/app/pages/ColorGame/components/Results/Results.jsx

@@ -2,6 +2,32 @@ import { Text } from "app/components";
 import { memo } from "react";
 import cn from "./Results.module.scss";
 
+const PIXEL_RANGE = 255;
+
+const TIPS = [
+	"To get a lighter color, increase the value of all three colors",
+	"To get a darker color, decrease the value of all three colors",
+	"Red and blue make pink",
+	"A bit of red and more of blue make purple",
+	"Red and green make yellow",
+	"A lot of red and bit of green make brown",
+	"Black is the absence of all three colors",
+	"Gray is just a shade of black and white",
+	"To get a pastel color, make sure all three colors values are high",
+	"To get a neon color, make sure your accent color/s is high but low in the others",
+	"RGB color mixing works opposite of traditional print",
+];
+
+const convertPixelValueDiffToReadablePercent = (pixelValue) =>
+	(Math.abs(pixelValue / PIXEL_RANGE) * 100).toFixed(2) + "%";
+
+const getColorOffsetLabel = (pixelValue, color) => {
+	if (pixelValue === 0) return "";
+	return `${convertPixelValueDiffToReadablePercent(pixelValue)} ${
+		pixelValue < 0 ? "less" : "more"
+	} ${color}`;
+};
+
 export const Results = memo(function Results({ report }) {
 	const actualColor = "#" + report.actual;
 	const guessColor = "#" + report.guess;
@@ -40,6 +66,30 @@ export const Results = memo(function Results({ report }) {
 					</div>
 				</div>
 			</div>
+			<div className={cn.analysis}>
+				<div>
+					<span>You needed:</span>
+					<br />
+					{getColorOffsetLabel(report.percentageDifference[0], "red")}
+					<br />
+					{getColorOffsetLabel(
+						report.percentageDifference[1],
+						"green"
+					)}
+					<br />
+					{getColorOffsetLabel(
+						report.percentageDifference[2],
+						"blue"
+					)}
+
+					{report.similarityPercentage === 100 &&
+						"Nothing... somehow you got it 👀"}
+				</div>
+				<div className={cn.tips}>
+					<span>tip:</span>
+					{TIPS[Math.floor(Math.random() * TIPS.length)]}
+				</div>
+			</div>
 		</div>
 	);
 });

src/app/pages/ColorGame/components/Results/Results.module.scss

@@ -8,6 +8,10 @@
     width: 100%;
     padding: 40px;
 
+    @media screen and (max-width: 900px) {
+        padding: 20px;
+    }
+
     .split {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -21,7 +25,7 @@
 
             .description {
                 display: grid;
-                place-content:  center start;
+                place-content: center start;
             }
         }
 
@@ -32,31 +36,64 @@
 
             .description {
                 display: grid;
-                place-content:  center end;
+                place-content: center end;
             }
         }
 
         .color {
             font-size: 3em;
         }
+
         .box {
             height: 120px;
             width: 120px;
             border-radius: 8px;
 
         }
+
         @media screen and (max-width: 900px) {
             grid-template-columns: 1fr;
 
             .box {
                 height: 60px;
                 width: 60px;
             }
-            // .right 
 
             .color {
                 font-size: 2em;
             }
         }
     }
+
+    .analysis {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 30px;
+
+        margin-top: 20px;
+        text-align: left;
+        font-size: 1.2em;
+        line-height: 1.2em;
+
+        @media screen and (max-width: 900px) {
+            grid-template-columns: 1fr;
+        }
+
+        span {
+            color: var(--gray);
+            text-transform: uppercase;
+            font-weight: bold;
+            font-size: 0.8em;
+        }
+
+        .tips {
+            color: #555;
+            text-align: right;
+
+            @media screen and (max-width: 900px) {
+                text-align: left;
+
+            }
+        }
+    }
 }