Implement Level Card Prototype

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

@@ -1,6 +1,22 @@
 <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>
+    <span class="artist">{{ artist() }}</span>
+    <span class="track-name">{{ trackName() }}</span>
+  </div>
+
+  <div class="other">
+    <div class="creator">
+      <span>by</span>
+      <span>{{ creator() }}</span>
+    </div>
   </div>
 </section>
+
+<section class="buttons">
+  <button>
+    <div class="material-symbols-outlined icon-40 button-icon">play_arrow</div>
+  </button>
+  <button>
+    <div class="material-symbols-outlined icon-40 button-icon">download</div>
+  </button>
+</section>

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

@@ -1,36 +1,137 @@
+$animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
+$default_animation_duration: 0.2s;
+
+@property --hover-state {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
 :host {
   width: 400px;
   height: 160px;
 
+  display: flex;
+  flex-direction: row;
+
+  --animation-duration: calc(#{$default_animation_duration} * var(--motion-duration-multiplier));
+  justify-content: space-between;
+
   border-radius: 8px;
   outline: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%)) 2px solid;
-
-  padding: 12px;
+  overflow: hidden;
 
   section.information {
+    width: 336px;
+    padding: 12px;
+    box-sizing: border-box;
+    overflow: hidden;
+    flex-shrink: 0;
+
+    z-index: 1;
+    background-color: light-dark(white, black);
+
+    outline: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%)) 1px solid;
+
     .soundtrack {
       display: flex;
       flex-direction: column;
-      gap: 6px;
+      gap: 4px;
 
       .artist {
-        height: 19px;
+        display: inline-block;
         font-size: 14px;
+        height: 20px;
         align-content: center;
-        font-weight: 800;
+        font-weight: 700;
+
+        white-space: nowrap;
+        word-wrap: break-word;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .track-name {
-        font-size: 18px;
-        line-height: 20px;
-
-        height: 40px;
-        font-weight: 900;
-
-        -webkit-line-clamp: 2;
+        display: -webkit-box;
         -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        align-self: stretch;
+
         overflow: hidden;
         text-overflow: ellipsis;
+        word-wrap: break-word;
+        font-size: 18px;
+        font-weight: 900;
+        line-height: 22px;
+        height: 44px;
+      }
+    }
+
+    .other {
+      display: flex;
+      width: 312px;
+      height: 68px;
+      padding: 3px 0;
+      flex-direction: column;
+      box-sizing: border-box;
+      justify-content: space-between;
+      align-items: flex-start;
+
+      .creator {
+        display: flex;
+        flex-direction: row;
+        font-size: 14px;
+        height: 20px;
+        gap: 3px;
+
+        span {
+          align-content: center;
+          &:nth-child(2) {
+            font-weight: 900;
+          }
+        }
+      }
+    }
+  }
+
+  section.buttons {
+    display: flex;
+    flex-direction: column;
+
+    align-self: stretch;
+    flex-shrink: 0;
+
+    flex-grow: 1;
+    margin-left: -80px;
+
+    button {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+
+      width: 100%;
+      height: 50%;
+      border: none;
+      transition: --hover-state calc(var(--animation-duration) / 3) $animation_timing;
+      background-color: color-mix(
+        in oklch,
+        light-dark(oklch(1 0 0), oklch(0 0 0)),
+        light-dark(oklch(0.9702 0 0), oklch(0.25 0 0))
+        calc(var(--hover-state) * 100%)
+      );
+
+      padding: 0;
+
+      &:hover {
+        --hover-state: 1;
+      }
+
+      div.button-icon {
+        width: 40px;
+        height: 40px;
+        margin-right: 12px;
+        user-select: none;
       }
     }
   }

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'level-card',
@@ -6,4 +6,8 @@ import { Component } from '@angular/core';
   templateUrl: './level-card.html',
   styleUrl: './level-card.scss',
 })
-export class LevelCard {}
+export class LevelCard {
+  artist = input.required<string>()
+  trackName = input.required<string>()
+  creator = input.required<string>()
+}

src/app/pages/levels/levels.html

@@ -1,4 +1,7 @@
 <div class="container">
   <h1>Level Card Test</h1>
-  <level-card></level-card>
+  <level-card
+    artist="かめりあ (Camellia)"
+    trackName="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."
+    creator="psby"></level-card>
 </div>