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/components/UploadRunDialog.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/components/UploadRunDialog.tsx')
| -rw-r--r-- | frontend/src/components/UploadRunDialog.tsx | 108 |
1 files changed, 54 insertions, 54 deletions
diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx index 5bad80f..d5eabcd 100644 --- a/frontend/src/components/UploadRunDialog.tsx +++ b/frontend/src/components/UploadRunDialog.tsx | |||
| @@ -1,15 +1,15 @@ | |||
| 1 | import React from 'react'; | 1 | import React from "react"; |
| 2 | import { UploadRunContent } from '@customTypes/Content'; | 2 | import { UploadRunContent } from "@customTypes/Content"; |
| 3 | import { ScoreboardTempUpdate, SourceDemoParser, NetMessages } from '@nekz/sdp'; | 3 | import { ScoreboardTempUpdate, SourceDemoParser, NetMessages } from "@nekz/sdp"; |
| 4 | 4 | ||
| 5 | import '@css/UploadRunDialog.css'; | 5 | import "@css/UploadRunDialog.css"; |
| 6 | import { Game } from '@customTypes/Game'; | 6 | import { Game } from "@customTypes/Game"; |
| 7 | import { API } from '@api/Api'; | 7 | import { API } from "@api/Api"; |
| 8 | import { useNavigate } from 'react-router-dom'; | 8 | import { useNavigate } from "react-router-dom"; |
| 9 | import useMessage from '@hooks/UseMessage'; | 9 | import useMessage from "@hooks/UseMessage"; |
| 10 | import useConfirm from '@hooks/UseConfirm'; | 10 | import useConfirm from "@hooks/UseConfirm"; |
| 11 | import useMessageLoad from '@hooks/UseMessageLoad'; | 11 | import useMessageLoad from "@hooks/UseMessageLoad"; |
| 12 | import { MapNames } from '@customTypes/MapNames'; | 12 | import { MapNames } from "@customTypes/MapNames"; |
| 13 | 13 | ||
| 14 | interface UploadRunDialogProps { | 14 | interface UploadRunDialogProps { |
| 15 | token?: string; | 15 | token?: string; |
| @@ -38,7 +38,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 38 | }); | 38 | }); |
| 39 | 39 | ||
| 40 | const [selectedGameID, setSelectedGameID] = React.useState<number>(0); | 40 | const [selectedGameID, setSelectedGameID] = React.useState<number>(0); |
| 41 | const [selectedGameName, setSelectedGameName] = React.useState<string>(''); | 41 | const [selectedGameName, setSelectedGameName] = React.useState<string>(""); |
| 42 | 42 | ||
| 43 | // dropdowns | 43 | // dropdowns |
| 44 | const [dropdown1Vis, setDropdown1Vis] = React.useState<boolean>(false); | 44 | const [dropdown1Vis, setDropdown1Vis] = React.useState<boolean>(false); |
| @@ -102,7 +102,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 102 | setDropdown1Vis(!dropdown1Vis); | 102 | setDropdown1Vis(!dropdown1Vis); |
| 103 | } else if (dropdown === 2) { | 103 | } else if (dropdown === 2) { |
| 104 | setDropdown2Vis(!dropdown2Vis); | 104 | setDropdown2Vis(!dropdown2Vis); |
| 105 | document.querySelector('#dropdown2')?.scrollTo(0, 0); | 105 | document.querySelector("#dropdown2")?.scrollTo(0, 0); |
| 106 | } | 106 | } |
| 107 | }; | 107 | }; |
| 108 | 108 | ||
| @@ -133,15 +133,15 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 133 | if (token) { | 133 | if (token) { |
| 134 | if (games[selectedGameID].is_coop) { | 134 | if (games[selectedGameID].is_coop) { |
| 135 | if (uploadRunContent.host_demo === null) { | 135 | if (uploadRunContent.host_demo === null) { |
| 136 | await message('Error', 'You must select a host demo to upload.'); | 136 | await message("Error", "You must select a host demo to upload."); |
| 137 | return; | 137 | return; |
| 138 | } else if (uploadRunContent.partner_demo === null) { | 138 | } else if (uploadRunContent.partner_demo === null) { |
| 139 | await message('Error', 'You must select a partner demo to upload.'); | 139 | await message("Error", "You must select a partner demo to upload."); |
| 140 | return; | 140 | return; |
| 141 | } | 141 | } |
| 142 | } else { | 142 | } else { |
| 143 | if (uploadRunContent.host_demo === null) { | 143 | if (uploadRunContent.host_demo === null) { |
| 144 | await message('Error', 'You must select a demo to upload.'); | 144 | await message("Error", "You must select a demo to upload."); |
| 145 | return; | 145 | return; |
| 146 | } | 146 | } |
| 147 | } | 147 | } |
| @@ -157,7 +157,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 157 | 157 | ||
| 158 | if (!scoreboard) { | 158 | if (!scoreboard) { |
| 159 | await message( | 159 | await message( |
| 160 | 'Error', | 160 | "Error", |
| 161 | "Error while processing demo: Unable to get scoreboard result. Either there is a demo that is corrupt or haven't been recorded in challenge mode." | 161 | "Error while processing demo: Unable to get scoreboard result. Either there is a demo that is corrupt or haven't been recorded in challenge mode." |
| 162 | ); | 162 | ); |
| 163 | return; | 163 | return; |
| @@ -165,22 +165,22 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 165 | 165 | ||
| 166 | if (!demo.mapName || !MapNames[demo.mapName]) { | 166 | if (!demo.mapName || !MapNames[demo.mapName]) { |
| 167 | await message( | 167 | await message( |
| 168 | 'Error', | 168 | "Error", |
| 169 | 'Error while processing demo: Invalid map name.' | 169 | "Error while processing demo: Invalid map name." |
| 170 | ); | 170 | ); |
| 171 | return; | 171 | return; |
| 172 | } | 172 | } |
| 173 | 173 | ||
| 174 | if (selectedGameID === 0 && MapNames[demo.mapName] > 60) { | 174 | if (selectedGameID === 0 && MapNames[demo.mapName] > 60) { |
| 175 | await message( | 175 | await message( |
| 176 | 'Error', | 176 | "Error", |
| 177 | 'Error while processing demo: Invalid cooperative demo in singleplayer submission.' | 177 | "Error while processing demo: Invalid cooperative demo in singleplayer submission." |
| 178 | ); | 178 | ); |
| 179 | return; | 179 | return; |
| 180 | } else if (selectedGameID === 1 && MapNames[demo.mapName] <= 60) { | 180 | } else if (selectedGameID === 1 && MapNames[demo.mapName] <= 60) { |
| 181 | await message( | 181 | await message( |
| 182 | 'Error', | 182 | "Error", |
| 183 | 'Error while processing demo: Invalid singleplayer demo in cooperative submission.' | 183 | "Error while processing demo: Invalid singleplayer demo in cooperative submission." |
| 184 | ); | 184 | ); |
| 185 | return; | 185 | return; |
| 186 | } | 186 | } |
| @@ -189,7 +189,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 189 | scoreboard.userMessage?.as<ScoreboardTempUpdate>() ?? {}; | 189 | scoreboard.userMessage?.as<ScoreboardTempUpdate>() ?? {}; |
| 190 | 190 | ||
| 191 | const userConfirmed = await confirm( | 191 | const userConfirmed = await confirm( |
| 192 | 'Upload Record', | 192 | "Upload Record", |
| 193 | `Map Name: ${demo.mapName}\nPortal Count: ${portalScore}\nTicks: ${timeScore}\n\nAre you sure you want to upload this demo?` | 193 | `Map Name: ${demo.mapName}\nPortal Count: ${portalScore}\nTicks: ${timeScore}\n\nAre you sure you want to upload this demo?` |
| 194 | ); | 194 | ); |
| 195 | 195 | ||
| @@ -197,21 +197,21 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 197 | return; | 197 | return; |
| 198 | } | 198 | } |
| 199 | 199 | ||
| 200 | messageLoad('Uploading...'); | 200 | messageLoad("Uploading..."); |
| 201 | const [success, response] = await API.post_record( | 201 | const [success, response] = await API.post_record( |
| 202 | token, | 202 | token, |
| 203 | uploadRunContent, | 203 | uploadRunContent, |
| 204 | MapNames[demo.mapName] | 204 | MapNames[demo.mapName] |
| 205 | ); | 205 | ); |
| 206 | messageLoadClose(); | 206 | messageLoadClose(); |
| 207 | await message('Upload Record', response); | 207 | await message("Upload Record", response); |
| 208 | if (success) { | 208 | if (success) { |
| 209 | setUploadRunContent({ | 209 | setUploadRunContent({ |
| 210 | host_demo: null, | 210 | host_demo: null, |
| 211 | partner_demo: null, | 211 | partner_demo: null, |
| 212 | }); | 212 | }); |
| 213 | onClose(success); | 213 | onClose(success); |
| 214 | navigate('/profile'); | 214 | navigate("/profile"); |
| 215 | } | 215 | } |
| 216 | } | 216 | } |
| 217 | }; | 217 | }; |
| @@ -220,7 +220,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 220 | if (open) { | 220 | if (open) { |
| 221 | setDragHighlightPartner(false); | 221 | setDragHighlightPartner(false); |
| 222 | setDragHighlight(false); | 222 | setDragHighlight(false); |
| 223 | _handle_game_select('1', 'Portal 2 - Singleplayer'); // a different approach?. | 223 | _handle_game_select("1", "Portal 2 - Singleplayer"); // a different approach?. |
| 224 | } | 224 | } |
| 225 | }, [open]); | 225 | }, [open]); |
| 226 | 226 | ||
| @@ -236,35 +236,35 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 236 | <div id="upload-run-menu-add"> | 236 | <div id="upload-run-menu-add"> |
| 237 | <div id="upload-run-route-category"> | 237 | <div id="upload-run-route-category"> |
| 238 | <div | 238 | <div |
| 239 | style={{ padding: '15px 0px' }} | 239 | style={{ padding: "15px 0px" }} |
| 240 | className="upload-run-dropdown-container upload-run-item" | 240 | className="upload-run-dropdown-container upload-run-item" |
| 241 | > | 241 | > |
| 242 | <h3 style={{ margin: '0px 0px' }}>Select Game</h3> | 242 | <h3 style={{ margin: "0px 0px" }}>Select Game</h3> |
| 243 | <div | 243 | <div |
| 244 | onClick={() => _handle_dropdowns(1)} | 244 | onClick={() => _handle_dropdowns(1)} |
| 245 | style={{ | 245 | style={{ |
| 246 | display: 'flex', | 246 | display: "flex", |
| 247 | alignItems: 'center', | 247 | alignItems: "center", |
| 248 | cursor: 'pointer', | 248 | cursor: "pointer", |
| 249 | justifyContent: 'space-between', | 249 | justifyContent: "space-between", |
| 250 | margin: '10px 0px', | 250 | margin: "10px 0px", |
| 251 | }} | 251 | }} |
| 252 | > | 252 | > |
| 253 | <div className="dropdown-cur">{selectedGameName}</div> | 253 | <div className="dropdown-cur">{selectedGameName}</div> |
| 254 | <i | 254 | <i |
| 255 | style={{ | 255 | style={{ |
| 256 | rotate: '-90deg', | 256 | rotate: "-90deg", |
| 257 | transform: 'translate(-5px, 10px)', | 257 | transform: "translate(-5px, 10px)", |
| 258 | }} | 258 | }} |
| 259 | className="triangle" | 259 | className="triangle" |
| 260 | ></i> | 260 | ></i> |
| 261 | </div> | 261 | </div> |
| 262 | <div | 262 | <div |
| 263 | style={{ top: '110px' }} | 263 | style={{ top: "110px" }} |
| 264 | className={ | 264 | className={ |
| 265 | dropdown1Vis | 265 | dropdown1Vis |
| 266 | ? 'upload-run-dropdown' | 266 | ? "upload-run-dropdown" |
| 267 | : 'upload-run-dropdown hidden' | 267 | : "upload-run-dropdown hidden" |
| 268 | } | 268 | } |
| 269 | > | 269 | > |
| 270 | {games.map(game => ( | 270 | {games.map(game => ( |
| @@ -284,7 +284,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 284 | {!loading && ( | 284 | {!loading && ( |
| 285 | <> | 285 | <> |
| 286 | <div> | 286 | <div> |
| 287 | <h3 style={{ margin: '10px 0px' }}>Host Demo</h3> | 287 | <h3 style={{ margin: "10px 0px" }}>Host Demo</h3> |
| 288 | <div | 288 | <div |
| 289 | onClick={() => { | 289 | onClick={() => { |
| 290 | _handle_file_click(true); | 290 | _handle_file_click(true); |
| @@ -298,7 +298,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 298 | onDragLeave={e => { | 298 | onDragLeave={e => { |
| 299 | _handle_drag_leave(e, true); | 299 | _handle_drag_leave(e, true); |
| 300 | }} | 300 | }} |
| 301 | className={`upload-run-drag-area ${dragHightlight ? 'upload-run-drag-area-highlight' : ''} ${uploadRunContent.host_demo ? 'upload-run-drag-area-hidden' : ''}`} | 301 | className={`upload-run-drag-area ${dragHightlight ? "upload-run-drag-area-highlight" : ""} ${uploadRunContent.host_demo ? "upload-run-drag-area-hidden" : ""}`} |
| 302 | > | 302 | > |
| 303 | <input | 303 | <input |
| 304 | ref={fileInputRef} | 304 | ref={fileInputRef} |
| @@ -316,7 +316,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 316 | <div> | 316 | <div> |
| 317 | <span | 317 | <span |
| 318 | style={{ | 318 | style={{ |
| 319 | fontFamily: 'BarlowSemiCondensed-Regular', | 319 | fontFamily: "BarlowSemiCondensed-Regular", |
| 320 | }} | 320 | }} |
| 321 | > | 321 | > |
| 322 | Or click here | 322 | Or click here |
| @@ -324,9 +324,9 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 324 | <br /> | 324 | <br /> |
| 325 | <button | 325 | <button |
| 326 | style={{ | 326 | style={{ |
| 327 | borderRadius: '24px', | 327 | borderRadius: "24px", |
| 328 | padding: '5px 8px', | 328 | padding: "5px 8px", |
| 329 | margin: '5px 0px', | 329 | margin: "5px 0px", |
| 330 | }} | 330 | }} |
| 331 | > | 331 | > |
| 332 | Upload | 332 | Upload |
| @@ -342,7 +342,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 342 | {games[selectedGameID].is_coop && ( | 342 | {games[selectedGameID].is_coop && ( |
| 343 | <> | 343 | <> |
| 344 | <div> | 344 | <div> |
| 345 | <h3 style={{ margin: '10px 0px' }}>Partner Demo</h3> | 345 | <h3 style={{ margin: "10px 0px" }}>Partner Demo</h3> |
| 346 | <div | 346 | <div |
| 347 | onClick={() => { | 347 | onClick={() => { |
| 348 | _handle_file_click(false); | 348 | _handle_file_click(false); |
| @@ -356,7 +356,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 356 | onDragLeave={e => { | 356 | onDragLeave={e => { |
| 357 | _handle_drag_leave(e, false); | 357 | _handle_drag_leave(e, false); |
| 358 | }} | 358 | }} |
| 359 | className={`upload-run-drag-area ${dragHightlightPartner ? 'upload-run-drag-area-highlight-partner' : ''} ${uploadRunContent.partner_demo ? 'upload-run-drag-area-hidden' : ''}`} | 359 | className={`upload-run-drag-area ${dragHightlightPartner ? "upload-run-drag-area-highlight-partner" : ""} ${uploadRunContent.partner_demo ? "upload-run-drag-area-hidden" : ""}`} |
| 360 | > | 360 | > |
| 361 | <input | 361 | <input |
| 362 | ref={fileInputRefPartner} | 362 | ref={fileInputRefPartner} |
| @@ -367,14 +367,14 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 367 | onChange={e => | 367 | onChange={e => |
| 368 | _handle_file_change(e.target.files, false) | 368 | _handle_file_change(e.target.files, false) |
| 369 | } | 369 | } |
| 370 | />{' '} | 370 | />{" "} |
| 371 | {!uploadRunContent.partner_demo ? ( | 371 | {!uploadRunContent.partner_demo ? ( |
| 372 | <div> | 372 | <div> |
| 373 | <span>Drag and drop</span> | 373 | <span>Drag and drop</span> |
| 374 | <div> | 374 | <div> |
| 375 | <span | 375 | <span |
| 376 | style={{ | 376 | style={{ |
| 377 | fontFamily: 'BarlowSemiCondensed-Regular', | 377 | fontFamily: "BarlowSemiCondensed-Regular", |
| 378 | }} | 378 | }} |
| 379 | > | 379 | > |
| 380 | Or click here | 380 | Or click here |
| @@ -382,9 +382,9 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ | |||
| 382 | <br /> | 382 | <br /> |
| 383 | <button | 383 | <button |
| 384 | style={{ | 384 | style={{ |
| 385 | borderRadius: '24px', | 385 | borderRadius: "24px", |
| 386 | padding: '5px 8px', | 386 | padding: "5px 8px", |
| 387 | margin: '5px 0px', | 387 | margin: "5px 0px", |
| 388 | }} | 388 | }} |
| 389 | > | 389 | > |
| 390 | Upload | 390 | Upload |