From 1c51ea2e373dcdd458d8cdc1d3b2225c316f346d Mon Sep 17 00:00:00 2001 From: Wolfboy248 <105884620+Wolfboy248@users.noreply.github.com> Date: Sun, 20 Oct 2024 16:51:43 +0200 Subject: refactor: touch ups --- frontend/src/App.tsx | 2 ++ frontend/src/api/Maps.tsx | 2 +- frontend/src/components/UploadRunDialog.tsx | 32 +++++++++++++++++-------- frontend/src/components/UseConfirm.tsx | 36 ----------------------------- frontend/src/components/UseMessage.tsx | 27 ---------------------- frontend/src/css/Dialog.css | 14 ++++++++--- frontend/src/css/UploadRunDialog.css | 5 +++- frontend/src/hooks/UseConfirm.tsx | 36 +++++++++++++++++++++++++++++ frontend/src/hooks/UseMessage.tsx | 27 ++++++++++++++++++++++ frontend/src/pages/Profile.tsx | 4 ++-- 10 files changed, 105 insertions(+), 80 deletions(-) delete mode 100644 frontend/src/components/UseConfirm.tsx delete mode 100644 frontend/src/components/UseMessage.tsx create mode 100644 frontend/src/hooks/UseConfirm.tsx create mode 100644 frontend/src/hooks/UseMessage.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 41e426c..d1d501d 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -25,6 +25,8 @@ const App: React.FC = () => { const [profile, setProfile] = React.useState(undefined); const [isModerator, setIsModerator] = React.useState(false); + const [msgIsOpen, setMsgIsOpen] = React.useState(false); + const [games, setGames] = React.useState([]); const [uploadRunDialog, setUploadRunDialog] = React.useState(false); diff --git a/frontend/src/api/Maps.tsx b/frontend/src/api/Maps.tsx index 8295cf2..b6a6bad 100644 --- a/frontend/src/api/Maps.tsx +++ b/frontend/src/api/Maps.tsx @@ -75,7 +75,7 @@ export const delete_map_discussion = async (token: string, map_id: string, discu return response.data.success; }; -export const post_record = async (token: string, run: UploadRunContent): Promise<[string]> => { +export const post_record = async (token: string, run: UploadRunContent): Promise => { if (run.partner_demo && run.partner_id) { const response = await axios.postForm(url(`maps/${run.map_id}/record`), { "host_demo": run.host_demo, diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx index b26bbe6..f3258e8 100644 --- a/frontend/src/components/UploadRunDialog.tsx +++ b/frontend/src/components/UploadRunDialog.tsx @@ -7,6 +7,8 @@ import { Game } from '../types/Game'; import { Map } from '../types/Map'; import { API } from '../api/Api'; import { useNavigate } from 'react-router-dom'; +import useMessage from '../hooks/UseMessage'; +import useConfirm from '../hooks/UseConfirm'; interface UploadRunDialogProps { token?: string; @@ -16,6 +18,8 @@ interface UploadRunDialogProps { } const UploadRunDialog: React.FC = ({ token, open, onClose, games }) => { + const { message, MessageDialogComponent } = useMessage(); + const { confirm, ConfirmDialogComponent } = useConfirm("Upload demo?", "Are you sure you want to upload this demo?"); const navigate = useNavigate(); @@ -89,18 +93,18 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, if (token) { if (games[selectedGameID].is_coop) { if (uploadRunContent.host_demo === null) { - alert("You must select a host demo to upload.") + message("Error", "You must select a host demo to upload.") return } else if (uploadRunContent.partner_demo === null) { - alert("You must select a partner demo to upload.") + message("Error", "You must select a partner demo to upload.") return } else if (uploadRunContent.partner_id === undefined) { - alert("You must specify your partner.") + message("Error", "You must specify your partner.") return } } else { if (uploadRunContent.host_demo === null) { - alert("You must select a demo to upload.") + message("Error", "You must select a demo to upload.") return } } @@ -112,17 +116,22 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, }) if (!scoreboard) { - alert("Error while processing demo: Unable to get scoreboard result. Is this not a CM demo?") + message("Error", "Error while processing demo: Unable to get scoreboard result. Is this not a CM demo?") return } const { portalScore, timeScore } = scoreboard.userMessage?.as() ?? {}; console.log(`Portal count: ${portalScore}. Ticks: ${timeScore}.`); - if (window.confirm("Are you sure you want to submit this run to LPHUB?")) { - const message = await API.post_record(token, uploadRunContent); - alert(message); - navigate(0); - onClose(); + + const userConfirmed = await confirm(); + + if (!userConfirmed) { + return; } + + const response = await API.post_record(token, uploadRunContent); + message("Message", response); + // navigate(0); + onClose(); } }; @@ -136,6 +145,9 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, return ( <>
+ {MessageDialogComponent} + {ConfirmDialogComponent} +
diff --git a/frontend/src/components/UseConfirm.tsx b/frontend/src/components/UseConfirm.tsx deleted file mode 100644 index 2fe0e12..0000000 --- a/frontend/src/components/UseConfirm.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { useState } from 'react'; -import ConfirmDialog from './ConfirmDialog'; - -const useConfirm = ( title: string, subtitle: string ) => { - const [isOpen, setIsOpen] = useState(false); - const [resolvePromise, setResolvePromise] = useState<((value: boolean) => void) | null>(null); - - const confirm = () => { - setIsOpen(true); - return new Promise((resolve) => { - setResolvePromise(() => resolve); - }); - }; - - const handleConfirm = () => { - setIsOpen(false); - if (resolvePromise) { - resolvePromise(true); - } - } - - const handleCancel = () => { - setIsOpen(false); - if (resolvePromise) { - resolvePromise(false); - } - } - - const ConfirmDialogComponent = isOpen && ( - - ); - - return { confirm, ConfirmDialogComponent }; -} - -export default useConfirm; diff --git a/frontend/src/components/UseMessage.tsx b/frontend/src/components/UseMessage.tsx deleted file mode 100644 index fbd3c82..0000000 --- a/frontend/src/components/UseMessage.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { useState } from 'react'; -import MessageDialog from "./MessageDialog"; - -const useMessage = () => { - const [isOpen, setIsOpen] = useState(false); - - const [title, setTitle] = useState(""); - const [subtitle, setSubtitle] = useState(""); - - const message = (title: string, subtitle: string) => { - setIsOpen(true); - setTitle(title); - setSubtitle(subtitle); - }; - - const handleClose = () => { - setIsOpen(false); - }; - - const MessageDialogComponent = isOpen && ( - - ); - - return { message, MessageDialogComponent }; -} - -export default useMessage; diff --git a/frontend/src/css/Dialog.css b/frontend/src/css/Dialog.css index c25a755..f16425d 100644 --- a/frontend/src/css/Dialog.css +++ b/frontend/src/css/Dialog.css @@ -1,13 +1,15 @@ .dimmer { - position: absolute; + position: fixed; width: calc(100%); height: 100%; background-color: rgba(0, 0, 0, 0.5); + z-index: 4; + left: 0px; } .dialog { - position: absolute; - z-index: 10000; + position: fixed; + z-index: 4; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -17,6 +19,12 @@ min-width: 350px; border: 0.1em solid #272831; animation: dialog_in 0.2s cubic-bezier(0.075, 0.82, 0.165, 1.1); + color: white; + font-family: BarlowSemiCondensed-Regular; +} + +.dialog-header { + font-size: 24px; } .dialog-element { diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css index e85f206..6ea9884 100644 --- a/frontend/src/css/UploadRunDialog.css +++ b/frontend/src/css/UploadRunDialog.css @@ -95,9 +95,12 @@ button, input { transition: all 0.2s ease; } +.upload-run-buttons-container button { + border-radius: 32px; +} + button:hover { background-color: #222538; - border-radius: 32px; } .upload-run-map-container { diff --git a/frontend/src/hooks/UseConfirm.tsx b/frontend/src/hooks/UseConfirm.tsx new file mode 100644 index 0000000..6de7b10 --- /dev/null +++ b/frontend/src/hooks/UseConfirm.tsx @@ -0,0 +1,36 @@ +import React, { useState } from 'react'; +import ConfirmDialog from '../components/ConfirmDialog'; + +const useConfirm = ( title: string, subtitle: string ) => { + const [isOpen, setIsOpen] = useState(false); + const [resolvePromise, setResolvePromise] = useState<((value: boolean) => void) | null>(null); + + const confirm = () => { + setIsOpen(true); + return new Promise((resolve) => { + setResolvePromise(() => resolve); + }); + }; + + const handleConfirm = () => { + setIsOpen(false); + if (resolvePromise) { + resolvePromise(true); + } + } + + const handleCancel = () => { + setIsOpen(false); + if (resolvePromise) { + resolvePromise(false); + } + } + + const ConfirmDialogComponent = isOpen && ( + + ); + + return { confirm, ConfirmDialogComponent }; +} + +export default useConfirm; diff --git a/frontend/src/hooks/UseMessage.tsx b/frontend/src/hooks/UseMessage.tsx new file mode 100644 index 0000000..249a3bf --- /dev/null +++ b/frontend/src/hooks/UseMessage.tsx @@ -0,0 +1,27 @@ +import React, { useState } from 'react'; +import MessageDialog from "../components/MessageDialog"; + +const useMessage = () => { + const [isOpen, setIsOpen] = useState(false); + + const [title, setTitle] = useState(""); + const [subtitle, setSubtitle] = useState(""); + + const message = (title: string, subtitle: string) => { + setIsOpen(true); + setTitle(title); + setSubtitle(subtitle); + }; + + const handleClose = () => { + setIsOpen(false); + }; + + const MessageDialogComponent = isOpen && ( + + ); + + return { message, MessageDialogComponent }; +} + +export default useMessage; diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx index bf79a65..b486ee5 100644 --- a/frontend/src/pages/Profile.tsx +++ b/frontend/src/pages/Profile.tsx @@ -8,8 +8,8 @@ import { Map } from '../types/Map'; import { ticks_to_time } from '../utils/Time'; import "../css/Profile.css"; import { API } from '../api/Api'; -import useConfirm from '../components/UseConfirm'; -import useMessage from '../components/UseMessage'; +import useConfirm from '../hooks/UseConfirm'; +import useMessage from '../hooks/UseMessage'; interface ProfileProps { profile?: UserProfile; -- cgit v1.2.3