From 9657db32353a9e3df67e8f6288ee7cf632deda83 Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Fri, 29 Dec 2023 11:04:55 -0500 Subject: [PATCH 01/22] include outline none property --- src/styles.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/styles.css b/src/styles.css index f54c1cfd7..eef8387cf 100644 --- a/src/styles.css +++ b/src/styles.css @@ -114,12 +114,15 @@ h1 { .guess:first-of-type .cell:first-of-type { --radius: 4px 0px 0px 0px; } + .guess:first-of-type .cell:last-of-type { --radius: 0px 4px 0px 0px; } + .guess:last-of-type .cell:last-of-type { --radius: 0px 0px 4px 0px; } + .guess:last-of-type .cell:first-of-type { --radius: 0px 0px 0px 4px; } @@ -129,11 +132,13 @@ h1 { border-color: var(--color-success); color: white; } + .cell.incorrect { background: var(--color-gray-300); border-color: var(--color-gray-300); color: white; } + .cell.misplaced { background: var(--color-warning); border-color: var(--color-warning); @@ -159,6 +164,7 @@ h1 { border-radius: 4px; padding: 8px 16px; outline-offset: 4px; + outline: none; } .banner { @@ -180,6 +186,7 @@ h1 { background: var(--color-success); color: white; } + .sad.banner { background: var(--color-error); color: white; @@ -208,6 +215,7 @@ h1 { border-radius: 8px; padding: 24px 32px; } + .modal-close-btn { position: absolute; top: 0; @@ -215,6 +223,7 @@ h1 { padding: 16px; cursor: pointer; } + .modal-title { margin-bottom: 0.5em; } @@ -226,7 +235,8 @@ h1 { from { transform: translateY(100%); } + to { transform: translateY(0%); } -} +} \ No newline at end of file From a6e73bfc4e3a03b136f2c582cae490509ef76472 Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Fri, 29 Dec 2023 11:11:48 -0500 Subject: [PATCH 02/22] create input component --- src/components/Input/Input.js | 15 +++++++++++++++ src/components/Input/index.js | 2 ++ 2 files changed, 17 insertions(+) create mode 100644 src/components/Input/Input.js create mode 100644 src/components/Input/index.js diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js new file mode 100644 index 000000000..6f2cf6368 --- /dev/null +++ b/src/components/Input/Input.js @@ -0,0 +1,15 @@ +import React from 'react' + +const Input = () => { + return ( +
+ + +
+ ) +} + +export default Input; diff --git a/src/components/Input/index.js b/src/components/Input/index.js new file mode 100644 index 000000000..998f66c56 --- /dev/null +++ b/src/components/Input/index.js @@ -0,0 +1,2 @@ +export * from './Input'; +export { default } from './Input'; \ No newline at end of file From 7499ff08b8445b810da8cd880555a51743ebce53 Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Fri, 29 Dec 2023 16:32:21 -0500 Subject: [PATCH 03/22] include form in game component --- src/components/Game/Game.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Game/Game.js b/src/components/Game/Game.js index fc7615d24..6592e121c 100644 --- a/src/components/Game/Game.js +++ b/src/components/Game/Game.js @@ -2,6 +2,7 @@ import React from 'react'; import { sample } from '../../utils'; import { WORDS } from '../../data'; +import Input from '../Input/Input'; // Pick a random word on every pageload. const answer = sample(WORDS); @@ -9,7 +10,11 @@ const answer = sample(WORDS); console.info({ answer }); function Game() { - return <>Put a game here!; + return ( + <> + + + ); } export default Game; From 0cedab18f4dbd6389c085f98252f2e43090d9ec3 Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Fri, 29 Dec 2023 16:33:57 -0500 Subject: [PATCH 04/22] include validation in form --- src/components/Input/Input.js | 31 ++++++++++++++++++++++++++----- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js index 6f2cf6368..0d748b919 100644 --- a/src/components/Input/Input.js +++ b/src/components/Input/Input.js @@ -1,15 +1,36 @@ -import React from 'react' +import React, { useState } from 'react' const Input = () => { + const [inputValue, setInputValue] = useState(''); + + const handleSubmit = (e) => { + e.preventDefault(); + if (inputValue.length !== 5) { + alert('The word must be equal to 5 letters'); + return; + }; + + console.log({ inputValue }); + setInputValue(''); + }; + return ( -
- + + { + setInputValue(event.target.value.toUpperCase()) + }} />
- ) -} + ); +}; export default Input; From f3d628c32868ef158e27bb0856656b6f6e2f5f7d Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Tue, 2 Jan 2024 09:26:59 -0500 Subject: [PATCH 05/22] include component to save all the words in the input --- src/components/PreviousWord/PreviousWord.js | 20 ++++++++++++++++++++ src/components/PreviousWord/index.js | 2 ++ 2 files changed, 22 insertions(+) create mode 100644 src/components/PreviousWord/PreviousWord.js create mode 100644 src/components/PreviousWord/index.js diff --git a/src/components/PreviousWord/PreviousWord.js b/src/components/PreviousWord/PreviousWord.js new file mode 100644 index 000000000..501bd4bbf --- /dev/null +++ b/src/components/PreviousWord/PreviousWord.js @@ -0,0 +1,20 @@ +import React from 'react'; + +function PreviousWord({ words }) { + return ( +
+ {words.map(({ id, value }) => { + return ( +

+ {value} +

+ ) + })} +
+ ); +} + +export default PreviousWord; diff --git a/src/components/PreviousWord/index.js b/src/components/PreviousWord/index.js new file mode 100644 index 000000000..633d27d9b --- /dev/null +++ b/src/components/PreviousWord/index.js @@ -0,0 +1,2 @@ +export * from './PreviousWord'; +export { default } from './PreviousWord'; From d061e946fff1826f06b0e99f6f8076cf5a26ba2f Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Tue, 2 Jan 2024 09:29:21 -0500 Subject: [PATCH 06/22] change quotes in class --- src/components/PreviousWord/PreviousWord.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PreviousWord/PreviousWord.js b/src/components/PreviousWord/PreviousWord.js index 501bd4bbf..18cb58979 100644 --- a/src/components/PreviousWord/PreviousWord.js +++ b/src/components/PreviousWord/PreviousWord.js @@ -6,7 +6,7 @@ function PreviousWord({ words }) { {words.map(({ id, value }) => { return (

{value} From 990b560ef4c39182a1afb59bd98194f7378b1628 Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Tue, 2 Jan 2024 09:52:15 -0500 Subject: [PATCH 07/22] include state to save words in an array --- src/components/Input/Input.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js index 0d748b919..d24a0b347 100644 --- a/src/components/Input/Input.js +++ b/src/components/Input/Input.js @@ -1,15 +1,19 @@ -import React, { useState } from 'react' - -const Input = () => { - const [inputValue, setInputValue] = useState(''); +import React from 'react'; +const Input = ({ inputValue, setInputValue, words, setWords }) => { const handleSubmit = (e) => { e.preventDefault(); if (inputValue.length !== 5) { alert('The word must be equal to 5 letters'); return; }; - + setWords([ + ...words, + { + id: crypto.randomUUID(), + value: inputValue + } + ]); console.log({ inputValue }); setInputValue(''); }; From 51a95c6fc5bdb7ee86f2b6c28a5a2ca1858aae25 Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Tue, 2 Jan 2024 10:52:24 -0500 Subject: [PATCH 08/22] change way to save words in state --- src/components/Input/Input.js | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js index d24a0b347..a039db997 100644 --- a/src/components/Input/Input.js +++ b/src/components/Input/Input.js @@ -1,21 +1,23 @@ -import React from 'react'; +import React, { useState } from 'react'; + +const Input = ({ handleSaveWord }) => { + const [tentativeGuess, setTentativeGuess] = useState(''); -const Input = ({ inputValue, setInputValue, words, setWords }) => { const handleSubmit = (e) => { e.preventDefault(); - if (inputValue.length !== 5) { + if (tentativeGuess.length !== 5) { alert('The word must be equal to 5 letters'); return; }; - setWords([ - ...words, - { - id: crypto.randomUUID(), - value: inputValue - } - ]); - console.log({ inputValue }); - setInputValue(''); + + const newWord = { + id: crypto.randomUUID(), + value: tentativeGuess + } + + handleSaveWord(newWord); + console.log({ tentativeGuess }); + setTentativeGuess(''); }; return ( @@ -28,9 +30,9 @@ const Input = ({ inputValue, setInputValue, words, setWords }) => { required id='guess-input' type='text' - value={inputValue} + value={tentativeGuess} onChange={event => { - setInputValue(event.target.value.toUpperCase()) + setTentativeGuess(event.target.value.toUpperCase()) }} /> From c10b8026e2b6078aa2159c16fb2dbecc4bbddc77 Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Tue, 2 Jan 2024 11:26:03 -0500 Subject: [PATCH 09/22] include a new function to save words typed in the input --- src/components/Game/Game.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/Game/Game.js b/src/components/Game/Game.js index 6592e121c..e2feb230a 100644 --- a/src/components/Game/Game.js +++ b/src/components/Game/Game.js @@ -1,8 +1,9 @@ -import React from 'react'; +import React, { useState } from 'react'; import { sample } from '../../utils'; import { WORDS } from '../../data'; import Input from '../Input/Input'; +import PreviousWord from '../PreviousWord/PreviousWord'; // Pick a random word on every pageload. const answer = sample(WORDS); @@ -10,9 +11,16 @@ const answer = sample(WORDS); console.info({ answer }); function Game() { + const [words, setWords] = useState([]); + + const handleSaveWord = (input) => { + setWords([...words, input]); + }; + return ( <> - + + ); } From ae077e9c0767bed11d4509d92ab32547ba880e1f Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Tue, 2 Jan 2024 16:18:12 -0500 Subject: [PATCH 10/22] create new component to separate letters in word --- src/components/Guess/Guess.js | 20 ++++++++++++++++++++ src/components/Guess/index.js | 2 ++ 2 files changed, 22 insertions(+) create mode 100644 src/components/Guess/Guess.js create mode 100644 src/components/Guess/index.js diff --git a/src/components/Guess/Guess.js b/src/components/Guess/Guess.js new file mode 100644 index 000000000..e58dd52cf --- /dev/null +++ b/src/components/Guess/Guess.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { range } from '../../utils'; + +function Guess({ word }) { + return ( +

+ { + range(5).map(num => { + return ( + + {word ? word.value[num] : undefined} + + ) + }) + } +

+ ); +} + +export default Guess; diff --git a/src/components/Guess/index.js b/src/components/Guess/index.js new file mode 100644 index 000000000..afbf137b5 --- /dev/null +++ b/src/components/Guess/index.js @@ -0,0 +1,2 @@ +export * from './Guess'; +export { default } from './Guess'; From 180620871cf40d62b905bae59232063012c6948f Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Tue, 2 Jan 2024 16:19:04 -0500 Subject: [PATCH 11/22] include guess component to replace map inside of component --- src/components/PreviousWord/PreviousWord.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/PreviousWord/PreviousWord.js b/src/components/PreviousWord/PreviousWord.js index 18cb58979..1d14f17da 100644 --- a/src/components/PreviousWord/PreviousWord.js +++ b/src/components/PreviousWord/PreviousWord.js @@ -1,17 +1,16 @@ import React from 'react'; +import Guess from '../Guess/Guess'; +import { NUM_OF_GUESSES_ALLOWED } from '../../constants'; +import { range } from '../../utils'; function PreviousWord({ words }) { + return (
- {words.map(({ id, value }) => { + {range(NUM_OF_GUESSES_ALLOWED).map(num => { return ( -

- {value} -

- ) + + ); })}
); From 35ce2844a8b6be8e40c7c11879176142b7362128 Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Wed, 3 Jan 2024 11:46:26 -0500 Subject: [PATCH 12/22] create new component to manage style of cell --- src/components/Cell/Cell.js | 9 +++++++++ src/components/Cell/index.js | 2 ++ 2 files changed, 11 insertions(+) create mode 100644 src/components/Cell/Cell.js create mode 100644 src/components/Cell/index.js diff --git a/src/components/Cell/Cell.js b/src/components/Cell/Cell.js new file mode 100644 index 000000000..177a4879c --- /dev/null +++ b/src/components/Cell/Cell.js @@ -0,0 +1,9 @@ +import React from 'react'; + +function Cell({ letter, status }) { + const className = status ? `cell ${status}` : 'cell'; + + return {letter}; +} + +export default Cell; diff --git a/src/components/Cell/index.js b/src/components/Cell/index.js new file mode 100644 index 000000000..07cf6981b --- /dev/null +++ b/src/components/Cell/index.js @@ -0,0 +1,2 @@ +export * from './Cell'; +export { default } from './Cell'; From 3fbfa355b37183ad2c5b947a39c3389b4c356442 Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Wed, 3 Jan 2024 11:47:11 -0500 Subject: [PATCH 13/22] include prop inside of Previous word --- src/components/Game/Game.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Game/Game.js b/src/components/Game/Game.js index e2feb230a..fbc315852 100644 --- a/src/components/Game/Game.js +++ b/src/components/Game/Game.js @@ -19,7 +19,7 @@ function Game() { return ( <> - + ); From b909500bd45ea9a6e070619fc44de5abca289642 Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Wed, 3 Jan 2024 11:48:01 -0500 Subject: [PATCH 14/22] include cell component with props to validate word --- src/components/Guess/Guess.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/Guess/Guess.js b/src/components/Guess/Guess.js index e58dd52cf..995610c2e 100644 --- a/src/components/Guess/Guess.js +++ b/src/components/Guess/Guess.js @@ -1,16 +1,23 @@ import React from 'react'; import { range } from '../../utils'; +import Cell from '../Cell/Cell'; +import { checkGuess } from '../../game-helpers'; + +function Guess({ word, answer }) { + const result = checkGuess(word, answer); + console.log({ result }); -function Guess({ word }) { return (

{ range(5).map(num => { return ( - - {word ? word.value[num] : undefined} - - ) + + ); }) }

From fd0862b754a5693c307dce2e874d8ae8828b1824 Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Wed, 3 Jan 2024 11:48:34 -0500 Subject: [PATCH 15/22] include answer prop to validate info --- src/components/PreviousWord/PreviousWord.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/PreviousWord/PreviousWord.js b/src/components/PreviousWord/PreviousWord.js index 1d14f17da..f1a8c9edb 100644 --- a/src/components/PreviousWord/PreviousWord.js +++ b/src/components/PreviousWord/PreviousWord.js @@ -3,13 +3,12 @@ import Guess from '../Guess/Guess'; import { NUM_OF_GUESSES_ALLOWED } from '../../constants'; import { range } from '../../utils'; -function PreviousWord({ words }) { - +function PreviousWord({ words, answer }) { return (
{range(NUM_OF_GUESSES_ALLOWED).map(num => { return ( - + ); })}
From 81c5c6b6846f4b10179e29753ab6a3022d56a40f Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Wed, 3 Jan 2024 15:19:17 -0500 Subject: [PATCH 16/22] delete consoles from code --- src/components/Guess/Guess.js | 1 - src/components/Input/Input.js | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/Guess/Guess.js b/src/components/Guess/Guess.js index 995610c2e..bead1f974 100644 --- a/src/components/Guess/Guess.js +++ b/src/components/Guess/Guess.js @@ -5,7 +5,6 @@ import { checkGuess } from '../../game-helpers'; function Guess({ word, answer }) { const result = checkGuess(word, answer); - console.log({ result }); return (

diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js index a039db997..b7caf9db8 100644 --- a/src/components/Input/Input.js +++ b/src/components/Input/Input.js @@ -16,7 +16,6 @@ const Input = ({ handleSaveWord }) => { } handleSaveWord(newWord); - console.log({ tentativeGuess }); setTentativeGuess(''); }; From 60f32d6c838a7ca66ab3a2a55343c6a5fbd22030 Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Wed, 3 Jan 2024 17:49:51 -0500 Subject: [PATCH 17/22] create new component to show after end of game --- src/components/Banner/Banner.js | 23 +++++++++++++++++++++++ src/components/Banner/index.js | 2 ++ 2 files changed, 25 insertions(+) create mode 100644 src/components/Banner/Banner.js create mode 100644 src/components/Banner/index.js diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js new file mode 100644 index 000000000..6cd8bc311 --- /dev/null +++ b/src/components/Banner/Banner.js @@ -0,0 +1,23 @@ +import React from 'react'; + +function Banner({ isWinner, answer, words }) { + return ( + <> + {isWinner ? ( +

+

+ Congratulations! Got it in + {" "} + {words.length} guesses. +

+
+ ) : ( +
+

Sorry, the correct answer is {answer}.

+
+ )} + + ); +} + +export default Banner; diff --git a/src/components/Banner/index.js b/src/components/Banner/index.js new file mode 100644 index 000000000..1a3d55b83 --- /dev/null +++ b/src/components/Banner/index.js @@ -0,0 +1,2 @@ +export * from './Banner'; +export { default } from './Banner'; From 8047b2256264ec964ad605367ffdddb200fcd2f8 Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Wed, 3 Jan 2024 18:15:38 -0500 Subject: [PATCH 18/22] include disable option if state isOver change --- src/components/Input/Input.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js index b7caf9db8..d3f81d463 100644 --- a/src/components/Input/Input.js +++ b/src/components/Input/Input.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -const Input = ({ handleSaveWord }) => { +const Input = ({ handleSaveWord, isOver }) => { const [tentativeGuess, setTentativeGuess] = useState(''); const handleSubmit = (e) => { @@ -29,6 +29,7 @@ const Input = ({ handleSaveWord }) => { required id='guess-input' type='text' + disabled={isOver} value={tentativeGuess} onChange={event => { setTentativeGuess(event.target.value.toUpperCase()) From 1f82f7e0e2151d007d9c31e3c555983f29490bdc Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Wed, 3 Jan 2024 18:16:14 -0500 Subject: [PATCH 19/22] change some paddings to less values --- src/styles.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/styles.css b/src/styles.css index eef8387cf..a191acae2 100644 --- a/src/styles.css +++ b/src/styles.css @@ -4,7 +4,7 @@ html { overflow-y: scroll; - --game-spacing: 32px; + --game-spacing: 20px; --header-height: 4rem; --color-success: hsl(150deg 70% 30%); @@ -77,17 +77,16 @@ h1 { display: flex; flex-direction: column; gap: var(--game-spacing); - padding: var(--game-spacing) 32px; + padding: var(--game-spacing) 15px; margin: 0 auto; min-width: 250px; max-width: min(500px, 58vh, 100%); } .guess-results { - flex: 1; display: flex; flex-direction: column; - justify-content: center; + justify-content: flex-start; } .guess { From 049d7b4b634e1469e007ceae8e29b803dda1d90f Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Wed, 3 Jan 2024 18:16:50 -0500 Subject: [PATCH 20/22] include validation is game over or user win --- src/components/Game/Game.js | 31 +++++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/src/components/Game/Game.js b/src/components/Game/Game.js index fbc315852..b589cb014 100644 --- a/src/components/Game/Game.js +++ b/src/components/Game/Game.js @@ -4,6 +4,7 @@ import { sample } from '../../utils'; import { WORDS } from '../../data'; import Input from '../Input/Input'; import PreviousWord from '../PreviousWord/PreviousWord'; +import Banner from '../Banner/Banner'; // Pick a random word on every pageload. const answer = sample(WORDS); @@ -12,15 +13,41 @@ console.info({ answer }); function Game() { const [words, setWords] = useState([]); + const [isOver, setIsOver] = useState(false); + const [isWinner, setIsWinner] = useState(false); const handleSaveWord = (input) => { setWords([...words, input]); + + if (answer === input.value) { + setIsWinner(true); + setIsOver(true); + } else if (words.length >= 5) { + setIsOver(true); + setIsWinner(false); + } else { + setIsOver(false); + } }; return ( <> - - + + + {isOver ? + : + undefined + } ); } From c2dbbc206edd1743aea1edddd1145a7093ca9534 Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Thu, 4 Jan 2024 10:29:23 -0500 Subject: [PATCH 21/22] include button style --- src/styles.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/styles.css b/src/styles.css index a191acae2..820c4d8b6 100644 --- a/src/styles.css +++ b/src/styles.css @@ -227,6 +227,14 @@ h1 { margin-bottom: 0.5em; } +.restart { + text-align: center; + padding: 10px 15px; + background-color: var(--color-gray-300); + color: #fff; + border-radius: var(--radius); +} + /* Keyframe animations */ From 977f96922813dd20a24b2fa97e79cc40200361a7 Mon Sep 17 00:00:00 2001 From: Camilo-Suarez98 Date: Thu, 4 Jan 2024 10:30:11 -0500 Subject: [PATCH 22/22] include reset button in main component --- src/components/Game/Game.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/components/Game/Game.js b/src/components/Game/Game.js index b589cb014..176b9260b 100644 --- a/src/components/Game/Game.js +++ b/src/components/Game/Game.js @@ -30,6 +30,14 @@ function Game() { } }; + const handleResetGame = () => { + const newGame = []; + + setWords(newGame); + setIsOver(false); + window.location.reload(); + }; + return ( <> + {isOver ?