exchanged modal

daryazherya · Apr 20, 2024 · e8e3ac5 · e8e3ac5
1 parent c04e580
commit e8e3ac5
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 56 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -8,22 +8,21 @@ import Modal from './components/Modal/Modal';
 import { randomRightWord } from './helpers/randomRightWord/randomRightWord';
 
 
-function App() {
-
+function Game({ rightWord, generateNewWord }) {
     const [state, setState] = useState({
-        rightWord: randomRightWord(),
         words: [],
         inputWord: '',
     })
     const [activeModal, setActiveModal] = useState(true);
     const numberEmpty = 6 - state.words.length;
-    const win = state.words.includes(state.rightWord);
+    const win = state.words.includes(rightWord);
     const loser = state.words.length === 6 && !win;
-    const keyboardLettersColors = createColorfulKeyboard(state.rightWord, state.words);
+    const keyboardLettersColors = createColorfulKeyboard(rightWord, state.words);
 
 
     const onEnter = () => {
         setState(prev => {
+            console.log({prev});
             if (prev.inputWord.length === 5) {
                 prev.words.push(prev.inputWord)
                 return {
@@ -54,17 +53,18 @@ function App() {
                 status={win}
                 activeModal={activeModal}
                 setActiveModal={setActiveModal}
-                setState={setState}
-                randomRightWord={randomRightWord}
+                onClick={generateNewWord}
             />
             <Modal text={'К сожалению, ты не угадал слово.'}
                 status={loser}
                 activeModal={activeModal}
                 setActiveModal={setActiveModal}
+                onClick={generateNewWord}
             />
             <div className='wrapper'>
                 <Words
                     numberEmpty={numberEmpty}
+                    rightWord={rightWord}
                     state={state}
                 />
             </div>
@@ -79,4 +79,13 @@ function App() {
     )
 }
 
+function App() {
+    const [rightWord, setRightWord] = useState(randomRightWord());
+    function generateNewWord () {
+        setRightWord(randomRightWord());
+    }
+
+    return <Game key={rightWord} rightWord={rightWord} generateNewWord={generateNewWord} />
+}
+
 export default App;
diff --git a/src/components/Keyboard/Keyboard.jsx b/src/components/Keyboard/Keyboard.jsx
@@ -1,55 +1,70 @@
-import { useEffect } from 'react';
-import { alphabet } from '../../helpers/variables';
-
-const Keyboard = ({ keyboardLettersColors, onEnter, addLetter, deleteLetter, state}) => {
+import { useEffect } from "react";
+import {
+    alphabet,
+    firstRow,
+    secondRow,
+    thirdRow,
+} from "../../helpers/variables";
+import KeyboardRow from "../KeyboardRow/KeyboardRow";
 
+const Keyboard = ({
+    keyboardLettersColors,
+    onEnter,
+    addLetter,
+    deleteLetter,
+    state,
+}) => {
     useEffect(() => {
         function handler(e) {
-            if (e.key === 'Enter') {
+            if (e.key === "Enter") {
                 onEnter();
-            } else if (e.key === 'Backspace') {
+            } else if (e.key === "Backspace") {
                 deleteLetter();
-            } else {
+            } else if (alphabet.includes(e.key)) {
                 addLetter(e.key.toUpperCase());
             }
-
         }
 
-        window.addEventListener('keydown', handler)
+        window.addEventListener("keydown", handler);
 
         return () => {
-            window.removeEventListener('keydown', handler)
-        }
-    }, [state, onEnter, addLetter, deleteLetter]);
+            window.removeEventListener("keydown", handler);
+        };
+    }, []);
 
     return (
         <div className="wrapper-keyboard">
-            <div className='keyboard'>
-                {alphabet.map((letter, i) => {
-                    return <button
-                        key={i}
-                        style={{ backgroundColor: keyboardLettersColors[letter.toUpperCase()] }}
-                        name={letter.toUpperCase()}
-                        onClick={(e) => addLetter(e.target.name)}
-                    >
-                        {letter.toUpperCase()}
+            <div className="keyboard">
+                <div className="wrapper-keyboard-button">
+                    <KeyboardRow
+                        row={firstRow}
+                        addLetter={addLetter}
+                        keyboardLettersColors={keyboardLettersColors}
+                    />
+                </div>
+                <div className="wrapper-keyboard-button">
+                    <KeyboardRow
+                        row={secondRow}
+                        addLetter={addLetter}
+                        keyboardLettersColors={keyboardLettersColors}
+                    />
+                </div>
+                <div className="wrapper-keyboard-button">
+                    <button className="keyboard-button" onClick={onEnter}>
+                        Enter
+                    </button>
+                    <KeyboardRow
+                        row={thirdRow}
+                        addLetter={addLetter}
+                        keyboardLettersColors={keyboardLettersColors}
+                    />
+                    <button className="keyboard-button" onClick={deleteLetter}>
+                        Delete
                     </button>
-                })}
-            <button 
-                className='keyboard-button'
-                onClick={onEnter}
-            >
-                Enter
-            </button>
-            <button
-                className='keyboard-button'
-                onClick={deleteLetter}
-            >
-                Delete
-            </button>
+                </div>
             </div>
         </div>
     );
-}
+};
 
-export default Keyboard;
+export default Keyboard;
diff --git a/src/components/KeyboardRow/KeyboardRow.jsx b/src/components/KeyboardRow/KeyboardRow.jsx
@@ -0,0 +1,14 @@
+const KeyboardRow = ({row, addLetter, keyboardLettersColors}) => {
+    return row.map((letter, i) => {
+        return <button
+            key={i}
+            style={{ backgroundColor: keyboardLettersColors[letter.toUpperCase()]}}
+            name={letter.toUpperCase()}
+            onClick={(e) => addLetter(e.target.name)}
+        >
+            {letter.toUpperCase()}
+        </button>
+    })
+}
+
+export default KeyboardRow;
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
@@ -1,13 +1,13 @@
-const Modal = ({ text, status, activeModal, setActiveModal,setState, randomRightWord }) => {
+const Modal = ({ text, status, activeModal, setActiveModal, onClick }) => {
+    if(!status) {
+        return null
+    }
+
     return (
-        status && <div className={activeModal ? 'modal-active' : 'modal-close'}
+         <div className={activeModal ? 'modal-active' : 'modal-close'}
             onClick={() => {
                 setActiveModal(!status)
-                setState({
-                    rightWord: randomRightWord(),
-                    words: [],
-                    inputWord: '',
-                })
+                onClick()
             }}
         >
             <div className="modal_content">

diff --git a/src/components/Words/Words.jsx b/src/components/Words/Words.jsx
@@ -2,11 +2,11 @@ import Letters from "./Letters";
 import EmptyWord from "./EmptyWord";
 
 
-const Words = ({state, numberEmpty}) => {
+const Words = ({rightWord, numberEmpty, state}) => {
 
 
     return <div className="words-style">
-        {state.words.map((word, i) => <Letters word={word} rightWord={state.rightWord} key={i}/>)}
+        {state.words.map((word, i) => <Letters word={word} rightWord={rightWord} key={i}/>)}
         {numberEmpty > 0 && <EmptyWord inputWord={state.inputWord}/>}
         {numberEmpty > 0 && Array(numberEmpty - 1).fill().map((_) => <EmptyWord />)}
     </div>

diff --git a/src/helpers/variables.js b/src/helpers/variables.js
@@ -27,6 +27,10 @@ export const alphabet = [
     "m",
 ];
 
+export const firstRow = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"];
+export const secondRow = ["a", "s", "d", "f", "g", "h", "j", "k", "l", "z"];
+export const thirdRow = ["x", "c", "v", "b", "n", "m"];
+
 export const words = [
     "HELLO",
     "WORLD",

diff --git a/src/styles/App.css b/src/styles/App.css
@@ -21,11 +21,13 @@
 }
 
 .keyboard {
-   display: grid;
-   margin: 25px;
-   grid-template-columns: repeat(10, 4fr);
-   grid-gap: 7px;
+   margin: 50px;
+   width: 500px;
+}
 
+.wrapper-keyboard-button {
+   display: flex;
+   justify-content: center;
 }
 
 .words-style {