fix styling

src/date.ts

@@ -16,3 +16,7 @@ export function toTimeString(date: Date): string {
 export function isDateBeforeToday(date: Date) {
   return new Date(date.toDateString()) < new Date(new Date().toDateString());
 }
+
+export function isPastDate(date: Date) {
+  return date < new Date();
+}

src/games-repository.ts

@@ -1,5 +1,5 @@
 import { Game } from "./model/game.ts";
-import { isDateBeforeToday, toDateString, toTimeString } from "./date.ts";
+import { isPastDate, toDateString, toTimeString } from "./date.ts";
 
 type ApiGame = {
   venue: string;
@@ -87,7 +87,7 @@ export abstract class GamesRepository {
 
       const gameDate = toDateString(gameDateTime);
       const gameIdentifier = `${apiGame.home}_${apiGame.away}_${apiGame.venue}_${gameDate}`;
-      const isFutureGame = !isDateBeforeToday(gameDateTime);
+      const isFutureGame = !isPastDate(gameDateTime);
 
       if (apiGame.status === "scheduled" && isHomeGame && isFutureGame) {
         const existingGame = result[gameIdentifier] || undefined;

src/image-to-blob.ts

@@ -0,0 +1,5 @@
+export async function imageToBlob(url: string) {
+  const response = await fetch(url);
+
+  return await response.blob();
+}

src/main.css

@@ -7,6 +7,7 @@ body {
     width: 100%;
     font-family: sans-serif;
     background-color: rgb(196, 196, 196);
+    display: flex;
 }
 
 #controls {
@@ -15,7 +16,7 @@ body {
     justify-content: center;
     justify-items: center;
     gap: 16px;
-    width: 100%;
+    margin-inline: 12px;
 }
 
 .file-input {
@@ -67,11 +68,24 @@ body {
 #download button {
     width: 100%;
     font-size: 2em;
+    margin-inline: 12px;
 }
 
 .app {
+    margin: 0 auto;
     display: flex;
     justify-content: center;
+
+    @media (min-width: 981px) {
+        max-width: 900px;
+    }
+
+    width: 100%;
+}
+
+#output-image {
+    width: 100%;
+    height: auto;
 }
 
 .container {
@@ -80,6 +94,5 @@ body {
     display: flex;
     flex-direction: column;
     width: 100%;
-    max-width: 900px;
     gap: 16px;
 }

src/main.ts

@@ -7,6 +7,7 @@ import { GamesRepository } from "./games-repository.ts";
 import { Game } from "./model/game.ts";
 import { convertFileToBase64 } from "./file-to-base64.ts";
 import { drawRoundedLeftSquare, drawRoundedRightSquare } from "./draw.ts";
+import { imageToBlob } from "./image-to-blob.ts";
 
 const BULLS_COLOR = "#e20613";
 
@@ -51,6 +52,10 @@ async function controls(
       name: "Bulls Battery",
       url: "bulls_2.png",
     },
+    {
+      name: "Bulls Pitcher",
+      url: "bulls_4.png",
+    },
     {
       name: "Bulls Win",
       url: "bulls_3.png",
@@ -75,6 +80,14 @@ async function controls(
       name: "U10 Win",
       url: "u10_1.png",
     },
+    {
+      name: "U12 Huddle",
+      url: "u12_1.png",
+    },
+    {
+      name: "U14 Batter",
+      url: "u14_1.png",
+    },
     {
       name: "U16 Team",
       url: "u16_1.png",
@@ -165,14 +178,15 @@ async function renderCanvas(
   canvas.width = 900;
   canvas.height = 1600;
 
+  ctx.reset();
   ctx.fillStyle = "#000000";
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 
   if (options.background) {
     await drawImage(ctx, options.background, 0, 0, 900, 450);
 
     ctx.shadowColor = "#000000";
-    ctx.shadowBlur = 50;
+    ctx.shadowBlur = 30;
     ctx.fillStyle = "#000000";
     ctx.fillRect(0, 450, canvas.width, canvas.height - 450);
 
@@ -241,34 +255,51 @@ async function renderCanvas(
 
     ctx.fill();
 
-    ctx.font = "60px Steelfish";
+    const gameFontSize = 60;
+
+    ctx.font = `${gameFontSize}px Steelfish`;
     ctx.fillStyle = "#ffffff";
     ctx.textAlign = "right";
 
     const date = new Date(game.date);
+
     ctx.fillText(
       `${date.getDate().toString().padStart(2, "0")}.${(date.getMonth() + 1)
         .toString()
-        .padStart(2, "0")}`,
-      90 + offsetX,
-      gamesOffset + 60 + offsetY,
+        .padStart(2, "0")}.`,
+      96 + offsetX,
+      gamesOffset + gameFontSize + offsetY,
     );
 
     ctx.fillStyle = "#000000";
     ctx.textAlign = "left";
 
     ctx.fillText(
-      `${game.times.join(" | ")}`,
+      `${game.times[0]}`,
       114 + offsetX,
-      gamesOffset + 60 + offsetY,
+      gamesOffset + gameFontSize + offsetY,
     );
 
+    if (game.times.length > 1) {
+      ctx.fillText(
+        `|`,
+        114 + offsetX + 82,
+        gamesOffset + gameFontSize + offsetY,
+      );
+
+      ctx.fillText(
+        `${game.times[1]}`,
+        114 + offsetX + 100,
+        gamesOffset + gameFontSize + offsetY,
+      );
+    }
+
     ctx.textAlign = "right";
 
     const teamsDisplay = `${game.home} vs. ${game.away}${
       game.league ? ` (${game.league.toUpperCase()})` : ""
     }`;
-    ctx.fillText(teamsDisplay, 770, gamesOffset + 60 + offsetY);
+    ctx.fillText(teamsDisplay, 770, gamesOffset + gameFontSize + offsetY);
   }
 
   outputImage.src = canvas.toDataURL("image/png");
@@ -336,6 +367,8 @@ function uploadBackground(
   const canvas = document.createElement("canvas");
   const outputImage = document.createElement("img");
 
+  outputImage.id = "output-image";
+
   const uploadField = uploadBackground(async (file) => {
     await renderCanvas(outputImage, canvas, {
       background: await convertFileToBase64(file),
@@ -344,10 +377,8 @@ function uploadBackground(
   });
 
   const backgroundSelect = await controls(async (background) => {
-    canvas.getContext("2d")?.reset();
-
     await renderCanvas(outputImage, canvas, {
-      background,
+      background: await convertFileToBase64(await imageToBlob(background)),
       games,
     });
   });