Custom Modules now have default placement

index.html

@@ -283,7 +283,7 @@ if scale < 1:
 
                 <div class="control-group">
                     <label for="module-count">Number of Modules</label>
-                    <input type="number" id="module-count" min="2" max="12" value="4" step="1">
+                    <input type="number" id="module-count" min="2" max="64" value="4" step="1">
                 </div>
 
                 <button id="generate-inputs-btn" type="button">Generate Position Inputs</button>

script.js

@@ -516,8 +516,8 @@ preset16OctBtn.addEventListener('click', () => {
 generateInputsBtn.addEventListener('click', () => {
     const count = parseInt(moduleCountInput.value);
 
-    if (isNaN(count) || count < 2) {
+    if (isNaN(count) || count < 2 || count > 64) {
-        alert('Please enter a valid number of modules above or equal to 2.');
+        alert('Please enter a valid number of modules between 2 and 64.');
         return;
     }
     generateModuleInputs(count);
@@ -557,11 +557,67 @@ applyCustomBtn.addEventListener('click', () => {
 * BEGIN DYNAMIC DOM FUNCTIONS
 */
 
+// Function to calculate evenly spaced module positions in circular layers
+function calculateModulePositions(count) {
+    if (count <= 0) return [];
+
+    const baseRadius = 50; // Base radius for the first layer
+    const positions = [];
+    let remainingModules = count;
+    let numberOfLayers = Math.ceil(count / 6);
+    let modulesPerLayer = Math.ceil(count / numberOfLayers);
+    let angleOffset = 0;
+    let currentLayer = 0;
+    let moduleIndex = 0;
+
+    while (remainingModules > 0) {
+        // Determine modules for this layer
+        let modulesInThisLayer;
+
+        if (remainingModules <= modulesPerLayer) {
+            // Last layer gets all remaining modules
+            modulesInThisLayer = remainingModules;
+        } else {
+            // All other layers: try to distribute evenly with max modulesPerLayer
+            const remainingLayers = Math.ceil(remainingModules / modulesPerLayer);
+            modulesInThisLayer = Math.min(modulesPerLayer, Math.ceil(remainingModules / remainingLayers));
+        }
+
+        // Calculate radius for this layer
+        const radius = currentLayer === 0 ? baseRadius : baseRadius * (1 + currentLayer * 0.75);
+
+        // Calculate positions for modules in this layer
+        for (let i = 0; i < modulesInThisLayer; i++) {
+            const angle = (angleOffset + 2 * Math.PI * i) / modulesInThisLayer;
+            const x = Math.round(radius * Math.cos(angle));
+            const y = Math.round(radius * Math.sin(angle));
+
+            positions.push({
+                x: x,
+                y: y,
+                name: `Layer ${currentLayer + 1} Module ${(moduleIndex % modulesPerLayer) + 1}`
+            });
+
+            moduleIndex++;
+        }
+        angleOffset += Math.PI;
+
+        remainingModules -= modulesInThisLayer;
+        currentLayer++;
+    }
+
+    return positions;
+}
+
 function generateModuleInputs(count) {
     const container = document.getElementById('module-position-inputs');
     container.innerHTML = ''; // Clear existing inputs
 
+    // Calculate evenly spaced positions
+    const positions = calculateModulePositions(count);
+
     for (let i = 0; i < count; i++) {
+        const position = positions[i];
         const moduleFieldset = document.createElement('fieldset');
         moduleFieldset.className = 'module-input-group';
         moduleFieldset.innerHTML = `
@@ -569,15 +625,15 @@ function generateModuleInputs(count) {
 
         <div class="control-group">
             <label for="module-${i}-name">Module Name</label>
-            <input type="text" id="module-${i}-name" value="Module ${i + 1}" required>
+            <input type="text" id="module-${i}-name" value="${position.name}" required>
         </div>
         <div class="control-group">
             <label for="module-${i}-x">X Position (pixels)</label>
-            <input type="number" id="module-${i}-x" step="1" value="0" required>
+            <input type="number" id="module-${i}-x" step="1" value="${position.x}" required>
         </div>
         <div class="control-group">
             <label for="module-${i}-y">Y Position (pixels)</label>
-            <input type="number" id="module-${i}-y" step="0.1" value="0" required>
+            <input type="number" id="module-${i}-y" step="0.1" value="${position.y}" required>
         </div>
         `;
         container.appendChild(moduleFieldset);