From 0c9fd9d315403e70443000738be561d171eb332b Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <fushar@gmail.com>
Date: Sun, 25 Aug 2024 17:51:20 +0700
Subject: [PATCH] client: beautify subtask score alignment for decimal score
 (#655)

---
 .../Programming/SubmissionDetails.jsx         | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/judgels-client/src/components/SubmissionDetails/Programming/SubmissionDetails.jsx b/judgels-client/src/components/SubmissionDetails/Programming/SubmissionDetails.jsx
index 69d161f79..d3849f80b 100644
--- a/judgels-client/src/components/SubmissionDetails/Programming/SubmissionDetails.jsx
+++ b/judgels-client/src/components/SubmissionDetails/Programming/SubmissionDetails.jsx
@@ -92,15 +92,31 @@ export function SubmissionDetails({
   };
 
   const renderScore = score => {
+    let formattedScore = score;
+
     if (score.startsWith('*')) {
-      return '✓' + score.substring(1);
-    }
-    if (score.startsWith('X')) {
-      return '✕' + score.substring(1);
+      formattedScore = '✓' + score.substring(1);
+    } else if (score.startsWith('X')) {
+      formattedScore = '✕' + score.substring(1);
     }
     return score;
   };
 
+  const renderSubtaskScore = score => {
+    if (Number.isInteger(score)) {
+      return <span className="subtask-score">{score}</span>;
+    }
+
+    const integer = Math.trunc(score);
+    const decimal = (score - integer).toString().replace('0.', '.');
+    return (
+      <>
+        <span className="subtask-score">{integer}</span>
+        <span className="subtask-score">{decimal}</span>
+      </>
+    );
+  };
+
   const renderSubtaskResults = () => {
     if (!hasSubtasks) {
       return null;
@@ -115,7 +131,7 @@ export function SubmissionDetails({
               <span className="subtask-verdict">
                 <VerdictTag verdictCode={subtaskResult.verdict.code} />
               </span>
-              <span className="subtask-score">{subtaskResult.score}</span>
+              {renderSubtaskScore(subtaskResult.score)}
             </h5>
           </summary>