Ajout réglettes

public/index.html

@@ -223,7 +223,7 @@
                         <nav class="navOptions">
                             <div class="d-flex nav nav-tabs" id="nav-tab" role="tablist">
                               <button class="nav-link" id="nav-ponctuation-tab" data-bs-toggle="tab" data-bs-target="#nav-ponctuation" type="button" role="tab" aria-controls="nav-ponctuation" aria-selected="true">Ponctuation</button>
-                              <button class="nav-link" id="nav-grammaire-tab" data-bs-toggle="tab" data-bs-target="#nav-grammaire" type="button" role="tab" aria-controls="nav-grammaire" aria-selected="false">Grammaire</button>
+                              <button class="nav-link" id="nav-grammaire-tab" data-bs-toggle="tab" data-bs-target="#nav-grammaire" type="button" role="tab" aria-controls="nav-grammaire" aria-selected="false">Réglettes</button>
                               <button class="nav-link" id="nav-parametres-tab" data-bs-toggle="tab" data-bs-target="#nav-parametres" type="button" role="tab" aria-controls="nav-parametres" aria-selected="false">Paramètres</button>
                               <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="false">Aide</button>
                             </div>
@@ -239,7 +239,11 @@
                                 <div id="trait-point"></div>
                             </div>
                             <div class="tab-pane fade" id="nav-grammaire" role="tabpanel" aria-labelledby="nav-grammaire-tab">
-                                Bientôt !
+                                <div class="d-flex justify-content-around">
+                                    <div id="ronds"></div>
+                                    <div id="rectangles"></div>
+                                    <div id="reglettes"></div>
+                                </div>
                             </div>
                             <div class="tab-pane fade" id="nav-parametres" role="tabpanel" aria-labelledby="nav-parametres-tab">
                                 <!-- BORDURES -->

public/scripts/phonodrop_v2.js

@@ -28,6 +28,59 @@ for (i in tps) {
     newDiv.style.backgroundImage = 'url("trait-point/'+tps[i]+'"'
     document.getElementById('trait-point').appendChild(newDiv)
 }
+
+// Réglettes
+let rodColors = [
+    "#f3e3ca",
+    "#ea1b39",
+    "#a8d147",
+    "#952a8a",
+    "#fdf001",
+    "#00834d",
+    "#1d1d27",
+    "#9a3724",
+    "#046cb3",
+    "#f27322"
+]
+let rodHeight = 25
+
+for (i=1; i<=10; i++) {
+    // Création carte & récup infos
+    var newRod = document.createElement('div')
+    var newRect = document.createElement('div')
+    var newCircle = document.createElement('div')
+    
+    // Formatage de la réglette
+    newRod.id = `rod${i}`
+    newRod.className = "rod"
+    newRod.addEventListener('click', function(){recupPhon(this.id)})
+    newRod.style.backgroundColor = rodColors[i-1]
+    newRod.style.width = `${i*rodHeight}px`
+    newRod.style.margin = "5px"
+
+    // Formatage du rectangle
+    newRect.id = `rect${i}`
+    newRect.className = "rod"
+    newRect.addEventListener('click', function(){recupPhon(this.id)})
+    newRect.style.backgroundColor = rodColors[i-1]
+    newRect.style.width = `${2*rodHeight}px`
+    newRect.style.margin = "5px"
+
+    // Formatage du cercle
+    newCircle.id = `circle${i}`
+    newCircle.className = "rod"
+    newCircle.addEventListener('click', function(){recupPhon(this.id)})
+    newCircle.style.backgroundColor = rodColors[i-1]
+    newCircle.style.width = `${rodHeight}px`
+    newCircle.style.borderRadius = "50%"
+    newCircle.style.margin = "5px"
+
+
+    document.getElementById('reglettes').appendChild(newRod)
+    document.getElementById('rectangles').appendChild(newRect)
+    document.getElementById('ronds').appendChild(newCircle)
+}
+
 ///////////////////////////////////////////////////
 
 
@@ -128,6 +181,15 @@ function recupPhon(identifiant){
         newDiv.style.width = newDivWidth + "px"
         newDiv.style.height = newDivHeight + "px"
     
+    // REGLETTES
+    } else if (identifiant.match(/rod\d+/) || identifiant.match(/rect\d+/) || identifiant.match(/circle\d+/)) {
+        let thisRod = document.getElementById(identifiant)
+        newDiv.style.backgroundColor = thisRod.style.backgroundColor
+        newDiv.style.width = thisRod.style.width
+        newDivHeight = rodHeight
+        newDiv.style.height = rodHeight+"px"
+        newDiv.style.borderRadius = thisRod.style.borderRadius
+
     // PHON
     } else if (famille == "kinephones") {
         // rect = w:84 h:26 ry:2.7

public/styles/styles.css

@@ -289,6 +289,13 @@ footer {
     background-size: 100% 100%;
 }
 
+.rod {
+    border: solid black 1px;
+    border-radius: 5px;
+    cursor: pointer;
+    height: 25px;
+}
+
 .selectedPhon {
     border-right: black solid 4px;
     border-right-color: var(--borders-anchor);