Add Basic Prototype of Level Card Component

src/app/app.routes.ts

@@ -2,9 +2,11 @@ import { Routes } from '@angular/router';
 import { MainPage } from './pages/main/main';
 import { KnownIssuesPage } from './pages/known-issues/known-issues';
 import { ClockPage } from './pages/clock/clock';
+import { LevelPage } from './pages/levels/levels';
 
 export const routes: Routes = [
   { path: '', component: MainPage },
   { path: 'known-issues', component: KnownIssuesPage },
   { path: 'clock', component: ClockPage },
+  { path: 'levels', component: LevelPage },
 ];

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 {}

src/app/features/header-menu/header-menu.html

@@ -6,7 +6,7 @@
     </span>
   </a>
 
-  <span class="menu-item dummy-link">{{ translation.menu.levels }}</span>
+  <a class="menu-item nav-link" [routerLink]="['/levels']">{{ translation.menu.levels }}</a>
   <span class="menu-item dummy-link">{{ translation.menu.community }}</span>
   <span class="menu-item dummy-link">{{ translation.menu.leaderboard }}</span>
   <span class="menu-item dummy-link">{{ translation.menu.about }}</span>

src/app/pages/levels/levels.html

@@ -0,0 +1,4 @@
+<div class="container">
+  <h1>Level Card Test</h1>
+  <level-card></level-card>
+</div>

src/app/pages/levels/levels.scss

@@ -0,0 +1,7 @@
+:host > .container {
+  display: flex;
+  width: 600px;
+
+  flex-direction: column;
+  gap: 40px;
+}

src/app/pages/levels/levels.ts

@@ -0,0 +1,15 @@
+import { Component, signal } from '@angular/core';
+import { Switch } from '../../components/switch/switch';
+import { Dropdown, DropdownOption } from '../../components/dropdown/dropdown';
+import { BrandAccent } from '../../components/brand-accent/brand-accent';
+import { LevelCard } from '../../components/level-card/level-card';
+
+@Component({
+  selector: 'app-levels',
+  standalone: true,
+  imports: [LevelCard],
+  templateUrl: './levels.html',
+  styleUrl: './levels.scss',
+})
+export class LevelPage {
+}