Progression after reveal

3 files changed, 92 insertions, 55 deletions

diff --git a/flashcards.html b/flashcards.html
index 1dba5e8..50f3f4d 100644
--- a/flashcards.html
+++ b/flashcards.html
@@ -19,11 +19,11 @@
       <input type="file" id="cards-input" accept=".json" />
     </div>
 
-    <div class="button-container">
-      <button class="rating-button">Forgot</button>
-      <button class="rating-button">Hard</button>
-      <button class="rating-button">Medium</button>
-      <button class="rating-button">Easy</button>
+    <div id="button-container">
+      <button id="rating-button-forgot" class="rating-button">Forgot [1]</button>
+      <button id="rating-button-hard"   class="rating-button">Hard   [2]</button>
+      <button id="rating-button-medium" class="rating-button">Medium [3]</button>
+      <button id="rating-button-easy"   class="rating-button">Easy   [4]</button>
     </div>
 
     <div id="toast"></div>
diff --git a/script.js b/script.js
index 94a2fa3..d6f3415 100644
--- a/script.js
+++ b/script.js
@@ -2,67 +2,95 @@
  * State file processing                                               *
  ***********************************************************************/
 
-function makeDeck(cards) {
-  let today = new Date();
-  // Granularity only at the day level.
-  today.setHours(0, 0, 0, 0);
-  return cards.filter((card) => {
-    return (new Date(card.scheduled)) <= today;
-  });
-}
-
-function pad(n) {
-  return n < 10 ? '0' + n : n;
-}
-
 function statusString() {
   const now = Date.now();
   const elapsedSeconds = Math.floor((now - window.started) / 1000);
   const minutes = Math.floor(elapsedSeconds / 60);
   const seconds = elapsedSeconds % 60;
-  return `Card ${window.index + 1} of ${window.deck.length} scheduled for review, ${window.cards.length} total
+  const pad = (n) => n < 10 ? '0' + n : n;
+  return `Card ${window.index + 1} of ${window.cards.length} scheduled for review, ${window.allCards.length} total
 Current session: ${pad(minutes)}:${pad(seconds)}`;
 }
 
-function showCard(card) {
-  const front = document.getElementById('flashcard-front');
-  const back = document.getElementById('flashcard-back');
+function loadCard(card) {
+  window.card.revealed = false;
+  window.card.front.innerHTML = card.front;
+  window.card.front.style.display = "block";
+  window.card.back.innerHTML = card.back;
+  window.card.back.style.display = "none";
+  window.buttons.style.display = "none";
+}
+
+function flipCard() {
+  window.card.revealed = true;
+
+  // Reveal the "back".
+  if (window.card.front.style.display !== "block") {
+    window.card.front.style.display = "block";
+    window.card.back.style.display = "none";
+  } else {
+    window.card.front.style.display = "none";
+    window.card.back.style.display = "block";
+  }
 
-  front.innerHTML = card.front;
-  back.innerHTML = card.back;
+  // Reveal the buttons.
+  window.buttons.style.display = "flex";
 }
 
-function toggleCard() {
-  const front = document.getElementById('flashcard-front');
-  const back = document.getElementById('flashcard-back');
+function rateCard(difficulty) {
+  if (!window.card.revealed) {
+    return;
+  }
+  // if (difficulty === "forgot") {
 
-  if (front.style.display === "block") {
-    front.style.display = "none";
-    back.style.display = "block";
+  // }
+  if (++window.index < window.cards.length) {
+    loadCard(window.cards[window.index]);
   } else {
-    back.style.display = "none";
-    front.style.display = "block";
+    clearInterval(window.updateInterval);
+    window.statusInfo.innerHTML = "Session complete!";
+    window.flashcard.style.display = "none";
+    window.buttons.style.display = "none";
   }
 }
 
+// Todo: check if card is revealed before allowing button inpt.
+
 function loadCards(data) {
-  const statusInfo = document.getElementById('status-info');
+  document.getElementById('flashcard').style.display = "block";
 
-  window.cards = data;
-  window.deck = makeDeck(window.cards);
+  window.allCards = data;
   window.index = 0;
   window.started = Date.now();
+  window.statusInfo = document.getElementById('status-info');
+  window.buttons = document.getElementById('button-container');
+  window.card = {
+    front: document.getElementById('flashcard-front'),
+    back: document.getElementById('flashcard-back')
+  };
 
-  // Temporary
-  showCard(window.cards[0]);
-  
-  setInterval(() => { statusInfo.innerText = statusString() }, 1000);
-  // Add an event listener for the spacebar press
-  window.addEventListener('keydown', (event) => {
-    if (event.code === 'Space') {
-      toggleCard();
-    }
+  document.getElementById('rating-button-forgot')
+    .addEventListener('click', () => rateCard('forgot'));
+  document.getElementById('rating-button-hard')
+    .addEventListener('click', () => rateCard('hard'));
+  document.getElementById('rating-button-medium')
+    .addEventListener('click', () => rateCard('medium'));
+  document.getElementById('rating-button-easy')
+    .addEventListener('click', () => rateCard('easy'));
+
+  let today = new Date();
+  // Granularity only at the day level.
+  today.setHours(0, 0, 0, 0);
+  window.cards = data.filter((card) => {
+    return (new Date(card.scheduled)) <= today;
   });
+
+  // Temporary
+  loadCard(window.cards[0]);
+
+  window.updateInterval = setInterval(() => {
+    window.statusInfo.innerText = statusString()
+  }, 1000);
 }
 
 /***********************************************************************
@@ -105,3 +133,18 @@ window.addEventListener("load", (event) => {
     reader.readAsText(file); // Read the file as text
   });
 });
+
+window.addEventListener('keydown', (event) => {
+  // console.log(event.code);
+  if (event.code === 'Space') {
+    flipCard();
+  } else if (event.code === 'Digit1' || event.code === "Numpad1") {
+    rateCard('forgot')
+  } else if (event.code === 'Digit2' || event.code === "Numpad2") {
+    rateCard('easy')
+  } else if (event.code === 'Digit3' || event.code === "Numpad3") {
+    rateCard('medium')
+  } else if (event.code === 'Digit4' || event.code === "Numpad4") {
+    rateCard('hard')
+  }
+});
diff --git a/style.css b/style.css
index bb2a135..38c4c42 100644
--- a/style.css
+++ b/style.css
@@ -8,8 +8,8 @@ body {
     font-family: Arial, sans-serif;
 }
 
-.button-container {
-    display: flex;
+#button-container {
+    display: none;
     justify-content: center;
     gap: 1rem;
     padding: 1rem;
@@ -72,16 +72,10 @@ body {
 }
 
 #flashcard {
+    display: none;
     padding: 16px;
     background: #fff;
     border-radius: 4px;
-    filter: drop-shadow(5px 5px 10px gray);
-    box-shadow: 5px 5px 10px gray;
-}
-
-#flashcard-front {
-    display: block;
-}
-#flashcard-back {
-    display: none;
+    filter: drop-shadow(2px 2px 5px gray);
+    box-shadow: 2px 2px 5px gray;
 }