generated from Arquisoft/wiq_0
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #248 from Arquisoft/feat/webapp/user-menu
Feat: changing the dashboard
- Loading branch information
Showing
26 changed files
with
573 additions
and
104 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React from "react"; | ||
| import PropTypes from 'prop-types'; | ||
| import { Button, Box } from "@chakra-ui/react"; | ||
| import { SettingsIcon } from '@chakra-ui/icons'; | ||
|
|
||
| const SettingsButton = ({ onClick, name }) => { | ||
| return ( | ||
| <Button | ||
| colorScheme="green" | ||
| variant="outline" | ||
| textAlign="center" | ||
| m="1em" | ||
| display="flex" | ||
| flexDirection="column" | ||
| alignItems="center" | ||
| size="lg" | ||
| height="4rem" | ||
| maxW={{ base: "100%", md: "calc(100% / 3 - 2em)" }} | ||
| onClick={onClick} | ||
| > | ||
| <SettingsIcon style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.5em' }} /> | ||
| <Box>{name}</Box> | ||
| </Button> | ||
| ); | ||
| } | ||
|
|
||
| SettingsButton.propTypes = { | ||
| onClick: PropTypes.func.isRequired, | ||
| name: PropTypes.string.isRequired | ||
| }; | ||
|
|
||
| export default SettingsButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { useNavigate } from "react-router-dom"; | ||
| import { | ||
| Box, Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, | ||
| DrawerHeader, DrawerBody, DrawerFooter, Button, Text, Flex, | ||
| NumberInput, NumberInputField, NumberInputStepper, | ||
| NumberIncrementStepper, NumberDecrementStepper | ||
| } from '@chakra-ui/react'; | ||
| import { newGame, gameCategories } from 'components/game/Game'; | ||
|
|
||
| const CustomGameMenu = ({ isOpen, onClose }) => { | ||
| const navigate = useNavigate(); | ||
| const [selectedCategories, setSelectedCategories] = useState([]); | ||
| const [rounds, setRounds] = useState(9); | ||
| const [time, setTime] = useState(20); | ||
| const [categories, setCategories] = useState([]); | ||
| const { t, i18n } = useTranslation(); | ||
|
|
||
| useEffect(() => { | ||
| async function fetchCategories() { | ||
| try { | ||
| let lang = i18n.language; | ||
| if (lang.includes("en")) | ||
| lang = "en"; | ||
| else if (lang.includes("es")) | ||
| lang = "es" | ||
| else | ||
| lang = "en"; | ||
| const categoriesData = await gameCategories(lang); | ||
| const formattedCategories = categoriesData.map(category => category.name); | ||
| setCategories(formattedCategories); | ||
| } catch (error) { | ||
| console.error("Error fetching game categories:", error); | ||
| } | ||
| } | ||
| fetchCategories(); | ||
| }, [i18n.language]); | ||
|
|
||
| const manageCategory = (category) => { | ||
| if (selectedCategories.includes(category)) { | ||
| setSelectedCategories(selectedCategories.filter(item => item !== category)); | ||
| } else { | ||
| setSelectedCategories([...selectedCategories, category]); | ||
| } | ||
| }; | ||
|
|
||
| const initializeCustomGameMode = async () => { | ||
| try { | ||
| let lang = i18n.language; | ||
| if (lang.includes("en")) | ||
| lang = "en"; | ||
| else if (lang.includes("es")) | ||
| lang = "es" | ||
| else | ||
| lang = "en"; | ||
|
|
||
| const gamemode = 'CUSTOM'; | ||
| let uppercaseCategories = selectedCategories.map(category => category.toUpperCase()); | ||
| if (uppercaseCategories.length === 0) | ||
| uppercaseCategories = ["GEOGRAPHY", "SPORTS", "MUSIC", "ART", "VIDEOGAMES"]; | ||
| const customGameDto = { | ||
| rounds: rounds, | ||
| categories: uppercaseCategories, | ||
| round_duration: time | ||
|
|
||
| } | ||
| const newGameResponse = await newGame(lang, gamemode, customGameDto); | ||
| if (newGameResponse) | ||
| navigate("/dashboard/game"); | ||
| } catch (error) { | ||
| console.error("Error initializing game:", error); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Drawer isOpen={isOpen} placement="right" onClose={onClose}> | ||
| <DrawerOverlay> | ||
| <DrawerContent> | ||
| <DrawerCloseButton /> | ||
| <DrawerHeader color={"forest_green.500"}>{t("game.customgame")}</DrawerHeader> | ||
| <DrawerBody> | ||
| <Box flexDirection="column"> | ||
| <Box> | ||
| <Text fontWeight='extrabold' color={"forest_green.400"}>{t("game.settings")}</Text> | ||
| <Flex direction="column"> | ||
| <Text color={"forest_green.400"}>{t("game.rounds")}</Text> | ||
| <NumberInput defaultValue={rounds} min={1} max={100} onChange={valueString => setRounds(parseInt(valueString))}> | ||
| <NumberInputField /> | ||
| <NumberInputStepper> | ||
| <NumberIncrementStepper /> | ||
| <NumberDecrementStepper /> | ||
| </NumberInputStepper> | ||
| </NumberInput> | ||
| <Text color={"forest_green.400"}>{t("game.time")}</Text> | ||
| <NumberInput defaultValue={time} min={5} max={100} onChange={valueString => setTime(parseInt(valueString))}> | ||
| <NumberInputField /> | ||
| <NumberInputStepper> | ||
| <NumberIncrementStepper /> | ||
| <NumberDecrementStepper /> | ||
| </NumberInputStepper> | ||
| </NumberInput> | ||
| </Flex> | ||
| </Box> | ||
| <Box marginTop="2em"> | ||
| <Text color={"forest_green.500"}>{t("game.categories")}</Text> | ||
| <Flex direction="column"> | ||
| {categories.map(category => ( | ||
| <Button | ||
| key={category} | ||
| className={"custom-button effect2"} | ||
| variant={selectedCategories.includes(category) ? "solid" : "outline"} | ||
| colorScheme="green" | ||
| margin={"10px"} | ||
| onClick={() => manageCategory(category)} | ||
| > | ||
| {category} | ||
| </Button> | ||
| ))} | ||
| </Flex> | ||
| </Box> | ||
| </Box> | ||
| </DrawerBody> | ||
| <DrawerFooter> | ||
| <Flex justify="flex-end" align="center" w="100%"> | ||
| <Button | ||
| className={"custom-button effect1"} | ||
| data-testid={"Play"} | ||
| type="submit" | ||
| colorScheme="forest_green" | ||
| margin={"10px"} | ||
| width="100%" | ||
| onClick={initializeCustomGameMode} | ||
| > | ||
| {t("common.play")} | ||
| </Button> | ||
| </Flex> | ||
| </DrawerFooter> | ||
| </DrawerContent> | ||
| </DrawerOverlay> | ||
| </Drawer> | ||
| ); | ||
| }; | ||
|
|
||
| CustomGameMenu.propTypes = { | ||
| isOpen: PropTypes.bool.isRequired, | ||
| onClose: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| export default CustomGameMenu; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import React from "react"; | ||
| import PropTypes from 'prop-types'; | ||
| import { Button, Box } from "@chakra-ui/react"; | ||
| import { FaKiwiBird, FaRandom, FaPalette } from "react-icons/fa"; | ||
| import { TbWorld } from "react-icons/tb"; | ||
| import { IoIosFootball, IoLogoGameControllerB } from "react-icons/io"; | ||
|
|
||
| const DashboardButton = ({ label, selectedButton, onClick, iconName }) => { | ||
| const isSelected = label === selectedButton; | ||
| let icon = null; | ||
|
|
||
| switch (iconName) { | ||
| case "FaKiwiBird": | ||
| icon = <FaKiwiBird style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />; | ||
| break; | ||
| case "IoIosFootball": | ||
| icon = <IoIosFootball style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />; | ||
| break; | ||
| case "FaGlobeAmericas": | ||
| icon = <TbWorld style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />; | ||
| break; | ||
| case "IoLogoGameControllerB": | ||
| icon = <IoLogoGameControllerB style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />; | ||
| break; | ||
| case "FaPalette": | ||
| icon = <FaPalette style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />; | ||
| break; | ||
| case "FaRandom": | ||
| icon = <FaRandom style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />; | ||
| break; | ||
| default: | ||
| break; | ||
| } | ||
|
|
||
| return ( | ||
| <Button | ||
| colorScheme={"green"} | ||
| variant={isSelected ? "solid" : "ghost"} | ||
| textAlign="center" | ||
| m="1em" | ||
| display="flex" | ||
| flexDirection="column" | ||
| alignItems="center" | ||
| size="lg" | ||
| height="4rem" | ||
| maxW={{ base: "100%", md: "calc(100% / 3 - 2em)" }} | ||
| onClick={() => onClick(label)} | ||
| > | ||
| {icon} | ||
| <Box>{label}</Box> | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| DashboardButton.propTypes = { | ||
| label: PropTypes.string.isRequired, | ||
| selectedButton: PropTypes.string.isRequired, | ||
| onClick: PropTypes.func.isRequired, | ||
| iconName: PropTypes.string.isRequired | ||
| }; | ||
|
|
||
| export default DashboardButton; |
Oops, something went wrong.