make piano keys prettier

TeemuKoivisto · Apr 5, 2024 · 653fbbc · 653fbbc
1 parent 9df8282
commit 653fbbc
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 12 deletions.
diff --git a/packages/client/src/components/virtual-piano/VirtualPiano.svelte b/packages/client/src/components/virtual-piano/VirtualPiano.svelte
@@ -5,7 +5,7 @@
 
   $: windowWidth = window.innerWidth
   let whiteKeyCount = 0
-  const keys = Array.from(new Array(24)).map((_, idx) => {
+  const keys = Array.from(new Array(12)).map((_, idx) => {
     const isWhite = WHITE_INDECES.includes(idx % 12)
     if (isWhite) {
       whiteKeyCount += 1

diff --git a/packages/client/src/components/virtual-piano/VirtualPianoKey.svelte b/packages/client/src/components/virtual-piano/VirtualPianoKey.svelte
@@ -21,7 +21,9 @@
   $: left = isWhite
     ? 6 + whiteCount * WHITE_WIDTH
     : 6 + (whiteCount + 1) * WHITE_WIDTH - BLACK_WIDTH / 2
-  $: height = isWhite ? 'calc(100% - 6px)' : 'calc(66% - 6px)'
+  $: height = isWhite
+    ? `calc(100% - ${keyHeld ? '10px' : '6px'})`
+    : `calc(66% - ${keyHeld ? '8px' : '4px'})`
   $: width = isWhite ? WHITE_WIDTH : BLACK_WIDTH
   $: zIndex = isWhite ? 0 : 1
 
@@ -61,26 +63,51 @@
 <style lang="scss">
   li {
     button {
-      @apply shadow outline-none rounded-b;
+      @apply relative shadow outline-none rounded-b top-0;
       &.is-first {
         @apply rounded-tl;
       }
       &.is-last {
         @apply rounded-tr;
       }
-      &.white-key.is-held {
-        background: #f4f3f3;
+      /** Based on https://mczak.com/code/piano/ */
+      &.white-key {
+        background: linear-gradient(-30deg, #f8f8f8, #ffffff);
         box-shadow:
-          inset 3px 2px 3px #999,
-          inset -3px 2px 3px #999;
+          inset 0 1px 0 #fff,
+          inset 0 -1px 0 #fff,
+          inset 1px 0 0 #fff,
+          inset -1px 0 0 #fff,
+          0 4px 3px rgba(0, 0, 0, 0.7),
+          inset 0 -1px 0 #fff,
+          inset 1px 0 0 #fff,
+          inset -1px -1px 15px rgba(0, 0, 0, 0.5),
+          -3px 4px 6px rgba(0, 0, 0, 0.5);
+        &.is-held {
+          box-shadow:
+            inset 0 1px 0 #fff,
+            inset 0 -1px 0 #fff,
+            inset 1px 0 0 #fff,
+            inset -1px 0 0 #fff,
+            0 4px 3px rgba(0, 0, 0, 0.7),
+            inset 0 -1px 0 #fff,
+            inset 1px 0 0 #fff,
+            inset -1px -1px 15px #000,
+            -3px 4px 6px rgba(0, 0, 0, 0.5);
+        }
       }
       &.black-key {
-        background-color: black;
+        background: linear-gradient(-20deg, #222222, #000000, #222222);
+        border-width: 1px 3px 8px;
+        border-style: solid;
+        border-color: #666 #222 #111 #555;
+        box-shadow:
+          inset 0 -1px 2px rgba(255, 255, 255, 0.4),
+          0 2px 3px rgba(0, 0, 0, 0.4);
+        top: 1px;
         &.is-held {
-          background: #222;
-          box-shadow:
-            1px 1px 0 #555,
-            2px 2px 0 #555;
+          border-bottom-width: 3px;
+          background: linear-gradient(-20deg, #444, #222, #444);
         }
       }
     }