From e40f07211f5f15dcb138e2520a76d13afd3c0cfd Mon Sep 17 00:00:00 2001 From: FifthWit Date: Thu, 30 Jan 2025 10:44:30 -0600 Subject: formatted with prettier --- frontend/src/components/UploadRunDialog.tsx | 366 +++++++++++++++++++--------- 1 file changed, 253 insertions(+), 113 deletions(-) (limited to 'frontend/src/components/UploadRunDialog.tsx') diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx index c02fdb8..227a564 100644 --- a/frontend/src/components/UploadRunDialog.tsx +++ b/frontend/src/components/UploadRunDialog.tsx @@ -8,7 +8,7 @@ import { API } from '@api/Api'; import { useNavigate } from 'react-router-dom'; import useMessage from '@hooks/UseMessage'; import useConfirm from '@hooks/UseConfirm'; -import useMessageLoad from "@hooks/UseMessageLoad"; +import useMessageLoad from '@hooks/UseMessageLoad'; import { MapNames } from '@customTypes/MapNames'; interface UploadRunDialogProps { @@ -18,21 +18,27 @@ interface UploadRunDialogProps { games: Game[]; } -const UploadRunDialog: React.FC = ({ token, open, onClose, games }) => { - +const UploadRunDialog: React.FC = ({ + token, + open, + onClose, + games, +}) => { const { message, MessageDialogComponent } = useMessage(); const { confirm, ConfirmDialogComponent } = useConfirm(); - const { messageLoad, messageLoadClose, MessageDialogLoadComponent } = useMessageLoad(); + const { messageLoad, messageLoadClose, MessageDialogLoadComponent } = + useMessageLoad(); const navigate = useNavigate(); - const [uploadRunContent, setUploadRunContent] = React.useState({ - host_demo: null, - partner_demo: null, - }); + const [uploadRunContent, setUploadRunContent] = + React.useState({ + host_demo: null, + partner_demo: null, + }); const [selectedGameID, setSelectedGameID] = React.useState(0); - const [selectedGameName, setSelectedGameName] = React.useState(""); + const [selectedGameName, setSelectedGameName] = React.useState(''); // dropdowns const [dropdown1Vis, setDropdown1Vis] = React.useState(false); @@ -41,7 +47,8 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, const [loading, setLoading] = React.useState(false); const [dragHightlight, setDragHighlight] = React.useState(false); - const [dragHightlightPartner, setDragHighlightPartner] = React.useState(false); + const [dragHightlightPartner, setDragHighlightPartner] = + React.useState(false); const fileInputRef = React.useRef(null); const fileInputRefPartner = React.useRef(null); @@ -52,9 +59,12 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, } else { fileInputRefPartner.current?.click(); } - } + }; - const _handle_drag_over = (e: React.DragEvent, host: boolean) => { + const _handle_drag_over = ( + e: React.DragEvent, + host: boolean + ) => { e.preventDefault(); e.stopPropagation(); if (host) { @@ -62,9 +72,12 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, } else { setDragHighlightPartner(true); } - } + }; - const _handle_drag_leave = (e: React.DragEvent, host: boolean) => { + const _handle_drag_leave = ( + e: React.DragEvent, + host: boolean + ) => { e.preventDefault(); e.stopPropagation(); if (host) { @@ -72,7 +85,7 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, } else { setDragHighlightPartner(false); } - } + }; const _handle_drop = (e: React.DragEvent, host: boolean) => { e.preventDefault(); @@ -80,7 +93,7 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, setDragHighlight(true); _handle_file_change(e.dataTransfer.files, host); - } + }; const _handle_dropdowns = (dropdown: number) => { setDropdown1Vis(false); @@ -89,9 +102,9 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, setDropdown1Vis(!dropdown1Vis); } else if (dropdown == 2) { setDropdown2Vis(!dropdown2Vis); - document.querySelector("#dropdown2")?.scrollTo(0, 0); + document.querySelector('#dropdown2')?.scrollTo(0, 0); } - } + }; const _handle_game_select = async (game_id: string, game_name: string) => { setLoading(true); @@ -120,62 +133,85 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, if (token) { if (games[selectedGameID].is_coop) { if (uploadRunContent.host_demo === null) { - await message("Error", "You must select a host demo to upload.") - return + await message('Error', 'You must select a host demo to upload.'); + return; } else if (uploadRunContent.partner_demo === null) { - await message("Error", "You must select a partner demo to upload.") - return + await message('Error', 'You must select a partner demo to upload.'); + return; } } else { if (uploadRunContent.host_demo === null) { - await message("Error", "You must select a demo to upload.") - return + await message('Error', 'You must select a demo to upload.'); + return; } } const demo = SourceDemoParser.default() .setOptions({ packets: true, header: true }) .parse(await uploadRunContent.host_demo.arrayBuffer()); - const scoreboard = demo.findPacket((msg) => { - return msg instanceof NetMessages.SvcUserMessage && msg.userMessage instanceof ScoreboardTempUpdate; - }) + const scoreboard = demo.findPacket(msg => { + return ( + msg instanceof NetMessages.SvcUserMessage && + msg.userMessage instanceof ScoreboardTempUpdate + ); + }); if (!scoreboard) { - await message("Error", "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.") - return + await message( + 'Error', + "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." + ); + return; } if (!demo.mapName || !MapNames[demo.mapName]) { - await message("Error", "Error while processing demo: Invalid map name.") - return + await message( + 'Error', + 'Error while processing demo: Invalid map name.' + ); + return; } if (selectedGameID === 0 && MapNames[demo.mapName] > 60) { - await message("Error", "Error while processing demo: Invalid cooperative demo in singleplayer submission.") - return + await message( + 'Error', + 'Error while processing demo: Invalid cooperative demo in singleplayer submission.' + ); + return; } else if (selectedGameID === 1 && MapNames[demo.mapName] <= 60) { - await message("Error", "Error while processing demo: Invalid singleplayer demo in cooperative submission.") - return + await message( + 'Error', + 'Error while processing demo: Invalid singleplayer demo in cooperative submission.' + ); + return; } - const { portalScore, timeScore } = scoreboard.userMessage?.as() ?? {}; + const { portalScore, timeScore } = + scoreboard.userMessage?.as() ?? {}; - const userConfirmed = await confirm("Upload Record", `Map Name: ${demo.mapName}\nPortal Count: ${portalScore}\nTicks: ${timeScore}\n\nAre you sure you want to upload this demo?`); + const userConfirmed = await confirm( + 'Upload Record', + `Map Name: ${demo.mapName}\nPortal Count: ${portalScore}\nTicks: ${timeScore}\n\nAre you sure you want to upload this demo?` + ); if (!userConfirmed) { return; } - messageLoad("Uploading..."); - const [success, response] = await API.post_record(token, uploadRunContent, MapNames[demo.mapName]); + messageLoad('Uploading...'); + const [success, response] = await API.post_record( + token, + uploadRunContent, + MapNames[demo.mapName] + ); messageLoadClose(); - await message("Upload Record", response); + await message('Upload Record', response); if (success) { setUploadRunContent({ host_demo: null, partner_demo: null, }); onClose(success); - navigate("/profile"); + navigate('/profile'); } } }; @@ -184,7 +220,7 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, if (open) { setDragHighlightPartner(false); setDragHighlight(false); - _handle_game_select("1", "Portal 2 - Singleplayer"); // a different approach?. + _handle_game_select('1', 'Portal 2 - Singleplayer'); // a different approach?. } }, [open]); @@ -196,84 +232,191 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, {MessageDialogLoadComponent} {ConfirmDialogComponent} -
-
-
-
-

Select Game

-
_handle_dropdowns(1)} style={{ display: "flex", alignItems: "center", cursor: "pointer", justifyContent: "space-between", margin: "10px 0px" }}> -
{selectedGameName}
- +
+
+
+
+

Select Game

+
_handle_dropdowns(1)} + style={{ + display: 'flex', + alignItems: 'center', + cursor: 'pointer', + justifyContent: 'space-between', + margin: '10px 0px', + }} + > +
{selectedGameName}
+
-
- {games.map((game) => ( -
{ _handle_game_select(game.id.toString(), game.name); _handle_dropdowns(1) }} key={game.id}>{game.name}
+
+ {games.map(game => ( +
{ + _handle_game_select(game.id.toString(), game.name); + _handle_dropdowns(1); + }} + key={game.id} + > + {game.name} +
))}
- { - !loading && - ( - <> - -
-

Host Demo

-
{ _handle_file_click(true) }} onDragOver={(e) => { _handle_drag_over(e, true) }} onDrop={(e) => { _handle_drop(e, true) }} onDragLeave={(e) => { _handle_drag_leave(e, true) }} className={`upload-run-drag-area ${dragHightlight ? "upload-run-drag-area-highlight" : ""} ${uploadRunContent.host_demo ? "upload-run-drag-area-hidden" : ""}`}> - _handle_file_change(e.target.files, true)} /> - {!uploadRunContent.host_demo ? + {!loading && ( + <> +
+

Host Demo

+
{ + _handle_file_click(true); + }} + onDragOver={e => { + _handle_drag_over(e, true); + }} + onDrop={e => { + _handle_drop(e, true); + }} + onDragLeave={e => { + _handle_drag_leave(e, true); + }} + className={`upload-run-drag-area ${dragHightlight ? 'upload-run-drag-area-highlight' : ''} ${uploadRunContent.host_demo ? 'upload-run-drag-area-hidden' : ''}`} + > + + _handle_file_change(e.target.files, true) + } + /> + {!uploadRunContent.host_demo ? ( +
+ Drag and drop
- Drag and drop -
- Or click here
- -
+ + Or click here + +
+
- : null} - - {uploadRunContent.host_demo?.name} -
- { - games[selectedGameID].is_coop && - ( - <> -
-

Partner Demo

-
{ _handle_file_click(false) }} onDragOver={(e) => { _handle_drag_over(e, false) }} onDrop={(e) => { _handle_drop(e, false) }} onDragLeave={(e) => { _handle_drag_leave(e, false) }} className={`upload-run-drag-area ${dragHightlightPartner ? "upload-run-drag-area-highlight-partner" : ""} ${uploadRunContent.partner_demo ? "upload-run-drag-area-hidden" : ""}`}> - _handle_file_change(e.target.files, false)} /> {!uploadRunContent.partner_demo ? -
- Drag and drop -
- Or click here
- -
-
- : null} - - {uploadRunContent.partner_demo?.name} -
-
- - ) - } -
-
+
+ ) : null} + + {uploadRunContent.host_demo?.name} +
- - - ) - } + {games[selectedGameID].is_coop && ( + <> +
+

Partner Demo

+
{ + _handle_file_click(false); + }} + onDragOver={e => { + _handle_drag_over(e, false); + }} + onDrop={e => { + _handle_drop(e, false); + }} + onDragLeave={e => { + _handle_drag_leave(e, false); + }} + className={`upload-run-drag-area ${dragHightlightPartner ? 'upload-run-drag-area-highlight-partner' : ''} ${uploadRunContent.partner_demo ? 'upload-run-drag-area-hidden' : ''}`} + > + + _handle_file_change(e.target.files, false) + } + />{' '} + {!uploadRunContent.partner_demo ? ( +
+ Drag and drop +
+ + Or click here + +
+ +
+
+ ) : null} + + {uploadRunContent.partner_demo?.name} + +
+
+ + )} +
+
+ + )}
-
+
- +
@@ -281,10 +424,7 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, ); } - return ( - <> - ); - + return <>; }; export default UploadRunDialog; -- cgit v1.2.3