add medals table

docs/style.css

@@ -1751,6 +1751,9 @@ details.collapse summary::-webkit-details-marker {
 .inline-block {
   display: inline-block;
 }
+.flex {
+  display: flex;
+}
 .table {
   display: table;
 }
@@ -1763,6 +1766,9 @@ details.collapse summary::-webkit-details-marker {
 .w-1\/4 {
   width: 25%;
 }
+.w-1\/6 {
+  width: 16.666667%;
+}
 .w-3\/5 {
   width: 60%;
 }
@@ -1778,6 +1784,12 @@ details.collapse summary::-webkit-details-marker {
 .min-w-24 {
   min-width: 6rem;
 }
+.flex-auto {
+  flex: 1 1 auto;
+}
+.flex-none {
+  flex: none;
+}
 .rounded-box {
   border-radius: var(--rounded-box, 1rem);
 }
@@ -1913,3 +1925,15 @@ html {
 .red {
   color: #EE334E;
 }
+
+.gold {
+  color: #FFD700;
+}
+
+.silver {
+  color: #C0C0C0;
+}
+
+.bronze {
+  color: #CD7F32;
+}

src/calendar.ts

@@ -29,7 +29,7 @@ export class Calendar {
 
   private addSport(sportKey: string, sportName: string) {
     if (!this.sports.find(sport => sport.key === sportKey)) {
-      this.debug(`Adding sport: ${sportName} (${sportKey})`);
+      // this.debug(`Adding sport: ${sportName} (${sportKey})`);
       this.sports.push({
         key: sportKey,
         name: sportName,
@@ -40,7 +40,7 @@ export class Calendar {
 
   private addNOC(noc: string) {
     if (!this.nocs.includes(noc)) {
-      this.debug(`Adding NOC: ${noc}`);
+      // this.debug(`Adding NOC: ${noc}`);
       this.nocs.push(noc);
     }
   }
@@ -49,7 +49,7 @@ export class Calendar {
     this.addSport(sportKey, sportName);
     const sport = this.sports.find((sport) => sport.key === sportKey)!;
     if (!sport.NOCS.includes(noc)) {
-      this.debug(`Adding NOC: ${noc} to sport: ${sportKey}`);
+      // this.debug(`Adding NOC: ${noc} to sport: ${sportKey}`);
       sport.NOCS.push(noc);
     }
   };
@@ -63,6 +63,8 @@ export class Calendar {
 
     this.generateMainPage();
     this.generateTodaysPage();
+    this.genereateMedalsPage();
+
     this.generateCSS();
   }
 
@@ -72,7 +74,7 @@ export class Calendar {
   }
 
   private async downloadScheduleFromOfficialWebsite(sportKey: string) {
-    this.debug(`Checking cache for schedule for ${sportKey}`);
+    // this.debug(`Checking cache for schedule for ${sportKey}`);
     const cacheFile = `${__dirname}/../cache/${this.language}/${sportKey}.html`;
 
     if (!hasFile(cacheFile)) {
@@ -120,12 +122,20 @@ export class Calendar {
         const competitors = unit.competitors
           .filter((competitor: any) => competitor.noc && isValidNOC(competitor.noc))
           .sort((a: any, b: any) => a.order > b.order ? 1 : -1);
-        event._NOCS = competitors.map((competitor: any) => {
-          event._COMPETITORS.push({ noc: competitor.noc, name: competitor.name });
+
+        for (const competitor of competitors) {
           this.addSportNOC(sportKey, sportName, competitor.noc);
           this.addNOC(competitor.noc);
-          return competitor.noc;
-        });
+          event._COMPETITORS.push({ noc: competitor.noc, name: competitor.name });
+          if (!event._NOCS.includes(competitor.noc)) {
+            event._NOCS.push(competitor.noc);
+          }
+          switch (competitor.results?.medalType) {
+            case "ME_GOLD": this.medals.push({ name: competitor.name, noc: competitor.noc, sport: sportName, unit: unit.eventUnitName, date: unit.endDateTimeUtc, color: "gold" }); break;
+            case "ME_SILVER": this.medals.push({ name: competitor.name, noc: competitor.noc, sport: sportName, unit: unit.eventUnitName, date: unit.endDateTimeUtc, color: "silver" }); break;
+            case "ME_BRONZE": this.medals.push({ name: competitor.name, noc: competitor.noc, sport: sportName, unit: unit.eventUnitName, date: unit.endDateTimeUtc, color: "bronze" }); break;
+          }
+        }
 
         // two competitors, we put them in the summary
         if (competitors.length === 2) {
@@ -429,6 +439,82 @@ export class Calendar {
     );
   }
 
+  private genereateMedalsPage() {
+    const table: any[] = [];
+    for (const medal of this.medals) {
+      if (!table.find((noc) => noc.noc === medal.noc)) {
+        table.push({ noc: medal.noc, gold: 0, silver: 0, bronze: 0 });
+      }
+      table.find((noc) => noc.noc === medal.noc)[medal.color] += 1;
+    }
+
+    const content: string[] = [];
+    content.push(`<div class="collapse bg-gray-100 mb-1">`);
+    content.push(`  <div class="flex collapse-title text-xl font-medium">`);
+    content.push(`    <span class="inline-block flex-auto"></span>`);
+    content.push(`    <span class="inline-block text-center w-1/6 flex-none gold">&#9679;</span>`);
+    content.push(`    <span class="inline-block text-center w-1/6 flex-none silver">&#9679;</span>`);
+    content.push(`    <span class="inline-block text-center w-1/6 flex-none bronze">&#9679;</span>`);
+    content.push(`    <span class="inline-block text-center w-1/6 flex-none">TOTAL</span>`);
+    content.push(`  </div>`);
+    content.push(`</div>`);
+
+    table.sort((a, b) => {
+      if (a.gold !== b.gold) {
+        return a.gold < b.gold ? 1 : -1;
+      }
+      if (a.silver !== b.silver) {
+        return a.silver < b.silver ? 1 : -1;
+      }
+      if (a.bronze !== b.bronze) {
+        return a.bronze < b.bronze ? 1 : -1;
+      }
+      return 0;
+    }).forEach((noc) => {
+      content.push(`<div class="collapse collapse-arrow bg-gray-100 mb-1">`);
+      content.push(`  <input type="radio" name="accordion">`);
+      content.push(`  <div class="flex collapse-title text-xl font-medium">`);
+      content.push(`    <span class="inline-block flex-auto">${getNOCFlag(noc.noc)} ${getNOCName(noc.noc)}</span>`);
+      content.push(`    <span class="inline-block text-center w-1/6 flex-none">${noc.gold}</span>`);
+      content.push(`    <span class="inline-block text-center w-1/6 flex-none">${noc.silver}</span>`);
+      content.push(`    <span class="inline-block text-center w-1/6 flex-none">${noc.bronze}</span>`);
+      content.push(`    <span class="inline-block text-center w-1/6 flex-none">${noc.gold + noc.silver + noc.bronze}</span>`);
+      content.push(`  </div>`);
+      content.push(`  <div class="collapse-content">`)
+      content.push(`  <table class="table-full">`);
+
+      let lastDate = "";
+      for (const medal of this.medals.filter((m) => m.noc === noc.noc).sort((a, b) => a.date > b.date ? -1 : 1)) {
+        let medalDate = medal.date.substring(0, 10);
+        if (medalDate !== lastDate) {
+          content.push(`    <tr><td colspan="3" class="font-medium">${medalDate}</td></tr>`);
+        }
+        lastDate = medalDate;
+
+        content.push(`    <tr>`);
+        content.push(`      <td class="${medal.color}">&#9679;</td>`);
+        content.push(`      <td>${medal.name}</td>`);
+        content.push(`      <td>${medal.sport} - ${medal.unit}</td>`);
+        content.push(`    </tr>`);
+      }
+      content.push(`  </table>`);
+      content.push(`  </div>`);
+      content.push(`</div>`);
+    })
+
+    const template = readFile(`${__dirname}/medals/template.html`);
+    const output = translate.translate(
+      template.replace("{{medals}}", content.join("\r\n")),
+      this.language,
+    );
+    saveFile(
+      this.language === "en" ?
+        "docs/medals.html" :
+        `docs/${this.language}/medals.html`,
+      output
+    );
+  }
+
   private generateCSS() {
     postcss([autoprefixer, tailwindcss])
       .process(readFile(`${__dirname}/index/template.css`), { from: "index/template.css", to: "docs/style.css" })

src/ics.ts

@@ -12,7 +12,7 @@ const debug = Debug("paris2024:ics");
  * @param {object[]} events 
  */
 export const generateICS = (title: string, key: string, events: Event[]): void => {
-  debug(`Generating ICS file for ${title} (${key}) with ${events.length} events`);
+  // debug(`Generating ICS file for ${title} (${key}) with ${events.length} events`);
   const lines: string[] = [];
   lines.push("BEGIN:VCALENDAR");
   lines.push("VERSION:2.0");

src/index/template.css

@@ -25,3 +25,15 @@ html {
 .red {
   color: #EE334E;
 }
+
+.gold {
+  color: #FFD700;
+}
+
+.silver {
+  color: #C0C0C0;
+}
+
+.bronze {
+  color: #CD7F32;
+}

src/medals/template.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html data-theme="cmyk">
+
+<head>
+  <title>Paris 2024 - {{translate_medalsTable}}</title>
+  <link href="./style.css?refresh=20240730" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="Paris 2024 - {{translate_medalsTable}}">
+  <meta name="keywords" content="Paris 2024 - {{translate_medalsTable}}">
+  <meta name="author" content="Fabrice LAMANT">
+</head>
+
+<body>
+  <div class="p-4">
+    <div class="navbar bg-base-100">
+      <div class="navbar-start">
+        <div class="dropdown">
+          <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
+              stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
+            </svg>
+          </div>
+          <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-50 mt-3 w-52 p-2 shadow">
+            <li><a href="./index.html">{{translate_calendars}}</a></li>
+            <li><a href="./today.html">{{translate_todaysEvents}}</a></li>
+            <li><a href="./medals.html">{{translate_medalsTable}}</a></li>
+            <hr />
+            <li><a href="https://fabrice404.github.io/olympics-calendar/index.html">English</a></li>
+            <li><a href="https://fabrice404.github.io/olympics-calendar/ja/index.html">日本語</a></li>
+            <li><a href="https://fabrice404.github.io/olympics-calendar/ko/index.html">한국어</a></li>
+            <li><a href="https://fabrice404.github.io/olympics-calendar/ru/index.html">Русский</a></li>
+            <li><a href="https://fabrice404.github.io/olympics-calendar/zh/index.html">中文</a></li>
+            <hr />
+            <li><a href="https://github.com/fabrice404/olympics-calendar" target="_blank">Source code</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="navbar-center">
+        <a class="btn btn-ghost text-xl" href="./">Paris 2024 - {{translate_medalsTable}}</a>
+      </div>
+      <div class="navbar-end">
+      </div>
+    </div>
+
+    <div>
+      {{medals}}
+    </div>
+
+    <div class="text-sm my-10 text-center">
+      {{translate_disclaimer}}
+    </div>
+  </div>
+
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-0KQC1F1K4H"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+    gtag('config', 'G-0KQC1F1K4H');
+  </script>
+</body>

src/types.d.ts

@@ -35,4 +35,7 @@ export interface Medal {
   color: "gold" | "silver" | "bronze";
   name: string;
   noc: string;
+  sport: string;
+  unit: string;
+  date: string;
 }

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./docs/**/*.html"],
+  content: ["./docs/*.html"],
   theme: {
     extend: {
     },