diff options
| author | FifthWit <fifthwitbusiness@gmail.com> | 2025-01-30 13:11:48 -0600 |
|---|---|---|
| committer | FifthWit <fifthwitbusiness@gmail.com> | 2025-01-30 13:11:48 -0600 |
| commit | 81342e2579165ebfdb28c749dc5225141721a419 (patch) | |
| tree | 8e5759c20b92408048fe5ac44f48e2df2a00ab9b /frontend/src/pages/Maplist.tsx | |
| parent | fixed issues with useCallback (diff) | |
| download | lphub-81342e2579165ebfdb28c749dc5225141721a419.tar.gz lphub-81342e2579165ebfdb28c749dc5225141721a419.tar.bz2 lphub-81342e2579165ebfdb28c749dc5225141721a419.zip | |
switched to double quotes
Diffstat (limited to 'frontend/src/pages/Maplist.tsx')
| -rw-r--r-- | frontend/src/pages/Maplist.tsx | 64 |
1 files changed, 32 insertions, 32 deletions
diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx index 372b800..a7242ef 100644 --- a/frontend/src/pages/Maplist.tsx +++ b/frontend/src/pages/Maplist.tsx | |||
| @@ -1,11 +1,11 @@ | |||
| 1 | import React, { useEffect } from 'react'; | 1 | import React, { useEffect } from "react"; |
| 2 | import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'; | 2 | import { Link, useLocation, useNavigate, useParams } from "react-router-dom"; |
| 3 | import { Helmet } from 'react-helmet'; | 3 | import { Helmet } from "react-helmet"; |
| 4 | 4 | ||
| 5 | import '@css/Maplist.css'; | 5 | import "@css/Maplist.css"; |
| 6 | import { API } from '@api/Api'; | 6 | import { API } from "@api/Api"; |
| 7 | import { Game } from '@customTypes/Game'; | 7 | import { Game } from "@customTypes/Game"; |
| 8 | import { GameChapter, GamesChapters } from '@customTypes/Chapters'; | 8 | import { GameChapter, GamesChapters } from "@customTypes/Chapters"; |
| 9 | 9 | ||
| 10 | const Maplist: React.FC = () => { | 10 | const Maplist: React.FC = () => { |
| 11 | const [game, setGame] = React.useState<Game | null>(null); | 11 | const [game, setGame] = React.useState<Game | null>(null); |
| @@ -18,7 +18,7 @@ const Maplist: React.FC = () => { | |||
| 18 | const [curChapter, setCurChapter] = React.useState<GameChapter>(); | 18 | const [curChapter, setCurChapter] = React.useState<GameChapter>(); |
| 19 | const [numChapters, setNumChapters] = React.useState<number>(0); | 19 | const [numChapters, setNumChapters] = React.useState<number>(0); |
| 20 | 20 | ||
| 21 | const [dropdownActive, setDropdownActive] = React.useState('none'); | 21 | const [dropdownActive, setDropdownActive] = React.useState("none"); |
| 22 | 22 | ||
| 23 | const params = useParams<{ id: string; chapter: string }>(); | 23 | const params = useParams<{ id: string; chapter: string }>(); |
| 24 | const location = useLocation(); | 24 | const location = useLocation(); |
| @@ -26,7 +26,7 @@ const Maplist: React.FC = () => { | |||
| 26 | 26 | ||
| 27 | function _update_currently_selected(catNum2: number) { | 27 | function _update_currently_selected(catNum2: number) { |
| 28 | setCurrentlySelected(catNum2); | 28 | setCurrentlySelected(catNum2); |
| 29 | navigate('/games/' + game?.id + '?cat=' + catNum2); | 29 | navigate("/games/" + game?.id + "?cat=" + catNum2); |
| 30 | setHasClicked(true); | 30 | setHasClicked(true); |
| 31 | } | 31 | } |
| 32 | 32 | ||
| @@ -36,23 +36,23 @@ const Maplist: React.FC = () => { | |||
| 36 | }; | 36 | }; |
| 37 | 37 | ||
| 38 | const _handle_dropdown_click = () => { | 38 | const _handle_dropdown_click = () => { |
| 39 | if (dropdownActive === 'none') { | 39 | if (dropdownActive === "none") { |
| 40 | setDropdownActive('block'); | 40 | setDropdownActive("block"); |
| 41 | } else { | 41 | } else { |
| 42 | setDropdownActive('none'); | 42 | setDropdownActive("none"); |
| 43 | } | 43 | } |
| 44 | }; | 44 | }; |
| 45 | 45 | ||
| 46 | // im sorry but im too lazy to fix this right now | 46 | // im sorry but im too lazy to fix this right now |
| 47 | useEffect(() => { | 47 | useEffect(() => { |
| 48 | // gameID | 48 | // gameID |
| 49 | const gameId = parseFloat(params.id || ''); | 49 | const gameId = parseFloat(params.id || ""); |
| 50 | setId(gameId); | 50 | setId(gameId); |
| 51 | 51 | ||
| 52 | // location query params | 52 | // location query params |
| 53 | const queryParams = new URLSearchParams(location.search); | 53 | const queryParams = new URLSearchParams(location.search); |
| 54 | if (queryParams.get('chapter')) { | 54 | if (queryParams.get("chapter")) { |
| 55 | let cat = parseFloat(queryParams.get('chapter') || ''); | 55 | let cat = parseFloat(queryParams.get("chapter") || ""); |
| 56 | if (gameId === 2) { | 56 | if (gameId === 2) { |
| 57 | cat += 10; | 57 | cat += 10; |
| 58 | } | 58 | } |
| @@ -82,7 +82,7 @@ const Maplist: React.FC = () => { | |||
| 82 | 82 | ||
| 83 | useEffect(() => { | 83 | useEffect(() => { |
| 84 | const queryParams = new URLSearchParams(location.search); | 84 | const queryParams = new URLSearchParams(location.search); |
| 85 | if (gameChapters !== undefined && !queryParams.get('chapter')) { | 85 | if (gameChapters !== undefined && !queryParams.get("chapter")) { |
| 86 | _fetch_chapters(gameChapters!.chapters[0].id.toString()); | 86 | _fetch_chapters(gameChapters!.chapters[0].id.toString()); |
| 87 | } | 87 | } |
| 88 | }, [gameChapters, location.search]); | 88 | }, [gameChapters, location.search]); |
| @@ -92,9 +92,9 @@ const Maplist: React.FC = () => { | |||
| 92 | <Helmet> | 92 | <Helmet> |
| 93 | <title>LPHUB | Maplist</title> | 93 | <title>LPHUB | Maplist</title> |
| 94 | </Helmet> | 94 | </Helmet> |
| 95 | <section style={{ marginTop: '20px' }}> | 95 | <section style={{ marginTop: "20px" }}> |
| 96 | <Link to="/games"> | 96 | <Link to="/games"> |
| 97 | <button className="nav-button" style={{ borderRadius: '20px' }}> | 97 | <button className="nav-button" style={{ borderRadius: "20px" }}> |
| 98 | <i className="triangle"></i> | 98 | <i className="triangle"></i> |
| 99 | <span>Games List</span> | 99 | <span>Games List</span> |
| 100 | </button> | 100 | </button> |
| @@ -127,8 +127,8 @@ const Maplist: React.FC = () => { | |||
| 127 | className={ | 127 | className={ |
| 128 | currentlySelected === cat.category.id || | 128 | currentlySelected === cat.category.id || |
| 129 | (cat.category.id - 1 === catNum && !hasClicked) | 129 | (cat.category.id - 1 === catNum && !hasClicked) |
| 130 | ? 'game-cat-button selected' | 130 | ? "game-cat-button selected" |
| 131 | : 'game-cat-button' | 131 | : "game-cat-button" |
| 132 | } | 132 | } |
| 133 | onClick={() => { | 133 | onClick={() => { |
| 134 | setCatNum(cat.category.id - 1); | 134 | setCatNum(cat.category.id - 1); |
| @@ -147,17 +147,17 @@ const Maplist: React.FC = () => { | |||
| 147 | <div> | 147 | <div> |
| 148 | <span | 148 | <span |
| 149 | style={{ | 149 | style={{ |
| 150 | fontSize: '18px', | 150 | fontSize: "18px", |
| 151 | transform: 'translateY(5px)', | 151 | transform: "translateY(5px)", |
| 152 | display: 'block', | 152 | display: "block", |
| 153 | marginTop: '10px', | 153 | marginTop: "10px", |
| 154 | }} | 154 | }} |
| 155 | > | 155 | > |
| 156 | {curChapter?.chapter.name.split(' - ')[0]} | 156 | {curChapter?.chapter.name.split(" - ")[0]} |
| 157 | </span> | 157 | </span> |
| 158 | </div> | 158 | </div> |
| 159 | <div onClick={_handle_dropdown_click} className="dropdown"> | 159 | <div onClick={_handle_dropdown_click} className="dropdown"> |
| 160 | <span>{curChapter?.chapter.name.split(' - ')[1]}</span> | 160 | <span>{curChapter?.chapter.name.split(" - ")[1]}</span> |
| 161 | <i className="triangle"></i> | 161 | <i className="triangle"></i> |
| 162 | </div> | 162 | </div> |
| 163 | <div | 163 | <div |
| @@ -205,16 +205,16 @@ const Maplist: React.FC = () => { | |||
| 205 | <div | 205 | <div |
| 206 | className={ | 206 | className={ |
| 207 | map.difficulty === 0 | 207 | map.difficulty === 0 |
| 208 | ? 'one' | 208 | ? "one" |
| 209 | : map.difficulty === 1 | 209 | : map.difficulty === 1 |
| 210 | ? 'two' | 210 | ? "two" |
| 211 | : map.difficulty === 2 | 211 | : map.difficulty === 2 |
| 212 | ? 'three' | 212 | ? "three" |
| 213 | : map.difficulty === 3 | 213 | : map.difficulty === 3 |
| 214 | ? 'four' | 214 | ? "four" |
| 215 | : map.difficulty === 4 | 215 | : map.difficulty === 4 |
| 216 | ? 'five' | 216 | ? "five" |
| 217 | : 'one' | 217 | : "one" |
| 218 | } | 218 | } |
| 219 | > | 219 | > |
| 220 | <div className="difficulty-point"></div> | 220 | <div className="difficulty-point"></div> |