More colors

olimpiadi-informatica · Sep 28, 2024 · 39df220 · 39df220
1 parent f965108
commit 39df220
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 55 deletions.
diff --git a/frontend/app/contest/[year]/page.tsx b/frontend/app/contest/[year]/page.tsx
@@ -1,10 +1,12 @@
 import type { Metadata } from "next";
 import Link from "next/link";
+import type { CSSProperties } from "react";
 
 import { ContestCard } from "~/components/contest";
 import InternationalBadge from "~/components/international";
 import { Medal } from "~/components/medal";
 import { RegionImage } from "~/components/region";
+import { Score } from "~/components/score";
 import { Table, TableHeaders, TableRow } from "~/components/table";
 import { getContestResults } from "~/lib/contest-results";
 import { getContest, getContests } from "~/lib/contests";
@@ -57,18 +59,26 @@ export default async function Page({ params: { year } }: Props) {
   const contest = await getContest(year);
   const results = await getContestResults(year);
   return (
-    <div className="flex flex-col gap-8">
+    <div
+      className="flex flex-col gap-8"
+      style={{ "--cols": contest.tasks.length + 6 } as CSSProperties}>
       <div className="mx-auto max-w-2xl">
         <ContestCard contest={contest} />
       </div>
-      <Table className="grid-cols-[repeat(10,auto)] text-center">
+      <Table className="grid-cols-[repeat(var(--cols),auto)] text-center">
         <TableHeaders>
           <div>#</div>
           <div>Nome</div>
           <div>Internazionali</div>
-          <div>Punteggio</div>
           <div>Regione</div>
-          <div className="col-span-4">Dettagli</div>
+          <div>Punteggio</div>
+          {results.tasks.map((task, i) => (
+            <div key={i} className="!opacity-100">
+              <Link href={`/task/${year}/${task}`} className="link">
+                {task}
+              </Link>
+            </div>
+          ))}
           <div className="w-min text-wrap">Partecipazioni precedenti</div>
         </TableHeaders>
         {results.results.map((result) => (
@@ -88,11 +98,6 @@ export default async function Page({ params: { year } }: Props) {
                   ))
                 : "-"}
             </div>
-            <div>
-              {result.score === null
-                ? "N/A"
-                : `${round(result.score)} / ${contest.max_score_possible}`}
-            </div>
             <div>
               {result.region && result.regionImage ? (
                 <Link href={`/region/${result.region}/${contest.year}`} className="link">
@@ -106,18 +111,16 @@ export default async function Page({ params: { year } }: Props) {
                 "-"
               )}
             </div>
-            <div className="col-span-4 grid grid-cols-subgrid text-left">
-              {results.tasks.map((task, i) => (
-                <div key={i}>
-                  <span className="inline-block min-w-8 text-center">
-                    {round(result.scores[i])}
-                  </span>{" "}
-                  <Link href={`/task/${year}/${task}`} className="link">
-                    {task}
-                  </Link>
-                </div>
-              ))}
-            </div>
+            <div>{round(result.score)}</div>
+            {result.scores.map((score, i) => (
+              <div key={i}>
+                <Score
+                  score={score}
+                  maxScore={contest.tasks[i].max_score_possible}
+                  className="w-16 mx-auto"
+                />
+              </div>
+            ))}
             <div>
               {result.past_participations.map((p) => (
                 <div key={p.year}>

diff --git a/frontend/app/contestant/[id]/page.tsx b/frontend/app/contestant/[id]/page.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import InternationalBadge from "~/components/international";
 import { Medal } from "~/components/medal";
 import { RegionImage } from "~/components/region";
+import { Score } from "~/components/score";
 import { Table, TableHeaders, TableRow } from "~/components/table";
 import { UserCard } from "~/components/user";
 import { type User, getUser } from "~/lib/user";
@@ -88,8 +89,8 @@ export default async function Page({ params: { id } }: Props) {
           <div>Anno</div>
           <div>Risultato</div>
           <div>Internazionali</div>
-          <div>Punteggio</div>
           <div>Regione</div>
+          <div>Punteggio</div>
           <div className="col-span-4">Dettagli</div>
         </TableHeaders>
         {user.participations.map((p) => (
@@ -109,7 +110,6 @@ export default async function Page({ params: { id } }: Props) {
                   ))
                 : "-"}
             </div>
-            <div>{getTotalScore(p)}</div>
             <div>
               {p.region && p.regionImage ? (
                 <Link href={`/region/${p.region}`} className="link">
@@ -123,16 +123,15 @@ export default async function Page({ params: { id } }: Props) {
                 "-"
               )}
             </div>
-            <div className="col-span-4 grid grid-cols-subgrid text-left">
-              {p.scores.map((score) => (
-                <div key={score.task}>
-                  <span className="inline-block min-w-8 text-center">{round(score.score)}</span>{" "}
-                  <Link href={`/task/${p.year}/${score.task}`} className="link">
-                    {score.task}
-                  </Link>
-                </div>
-              ))}
-            </div>
+            <div>{getTotalScore(p)}</div>
+            {p.scores.map((score) => (
+              <div key={score.task} className="flex flex-col items-center gap-1">
+                <Link href={`/task/${p.year}/${score.task}`} className="link">
+                  {score.task}
+                </Link>
+                <Score score={score.score} maxScore={score.max_score_possible} className="w-16" />
+              </div>
+            ))}
           </TableRow>
         ))}
       </Table>
@@ -142,11 +141,9 @@ export default async function Page({ params: { id } }: Props) {
 
 function getTotalScore(participation: User["participations"][number]) {
   let sum = 0;
-  let max = 0;
   for (const score of participation.scores) {
-    if (score.score === null || score.max_score_possible === null) return "N/A";
+    if (score.score === null) return "N/A";
     sum += score.score;
-    max += score.max_score_possible;
   }
-  return `${round(sum)} / ${max}`;
+  return round(sum);
 }
diff --git a/frontend/app/region/[id]/[year]/page.tsx b/frontend/app/region/[id]/[year]/page.tsx
@@ -1,9 +1,11 @@
 import type { Metadata } from "next";
 import Link from "next/link";
+import type { CSSProperties } from "react";
 
 import InternationalBadge from "~/components/international";
 import { Medal } from "~/components/medal";
 import { RegionYearCard } from "~/components/region";
+import { Score } from "~/components/score";
 import { Table, TableHeaders, TableRow } from "~/components/table";
 import { getRegion } from "~/lib/region";
 import { type RegionResults, getRegionResults } from "~/lib/region-results";
@@ -41,12 +43,14 @@ export default async function Page({ params }: Props) {
   const result = results.results.find((result) => result.year === year)!;
   const summary = region.years.find((year) => year.year === result.year)!;
 
+  const tasks = result.contestants[0].task_scores.map((task) => task.name);
+
   return (
     <div className="flex flex-col gap-8">
       <div className="mx-auto max-w-2xl">
         <RegionYearCard region={region} year={year} />
       </div>
-      <div>
+      <div style={{ "--cols": tasks.length + 4 } as CSSProperties}>
         <h3 className="m-4 text-center text-2xl font-bold">
           <Link href={`/contest/${result.year}`} className="link">
             {summary?.location.location ?? "OII"} {result.year}
@@ -58,7 +62,13 @@ export default async function Page({ params }: Props) {
             <div>Risultato</div>
             <div>Internazionali</div>
             <div>Punteggio</div>
-            <div className="col-span-4">Dettagli</div>
+            {tasks.map((task) => (
+              <div key={task} className="!opacity-100">
+                <Link href={`/task/${year}/${task}`} className="link">
+                  {task}
+                </Link>
+              </div>
+            ))}
           </TableHeaders>
           {result.contestants.map((user) => (
             <TableRow key={user.contestant.id}>
@@ -80,16 +90,15 @@ export default async function Page({ params }: Props) {
                   : "-"}
               </div>
               <div>{getTotalScore(user)}</div>
-              <div className="col-span-4 grid grid-cols-subgrid text-left">
-                {user.task_scores.map((task) => (
-                  <div key={task.name}>
-                    <span className="inline-block min-w-8 text-center">{round(task.score)}</span>{" "}
-                    <Link href={`/task/${result.year}/${task.name}`} className="link">
-                      {task.name}
-                    </Link>
-                  </div>
-                ))}
-              </div>
+              {user.task_scores.map((task) => (
+                <div key={task.name}>
+                  <Score
+                    score={task.score}
+                    maxScore={task.max_score_possible}
+                    className="w-16 mx-auto"
+                  />
+                </div>
+              ))}
             </TableRow>
           ))}
         </Table>
@@ -102,11 +111,9 @@ type Participation = RegionResults["results"][number]["contestants"][number];
 
 function getTotalScore(participation: Participation) {
   let total = 0;
-  let max = 0;
   for (const score of participation.task_scores) {
-    if (score.score === null || score.max_score_possible === null) return "N/A";
+    if (score.score === null) return "N/A";
     total += score.score;
-    max += score.max_score_possible;
   }
-  return `${round(total)} / ${max}`;
+  return round(total);
 }
diff --git a/frontend/app/task/[year]/[name]/page.tsx b/frontend/app/task/[year]/[name]/page.tsx
@@ -1,11 +1,11 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 
+import { Score } from "~/components/score";
 import { Table, TableHeaders, TableRow } from "~/components/table";
 import { TaskCard } from "~/components/task";
 import { getTask } from "~/lib/task";
 import { getTasks } from "~/lib/tasks";
-import { round } from "~/lib/utils";
 
 export async function generateStaticParams() {
   const tasks = await getTasks();
@@ -71,7 +71,13 @@ export default async function Page({ params: { year, name } }: Props) {
                 {user.contestant.first_name} {user.contestant.last_name}
               </Link>
             </div>
-            <div>{round(user.score)}</div>
+            <div>
+              <Score
+                score={user.score}
+                maxScore={task.max_score_possible}
+                className="w-16 mx-auto"
+              />
+            </div>
           </TableRow>
         ))}
       </Table>

diff --git a/frontend/components/score.tsx b/frontend/components/score.tsx
@@ -0,0 +1,33 @@
+import clsx from "clsx";
+
+import { round } from "~/lib/utils";
+
+export function Score({
+  score,
+  maxScore,
+  className,
+}: {
+  score: number | null;
+  maxScore: number | null;
+  className?: string;
+}) {
+  if (score === null || maxScore === null) return "N/A";
+
+  const percent = Math.floor((score / maxScore) * 100);
+
+  return (
+    <span
+      className={clsx("block rounded-box text-black border border-black/10", className, {
+        "font-bold": percent === 100,
+        "bg-emerald-600": percent > 90,
+        "bg-emerald-500": percent > 75 && percent <= 90,
+        "bg-emerald-400": percent > 60 && percent <= 75,
+        "bg-emerald-300": percent > 45 && percent <= 60,
+        "bg-emerald-200": percent > 30 && percent <= 45,
+        "bg-emerald-100": percent > 15 && percent <= 30,
+        "bg-emerald-50": percent <= 15,
+      })}>
+      {round(score)}
+    </span>
+  );
+}