diff options
| author | Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com> | 2024-10-30 00:41:59 +0300 |
|---|---|---|
| committer | Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com> | 2024-10-30 00:41:59 +0300 |
| commit | 10b83e86efc11f2edb32af658986a558e4fccba7 (patch) | |
| tree | 475f3e47c1135d3e99449a6429080738d5e4dd7d /frontend/src/components/UploadRunDialog.tsx | |
| parent | frontend: add plus to wr delta (diff) | |
| download | lphub-10b83e86efc11f2edb32af658986a558e4fccba7.tar.gz lphub-10b83e86efc11f2edb32af658986a558e4fccba7.tar.bz2 lphub-10b83e86efc11f2edb32af658986a558e4fccba7.zip | |
frontend: dont close demo upload on fail
Diffstat (limited to 'frontend/src/components/UploadRunDialog.tsx')
| -rw-r--r-- | frontend/src/components/UploadRunDialog.tsx | 122 |
1 files changed, 62 insertions, 60 deletions
diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx index 22b895c..7a2efa1 100644 --- a/frontend/src/components/UploadRunDialog.tsx +++ b/frontend/src/components/UploadRunDialog.tsx | |||
| @@ -54,39 +54,39 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose, | |||
| 54 | const fileInputRefPartner = React.useRef<HTMLInputElement>(null); | 54 | const fileInputRefPartner = React.useRef<HTMLInputElement>(null); |
| 55 | 55 | ||
| 56 | const _handle_file_click = (host: boolean) => { | 56 | const _handle_file_click = (host: boolean) => { |
| 57 | if (host) { | 57 | if (host) { |
| 58 | fileInputRef.current?.click(); | 58 | fileInputRef.current?.click(); |
| 59 | } else { | 59 | } else { |
| 60 | fileInputRefPartner.current?.click(); | 60 | fileInputRefPartner.current?.click(); |
| 61 | } | 61 | } |
| 62 | } | 62 | } |
| 63 | 63 | ||
| 64 | const _handle_drag_over = (e: React.DragEvent<HTMLDivElement>, host: boolean) => { | 64 | const _handle_drag_over = (e: React.DragEvent<HTMLDivElement>, host: boolean) => { |
| 65 | e.preventDefault(); | 65 | e.preventDefault(); |
| 66 | e.stopPropagation(); | 66 | e.stopPropagation(); |
| 67 | if (host) { | 67 | if (host) { |
| 68 | setDragHighlight(true); | 68 | setDragHighlight(true); |
| 69 | } else { | 69 | } else { |
| 70 | setDragHighlightPartner(true); | 70 | setDragHighlightPartner(true); |
| 71 | } | 71 | } |
| 72 | } | 72 | } |
| 73 | 73 | ||
| 74 | const _handle_drag_leave = (e: React.DragEvent<HTMLDivElement>, host: boolean) => { | 74 | const _handle_drag_leave = (e: React.DragEvent<HTMLDivElement>, host: boolean) => { |
| 75 | e.preventDefault(); | 75 | e.preventDefault(); |
| 76 | e.stopPropagation(); | 76 | e.stopPropagation(); |
| 77 | if (host) { | 77 | if (host) { |
| 78 | setDragHighlight(false); | 78 | setDragHighlight(false); |
| 79 | } else { | 79 | } else { |
| 80 | setDragHighlightPartner(false); | 80 | setDragHighlightPartner(false); |
| 81 | } | 81 | } |
| 82 | } | 82 | } |
| 83 | 83 | ||
| 84 | const _handle_drop = (e: React.DragEvent<HTMLDivElement>, host: boolean) => { | 84 | const _handle_drop = (e: React.DragEvent<HTMLDivElement>, host: boolean) => { |
| 85 | e.preventDefault(); | 85 | e.preventDefault(); |
| 86 | e.stopPropagation(); | 86 | e.stopPropagation(); |
| 87 | setDragHighlight(true); | 87 | setDragHighlight(true); |
| 88 | 88 | ||
| 89 | _handle_file_change(e.dataTransfer.files, host); | 89 | _handle_file_change(e.dataTransfer.files, host); |
| 90 | } | 90 | } |
| 91 | 91 | ||
| 92 | const _handle_dropdowns = (dropdown: number) => { | 92 | const _handle_dropdowns = (dropdown: number) => { |
| @@ -159,27 +159,29 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose, | |||
| 159 | return | 159 | return |
| 160 | } | 160 | } |
| 161 | const { portalScore, timeScore } = scoreboard.userMessage?.as<ScoreboardTempUpdate>() ?? {}; | 161 | const { portalScore, timeScore } = scoreboard.userMessage?.as<ScoreboardTempUpdate>() ?? {}; |
| 162 | 162 | ||
| 163 | 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?`); | 163 | 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?`); |
| 164 | 164 | ||
| 165 | if (!userConfirmed) { | 165 | if (!userConfirmed) { |
| 166 | return; | 166 | return; |
| 167 | } | 167 | } |
| 168 | 168 | ||
| 169 | messageLoad("Uploading..."); | 169 | messageLoad("Uploading..."); |
| 170 | const [ success, response ] = await API.post_record(token, uploadRunContent); | 170 | const [success, response] = await API.post_record(token, uploadRunContent); |
| 171 | messageLoadClose(); | 171 | messageLoadClose(); |
| 172 | await message("Upload Record", response); | 172 | await message("Upload Record", response); |
| 173 | onClose(success); | 173 | if (success) { |
| 174 | navigate("/profile"); | 174 | onClose(success); |
| 175 | navigate("/profile"); | ||
| 176 | } | ||
| 175 | } | 177 | } |
| 176 | }; | 178 | }; |
| 177 | 179 | ||
| 178 | React.useEffect(() => { | 180 | React.useEffect(() => { |
| 179 | if (open) { | 181 | if (open) { |
| 180 | 182 | ||
| 181 | setDragHighlightPartner(false); | 183 | setDragHighlightPartner(false); |
| 182 | setDragHighlight(false); | 184 | setDragHighlight(false); |
| 183 | _handle_game_select("1", "Portal 2 - Singleplayer"); // a different approach?. | 185 | _handle_game_select("1", "Portal 2 - Singleplayer"); // a different approach?. |
| 184 | } | 186 | } |
| 185 | }, [open]); | 187 | }, [open]); |
| @@ -189,9 +191,9 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose, | |||
| 189 | <> | 191 | <> |
| 190 | <div id="upload-run-block" /> | 192 | <div id="upload-run-block" /> |
| 191 | {MessageDialogComponent} | 193 | {MessageDialogComponent} |
| 192 | {MessageDialogLoadComponent} | 194 | {MessageDialogLoadComponent} |
| 193 | {ConfirmDialogComponent} | 195 | {ConfirmDialogComponent} |
| 194 | 196 | ||
| 195 | <div id='upload-run-menu'> | 197 | <div id='upload-run-menu'> |
| 196 | <div id='upload-run-menu-add'> | 198 | <div id='upload-run-menu-add'> |
| 197 | <div id='upload-run-route-category'> | 199 | <div id='upload-run-route-category'> |
| @@ -227,38 +229,38 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose, | |||
| 227 | </div> | 229 | </div> |
| 228 | </div> | 230 | </div> |
| 229 | <span>Host Demo</span> | 231 | <span>Host Demo</span> |
| 230 | <div onClick={() => {_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" : ""}`}> | 232 | <div onClick={() => { _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" : ""}`}> |
| 231 | <input ref={fileInputRef} type="file" name="host_demo" id="host_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, true)} /> | 233 | <input ref={fileInputRef} type="file" name="host_demo" id="host_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, true)} /> |
| 232 | {!uploadRunContent.host_demo ? | 234 | {!uploadRunContent.host_demo ? |
| 233 | <div> | 235 | <div> |
| 234 | <span>Drag and drop</span> | 236 | <span>Drag and drop</span> |
| 235 | <div> | 237 | <div> |
| 236 | <span style={{fontFamily: "BarlowSemiCondensed-Regular"}}>Or click here</span><br/> | 238 | <span style={{ fontFamily: "BarlowSemiCondensed-Regular" }}>Or click here</span><br /> |
| 237 | <button style={{borderRadius: "24px", padding: "5px 8px", margin: "5px 0px"}}>Upload</button> | 239 | <button style={{ borderRadius: "24px", padding: "5px 8px", margin: "5px 0px" }}>Upload</button> |
| 238 | </div> | 240 | </div> |
| 239 | </div> | 241 | </div> |
| 240 | : null} | 242 | : null} |
| 241 | 243 | ||
| 242 | <span className="upload-run-demo-name">{uploadRunContent.host_demo?.name}</span> | 244 | <span className="upload-run-demo-name">{uploadRunContent.host_demo?.name}</span> |
| 243 | </div> | 245 | </div> |
| 244 | { | 246 | { |
| 245 | games[selectedGameID].is_coop && | 247 | games[selectedGameID].is_coop && |
| 246 | ( | 248 | ( |
| 247 | <> | 249 | <> |
| 248 | <span>Partner Demo</span> | 250 | <span>Partner Demo</span> |
| 249 | <div onClick={() => {_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" : ""}`}> | 251 | <div onClick={() => { _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" : ""}`}> |
| 250 | <input ref={fileInputRefPartner} type="file" name="partner_demo" id="partner_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, false)} /> {!uploadRunContent.partner_demo ? | 252 | <input ref={fileInputRefPartner} type="file" name="partner_demo" id="partner_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, false)} /> {!uploadRunContent.partner_demo ? |
| 251 | <div> | 253 | <div> |
| 252 | <span>Drag and drop</span> | 254 | <span>Drag and drop</span> |
| 253 | <div> | 255 | <div> |
| 254 | <span style={{fontFamily: "BarlowSemiCondensed-Regular"}}>Or click here</span><br/> | 256 | <span style={{ fontFamily: "BarlowSemiCondensed-Regular" }}>Or click here</span><br /> |
| 255 | <button style={{borderRadius: "24px", padding: "5px 8px", margin: "5px 0px"}}>Upload</button> | 257 | <button style={{ borderRadius: "24px", padding: "5px 8px", margin: "5px 0px" }}>Upload</button> |
| 256 | </div> | 258 | </div> |
| 257 | </div> | 259 | </div> |
| 258 | : null} | 260 | : null} |
| 259 | 261 | ||
| 260 | <span className="upload-run-demo-name">{uploadRunContent.partner_demo?.name}</span> | 262 | <span className="upload-run-demo-name">{uploadRunContent.partner_demo?.name}</span> |
| 261 | </div> | 263 | </div> |
| 262 | </> | 264 | </> |
| 263 | ) | 265 | ) |
| 264 | } | 266 | } |