- {teamPoints == null || teamName == null ? (
-
- Redirecting to Companion...
-
- ) : (
- <>
-
- Team Dashboard
-
-
- {/* Flex container for the Team Name and Current Points */}
-
+
-
- Team Name:
-
-
- {teamName}
-
-
- Current Points:
-
-
- {teamPoints}
-
-
-
+
+
+ );
+};
+
+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 (
+ <>
+ {" "}
+
- {question}
-
- handleAnswerChange(index, e.target.value)}
- style={{
- marginTop: "10px"
- }}
- />
-
-
- ));
- };
+import DataverseLogo from "../../../../../assets/2024/dataverse/Dataverse.png";
+import TimerDonut from "./Timer";
+import Progress from "./Progress";
+import QuizRoom from "./QuizRoom";
+
+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 LeftHeader = ({ teamName, teamPoints }) => {
return (
-
-
- Welcome to Quiz Room {roomNumber}
+
+ 
+
+ DATA
- {renderQuiz()}
-
-
+
+ CHALLENGE
+
+
);
};
const buttonCardStyle = {
+ width: "315px",
margin: "10px",
marginBottom: "200px",
padding: "25px 50px",
- fontSize: "18px",
+ 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: "400px", // Increased height to make the button taller
+ 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
+ textAlign: "center" // Center text horizontally
};
-const button1Style = {
- ...buttonCardStyle,
- transform: "rotate(-30deg) translateY(100px)", // Start button 1 lower by 100px
-};
-
-const button3Style = {
- ...buttonCardStyle,
- transform: "rotate(30deg) translateY(100px)", // Start button 3 lower by 100px
-};
-
-const button2Style = {
- ...buttonCardStyle,
- opacity: 1, // Normal opacity for button 2
-};
-
-const QuizDashboard = () => {
+const QuizDashboard = ({ teamName, teamPoints, startTime, endTime }) => {
const [selectedRoom, setSelectedRoom] = useState(null);
const renderContent = () => {
@@ -180,41 +124,72 @@ const QuizDashboard = () => {
}
return (
-
+
+
+ Team
+
+
+ {teamName}
+
+
+
+
+ Points
+
+
+ {teamPoints}
+
+
+
-
- Quizzes
-
-
- Select a quiz room to begin:
-
-
-
-