aboutsummaryrefslogtreecommitdiff
path: root/frontend/src
diff options
context:
space:
mode:
authorArda Serdar Pektezol <1669855+pektezol@users.noreply.github.com>2024-10-30 00:41:59 +0300
committerArda Serdar Pektezol <1669855+pektezol@users.noreply.github.com>2024-10-30 00:41:59 +0300
commit10b83e86efc11f2edb32af658986a558e4fccba7 (patch)
tree475f3e47c1135d3e99449a6429080738d5e4dd7d /frontend/src
parentfrontend: add plus to wr delta (diff)
downloadlphub-10b83e86efc11f2edb32af658986a558e4fccba7.tar.gz
lphub-10b83e86efc11f2edb32af658986a558e4fccba7.tar.bz2
lphub-10b83e86efc11f2edb32af658986a558e4fccba7.zip
frontend: dont close demo upload on fail
Diffstat (limited to 'frontend/src')
-rw-r--r--frontend/src/components/UploadRunDialog.tsx122
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 }