feat: add a year to the camp logo

sicamp · Jun 1, 2024 · 4225b49 · 4225b49
1 parent a184208
commit 4225b49
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -4,6 +4,12 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>sicamp canvas</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Jost:wght@700&display=swap"
+            rel="stylesheet"
+        />
     </head>
     <body>
         <div id="app">
@@ -20,6 +26,9 @@
                     xmlns="http://www.w3.org/2000/svg"
                 >
                     <style>
+                        .year {
+                            fill: #fefefd;
+                        }
                         .camp-contour,
                         .camp-side {
                             fill: #3986cf;
@@ -39,6 +48,26 @@
                         fill="#3986CF"
                         d="M1124 122h96l-48-65zm103 8h-111q-1.2 0-2.2-.5-.9-.7-1.5-1.5a4 4 0 0 1 .4-4.1L1167 50l-15-19.8a4 4 0 0 1 .9-5.4 4 4 0 0 1 5.4.7L1172 43l12.8-17.4a4 4 0 0 1 5.5-.9q1.3 1 1.5 2.6.3 1.5-.7 2.9L1176 50l54.5 73.9a4 4 0 0 1-1 5.6c-.6.3-1.8.5-2.5.5"
                     />
+                    <text
+                        class="year"
+                        font-family="Jost"
+                        font-weight="700"
+                        letter-spacing="0.2em"
+                        text-anchor="middle"
+                        x="1104"
+                        y="88"
+                        font-size="26"
+                    />
+                    <text
+                        class="year"
+                        font-family="Jost"
+                        font-weight="700"
+                        letter-spacing="0.2em"
+                        text-anchor="middle"
+                        x="1244"
+                        y="88"
+                        font-size="26"
+                    />
                     <text
                         class="title"
                         x="600"

diff --git a/src/main.ts b/src/main.ts
@@ -31,4 +31,5 @@ const cover = new SvgBuilder(svg);
 cover
     .setBackground(BACKGROUND)
     .addStripes(STRIPE_COLORS)
+    .setYear(new Date().getUTCFullYear())
     .setTitle({ text: settings.title, color: TEXT_COLOR, fontSize: 80 });
diff --git a/src/svg.ts b/src/svg.ts
@@ -30,6 +30,7 @@ export class SvgBuilder {
     private readonly background: SVGGeometryElement;
     private readonly title: SVGTextElement;
     private readonly stripes: SVGElement;
+    private readonly year: [SVGTextElement, SVGTextElement];
 
     constructor(private readonly element: SVGElement) {
         const background =
@@ -56,6 +57,15 @@ export class SvgBuilder {
         }
 
         this.stripes = stripes;
+
+        const [left, right] =
+            this.element.querySelectorAll<SVGTextElement>(".year");
+
+        if (!left || !right) {
+            throw new Error("Year should be between 2000 and 3000");
+        }
+
+        this.year = [left, right];
     }
 
     setBackground(color: string) {
@@ -93,6 +103,17 @@ export class SvgBuilder {
         return this;
     }
 
+    setYear(year: number) {
+        if (year < 2000 || year > 3000) {
+            throw new Error("Year should be between 2000 and 3000");
+        }
+
+        this.year[0].textContent = year.toString().slice(0, 2);
+        this.year[1].textContent = year.toString().slice(2, 4);
+
+        return this;
+    }
+
     addStripes(colors: string[]) {
         this.fillStripeSection(marginBottom, marginBottom + 100, colors);