suite mise à jour pinyin

public/index.html

@@ -247,7 +247,7 @@
                               <button class="nav-link ms-auto active" id="nav-aide-tab" data-bs-toggle="tab" data-bs-target="#nav-aide" type="button" role="tab" aria-controls="nav-aide" aria-selected="true">Aide</button>
                             </div>
                           </nav>
-                          <div class="tab-content" id="nav-tabContent">
+                          <div class="tab-content panneauDroite" id="nav-tabContent">
                             <div class="tab-pane fade" id="nav-ponctuation" role="tabpanel" aria-labelledby="nav-ponctuation-tab">
                                 <div>
                                     <div class="d-flex">
@@ -276,6 +276,13 @@
                                       Afficher la bordures des cartes.
                                     </label>
                                 </div>
+                                <!-- CONTOURS LETTRES -->
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" value="" id="toggleContours" onchange="toggleContours(this)" checked>
+                                    <label class="form-check-label" for="toggleContours">
+                                      Afficher le contours des lettres.
+                                    </label>
+                                </div>
                                 <!-- MAGNETISME (NE FONCTIONNE PAS AVEC MULTIDRAGGABLE)-->
                                 <!-- <div class="form-check">
                                     <input class="form-check-input" type="checkbox" value="" id="toggleSnap" onchange="toggleSnap(this)" checked>
@@ -295,15 +302,15 @@
                                 <!-- BACKGROUND COLOR -->
                                 <form class="d-flex align-items-center my-2">
                                     <label for="favcolor">Couleur du fond : </label>
-                                    <div style="background-color: white;" class="colorSetting colorSettingSelected" onclick="setCouleurEcritoire(this, 'white')"></div>
-                                    <div style="background-color: #c0c0c0;" class="colorSetting" onclick="setCouleurEcritoire(this, '#c0c0c0')"></div>
+                                    <div style="background-color: #f9eeb1;" class="colorSetting colorSettingSelected" onclick="setCouleurEcritoire(this, '#f9eeb1')"></div>
+                                    <div style="background-color: white;" class="colorSetting" onclick="setCouleurEcritoire(this, 'white')"></div>
                                     <div style="background-color: black;" class="colorSetting" onclick="setCouleurEcritoire(this, 'black')"></div>
                                     <input type="color" id="favcolor" class="colorSetting" name="favcolor" onchange="setCouleurEcritoire(this, this.value)">
                                 </form> 
                                 <!-- STRESS TAILLE CARTES -->
                                 <div>
-                                    <p>Taille des cartes avec accent primaire : <input type="number" value="2" style="width:60px" onchange="stress1ponderator = this.value.replace(',','.')"> fois la taille normale.</p>
-                                    <p>Taille des cartes avec accent secondaire : <input type="number" value="1,5" style="width:60px" onchange="stress2ponderator = this.value.replace(',','.')"> fois la taille normale.</p>
+                                    <p>Ratio de taille des cartes avec accent primaire : <input type="number" value="2" style="width:60px" onchange="stress1ponderator = this.value.replace(',','.')"></p>
+                                    <p>Ratio de taille des cartes avec accent secondaire : <input type="number" value="1,5" style="width:60px" onchange="stress2ponderator = this.value.replace(',','.')"></p>
                                 </div>
                                 
                             </div>
@@ -349,10 +356,14 @@
                             <div class="tab-pane fade d-flex flex-column justify-content-center align-items-center" id="nav-pinyin" role="tabpanel" aria-labelledby="nav-pinyin-tab">
                                 <!-- PINYIN -->
                                 <div style="text-align: center;">
-                                    <div id="pinyinLabAPI"></div>
-                                    <div id="pinyinLab" class="contours" style="font-size: 6em;"></div>
+                                    <div id="pinyinLabAPI" style="height: 25px;"></div>
+                                    <div id="pinyinLab" class="contours" style="font-size: 6em; height:150px"></div>
+                                </div>
+                                <div class="d-flex justify-content-around m-2" style="width:100%">
+                                    <button type="button" class="btn btn-primary" onclick="space()">空格</button>
+                                    <button type="button" class="btn btn-outline-success px-5" onclick="validPinyin()">OK了!</button>
+                                    <button type="button" class="btn btn-danger" onclick="erasePinyin()">重置</button>
                                 </div>
-                                <button type="button" class="btn-bckspPinyin" onclick="erasePinyin()">重置</button>
                             </div>
                             <div class="tab-pane fade show active" id="nav-aide" role="tabpanel" aria-labelledby="nav-aide-tab">
                                 <strong>Bienvenue dans la nouvelle version du PhonoDrop !</strong>

public/scripts/phonodrop_v2.js

@@ -227,6 +227,20 @@ function recupPhon(identifiant){
 
         newDiv.classList.add('borderTransparent') // on a déjà la bordure de syll
 
+    // PINYIN
+    } else if (identifiant.match(/pinyin.*/)) {
+        console.log("Création de :", identifiant)
+        newDiv.innerHTML = document.getElementById('pinyinLab').innerHTML;
+        newDiv.classList.add("contours");
+        newDiv.style.fontSize = "5em";
+        newDiv.style.lineHeight = "1.2em";
+        newDiv.style.padding = "0px 5px";
+        newDivWidth = ponderateur * 100
+        newDivHeight = ponderateur * 110
+        // newDiv.style.width = newDivWidth + "px"
+        newDiv.style.height = newDivHeight + "px"
+        newDiv.borderRadius = "30px"
+
     // PHON
     } else if (famille == "kinephones") {
         // rect = w:84 h:26 ry:2.7
@@ -433,6 +447,7 @@ function space() {
 
 // PARAMÈTRES DES CARTES (Options à droite de l'écritoire)
 function toggleBordures(check){
+    // var check = document.getElementById('toggleBordures').checked;
     if (!check.checked) {
         document.documentElement.style.setProperty('--carteV2Border', 'black 0px solid');
     } else {
@@ -440,14 +455,27 @@ function toggleBordures(check){
     }
 }
 
+function toggleContours(check){
+    // var check = document.getElementById('toggleContours').checked;
+    if (!check.checked) {
+        document.documentElement.style.setProperty('--contoursColor', 'transparent');
+    } else {
+        document.documentElement.style.setProperty('--contoursColor', 'black');
+    }
+}
+
 function setCouleurEcritoire(div, couleur){
     document.documentElement.style.setProperty('--couleurEcritoire', couleur);
     document.querySelectorAll('.colorSettingSelected').forEach( (div) => { div.classList.remove('colorSettingSelected') })
     div.classList.add('colorSettingSelected')
+    
     if (couleur == "black" || couleur == "#000000") {
         document.documentElement.style.setProperty('--borders-anchor', "#9b9b9b");
+        document.getElementById('toggleContours').checked = false; toggleContours(document.getElementById('toggleContours'));
+        document.getElementById('nav-tabContent').style.color = "white";
     } else {
         document.documentElement.style.setProperty('--borders-anchor', "black");
+        document.getElementById('nav-tabContent').style.color = "black";
     }
 }
 

public/scripts/sinosyllabe.js

@@ -381,11 +381,25 @@ function zhPhon(identifiant) {
     }
 
     document.getElementById('pinyinLab').innerHTML = pinyinEnCoursHtml;
+
+    if (document.getElementById('pinyinLab').innerHTML.length == 0) erasePinyin();
+
+    if (Object.keys(syllons).includes(document.getElementById('pinyinLab').innerText+"5")) {
+        document.getElementById('pinyinLab').classList.add("pinyinAtteste");
+    } else {
+        document.getElementById('pinyinLab').classList.remove("pinyinAtteste");
+    }
+}
+
+function validPinyin() {
+    recupPhon("pinyin");
+    erasePinyin();
 }
 
 function erasePinyin() {
     document.getElementById('pinyinLab').innerHTML = '';
     document.getElementById('pinyinLabAPI').innerHTML = '';
+    document.getElementById('pinyinLab').classList.remove("pinyinAtteste");
 }
 
 //["","́","́","̌","̌",""] // tons[1]="´"  tons[0|5]=""
@@ -416,8 +430,11 @@ function recupTone(identifiant) {
                 nod.innerText = nod.innerText.replace(thisVoy,tons[myton][thisVoy])
             }
         })
+        document.getElementById('pinyinLabAPI').innerHTML += myton;
+        document.getElementById('pinyinLab').classList.add("pinyinAtteste");
     } else {
-        console.log("Syllon non attesté.")
+        console.log("Syllon non attesté.");
+        document.getElementById('pinyinLab').classList.remove("pinyinAtteste");
     }
 }
 

public/styles/styles.css

@@ -3,8 +3,10 @@
     --hcarte: 56px;
     --marginbot: 00px;
     --carteV2Border: black 1px solid;
-    --couleurEcritoire: white;
+    --couleurEcritoire: #f9eeb1;
     --borders-anchor: black;
+    --contoursWidth: 0.5px;
+    --contoursColor: black;
 }
 
 body {
@@ -457,6 +459,16 @@ footer {
 }
 
 .contours {
-    -webkit-text-stroke-width: 0.5px;
-    -webkit-text-stroke-color: black;
+    -webkit-text-stroke-width: var(--contoursWidth);
+    -webkit-text-stroke-color: var(--contoursColor);
+}
+
+.pinyinAtteste {
+    border: solid 3px green;
+    border-radius: 30px;
+    padding:15px 25px 0px 25px;
+}
+
+.panneauDroite {
+    background-color: var(--couleurEcritoire);
 }
\ No newline at end of file