1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
import React from "react";
import { Link, useLocation } from "react-router-dom";
import { Helmet } from "react-helmet";
import { PortalIcon, FlagIcon, ChatIcon } from "@images/Images";
import Summary from "@components/Summary";
import Leaderboards from "@components/Leaderboards";
import Discussions from "@components/Discussions";
import ModMenu from "@components/ModMenu";
import { MapDiscussions, MapLeaderboard, MapSummary } from "@customTypes/Map";
import { API } from "@api/Api";
import "@css/Maps.css";
interface MapProps {
token?: string;
isModerator: boolean;
};
const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
const [selectedRun, setSelectedRun] = React.useState<number>(0);
const [mapSummaryData, setMapSummaryData] = React.useState<MapSummary | undefined>(undefined);
const [mapLeaderboardData, setMapLeaderboardData] = React.useState<MapLeaderboard | undefined>(undefined);
const [mapDiscussionsData, setMapDiscussionsData] = React.useState<MapDiscussions | undefined>(undefined);
const [navState, setNavState] = React.useState<number>(0);
const location = useLocation();
const mapID = location.pathname.split("/")[2];
const _fetch_map_summary = async () => {
const mapSummary = await API.get_map_summary(mapID);
setMapSummaryData(mapSummary);
};
const _fetch_map_leaderboards = async () => {
const mapLeaderboards = await API.get_map_leaderboard(mapID, "1");
setMapLeaderboardData(mapLeaderboards);
};
const _fetch_map_discussions = async () => {
const mapDiscussions = await API.get_map_discussions(mapID);
setMapDiscussionsData(mapDiscussions);
};
React.useEffect(() => {
_fetch_map_summary();
_fetch_map_leaderboards();
_fetch_map_discussions();
}, [mapID]);
if (!mapSummaryData) {
// loading placeholder
return (
<>
<main>
<section id='section1' className='summary1'>
<div>
<Link to="/games"><button className='nav-button' style={{ borderRadius: "20px 20px 20px 20px" }}><i className='triangle'></i><span>Games List</span></button></Link>
</div>
</section>
<section id='section2' className='summary1'>
<button className='nav-button'><img src={PortalIcon} alt="" /><span>Summary</span></button>
<button className='nav-button'><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
<button className='nav-button'><img src={ChatIcon} alt="" /><span>Discussions</span></button>
</section>
<section id='section6' className='summary2' />
</main>
</>
);
}
return (
<>
<Helmet>
<title>LPHUB | {mapSummaryData.map.map_name}</title>
<meta name="description" content={mapSummaryData.map.map_name} />
</Helmet>
{isModerator && <ModMenu token={token} data={mapSummaryData} selectedRun={selectedRun} mapID={mapID} />}
<div id='background-image'>
<img src={mapSummaryData.map.image} alt="" />
</div>
<main>
<section id='section1' className='summary1'>
<div>
<Link to="/games"><button className='nav-button' style={{ borderRadius: "20px 0px 0px 20px" }}><i className='triangle'></i><span>Games List</span></button></Link>
<Link to={`/games/${mapSummaryData.map.is_coop ? "2" : "1"}?chapter=${mapSummaryData.map.chapter_name.split(" ")[1]}`}><button className='nav-button' style={{ borderRadius: "0px 20px 20px 0px", marginLeft: "2px" }}><i className='triangle'></i><span>{mapSummaryData.map.chapter_name}</span></button></Link>
<br /><span><b>{mapSummaryData.map.map_name}</b></span>
</div>
</section>
<section id='section2' className='summary1'>
<button className='nav-button' onClick={() => setNavState(0)}><img src={PortalIcon} alt="" /><span>Summary</span></button>
<button className='nav-button' onClick={() => setNavState(1)}><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
<button className='nav-button' onClick={() => setNavState(2)}><img src={ChatIcon} alt="" /><span>Discussions</span></button>
</section>
{navState === 0 && <Summary selectedRun={selectedRun} setSelectedRun={setSelectedRun} data={mapSummaryData} />}
{navState === 1 && <Leaderboards mapID={mapID} />}
{navState === 2 && <Discussions data={mapDiscussionsData} token={token} isModerator={isModerator} mapID={mapID} onRefresh={() => _fetch_map_discussions()} />}
</main>
</>
);
};
export default Maps;
|