1. Background: friends, please help to make a competition scheduling software
2. Requirements:
① If the number of participants is unknown, the name of participants can be read from the text file;
② The participants are randomly divided into two groups, two PK in one group. If the number is odd, one of the participants will be promoted automatically;
③ The competition is conducted offline, and after the competition, the promotion personnel in each group can be selected online;
④ The promotion personnel are divided into groups in the next round, and so on, until the last round.
After reading the above requirements, what kind of analysis and design will you make? Here are my foolish ideas.
3. Analysis:
① Considering the actual situation and business needs of the friend, it is obvious that the simpler the game scheduling software is, the more stupid it is, the better. Therefore, in terms of the implementation architecture, the BS architecture is not considered, but the single page presentation + the name of the contestant text document form is considered.
② According to the requirements, roughly draw the following functional schematic diagram. Obviously, this design is also for convenience
4. Realization: see here, smart you must have a better way to achieve it! Please give me some advice! Here is my implementation
Implementation code
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Special soup_Game scheduler</title> 9 <style> 10 label { 11 color: red; 12 } 13 14 div { 15 display: inline; 16 margin: 5px; 17 padding: 2px; 18 } 19 20 .initDiv { 21 background-color: black; 22 color: white; 23 } 24 25 .matchDiv { 26 background-color: orange; 27 color: black; 28 } 29 30 .playerDiv { 31 background-color: pink; 32 color: black; 33 } 34 35 .resultDiv { 36 background-color: green; 37 color: white; 38 } 39 40 .resultData { 41 background-color: blue; 42 color: white; 43 } 44 45 .selectDiv { 46 background-color: #666666; 47 color: white; 48 } 49 </style> 50 </head> 51 52 <body> 53 <fieldset> 54 <legend>Special soup_Game schedulerのInstructions</legend> 55 <ol> 56 <li>The selected file must be utf-8 format</li> 57 <li>Use Chrome Fast mode of browser or 360 browser</li> 58 <li>During the first round of scheduling, select the text file to use (refer to the template file)</li> 59 <li>For subsequent scheduling, click refresh first, and then click Start scheduling to use the customs clearance personnel saved in the last round</li> 60 </ol> 61 </fieldset> 62 <hr/> 63 <div> 64 <input type="file" id="btnFiles" /> 65 <input type="button" id="btnPlan" value="Step 2. Start scheduling" /> 66 <input type="button" id="btnSave" value="Step 3. Save the data" /> 67 <input type="button" id="btnUpdate" value="Step 4. Refresh the page" /> 68 <hr/> 69 </div> 70 <script> 71 var arr = []; 72 var resultData = []; 73 74 // Extended array function: random sorting 75 if (!Array.prototype.shuffle) { 76 Array.prototype.shuffle = function () { 77 for (var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = 78 this[j], this[j] = x); 79 return this; 80 }; 81 } 82 83 // Extended array function: to delete specified value elements 84 if (!Array.prototype.removeByValue) { 85 Array.prototype.removeByValue = function (val) { 86 for (var i = 0; i < this.length; i++) { 87 if (this[i] == val) { 88 this.splice(i, 1); 89 break; 90 } 91 } 92 }; 93 } 94 95 // Page initialization 96 window.onload = function () { 97 var btnFiles = document.getElementById('btnFiles'); 98 var btnPlan = document.getElementById('btnPlan'); 99 var btnSave = document.getElementById('btnSave'); 100 var btnUpdate = document.getElementById('btnUpdate'); 101 102 btnFiles.onchange = importFile; 103 btnPlan.onclick = matchPlan; 104 btnSave.onclick = saveData; 105 btnUpdate.onclick = updatePage; 106 }; 107 108 // with CSS Class name get element 109 var getClass = function (classname) { 110 return document.getElementsByClassName(classname); 111 }; 112 113 var importFile = function () { 114 // Get read File object 115 var selectedFile = document.getElementById("btnFiles").files[0]; 116 if (selectedFile.name) { 117 // Read the file name of the selected file 118 var name = selectedFile.name; 119 // Read the size of the selected file 120 var size = selectedFile.size; 121 122 // read operation 123 var reader = new FileReader(); 124 // Read the contents of the file 125 reader.readAsText(selectedFile); 126 127 reader.onload = function () { 128 // This function will be called back when the reading is completed, and then the contents of the file will be stored in the result 129 var temparr = this.result.split(/[\s\n]/); 130 temparr.forEach(function (v, i) { 131 if (v != '') { 132 arr.push(v); 133 } 134 }); 135 136 // During the first round of scheduling, the contents of the text file are stored in the sessionStorage In, use later sessionStorage 137 sessionStorage.setItem('resultData', arr); 138 }; 139 } 140 }; 141 142 var matchPlan = function () { 143 if (sessionStorage.getItem('resultData')) { 144 arr = sessionStorage.getItem('resultData').split(','); 145 } 146 147 var initLabel = document.createElement('label'); 148 initLabel.className = 'initLabel'; 149 initLabel.innerText = 'Initial data:'; 150 document.body.appendChild(initLabel); 151 152 for (var i = 0; i < arr.length; i++) { 153 var tempdiv = document.createElement('div'); 154 tempdiv.id = 'initDiv' + i; 155 tempdiv.className = 'initDiv'; 156 tempdiv.innerText = arr[i]; 157 document.body.appendChild(tempdiv); 158 } 159 160 // Stochastic ranking 161 arr.shuffle(); 162 163 // Line feed 164 document.body.appendChild(document.createElement('br')); 165 document.body.appendChild(document.createElement('br')); 166 167 // Show participants' data 168 var matchLabel = document.createElement('label'); 169 matchLabel.innerText = 'Random order:'; 170 document.body.appendChild(matchLabel); 171 172 for (var i = 0; i < arr.length; i++) { 173 var tempdiv = document.createElement('div'); 174 tempdiv.id = 'matchDiv' + i; 175 tempdiv.className = 'matchDiv'; 176 tempdiv.innerText = arr[i]; 177 document.body.appendChild(tempdiv); 178 } 179 180 document.body.appendChild(document.createElement('hr')); 181 182 var temp = document.createElement('label'); 183 temp.className = 'initLabel'; 184 temp.innerText = 'Competition group:'; 185 document.body.appendChild(temp); 186 187 // Line feed 188 document.body.appendChild(document.createElement('br')); 189 document.body.appendChild(document.createElement('br')); 190 191 for (var i = 0; i < arr.length; i++) { 192 if (i % 2 == 0) { 193 var groupLabel = document.createElement('label'); 194 groupLabel.innerText = "The first" + (Math.round(i / 2) + 1) + "Group:"; 195 document.body.appendChild(groupLabel); 196 197 var player1div = document.createElement('div'); 198 player1div.id = 'playerDiv' + i; 199 player1div.className = 'playerDiv'; 200 player1div.innerText = arr[i]; 201 document.body.appendChild(player1div); 202 } else { 203 var groupLabel = document.createElement('label'); 204 groupLabel.className = 'initLabel'; 205 groupLabel.innerText = " VS "; 206 document.body.appendChild(groupLabel); 207 208 var player2div = document.createElement('div'); 209 player2div.id = 'playerDiv' + i; 210 player2div.className = 'playerDiv'; 211 player2div.innerText = arr[i]; 212 document.body.appendChild(player2div); 213 214 // Line feed 215 document.body.appendChild(document.createElement('br')); 216 document.body.appendChild(document.createElement('br')); 217 } 218 } 219 220 document.body.appendChild(document.createElement('hr')); 221 222 var resultLabel = document.createElement('label'); 223 resultLabel.innerText = "Customs clearance personnel:"; 224 document.body.appendChild(resultLabel); 225 226 // Line feed 227 document.body.appendChild(document.createElement('br')); 228 document.body.appendChild(document.createElement('br')); 229 230 for (var i = 0; i < getClass('playerDiv').length; i++) { 231 // Get competition groups div Element and bind double click event 232 getClass('playerDiv')[i].ondblclick = function () { 233 // Set up competition groups div Element cannot be double clicked after double clicking 234 this.style['pointer-events'] = 'none'; 235 this.setAttribute("class", "selectDiv"); 236 237 var tempdiv = document.createElement('div'); 238 tempdiv.id = 'resultDiv' + i; 239 tempdiv.className = 'resultDiv'; 240 tempdiv.innerText = this.innerText; 241 document.body.appendChild(tempdiv); 242 243 resultData.push(this.innerText); 244 245 for (var i = 0; i < getClass('resultDiv').length; i++) { 246 getClass('resultDiv')[i].ondblclick = function () { 247 document.body.removeChild(this); 248 resultData.removeByValue(this.innerText); 249 250 for (var i = 0; i < getClass('selectDiv').length; i++) { 251 if (this.innerText == getClass('selectDiv')[i].innerText) { 252 // Set up competition groups div Elements can be double clicked 253 getClass('selectDiv')[i].style['pointer-events'] = 'auto'; 254 getClass('selectDiv')[i].setAttribute("class", "playerDiv"); 255 } 256 } 257 }; 258 } 259 }; 260 } 261 }; 262 263 // Save data for next round of scheduling 264 var saveData = function () { 265 // Use HTML5 Of SessionStorage Store data in client browser during current session 266 sessionStorage.setItem('resultData', resultData); 267 }; 268 269 // Refresh the page to start the next round of scheduling 270 var updatePage = function () { 271 window.location.reload(); 272 }; 273 </script> 274 </body> 275 276 </html>
