change background

hardbulls · Apr 12, 2024 · 9db9f40 · 9db9f40
1 parent 00f924a
commit 9db9f40
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 52 deletions.
diff --git a/public/favicon.ico → favicon.ico b/public/favicon.ico → favicon.ico
diff --git a/public/icon_256.png → icon_256.png b/public/icon_256.png → icon_256.png
diff --git a/index.html b/index.html
@@ -2,10 +2,10 @@
 <html>
 
 <head>
-  <base href="">
+  <base href="/">
 
   <title>Hard Bulls - Game Day</title>
-  <link rel="icon" href="./public/favicon.ico"/>
+  <link rel="icon" href="/favicon.ico"/>
 
   <script type="module" src="/src/main.ts"></script>
 </head>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hardbulls/gameday",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "private": false,
   "description": "Generate shareable gameday templates.",
   "main": "dist/main.mjs",
@@ -16,9 +16,9 @@
     "url": "git+https://github.com/hardbulls/gameday.git"
   },
   "keywords": [
-    "baseball",
-    "scoreboard",
+    "hard bulls",
     "bulls",
+    "game day",
     "baseball"
   ],
   "author": "Arjan Frans",

diff --git a/src/draw.ts b/src/draw.ts
@@ -71,3 +71,44 @@ export function drawRoundedRightSquare(
   ctx.closePath();
   ctx.stroke();
 }
+
+export async function drawImage(
+  ctx: CanvasRenderingContext2D,
+  src: string,
+  dx: number,
+  dy: number,
+  width: number,
+  height: number,
+): Promise<void> {
+  const image = new Image();
+
+  image.src = src;
+
+  return new Promise((resolve, reject) => {
+    image.onload = () => {
+      // Specify the target width and height
+      const targetWidth = width; // Change this to your desired width
+      const targetHeight = height; // Change this to your desired height
+
+      // Calculate the scaling factors to cover the specified width and height
+      const scaleX = targetWidth / image.width;
+      const scaleY = targetHeight / image.height;
+
+      // Choose the larger scaling factor to cover both width and height
+      const scale = Math.max(scaleX, scaleY);
+
+      // Calculate the destination width and height based on the scale
+      const dWidth = image.width * scale;
+      const dHeight = image.height * scale;
+
+      // Draw the image with the calculated parameters
+      ctx.drawImage(image, dx, dy, dWidth, dHeight);
+
+      resolve();
+    };
+
+    image.onerror = () => {
+      reject();
+    };
+  });
+}
diff --git a/src/main.css b/src/main.css
@@ -6,7 +6,7 @@ body {
     margin: 0;
     width: 100%;
     font-family: sans-serif;
-    background-color: rgb(196, 196, 196);
+    background-color: #dcdcdc;
     display: flex;
 }
 

diff --git a/src/main.ts b/src/main.ts
@@ -6,7 +6,11 @@ import Font_Steelfish from "./assets/steelfish.woff2";
 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 {
+  drawImage,
+  drawRoundedLeftSquare,
+  drawRoundedRightSquare,
+} from "./draw.ts";
 import { imageToBlob } from "./image-to-blob.ts";
 
 const BULLS_COLOR = "#e20613";
@@ -39,7 +43,7 @@ function getImageUrl(name: string) {
 }
 
 async function controls(
-  handleSelect: (url: string) => void,
+  handleSelect: (url: string) => Promise<void>,
 ): Promise<HTMLSelectElement> {
   const selectBackground = document.createElement("select");
 
@@ -104,10 +108,10 @@ async function controls(
     selectBackground.add(new Option(name, url));
   }
 
-  selectBackground.addEventListener("change", (event) => {
+  selectBackground.addEventListener("change", async (event) => {
     const select = event.target as HTMLSelectElement;
 
-    handleSelect(select.value ? getImageUrl(select.value) : "");
+    await handleSelect(select.value ? getImageUrl(select.value) : "");
   });
 
   return selectBackground;
@@ -118,7 +122,7 @@ function download(handleDownload: () => void): HTMLButtonElement {
 
   downloadButton.textContent = "Download Image";
 
-  downloadButton.addEventListener("click", (event) => {
+  downloadButton.addEventListener("click", async (event) => {
     event.preventDefault();
 
     handleDownload();
@@ -127,47 +131,6 @@ function download(handleDownload: () => void): HTMLButtonElement {
   return downloadButton;
 }
 
-async function drawImage(
-  ctx: CanvasRenderingContext2D,
-  src: string,
-  dx: number,
-  dy: number,
-  width: number,
-  height: number,
-): Promise<void> {
-  const image = new Image();
-
-  image.src = src;
-
-  return new Promise((resolve, reject) => {
-    image.onload = () => {
-      // Specify the target width and height
-      const targetWidth = width; // Change this to your desired width
-      const targetHeight = height; // Change this to your desired height
-
-      // Calculate the scaling factors to cover the specified width and height
-      const scaleX = targetWidth / image.width;
-      const scaleY = targetHeight / image.height;
-
-      // Choose the larger scaling factor to cover both width and height
-      const scale = Math.max(scaleX, scaleY);
-
-      // Calculate the destination width and height based on the scale
-      const dWidth = image.width * scale;
-      const dHeight = image.height * scale;
-
-      // Draw the image with the calculated parameters
-      ctx.drawImage(image, dx, dy, dWidth, dHeight);
-
-      resolve();
-    };
-
-    image.onerror = () => {
-      reject();
-    };
-  });
-}
-
 async function renderCanvas(
   outputImage: HTMLImageElement,
   canvas: HTMLCanvasElement,