Version avec deux queues égales

index.html

@@ -22,22 +22,24 @@
       <span id="prochain" class="personne">Personne</span> <button onclick="next()">Hop!</button>
     </p>
 
-    <section class="queue" id="queue_prio">
+    <section id="queues">
-      <h3>Personnes prioritaires</h3>
+    <section class="queue courante" id="queue_a">
+      <h3>Queue A</h3>
       <ol>
 
       </ol>
-      <p>Ajouter: <input type="text" onkeypress='ajoute_kp(event, "queue_prio")'/>
+      <p class="finisseur">Ajouter: <input type="text" onkeypress='ajoute_kp(event, "queue_a")'/>
-	<button onclick='ajoute("queue_prio")'>x</button></p>
+	<button onclick='ajoute("queue_a")'>+</button></p>
     </section>
     
-    <section class="queue" id="queue_non_prio">
+    <section class="queue attente" id="queue_b">
-      <h3>Personnes non prioritaires</h3>
+      <h3>Queue B</h3>
       <ol>
 
       </ol>
-      <p>Ajouter: <input type="text" onkeypress='ajoute_kp(event, "queue_non_prio")'/>
+      <p class="finisseur">Ajouter: <input type="text" onkeypress='ajoute_kp(event, "queue_b")'/>
-	<button onclick='ajoute("queue_non_prio")'>x</button></p>
+	<button onclick='ajoute("queue_b")'>+</button></p>
+    </section>
     </section>
 
   </body>

kikikoz.css

@@ -10,3 +10,36 @@ p.prochain {
 .personne {
     color: darkgrey;
 }
+
+.courante {
+    background-color: lightgreen;
+}
+
+.attente {
+    background-color: pink;
+}
+
+section.queue {
+    border-radius: .5rem;
+    margin: .5rem;
+    padding: .5rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.courante li:first-child {
+    font-weight: bold;
+}
+
+.finisseur {
+    margin-top: auto;
+}
+
+section#queues {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+h1 {
+    text-align: center;
+}

src/lib.rs

@@ -22,15 +22,17 @@ pub fn next() {
     let document = window.document().expect("should have a document on window");
 
     let prochain = document.get_element_by_id("prochain").expect("blu");
-    let queue_prio = document.get_element_by_id("queue_prio").expect("bla");
+    let queue_prio = document.get_elements_by_class_name("courante").item(0).expect("bla");
-    let queue_non_prio = document.get_element_by_id("queue_non_prio").expect("bla");
+    let queue_non_prio = document.get_elements_by_class_name("attente").item(0).expect("bla");
     let lis_prio = queue_prio.get_elements_by_tag_name("li");
     let queue = if lis_prio.length() == 0 {
-	queue_non_prio
+	&queue_non_prio
     } else {
-	queue_prio
+	&queue_prio
     };
     let lis = queue.get_elements_by_tag_name("li");
+    queue_prio.set_class_name("queue attente");
+    queue_non_prio.set_class_name("queue courante");
     match lis.item(0) {
 	Some(li) => {
 	    let nom_prochain = li.text_content().expect("");