add bulk node modal

index.html

@@ -49,6 +49,7 @@
                         <button id="addNode" class="controlButton">Add Node</button>
                         <button id="sendPacket" class="controlButton">Send Packet</button>
                         <button id="resetTTLColors" class="controlButton">Reset TTL Colors</button>
+                        <button id="createRandomGraph" class="controlButton">Create Random Graph</button>
                     </div>
                     <div id="simToggles">
                         <input type="checkbox" id="showRanges" class="simToggle">
@@ -64,6 +65,13 @@
                 <details id="incomingConnections"><summary>Incoming Connections</summary></details>
                 <details id="outgoingConnections"><summary>Outgoing Connections</summary></details>
             </div>
+            <div id="randomGraphModal">
+                <div id="randomGraphModalContent">
+                    <label for="randomGraphNodes">Number of Nodes</label>
+                    <input type="number" id="randomGraphNodes" value="10" autocomplete="off">
+                    <button id="createRandomGraphConfirm" class="controlButton">Create Random Graph</button>
+                </div>
+            </div>
         </div>
         <script type="text/javascript" src="script.js"></script>
     </body>

script.js

@@ -479,4 +479,33 @@ document.getElementById('maxOutgoingConnections').addEventListener('change', fun
 
 document.getElementById('maxIncomingConnections').addEventListener('change', function() {
     MAX_INCOMING_CONNECTIONS = parseInt(this.value);
+});
+
+document.getElementById('createRandomGraph').addEventListener('click', function() {
+    document.getElementById('randomGraphModal').style.display = 'block';
+});
+
+document.getElementById('createRandomGraphConfirm').addEventListener('click', function() {
+    const nodeCount = parseInt(document.getElementById('randomGraphNodes').value);
+    network.setOptions({
+        nodes: {
+            shape: 'box',
+            physics: true,
+        },
+    });
+    for (let i = 0; i < nodeCount; i++) {
+        const nodeId = generateRealisticLabel();
+        nodes.add({id: nodeId, label: nodeId, x: Math.random() * 100, y: Math.random() * 100});
+        nodeTable[nodeId] = {'incoming': [], 'outgoing': [], 'packetCache': []};
+    }
+
+    setTimeout(() => {
+        network.setOptions({
+            nodes: {
+                shape: 'box',
+                physics: false,
+            }
+        });
+    }, 2000);
+    document.getElementById('randomGraphModal').style.display = 'none';
 });

style.css

@@ -78,4 +78,31 @@ html, body {
 
 #simpleSettings, #hardwareConstraints, #engineSettings {
     margin-bottom: 10px;
+}
+
+#randomGraphModal {
+    display: none;
+    position: absolute;
+    top: 0%;
+    left: 0%;
+    transform: translate(0%, 0%);
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 20px;
+    border: 1px solid #000;
+    width: 100%;
+    height: 100%;
+}
+
+#randomGraphModalContent {
+    padding: 20px;
+    background-color: #fff;
+    border: 1px solid #000;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+#createRandomGraphConfirm {
+    margin-top: 10px;
 }