déploiement du player bac-a-sable

static/js/playerPhono.js

@@ -86,11 +86,22 @@ function selectPanneau(p){
 
 /// ACTIONS LORS DU CLIC SUR PHONEME
 var cartes = [] // initialisation de la liste des cartes disponible (0 au début)
+var ligneCible = "rep"
+changeLigne(document.getElementById(ligneCible).parentElement) // par défaut ligne active = rep
+
+function changeLigne(el) {
+    let newRep = el.firstElementChild
+    console.log('Change ligne to '+ newRep.id)
+    ligneCible = newRep.id
+    document.querySelectorAll('.ligneCible').forEach((divRep) => { divRep.classList.remove('ligneCible')})
+    el.classList.add('ligneCible')
+    saveTrace(`passage ligne ${ligneCible}`)
+}
 
 function recupPhon(identifiant) {
     var rectId = identifiant
     var phonId = rectId.replace("rect","phon")
-    var repDiv = document.getElementById('rep')
+    var repDiv = document.getElementById(ligneCible)
 
     var newCarte = document.createElement('div')
     newCarte.classList = "carte " + rectId;// on garde rectId, pour connaître le phonème mais sans appeler les styles de phonochromie-alem.css
@@ -341,3 +352,44 @@ svgClick.addEventListener("load",function(){
 
 }, false);
 
+// RESTRICTIONS EXPÉ ALEXANDRE -- temporaire
+if (thisURL.match(/.*pA\/play/) || thisURL.match(/.*pAV\/play/) || thisURL.match(/.*serie-bac-a-sable\/play/)) {
+    console.log('Session pour expé Alexandre: restrictions.')
+    document.getElementById('retourHome').style.display = "none"
+    document.getElementById('bravo_quit').style.display = "none"
+}
+
+// RESTRICTIONS BAC À SABLE -- pas de série de mots
+if (thisURL.match(/.*serie-bac-a-sable\/play/)) {
+    console.log('Session Bac À Sable')
+    document.getElementById('fenetreDeLancement').style.display = "none"
+    document.getElementById('divReponse').style.display = ""
+
+    // Suppression divReponseGauche
+    document.getElementsByClassName('divReponseGauche')[0].remove()
+
+    // Reformattage divReponseMilieu
+    document.getElementsByClassName('divReponseMilieu')[0].classList.add('bacAsable')
+
+    // Mise à jour des boutons
+    document.getElementById('btnEnter').style.display = "block"
+    document.getElementById('btnValider').style.display = "none"
+    saveTrace(`start serie ${serieName}`)
+}
+
+var cptline=1
+function newLine(el){
+    console.log(el)
+    cptline+=1
+    var newLine = el.parentElement.parentElement.cloneNode(true)
+    newLine.id = "divReponse"+cptline
+    newLine.firstElementChild.firstElementChild.innerHTML = ""
+    newLine.firstElementChild.firstElementChild.id = "rep"+cptline
+    
+    newLine.lastElementChild.firstElementChild.id = "btnEnter"+cptline
+    newLine.lastElementChild.children[1].firstElementChild.setAttribute('onclick', "playIpa("+cptline+")")
+    newLine.lastElementChild.children[1].lastElementChild.id = "debitParole"+cptline
+
+    el.parentElement.parentElement.parentElement.insertBefore(newLine, el.parentElement.parentElement.nextElementSibling)
+    changeLigne(newLine.firstElementChild)
+}
\ No newline at end of file

static/js/syntheseVocale.js

@@ -3,7 +3,7 @@ var currentDebit = 80;
 var voix = "f"
 var lang = thisPageLang
 
-async function playIpa() {
+async function playIpa(line="") {
     
     var synth = false
 
@@ -34,7 +34,7 @@ async function playIpa() {
     
     } else if (thisAppli == "phonoplayer"){
         
-        var rep = document.getElementById('rep')
+        var rep = document.getElementById('rep'+line.toString())
         ipa = ""
         for (i=0; i<rep.children.length; i++) {
             var repphon = rep.children[i].classList[1].replace("rect","phon")
@@ -66,19 +66,19 @@ async function playIpa() {
         // ENVOI
         const response = await fetch('/_playIpa/', options)
         const data = await response.json();
-        readResponse(data["audio"]);
+        readResponse(data["audio"], line);
     } else {
         var sv_audio = document.getElementsByTagName("audio")[0];
-        sv_audio.playbackRate = document.getElementById('debitParole').value / 100;
+        sv_audio.playbackRate = document.getElementById('debitParole'+line.toString()).value / 100;
         sv_audio.play();
     }
 
-    saveTrace(`playIpa [${ipa}] ${voix} ${lang} ${document.getElementById('debitParole').value}`)
+    saveTrace(`playIpa [${ipa}] ${voix} ${lang} ${document.getElementById('debitParole'+line.toString()).value}`)
 }
 
-function readResponse(response) {
+function readResponse(response, line) {
     var source = '<source src="data:audio/mpeg;base64,' + response + '" type="audio/mpeg"></source>';
     var sv_audio = '<audio autoplay="true" controls>' + source + '</audio>';
-	sv_audio.playbackRate = document.getElementById('debitParole').value / 100;
+	sv_audio.playbackRate = document.getElementById('debitParole'+line.toString()).value / 100;
     document.getElementById('audio').innerHTML = sv_audio;
 }
\ No newline at end of file

static/styles/player.css

@@ -269,4 +269,17 @@
 .switchable:hover {
     border: 1px lightgrey solid;
     border-radius: 3px;
+}
+
+/* BAC A SABLE */
+.bacAsable {
+    
+    border: 1px solid rgba(128, 128, 128, 0.274);
+    border-radius: 5px;
+    margin: 0px 10px;
+    padding: 0px 5px;
+}
+
+.ligneCible {
+    border-color: rgba(0, 0, 0, 0.521);
 }
\ No newline at end of file

templates/playerPhono.html

@@ -49,7 +49,7 @@
 
     <div class="mainContent">
 
-        <div style="width:90%;text-align: left;">
+        <div id="retourHome" style="width:90%;text-align: left;">
             <a href="/player/"><button type="button" class="btn btn-outline-secondary">< Retour</button></a>
         </div>
 
@@ -79,10 +79,15 @@
                           </svg>
                     </button>
                 </div>
-                <div class="divReponseMilieu d-flex align-items-center">
-                    <div id="rep" class="d-flex align-items-center flex-wrap"></div>
+                <div class="divReponseMilieu d-flex align-items-center flex-grow-1" onclick="changeLigne(this)">
+                    <div id="rep" class="d-flex align-items-center flex-wrap rep"></div>
                 </div>
-                <div class="divReponseDroit d-flex">
+                <div class="divReponseDroit d-flex align-items-center justify-content-around">
+                    <button type="button" class="btn btn-outline-secondary" id="btnEnter" onclick="newLine(this)" style="display: none;" title="Aller à la ligne">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-return-left" viewBox="0 0 16 16">
+                            <path fill-rule="evenodd" d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z"/>
+                          </svg>
+                    </button>
                     {% if serieContent.syntheseVocale == "1" %}
                         <div class="my-auto btn-lecture d-flex flex-column align-items-stretch pe-3">
                             <div onclick="playIpa();" style="cursor: pointer;" title="Prononcer !">
@@ -97,6 +102,7 @@
                     <button type="button" class="btn btn-success btn-lg mx-auto" onclick="checkAnswer()" id="btnValider">Valider</button>
                 </div>          
             </div>
+            <div id="divVideALaisserPourInsertNewLineBefore"></div>
         </div>
 
         <div id="audio" style="display: none;">