ryo-ma · Jay-Karia · Aug 4, 2024 · Aug 4, 2024
diff --git a/api/index.ts b/api/index.ts
@@ -60,6 +60,7 @@ async function app(req: Request): Promise<Response> {
   const ranks: Array<string> = params.getAll("rank").flatMap((r) =>
     r.split(",")
   ).map((r) => r.trim());
+  const trophy_style = params.get("trophy_style");
 
   if (username === null) {
     const [base] = req.url.split("?");
@@ -139,6 +140,7 @@ async function app(req: Request): Promise<Response> {
       paddingHeight,
       noBackground,
       noFrame,
+      trophy_style,
     ).render(userInfo, theme),
     {
       headers: defaultHeaders,

diff --git a/src/TrophyStyles/football.ts b/src/TrophyStyles/football.ts
@@ -0,0 +1,21 @@
+const SECRET = ``;
+const SSS = ``;
+const SS = ``;
+const S = ``;
+const AAA = ``;
+const AA = ``;
+const A = ``;
+const B = ``;
+const C = ``;
+
+export default {
+  SECRET,
+  SSS,
+  SS,
+  S,
+  AAA,
+  AA,
+  A,
+  B,
+  C,
+};
diff --git a/src/TrophyStyles/index.ts b/src/TrophyStyles/index.ts
@@ -0,0 +1,7 @@
+import football from "./football.ts";
+
+export const trophyStyles = {
+  football
+};
+
+export default trophyStyles;
diff --git a/src/card.ts b/src/card.ts
@@ -16,6 +16,7 @@ export class Card {
     private marginHeight: number,
     private noBackground: boolean,
     private noFrame: boolean,
+    private trophyStyle: string | null,
   ) {
     this.width = panelSize * this.maxColumn +
       this.marginWidth * (this.maxColumn - 1);
@@ -61,7 +62,7 @@ export class Card {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      ${this.renderTrophy(trophyList, theme)}
+      ${this.renderTrophy(trophyList, theme, this.trophyStyle)}
     </svg>`;
   }
   private getRow(trophyList: TrophyList) {
@@ -76,7 +77,7 @@ export class Card {
     return this.panelSize * row + this.marginHeight * (row - 1);
   }
 
-  private renderTrophy(trophyList: TrophyList, theme: Theme) {
+  private renderTrophy(trophyList: TrophyList, theme: Theme, trophyStyle: string | null) {
     return trophyList.getArray.reduce(
       (sum: string, trophy: Trophy, i: number) => {
         const currentColumn = i % this.maxColumn;
@@ -92,6 +93,7 @@ export class Card {
             this.panelSize,
             this.noBackground,
             this.noFrame,
+            trophyStyle,
           );
       },
       "",

diff --git a/src/icons.ts b/src/icons.ts
@@ -1,5 +1,6 @@
 import { RANK } from "./utils.ts";
 import { Theme } from "./theme.ts";
+import trophyStyles from "./TrophyStyles/index.ts";
 
 const leafIcon = (laurel: string): string => {
   return `<svg xmlns="http://www.w3.org/2000/svg" width="90pt" height="90pt" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
@@ -88,7 +89,7 @@ const getSmallTrophyIcon = (
   // Single Rank
   return "";
 };
-export const getTrophyIcon = (theme: Theme, rank = RANK.UNKNOWN) => {
+export const getTrophyIcon = (theme: Theme, rank = RANK.UNKNOWN, trophyStyle: string | null = null) => {
   let color = theme.DEFAULT_RANK_BASE;
   let rankColor = theme.DEFAULT_RANK_TEXT;
   let backgroundIcon = "";
@@ -138,21 +139,29 @@ export const getTrophyIcon = (theme: Theme, rank = RANK.UNKNOWN) => {
     <path fill-rule="evenodd" d="M12.5 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-3 2a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm-6-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-3 2a3 3 0 1 1 6 0 3 3 0 0 1-6 0z"/>
     <path d="M3 1h10c-.495 3.467-.5 10-5 10S3.495 4.467 3 1zm0 15a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1H3zm2-1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1H5z"/>
     <circle cx="8" cy="6" r="4" fill="${ICON_CIRCLE}" />
-    <text x="6" y="8" font-family="Courier, Monospace" font-size="7" fill="${rankColor}">${
-    rank.slice(0, 1)
-  }</text>
+    <text x="6" y="8" font-family="Courier, Monospace" font-size="7" fill="${rankColor}">${rank.slice(0, 1)
+    }</text>
   `;
   const optionRankIcon = getSmallTrophyIcon(icon, color, rank.length - 1);
   return `
-  ${backgroundIcon}
-  ${optionRankIcon}
-  <defs>
-    <linearGradient id="${rank}" gradientTransform="rotate(45)">
-    ${gradationColor}
-    </linearGradient>
-  </defs>
-  <svg x="28" y="20" width="100" height="100" viewBox="0 0 30 30" fill="url(#${rank})" xmlns="http://www.w3.org/2000/svg">
-    ${icon}
-  </svg>
+  ${trophyStyle ?
+    // custom trophy style
+    `
+    ${trophyStyles[trophyStyle][rank]}
+    `
+    :
+    // default trophy style
+    `
+    ${backgroundIcon}
+    ${optionRankIcon}
+    <defs>
+      <linearGradient id="${rank}" gradientTransform="rotate(45)">
+      ${gradationColor}
+      </linearGradient>
+    </defs>
+    <svg x="28" y="20" width="100" height="100" viewBox="0 0 30 30" fill="url(#${rank})" xmlns="http://www.w3.org/2000/svg">
+      ${icon}
+    </svg>
+    `}
   `;
 };
diff --git a/src/trophy.ts b/src/trophy.ts
@@ -65,6 +65,7 @@ export class Trophy {
     panelSize = CONSTANTS.DEFAULT_PANEL_SIZE,
     noBackground = CONSTANTS.DEFAULT_NO_BACKGROUND,
     noFrame = CONSTANTS.DEFAULT_NO_FRAME,
+    trophyStyle: string | null = null,
   ): string {
     const { BACKGROUND: PRIMARY, TITLE: SECONDARY, TEXT, NEXT_RANK_BAR } =
       theme;
@@ -94,7 +95,7 @@ export class Trophy {
             stroke-opacity="${noFrame ? "0" : "1"}"
             fill-opacity="${noBackground ? "0" : "1"}"
           />
-          ${getTrophyIcon(theme, this.rank)}
+          ${getTrophyIcon(theme, this.rank, trophyStyle)}
           <text x="50%" y="18" text-anchor="middle" font-family="Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji" font-weight="bold" font-size="13" fill="${SECONDARY}">${this.title}</text>
           <text x="50%" y="85" text-anchor="middle" font-family="Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji" font-weight="bold" font-size="10.5" fill="${TEXT}">${this.topMessage}</text>
           <text x="50%" y="97" text-anchor="middle" font-family="Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji" font-weight="bold" font-size="10" fill="${TEXT}">${this.bottomMessage}</text>