Merge pull request #66 from Nuclear-Squid/quack

more quacks
Nuclear-Squid · Feb 17, 2024 · cc6eb28 · cc6eb28
2 parents 7f99b13 + 0e5239b
commit cc6eb28
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 9 deletions.
diff --git a/css/demo.css b/css/demo.css
@@ -57,6 +57,13 @@ dialog::backdrop {
 
 h1 .quacks {
   float: right;
+  transition: transform 1s;
+  user-select: none;
+  cursor: grab;
+}
+
+h1.active .quacks {
+  transform: translateX(-1000%);
 }
 
 .keyboard #lesson {

diff --git a/dactylo.html b/dactylo.html
@@ -2,8 +2,8 @@
 <html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta charset="utf-8" />
-  <meta name="description"
-    content="Une disposition de clavier francophone de type Colemak, optimisée pour le français, l’anglais et la programmation" />
+  <meta name="description" content="Une disposition de clavier francophone
+        de type Colemak, optimisée pour le français, l’anglais et le code." />
   <title>Ergo‑L</title>
   <link type="text/css" rel="stylesheet" href="css/layout.css" />
   <link type="text/css" rel="stylesheet" href="css/demo.css" />

diff --git a/js/dactylo.js b/js/dactylo.js
@@ -18,7 +18,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-const QUACK = new Audio('quack.mp3');
+const QUACK = new Audio('quack.wav');
 const MIN_PRECISION  = 98;  // percentage of correct keys
 const MIN_CPM_SPEED  = 100; // characters per minute
 const MIN_WIN_STREAK = 5;
@@ -68,7 +68,7 @@ window.addEventListener('DOMContentLoaded', () => {
   let gLessonCurrent   = undefined;
   let gLessonStartTime = undefined;
   let gLessonLevel     = Number(localStorage.getItem('level')) || STARTING_LEVEL;
-  let gQuackCount      = Number(localStorage.getItem('quacks')) || 4;
+  let gQuackCount      = Number(localStorage.getItem('quacks')) || 1;
   let gPendingError    = false;
 
   ['layout', 'dict', 'geometry']
@@ -231,7 +231,6 @@ window.addEventListener('DOMContentLoaded', () => {
       gLessonCurrent.id = 'current';
     } else { // last char, compute stats
       showLessonStatus(performance.now());
-      showQuackStatus();
       gLessonStartTime = undefined;
     }
   };
@@ -247,26 +246,42 @@ window.addEventListener('DOMContentLoaded', () => {
     gStatus.innerText = `${wpm} wpm, ${cpm} cpm, ${prc} %`;
 
     if (cpm >= MIN_CPM_SPEED && prc >= MIN_PRECISION) {
-      QUACK.play();
-      gQuackCount++;
+      moreQuacks();
     } else {
-      gQuackCount = Math.max(1, gQuackCount -1);
+      lessQuacks();
     }
+  };
+
+  const moreQuacks = () => {
+    QUACK.play();
+    gQuackCount++;
+    showQuackStatus();
 
     if (gQuackCount >= MIN_WIN_STREAK) {
-      gQuackCount = 1;
       gLessonLevel = 2 * (Math.floor(gLessonLevel / 2) + 1); // next even number
+      gQuacks.parentNode.classList.add('active');
+      gQuackCount = 1;
       setTimeout(setLessonLevel, 500);
     } else {
       setTimeout(showLesson, 500);
     }
   };
 
+  const lessQuacks = () => {
+    gQuackCount = Math.max(1, gQuackCount -1);
+    showQuackStatus();
+    setTimeout(showLesson, 500);
+  };
+
   const showQuackStatus = () => {
     localStorage.setItem('quacks', gQuackCount);
+    gQuacks.parentNode.classList.remove('active');
     gQuacks.innerText = Array(gQuackCount).fill('🦆').join('');
   };
 
+  gQuacks.addEventListener('transitionend', showQuackStatus);
+  gQuacks.addEventListener('dblclick', moreQuacks); // cheat code!
+
   // startup
   Promise.all([fetchNgrams(), fetchWords(), fetchLayout()])
     .then(setLessonLevel);

diff --git a/quack.mp3 b/quack.mp3
diff --git a/quack.wav b/quack.wav