diff --git a/src/assets/font/Audiowide-Regular.ttf b/src/assets/font/Audiowide-Regular.ttf new file mode 100644 index 00000000..348817d5 Binary files /dev/null and b/src/assets/font/Audiowide-Regular.ttf differ diff --git a/src/index.scss b/src/index.scss index 852bb1fb..f120975a 100644 --- a/src/index.scss +++ b/src/index.scss @@ -75,6 +75,14 @@ font-display: auto; } +@font-face { + font-family: 'Audiowide'; + src: url('./assets/font/Audiowide-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + .content { padding-top: 14px; margin-left: 110px; diff --git a/src/pages/public/Companion/components/dataverse/Dashboard.js b/src/pages/public/Companion/components/dataverse/Dashboard.js index 01cc3eba..c69506f0 100644 --- a/src/pages/public/Companion/components/dataverse/Dashboard.js +++ b/src/pages/public/Companion/components/dataverse/Dashboard.js @@ -4,52 +4,12 @@ import React, { import { useLocation, useHistory } from "react-router-dom"; -import { - Typography -} from "@material-ui/core"; import Quiz from "./Quiz"; -import Leaderboard from "./Leaderboard"; -const useStyles = { - root: { - position: "relative", - minHeight: "180vh", - background: "linear-gradient(135deg, #3C1F62, #5A3D89, #2F3C53, #121C2C)", - color: "white", - padding: "20px", - textAlign: "center", // Centering the content - }, - heading: { - fontSize: "6rem", // Making the main heading bigger - fontWeight: "bold", // Making the text bold - marginTop: "40px", // Adding space above the heading - }, - subheading: { - fontSize: "1.5rem", // Increasing the font size for subheadings - fontWeight: "500", // Optional: make the subheading a bit lighter - }, - text: { - fontSize: "1.2rem", // Make other text a bit larger - }, - infoRow: { - display: "flex", // Align items in a row - justifyContent: "center", // Center the row - gap: "30px", // Space between the items - marginBottom: "20px", // Space below the row - }, - label: { - color: "#B0B0B0", // Gray color for labels - fontWeight: "500", // Optional: make labels a bit lighter - }, - value: { - background: "linear-gradient(to bottom, #FFFFFF, #7B7DFF)", // Gradient from white to light purple - WebkitBackgroundClip: "text", // Clip the background to the text - color: "transparent", // Make the text color transparent so the gradient shows through - fontWeight: "700", // Optional: make values bold - }, -}; const Dashboard = () => { + const startTime = new Date(); + const endTime = new Date(startTime.getTime() + 5 * 60000); const location = useLocation(); const history = useHistory(); const { @@ -64,32 +24,13 @@ const Dashboard = () => { }, [teamPoints, teamName, history]); return ( -
- {!teamPoints || !teamName ? ( - Redirecting to Companion... - ) : ( - <> - Team Dashboard - {/* Flex container for the Team Name and Current Points */} -
- - Team Name: - - - {teamName} - - - Current Points: - - - {teamPoints} - -
- - - - )} -
+ ); }; diff --git a/src/pages/public/Companion/components/dataverse/Leaderboard.js b/src/pages/public/Companion/components/dataverse/Leaderboard.js index 2481d408..c08737dc 100644 --- a/src/pages/public/Companion/components/dataverse/Leaderboard.js +++ b/src/pages/public/Companion/components/dataverse/Leaderboard.js @@ -1,64 +1,236 @@ -import React from "react"; -import { Box, Typography, Button } from "@material-ui/core"; +import React, { useState } from "react"; +import { motion, AnimatePresence } from "framer-motion"; +import { ThemeProvider, createTheme } from "@mui/material/styles"; +import { + CssBaseline, + Box, + Typography, + List, + ListItem, + Button +} from "@mui/material"; +import EmojiEventsIcon from "@mui/icons-material/EmojiEvents"; +import MilitaryTechIcon from "@mui/icons-material/MilitaryTech"; +import WorkspacePremiumIcon from "@mui/icons-material/WorkspacePremium"; + +const theme = createTheme({ + components: { + MuiCssBaseline: { + styleOverrides: { + body: { + background: "linear-gradient(135deg, #3C1F62, #5A3D89, #2F3C53, #121C2C)", + minHeight: "100vh", + margin: 0, + }, + }, + }, + }, + palette: { + primary: { + main: "#8b5cf6" + }, + secondary: { + main: "#6366f1" + } + }, +}); + +function Leaderboard({ teams: initialTeams }) { + const [teams, setTeams] = useState(initialTeams); + + const updateRandomTeams = () => { + setTeams((prevTeams) => { + const newTeams = [...prevTeams]; + const indices = new Set(); + while (indices.size < 2) { + indices.add(Math.floor(Math.random() * newTeams.length)); + } + + indices.forEach((index) => { + newTeams[index] = { + ...newTeams[index], + score: Math.floor(Math.random() * 150) + }; + }); + + return newTeams.sort((a, b) => b.score - a.score); + }); + }; + + const getRankIcon = (index) => { + switch (index) { + case 0: + return ; + case 1: + return ; + case 2: + return ; + default: + return null; + } + }; -const LeaderboardRow = ({ placement, teamName, score, isTeam }) => { return ( - {placement} - {teamName} - {score} + + + Leaderboard + + + + + {teams.map((team, index) => ( + + + + + + {getRankIcon(index) || index + 1} + + + + + {team.name} + + + {team.score} + + + + ))} + + + + + ); -}; +} + +function GlobalLeaderboardExample() { + const initialTeams = [ + { id: "1", name: "Team Alpha", score: 100 }, + { id: "2", name: "Team Beta", score: 85 }, + { id: "3", name: "Team Gamma", score: 95 }, + { id: "4", name: "Team Delta", score: 70 }, + { id: "5", name: "Team Epsilon", score: 110 }, + { id: "6", name: "Team Zeta", score: 90 }, + { id: "7", name: "Team Eta", score: 75 }, + { id: "8", name: "Team Theta", score: 105 }, + { id: "9", name: "Team Iota", score: 80 }, + { id: "10", name: "Team Omega", score: 95 }, + ]; -const Leaderboard = ({ teamName, teamScore }) => { return ( -
- - Leaderboard - - - Check out how your team is doing: - + + + + + + + ); +} -
- - - - ... - - - -
+function LocalLeaderboardExample() { + const initialTeams = [ + { id: "1", name: "Team Alpha", score: 100 }, + { id: "2", name: "Team Beta", score: 85 }, + { id: "3", name: "Team Gamma", score: 95 }, + { id: "4", name: "Team Delta", score: 70 }, + { id: "5", name: "Team Epsilon", score: 110 }, + { id: "6", name: "Team Zeta", score: 90 }, + { id: "7", name: "Team Eta", score: 75 }, + { id: "8", name: "Team Theta", score: 105 }, + { id: "9", name: "Team Iota", score: 80 }, + { id: "10", name: "Team Omega", score: 95 }, + ]; - -
+ return ( + + + + + + ); -}; +} -export default Leaderboard; +export { GlobalLeaderboardExample, LocalLeaderboardExample }; \ No newline at end of file diff --git a/src/pages/public/Companion/components/dataverse/Progress.js b/src/pages/public/Companion/components/dataverse/Progress.js new file mode 100644 index 00000000..968cf8e8 --- /dev/null +++ b/src/pages/public/Companion/components/dataverse/Progress.js @@ -0,0 +1,257 @@ +import React, { useState, useRef, useEffect } from "react"; +import { Box, IconButton, TextField } from "@mui/material"; +import ArrowForwardIcon from "@mui/icons-material/ArrowForward"; + +const CharacterInput = ({ onSubmit, numChars = 21 }) => { + const [chars, setChars] = useState(Array(numChars).fill("")); // Initialize with empty strings + const [isTyping, setIsTyping] = useState(false); // To track if any character is typed + const inputRefs = useRef([]); + + const placeholderText = "final question answer"; // Your placeholder phrase + + useEffect(() => { + // Dynamically adjust the number of refs based on numChars + inputRefs.current = inputRefs.current.slice(0, numChars); + }, [numChars]); + + const handleChange = (index, value) => { + if (value.length <= 1) { + const newChars = [...chars]; + newChars[index] = value; // Set the current character + setChars(newChars); + + // Set isTyping to true when any input is typed + if (!isTyping && value !== "") { + setIsTyping(true); + } + + // Automatically focus on the next input if the current one is filled + if (index < numChars - 1 && value.length === 1) { + inputRefs.current[index + 1]?.focus(); + } + + // Check if all characters are cleared, reset isTyping to false + if (newChars.every((char) => char === "")) { + setIsTyping(false); + } + } + }; + + const handleKeyDown = (index, e) => { + if (e.key === "Backspace") { + if (chars[index] === "" && index > 0) { + inputRefs.current[index - 1]?.focus(); + } else { + const newChars = [...chars]; + newChars[index] = ""; // Clear the current character + setChars(newChars); + } + } else if (e.key === "ArrowLeft" && index > 0) { + inputRefs.current[index - 1]?.focus(); + } else if (e.key === "ArrowRight" && index < numChars - 1) { + inputRefs.current[index + 1]?.focus(); + } + }; + + const handleSubmit = () => { + const input = chars.join(""); + if (input.length === numChars) { + onSubmit(input); + setChars(Array(numChars).fill("")); // Reset the input fields + setIsTyping(false); // Reset typing state + inputRefs.current[0]?.focus(); // Focus the first input + } + }; + + return ( + + + {chars.map((char, index) => { + // If any input is typed, remove all placeholders; restore if all are cleared + const placeholderChar = isTyping && !chars.every((char) => char === "") + ? "" + : placeholderText[index] || ""; + + return ( + (inputRefs.current[index] = el)} + value={char} + onChange={(e) => handleChange(index, e.target.value)} + onKeyDown={(e) => handleKeyDown(index, e)} + variant="standard" + autoComplete="off" // Disable autofill + inputProps={{ + maxLength: 1, + style: { + width: "25px", + textAlign: "center", + fontFamily: "monospace", + fontSize: "1.5rem", + padding: "2px 0px", + color: "white", + }, + }} + placeholder={placeholderChar} // Set the placeholder as the corresponding character + sx={{ + width: "25px", + "& .MuiInput-underline:before": { + borderBottomWidth: "2px", + borderBottomColor: char ? "#ffffff" : "#AAAAAA", + }, + "& .MuiInput-underline:hover:before": { + borderBottomColor: "#ffffff", + }, + "& .MuiInput-underline:after": { + borderBottomColor: "#ffffff", + }, + }} + /> + ); + })} + char === "")} + sx={{ + color: "#ffffff", + "&:hover": { + backgroundColor: "#ffffff", + color: "#000000", + }, + marginLeft: 2, + }} + > + + + + + ); + }; + + + + +const ProgressBar = ({ teamScore, maxScore }) => { + const percentage = (teamScore / maxScore) * 100; + + return ( +
+
+
+ ); +}; + +const Percentage = ({ teamScore, maxScore }) => { + const percentage = Math.round((teamScore / maxScore) * 100); // Round to the nearest percent + + return ( +
+ + {percentage}% + + + complete + +
+ ); +}; + +const Progress = ({ teamScore, maxScore, onCharacterSubmit }) => { + return ( + <> + {" "} + + {/* Percentage on the left */} + + + + + {/* ProgressBar and CharacterInput stacked vertically */} + + + + + + {/* White Divider Line */} + + + ); +}; + +export default Progress; diff --git a/src/pages/public/Companion/components/dataverse/Quiz.js b/src/pages/public/Companion/components/dataverse/Quiz.js index f6e27b03..f96d9fbf 100644 --- a/src/pages/public/Companion/components/dataverse/Quiz.js +++ b/src/pages/public/Companion/components/dataverse/Quiz.js @@ -2,90 +2,211 @@ import React, { useState } from "react"; import { - Typography, Button + Typography, Button, TextField, FormControl } from "@material-ui/core"; +import DataverseLogo from "../../../../../assets/2024/dataverse/Dataverse.png"; +import TimerDonut from "./Timer"; +import Progress from "./Progress"; import QuizRoom from "./QuizRoom"; -const buttonCardStyle = { - margin: "10px", - padding: "25px 50px", - fontSize: "18px", - backgroundColor: "rgba(255, 255, 255, 0.05)", - borderColor: "white", - color: "white", - height: "400px", - transition: "transform 0.3s ease, translateY 0.3s ease, opacity 0.3s ease", - display: "inline-block", - textAlign: "center", -}; - -const button1Style = { - ...buttonCardStyle, - transform: "rotate(-30deg) translateY(100px)", +const useStyles = { + root: { + position: "relative", + minHeight: "100vh", + background: "linear-gradient(135deg, #0d1b61, #0a143b, #081027, #000000)", + color: "white", + padding: "20px", + textAlign: "center" + }, + heading: { + fontSize: "3rem", + fontWeight: "bold", + marginTop: "0px", + letterSpacing: "0.2em", + textShadow: "0px 0px 4px white" + }, + subheading: { + fontSize: "1.5rem", // Increasing the font size for subheadings + fontWeight: "500" // Optional: make the subheading a bit lighter + }, + text: { + fontSize: "1.2rem" // Make other text a bit larger + }, + infoRow: { + display: "flex", // Align items in a row + width: "200px", // Fixed width for the row + justifyContent: "space-between", // Distribute space between items + marginBottom: "20px", // Space below the row + marginTop: "20px" + }, + label: { + fontSize: "1rem", // Make other text a bit larger + color: "#FFFFFF", // Gray color for labels + fontWeight: "100" // Optional: make labels a bit lighter + }, + value: { + background: "#FFFFFF", // Gradient from white to light purple + WebkitBackgroundClip: "text", // Clip the background to the text + color: "transparent", // Make the text color transparent so the gradient shows through + fontWeight: "700" // Optional: make values bold + } }; -const button3Style = { - ...buttonCardStyle, - transform: "rotate(30deg) translateY(100px)", +const LeftHeader = ({ + teamName, teamPoints +}) => { + return ( +
+ {"Dataverse"} + + DATA + + + CHALLENGE + +
+
+ + Team + + + {teamName} + +
+
+ + Points + + + {teamPoints} + +
+
+
+ ); }; -const button2Style = { - ...buttonCardStyle, - opacity: 1, +const buttonCardStyle = { + width: "315px", + margin: "10px", + marginBottom: "200px", + padding: "25px 50px", + fontSize: "20px", + fontFamily: "Audiowide", + backgroundColor: "rgba(255, 255, 255, 0.05)", // Transparent background with 10% opacity + borderColor: "white", // White borders + color: "white", // White text color + height: "300px", // Increased height to make the button taller + transition: "transform 0.3s ease, translateY 0.3s ease, opacity 0.3s ease", // Smooth transitions for transform and opacity + display: "inline-block", + textAlign: "center" // Center text horizontally }; const QuizDashboard = ({ - userRegistration + teamName, teamPoints, startTime, endTime, userRegistration }) => { const [selectedRoom, setSelectedRoom] = useState(null); - if (selectedRoom) { + const renderContent = () => { + if (selectedRoom) { + return ( + setSelectedRoom(null)} + userRegistration={userRegistration} + /> + ); + } + return ( - setSelectedRoom(null)} - userRegistration={userRegistration} - /> +
+
+ + +
+ +
+ + + +
+
); - } + }; - return ( -
- - Select a Quiz Room - - - - -
- ); + return
{renderContent()}
; }; export default QuizDashboard; diff --git a/src/pages/public/Companion/components/dataverse/QuizRoom.js b/src/pages/public/Companion/components/dataverse/QuizRoom.js index 4a6e8117..4132fe0d 100644 --- a/src/pages/public/Companion/components/dataverse/QuizRoom.js +++ b/src/pages/public/Companion/components/dataverse/QuizRoom.js @@ -2,60 +2,144 @@ import React, { useState } from "react"; import { - Typography, Button, TextField, FormControl + Typography, + Button, + TextField, + FormControl, + IconButton, + Grid, + Card, + CardContent } from "@material-ui/core"; +import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import { fetchBackend } from "utils"; -const quizData = { - 1: { - questions: [ - "What is the capital of France?", - "What is the largest country by area?", - "Who painted the Mona Lisa?", - "What is the smallest prime number?", - "What is the tallest mountain in the world?", - ], - correctAnswers: ["Paris", "Russia", "Leonardo da Vinci", "2", "Mount Everest"], - }, - 2: { - questions: [ - "Which planet is known as the Red Planet?", - "What gas do plants absorb from the atmosphere?", - "What is the chemical symbol for water?", - "Who developed the theory of relativity?", - "What is the speed of light?", - ], - correctAnswers: ["Mars", "Carbon dioxide", "H2O", "Albert Einstein", "299,792,458 m/s"], - }, - 3: { - questions: [ - "Who wrote 'To Kill a Mockingbird'?", - "What is the main language spoken in Brazil?", - "Who is known as the Father of Computers?", - "What is the hardest natural substance?", - "What is the boiling point of water in Celsius?", - ], - correctAnswers: ["Harper Lee", "Portuguese", "Charles Babbage", "Diamond", "100"], - }, -}; - const QuizRoom = ({ roomNumber, goBack, userRegistration }) => { - const [answers, setAnswers] = useState(Array(5).fill("")); // Store answers for 5 questions + const [answers, setAnswers] = useState(Array(5).fill("")); // Array to hold answers for 5 questions + const [selectedOptions, setSelectedOptions] = useState(Array(5).fill(null)); // To track selected options for multiple-choice questions + const [answerStatus, setAnswerStatus] = useState(Array(5).fill(null)); // To track the status of each question (null = not checked, 'correct' or 'incorrect') + + const quizData = { + 1: { + questions: [ + "Which player had the most rebounds in a single game?", + "Which of the following teams scored the most points?", + "Based on historical outcomes, if the Boston Celtics and Charlotte Hornets play against each other, who would you predict would win?", + "Which of the following attributes is most positively correlated with Total Points Scored?", + "What is this SQL query trying to do? \n\nSELECT player \nFROM NBA \nWHERE team = 'NYK' AND total_points >= 20" + ], + questionType: [ + "text", // Free text question + "multiple-choice", // Free text question + "multiple-choice", // Free text question + "multiple-choice", // Free text question + "multiple-choice" // Free text question + ], + correctAnswers: [ + "Victor Wembanyama", + "TOR", + "BOS", + "Field Goal Attempts", + "Retrieve all players who play for the New York Knicks and scored at least 20 points in a game" + ], + options: [ + [], + ["ATL", "TOR", "WAS"], + ["BOS", "CHO"], + ["Field Goal Attempts", "3 Pointer Attempts", "Free Throw Attempts"], + [ + "Retrieve all players who scored at least 20 points in a game", + "Retrieve the total points scored by New York Knicks players who scored more than 20 points in a game", + "Retrieve all players who play for the New York Knicks and scored at least 20 points in a game" + ] + ] // No multiple choice questions for this quiz + }, + 2: { + questions: [ + "Which planet is known as the Red Planet?", + "What gas do plants absorb from the atmosphere?", + "What is the chemical symbol for water?", + "Who developed the theory of relativity?", + "What is the speed of light?" + ], + questionType: [ + "multiple-choice", // Multiple choice question + "multiple-choice", // Multiple choice question + "text", // Free text question + "text", // Free text question + "text" // Free text question + ], + correctAnswers: [ + "Mars", + "Carbon dioxide", + "H2O", + "Albert Einstein", + "299,792,458 m/s" + ], + options: [ + ["Mars", "Earth", "Venus", "Jupiter"], + ["Oxygen", "Carbon dioxide", "Nitrogen", "Hydrogen"], + [], // No options for this text question + [], // No options for this text question + [] // No options for this text question + ] + }, + 3: { + questions: [ + "Which planet is known as the Red Planet?", + "What gas do plants absorb from the atmosphere?", + "What is the chemical symbol for water?", + "Who developed the theory of relativity?", + "What is the speed of light?" + ], + questionType: [ + "multiple-choice", // Multiple choice question + "multiple-choice", // Multiple choice question + "text", // Free text question + "text", // Free text question + "text" // Free text question + ], + correctAnswers: [ + "Mars", + "Carbon dioxide", + "H2O", + "Albert Einstein", + "299,792,458 m/s" + ], + options: [ + ["Mars", "Earth", "Venus", "Jupiter"], + ["Oxygen", "Carbon dioxide", "Nitrogen", "Hydrogen"], + [], // No options for this text question + [], // No options for this text question + [] // No options for this text question + ] + } + }; const handleAnswerChange = (index, value) => { - const updatedAnswers = [...answers]; - updatedAnswers[index] = value; - setAnswers(updatedAnswers); + const newAnswers = [...answers]; + newAnswers[index] = value; + setAnswers(newAnswers); + }; + + const handleMultipleChoiceAnswer = (index, option) => { + const newSelectedOptions = [...selectedOptions]; + newSelectedOptions[index] = option; + setSelectedOptions(newSelectedOptions); + const newAnswers = [...answers]; + newAnswers[index] = option; + setAnswers(newAnswers); }; const checkAnswers = async () => { const { correctAnswers, questions } = quizData[roomNumber]; + const newAnswerStatus = [...answerStatus]; // Copy the current answerStatus array try { const response = await fetchBackend( @@ -77,6 +161,9 @@ const QuizRoom = ({ const question = questions[index]; const isCorrect = answer.trim().toLowerCase() === correctAnswers[index].trim().toLowerCase(); + // Update the status for this question + newAnswerStatus[index] = isCorrect ? "correct" : "incorrect"; + // Award points only if the question hasn't been answered correctly before if (isCorrect && !completedQuestions.includes(question)) { score += 1; @@ -84,6 +171,9 @@ const QuizRoom = ({ } }); + // Update the answerStatus state + setAnswerStatus(newAnswerStatus); + if (score > 0) { const updateResponse = await fetchBackend( "/team/points", @@ -97,7 +187,6 @@ const QuizRoom = ({ false ); - // NOTE: using the scannedQRs field to store already answered correctly questions const addQuestions = await fetchBackend( "/team/addQuestions", "put", @@ -109,10 +198,6 @@ const QuizRoom = ({ }, false ); - - alert(`Team points updated successfully: ${updateResponse.updatedPoints}`); - } else { - alert("No new points awarded :("); } } catch (error) { console.error("Error updating team points:", error); @@ -121,49 +206,142 @@ const QuizRoom = ({ }; + // Render the questions based on the room number + const renderQuiz = () => { + const { + questions, questionType, options + } = quizData[roomNumber]; + + return questions.map((question, index) => { + const questionStatus = answerStatus[index]; + const isCorrect = questionStatus === "correct"; + const isIncorrect = questionStatus === "incorrect"; + + return ( + + + + {question.split("\n").map((part, i) => ( + + {part} + {i < question.split("\n").length - 1 &&
} + + ))} + + + {questionType[index] === "multiple-choice" ? ( + + {options[index].map((option, i) => ( + + + + ))} + + ) : ( + + handleAnswerChange(index, e.target.value)} + style={{ + marginTop: "10px", + width: "100%" + }} + /> + + )} + + + ); + }); + }; + return ( -
- - Quiz Room {roomNumber} - - {quizData[roomNumber].questions.map((question, index) => ( -
- {question} - - handleAnswerChange(index, e.target.value)} - /> - -
- ))} - + + + + + Quiz {roomNumber} + + + {renderQuiz()} +
); diff --git a/src/pages/public/Companion/components/dataverse/Timer.js b/src/pages/public/Companion/components/dataverse/Timer.js new file mode 100644 index 00000000..a62093a4 --- /dev/null +++ b/src/pages/public/Companion/components/dataverse/Timer.js @@ -0,0 +1,102 @@ +import React, { useState, useEffect } from "react"; + +const TimerDonut = ({ startTime, endTime }) => { + const [timeLeft, setTimeLeft] = useState(0); + const totalDuration = endTime.getTime() - startTime.getTime(); + + useEffect(() => { + const timer = setInterval(() => { + const now = new Date(); + const difference = endTime.getTime() - now.getTime(); + setTimeLeft(Math.max(0, difference)); + }, 1000); + + return () => clearInterval(timer); + }, [endTime]); + + const progress = 1 - timeLeft / totalDuration; + const size = 100; + const strokeWidth = 10; + const center = size / 2; + const radius = center - strokeWidth / 2; + const circumference = 2 * Math.PI * radius; + + const getColor = () => { + if (progress < 0.5) return "#22c55e"; // Green + if (progress < 0.75) return "#eab308"; // Yellow + if (progress < 0.9) return "#f97316"; // Orange + return "#ef4444"; // Red + }; + + const minutes = Math.floor(timeLeft / 60000); + const seconds = Math.floor((timeLeft % 60000) / 1000); + + const containerStyle = { + position: "relative", + width: "100%", + height: "300px", + backgroundColor: "rgba(255, 255, 255, 0.1)", + backdropFilter: "blur(10px)", + borderRadius: "8px", + boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", + display: "flex", + alignItems: "center", + justifyContent: "center", + border: "1px solid white", // Added 2px white border + }; + + const svgStyle = { + width: "80%", + height: "80%", + }; + + const textStyle = { + position: "absolute", + inset: "0", + display: "flex", + alignItems: "center", + justifyContent: "center", + fontSize: "2rem", + fontWeight: "bold", + color: "white", + }; + + return ( +
+ + {/* Background Circle */} + + {/* Progress Circle with Smooth Animation */} + + +
+ {`${minutes.toString().padStart(2, "0")}:${seconds + .toString() + .padStart(2, "0")}`} +
+
+ ); +}; + +export default TimerDonut; diff --git a/src/pages/public/Companion/events/DataVerse2024.js b/src/pages/public/Companion/events/DataVerse2024.js index c2bda541..2e7aa1fc 100644 --- a/src/pages/public/Companion/events/DataVerse2024.js +++ b/src/pages/public/Companion/events/DataVerse2024.js @@ -148,6 +148,24 @@ const DataVerse2024 = (params) => { ) : ( Loading your team data... )} + + ) : ( + <> +
+ setAccessKey(e.target.value)} + /> + +
{userRegistration.applicationStatus !== "rejected" && ( { for any questions or concerns.
- ) : ( - <> -
- setAccessKey(e.target.value)} - /> - -
- )} ); diff --git a/src/router.js b/src/router.js index 33448b43..9e002128 100644 --- a/src/router.js +++ b/src/router.js @@ -26,9 +26,8 @@ import FormSuccess from "pages/public/RegistrationForms/FormSuccess"; import RegistrationForm from "pages/public/RegistrationForms"; import Companion from "pages/public/Companion"; import CompanionReset from "./pages/public/Companion/ResetPage"; -import Leaderboard from "pages/public/Companion/components/dataverse/Leaderboard"; import Dashboard from "pages/public/Companion/components/dataverse/Dashboard"; - +import { GlobalLeaderboardExample } from "pages/public/Companion/components/dataverse/Leaderboard"; // import Signup from '../pages/public/Signup' import EventsDashboard from "pages/public/EventsDashboard"; @@ -162,7 +161,7 @@ class Router extends Component { /> } /> } /> - } /> + } /> {/* ADMIN ROUTES */} {user && }