From 1687242ba4ccebc490dcb58681cd5faf1fedbf6d Mon Sep 17 00:00:00 2001
From: Simon Brooke <simon@journeyman.cc>
Date: Tue, 13 Sep 2022 20:04:01 +0100
Subject: [PATCH] This is almost working, except that sound recording no longer
 works!

---
 resources/public/index.html         |  2 +-
 resources/public/scripts/muharni.js | 57 ++++++++++++++++++++---------
 src/muharni/construct.clj           |  1 -
 3 files changed, 40 insertions(+), 20 deletions(-)
diff --git a/resources/public/index.html b/resources/public/index.html
index 350ba42..288d5ad 100644
--- a/resources/public/index.html
+++ b/resources/public/index.html
@@ -14,7 +14,7 @@ src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"
     <title>Muharni table</title>
   </head>
   <body id="body">
-    <div id="popup" onmouseout="hidePopup();"
+    <div id="popup"
     style="display: none; border: thin solid gray; width: 10%">
       <p id="character"
       style="text-align: center; margin: 0; font-size: 4em;">?</p>
diff --git a/resources/public/scripts/muharni.js b/resources/public/scripts/muharni.js
index ab42548..e3f9377 100644
--- a/resources/public/scripts/muharni.js
+++ b/resources/public/scripts/muharni.js
@@ -18,9 +18,9 @@ const studentSounds = Array(80).fill(0).map(x => Array(13).fill(null));
 
 
 
-function recordStudentSound() {
-    if (currentCell) {
-        $('#record-student').css('background-color', 'green');
+function recordStudentSound(r, c) {
+    if (Number.isInteger(r) && Number.isInteger(c)) {
+        $('#record-student').css('color', 'green');
         navigator.mediaDevices.getUserMedia({ audio: true })
             .then(stream => {
                 const mediaRecorder = new MediaRecorder(stream);
@@ -35,46 +35,67 @@ function recordStudentSound() {
                 setTimeout(() => {
                     mediaRecorder.stop();
                     if (audioChunks.length > 0) {
-                        studentSounds[currentCell.row][currentCell.col] = new Blob(audioChunks);
+                        studentSounds[r][c] = new Blob(audioChunks);
                         $('#play-student').prop('disabled', false);
+                        console.log("Successfully recorded student sound for row " + r + ", column " + c);
+                    } else {
+                        console.warn("Failed to record student sound for row " + r + ", column " + c);
                     }
-                    $('#record-student').css('background-color', 'red');
+                    $('#record-student').css('color', 'red');
 
                 }, 3000);
             });
     }
 }
 
-/**
- * If a student sound has been recorded for the current cell, play it.
- */
-function playStudentSound() {
-    if (currentCell) {
-        if (studentSounds[currentCell.row][currentCell.col] != null) {
-            new Audio(URL.createObjectURL(studentSounds[currentCell.row][currentCell.col])).play();
-        }
-    }
-}
-
-
 $(document).ready(function() {
     $(".entry").on("click", function(e) {
         let cellId = e.currentTarget ? e.currentTarget.id : null;
 
         if (cellId)
         {
+            let row = parseInt(cellId.slice(1, 3));
+            let colChar = cellId.slice( 3);
+
+            if (colChar == colChar.toLowerCase()) {
+                row += 40; /* we're wrapping lower case into the bottom half of the array */
+            }
+
+            let col = cellId.charCodeAt(3) - 65;
+            if (col > 26 ) { 
+                col -= 32; /* lower case */
+            }
+
+            let studentAudio = studentSounds[row][col];
+
             $("#popup").css({
                 'left': e.pageX,
                 'top': e.pageY
             });
 
-            $("#character").text(e.currentTarget.innerText);
+            $("#character").text(e.currentTarget.innerText +": " + row +"," + col + ".");
 
             $("#play-tutor").off("click"); /* trying to remove any previous click handler */
             $("#play-tutor").on("click", function(e){
                 let audioUrl = "audio/" + cellId.slice(1) + ".mp3";
+                console.log("Playing tutor audio " + audioUrl );
                 new Audio( audioUrl).play();
             });
+
+            $("#record-stop").off("click");
+            $("#record-stop").on("click", function(e) {
+                console.log( "Recording student sound for row " + row + ", column " + col);
+                recordStudentSound(row, col);
+            });
+
+            $("#play-student").off("click");
+            if (studentAudio != null) {
+                $("#play-student").on( "click", function(e) {
+                    console.log( "Playing student sound for row " + row + ", column " + col);
+                    new Audio(URL.createObjectURL(studentAudio)).play();
+                });
+            } 
+            $("#play-student").prop("disabled", studentAudio == null);
         
             $("#popup").show();
         }
diff --git a/src/muharni/construct.clj b/src/muharni/construct.clj
index 96a2551..dfdf8d3 100644
--- a/src/muharni/construct.clj
+++ b/src/muharni/construct.clj
@@ -195,7 +195,6 @@
     [:title (str title)]]
    [:body {:id "body"}
     [:div {:id "popup"
-           :onmouseout "hidePopup();"
            :style "display: none; border: thin solid gray; width: 10%"}
      [:p {:id "character" :style "text-align: center; margin: 0; font-size: 4em;"} "?"]
      [:table {:id "controls" :summary "Controls for audio playback and recording"}
