Routing and Cheese

webapp/package.json

@@ -20,7 +20,9 @@
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",
+    "react-dice-complete": "^2.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",

webapp/src/App.tsx

@@ -3,6 +3,10 @@ import { loginWithToken } from './services/auth-service';
 import Authentication from './components/auth/Authentication';
 import { useUserStore } from './stores/user-store';
 import { Home } from './components/general/Home';
+import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
+import { Nav } from './components/general/Nav';
+import { SimpleNav } from './components/general/SimpleNav';
+import { TriviaGame } from './components/Game/Trivia/TriviaGame';
 
 function App() {
 
@@ -16,7 +20,16 @@ function App() {
     return <Authentication/>
   }
   else {
-    return <Home />
+
+    return (
+      <Router>
+        <SimpleNav />
+        <Routes>
+          <Route path="/" element={<Home/>} />
+          <Route path="trivia" element={<TriviaGame/>} /> 
+        </Routes>
+      </Router>
+    )
   }
 
 }

webapp/src/components/Game/Trivia/Cheese.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+export type props = {
+    showBlue: boolean,
+    showGreen: boolean,
+    showYellow: boolean,
+    showPink: boolean,
+    showCyan: boolean,
+}
+
+export const Cheese = (props : props) => {
+    console.log(props);
+  return (
+      <div className="caja-quesitos ">
+
+        <div className="caja">
+            {props.showBlue && <div className="quesito-azul"></div>}
+            {props.showGreen && <div className="quesito-verde"></div>}
+            {props.showYellow && <div className="quesito-amarillo"></div>}
+            {props.showPink && <div className="quesito-rosa"></div>}
+            {props.showCyan && <div className="quesito-cian"></div>}
+
+        </div>
+
+    </div>
+
+  );
+
+}

webapp/src/components/Game/Trivia/Dice.tsx

@@ -0,0 +1,33 @@
+import React, { useRef } from 'react'
+import ReactDice, { ReactDiceRef } from 'react-dice-complete'
+
+type props = {
+    setDiceResult: (diceResult: number) => void
+}
+
+
+export const Dice = (props:props) => {
+
+  const reactDice = useRef<ReactDiceRef>(null)
+
+  const rollDone = (totalValue: number, values: number[]) => {
+
+    props.setDiceResult(totalValue)
+  }
+
+  const rollAll = () => {
+    reactDice.current?.rollAll()
+  }
+
+  return (
+    <ReactDice
+      numDice={1}
+      ref={reactDice}
+      rollDone={rollDone}
+      defaultRoll={6}
+      faceColor='#00c896'
+      dotColor='#f2ecff'
+
+    />
+  )
+}

webapp/src/components/Game/Trivia/TriviaGame.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Cheese } from './Cheese';
+import { useState } from 'react';
+import { Dice } from './Dice';
+
+
+export const TriviaGame = () => {
+
+  const[showBlue, setShowBlue] = useState(true);
+  const[showGreen, setShowGreen] = useState(true);
+  const[showYellow, setShowYellowCheese] = useState(true);
+  const[showPink, setShowPinkCheese] = useState(true);
+  const[showCyan, setShowCyanCheese] = useState(true);
+
+  const[diceResult, setDiceResult] = useState(0)
+
+
+  const getCategory = (diceResult: number) => {
+    if (diceResult === 1 || diceResult === 2) {
+      return 'Science';
+    }
+    if (diceResult === 3 || diceResult === 4) {
+      return 'History';
+    }
+    if (diceResult === 5 || diceResult === 6) {
+      return 'Geography';
+    }
+    return 'Science';
+  }
+
+
+  return (
+    <div className='p-5 gap-8 flex justify-start items-start flex-col h-full w-ful'>
+      <div className='flex justify-start gap-4 items-center'>
+      <Cheese 
+        showBlue={showBlue}
+        showGreen={showGreen}
+        showYellow={showYellow}
+        showPink={showPink}
+        showCyan={showCyan}
+      />
+      <button onClick={() => setShowBlue(!showBlue)} className='bg-blue-500 text-white p-2 rounded-md'>Toggle Blue</button>
+      <button onClick={() => setShowGreen(!showGreen)} className='bg-green-500 text-white p-2 rounded-md'>Toggle Green</button>
+      <button onClick={() => setShowYellowCheese(!showYellow)} className='bg-yellow-500 text-white p-2 rounded-md'>Toggle Yellow</button>
+      <button onClick={() => setShowPinkCheese(!showPink)} className='bg-pink-500 text-white p-2 rounded-md'>Toggle Pink</button>
+      <button onClick={() => setShowCyanCheese(!showCyan)} className='bg-cyan-500 text-white p-2 rounded-md'>Toggle Cyan</button>
+      </div>
+
+      <Dice setDiceResult={setDiceResult} />
+
+
+        <h1 className='text-text text-2xl'>Category: {getCategory(diceResult)}</h1>
+
+
+
+
+    </div>
+  );
+
+}
+

webapp/src/components/general/Home.tsx

@@ -4,6 +4,7 @@ import Game from "../Game/Game";
 import { useGameQuestions, usePlayingState, useShowCancellingDialog } from "../../stores/playing-store";
 import { Button } from "../ui/button";
 import { AlertDialog, AlertDialogPortal, AlertDialogTrigger,AlertDialogOverlay,AlertDialogContent } from "../ui/alert-dialog";
+import { Link } from "react-router-dom";
 
 
 
@@ -16,11 +17,11 @@ export const Home = () => {
         usePlayingState.getState().startPlaying();
       };
 
-    return (<div className="flex flex-col h-full">
-        <Nav />
+    return (<div className="flex flex-col h-full border-red-300">
         {isPlaying ? <Game /> : (
-        <div className="flex h-full justify-center items-center"> 
+        <div className="flex flex-col gap-10 h-full justify-center items-center"> 
             <Button className="w-2/5 h-24 text-4xl" onClick={() => handleStartPlaying()}>Start Game!</Button>
+            <Link className={"bg-primary text-text rounded-md text-center justify-center w-2/5 h-24 text-4xl"} to={`/trivia`}>Trivia Game</Link>
         </div>
         )}
     <AlertDialog open={showDialog}>

webapp/src/components/general/SimpleNav.tsx

@@ -0,0 +1,35 @@
+import { handleShowDialog, usePlayingState, useStats } from "../../stores/playing-store";
+import { logout, getQuestionsAnswered, getCorrectlyAnsweredQuestions } from "../../services/auth-service";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { Button } from "../ui/button";
+import React from "react";
+import { useUserStore } from "../../stores/user-store";
+import { Link } from "react-router-dom";
+
+export const SimpleNav = () => {
+  let username : string = useUserStore(state => state.user?.username!);
+
+  const getLinkStyle = ():string => {
+    return "text-text text-sm font-bold hover:text-primary transition-colors duration-300 ease-in-out"
+  } 
+
+  return (
+    <div className="aspect-square h-12 px-5 py-3 flex items-center w-full justify-between border-b ">
+      <div className="flex items-center gap-5 ">
+      <Avatar className="w-9 h-9 rounded-full">
+        <AvatarImage src="https://pbs.twimg.com/media/Frq7CQ-WwAEnXzh?format=jpg&name=large" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+      <div className="flex items-center gap-2 text-text text-sm font-thin ">
+      <h2 className="font-bold">{username}</h2>
+
+      </div>
+      </div>
+      <div className="flex gap-5">
+        <Link className={getLinkStyle()} to={`/`}>Home</Link>
+        <Link className={getLinkStyle()} to={`/logout`}>Logout</Link>
+      </div>
+    </div>
+
+  );
+};