Skip to content

Commit

Permalink
Add translations
Browse files Browse the repository at this point in the history
arjanfrans committed Apr 15, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 63dd9d3 commit 83a4c16
Showing 10 changed files with 203 additions and 153 deletions.
26 changes: 8 additions & 18 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@hardbulls/gameday",
"version": "1.0.1",
"version": "1.0.2",
"private": false,
"description": "Generate shareable gameday templates.",
"main": "dist/main.mjs",
1 change: 1 addition & 0 deletions src/config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const BULLS_COLOR = "#e20613";
4 changes: 4 additions & 0 deletions src/draw.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
export function rotateCanvas(ctx: CanvasRenderingContext2D, angle: number) {
ctx.rotate((angle * Math.PI) / 180);
}

export function drawRoundedSquare(
ctx: CanvasRenderingContext2D,
x: number,
26 changes: 26 additions & 0 deletions src/fonts.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import Font_NeueAaachen from "./assets/NeueAachenBlack.woff2";
import Font_AccidentalPresidency from "./assets/AccidentalPresidency.woff2";
import Font_Steelfish from "./assets/steelfish.woff2";

export async function loadFonts() {
for (const font of [
{ name: "Neue Aachen", data: Font_NeueAaachen },
{
name: "Accidental Presidency",
data: Font_AccidentalPresidency,
},
{
name: "Steelfish",
data: Font_Steelfish,
},
]) {
const fontFace = new FontFace(
font.name,
`url("${font.data}") format("woff2")`,
);

await fontFace.load();

document.fonts.add(fontFace);
}
}
2 changes: 1 addition & 1 deletion src/games-repository.ts
Original file line number Diff line number Diff line change
@@ -86,7 +86,7 @@ export abstract class GamesRepository {
);

const gameDate = toDateString(gameDateTime);
const gameIdentifier = `${apiGame.home}_${apiGame.away}_${apiGame.venue}_${gameDate}`;
const gameIdentifier = `${apiGame.league}_${apiGame.home}_${apiGame.away}_${apiGame.venue}_${gameDate}`;
const isFutureGame = !isPastDate(gameDateTime);

if (apiGame.status === "scheduled" && isHomeGame && isFutureGame) {
149 changes: 16 additions & 133 deletions src/main.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import "./main.css";
import BullPng from "./assets/bull.png";
import Font_NeueAaachen from "./assets/NeueAachenBlack.woff2";
import Font_AccidentalPresidency from "./assets/AccidentalPresidency.woff2";
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";
@@ -12,123 +9,16 @@ import {
drawRoundedRightSquare,
} from "./draw.ts";
import { imageToBlob } from "./image-to-blob.ts";

const BULLS_COLOR = "#e20613";

async function loadFonts() {
for (const font of [
{ name: "Neue Aachen", data: Font_NeueAaachen },
{
name: "Accidental Presidency",
data: Font_AccidentalPresidency,
},
{
name: "Steelfish",
data: Font_Steelfish,
},
]) {
const fontFace = new FontFace(
font.name,
`url("${font.data}") format("woff2")`,
);

await fontFace.load();

document.fonts.add(fontFace);
}
}

function getImageUrl(name: string) {
return new URL(`./assets/backgrounds/${name}`, import.meta.url).href;
}

async function controls(
handleSelect: (url: string) => Promise<void>,
): Promise<HTMLSelectElement> {
const selectBackground = document.createElement("select");

const images = [
{
name: "Bulls Outfielder",
url: "bulls_1.png",
},
{
name: "Bulls Battery",
url: "bulls_2.png",
},
{
name: "Bulls Pitcher",
url: "bulls_4.png",
},
{
name: "Bulls Win",
url: "bulls_3.png",
},
{
name: "Bandidos Team",
url: "bandidos_1.png",
},
{
name: "Bandidos Huddle",
url: "bandidos_2.png",
},
{
name: "Bandidas Youth Team",
url: "bandidas_1.png",
},
{
name: "Barons Team",
url: "barons_1.png",
},
{
name: "Bullets Team",
url: "bullets_1.png",
},
{
name: "U8 Win",
url: "u8_1.png",
},
{
name: "U10 Batter",
url: "u10_1.png",
},
{
name: "U12 Huddle",
url: "u12_1.png",
},
{
name: "U14 Runner",
url: "u14_1.png",
},
{
name: "U16 Team",
url: "u16_1.png",
},
{
name: "Glove",
url: "glove_1.png",
},
];

selectBackground.add(new Option("-- Select Background --", ""));

for (const { name, url } of images) {
selectBackground.add(new Option(name, url));
}

selectBackground.addEventListener("change", async (event) => {
const select = event.target as HTMLSelectElement;

await handleSelect(select.value ? getImageUrl(select.value) : "");
});

return selectBackground;
}
import { loadFonts } from "./fonts.ts";
import { PhotoRepository } from "./photo-repository.ts";
import { PhotoSelect } from "./photo-select.ts";
import { BULLS_COLOR } from "./config.ts";
import { i18n } from "./translations.ts";

function download(handleDownload: () => void): HTMLButtonElement {
const downloadButton = document.createElement("button") as HTMLButtonElement;

downloadButton.textContent = "Download Image";
downloadButton.textContent = i18n("downloadImage");

downloadButton.addEventListener("click", async (event) => {
event.preventDefault();
@@ -297,17 +187,8 @@ function uploadBackground(

container.classList.add("file-input");

const labelDiv = document.createElement("div");

labelDiv.classList.add("file-input-label");

const label = document.createElement("label");
label.innerText = "Upload Background";

labelDiv.append(label);

const button = document.createElement("button");
button.innerText = "Choose File";
button.innerText = i18n("uploadPhoto");

const uploadField = document.createElement("input") as HTMLInputElement;
uploadField.style.display = "none";
@@ -327,7 +208,6 @@ function uploadBackground(
}
});

container.appendChild(labelDiv);
container.appendChild(button);
container.appendChild(uploadField);

@@ -350,12 +230,15 @@ function uploadBackground(
});
});

const backgroundSelect = await controls(async (background) => {
await renderCanvas(outputImage, canvas, {
background: await convertFileToBase64(await imageToBlob(background)),
games,
});
});
const backgroundSelect = new PhotoSelect(
PhotoRepository.findPhotos(),
async (photoUrl) => {
await renderCanvas(outputImage, canvas, {
background: await convertFileToBase64(await imageToBlob(photoUrl)),
games,
});
},
);

const downloadButton = download(() => {
const downloadLink = document.createElement("a");
73 changes: 73 additions & 0 deletions src/photo-repository.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
export type Photo = {
name: string;
url: string;
};

export abstract class PhotoRepository {
private static PHOTOS = [
{
name: "Bulls Outfielder",
url: "bulls_1.png",
},
{
name: "Bulls Battery",
url: "bulls_2.png",
},
{
name: "Bulls Pitcher",
url: "bulls_4.png",
},
{
name: "Bulls Win",
url: "bulls_3.png",
},
{
name: "Bandidos Team",
url: "bandidos_1.png",
},
{
name: "Bandidos Huddle",
url: "bandidos_2.png",
},
{
name: "Bandidas Youth Team",
url: "bandidas_1.png",
},
{
name: "Barons Team",
url: "barons_1.png",
},
{
name: "Bullets Team",
url: "bullets_1.png",
},
{
name: "U8 Win",
url: "u8_1.png",
},
{
name: "U10 Batter",
url: "u10_1.png",
},
{
name: "U12 Huddle",
url: "u12_1.png",
},
{
name: "U14 Runner",
url: "u14_1.png",
},
{
name: "U16 Team",
url: "u16_1.png",
},
{
name: "Glove",
url: "glove_1.png",
},
];

public static findPhotos(): Photo[] {
return PhotoRepository.PHOTOS;
}
}
28 changes: 28 additions & 0 deletions src/photo-select.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { Photo } from "./photo-repository.ts";
import { i18n } from "./translations.ts";

function getImageUrl(name: string) {
return new URL(`./assets/backgrounds/${name}`, import.meta.url).href;
}

export class PhotoSelect extends HTMLElement {
constructor(photos: Photo[], handleSelect: (url: string) => void) {
super();

const select = document.createElement("select");

select.add(new Option(`-- ${i18n("selectPhoto")} --`, ""));

for (const { name, url } of photos) {
select.add(new Option(name, url));
}

select.addEventListener("change", () => {
handleSelect(select.value ? getImageUrl(select.value) : "");
});

return select;
}
}

window.customElements.define("photo-select", PhotoSelect);
45 changes: 45 additions & 0 deletions src/translations.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
const TRANSLATIONS: { [key: string]: { [key: string]: string } } = {
graphicTypeOverview: {
de: "Übersicht",
en: "Overview",
},
graphicTypeSingle: {
de: "Spiel",
en: "Game",
},
selectPhoto: {
de: "Foto Auswählen",
en: "Select Photo",
},
downloadImage: {
de: "Bild Herunterladen",
en: "Download Image",
},
uploadPhoto: {
de: "Foto Hochladen",
en: "Upload Photo",
},
};

export function getLang() {
if (navigator.languages != undefined) {
return navigator.languages[0];
}

return navigator.language;
}

const defaultLocale = "en";
const locale = getLang();

export function i18n(id: string) {
if (TRANSLATIONS?.[id]?.[locale]) {
return TRANSLATIONS?.[id]?.[locale];
}

if (TRANSLATIONS?.[id]?.[defaultLocale]) {
return TRANSLATIONS?.[id]?.[defaultLocale];
}

return id;
}

0 comments on commit 83a4c16

Please sign in to comment.