Update index.html

index.html

@@ -881,11 +881,16 @@
                     
                     // 롤 인디케이터 업데이트
                     const currentRollMarker = document.getElementById('currentRollMarker');
+                    const rollIndicator = document.getElementById('rollIndicator');
                     if (currentRollMarker && fighter.rotation) {
                         const rollDegrees = fighter.rotation.z * (180 / Math.PI);
-                        // -60도에서 +60도 범위를 -140px에서 +140px로 매핑 (300px 너비)
-                        const rollOffset = (rollDegrees / 60) * 140;
-                        currentRollMarker.style.left = `calc(50% + ${rollOffset}px)`;
+                        // -60도에서 +60도 범위를 전체 너비의 백분율로 매핑
+                        // 300px 너비에서 양쪽 10px 패딩을 뺀 280px 사용
+                        const normalizedRoll = (rollDegrees + 60) / 120; // 0~1 범위로 정규화
+                        const markerPosition = 10 + (normalizedRoll * 280); // 10px ~ 290px
+                        
+                        currentRollMarker.style.left = `${markerPosition}px`;
+                        currentRollMarker.style.transform = 'translateX(-50%)';
                         
                         // 롤이 ±30도를 초과하면 색상 변경
                         if (Math.abs(rollDegrees) > 30) {