fix the app

components/control-panel.js

@@ -60,7 +60,7 @@ class CustomControlPanel extends HTMLElement {
       </div>
 
       <script>
-        document.querySelectorAll('.component-item').forEach(item => {
+        this.shadowRoot.querySelectorAll('.component-item').forEach(item => {
           item.addEventListener('click', () => {
             const type = item.dataset.type;
             document.dispatchEvent(new CustomEvent('component-selected', {
@@ -69,20 +69,10 @@ class CustomControlPanel extends HTMLElement {
           });
         });
 
-        document.getElementById('delete-btn').addEventListener('click', () => {
-          if (window.selectedComponent) {
-            const type = window.selectedComponent.type;
-            const arr = window.components[type + 's'];
-            const index = arr.indexOf(window.selectedComponent);
-            if (index > -1) {
-              arr.splice(index, 1);
-              window.selectedComponent = null;
-              window.drawField();
-              window.updateComponentDetails();
-            }
-          }
+        this.shadowRoot.getElementById('delete-btn').addEventListener('click', () => {
+          document.dispatchEvent(new CustomEvent('delete-selected'));
         });
-      </script>
+</script>
 <div id="component-details" class="bg-gray-700 p-4 rounded-lg">
             <p class="text-gray-400">No component selected</p>
           </div>

components/navbar.js

@@ -23,14 +23,12 @@ class CustomNavbar extends HTMLElement {
                         <i data-feather="compass" class="text-primary-500"></i>
                         <span class="text-xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">EM Constructor</span>
 </div>
-                    
                     <div class="hidden md:flex space-x-6">
-                        <a href="#" class="nav-link text-gray-300 hover:text-primary-500">Simulator</a>
-                        <a href="#" class="nav-link text-gray-300 hover:text-primary-500">Tutorial</a>
-                        <a href="#" class="nav-link text-gray-300 hover:text-primary-500">About</a>
+                        <a href="/" class="nav-link text-gray-300 hover:text-primary-500">Simulator</a>
+                        <a href="/tutorial.html" class="nav-link text-gray-300 hover:text-primary-500">Tutorial</a>
+                        <a href="/about.html" class="nav-link text-gray-300 hover:text-primary-500">About</a>
                     </div>
-                    
-                    <div class="flex items-center space-x-4">
+<div class="flex items-center space-x-4">
                         <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-800 transition-colors">
                             <i data-feather="moon" class="text-gray-300"></i>
                         </button>

script.js

@@ -34,9 +34,9 @@ function resizeCanvas() {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         
         // Draw wires first (background)
-            components.magnets.forEach(m => {
-wires.forEach(wire => {
-            if (wire.points.length < 2) return;
+        components.magnets.forEach(magnet => {
+components.wires.forEach(wire => {
+if (wire.points.length < 2) return;
             
             ctx.strokeStyle = '#3b82f6';
             ctx.lineWidth = 3;
@@ -155,21 +155,21 @@ const dx = x - m.x * canvas.width;
         };
         return colors[type] || '#ffffff';
     }
-
-    // Handle component dragging from palette
+    // Handle component creation from palette
     document.addEventListener('component-selected', (e) => {
         if (e.detail.type === 'wire') {
             isDrawingWire = true;
+            overlay.style.cursor = 'crosshair';
             return;
         }
         
-        const rect = canvas.getBoundingClientRect();
         const newComponent = {
             type: e.detail.type,
             x: 0.5, // Center of canvas
             y: 0.5,
             strength: 0.5,
-            polarity: 1
+            polarity: 1,
+            turns: e.detail.type === 'coil' ? 5 : 0
         };
         
         components[e.detail.type + 's'].push(newComponent);
@@ -178,7 +178,21 @@ const dx = x - m.x * canvas.width;
         updateComponentDetails();
     });
 
-    // Canvas interaction handlers
+    // Handle component deletion
+    document.addEventListener('delete-selected', () => {
+        if (selectedComponent) {
+            const type = selectedComponent.type;
+            const arr = components[type + 's'];
+            const index = arr.indexOf(selectedComponent);
+            if (index > -1) {
+                arr.splice(index, 1);
+                selectedComponent = null;
+                drawField();
+                updateComponentDetails();
+            }
+        }
+    });
+// Canvas interaction handlers
     canvas.addEventListener('mousedown', (e) => {
         const rect = canvas.getBoundingClientRect();
         const x = e.clientX - rect.left;
@@ -236,21 +250,21 @@ const dx = x - m.x * canvas.width;
             updateComponentDetails();
         }
     });
-
     canvas.addEventListener('mouseup', () => {
         if (isDrawingWire && wireStartPoint && currentWirePoints.length > 1) {
             components.wires.push({
                 type: 'wire',
-                points: [...currentWirePoints]
+                points: [...currentWirePoints],
+                current: 0.5
             });
             isDrawingWire = false;
+            overlay.style.cursor = 'default';
             wireStartPoint = null;
             currentWirePoints = [];
             drawField();
         }
     });
-
-    function updateComponentDetails() {
+function updateComponentDetails() {
         const detailsPanel = document.getElementById('component-details');
         if (!detailsPanel) return;