From 6d3df2b2c7264f2b87a9f2e8a640dac3518d36f9 Mon Sep 17 00:00:00 2001 From: Alberto-Guerra Date: Thu, 11 Apr 2024 18:12:28 +0200 Subject: [PATCH] Routing and Cheese --- webapp/package-lock.json | 77 +++++++++++++++++++ webapp/package.json | 2 + webapp/src/App.tsx | 15 +++- webapp/src/components/Game/Trivia/Cheese.tsx | 29 +++++++ webapp/src/components/Game/Trivia/Dice.tsx | 33 ++++++++ .../src/components/Game/Trivia/TriviaGame.tsx | 61 +++++++++++++++ webapp/src/components/general/Home.tsx | 7 +- webapp/src/components/general/SimpleNav.tsx | 35 +++++++++ webapp/src/index.css | 63 +++++++++++++++ 9 files changed, 318 insertions(+), 4 deletions(-) create mode 100644 webapp/src/components/Game/Trivia/Cheese.tsx create mode 100644 webapp/src/components/Game/Trivia/Dice.tsx create mode 100644 webapp/src/components/Game/Trivia/TriviaGame.tsx create mode 100644 webapp/src/components/general/SimpleNav.tsx diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 2a7c694..d143994 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -25,7 +25,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", @@ -5274,6 +5276,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -22298,6 +22308,15 @@ "node": ">=8" } }, + "node_modules/react-dice-complete": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/react-dice-complete/-/react-dice-complete-2.2.0.tgz", + "integrity": "sha512-FeTcao97mlXi0TXdtp5FqtnnL9R2KsGl6efJce1wR0D2RH1a89ven9o0Io5blFWDsNPNXbOoxxppW6QvqmIdkg==", + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -22373,6 +22392,36 @@ } } }, + "node_modules/react-router": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "dependencies": { + "@remix-run/router": "1.15.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "dependencies": { + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -31789,6 +31838,11 @@ "@babel/runtime": "^7.13.10" } }, + "@remix-run/router": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -44316,6 +44370,12 @@ } } }, + "react-dice-complete": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/react-dice-complete/-/react-dice-complete-2.2.0.tgz", + "integrity": "sha512-FeTcao97mlXi0TXdtp5FqtnnL9R2KsGl6efJce1wR0D2RH1a89ven9o0Io5blFWDsNPNXbOoxxppW6QvqmIdkg==", + "requires": {} + }, "react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -44361,6 +44421,23 @@ "tslib": "^2.0.0" } }, + "react-router": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "requires": { + "@remix-run/router": "1.15.3" + } + }, + "react-router-dom": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "requires": { + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/webapp/package.json b/webapp/package.json index baa1391..1accaa7 100644 --- a/webapp/package.json +++ b/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", diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index 1d53d36..e8a8f1b 100644 --- a/webapp/src/App.tsx +++ b/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 } else { - return + + return ( + + + + } /> + } /> + + + ) } } diff --git a/webapp/src/components/Game/Trivia/Cheese.tsx b/webapp/src/components/Game/Trivia/Cheese.tsx new file mode 100644 index 0000000..8c0d700 --- /dev/null +++ b/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 ( +
+ +
+ {props.showBlue &&
} + {props.showGreen &&
} + {props.showYellow &&
} + {props.showPink &&
} + {props.showCyan &&
} + +
+ +
+ + ); + +} \ No newline at end of file diff --git a/webapp/src/components/Game/Trivia/Dice.tsx b/webapp/src/components/Game/Trivia/Dice.tsx new file mode 100644 index 0000000..1cea138 --- /dev/null +++ b/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(null) + + const rollDone = (totalValue: number, values: number[]) => { + + props.setDiceResult(totalValue) + } + + const rollAll = () => { + reactDice.current?.rollAll() + } + + return ( + + ) +} \ No newline at end of file diff --git a/webapp/src/components/Game/Trivia/TriviaGame.tsx b/webapp/src/components/Game/Trivia/TriviaGame.tsx new file mode 100644 index 0000000..f9c3ce6 --- /dev/null +++ b/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 ( +
+
+ + + + + + +
+ + + + +

Category: {getCategory(diceResult)}

+ + + + +
+ ); + +} + diff --git a/webapp/src/components/general/Home.tsx b/webapp/src/components/general/Home.tsx index a1564ab..efa267d 100644 --- a/webapp/src/components/general/Home.tsx +++ b/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 (
-