diff options
| -rw-r--r-- | public/main.css | 18 | ||||
| -rw-r--r-- | 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) |