added: added some types for TypeScript migration, Animations on board using ReactSpring, Tutorial UI, MenuCard UI

Author: UIcoder511

package-lock.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@react-spring/web": "^9.7.3",
+    "@stitches/react": "^1.2.8",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",

package.json

@@ -10,6 +10,8 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  
+      
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

public/index.html

@@ -1,6 +1,6 @@
 :root {
   /* ------------------------------GENERAL -------------------------------- */
-  --gap: 12px;
+  --gap: 20px;
   /* ----------------------------- GRID-CELL ------------------------------ */
   --cell-size: 80px;
   /* --cell-shadow-color: #000000ee; */
@@ -9,23 +9,28 @@
   --imcomplete-bg: #ffffff;
   --imcomplete-shadow: #9ebff1;
   --imcorrect-bg: #ccc;
-  --imcorrect-shadow: #aaa;
+  --imcorrect-shadow: #545454;
   --correct-bg: #b1fe0e;
   --correct-shadow: #36b101;
   --wrong-positon-bg: #fef572;
   --wrong-positon-shadow: #ff6100;
+  --gray:#727272;
 
   /* -- */
 }
 
 .App {
+  z-index: 2;
+  position: relative;
   height: 100%;
   width: 100%;
   display: flex;
 
   align-items: center;
   /* justify-content: center; */
   flex-direction: column;
+  /* background: rgb(143,75,222); */
+background: linear-gradient(180deg, rgba(143,75,222,1) 0%, rgba(225,171,203,1) 50%, rgba(137,163,237,1) 100%);
 }
 
 header {
@@ -45,35 +50,3 @@ footer {
   justify-content: center;
 }
 
-.submit-btn {
-  padding: 10px 20px;
-  /* margin: 40px 20px; */
-  border: none;
-  border-bottom: 8px solid var(--correct-shadow);
-  background-color: var(--correct-bg);
-  box-shadow: var(--cell-shadow);
-  border-radius: 20px;
-  font-size: 2rem;
-  font-weight: 800;
-  color: transparent;
-  -webkit-text-stroke: 2px #555;
-  transition: 100ms all ease-in;
-  cursor: pointer;
-}
-
-.submit-btn:hover {
-  border-bottom-width: 10px;
-  /* box-shadow: var(--cell-shadow-hover); */
-}
-
-.submit-btn:active {
-  border-bottom-width: 5px;
-  /* box-shadow: var(--cell-shadow-hover); */
-}
-
-.submit-btn:disabled {
-  filter: grayscale(1);
-  opacity: 0.6;
-  cursor: not-allowed;
-  border-bottom-width: 2px;
-}

src/App.css

@@ -3,49 +3,58 @@ import React from "react";
 import "./App.css";
 import GridRow from "./components/GridRow/GridRow";
 import useWorddle from "./hooks/useWorddle";
+import Home from "./components/Home/Home";
+import Button from "./ui/Button/Button";
+import MenuCard from "ui/MenuCard/MenuCard";
+import Tutorial from "staticUI/Tutorial/Tutorial";
 
-const COREECT_WORD = "MIKASA"; // :)
+const CORRECT_WORD = "MIKASA"; // :)
 
 function App() {
   const {
+    level,
+    setLevel,
     gameState,
     currentPosition,
     handleEnter: guessTheWord,
     isWon,
-  } = useWorddle({ correctWord: COREECT_WORD });
+    canEnter,
+  } = useWorddle({ correctWord: CORRECT_WORD });
+
   return (
     <div className="App">
-      {/* <header>
-        <div>Worddle Game</div>
-        <div>Guess the anime character :)</div>
-      </header> */}
-      <div className="main-container">
-        {Array(6)
+      <Tutorial />
+      {/* {
+      // !isStarted ?<Home setIsStarted={setIsStarted}  />:
+      !gameState ?<Home setLevel={setLevel}  />:
+      <>
+       <div className="main-container">
+       {Array(6)
           .fill("")
           .map((_, index) => (
             <GridRow
               key={index}
-              data={gameState[index].data}
-              isFixed={gameState[index].fixed}
-              wordToGuess={COREECT_WORD}
+              data={gameState?.[index].data}
+              isFixed={gameState?.[index].isFixed}
+              wordToGuess={CORRECT_WORD}
+              level={level}
             />
           ))}
-        {/* <GridRow data={gameState[0]} />
-        <GridRow />
-        <GridRow />
-        <GridRow />
-        <GridRow />
-        <GridRow /> */}
+        
+      
       </div>
       <footer>
-        <button
-          disabled={currentPosition !== 6}
+        <Button
+          disabled={!canEnter}
           onClick={guessTheWord}
-          className="submit-btn"
+          btnType="try"
         >
           TRY IT
-        </button>
+        </Button>
       </footer>
+   
+      </>
+} */}
     </div>
   );
 }

src/App.tsx

@@ -1,11 +1,32 @@
-import React from "react";
+import React, { FC } from "react";
 import GridRowCell from "./GridRowCell/GridRowCell";
 import "./GridRow.css";
+import { IWordState } from "../../hooks/useWorddle";
+import { animated, useSpring } from '@react-spring/web';
 
-const GridRow = ({ data, wordToGuess, isFixed }) => {
+interface GridRowProps extends IWordState{
+
+  wordToGuess: string;
+  level:number
+} 
+
+const GridRow:FC<GridRowProps> = ({ data, wordToGuess, isFixed,level }) => {
+
+  const [styles] =useSpring(()=>({
+    from:{
+      scale:0.8
+    },
+    to:{
+      scale:1
+    },
+    config:{
+      tension:150,
+      friction:10
+    }
+  }))
   return (
-    <div className={"grid-row"}>
-      {Array(6)
+    <animated.div className={"grid-row"} style={{...styles}}>
+      {Array(level)
         .fill("")
         .map((_, index) => (
           <GridRowCell
@@ -18,18 +39,14 @@ const GridRow = ({ data, wordToGuess, isFixed }) => {
                   : data[index] !== "" && wordToGuess.includes(data[index])
                   ? "wrong-position"
                   : data[5] !== ""
-                  ? "imcorrect"
+                  ? "incorrect"
                   : ""
                 : ""
             }
           />
         ))}
-      {/* <GridRowCell value="A" status={"correct"} />
-      <GridRowCell value="D" status={"wrong-position"} />
-      <GridRowCell />
-      <GridRowCell />
-      <GridRowCell /> */}
-    </div>
+     
+    </animated.div>
   );
 };