char select list fix

templates/index.html

@@ -260,7 +260,7 @@
         <div id="characterSelectionArea" style="display:none;">
             <h4>Pick your group:</h4>
             <div id="selectAllContainer">
-                <input type="checkbox" id="selectAllRaiders" /> <label for="selectAllRaiders" style="font-weight:bold; display:inline; width: auto; margin-right: 0;">Select/Deselect All</label>
+                <input type="checkbox" id="selectAllRaiders" checked/> <label for="selectAllRaiders" style="font-weight:bold; display:inline; width: auto; margin-right: 0;">Select/Deselect All</label>
             </div>
             <div id="characterList" style="max-height: 300px; overflow-y: auto; margin-bottom:15px; display: flex; flex-wrap: nowrap; justify-content: space-between;">
                 <!-- Character checkboxes will be populated here into three columns -->
@@ -390,34 +390,24 @@
                     const charsPerColumn = Math.ceil(numCharacters / 3);
                     
                     let columns = [[], [], []];
-                    let currentColumn = 0;
+                    // let currentColumn = 0; // Not needed for this simpler distribution
                     
                     for (let i = 0; i < numCharacters; i++) {
-                        if (columns[currentColumn].length >= charsPerColumn && currentColumn < 2) {
-                             // Ensure we distribute more evenly if the last column would be too small due to Math.ceil
-                            if ( (numCharacters - i) <= ((2-currentColumn) * (charsPerColumn -1)) && charsPerColumn > 1){
-                                // if remaining chars can fit into remaining columns with one less item each, move to next column
-                            } else {
-                                currentColumn++;
-                            }
-                        }
-                         // A more direct way to distribute characters:
+                        // This logic populates columns downwards alphabetically
                         if (i < charsPerColumn) {
                             columns[0].push(data.characters[i]);
-                        } else if (i < 2 * charsPerColumn) {
+                        } else if (i < (charsPerColumn * 2)) { // Fill second column
                             columns[1].push(data.characters[i]);
-                        } else {
+                        } else { // Fill third column
                             columns[2].push(data.characters[i]);
                         }
                     }
                     
-                    // Re-distribute for better balance if Math.ceil caused imbalance
-                    // This is a common simple distribution method:
-                    columns = [[], [], []]; // Reset columns
-                    for (let i = 0; i < numCharacters; i++) {
-                        columns[i % 3].push(data.characters[i]);
-                    }
-
+                    // The following block for re-distribution is no longer needed and will be removed.
+                    // columns = [[], [], []]; // Reset columns
+                    // for (let i = 0; i < numCharacters; i++) {
+                    //    columns[i % 3].push(data.characters[i]);
+                    // }
 
                     columns.forEach(columnCharacters => {
                         const columnDiv = document.createElement('div');