diff --git a/src/Api/tournaments.json b/src/Api/tournaments.json index 56766b3..9004de1 100644 --- a/src/Api/tournaments.json +++ b/src/Api/tournaments.json @@ -17,6 +17,61 @@ { "member_id": "11", "win": 2, "defeat": 6 }, { "member_id": "57", "win": 2, "defeat": 6 } ] + }, + { + "date": "2023-07-02", + "players": [ + { "member_id": "42", "win": 5, "defeat": 2 }, + { "member_id": "1", "win": 6, "defeat": 1 }, + { "member_id": "76", "win": 5, "defeat": 2 }, + { "member_id": "39", "win": 3, "defeat": 4 }, + { "member_id": "85", "win": 3, "defeat": 4 }, + { "member_id": "11", "win": 5, "defeat": 2 }, + { "member_id": "57", "win": 0, "defeat": 7 }, + { "member_id": "30", "win": 1, "defeat": 6 } + ] + }, + { + "date": "2023-07-09", + "players": [ + { "member_id": "42", "win": 2, "defeat": 2 }, + { "member_id": "1", "win": 5, "defeat": 2 }, + { "member_id": "76", "win": 4, "defeat": 2 }, + { "member_id": "85", "win": 4, "defeat": 4 }, + { "member_id": "57", "win": 2, "defeat": 4 }, + { "member_id": "111", "win": 0, "defeat": 3 } + ] + }, + { + "date": "2023-07-15", + "players": [ + { "member_id": "39", "win": 2, "defeat": 4 }, + { "member_id": "1", "win": 6, "defeat": 0 }, + { "member_id": "85", "win": 3, "defeat": 3 }, + { "member_id": "111", "win": 1, "defeat": 5 } + ] + }, + { + "date": "2023-07-15", + "players": [ + { "member_id": "39", "win": 2, "defeat": 3 }, + { "member_id": "5", "win": 0, "defeat": 3 }, + { "member_id": "57", "win": 0, "defeat": 3 }, + { "member_id": "85", "win": 5, "defeat": 0 }, + { "member_id": "76", "win": 4, "defeat": 2 } + ] + }, + { + "date": "2023-07-15", + "players": [ + { "member_id": "61", "win": 1, "defeat": 1 }, + { "member_id": "39", "win": 7, "defeat": 4 }, + { "member_id": "5", "win": 0, "defeat": 5 }, + { "member_id": "8", "win": 5, "defeat": 4 }, + { "member_id": "85", "win": 4, "defeat": 6 }, + { "member_id": "76", "win": 6, "defeat": 5 }, + { "member_id": "11", "win": 5, "defeat": 4 } + ] } ] }, diff --git a/src/App.js b/src/App.js index 4466588..8893199 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import Layout from "./Layout/Layout"; import { ImageGalleryModal } from "./components/ImageGallery/ImageGalleryModal"; import { MembersModal } from "./components/MembersList/MembersModal"; import TournamentsPage from "./pages/TournamentsPage/TournamentsPage"; +import { StagesList } from "./components/StagesList/StagesList"; function App() { return ( @@ -15,20 +16,17 @@ function App() { }> - } /> - - }> - } /> - + } />F + + } /> + } /> }> } /> - }> } /> - } /> diff --git a/src/components/AppBar/AppBar.jsx b/src/components/AppBar/AppBar.jsx index 61b8dc3..d603805 100644 --- a/src/components/AppBar/AppBar.jsx +++ b/src/components/AppBar/AppBar.jsx @@ -46,7 +46,7 @@ export const AppBar = () => { - + Турніри diff --git a/src/components/LastUpdateSection/LastUpdateSection.jsx b/src/components/LastUpdateSection/LastUpdateSection.jsx index 566191c..00ad543 100644 --- a/src/components/LastUpdateSection/LastUpdateSection.jsx +++ b/src/components/LastUpdateSection/LastUpdateSection.jsx @@ -11,7 +11,7 @@ export const LastUpdateSection = () => { - Останнє оновлення: 23.04.2024 + Останнє оновлення: 24.04.2024 diff --git a/src/components/StagesList/StagesItem.jsx b/src/components/StagesList/StagesItem.jsx new file mode 100644 index 0000000..dfaa0b3 --- /dev/null +++ b/src/components/StagesList/StagesItem.jsx @@ -0,0 +1,42 @@ +import { format } from "date-fns"; +import ukLocale from "date-fns/locale/uk"; +import { Item, StagesItemText, StagesItemWrap } from "./StagesList-styled"; +import { membersApi } from "../../Api/ApiRequest"; + +export const StagesItem = ({ el, index }) => { + const members = membersApi(); + const { member_id } = el?.players?.reduce((acc, curr) => { + if ( + curr.win > acc.win || + (curr.win === acc.win && curr.defeat < acc.defeat) + ) { + return curr; + } else { + return acc; + } + }); + + const winner = members.find((member) => member.id === member_id); + const winnerName = winner ? winner.name : "Не знайдено"; + + return ( + <> + + + {index + 1}. + + + {format(new Date(el.date), " d MMMM yyyyр.", { + locale: ukLocale, + })} + + + {el.date === "2024-04-7" || el.date === "2024-04-21" + ? "Приховано" + : winnerName} + + + + + ); +}; diff --git a/src/components/StagesList/StagesList-styled.jsx b/src/components/StagesList/StagesList-styled.jsx new file mode 100644 index 0000000..675334d --- /dev/null +++ b/src/components/StagesList/StagesList-styled.jsx @@ -0,0 +1,133 @@ +import styled from "styled-components"; + +export const Section = styled.section` + padding-bottom: 50px; + min-height: 800px; + background-color: var(--secondary-white-color); +`; + +export const List = styled.ul``; + +export const Item = styled.li` + position: relative; + overflow: hidden; + width: 100%; + height: 50px; + + &:nth-child(odd) { + background-color: var(--primary-white-color); + } + + &:nth-child(even) { + background-color: var(--secondary-white-color); + } + + &:hover { + cursor: pointer; + } + + @media screen and (min-width: 1200px) { + &:hover { + background-color: var(--primary-black-color); + color: var(--primary-white-color); + } + } +`; + +export const StagesItemWrap = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + + padding-left: 24px; + padding-right: 24px; + margin-left: auto; + margin-right: auto; + max-width: 1200px; + width: 100%; + height: 100%; +`; + +export const StagesItemText = styled.p` + overflow: hidden; + display: flex; + justify-content: left; + align-items: center; + height: 100%; + + font-size: 16px; + font-weight: 400; + + &:nth-child(1) { + width: 35px; + } + + &:nth-child(2) { + width: 140px; + flex-grow: 1; + } + + &:nth-child(3) { + width: 130px; + justify-content: right; + text-align: right; + + @media screen and (min-width: 450px) { + width: 150px; + } + } +`; + +export const Heading = styled.div` + position: relative; + overflow: hidden; + width: 100%; + height: 100px; + background-color: var(--tertiary-white-color); + color: var(--primary-black-color); +`; + +export const HeadingWrap = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + + padding-left: 24px; + padding-right: 24px; + margin-left: auto; + margin-right: auto; + max-width: 1200px; + width: 100%; + height: 100%; +`; + +export const HeadingText = styled.div` + overflow: hidden; + display: flex; + justify-content: left; + align-items: center; + height: 100%; + + font-size: 16px; + font-weight: 400; + line-height: 1.6; + + &:nth-child(1) { + width: 35px; + } + + &:nth-child(2) { + width: 140px; + flex-grow: 1; + } + + &:nth-child(3) { + width: 120px; + justify-content: right; + text-align: right; + + @media screen and (min-width: 450px) { + width: 150px; + } + } +`; diff --git a/src/components/StagesList/StagesList.jsx b/src/components/StagesList/StagesList.jsx new file mode 100644 index 0000000..62edf4d --- /dev/null +++ b/src/components/StagesList/StagesList.jsx @@ -0,0 +1,25 @@ +import { useLocation } from "react-router-dom"; +import { TitleSection } from "../TitleSection/TitleSection"; +import { StagesItem } from "./StagesItem"; +import { List, Section } from "./StagesList-styled"; +import { StagesListHeading } from "./StagesListHeading"; + +export const StagesList = () => { + const { state } = useLocation(); + return ( + <> +
+ + + + {state?.stages?.map((el, index) => ( + + ))} + +
+ + ); +}; diff --git a/src/components/StagesList/StagesListHeading.jsx b/src/components/StagesList/StagesListHeading.jsx new file mode 100644 index 0000000..40c8c61 --- /dev/null +++ b/src/components/StagesList/StagesListHeading.jsx @@ -0,0 +1,16 @@ +import { Heading, HeadingText, HeadingWrap } from "./StagesList-styled"; + +export const StagesListHeading = () => { + return ( + <> + + + № + Дата проведення + + Переможець + + + + ); +}; diff --git a/src/components/TournamentsList/TournamentsItem.jsx b/src/components/TournamentsList/TournamentsItem.jsx index 0f87095..7a4358d 100644 --- a/src/components/TournamentsList/TournamentsItem.jsx +++ b/src/components/TournamentsList/TournamentsItem.jsx @@ -1,3 +1,4 @@ +import { useNavigate } from "react-router-dom"; import { TournamentLogo } from "../Logo/Logo"; import { Item, @@ -6,9 +7,15 @@ import { } from "./TournamentsList-styled"; export const TournamentsItem = ({ el, index }) => { + const navigate = useNavigate(); + + const handleItemClick = () => { + navigate(el.id, { state: { stages: el.stages } }); + }; + return ( <> - + {index + 1}. diff --git a/src/components/TournamentsList/TournamentsList.jsx b/src/components/TournamentsList/TournamentsList.jsx index 6f6c9b4..0996c3b 100644 --- a/src/components/TournamentsList/TournamentsList.jsx +++ b/src/components/TournamentsList/TournamentsList.jsx @@ -2,17 +2,22 @@ import { List, Section } from "./TournamentsList-styled"; import { TournamentsItem } from "./TournamentsItem"; import { TitleSection } from "../TitleSection/TitleSection"; -export const TournamentsList = ({ tournamentsArray }) => { +export const TournamentsList = ({ tournamentsArray, membersArray }) => { return ( <>
{tournamentsArray?.map((el, index) => ( - + ))}
diff --git a/src/index.css b/src/index.css index 5cb9a16..f57977a 100644 --- a/src/index.css +++ b/src/index.css @@ -15,10 +15,12 @@ --primary-white-color: #ffffff; --secondary-white-color: #f7f7f7; + --tertiary-white-color: #d9ffdc; --primary-grey-color: #bdbdbd; --secondary-grey-color: #9f9f9f; + --type-kid-color: #b7ff00; --type-amateur-color: #6cff4b; --type-semiprofi-color: #00ff8c; diff --git a/src/pages/TournamentsPage/TournamentsPage.jsx b/src/pages/TournamentsPage/TournamentsPage.jsx index ced972a..9e0b306 100644 --- a/src/pages/TournamentsPage/TournamentsPage.jsx +++ b/src/pages/TournamentsPage/TournamentsPage.jsx @@ -1,13 +1,13 @@ import { useEffect, useState } from "react"; - -import { tournamentsApi } from "../../Api/ApiRequest"; import { TournamentsList } from "../../components/TournamentsList/TournamentsList"; +import { tournamentsApi } from "../../Api/ApiRequest"; const TournamentsPage = () => { const [tournamentsArray, setTournamentsArray] = useState([]); useEffect(() => { window.scrollTo(0, 0); + const tournaments = tournamentsApi(); tournaments?.sort((a, b) => a.name.localeCompare(b.name)); setTournamentsArray(tournaments); diff --git a/src/sprite.svg b/src/sprite.svg index 651e393..d271cd2 100644 --- a/src/sprite.svg +++ b/src/sprite.svg @@ -629,10 +629,14 @@ - + + + + +