From 34bd36e7455357649cd5c904f86630345ffe501e Mon Sep 17 00:00:00 2001 From: Ryan Yang Date: Sat, 11 May 2024 12:44:46 -0700 Subject: [PATCH] some UX improvements to color game --- src/app/pages/ColorGame/ColorGame.jsx | 4 +- src/app/pages/ColorGame/ColorGame.module.scss | 3 +- .../HexColorInput/HexColorInput.jsx | 14 +++- .../HexColorInput/HexColorInput.module.scss | 39 +++++++++--- .../components/Instructions/Instructions.jsx | 33 ++++++++++ .../Instructions/Instructions.module.scss | 32 ++++++++++ .../components/Instructions/breakdown.png | Bin 0 -> 4547 bytes .../Instructions/transformation.png | Bin 0 -> 9708 bytes .../components/Leaderboard/Leaderboard.jsx | 22 +++---- .../ColorGame/components/Results/Results.jsx | 33 +++++++++- .../components/Results/Results.module.scss | 60 +++++++++++++++++- 11 files changed, 210 insertions(+), 30 deletions(-) create mode 100644 src/app/pages/ColorGame/components/Instructions/Instructions.jsx create mode 100644 src/app/pages/ColorGame/components/Instructions/Instructions.module.scss create mode 100644 src/app/pages/ColorGame/components/Instructions/breakdown.png create mode 100644 src/app/pages/ColorGame/components/Instructions/transformation.png diff --git a/src/app/pages/ColorGame/ColorGame.jsx b/src/app/pages/ColorGame/ColorGame.jsx index c9d3db4a..4f58bb92 100644 --- a/src/app/pages/ColorGame/ColorGame.jsx +++ b/src/app/pages/ColorGame/ColorGame.jsx @@ -9,6 +9,7 @@ import { } from "./components/HexColorInput/HexColorInput"; import { Results } from "./components/Results/Results"; import Auto from "react-animate-height"; +import { Instructions } from "./components/Instructions/Instructions"; const generateRandomHexString = () => { const randomHex = []; @@ -24,6 +25,7 @@ export const ColorGame = memo(function ColorGame() { const [color, setColor] = useState(generateRandomHexString); const [report, setReport] = useState(); const [height, setHeight] = useState("auto"); + const contentRef = useRef(null); const resetColor = useCallback( () => setColor(generateRandomHexString()), @@ -41,7 +43,6 @@ export const ColorGame = memo(function ColorGame() { return () => resizeObserver.disconnect(); }, []); - const contentRef = useRef(null); return (
@@ -72,6 +73,7 @@ export const ColorGame = memo(function ColorGame() { {report && } +
); }); diff --git a/src/app/pages/ColorGame/ColorGame.module.scss b/src/app/pages/ColorGame/ColorGame.module.scss index 2c0be4b8..e2aaa710 100644 --- a/src/app/pages/ColorGame/ColorGame.module.scss +++ b/src/app/pages/ColorGame/ColorGame.module.scss @@ -12,7 +12,7 @@ gap: 20px; margin: 0 auto; - padding: 20px; + padding: 20px 20px 80px; box-sizing: border-box; @@ -31,6 +31,7 @@ width: 200px; border-radius: 8px; margin-bottom: 0px; + transition: width 250ms; } @media screen and (max-width: 900px) { diff --git a/src/app/pages/ColorGame/components/HexColorInput/HexColorInput.jsx b/src/app/pages/ColorGame/components/HexColorInput/HexColorInput.jsx index b5d7705f..2a89dbd7 100644 --- a/src/app/pages/ColorGame/components/HexColorInput/HexColorInput.jsx +++ b/src/app/pages/ColorGame/components/HexColorInput/HexColorInput.jsx @@ -1,4 +1,4 @@ -import { createRef, memo, useMemo, useState } from "react"; +import { createRef, memo, useEffect, useMemo, useState } from "react"; import cn from "./HexColorInput.module.scss"; import clsx from "clsx"; import { generateReport } from "./generateReport"; @@ -36,10 +36,15 @@ export const HexColorInput = memo(function HexColorInput({ resetColor, }) { const [guess, setGuess] = useState(EMPTY_GUESS); + const [showErrorMessage, setErrorMessage] = useState(false); const [input] = useState(() => Array.from({ length: 6 }, createRef)); const guessIsValid = useMemo(() => guess.join("").length === 6, [guess]); + useEffect(() => { + if (showErrorMessage) setTimeout(() => setErrorMessage(false), 2500); + }, [showErrorMessage]); + const ignoreEvent = (event) => { event.preventDefault(); }; @@ -61,7 +66,7 @@ export const HexColorInput = memo(function HexColorInput({ const handleInput = (index) => (event) => { const userKeyInput = event.nativeEvent.data.toUpperCase(); - if (!DIGITS.includes(userKeyInput)) return; + if (!DIGITS.includes(userKeyInput)) return setErrorMessage(true); setGuess((prev) => { const next = [...prev]; @@ -96,7 +101,7 @@ export const HexColorInput = memo(function HexColorInput({ return; case "ArrowRight": - if (index > 5) return; + if (index > 4) return; focusEndOfInput(input[index + 1].current); return; @@ -144,6 +149,9 @@ export const HexColorInput = memo(function HexColorInput({ refresh +
+ Only 0-9 and A-F are valid hex values. +
); }); diff --git a/src/app/pages/ColorGame/components/HexColorInput/HexColorInput.module.scss b/src/app/pages/ColorGame/components/HexColorInput/HexColorInput.module.scss index bb71bf4f..c34d0c61 100644 --- a/src/app/pages/ColorGame/components/HexColorInput/HexColorInput.module.scss +++ b/src/app/pages/ColorGame/components/HexColorInput/HexColorInput.module.scss @@ -4,6 +4,7 @@ grid-template-columns: auto auto; gap: 20px; min-width: 600px; + transition: width 250ms; @media screen and (max-width: 1000px) { grid-template-columns: auto; @@ -16,7 +17,7 @@ } } - + .actions { display: grid; grid-template-columns: auto auto; @@ -27,7 +28,7 @@ display: grid; grid-template-columns: repeat(7, 32px); gap: 8px; - + input { border: none; border-bottom: 2px solid var(--gray); @@ -37,15 +38,15 @@ &::placeholder { opacity: 0.1; } - + &.underline { color: var(--gray); border: none; } } } - - button{ + + button { border: 2px solid var(--silver); padding: 0 20px; border-radius: 8px; @@ -57,12 +58,12 @@ color: var(--silver); font-weight: bold; cursor: not-allowed; - + &.allowed { color: var(--green); border-color: var(--green); cursor: pointer; - + &:hover { background-color: var(--green); color: var(--white); @@ -84,4 +85,26 @@ } } -} + + .error { + display: grid; + grid-column: 1 / 3; + color: transparent; + + transition: color 250ms; + font-size: 0.9em; + text-align: center; + + height: 0; + overflow: visible; + + &.visible { + color: var(--red); + } + + @media screen and (max-width: 1000px) { + height: auto; + grid-column: 1/ 2; + } + } +} \ No newline at end of file diff --git a/src/app/pages/ColorGame/components/Instructions/Instructions.jsx b/src/app/pages/ColorGame/components/Instructions/Instructions.jsx new file mode 100644 index 00000000..4a141ef0 --- /dev/null +++ b/src/app/pages/ColorGame/components/Instructions/Instructions.jsx @@ -0,0 +1,33 @@ +import clsx from "clsx"; +import { memo, useRef } from "react"; +import cn from "./Instructions.module.scss"; +import { Text } from "app/components"; +import COLOR_BREAKDOWN from "./breakdown.png"; + +export const Instructions = memo(function Instructions() { + return ( +
+
+ + How to play + +
+

+ Hex colors are made up of 6 hexadecimal characters (hexadecimals + are numbers that go from 0-9, A, B, C, D, E, F, rather than just + 0-9 in our normal decimal system) and are split into 3 sections: + Red, Green and Blue - commonly known as RGB. +

+ color hex code with individual groups color coded with highlights +

+ Each hex color is essentially a blend of these three primary + colors. Compared to traditional print (CYMK), adding more of + each color makes the overall color brighter so #FFFFFF would be + white and #000000 would be black. +

+
+ ); +}); diff --git a/src/app/pages/ColorGame/components/Instructions/Instructions.module.scss b/src/app/pages/ColorGame/components/Instructions/Instructions.module.scss new file mode 100644 index 00000000..12921d2e --- /dev/null +++ b/src/app/pages/ColorGame/components/Instructions/Instructions.module.scss @@ -0,0 +1,32 @@ +.container { + padding: 20px; + border: 2px solid var(--silver); + border-radius: 18px; + // width: min-content; + + .header { + display: grid; + grid-template-columns: 1fr auto; + width: 100%; + } + + p { + margin: 20px 0; + line-height: 1.3em; + width: fit-content; + font-size: 1.3em; + + @media screen and (max-width: 1000px) { + font-size: 1em; + } + + } + img { + margin: 0 auto; + max-height: 200px; + + @media screen and (max-width: 1000px) { + max-height: 100px; + } + } +} \ No newline at end of file diff --git a/src/app/pages/ColorGame/components/Instructions/breakdown.png b/src/app/pages/ColorGame/components/Instructions/breakdown.png new file mode 100644 index 0000000000000000000000000000000000000000..79d5506114f72fe339af2f1810db5ce7dd13c323 GIT binary patch literal 4547 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 MY2GcnWBua40CbU<`2YX_ literal 0 HcmV?d00001 diff --git a/src/app/pages/ColorGame/components/Leaderboard/Leaderboard.jsx b/src/app/pages/ColorGame/components/Leaderboard/Leaderboard.jsx index 0d395f07..2e209325 100644 --- a/src/app/pages/ColorGame/components/Leaderboard/Leaderboard.jsx +++ b/src/app/pages/ColorGame/components/Leaderboard/Leaderboard.jsx @@ -6,7 +6,7 @@ import Auto from "react-animate-height"; import { Text } from "app/components"; import { ScoreItem } from "./components/ScoreItem"; -const PADDING = 40; +const PADDING = 16; const HIGHSCORE_LOCALSTORAGE_KEY = "@duci/color-game-highscore"; export const Leaderboard = memo(function Leaderboard({ report }) { @@ -45,16 +45,12 @@ export const Leaderboard = memo(function Leaderboard({ report }) { }, []); return ( - -
- - High Scores - -
+
+ + High Scores + + +
{!highscores.length && (
No previous scores to show. @@ -64,7 +60,7 @@ export const Leaderboard = memo(function Leaderboard({ report }) { ))}
-
- + +
); }); diff --git a/src/app/pages/ColorGame/components/Results/Results.jsx b/src/app/pages/ColorGame/components/Results/Results.jsx index a322db08..67e6a8c9 100644 --- a/src/app/pages/ColorGame/components/Results/Results.jsx +++ b/src/app/pages/ColorGame/components/Results/Results.jsx @@ -3,14 +3,43 @@ import { memo } from "react"; import cn from "./Results.module.scss"; export const Results = memo(function Results({ report }) { + const actualColor = "#" + report.actual; + const guessColor = "#" + report.guess; + return (
You were {report.similarityPercentage.toFixed(2)}% of the way there! -
answer: #{report.actual}
-
you guessed: #{report.guess}
+
+
+
+ + ANSWER + +
+

{actualColor}

+
+
+
+
+
+
+ + GUESS + +
+

{guessColor}

+
+
+
); }); diff --git a/src/app/pages/ColorGame/components/Results/Results.module.scss b/src/app/pages/ColorGame/components/Results/Results.module.scss index f2a35521..cb866001 100644 --- a/src/app/pages/ColorGame/components/Results/Results.module.scss +++ b/src/app/pages/ColorGame/components/Results/Results.module.scss @@ -1,6 +1,62 @@ .container { text-align: center; - margin: 40px; display: grid; - gap: 8px; + margin-top: 20px; + + background-color: var(--silver); + border-radius: 8px; + width: 100%; + padding: 40px; + + .split { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + padding-top: 20px; + + .left { + text-align: left; + display: grid; + grid-template-columns: 1fr auto; + + .description { + display: grid; + place-content: center start; + } + } + + .right { + text-align: right; + display: grid; + grid-template-columns: auto 1fr; + + .description { + display: grid; + 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; + } + } + } } \ No newline at end of file