From 03f50c7284fb2195e559d0c3246a636bdf9a58e5 Mon Sep 17 00:00:00 2001
From: Joris
Date: Mon, 4 Jul 2022 14:42:01 +0200
Subject: Show only current and next chord

Stop showing the previous chord, this is not helpful.
---
 public/main.css  | 18 ++++++++----------
 src/view/play.ts |  8 +++-----
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/public/main.css b/public/main.css
index 61d946f..6bc1701 100644
--- a/public/main.css
+++ b/public/main.css
@@ -3,7 +3,6 @@
 :root {
   --color-header: #333333;
   --color-button: #333333;
-  --color-passed-chord: #AAAAAA;
 
   --spacing-mouse: 0.25rem;
   --spacing-cat: 0.5rem;
@@ -124,9 +123,9 @@ header {
   animation: Shift var(--shift-delay) ease-in-out;
 }
 
-/* Space between each chord is 35% */
+/* Keep it sync with distance between chords */
 @keyframes Shift {
-  0%   {transform: translateX(35%);}
+  0%   {transform: translateX(50%);}
   100% {transform: translateX(0);}
 }
 
@@ -134,16 +133,15 @@ header {
   position: absolute;
   margin-top: -10px; /* Move a bit higher for a better rendering */
   transform: translateX(-50%);
-  transition: color var(--shift-delay) ease-in-out;
+  transition: opacity var(--shift-delay) ease-in-out;
 }
 
-.g-Chord:nth-child(1) { left:-20%; }
-.g-Chord:nth-child(2) { left:15%; }
-.g-Chord:nth-child(3) { left:50%; }
-.g-Chord:nth-child(4) { left:85%; }
+.g-Chord:nth-child(1) { left:-25%; }
+.g-Chord:nth-child(2) { left:25%; }
+.g-Chord:nth-child(3) { left:75%; }
 
-.g-Chord:nth-child(1), .g-Chord:nth-child(2) {
-  color: var(--color-passed-chord);
+.g-Chord:nth-child(1) {
+  opacity: 0;
 }
 
 .g-Chord--Beat {
diff --git a/src/view/play.ts b/src/view/play.ts
index 26558cd..20da6c7 100644
--- a/src/view/play.ts
+++ b/src/view/play.ts
@@ -8,24 +8,22 @@ export function view(options: Options): Element[] {
   let chords = h('div', 
     { className: 'g-Play' }, 
     chordNode(),
-    chordNode(),
     chordNode(options),
     chordNode(options)
   )
 
   let chordBeat = 1
 
-  dom.triggerAnimation(chords as HTMLElement, 'g-Play--Shift')
-  dom.triggerAnimation(chords.children[2] as HTMLElement, 'g-Chord--Beat')
+  dom.triggerAnimation(chords.children[1] as HTMLElement, 'g-Chord--Beat')
   setInterval(() => {
     if (chordBeat == options.beatsPerChord) {
       shiftChords(chords, options)
       chords.children[0].classList.remove('g-Chord--Beat')
       dom.triggerAnimation(chords as HTMLElement, 'g-Play--Shift')
-      dom.triggerAnimation(chords.children[2] as HTMLElement, 'g-Chord--Beat')
+      dom.triggerAnimation(chords.children[1] as HTMLElement, 'g-Chord--Beat')
       chordBeat = 1
     } else {
-      dom.triggerAnimation(chords.children[2] as HTMLElement, 'g-Chord--Beat')
+      dom.triggerAnimation(chords.children[1] as HTMLElement, 'g-Chord--Beat')
       chordBeat += 1
     }
   }, 60 / options.bpm * 1000)
-- 
cgit v1.2.3