Skip to content

Commit

Permalink
updated site
Browse files Browse the repository at this point in the history
  • Loading branch information
@FloppyDoval
FloppyDoval committed Dec 13, 2024
1 parent 9d21f25 commit b5fc40e
Show file tree
Hide file tree
Showing 20 changed files with 1,140 additions and 685 deletions.
342 changes: 6 additions & 336 deletions client/package-lock.json
View file

Large diffs are not rendered by default.

7 changes: 1 addition & 6 deletions client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,13 @@
"private": true,
"version": "0.0.0",
"type": "module",
"homepage": "https://floppydoval.github.io/languageGO",
"scripts": {
"start": "vite",
"dev": "vite",
"test": "npm run test:unit && npm run test:e2e",
"test:unit": "vitest run",
"test:e2e": "playwright test",
"build": "vite build",
"serve": "vite preview",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
"serve": "vite preview"
},
"dependencies": {
"@clerk/clerk-react": "^5.17.1",
Expand Down Expand Up @@ -50,7 +46,6 @@
"@vitejs/plugin-react": "^3.1.0",
"cross-env": "^7.0.3",
"eslint": "^8.15.0",
"gh-pages": "^6.2.0",
"playwright": "^1.39.0",
"sass": "^1.81.0",
"typescript": "^4.9.3",
Expand Down
6 changes: 2 additions & 4 deletions client/src/components/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import LearnPage from "../components/pages/LearnPage";
import HomePage from "../components/pages/Homepage";
import HomePage from "../components/pages/HomePage";
import PracticePage from "../components/pages/PracticePage";
import LeaderBoard from "../components/pages/LeaderBoard";
import ResumePage from "../components/pages/ResumePage";


const App = () => {
return (
Expand All @@ -16,8 +16,6 @@ const App = () => {
<Route path="/learnPage" element={<LearnPage />} />
{/* LeaderBoard route */}
<Route path="/leaderBoard" element={<LeaderBoard />} />
{/* ResumePage route */}
<Route path="/resume" element={<ResumePage />} />
{/* PracticePage route */}
<Route path="/practicePage/:level" Component={PracticePage} />
</Routes>
Expand Down
248 changes: 131 additions & 117 deletions client/src/components/pages/HomePage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,58 @@
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import {
SignIn,
SignedIn,
SignedOut,
SignInButton,
SignOutButton,
UserButton,
useUser,
} from "@clerk/clerk-react";
import styles from "../../styles/HomePage.module.scss";
import { idText } from "typescript";

/**
* HomePage component - The main landing page for LanguageGo.
* This component displays the platform's branding, introduction, and options to sign in or start learning.
*/


const HomePage = () => {


const [bool, setBool] = useState<boolean>(true);
const [userTag, setUserTag] = useState<string>("");
const [userScore, setUserScore] = useState<string>();
const [userTag, setUserTag] = useState<string>("");
const [showLevelMenu, setShowLevelMenu] = useState(false);

let user = useUser().user;
const [userScore, setUserScore] = useState(0);
const [numSessions, setNumsessions] = useState(0);
const user = useUser().user;

console.log('User:', user);
// useEffect(() => {
// const fetchUserScore = async () => {
// if (user?.id) {
// const response = await fetch(`http://localhost:3232/getScore?userid=${user.id}`);
// const result = await response.json();

// if (result.score && result.score[0]) {
// setUserScore(result.score[0].score || 0);
// }
// }
// };

// fetchUserScore();
// }, [user?.id]);

async function getUserScore(){
console.log(user);
//const f = user.user?.id
//console.log(user?.id);
if(user != null){
const userData = await fetch("http://localhost:3232/getScore?userid=" + user?.id);
console.log(user);
const userScore = await userData.json();
setUserScore(userScore.score[0].score);
console.log(userScore.score[0]);
useEffect(() => {
const fetchUserStats = async () => {
if (user?.id) {
// Fetch score
const scoreResponse = await fetch(`http://localhost:3232/getScore?userid=${user.id}`);
const scoreResult = await scoreResponse.json();
if (scoreResult.score && scoreResult.score[0]) {
setUserScore(scoreResult.score[0].score || 0);
}
// Fetch session
if (scoreResult.score && scoreResult.score[0]) {
setNumsessions(scoreResult.score[0].sessions || 0);
}
}
}
// const fetchUserScore = async (): Promise<number> => {
};

fetchUserStats();
}, [user?.id]);

// if(user != null && bool){
// setBool(false);
// const userData = await fetch("http://localhost:3232/getScore?userid=" + user?.id);
// console.log(user);
// const userScore = await userData.json();
// setUserScore(userScore.score[0].score);
// console.log(userScore.score[0]);
// }
// }

return (

<div>
<div className={styles.flagBar}>
<img
Expand Down Expand Up @@ -88,71 +87,88 @@ const HomePage = () => {
/>
</div>

<h1
className={styles.header}
aria-label="Welcome to LanguageGo!"
>
Welcome to LanguageGo!
<h1 className={styles.header} aria-label="Welcome to LanguageGo!">
Welcome to LanguageGo!
</h1>

<h3
className={styles.slogan}
aria-label="Platform Slogan"
>
The Best Way to Practice Typing in a New Language
</h3>

<p
className={styles.description}
aria-label="Platform description"
>
Our platform helps you learn how to type in new languages quickly and
effectively. By providing interactive lessons and practice exercises, we
focus on building muscle memory for typing different alphabets. Whether
you're learning Hangul, Arabic, or any other script, you'll be able to
practice typing in a new language and improve your speed and accuracy
over time.
</p>

<div className="videoandstats">
<video
width="600"
loop
autoPlay
muted
aria-label="Demo Video"
className={styles.video}
>
<source src="/demo.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<SignedIn>
<SignedOut>
{/* Only show these sections when the user is signed out */}
<h3 className={styles.slogan} aria-label="Platform Slogan">
The Best Way to Practice Typing in a New Language
</h3>
<p className={styles.description} aria-label="Platform description">
Our platform helps you learn how to type in new languages quickly and
effectively. By providing interactive lessons and practice exercises,
we focus on building muscle memory for typing different alphabets.
Whether you're learning Hangul, Arabic, or any other script, you'll be
able to practice typing in a new language and improve your speed and
accuracy over time.
</p>
<div className="videoandstats">
<video
width="600"
loop
autoPlay
muted
aria-label="Demo Video"
className={styles.video}
>
<source src="/demo.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</SignedOut>

<p className={styles.description}>If you want your score to be displayed on the Leaderboard, enter or update your User Tag!</p>

<input className={styles.inputBox}
type="text"
value={userTag}
onChange={(e) => setUserTag(e.target.value)}
placeholder="Enter Here!"
onKeyPress={async (e) => {
if (e.key === 'Enter') {
setUserTag("")
await fetch("http://localhost:3232/updateTag?tag="+ userTag +"&userid=" + user?.id)
}
}}
<SignedIn>
{/* Only show this input section when the user is signed in */}
<div className={styles.inputSection}>
<p className={styles.description}>
If you want your score to be displayed on the Leaderboard, enter or
update your User Tag!
</p>
<input
className={styles.inputBox}
type="text"
value={userTag}
onChange={(e) => setUserTag(e.target.value)}
placeholder="Enter Here!"
onKeyPress={async (e) => {
if (e.key === "Enter") {
setUserTag("");
await fetch(
`http://localhost:3232/updateTag?tag=${userTag}&userid=${user?.id}`
);
}
}}
/>
</SignedIn>
</div>
{/* <Dashboard accuracy={accuracy} numSessions={numSessions} /> */}
<div className={styles.table}>
<table>
<thead>
<tr>
<th colspan="2">Dashboard</th>
</tr>
</thead>
<tbody>
<tr>
<td>Number of Sessions</td>
<td>{numSessions}</td>
</tr>
<tr>
<td>Score</td>
<td>{userScore}</td>
</tr>
</tbody>
</table>
</div>

</SignedIn>

<div className={styles.buttonContainer}>
<SignedOut>
<SignInButton>
<Link to="/">
<button
aria-label="Sign In Button"
className={styles.button}
>
<button aria-label="Sign In Button" className={styles.button}>
Sign In
</button>
</Link>
Expand All @@ -161,10 +177,7 @@ const HomePage = () => {
<SignedIn>
<SignOutButton>
<Link to="/">
<button
aria-label="Sign Out Button"
className={styles.button}
>
<button aria-label="Sign Out Button" className={styles.button}>
Sign Out
</button>
</Link>
Expand All @@ -187,28 +200,29 @@ const HomePage = () => {
</button>
</Link>
<div className={styles.levelDropdown}>
<button
className={styles.button}
onClick={() => setShowLevelMenu(!showLevelMenu)}
aria-label="Select Practice Level"
>
Practice Mode
</button>
{showLevelMenu && (
<div className={styles.dropdownMenu}>
<Link to="/practicePage/beginner">
<button className={styles.levelButton}>Beginner</button>
</Link>
<Link to="/practicePage/intermediate">
<button className={styles.levelButton}>Intermediate</button>
</Link>
<Link to="/practicePage/advanced">
<button className={styles.levelButton}>Advanced</button>
</Link>
</div>
<button
className={styles.button}
onClick={() => setShowLevelMenu(!showLevelMenu)}
aria-label="Select Practice Level"
>
Practice Mode
</button>
{showLevelMenu && (
<div className={styles.dropdownMenu}>
<Link to="/practicePage/beginner">
<button className={styles.levelButton}>Beginner</button>
</Link>
<Link to="/practicePage/intermediate">
<button className={styles.levelButton}>Intermediate</button>
</Link>
<Link to="/practicePage/advanced">
<button className={styles.levelButton}>Advanced</button>
</Link>
</div>
)}
</div>
</div>

</div>
);
};
Expand Down
14 changes: 1 addition & 13 deletions client/src/components/pages/LeaderBoard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,6 @@ const LeaderBoard = () => {
}
}

// let users: Map<string, Object>[] = [];
// let map1: Map<string, Object> = new Map();
// map1.set("score", 10);
// map1.set("userid", 999);
// let map2: Map<string, Object> = new Map();
// map2.set("score", 20);
// let map3: Map<string, Object> = new Map();
// map3.set("score", 5);
// let map4: Map<string, Object> = new Map();
// map4.set("score", 15);
// users.push(map1,map2,map3,map4);
// console.log(users);

// Sort the users list based on the score
users.sort((a, b) => {
Expand All @@ -57,7 +45,7 @@ const LeaderBoard = () => {
style={{
padding: "10px 15px",
marginTop: "0px",
marginLeft: "1340px",
marginLeft: "0wh",
backgroundColor: "rgba(160, 222, 68, 0.271)",
font: "Apple SD Gothic Neo",
borderRadius: "30px",
Expand Down
Loading

0 comments on commit b5fc40e

Please sign in to comment.