aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components/Summary.tsx
diff options
context:
space:
mode:
authorFifthWit <fifthwitbusiness@gmail.com>2025-01-30 13:11:48 -0600
committerFifthWit <fifthwitbusiness@gmail.com>2025-01-30 13:11:48 -0600
commit81342e2579165ebfdb28c749dc5225141721a419 (patch)
tree8e5759c20b92408048fe5ac44f48e2df2a00ab9b /frontend/src/components/Summary.tsx
parentfixed issues with useCallback (diff)
downloadlphub-81342e2579165ebfdb28c749dc5225141721a419.tar.gz
lphub-81342e2579165ebfdb28c749dc5225141721a419.tar.bz2
lphub-81342e2579165ebfdb28c749dc5225141721a419.zip
switched to double quotes
Diffstat (limited to 'frontend/src/components/Summary.tsx')
-rw-r--r--frontend/src/components/Summary.tsx68
1 files changed, 34 insertions, 34 deletions
diff --git a/frontend/src/components/Summary.tsx b/frontend/src/components/Summary.tsx
index 9f39506..61e52d4 100644
--- a/frontend/src/components/Summary.tsx
+++ b/frontend/src/components/Summary.tsx
@@ -1,8 +1,8 @@
1import React from 'react'; 1import React from "react";
2import ReactMarkdown from 'react-markdown'; 2import ReactMarkdown from "react-markdown";
3 3
4import { MapSummary } from '@customTypes/Map'; 4import { MapSummary } from "@customTypes/Map";
5import '@css/Maps.css'; 5import "@css/Maps.css";
6 6
7interface SummaryProps { 7interface SummaryProps {
8 selectedRun: number; 8 selectedRun: number;
@@ -20,9 +20,9 @@ const Summary: React.FC<SummaryProps> = ({
20 20
21 const _select_run = React.useCallback( 21 const _select_run = React.useCallback(
22 (idx: number, category_id: number) => { 22 (idx: number, category_id: number) => {
23 let r = document.querySelectorAll('button.record'); 23 let r = document.querySelectorAll("button.record");
24 r.forEach(e => ((e as HTMLElement).style.backgroundColor = '#2b2e46')); 24 r.forEach(e => ((e as HTMLElement).style.backgroundColor = "#2b2e46"));
25 (r[idx] as HTMLElement).style.backgroundColor = '#161723'; 25 (r[idx] as HTMLElement).style.backgroundColor = "#161723";
26 26
27 if (data && data.summary.routes.length !== 0) { 27 if (data && data.summary.routes.length !== 0) {
28 idx += data.summary.routes.filter( 28 idx += data.summary.routes.filter(
@@ -42,9 +42,9 @@ const Summary: React.FC<SummaryProps> = ({
42 } 42 }
43 43
44 const _category_change = React.useCallback(() => { 44 const _category_change = React.useCallback(() => {
45 const btn = document.querySelectorAll('#section3 #category span button'); 45 const btn = document.querySelectorAll("#section3 #category span button");
46 btn.forEach(e => { 46 btn.forEach(e => {
47 (e as HTMLElement).style.backgroundColor = '#2b2e46'; 47 (e as HTMLElement).style.backgroundColor = "#2b2e46";
48 }); 48 });
49 // heavenly father forgive me for i have sinned. TODO: fix this bullshit with dynamic categories 49 // heavenly father forgive me for i have sinned. TODO: fix this bullshit with dynamic categories
50 const idx = 50 const idx =
@@ -53,18 +53,18 @@ const Summary: React.FC<SummaryProps> = ({
53 : data.map.is_coop 53 : data.map.is_coop
54 ? selectedCategory - 3 54 ? selectedCategory - 3
55 : selectedCategory - 1; 55 : selectedCategory - 1;
56 (btn[idx] as HTMLElement).style.backgroundColor = '#202232'; 56 (btn[idx] as HTMLElement).style.backgroundColor = "#202232";
57 }, [selectedCategory, data.map.is_coop]); 57 }, [selectedCategory, data.map.is_coop]);
58 58
59 const _history_change = React.useCallback(() => { 59 const _history_change = React.useCallback(() => {
60 const btn = document.querySelectorAll('#section3 #history span button'); 60 const btn = document.querySelectorAll("#section3 #history span button");
61 btn.forEach(e => { 61 btn.forEach(e => {
62 (e as HTMLElement).style.backgroundColor = '#2b2e46'; 62 (e as HTMLElement).style.backgroundColor = "#2b2e46";
63 }); 63 });
64 (historySelected 64 (historySelected
65 ? (btn[1] as HTMLElement) 65 ? (btn[1] as HTMLElement)
66 : (btn[0] as HTMLElement) 66 : (btn[0] as HTMLElement)
67 ).style.backgroundColor = '#202232'; 67 ).style.backgroundColor = "#202232";
68 }, [historySelected]); 68 }, [historySelected]);
69 69
70 React.useEffect(() => { 70 React.useEffect(() => {
@@ -85,7 +85,7 @@ const Summary: React.FC<SummaryProps> = ({
85 <section id="section3" className="summary1"> 85 <section id="section3" className="summary1">
86 <div 86 <div
87 id="category" 87 id="category"
88 style={data.map.image === '' ? { backgroundColor: '#202232' } : {}} 88 style={data.map.image === "" ? { backgroundColor: "#202232" } : {}}
89 > 89 >
90 <img src={data.map.image} alt="" id="category-image"></img> 90 <img src={data.map.image} alt="" id="category-image"></img>
91 <p> 91 <p>
@@ -97,7 +97,7 @@ const Summary: React.FC<SummaryProps> = ({
97 : ` portals`} 97 : ` portals`}
98 </p> 98 </p>
99 {data.map.is_coop ? ( // TODO: make this part dynamic 99 {data.map.is_coop ? ( // TODO: make this part dynamic
100 <span style={{ gridTemplateColumns: '1fr 1fr 1fr' }}> 100 <span style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
101 <button onClick={() => setSelectedCategory(1)}>CM</button> 101 <button onClick={() => setSelectedCategory(1)}>CM</button>
102 <button onClick={() => setSelectedCategory(4)}>Any%</button> 102 <button onClick={() => setSelectedCategory(4)}>Any%</button>
103 <button onClick={() => setSelectedCategory(5)}> 103 <button onClick={() => setSelectedCategory(5)}>
@@ -105,7 +105,7 @@ const Summary: React.FC<SummaryProps> = ({
105 </button> 105 </button>
106 </span> 106 </span>
107 ) : ( 107 ) : (
108 <span style={{ gridTemplateColumns: '1fr 1fr 1fr 1fr' }}> 108 <span style={{ gridTemplateColumns: "1fr 1fr 1fr 1fr" }}>
109 <button onClick={() => setSelectedCategory(1)}>CM</button> 109 <button onClick={() => setSelectedCategory(1)}>CM</button>
110 <button onClick={() => setSelectedCategory(2)}>NoSLA</button> 110 <button onClick={() => setSelectedCategory(2)}>NoSLA</button>
111 <button onClick={() => setSelectedCategory(3)}> 111 <button onClick={() => setSelectedCategory(3)}>
@@ -117,7 +117,7 @@ const Summary: React.FC<SummaryProps> = ({
117 </div> 117 </div>
118 118
119 <div id="history"> 119 <div id="history">
120 <div style={{ display: historySelected ? 'none' : 'block' }}> 120 <div style={{ display: historySelected ? "none" : "block" }}>
121 {data.summary.routes.filter(e => e.category.id === selectedCategory) 121 {data.summary.routes.filter(e => e.category.id === selectedCategory)
122 .length === 0 ? ( 122 .length === 0 ? (
123 <h5>There are no records for this map.</h5> 123 <h5>There are no records for this map.</h5>
@@ -142,8 +142,8 @@ const Summary: React.FC<SummaryProps> = ({
142 > 142 >
143 <span> 143 <span>
144 {new Date(r.history.date).toLocaleDateString( 144 {new Date(r.history.date).toLocaleDateString(
145 'en-US', 145 "en-US",
146 { month: 'long', day: 'numeric', year: 'numeric' } 146 { month: "long", day: "numeric", year: "numeric" }
147 )} 147 )}
148 </span> 148 </span>
149 <span>{r.history.score_count}</span> 149 <span>{r.history.score_count}</span>
@@ -155,7 +155,7 @@ const Summary: React.FC<SummaryProps> = ({
155 )} 155 )}
156 </div> 156 </div>
157 157
158 <div style={{ display: historySelected ? 'block' : 'none' }}> 158 <div style={{ display: historySelected ? "block" : "none" }}>
159 {data.summary.routes.filter(e => e.category.id === selectedCategory) 159 {data.summary.routes.filter(e => e.category.id === selectedCategory)
160 .length === 0 ? ( 160 .length === 0 ? (
161 <h5>There are no records for this map.</h5> 161 <h5>There are no records for this map.</h5>
@@ -178,25 +178,25 @@ const Summary: React.FC<SummaryProps> = ({
178 <span>Difficulty</span> 178 <span>Difficulty</span>
179 {data.summary.routes[selectedRun].rating === 0 && <span>N/A</span>} 179 {data.summary.routes[selectedRun].rating === 0 && <span>N/A</span>}
180 {data.summary.routes[selectedRun].rating === 1 && ( 180 {data.summary.routes[selectedRun].rating === 1 && (
181 <span style={{ color: 'lime' }}>Very easy</span> 181 <span style={{ color: "lime" }}>Very easy</span>
182 )} 182 )}
183 {data.summary.routes[selectedRun].rating === 2 && ( 183 {data.summary.routes[selectedRun].rating === 2 && (
184 <span style={{ color: 'green' }}>Easy</span> 184 <span style={{ color: "green" }}>Easy</span>
185 )} 185 )}
186 {data.summary.routes[selectedRun].rating === 3 && ( 186 {data.summary.routes[selectedRun].rating === 3 && (
187 <span style={{ color: 'yellow' }}>Medium</span> 187 <span style={{ color: "yellow" }}>Medium</span>
188 )} 188 )}
189 {data.summary.routes[selectedRun].rating === 4 && ( 189 {data.summary.routes[selectedRun].rating === 4 && (
190 <span style={{ color: 'orange' }}>Hard</span> 190 <span style={{ color: "orange" }}>Hard</span>
191 )} 191 )}
192 {data.summary.routes[selectedRun].rating === 5 && ( 192 {data.summary.routes[selectedRun].rating === 5 && (
193 <span style={{ color: 'red' }}>Very hard</span> 193 <span style={{ color: "red" }}>Very hard</span>
194 )} 194 )}
195 <div> 195 <div>
196 {data.summary.routes[selectedRun].rating === 1 ? ( 196 {data.summary.routes[selectedRun].rating === 1 ? (
197 <div 197 <div
198 className="difficulty-rating" 198 className="difficulty-rating"
199 style={{ backgroundColor: 'lime' }} 199 style={{ backgroundColor: "lime" }}
200 ></div> 200 ></div>
201 ) : ( 201 ) : (
202 <div className="difficulty-rating"></div> 202 <div className="difficulty-rating"></div>
@@ -204,7 +204,7 @@ const Summary: React.FC<SummaryProps> = ({
204 {data.summary.routes[selectedRun].rating === 2 ? ( 204 {data.summary.routes[selectedRun].rating === 2 ? (
205 <div 205 <div
206 className="difficulty-rating" 206 className="difficulty-rating"
207 style={{ backgroundColor: 'green' }} 207 style={{ backgroundColor: "green" }}
208 ></div> 208 ></div>
209 ) : ( 209 ) : (
210 <div className="difficulty-rating"></div> 210 <div className="difficulty-rating"></div>
@@ -212,7 +212,7 @@ const Summary: React.FC<SummaryProps> = ({
212 {data.summary.routes[selectedRun].rating === 3 ? ( 212 {data.summary.routes[selectedRun].rating === 3 ? (
213 <div 213 <div
214 className="difficulty-rating" 214 className="difficulty-rating"
215 style={{ backgroundColor: 'yellow' }} 215 style={{ backgroundColor: "yellow" }}
216 ></div> 216 ></div>
217 ) : ( 217 ) : (
218 <div className="difficulty-rating"></div> 218 <div className="difficulty-rating"></div>
@@ -220,7 +220,7 @@ const Summary: React.FC<SummaryProps> = ({
220 {data.summary.routes[selectedRun].rating === 4 ? ( 220 {data.summary.routes[selectedRun].rating === 4 ? (
221 <div 221 <div
222 className="difficulty-rating" 222 className="difficulty-rating"
223 style={{ backgroundColor: 'orange' }} 223 style={{ backgroundColor: "orange" }}
224 ></div> 224 ></div>
225 ) : ( 225 ) : (
226 <div className="difficulty-rating"></div> 226 <div className="difficulty-rating"></div>
@@ -228,7 +228,7 @@ const Summary: React.FC<SummaryProps> = ({
228 {data.summary.routes[selectedRun].rating === 5 ? ( 228 {data.summary.routes[selectedRun].rating === 5 ? (
229 <div 229 <div
230 className="difficulty-rating" 230 className="difficulty-rating"
231 style={{ backgroundColor: 'red' }} 231 style={{ backgroundColor: "red" }}
232 ></div> 232 ></div>
233 ) : ( 233 ) : (
234 <div className="difficulty-rating"></div> 234 <div className="difficulty-rating"></div>
@@ -243,18 +243,18 @@ const Summary: React.FC<SummaryProps> = ({
243 243
244 <section id="section5" className="summary1"> 244 <section id="section5" className="summary1">
245 <div id="description"> 245 <div id="description">
246 {data.summary.routes[selectedRun].showcase !== '' ? ( 246 {data.summary.routes[selectedRun].showcase !== "" ? (
247 <iframe 247 <iframe
248 title="Showcase video" 248 title="Showcase video"
249 src={ 249 src={
250 'https://www.youtube.com/embed/' + 250 "https://www.youtube.com/embed/" +
251 _get_youtube_id(data.summary.routes[selectedRun].showcase) 251 _get_youtube_id(data.summary.routes[selectedRun].showcase)
252 } 252 }
253 > 253 >
254 {' '} 254 {" "}
255 </iframe> 255 </iframe>
256 ) : ( 256 ) : (
257 '' 257 ""
258 )} 258 )}
259 <h3>Route Description</h3> 259 <h3>Route Description</h3>
260 <span id="description-text"> 260 <span id="description-text">