Better warmup

src/Tricot.js

@@ -189,6 +189,29 @@ export default class Tricot extends Component {
     return `active ${errorClass}`;
   }
 
+  /**
+   * Get page title
+   *
+   * @return {String|null}
+   */
+  getTitle() {
+    const { answers, index, tempo } = this.state;
+
+    if (index === null && answers.length === 0) {
+      return <h1>Appuie en rythme sur les touches pour tricoter</h1>;
+    }
+
+    if (index < 0) {
+      return <h1>Préparez-vous ...</h1>;
+    }
+
+    if (index < 4) {
+      return <h1 className="fade">C&apos;est parti !</h1>;
+    }
+
+    return null;
+  }
+
   render() {
     const { partition, lines, answers, index, pressed, tempo, warmup, audio, loop, bpm, delay, ready } = this.state;
     const { privacy, credits } = this.modals;
@@ -201,7 +224,7 @@ export default class Tricot extends Component {
 
     return (
       <div>
-        {beforeStart && <h1>Appuie en rythme sur les touches pour tricoter</h1>}
+        {this.getTitle(index, answers)}
         {end && <End answers={answers} replay={this.onKey} ready={ready} />}
         <div className="options">
           <SongSelector songs={Songs} disabled={playing} onChange={this.loadSong} />

src/track/DeckTheHalls.js

@@ -5,5 +5,5 @@ export const audio = deckTheHalls;
 export const bpm = 95;
 export const tempo = Math.round(60000 / 95);
 export const delay = 98 + (tempo / 4);
-export const warmup = [null, null, 1, '.', '.', '.', 2, '.', '.', '.', 3, '.', '.', '.', 1, 2, 3, 4];
+export const warmup = [null, null, 3, null, null, null, 2, null, null, null, 1, null, null, null, 1, 2, 3, 4];
 export const duration = 64500;

src/track/JingleBells.js

@@ -5,5 +5,5 @@ export const audio = jingleBells;
 export const bpm = 98;
 export const tempo = Math.round(60000 / 190);
 export const delay = 106;
-export const warmup = [1, 2, 3, 4, 1, 2, 3, 4];
+export const warmup = [1, null, 2, null, 1, 2, 3, 4];
 export const duration = 83000;

src/track/JoyToTheWorld.js

@@ -5,5 +5,5 @@ export const audio = joyToTheWorld;
 export const bpm = 85;
 export const tempo = Math.round(60000 / 120);
 export const delay = 98;
-export const warmup = [1, '.', '.', '.', 2, '.', '.', '.', 3, '.', '.', '.', 1, 2, 3, 4];
+export const warmup = [3, null, null, null, 2, null, null, null, 1, null, null, null, 1, 2, 3, 4];
 export const duration = 78000;

style/base/_layout.scss

@@ -61,6 +61,11 @@ h1 {
   transform: translateX(-50%);
   width: 100%;
   font-weight: 400;
+  transition: opacity 400ms 1s ease-in;
+
+  &.fade {
+    opacity: 0;
+  }
 }
 
 #root {

style/components/_animation.scss

@@ -81,7 +81,6 @@
   }
 }
 
-
 @keyframes slide {
   0% {
     transform: translate3d(0, -200%, 0);

style/components/_arrow-tunnel.scss

@@ -70,6 +70,7 @@
       vertical-align: bottom;
       box-sizing: border-box;
       justify-content: center;
+      color: $text;
 
       &.success {
         animation: puff-out 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000) both;