ajout de slots vides pour complèter les groupes, un peu d'ui, calcul auto du nombre de rounds

app.js

@@ -3,6 +3,17 @@ const TESTS_LIST = ['Charles', 'Baruch','Frédéric', 'John', 'Dan',
                     'Albert', 'Beth', 'Erykah', 'Aretha', 'Lucio',
                     'Bartleby','Zach','Patti','Aesop','Vernon']
 
+const NOBODY = '***NOBODY';
+
+function groupSizeChanged(val){
+  let nbParticipants = document.getElementsByClassName('participant').length;
+  let meetsPerRound = val - 1;
+  let maxRounds = Math.floor(nbParticipants / meetsPerRound);
+
+  document.getElementById('nbRounds').max = maxRounds
+
+}
+
 var participants;
 
 function loadParticipantsFileChooser(){
@@ -39,20 +50,30 @@ function addParticipant(name){
       newInput.value = name;
     document.getElementById('participants').appendChild(newInput)
 
+    //outch...
+    document.getElementById('nbPerGroup').disabled = false;
+    document.getElementById('nbRounds').disabled = false;
+    document.getElementById('btn-do-it').disabled = false;
 }
 
 function russellize(){
-  let availablesPerParticipants = new Map()
 
-  participants.forEach(function (p) {
-    availablesPerParticipants.set(p,participants.slice().filter(el => el !== p))
-  });
 
   let k = document.getElementById('nbPerGroup').value
   let nbRounds = document.getElementById('nbRounds').value
   let nbGroups = Math.ceil(participants.length / k)
   let rounds = new Array()
 
+  let missingParticipants = nbGroups * k - participants.length
+  for(let n = 0; n < missingParticipants; n++)
+      participants.push(NOBODY + n);
+
+  let availablesPerParticipants = new Map()
+
+  participants.forEach(function (p) {
+    availablesPerParticipants.set(p,participants.slice().filter(el => el !== p))
+  });
+
   for(let i = 1; i <= nbRounds; i++){
     let round = new Array()
     let availables = participants.slice()
@@ -163,8 +184,12 @@ function renderRounds(rounds){
       groupBlock.appendChild(list)
       groupBlock.classList.add('group')
       group.forEach(function (p) {
+          let emptySlot = p.indexOf(NOBODY) >= 0
           let item = document.createElement('li')
-          item.appendChild(document.createTextNode(p))
+          if(emptySlot)
+              item.classList='empty-slot'
+          let pTxt = emptySlot ? '' : p;
+          item.appendChild(document.createTextNode(pTxt))
           list.appendChild(item)
       })
       y ++

css/app.css

@@ -8,6 +8,8 @@ html, body{
   padding:0px;
   font-family: 'Roboto';
 }
+
+
 #rounds, #participants{
   padding:10px;
 }
@@ -37,6 +39,10 @@ label{
    margin:2px;
 }
 
+.empty-slot{
+  display:none;
+}
+
 #participants{
   border-bottom: 2px solid black;
   padding-bottom:10px;
@@ -61,6 +67,12 @@ button:hover{
   background-color: #ddd;
 }
 
+button:disabled, button[disabled],button[disabled]:active{
+  background-color: rgba(0,0,0,0.15);
+  border-color:rgba(0,0,0,0.25);
+  cursor:not-allowed;
+}
+
 #settings > div{
   height:32px;
 }

index.html

@@ -14,20 +14,26 @@
           <img src='images/upload.svg' />
         </button>
         <button title="load test participants" onclick="loadTest()">
-          <img src='images/random.svg'width="24px"/>
+          <img src='images/random.svg' width="24px"/>
         </button>
         <button title="add participant" onclick="addParticipant()">
           <img src='images/add.svg' />
         </button>
-        <button id="btn-do-it" title="run" onclick="run()">
+        <button id="btn-do-it" title="run" onclick="run()" disabled>
           <img src="images/play.svg"/>
         </button>
         <input id="filechooser" type="file" onchange="loadParticipantsFromFile(this.files[0])"/>
       </div>
       <div id="settings">
-        <div><label><img title="Table/Group size" src="images/group.svg"></label><input title="Table/Group size" type="number" value="4" id="nbPerGroup"/></div>
         <div>
-          <label><img title="Number of rounds" src="images/round.svg"></label><input type="number" title="Number of rounds" value="6" id="nbRounds"/>
+          <label><img title="Table/Group size" src="images/group.svg"></label>
+          <input title="Table/Group size" onchange="groupSizeChanged(this.value)" type="number" value="1" id="nbPerGroup" disabled/>
+        </div>
+        <div>
+          <label>
+            <img title="Number of rounds" src="images/round.svg">
+          </label>
+          <input type="number" title="Number of rounds" value="1" id="nbRounds" disabled/>
         </div>
       </div>
     </nav>