feat: dailystats

src/components/Breakdown.ts

@@ -0,0 +1,183 @@
+import Children from './Children.js';
+
+const Breakdown = {
+  Root(...children: string[]) {
+    return `
+      <style>
+        .breakdown {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+      </style>
+
+      <div class="breakdown">
+        ${Children(children)}
+      </div>
+    `;
+  },
+
+  Row(
+    name: string,
+    winrate: number,
+    careerWinrate: number,
+    wn8: number,
+    careerWn8: number,
+    averageDamage: number,
+    careerAverageDamage: number,
+    survival: number,
+    careerSurvival: number,
+    battles: number,
+    careerBattles: number,
+    icon?: string,
+  ) {
+    return `
+      <style>
+        .breakdown-row {
+          display: flex;
+          gap: 16px;
+        }
+      </style>
+
+      <div class="breakdown-row">
+        ${this.RowDiscriminator(name, icon)}
+        ${this.RowStat(
+          'Winrate',
+          `${(winrate * 100).toFixed(2)}%`,
+          `${(careerWinrate * 100).toFixed(2)}%`,
+          winrate - careerWinrate,
+        )}
+        ${this.RowStat(
+          'Damage',
+          averageDamage.toFixed(2),
+          careerAverageDamage.toFixed(2),
+          averageDamage - careerAverageDamage,
+        )}
+        ${this.RowStat(
+          'Survival',
+          `${(survival * 100).toFixed(2)}%`,
+          `${(careerSurvival * 100).toFixed(2)}%`,
+          survival - careerSurvival,
+        )}
+        ${this.RowStat('Battles', battles.toFixed(0), careerBattles.toFixed(0))}
+      </div>
+    `;
+
+    /*
+    ${this.RowStat(
+          'WN8',
+          wn8.toFixed(0),
+          careerWn8.toFixed(0),
+          wn8 - careerWn8,
+        )}
+        */
+  },
+
+  RowDiscriminator(name: string, icon?: string) {
+    return `
+      <style>
+        .breakdown-row-discriminator {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          box-sizing: border-box;
+          width: 0px;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .breakdown-row-discriminator-icon {
+          width: 100%;
+          flex: 1;
+          object-fit: cover;
+        }
+
+        .breakdown-row-discriminator-name {
+          color: #A0A0A0;
+          font-size: 16px;
+          text-align: center;
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 100%;
+        }
+      </style>
+
+      <div class="breakdown-row-discriminator">
+        ${
+          icon
+            ? `<img src="${icon}" class="breakdown-row-discriminator-icon" />`
+            : ''
+        }
+        <span class="breakdown-row-discriminator-name">${name}</span>
+      </div>
+    `;
+  },
+
+  RowStat(name: string, value: string, career: string, delta?: number) {
+    return `
+      <style>
+        .breakdown-row-stat {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+          align-items: center;
+          justify-content: center;
+          flex: 1;
+        }
+
+        .breakdown-row-stat-career {
+          color: #A0A0A0;
+          font-size: 12px;
+        }
+
+        .breakdown-row-stat-name {
+          color: #A0A0A0;
+          font-size: 16px;
+        }
+
+        .breakdown-row-stat-value {
+          display: flex;
+          gap: 4px;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .breakdown-row-stat-value-delta {
+          width: 12px;
+          height: 12px;
+        }
+
+        .breakdown-row-stat-value-text {
+          color: white;
+          font-size: 16px;
+          font-weight: bold;
+        }
+      </style>
+
+      <div class="breakdown-row-stat">
+        <span class="breakdown-row-stat-career">${career}</span>
+
+        <div class="breakdown-row-stat-value">
+          ${
+            delta
+              ? `<img src="${
+                  (delta ?? 0) > 0
+                    ? 'https://i.imgur.com/qbjiXa1.png'
+                    : 'https://i.imgur.com/3uyNhun.png'
+                }" class="breakdown-row-stat-value-delta" />`
+              : ''
+          }
+
+          <span class="breakdown-row-stat-value-text">${value}</span>
+        </div>
+
+        <span class="breakdown-row-stat-name">${name}</span>
+      </div>
+    `;
+  },
+};
+
+export default Breakdown;

src/components/NoBattlesInPeriod.ts

@@ -0,0 +1,20 @@
+export default function NoBattlesInPeriod() {
+  return `
+    <style>
+      .no-battles-in-period {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .no-battles-in-period-text {
+        font-size: 16px;
+        color: #A0A0A0;
+      }
+    </style>
+
+    <div class="no-battles-in-period">
+      <span class="no-battles-in-period-text">No battles played in this period</span>
+    </div>
+  `;
+}

src/components/PoweredByBlitzStars.ts

@@ -0,0 +1,26 @@
+export default function PoweredByBlitzStars() {
+  return `
+    <style>
+      .powered-by-blitz-stars {
+        display: flex;
+        gap: 4px;
+        justify-content: flex-end;
+      }
+
+      .powered-by-blitz-stars-icon {
+        height: 16px;
+        width: 16px;
+      }
+
+      .powered-by-blitz-stars-text {
+        font-size: 16px;
+        color: #A0A0A0;
+      }
+    </style>
+
+    <div class="powered-by-blitz-stars">
+      <img class="powered-by-blitz-stars-icon" src="https://www.blitzstars.com/assets/images/4b4cb591.TankyMcPewpew.png" />
+      <span class="powered-by-blitz-stars-text">Powered by BlitzStars</span>
+    </div>
+  `;
+}

src/components/Root.ts

@@ -1,6 +1,6 @@
 import Children from './Children.js';
 
-export default function Screenshot(...children: string[]) {
+export default function Root(...children: string[]) {
   return `
     <style>
       @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:[email protected]');
@@ -14,12 +14,12 @@ export default function Screenshot(...children: string[]) {
         font-family: 'Roboto Flex', sans-serif;
       }
 
-      #screenshot {
+      #root {
         display: flex;
       }
     </style>
 
-    <div id="screenshot">
+    <div id="root">
       ${Children(children)}
     </div>
   `;

src/components/TitleBar.ts

@@ -1,8 +1,8 @@
 export default function TitleBar(
   name: string,
-  image: string,
-  nameDiscriminator = '',
-  description = '',
+  nameDiscriminator: string,
+  image?: string,
+  description?: string,
 ) {
   return `
     <style>
@@ -51,7 +51,7 @@ export default function TitleBar(
 
     <div class="title-bar">
       <div class="title-bar-info">
-        <img class="title-bar-avatar" src="${image}" />
+        ${image ? `<img class="title-bar-avatar" src="${image}" />` : ''}
 
         <div class="title-bar-text">
           <span class="title-bar-name">