feat: turn card layout to left

sicamp · Jun 1, 2024 · 74f603a · 74f603a
1 parent ce20b08
commit 74f603a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
                 <label for="title">Title:</label>
                 <textarea id="title" rows="8">Hello world</textarea>
                 <label for="font">Font size:</label>
-                <input id="font" type="number" value="80" />
+                <input id="font" type="number" value="72" />
             </form>
             <div class="preview">
                 <svg
@@ -37,18 +37,18 @@
                     </style>
                     <rect class="background" width="100%" height="100%" />
                     <g class="stripes"></g>
-                    <path class="camp-side" d="M1145 124h-25l52-70v42z" />
+                    <path class="camp-side" d="M88 124H63l52-70v42z" />
                     <path
                         class="camp-outline"
-                        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"
+                        d="M67 122h96l-48-65zm103 8H59q-1.1 0-2.2-.5-.9-.7-1.5-1.5a4 4 0 0 1 .4-4.1L110 50 95 30.2a4 4 0 0 1 .9-5.4 4 4 0 0 1 5.4.7L115 43l12.8-17.4a4 4 0 0 1 5.5-.9q1.3 1 1.5 2.6.3 1.5-.7 2.9L119 50l54.5 73.9a4 4 0 0 1-1 5.6c-.6.3-1.8.5-2.5.5"
                     />
                     <text
                         class="location"
                         font-family="Jost"
                         font-weight="700"
                         letter-spacing="0.2em"
                         text-anchor="middle"
-                        x="1175"
+                        x="120"
                         y="175"
                         font-size="32"
                     />
@@ -58,7 +58,7 @@
                         font-weight="700"
                         letter-spacing="0.2em"
                         text-anchor="middle"
-                        x="1104"
+                        x="46"
                         y="88"
                         font-size="26"
                     />
@@ -68,16 +68,17 @@
                         font-weight="700"
                         letter-spacing="0.2em"
                         text-anchor="middle"
-                        x="1244"
+                        x="186"
                         y="88"
                         font-size="26"
                     />
                     <text
                         class="title"
-                        x="600"
-                        y="360"
-                        font-weight="bold"
-                        text-anchor="middle"
+                        x="320"
+                        y="400"
+                        font-family="Jost"
+                        font-weight="700"
+                        text-anchor="start"
                     />
                 </svg>
             </div>

diff --git a/src/svg.ts b/src/svg.ts
@@ -16,12 +16,14 @@ type RectangleOptions = {
 
 const lineHeight = 1.2;
 
-const stripeHeight = 12;
-const stripeSpacing = 18;
-const minWidth = 40;
-const maxWidth = 160;
-const marginBottom = 602;
-const viewBoxWidth = 1280;
+const stripeHeight = 8;
+const stripeSpacing = 12;
+const minWidth = 30;
+const maxWidth = 90;
+const marginLeft = 12;
+const marginBottom = 220;
+const viewPortHeight = 1280;
+const stripesEnd = 180;
 const minVisibleWidth = 20;
 
 export class SvgBuilder {
@@ -131,23 +133,15 @@ export class SvgBuilder {
     }
 
     addStripes(colors: string[]) {
-        this.fillStripeSection(marginBottom, marginBottom + 100, colors);
-
-        return this;
-    }
-
-    protected fillStripeSection(
-        yStart: number,
-        yEnd: number,
-        colors: string[],
-    ) {
-        let colorIndex = 0;
-        for (let y = yStart; y < yEnd; y += stripeHeight + stripeSpacing) {
-            colorIndex = (colorIndex + 1) % colors.length;
-
-            let x = -maxWidth; // Start from left side, stripes may overflow
-
-            while (x < viewBoxWidth) {
+        for (
+            let y = marginBottom;
+            y < viewPortHeight;
+            y += stripeHeight + stripeSpacing
+        ) {
+            let x = marginLeft;
+            let colorIndex = randomInt(0, colors.length);
+
+            while (x < stripesEnd) {
                 const stripeWidth = randomInt(minWidth, maxWidth);
                 const visibleWidth =
                     stripeWidth + x < 0 ? stripeWidth + x : stripeWidth;
@@ -170,6 +164,8 @@ export class SvgBuilder {
                 x += stripeWidth + stripeSpacing;
             }
         }
+
+        return this;
     }
 
     protected buildRect({ x, y, width, height, color }: RectangleOptions) {