done

package.json

@@ -6,6 +6,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.8",
+    "@material-ui/core": "^4.12.4",
     "@material-ui/styles": "^4.11.5",
     "@mui/icons-material": "^5.15.9",
     "@mui/material": "^5.15.12",

src/App.tsx

@@ -11,7 +11,9 @@ import MoreResourcesPage from './Pages/Learn/MoreResourcesPage/MoreResources.pag
 import MoreResourcesDetailsPage from './Pages/Learn/MoreResourcesDetailsPage/MoreResourcesDetails.page'
 import GameDetails from './Pages/Learn/GameDetailsPage/GameDetails.page'
 import GamePage from './Pages/Learn/GamePage/game.page'
+import Dictionary from './Pages/Learn/DictionaryPage/Dictionary.page'
 // import ResourcesPages from './Pages/Learn/backup/Resources.page';
+
 function App() {
   return (
     <BrowserRouter>
@@ -23,9 +25,10 @@ function App() {
           <Route path='/moreResources/:resourcesId' element={<MoreResourcesPage />} />
           <Route path='/moreResourcesDetails/:itemId' element={<MoreResourcesDetailsPage />} />
           <Route path='/game/:resourcesId' element={<GamePage />} />
-          <Route path='/gameDetails/:gameId' element={<GameDetails />} />
+          <Route path='/gameDetails/:gameId/:resourcesId' element={<GameDetails />} />
           <Route path='/register' element={<RegisterPage />} />
           <Route path='/login' element={<Login />} />
+          <Route path='/dictionary' element={<Dictionary />} />
           {/* <Route path="/c" element={<ResourcesPages />} /> */}
         </Route>
       </Routes>

src/Config/index.tsx

@@ -2,20 +2,13 @@ export const baseURL = 'http://127.0.0.1:8500'
 export const reactBaseURL = 'http://localhost:3000'
 
 export const setUserId = (userId: string) => {
-  console.log('############ setUserId ##############')
-  console.log(userId)
-  console.log('############ setUserId ##############')
   localStorage.setItem('userId', userId)
 }
 
 export const getUserId = (): string | null => {
-  console.log('############ getUserId ##############')
-  console.log(localStorage.getItem('userId'))
-  console.log('############ getUserId ##############')
   return localStorage.getItem('userId')
 }
 
 export const deleteUserId = () => {
-  console.log('############ deleteUserId ##############')
   localStorage.removeItem('userId')
 }

src/Pages/Learn/DictionaryPage/Dictionary.page.tsx

+import React, { useState, useEffect } from 'react'
+import { Card, CardContent, Grid, Typography, TextField, CircularProgress } from '@mui/material'
+
+interface SignLanguageData {
+  id: number
+  sign: string
+}
+
+const SignLanguageDictionary: React.FC = () => {
+  const [signs, setSigns] = useState<SignLanguageData[]>([])
+  const [searchTerm, setSearchTerm] = useState<string>('')
+  const [loading, setLoading] = useState<boolean>(true)
+
+  useEffect(() => {
+    // Simulating API call with dummy data
+    setTimeout(() => {
+      const dummyData: SignLanguageData[] = [
+        { id: 1, sign: 'A' },
+        { id: 2, sign: 'B' },
+        { id: 3, sign: 'AA' },
+        { id: 4, sign: 'AB' },
+        { id: 5, sign: 'BA' },
+        // Add more dummy data as needed
+      ]
+      setSigns(dummyData)
+      setLoading(false)
+    }, 1500) // Simulating a delay for loading effect
+  }, [])
+
+  const filteredSigns = signs.filter((sign) =>
+    sign.sign.toLowerCase().includes(searchTerm.toLowerCase()),
+  )
+  const sortedSigns = [...filteredSigns].sort((a, b) => a.sign.localeCompare(b.sign))
+
+  // Use a Set to keep track of unique sign IDs
+  const uniqueSignIds = new Set<number>()
+  const uniqueSortedSigns = sortedSigns.filter((sign) => {
+    if (uniqueSignIds.has(sign.id)) {
+      return false // Skip if the ID has already been added
+    }
+    uniqueSignIds.add(sign.id) // Add the ID to the Set
+    return true // Include this sign in the result
+  })
+
+  return (
+    <div
+      style={{ padding: '20px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}
+    >
+      <Typography
+        variant='h6'
+        component='div'
+        fontWeight={600}
+        fontSize={35}
+        mt={2}
+        mb={4}
+        letterSpacing={0.5}
+        sx={{ color: '#555555' }}
+      >
+        Dictionary
+      </Typography>
+      <TextField
+        label='Search'
+        variant='outlined'
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        fullWidth
+        style={{ marginBottom: '20px', width: '100%' }}
+      />
+      {loading ? (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100vh',
+            width: '100%',
+          }}
+        >
+          <CircularProgress />
+        </div>
+      ) : (
+        <Grid container spacing={2}>
+          {uniqueSortedSigns.map((sign, index) => (
+            <Grid item xs={12} sm={6} md={4} key={sign.id}>
+              <Card
+                style={{
+                  borderRight: (index + 1) % 4 === 0 ? '2px solid #ccc' : 'none',
+                  marginBottom: '10px',
+                }}
+              >
+                <CardContent>
+                  <Typography variant='h5' align='center'>
+                    {sign.sign}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+      )}
+    </div>
+  )
+}
+
+export default SignLanguageDictionary

src/Pages/Learn/GameDetailsPage/GameDetails.api.tsx

@@ -11,3 +11,26 @@ export const getByGameId = async (gameId: string) => {
     console.error(error)
   }
 }
+
+export const getUserById = async (userId: string | null) => {
+  try {
+    const { data } = await axios.get(baseURL + '/users/' + userId)
+    return data
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+interface GameUserData {
+  intermediateGameLevel: string
+  advancedGameLevel: string
+}
+
+export const changeGameLevel = async (userId: string | null, userData: GameUserData) => {
+  try {
+    const { data } = await axios.put(baseURL + '/users/' + userId, userData)
+    return data
+  } catch (error) {
+    console.error(error)
+  }
+}

src/Pages/Learn/GameDetailsPage/GameDetails.page.tsx

 import React, { useEffect, useState } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import { Box, Button, Card, CardContent, CardMedia, Typography, Container } from '@mui/material'
-import { getByGameId } from './GameDetails.api'
+import { getByGameId, getUserById, changeGameLevel } from './GameDetails.api'
+import { getUserId } from '../../../Config'
+
 import Swal from 'sweetalert2'
 
+interface GameUserData {
+  intermediateGameLevel: string
+  advancedGameLevel: string
+}
+
 const GameDetails: React.FC = () => {
   const navigate = useNavigate()
 
-  const { gameId } = useParams()
+  const { gameId, resourcesId } = useParams()
   const [video, setVideo] = useState<any>('')
   const [q, setQ] = useState<any>('')
   const [a1, setA1] = useState<any>('')
@@ -16,6 +23,23 @@ const GameDetails: React.FC = () => {
   const [a4, setA4] = useState<any>('')
   const [correct, setCorrect] = useState<any>('')
   const [level, setLevel] = useState<any>('')
+  const [userdata, setUserData] = useState<GameUserData>({
+    intermediateGameLevel: '',
+    advancedGameLevel: '',
+  })
+
+  useEffect(() => {
+    getUserById(getUserId())
+      .then((result) => {
+        setUserData((prevUserData) => ({
+          ...prevUserData,
+          ...result.data,
+        }))
+      })
+      .catch((error) => {
+        console.error('Error fetching data:', error)
+      })
+  }, [getUserById])
 
   useEffect(() => {
     if (gameId) {
@@ -45,7 +69,20 @@ const GameDetails: React.FC = () => {
         showConfirmButton: false,
         timer: 2000,
       }).then(() => {
+        if (resourcesId === 'Intermediate') {
+          userdata.intermediateGameLevel = userdata.intermediateGameLevel + 1
+        } else if (resourcesId === 'Advanced') {
+          userdata.advancedGameLevel = userdata.advancedGameLevel + 1
+        }
+        changeGameLevel(getUserId(), userdata)
+          .then((result) => {
+            if (result.message === 'updated') {
               navigate('/game/' + level)
+            }
+          })
+          .catch((error) => {
+            console.error('Error fetching data:', error)
+          })
       })
     } else {
       void Swal.fire({

src/Pages/Learn/GamePage/game.api.tsx

@@ -3,20 +3,38 @@ import axios from 'axios'
 // Config
 import { baseURL } from '../../../Config'
 
-export const getUnlockGameByResourcesId = async (resourcesId: string) => {
+export const getGameByResourcesId = async (resourcesId: string) => {
   try {
-    const { data } = await axios.get(baseURL + '/games//' + resourcesId)
+    const { data } = await axios.get(baseURL + '/games/levelBy/' + resourcesId)
     return data
   } catch (error) {
     console.error(error)
   }
 }
 
-export const getLockGameByResourcesId = async (resourcesId: string) => {
+export const getUserById = async (userId: string | null) => {
   try {
-    const { data } = await axios.get(baseURL + '/games///' + resourcesId)
+    const { data } = await axios.get(baseURL + '/users/' + userId)
     return data
   } catch (error) {
     console.error(error)
   }
 }
+
+// export const getUnlockGameByResourcesId = async (resourcesId: string) => {
+//   try {
+//     const { data } = await axios.get(baseURL + '/games//' + resourcesId)
+//     return data
+//   } catch (error) {
+//     console.error(error)
+//   }
+// }
+
+// export const getLockGameByResourcesId = async (resourcesId: string) => {
+//   try {
+//     const { data } = await axios.get(baseURL + '/games///' + resourcesId)
+//     return data
+//   } catch (error) {
+//     console.error(error)
+//   }
+// }

src/Pages/Learn/GamePage/game.page.tsx

@@ -4,30 +4,31 @@ import LockOpenIcon from '@mui/icons-material/LockOpen'
 import React, { useState, useEffect } from 'react'
 import { useParams, Link } from 'react-router-dom'
 // import { Box, Typography } from '@mui/material';
-import { getUnlockGameByResourcesId, getLockGameByResourcesId } from './game.api'
+import { getGameByResourcesId, getUserById } from './game.api'
+import { getUserId } from '../../../Config'
 
 export default function GamePage() {
   const { resourcesId } = useParams()
-  const [gamesUnlock, setGamesUnlock] = useState<any>([])
-  const [gamesLock, setGamesLock] = useState<any>([])
+  const [games, setGames] = useState<any>([])
+  const [intermediateGameLevel, setIntermediateGameLevel] = useState<any>()
+  const [advancedGameLevel, setAdvancedGameLevel] = useState<any>()
 
   useEffect(() => {
-    if (resourcesId) {
-      getUnlockGameByResourcesId(resourcesId)
+    getUserById(getUserId())
       .then((result) => {
-          setGamesUnlock(result.data)
+        setIntermediateGameLevel(result.data.intermediateGameLevel)
+        setAdvancedGameLevel(result.data.advancedGameLevel)
       })
       .catch((error) => {
         console.error('Error fetching data:', error)
       })
-    }
-  }, [resourcesId])
+  }, [getUserById])
 
   useEffect(() => {
     if (resourcesId) {
-      getLockGameByResourcesId(resourcesId)
+      getGameByResourcesId(resourcesId)
         .then((result) => {
-          setGamesLock(result.data)
+          setGames(result.data)
         })
         .catch((error) => {
           console.error('Error fetching data:', error)
@@ -62,11 +63,11 @@ export default function GamePage() {
       </Box>
 
       <Box sx={{ display: 'flex', flexWrap: 'wrap', mr: 30, ml: 30, justifyContent: 'start ' }}>
-        {gamesUnlock.map((value: any, index: any) => {
+        {games.map((value: any, index: any) => {
           return (
             <Box
               component={Link}
-              to={'/gameDetails/' + value._id}
+              to={`/gameDetails/${value._id}/${resourcesId}`}
               sx={{
                 width: '150px',
                 height: '150px',
@@ -77,6 +78,7 @@ export default function GamePage() {
                 borderBlockColor: '#555555',
                 justifyContent: 'center',
                 borderRadius: 1,
+                pointerEvents: intermediateGameLevel < value.number ? 'none' : 'auto',
                 textAlign: 'center',
                 textDecoration: 'none',
                 ':hover': {
@@ -103,49 +105,23 @@ export default function GamePage() {
               >
                 Level {value.number}
               </Typography>
-              {value.status === 'L' ? (
+              {resourcesId === 'Intermediate' ? (
+                <>
+                  {intermediateGameLevel < value.number ? (
                     <LockIcon style={{ marginTop: '10px', color: '#555555', width: '100%' }} />
                   ) : (
                     <LockOpenIcon style={{ marginTop: '10px', color: '#555555', width: '100%' }} />
                   )}
-            </Box>
-          )
-        })}
-
-        {gamesLock.map((value: any, index: any) => {
-          return (
-            <Box
-              sx={{
-                width: '150px',
-                height: '150px',
-                margin: 3.6,
-                display: 'flex',
-                flexDirection: 'column',
-                border: 0.1,
-                borderBlockColor: '#555555',
-                justifyContent: 'center',
-                borderRadius: 1,
-                textAlign: 'center',
-                textDecoration: 'none',
-              }}
-              key={index}
-            >
-              <Typography
-                id='box'
-                variant='h6'
-                component='div'
-                fontWeight={600}
-                fontSize={20}
-                letterSpacing={0.5}
-                sx={{ color: '#555555' }}
-              >
-                Level {value.number}
-              </Typography>
-              {value.status === 'L' ? (
+                </>
+              ) : (
+                <>
+                  {advancedGameLevel < value.number ? (
                     <LockIcon style={{ marginTop: '10px', color: '#555555', width: '100%' }} />
                   ) : (
                     <LockOpenIcon style={{ marginTop: '10px', color: '#555555', width: '100%' }} />
                   )}
+                </>
+              )}
             </Box>
           )
         })}

yarn.lock

@@ -1792,6 +1792,24 @@
   resolved "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
+"@material-ui/core@^4.12.4":
+  version "4.12.4"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.4.tgz#4ac17488e8fcaf55eb6a7f5efb2a131e10138a73"
+  integrity sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/styles" "^4.11.5"
+    "@material-ui/system" "^4.12.2"
+    "@material-ui/types" "5.1.0"
+    "@material-ui/utils" "^4.11.3"
+    "@types/react-transition-group" "^4.2.0"
+    clsx "^1.0.4"
+    hoist-non-react-statics "^3.3.2"
+    popper.js "1.16.1-lts"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+    react-transition-group "^4.4.0"
+
 "@material-ui/styles@^4.11.5":
   version "4.11.5"
   resolved "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz"
@@ -1814,6 +1832,16 @@
     jss-plugin-vendor-prefixer "^10.5.1"
     prop-types "^15.7.2"
 
+"@material-ui/system@^4.12.2":
+  version "4.12.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.2.tgz#f5c389adf3fce4146edd489bf4082d461d86aa8b"
+  integrity sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.3"
+    csstype "^2.5.2"
+    prop-types "^15.7.2"
+
 "@material-ui/types@5.1.0":
   version "5.1.0"
   resolved "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz"
@@ -2600,7 +2628,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.10", "@types/react-transition-group@^4.4.6":
+"@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.10", "@types/react-transition-group@^4.4.6":
   version "4.4.10"
   resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz"
   integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==
@@ -8156,6 +8184,11 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
+popper.js@1.16.1-lts:
+  version "1.16.1-lts"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
+  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
+
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz"
@@ -9079,7 +9112,7 @@ react-simple-image-viewer@^1.2.2:
   resolved "https://registry.npmjs.org/react-simple-image-viewer/-/react-simple-image-viewer-1.2.2.tgz"
   integrity sha512-Vk9p6Glm7uE4cSEBGkqZPGC3qoZcAwd48nq5/JN13NKd9rUrUIWZWFEmRzO+FVwl6c0UdjSDkthGoaoiYeWVjg==
 
-react-transition-group@^4.4.5:
+react-transition-group@^4.4.0, react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"
   integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==