Spaces:

kolaslab
/

world-sdr

Running

App Files Files Community

kolaslab commited on Dec 24, 2024

Commit

55962fe

verified ·

1 Parent(s): 1e56734

Update index.html

Browse files

Files changed (1) hide show

index.html +258 -223

index.html CHANGED Viewed

@@ -3,8 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <title>Hyperscan: Global SDR Radar(Simul)</title>
     <style>
-        /* 전체 배경 및 기본 스타일 */
         body {
             margin: 0;
             padding: 20px;
@@ -25,13 +27,30 @@
             height: calc(100vh - 40px);
             overflow-y: auto;
         }
         #map {
-            background: #111;
-            border-radius: 8px;
             height: calc(100vh - 40px);
         }
-        /* 수신기(Receivers) 목록 영역 */
         .receiver {
             margin: 10px 0;
             padding: 10px;
@@ -76,7 +95,7 @@
             transition: width 0.3s;
         }
-        /* 탐지(Detections) 목록 */
         .detection {
             padding: 5px;
             margin: 5px 0;
@@ -84,7 +103,7 @@
             border-left: 2px solid #0f0;
         }
-        /* 이벤트 로그 출력 */
         .alert {
             background: #911;
             padding: 5px;
@@ -92,11 +111,27 @@
             border-left: 2px solid #f00;
             color: #f66;
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <!-- 사이드바 -->
         <div class="sidebar">
             <h2>Hyperscan: Global SDR Radar(Simul)</h2>
@@ -110,12 +145,14 @@
             <div id="events"></div>
         </div>
-        <!-- 캔버스 지도 영역 -->
-        <canvas id="map"></canvas>
     </div>
     <script>
-        // 예시 SDR 스테이션: 원하는 만큼 추가/수정 가능
         const sdrStations = [
             {
                 name: "Twente WebSDR",
@@ -143,42 +180,71 @@
             }
         ];
         class RadarSystem {
             constructor() {
-                // Canvas 준비
-                this.canvas = document.getElementById('map');
-                this.ctx = this.canvas.getContext('2d');
-                // 타겟 정보 저장 (Set으로 관리)
-                this.targets = new Set();
-                // 타겟의 이동 궤적(trail)을 저장 (key: 타겟ID, value: {x,y} 배열)
-                this.trails = new Map();
                 // 이벤트 로그
                 this.eventsLog = [];
-                // 폭풍/교란 이벤트 상태
-                this.stormActive = false;              // 폭풍 토글
-                this.stormCenter = { lat: 50.5, lon: 5.0 }; // 폭풍 중심
-                this.stormRadius = 200;               // 폭풍 반경 (km)
-                this.setupCanvas();
                 this.renderReceivers();
                 this.startTracking();
             }
-            // 캔버스 크기 ��추기
-            setupCanvas() {
-                this.canvas.width = this.canvas.offsetWidth;
-                this.canvas.height = this.canvas.offsetHeight;
-                window.addEventListener('resize', () => {
-                    this.canvas.width = this.canvas.offsetWidth;
-                    this.canvas.height = this.canvas.offsetHeight;
                 });
             }
-            // 사이드바에 수신기 리스트 렌더링
             renderReceivers() {
                 const container = document.getElementById('receivers');
                 container.innerHTML = sdrStations.map(st => `
@@ -198,68 +264,79 @@
                 `).join('');
             }
-            // 임의로 타겟 하나 생성
             generateTarget() {
-                const lat = 51.5 + (Math.random()-0.5)*4; // 임의 범위
-                const lon = 5.0 + (Math.random()-0.5)*8;
                 return {
                     id: Math.random().toString(36).substr(2, 6).toUpperCase(),
-                    type: Math.random() > 0.7 ? 'aircraft' : 'vehicle', // 30%확률 aircraft
                     lat,
                     lon,
-                    speed: (Math.random()*200 + 100).toFixed(0),
-                    altitude: (Math.random()*30000 + 1000).toFixed(0),
                     heading: Math.random()*360,
                     signalStrength: Math.random()
                 };
             }
-            // 타겟 이동(heading, speed 기반)
-            moveTarget(target) {
-                const speedKnots = parseFloat(target.speed);
-                // 1 knot 약 0.0005 deg/sec 가정 (단순화)
                 const speedFactor = 0.00005;
-                const rad = (target.heading * Math.PI) / 180;
-                // 북(위도+), 남(위도-), 동(경도+), 서(경도-)
-                target.lat += Math.cos(rad) * speedKnots * speedFactor;
-                target.lon += Math.sin(rad) * speedKnots * speedFactor;
-            }
-            // 폭풍 On/Off
-            toggleStorm() {
-                this.stormActive = !this.stormActive;
-                const msg = this.stormActive
-                  ? "폭풍 발생! 수신 교란 우려"
-                  : "폭풍 소멸. 상태 정상화";
-                this.addEventLog(msg);
-            }
-            // 로그 추가
-            addEventLog(msg) {
-                this.eventsLog.push(msg);
-                const eventsDiv = document.getElementById('events');
-                // 추가
-                eventsDiv.innerHTML += `<div class="alert">${msg}</div>`;
-                // 너무 많아지면 오래된 기록 제거
-                if (this.eventsLog.length > 10) {
-                    this.eventsLog.shift();
-                    eventsDiv.removeChild(eventsDiv.firstChild);
                 }
             }
-            // 위도경도를 캔버스 좌표로 변환 (단순도)
-            latLongToXY(lat, lon) {
-                const centerLat = 51.5;
-                const centerLon = 5.0;
-                const scale = 100;
-                const x = (lon - centerLon) * scale + this.canvas.width / 2;
-                const y = (centerLat - lat) * scale + this.canvas.height / 2;
-                return { x, y };
-            }
-            // 두 점(위도경도) 사이 거리(km)
-            distanceKm(lat1, lon1, lat2, lon2) {
-                const R = 6371;
                 const dLat = (lat2 - lat1) * Math.PI/180;
                 const dLon = (lon2 - lon1) * Math.PI/180;
                 const a = Math.sin(dLat/2)*Math.sin(dLat/2)
@@ -268,149 +345,82 @@
                 return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
             }
-            // 배경+그리드 그리기
-            drawBackground() {
-                this.ctx.fillStyle = '#111';
-                this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
-                this.ctx.strokeStyle = '#1a1a1a';
-                this.ctx.lineWidth = 1;
-                // 세로 그리드
-                for (let i=0; i<this.canvas.width; i+=50) {
-                    this.ctx.beginPath();
-                    this.ctx.moveTo(i, 0);
-                    this.ctx.lineTo(i, this.canvas.height);
-                    this.ctx.stroke();
-                }
-                // 가로 그리드
-                for (let i=0; i<this.canvas.height; i+=50) {
-                    this.ctx.beginPath();
-                    this.ctx.moveTo(0, i);
-                    this.ctx.lineTo(this.canvas.width, i);
-                    this.ctx.stroke();
-                }
-            }
-            // 스테이션 + 폭풍 표시
-            drawStations() {
-                // 폭풍 범위 시각화
-                if (this.stormActive) {
-                    const sc = this.latLongToXY(this.stormCenter.lat, this.stormCenter.lon);
-                    this.ctx.beginPath();
-                    this.ctx.arc(sc.x, sc.y, this.stormRadius, 0, Math.PI*2);
-                    this.ctx.fillStyle = 'rgba(255,0,0,0.1)';
-                    this.ctx.fill();
-                    this.ctx.strokeStyle = 'rgba(255,0,0,0.5)';
-                    this.ctx.stroke();
-                }
-                // 수신기 스테이션
-                sdrStations.forEach(st => {
-                    const pos = this.latLongToXY(st.location[0], st.location[1]);
-                    // 범위 원
-                    this.ctx.beginPath();
-                    this.ctx.arc(pos.x, pos.y, st.range, 0, Math.PI*2);
-                    this.ctx.strokeStyle = st.active
-                        ? 'rgba(0,255,0,0.2)'
-                        : 'rgba(255,0,0,0.2)';
-                    this.ctx.stroke();
-                    // 중심 점
-                    this.ctx.beginPath();
-                    this.ctx.arc(pos.x, pos.y, 4, 0, Math.PI*2);
-                    this.ctx.fillStyle = st.active ? '#0f0' : '#f00';
-                    this.ctx.fill();
-                    // 라벨
-                    this.ctx.fillStyle = '#0f0';
-                    this.ctx.font = '10px monospace';
-                    this.ctx.fillText(st.name, pos.x+8, pos.y+4);
                 });
-            }
-            // 타겟 및 궤적 그리기
-            drawTargets() {
-                this.targets.forEach(target => {
-                    // 타겟 이동
-                    this.moveTarget(target);
-                    // 폭풍 영향: 범위 내에 있으면 신호강도 감소
-                    if (this.stormActive) {
-                        const distStorm = this.distanceKm(
-                            target.lat, target.lon,
-                            this.stormCenter.lat, this.stormCenter.lon
-                        );
-                        if (distStorm <= this.stormRadius) {
-                            target.signalStrength = Math.max(0, target.signalStrength - 0.01);
-                        }
-                    }
-                    // 타겟 위치
-                    const pos = this.latLongToXY(target.lat, target.lon);
-                    // 궤적 저장
-                    if (!this.trails.has(target.id)) {
-                        this.trails.set(target.id, []);
-                    }
-                    const trail = this.trails.get(target.id);
-                    trail.push({x: pos.x, y: pos.y});
-                    if (trail.length > 100) {
-                        trail.shift(); // 오래된 좌표 제거
                     }
-                    // 스테이션 연결선
                     sdrStations.forEach(st => {
                         if (st.active) {
-                            const dist = this.distanceKm(
-                                target.lat, target.lon,
-                                st.location[0], st.location[1]
-                            );
                             if (dist <= st.range) {
-                                const sp = this.latLongToXY(st.location[0], st.location[1]);
-                                this.ctx.beginPath();
-                                this.ctx.moveTo(sp.x, sp.y);
-                                this.ctx.lineTo(pos.x, pos.y);
-                                this.ctx.strokeStyle = `rgba(0,255,0,${target.signalStrength*0.3})`;
-                                this.ctx.stroke();
                             }
                         }
                     });
-                    // 타겟 궤적
-                    this.ctx.beginPath();
-                    this.ctx.strokeStyle = (target.type==='aircraft')
-                        ? 'rgba(255,255,0,0.3)'
-                        : 'rgba(0,255,255,0.3)';
-                    for (let i=0; i<trail.length-1; i++) {
-                        this.ctx.moveTo(trail[i].x, trail[i].y);
-                        this.ctx.lineTo(trail[i+1].x, trail[i+1].y);
-                    }
-                    this.ctx.stroke();
-                    // 현재 타겟 점
-                    this.ctx.beginPath();
-                    this.ctx.arc(pos.x, pos.y, 3, 0, Math.PI*2);
-                    this.ctx.fillStyle = (target.type==='aircraft') ? '#ff0' : '#0ff';
-                    this.ctx.fill();
-                    // 식별 정보
-                    this.ctx.fillStyle = '#666';
-                    this.ctx.font = '10px monospace';
-                    this.ctx.fillText(`${target.id} (${target.type})`, pos.x+8, pos.y+4);
                 });
             }
-            // 사이드바 'Real-time Detections' 업데이트
             updateDetections() {
                 const detections = document.getElementById('detections');
                 let html = '';
                 this.targets.forEach(t => {
                     html += `
                         <div class="detection">
-                            ${t.type==='aircraft' ? '✈️' : '🚗'}
                             ${t.id}
                             Speed: ${t.speed}kts
-                            ${t.type==='aircraft' ? 'Alt: '+t.altitude+'ft' : ''}
                             Sig: ${(t.signalStrength*100).toFixed(0)}%
                         </div>
                     `;
@@ -418,56 +428,81 @@
                 detections.innerHTML = html;
             }
-            // 수신기 신호강도 바 무작위 업데이트
             updateSignalStrengths() {
                 sdrStations.forEach(st => {
                     const bar = document.querySelector(`#rx-${st.url.split(':')[0]} .signal-bar`);
                     if (bar) {
-                        const strength = 40 + Math.random()*60;
                         bar.style.width = `${strength}%`;
                     }
                 });
             }
-            // 메인 루프
             startTracking() {
-                // 폭풍 토글(약 20% 확률로 10초마다 한 번 발생)
                 setInterval(() => {
                     if (Math.random() < 0.2) {
                         this.toggleStorm();
                     }
                 }, 10000);
-                // 100ms마다 갱신
                 setInterval(() => {
-                    // 10% 확률로 타겟 추가
                     if (Math.random() < 0.1 && this.targets.size < 15) {
                         const newT = this.generateTarget();
-                        this.targets.add(newT);
-                        this.addEventLog(`새 타겟 출현: ${newT.id}`);
                     }
-                    // 10% 확률로 타겟 하나 제거
                     if (Math.random() < 0.1 && this.targets.size > 0) {
-                        const first = Array.from(this.targets)[0];
-                        this.targets.delete(first);
-                        this.addEventLog(`타겟 소멸: ${first.id}`);
                     }
-                    // 매 프레임 화면 그리기
-                    this.drawBackground();
-                    this.drawStations();
-                    this.drawTargets();
-                    // 사이드바 갱신
                     this.updateDetections();
                     this.updateSignalStrengths();
                 }, 100);
             }
         }
-        // 페이지 로드 시 시작
         window.addEventListener('load', () => {
-            new RadarSystem();
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <title>Hyperscan: Global SDR Radar(Simul)</title>
+    <!-- Leaflet CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <style>
+        /* =============== 공통 스타일 =============== */
         body {
             margin: 0;
             padding: 20px;
             height: calc(100vh - 40px);
             overflow-y: auto;
         }
+        /* 지도 영역 */
         #map {
             height: calc(100vh - 40px);
+            border-radius: 8px;
+            background: #111;
+        }
+        /* Leaflet 다크 테마 */
+        .leaflet-tile-pane {
+            filter: invert(1) hue-rotate(180deg);
+        }
+        .leaflet-container {
+            background: #111 !important;
+        }
+        .leaflet-control-attribution {
+            background: #222 !important;
+            color: #666 !important;
+        }
+        .leaflet-popup-content-wrapper,
+        .leaflet-popup-tip {
+            background: #222 !important;
+            color: #0f0 !important;
         }
+        /* =============== 사이드바 수신기 목록 =============== */
         .receiver {
             margin: 10px 0;
             padding: 10px;
             transition: width 0.3s;
         }
+        /* =============== 실시간 탐지 목록 =============== */
         .detection {
             padding: 5px;
             margin: 5px 0;
             border-left: 2px solid #0f0;
         }
+        /* =============== 이벤트 로그 =============== */
         .alert {
             background: #911;
             padding: 5px;
             border-left: 2px solid #f00;
             color: #f66;
         }
+        /* =============== 폭풍 / 스테이션 범위 표시 =============== */
+        .station-range {
+            stroke: #0f0;
+            stroke-width: 1;
+            fill: #0f0;
+            fill-opacity: 0.1;
+        }
+        .storm-range {
+            stroke: #f00;
+            stroke-width: 1;
+            fill: #f00;
+            fill-opacity: 0.1;
+        }
+        /* 타겟 마커 스타일 (marker 자체는 circleMarker의 옵션으로 처리) */
     </style>
 </head>
 <body>
     <div class="container">
+        <!-- ===== 사이드바 ===== -->
         <div class="sidebar">
             <h2>Hyperscan: Global SDR Radar(Simul)</h2>
             <div id="events"></div>
         </div>
+        <!-- ===== Leaflet 지도 ===== -->
+        <div id="map"></div>
     </div>
+    <!-- Leaflet JS -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <script>
+        // 전 세계 SDR 스테이션 예시
         const sdrStations = [
             {
                 name: "Twente WebSDR",
             }
         ];
+        // ============== RadarSystem 클래스 (Leaflet 기반) ==============
         class RadarSystem {
             constructor() {
+                // 폭풍 상태
+                this.stormActive = false;
+                // 폭풍 중심(대충 유럽 근방)
+                this.stormCenter = [50.5, 5.0];
+                // 폭풍 반경(km)
+                this.stormRadius = 200;
+                // 타겟 목록
+                this.targets = new Map(); // key: targetId, value: { lat, lon, ... }
+                // 타겟별 marker Layer
+                this.targetMarkers = new Map();
+                // 타겟별 signal lines (타겟-스테이션 연결선)
+                this.targetSignalLines = new Map();
                 // 이벤트 로그
                 this.eventsLog = [];
+                this.initializeMap();
                 this.renderReceivers();
                 this.startTracking();
             }
+            // ===== Leaflet 지도 초기화 =====
+            initializeMap() {
+                this.map = L.map('map', {
+                    center: [51.5, 5.0],
+                    zoom: 5,
+                    worldCopyJump: true
+                });
+                // OSM Tile Layer
+                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                    maxZoom: 19,
+                    attribution: '© OpenStreetMap contributors'
+                }).addTo(this.map);
+                // 각 스테이션 표시 (마커 + 범위 원)
+                sdrStations.forEach(st => {
+                    // 마커
+                    const stationMarker = L.circleMarker(st.location, {
+                        radius: 5,
+                        color: '#0f0',
+                        fillColor: '#0f0',
+                        fillOpacity: 1
+                    }).addTo(this.map);
+                    // 범위 원
+                    const coverage = L.circle(st.location, {
+                        radius: st.range * 1000,
+                        className: 'station-range'
+                    }).addTo(this.map);
+                    // 툴팁
+                    stationMarker.bindTooltip(`
+                        <b>${st.name}</b><br/>
+                        Frequency: ${st.frequency}<br/>
+                        Range: ${st.range} km
+                    `);
                 });
             }
+            // ===== 사이드바 Receivers 표시 =====
             renderReceivers() {
                 const container = document.getElementById('receivers');
                 container.innerHTML = sdrStations.map(st => `
                 `).join('');
             }
+            // ===== 이벤트 로그 출력 =====
+            addEventLog(msg) {
+                this.eventsLog.push(msg);
+                const eventsDiv = document.getElementById('events');
+                eventsDiv.innerHTML += `<div class="alert">${msg}</div>`;
+                // 오래된 로그 제거
+                if (this.eventsLog.length > 15) {
+                    this.eventsLog.shift();
+                    eventsDiv.removeChild(eventsDiv.firstChild);
+                }
+            }
+            // ===== 폭풍 토글 =====
+            toggleStorm() {
+                this.stormActive = !this.stormActive;
+                const msg = this.stormActive
+                    ? "폭풍 발생! (교란 가능)"
+                    : "폭풍이 소멸되었습니다.";
+                this.addEventLog(msg);
+                // 폭풍 시각화
+                // 기존 폭풍 레이어 있으면 제거
+                if (this.stormCircle) {
+                    this.map.removeLayer(this.stormCircle);
+                }
+                // 폭풍 활성화 시 새로 표시
+                if (this.stormActive) {
+                    this.stormCircle = L.circle(this.stormCenter, {
+                        radius: this.stormRadius * 1000,
+                        className: 'storm-range'
+                    }).addTo(this.map);
+                }
+            }
+            // ===== 무작위 타겟 생성 =====
             generateTarget() {
+                const lat = 51.5 + (Math.random()-0.5)*6;  // ±3도
+                const lon = 5.0 + (Math.random()-0.5)*10; // ±5도
                 return {
                     id: Math.random().toString(36).substr(2, 6).toUpperCase(),
+                    type: Math.random() > 0.7 ? 'aircraft' : 'vehicle',
                     lat,
                     lon,
+                    speed: Math.floor(Math.random()*200 + 100), // kts
+                    altitude: Math.floor(Math.random()*30000 + 1000),
                     heading: Math.random()*360,
                     signalStrength: Math.random()
                 };
             }
+            // ===== 타겟 이동 =====
+            moveTarget(t) {
+                // heading + speed → 대략적인 위도/경도 변화
                 const speedFactor = 0.00005;
+                const rad = t.heading * Math.PI / 180;
+                t.lat += Math.cos(rad) * t.speed * speedFactor;
+                t.lon += Math.sin(rad) * t.speed * speedFactor;
+                // 폭풍 안이면 signalStrength 감소
+                if (this.stormActive) {
+                    const distStorm = this.getDistance(
+                        t.lat, t.lon,
+                        this.stormCenter[0], this.stormCenter[1]
+                    );
+                    if (distStorm <= this.stormRadius) {
+                        t.signalStrength = Math.max(0, t.signalStrength - 0.01);
+                    }
                 }
             }
+            // ===== 두 좌표 간 거리(km) (Haversine) =====
+            getDistance(lat1, lon1, lat2, lon2) {
+                const R = 6371;
                 const dLat = (lat2 - lat1) * Math.PI/180;
                 const dLon = (lon2 - lon1) * Math.PI/180;
                 const a = Math.sin(dLat/2)*Math.sin(dLat/2)
                 return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
             }
+            // ===== 표적·연결선 지도에서 갱신 =====
+            updateTargetsOnMap() {
+                // 1) 기존에 있던 모든 연결선 제거
+                this.targetSignalLines.forEach(line => {
+                    this.map.removeLayer(line);
                 });
+                this.targetSignalLines.clear();
+                // 2) 각 타겟 마커 위치 갱신
+                this.targets.forEach((t, id) => {
+                    // 마커가 이미 있으면 업데이트, 없으면 생성
+                    let marker = this.targetMarkers.get(id);
+                    if (!marker) {
+                        marker = L.circleMarker([t.lat, t.lon], {
+                            radius: 4,
+                            color: (t.type === 'aircraft') ? '#ff0' : '#0ff',
+                            fillColor: (t.type === 'aircraft') ? '#ff0' : '#0ff',
+                            fillOpacity: 1
+                        }).addTo(this.map);
+                        // 툴팁
+                        marker.bindTooltip(this.makeTargetTooltip(t), { sticky: true });
+                        this.targetMarkers.set(id, marker);
+                    } else {
+                        // 좌표, 툴팁 업데이트
+                        marker.setLatLng([t.lat, t.lon]);
+                        marker.setTooltipContent(this.makeTargetTooltip(t));
+                        // 색깔 업데이트(타겟 상태가 변했을 수도)
+                        marker.setStyle({
+                            color: (t.type === 'aircraft') ? '#ff0' : '#0ff',
+                            fillColor: (t.type === 'aircraft') ? '#ff0' : '#0ff'
+                        });
                     }
+                    // 3) 스테이션 범위 내면 연결선 표시
                     sdrStations.forEach(st => {
                         if (st.active) {
+                            const dist = this.getDistance(t.lat, t.lon, st.location[0], st.location[1]);
                             if (dist <= st.range) {
+                                const line = L.polyline([
+                                    [t.lat, t.lon],
+                                    st.location
+                                ], {
+                                    color: '#0f0',
+                                    opacity: t.signalStrength * 0.3,
+                                    weight: 1
+                                }).addTo(this.map);
+                                this.targetSignalLines.set(`${id}-${st.name}`, line);
                             }
                         }
                     });
                 });
             }
+            // ===== 타겟 툴팁 문자열 =====
+            makeTargetTooltip(t) {
+                return `
+                    <b>${t.id}</b><br/>
+                    Type: ${t.type}<br/>
+                    Speed: ${t.speed} kts<br/>
+                    ${t.type === 'aircraft' ? `Alt: ${t.altitude} ft<br/>` : ''}
+                    Sig: ${(t.signalStrength*100).toFixed(0)}%
+                `;
+            }
+            // ===== 실시간 Detections 사이드바 표시 =====
             updateDetections() {
                 const detections = document.getElementById('detections');
                 let html = '';
                 this.targets.forEach(t => {
                     html += `
                         <div class="detection">
+                            ${t.type === 'aircraft' ? '✈️' : '🚗'}
                             ${t.id}
+                            ${t.type === 'aircraft' ? `Alt: ${t.altitude}ft` : ''}
                             Speed: ${t.speed}kts
                             Sig: ${(t.signalStrength*100).toFixed(0)}%
                         </div>
                     `;
                 detections.innerHTML = html;
             }
+            // ===== 수신기 신호 바 업데이트 =====
             updateSignalStrengths() {
                 sdrStations.forEach(st => {
                     const bar = document.querySelector(`#rx-${st.url.split(':')[0]} .signal-bar`);
                     if (bar) {
+                        const strength = 40 + Math.random() * 60; // 40~100
                         bar.style.width = `${strength}%`;
                     }
                 });
             }
+            // ===== 메인 시뮬레이션 루프 =====
             startTracking() {
+                // 폭풍을 10초 간격으로 20% 확률로 토글
                 setInterval(() => {
                     if (Math.random() < 0.2) {
                         this.toggleStorm();
                     }
                 }, 10000);
+                // 100ms 간격으로 반복
                 setInterval(() => {
+                    // (10% 확률) 새 타겟 추가, 최대 15개
                     if (Math.random() < 0.1 && this.targets.size < 15) {
                         const newT = this.generateTarget();
+                        this.targets.set(newT.id, newT);
+                        this.addEventLog(`타겟 출현: ${newT.id}`);
                     }
+                    // (10% 확률) 타겟 하나 제거
                     if (Math.random() < 0.1 && this.targets.size > 0) {
+                        // 맨 처음 타겟 하나 꺼내기
+                        const firstKey = Array.from(this.targets.keys())[0];
+                        this.removeTarget(firstKey);
                     }
+                    // 모든 타겟 이동
+                    this.targets.forEach((t, id) => {
+                        this.moveTarget(t);
+                    });
+                    // 지도/연결선 갱신
+                    this.updateTargetsOnMap();
+                    // ���이드바 탐지 목록 갱신
                     this.updateDetections();
+                    // 수신기 신호 바 갱신
                     this.updateSignalStrengths();
                 }, 100);
             }
+            // 타겟 제거 시 마커 및 연결선 정리
+            removeTarget(id) {
+                const removed = this.targets.get(id);
+                if (!removed) return;
+                this.targets.delete(id);
+                this.addEventLog(`타겟 소멸: ${removed.id}`);
+                // 마커 제거
+                const marker = this.targetMarkers.get(id);
+                if (marker) {
+                    this.map.removeLayer(marker);
+                    this.targetMarkers.delete(id);
+                }
+                // 연결선 제거
+                [...this.targetSignalLines.keys()].forEach(k => {
+                    if (k.includes(id)) {
+                        this.map.removeLayer(this.targetSignalLines.get(k));
+                        this.targetSignalLines.delete(k);
+                    }
+                });
+            }
         }
+        // ===== 페이지 로드 후 시작 =====
         window.addEventListener('load', () => {
+            const radar = new RadarSystem();
         });
     </script>
 </body>