aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--public/main.css18
-rw-r--r--src/view/play.ts8
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)