Add Basic Prototype of Level Card Component

src/app/components/brand-accent/brand-accent.ts

@@ -1,9 +1,11 @@
 import {
-  afterNextRender, ChangeDetectionStrategy,
+  afterNextRender,
+  ChangeDetectionStrategy,
   Component,
   effect,
   ElementRef,
   inject,
+  input,
   NgZone,
   OnDestroy,
   viewChild,
@@ -24,6 +26,8 @@ export class BrandAccent implements OnDestroy {
   private ctx!: CanvasRenderingContext2D;
   private settingsService = inject(SettingsService);
 
+  drawGrid = input<boolean>(true);
+
   private canvasNativeSize: [number, number] = [0, 0];
   private bgGradient!: CanvasGradient;
   private gridGradient!: CanvasGradient;
@@ -235,6 +239,8 @@ export class BrandAccent implements OnDestroy {
       // this.ctx.drawImage(this.offscreenCanvas, 0, 0, this.canvasNativeSize[0], this.canvasNativeSize[1]);
     }
 
+    if (!this.drawGrid()) return;
+
     if (!isDark) {
       this.ctx.globalCompositeOperation = 'multiply';
     } else {

src/app/components/level-card/level-card.html

@@ -0,0 +1,6 @@
+<section class="information">
+  <div class="soundtrack">
+    <span class="artist">かめりあ (Camellia)</span>
+    <span class="track-name">Tentaclar Aliens' Epic Extraterretterrestrial Jungle Dance Party Inside Of A Super-Ultra-Mega-Gigantic U.F.O. (It Maybe U.U.F.O.) Silently Flying Over Illinois St.

</span>
+  </div>
+</section>

src/app/components/level-card/level-card.scss

@@ -0,0 +1,37 @@
+:host {
+  width: 400px;
+  height: 160px;
+
+  border-radius: 8px;
+  outline: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%)) 2px solid;
+
+  padding: 12px;
+
+  section.information {
+    .soundtrack {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+
+      .artist {
+        height: 19px;
+        font-size: 14px;
+        align-content: center;
+        font-weight: 800;
+      }
+
+      .track-name {
+        font-size: 18px;
+        line-height: 20px;
+
+        height: 40px;
+        font-weight: 900;
+
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}

src/app/components/level-card/level-card.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'level-card',
+  imports: [],
+  templateUrl: './level-card.html',
+  styleUrl: './level-card.scss',
+})
+export class LevelCard {}