feat: add StatusPage

.prettierignore

@@ -3,4 +3,5 @@ node_modules/
 /pnpm-lock.yaml
 /postcss.config.cjs
 
-src/components/Languages.tsx
+src/components/Languages.ts
+src/components/Verdict.ts

src/components/Verdict.ts

@@ -0,0 +1,17 @@
+import { Verdict } from "../app/services/status";
+
+/* eslint-disable prettier/prettier */
+export const VerdictMap: {
+    [key in Verdict]: { color: string; label: string; name: string };
+} = {
+    [Verdict.Accepted]:            { color: "#52C41A", label: "AC",  name: "Accepted"              },
+    [Verdict.WrongAnswer]:         { color: "#E74C3C", label: "WA",  name: "Wrong Answer"          },
+    [Verdict.JuryFailed]:          { color: "#0E1D69", label: "JF",  name: "Jury Failed"           },
+    [Verdict.PartialCorrect]:      { color: "#E67E22", label: "PC",  name: "Partial Correct"       },
+    [Verdict.TimeLimitExceeded]:   { color: "#052242", label: "TLE", name: "Time Limit Exceeded"   },
+    [Verdict.MemoryLimitExceeded]: { color: "#052242", label: "MLE", name: "Memory Limit Exceeded" },
+    [Verdict.RuntimeError]:        { color: "#9D3DCF", label: "RE",  name: "Runtime Error"         },
+    [Verdict.CompileError]:        { color: "#FADB14", label: "CE",  name: "Compile Error"         },
+    [Verdict.SystemError]:         { color: "#0E1D69", label: "UKE", name: "System Error"          },
+};
+/* eslint-enable prettier/prettier */

src/pages/StatusPage.tsx

@@ -0,0 +1,150 @@
+import type React from "react";
+import { lazy } from "react";
+import { useParams } from "react-router-dom";
+import {
+    Accordion,
+    AccordionItem,
+    AccordionPanel,
+    Alert,
+    AlertIcon,
+    Box,
+    Spinner,
+    Stack,
+    Tab,
+    TabList,
+    TabPanel,
+    TabPanels,
+    Tabs,
+    Text,
+    Tooltip,
+    Wrap,
+    WrapItem,
+} from "@chakra-ui/react";
+
+import { useStatusQuery } from "../app/services/status";
+import { useDetailQuery } from "../app/services/problem";
+import { LanguageMap } from "../components/Languages";
+import { VerdictMap } from "../components/Verdict";
+
+const ProblemInfoMenu = lazy(() => import("../components/ProblemInfoMenu"));
+const TitleItem = lazy(() => import("../components/AccordionTitleItem"));
+const Highlight = lazy(() => import("../components/Highlight"));
+
+const gridStyle: React.CSSProperties = {
+    width: "5.3em",
+    height: "5.3em",
+    margin: "0.2em",
+    fontSize: "1.5em",
+    padding: "0.5em",
+    textAlign: "center",
+    textShadow: "1px 1px 2px gray",
+    color: "white",
+};
+
+const topLeftStyle: React.CSSProperties = {
+    position: "absolute",
+    fontSize: "0.7em",
+};
+
+const labelStyle: React.CSSProperties = {
+    fontSize: "1.2em",
+    paddingTop: "0.6em",
+    textAlign: "center",
+};
+
+const statusStyle: React.CSSProperties = {
+    fontSize: "0.65em",
+    textAlign: "center",
+};
+
+export default function StatusPage() {
+    const { id } = useParams();
+    const sid = Number(id) || 0;
+    const { data: status } = useStatusQuery({ sid: sid });
+    const { data: problem } = useDetailQuery({ pid: status?.body.submission.problem.meta.ID || 0 });
+
+    const showSourceCode = status && status.body.submission.code !== "";
+    const showMessage = status && (status.body.context.message !== "" || status.body.context.compile_message !== "");
+
+    const emptyTab = (
+        <Alert status="warning">
+            <AlertIcon />
+            <Spinner size="sm" mr={2} />
+            <Text as="b" mr={2}>
+                Waiting for Judge...
+            </Text>
+            <Text>Please refresh the page after a few seconds.</Text>
+        </Alert>
+    );
+
+    const statusCardTab = (
+        <Wrap spacing="0.3em">
+            {status?.body.context.tasks.map((task) => (
+                <WrapItem key={task.id}>
+                    <Tooltip label={task.message}>
+                        <Box style={{ ...gridStyle, background: VerdictMap[task.verdict].color }}>
+                            <div style={topLeftStyle}>{`#${task.id}`}</div>
+                            <div>
+                                <div style={labelStyle}>{VerdictMap[task.verdict].label}</div>
+                                <div style={statusStyle}>
+                                    {`${Math.max(
+                                        task.runtime.real_time,
+                                        task.runtime.cpu_time,
+                                    )}ms/${task.runtime.memory}KB`}
+                                </div>
+                            </div>
+                        </Box>
+                    </Tooltip>
+                </WrapItem>
+            ))}
+        </Wrap>
+    );
+
+    const sourceCodeTab = (
+        <Highlight
+            lang={!showSourceCode ? "text" : LanguageMap[status.body.submission.language].prism}
+            code={status?.body.submission.code || ""}
+        />
+    );
+
+    const messageTab = (
+        <Accordion defaultIndex={[0, 1]} allowMultiple>
+            <AccordionItem>
+                <TitleItem word="Message" />
+                <AccordionPanel pb={4}>
+                    <Highlight lang="text" code={status?.body.context.message || "Not Available"} />
+                </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem>
+                <TitleItem word="Compile Message" />
+                <AccordionPanel pb={4}>
+                    <Highlight lang="text" code={status?.body.context.compile_message || "Not Available"} />
+                </AccordionPanel>
+            </AccordionItem>
+        </Accordion>
+    );
+
+    return (
+        <>
+            <Stack direction={{ base: "column", md: "row" }}>
+                <Box w="100%">
+                    <Tabs>
+                        <TabList>
+                            <Tab>Task Info</Tab>
+                            <Tab isDisabled={!showSourceCode}>Source Code</Tab>
+                            <Tab isDisabled={!showMessage}>Message</Tab>
+                        </TabList>
+                        <TabPanels>
+                            <TabPanel>{status ? statusCardTab : emptyTab}</TabPanel>
+                            <TabPanel>{sourceCodeTab}</TabPanel>
+                            <TabPanel>{messageTab}</TabPanel>
+                        </TabPanels>
+                    </Tabs>
+                </Box>
+                <Box maxW="480px">
+                    <ProblemInfoMenu data={problem?.body} />
+                </Box>
+            </Stack>
+        </>
+    );
+}

src/routes.tsx

@@ -12,6 +12,7 @@ const ProblemListPage = lazy(() => import("./pages/ProblemListPage"));
 const ProblemDetailPage = lazy(() => import("./pages/ProblemDetailPage"));
 const SubmitPage = lazy(() => import("./pages/SubmitPage"));
 const SubmissionListPage = lazy(() => import("./pages/SubmissionListPage"));
+const StatusPage = lazy(() => import("./pages/StatusPage"));
 
 export const router: RouteObject[] = [
     {
@@ -59,6 +60,14 @@ export const router: RouteObject[] = [
                     </RequireAuth>
                 ),
             },
+            {
+                path: "status/:id",
+                element: (
+                    <RequireAuth>
+                        <StatusPage />
+                    </RequireAuth>
+                ),
+            },
         ],
     },
 ];