feat: support competition ranklist

package.json

@@ -1,6 +1,6 @@
 {
   "name": "onlinejudge3-fe",
-  "version": "3.5.6",
+  "version": "3.5.7",
   "description": "",
   "scripts": {
     "dev": "gulp dev",

src/@types/models.d.ts

@@ -231,9 +231,10 @@ interface IContestUser {
 }
 
 interface IRanklistProblemResultStat {
-  result: 'FB' | 'AC' | 'X' | '-' | '?';
-  attempted: number;
+  result: 'FB' | 'AC' | 'RJ' | '?' | null;
+  tries: number;
   time: number;
+  score?: number;
 }
 
 interface IRanklistRow {
@@ -243,7 +244,7 @@ interface IRanklistRow {
     oldRating?: number;
     newRating?: number;
   };
-  solved: number;
+  score: number;
   time: number;
   stats: IRanklistProblemResultStat[];
   _self?: boolean;

src/components/Ranklist.tsx

@@ -34,6 +34,7 @@ export interface Props extends RouteProps {
   rating?: boolean;
   allowGodView?: boolean;
   godView?: boolean;
+  useScore?: boolean;
   handleGodViewChange?: (god: boolean) => any;
 }
 
@@ -134,7 +135,7 @@ class Ranklist extends React.Component<Props, State> {
           'Rank',
           'Username',
           'Nickname',
-          'Solved',
+          'Score',
           'Time',
           ...problemIndex.map((pIndex) => numberToAlphabet(pIndex)),
         ],
@@ -144,14 +145,14 @@ class Ranklist extends React.Component<Props, State> {
           d.rank,
           d.user?.username || '',
           d.user?.nickname || '',
-          d.solved,
+          d.score,
           Math.floor(d.time / 60),
         ];
         problemIndex.map((pIndex) => {
           const stat = d.stats[pIndex];
           let statText = '';
-          if (stat.attempted) {
-            statText = `${stat.attempted}`;
+          if (stat.tries) {
+            statText = `${stat.tries}`;
           }
           if (stat.result === 'AC' || stat.result === 'FB') {
             statText += `/${Math.floor(stat.time / 60)}`;
@@ -182,6 +183,7 @@ class Ranklist extends React.Component<Props, State> {
       location: { query },
       rating,
       allowGodView,
+      useScore,
     } = this.props;
     const { contentWidth, showAll } = this.state;
     // const contentWidth = 0;
@@ -306,8 +308,8 @@ class Ranklist extends React.Component<Props, State> {
           )}
 
           <Table.Column
-            title="Slv."
-            key="Solved"
+            title="Score"
+            key="Score"
             align="right"
             width={width.solved}
             fixed={canFixLeft}
@@ -319,7 +321,7 @@ class Ranklist extends React.Component<Props, State> {
                     query: { userId: record.user && record.user.userId },
                   })}
                 >
-                  {record.solved}
+                  {record.score}
                 </Link>
               </div>
             )}
@@ -342,21 +344,26 @@ class Ranklist extends React.Component<Props, State> {
               render={(text, record: IRanklistRow) => {
                 const stat = record.stats[index];
                 let statText = '';
+                let extraText = '';
                 const classList: string[] = [];
-                if (stat.attempted) {
-                  statText = `${stat.attempted}`;
+                if (stat.tries) {
+                  statText = `${stat.tries}`;
                 }
                 if (stat.result === 'AC' || stat.result === 'FB') {
                   statText += `/${Math.floor(stat.time / 60)}`;
                 }
+                if (useScore && typeof stat.score === 'number') {
+                  extraText = statText;
+                  statText = `${stat.score}`;
+                }
                 switch (stat.result) {
                   case 'AC':
                     classList.push('accepted');
                     break;
                   case 'FB':
                     classList.push('fb');
                     break;
-                  case 'X':
+                  case 'RJ':
                     classList.push('failed');
                     break;
                   case '?':
@@ -365,7 +372,10 @@ class Ranklist extends React.Component<Props, State> {
                 }
                 return (
                   <div className={classNames('stat-inner', classList)}>
-                    <span>{statText}</span>
+                    <div>
+                      <p>{statText}</p>
+                      {!!extraText && <p className="stat-inner-extra">{extraText}</p>}
+                    </div>
                   </div>
                 );
               }}

src/global.less

@@ -981,10 +981,17 @@ ul {
       width: 100%;
       display: inline-table;
 
-      span {
+      div {
         display: table-cell;
         vertical-align: middle;
         padding: 8px;
+        p {
+          margin-bottom: 0;
+        }
+        .stat-inner-extra {
+          font-size: 75%;
+          opacity: 0.65;
+        }
       }
     }
   }