Perf Judge view

oj-lab · Jun 16, 2024 · 02647a4 · 02647a4
1 parent ea88174
commit 02647a4
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 23 deletions.
diff --git a/src/components/icons/tabler/BrandCPPIcon.tsx b/src/components/icons/tabler/BrandCPPIcon.tsx
@@ -0,0 +1,27 @@
+import { FC } from "react";
+
+const BrandCPPIcon: FC<{
+  className?: string;
+}> = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.7}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={props.className}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M18 12h4" />
+      <path d="M20 10v4" />
+      <path d="M11 12h4" />
+      <path d="M13 10v4" />
+      <path d="M9 9a3 3 0 0 0 -3 -3h-.5a3.5 3.5 0 0 0 -3.5 3.5v5a3.5 3.5 0 0 0 3.5 3.5h.5a3 3 0 0 0 3 -3" />
+    </svg>
+  );
+};
+
+export default BrandCPPIcon;
diff --git a/src/components/icons/tabler/BrandPythonIcon.tsx b/src/components/icons/tabler/BrandPythonIcon.tsx
@@ -0,0 +1,28 @@
+import { FC } from "react";
+import { DefaultIconStrokeWidth } from "./defaults";
+
+const BrandPythonIcon: FC<{
+  className?: string;
+}> = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={DefaultIconStrokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={props.className}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M12 9h-7a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h3" />
+      <path d="M12 15h7a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-3" />
+      <path d="M8 9v-4a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v5a2 2 0 0 1 -2 2h-4a2 2 0 0 0 -2 2v5a2 2 0 0 0 2 2h4a2 2 0 0 0 2 -2v-4" />
+      <path d="M11 6l0 .01" />
+      <path d="M13 18l0 .01" />
+    </svg>
+  );
+};
+
+export default BrandPythonIcon;
diff --git a/src/components/judge/JudgeDetail.tsx b/src/components/judge/JudgeDetail.tsx
@@ -17,33 +17,32 @@ export interface JudgeDetailProps {
 }
 
 const JudgeDetail: React.FC<JudgeDetailProps> = (props) => {
-  const [copyTip, setCopyTip] = useState("Copy code");
+  const [copyTip, setCopyTip] = useState("copy code");
 
   return props.data ? (
     <div className="grid gap-2 overflow-x-auto">
       <div className="h-fit rounded border border-base-content/10 bg-base-100">
         <JudgeTable data={[props.data]} />
       </div>
       <div className="relative overflow-x-hidden">
-        <button
-          style={{
-            right: 0,
-          }}
-          className="tooltip tooltip-left absolute z-40 mr-2 mt-5"
+        <div
+          className="tooltip tooltip-left absolute right-0 z-40 mr-2 mt-4 cursor-pointer rounded"
           data-tip={copyTip}
         >
-          <CopyToClipboard
-            text={props.data.code}
-            // eslint-disable-next-line @typescript-eslint/no-misused-promises
-            onCopy={async () => {
-              setCopyTip("Copied");
-              await new Promise((resolve) => setTimeout(resolve, 500));
-              setCopyTip(`Copy code`);
-            }}
-          >
-            <DocumentDuplicateIcon className="h-5 w-5 cursor-pointer text-white hover:text-blue-600" />
-          </CopyToClipboard>
-        </button>
+          <button className="btn btn-ghost btn-sm h-4 rounded p-1 hover:bg-base-300/40">
+            <CopyToClipboard
+              text={props.data.code}
+              // eslint-disable-next-line @typescript-eslint/no-misused-promises
+              onCopy={async () => {
+                setCopyTip("copied");
+                await new Promise((resolve) => setTimeout(resolve, 500));
+                setCopyTip(`copy code`);
+              }}
+            >
+              <DocumentDuplicateIcon className="h-5 w-5 text-white/80" />
+            </CopyToClipboard>
+          </button>
+        </div>
         <Suspense fallback={<div>Loading...</div>}>
           <SyntaxHighlighter
             style={oneDark}

diff --git a/src/components/judge/JudgeTable.tsx b/src/components/judge/JudgeTable.tsx
@@ -2,11 +2,13 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import { joinClasses } from "../../utils/common";
 import { JudgeServiceModel } from "../../typings/judge";
+import BrandCPPIcon from "../icons/tabler/BrandCPPIcon";
+import BrandPythonIcon from "../icons/tabler/BrandPythonIcon";
 
 const columns = [
   { name: "Problem Title", uid: "problem" },
-  { name: "User", uid: "user" },
   { name: "Language", uid: "language" },
+  { name: "User", uid: "user" },
   { name: "Status", uid: "status" },
 ];
 
@@ -42,8 +44,8 @@ const JudgeTable: React.FC<JudgeTableProps> = (props) => {
               key={idx}
             >
               <th>{judge.problem?.title}</th>
+              <td>{RenderLanguage(judge.language)}</td>
               <td>{judge.user?.name}</td>
-              <td>{judge.language}</td>
               <td>
                 <div
                   className={joinClasses(
@@ -78,4 +80,29 @@ const JudgeTable: React.FC<JudgeTableProps> = (props) => {
   );
 };
 
+function RenderLanguage(language: string) {
+  if (language.toLowerCase() === "cpp") {
+    return (
+      <div className="badge min-w-10 border-0 bg-base-300">
+        <BrandCPPIcon className="h-4 w-4 stroke-base-content" />
+      </div>
+    );
+  }
+  if (language.toLowerCase() === "python") {
+    return (
+      <div className="badge min-w-10 border-0 bg-base-300">
+        <BrandPythonIcon className="h-4 w-4 stroke-base-content" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="badge min-w-10 border-0 bg-base-300">
+      <span className="text-[10px] font-semibold">
+        {language.toUpperCase()}
+      </span>
+    </div>
+  );
+}
+
 export default JudgeTable;
diff --git a/src/mocks/rest/judge.ts b/src/mocks/rest/judge.ts
@@ -58,7 +58,7 @@ const judges: JudgeServiceModel.JudgeInfo[] = [
       title: "A + B Problem",
       tags: [{ name: "Primer" }, { name: "Math" }],
     },
-    language: "Cpp",
+    language: "Python",
     code: "#include<bits/stdc++.h>\nusing namespace std;\nint main()\n{}\n",
     status: "finished",
     verdict: "WrongAnswer",
@@ -74,7 +74,7 @@ const judges: JudgeServiceModel.JudgeInfo[] = [
       title: "A + B Problem",
       tags: [{ name: "Primer" }, { name: "Math" }],
     },
-    language: "Cpp",
+    language: "Javascript",
     code: "#include<bits/stdc++.h>\nusing namespace std;\nint main()\n{}\n",
     status: "finished",
     verdict: "CompileError",
@@ -89,7 +89,7 @@ export const getJudgeInfoList = http.get("/api/v1/judge", (info) => {
     list: JudgeServiceModel.JudgeInfo[];
   } = {
     total: random,
-    list: judges.slice(0, random),
+    list: judges,
   };
   return new Response(JSON.stringify(response), {
     status: 200,