Update index.html

index.html

@@ -623,6 +623,59 @@
                         <span class="pitch-line-text">-40</span>
                     </div>
                 </div>
+                
+                <!-- 롤 인디케이터 (좌/우 기울기) -->
+                <div class="hud-roll-indicator" id="rollIndicator" style="
+                    position: absolute;
+                    top: -40px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    width: 200px;
+                    height: 30px;
+                ">
+                    <!-- 롤 각도 표시 -->
+                    <div style="position: relative; width: 100%; height: 100%;">
+                        <!-- 중앙 마커 -->
+                        <div style="
+                            position: absolute;
+                            top: 0;
+                            left: 50%;
+                            transform: translateX(-50%);
+                            width: 0;
+                            height: 0;
+                            border-left: 10px solid transparent;
+                            border-right: 10px solid transparent;
+                            border-top: 15px solid #00ff00;
+                        "></div>
+                        <!-- 롤 스케일 -->
+                        <div style="
+                            position: absolute;
+                            bottom: 0;
+                            left: 50%;
+                            transform: translateX(-50%);
+                            display: flex;
+                            align-items: flex-end;
+                            gap: 20px;
+                        ">
+                            <div style="color: rgba(0, 255, 0, 0.5); font-size: 10px;">-30</div>
+                            <div style="width: 1px; height: 10px; background: rgba(0, 255, 0, 0.5);"></div>
+                            <div style="color: rgba(0, 255, 0, 0.8); font-size: 10px; font-weight: bold;">0</div>
+                            <div style="width: 1px; height: 10px; background: rgba(0, 255, 0, 0.5);"></div>
+                            <div style="color: rgba(0, 255, 0, 0.5); font-size: 10px;">30</div>
+                        </div>
+                        <!-- 현재 롤 표시 -->
+                        <div id="currentRollMarker" style="
+                            position: absolute;
+                            bottom: 15px;
+                            left: 50%;
+                            transform: translateX(-50%);
+                            width: 2px;
+                            height: 15px;
+                            background: #00ff00;
+                            transition: left 0.1s;
+                        "></div>
+                    </div>
+                </div>
             </div>
             
             <!-- 기존 비행 정보 (숨김) -->
@@ -789,6 +842,15 @@
                         const rollDegrees = fighter.rotation.z * (180 / Math.PI);
                         hudCrosshair.style.transform = `translate(-50%, -50%) rotate(${-rollDegrees}deg)`;
                     }
+                    
+                    // 롤 인디케이터 업데이트
+                    const currentRollMarker = document.getElementById('currentRollMarker');
+                    if (currentRollMarker && fighter.rotation) {
+                        const rollDegrees = fighter.rotation.z * (180 / Math.PI);
+                        // -30도에서 +30도 범위를 -60px에서 +60px로 매핑
+                        const rollOffset = (rollDegrees / 30) * 60;
+                        currentRollMarker.style.left = `calc(50% + ${rollOffset}px)`;
+                    }
                     // RWR 업데이트
                     updateRWR(fighter);
                 }