Spaces:
Running
Running
Update index.html
Browse files- index.html +67 -20
index.html
CHANGED
@@ -624,14 +624,14 @@
|
|
624 |
</div>
|
625 |
</div>
|
626 |
|
627 |
-
<!-- ๋กค ์ธ๋์ผ์ดํฐ (์ข/์ฐ ๊ธฐ์ธ๊ธฐ) -->
|
628 |
<div class="hud-roll-indicator" id="rollIndicator" style="
|
629 |
position: absolute;
|
630 |
-
top: -
|
631 |
left: 50%;
|
632 |
transform: translateX(-50%);
|
633 |
-
width:
|
634 |
-
height:
|
635 |
">
|
636 |
<!-- ๋กค ๊ฐ๋ ํ์ -->
|
637 |
<div style="position: relative; width: 100%; height: 100%;">
|
@@ -643,36 +643,72 @@
|
|
643 |
transform: translateX(-50%);
|
644 |
width: 0;
|
645 |
height: 0;
|
646 |
-
border-left:
|
647 |
-
border-right:
|
648 |
-
border-top:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
649 |
"></div>
|
650 |
<!-- ๋กค ์ค์ผ์ผ -->
|
651 |
<div style="
|
652 |
position: absolute;
|
653 |
-
bottom:
|
654 |
-
|
655 |
-
transform: translateX(-50%);
|
656 |
display: flex;
|
|
|
657 |
align-items: flex-end;
|
658 |
-
|
|
|
659 |
">
|
660 |
-
<div style="color: rgba(
|
661 |
-
<div style="width: 1px; height: 10px; background: rgba(
|
662 |
-
<div style="color: rgba(
|
663 |
-
<div style="width:
|
664 |
-
<div style="color: rgba(0, 255, 0,
|
|
|
|
|
|
|
665 |
</div>
|
666 |
<!-- ํ์ฌ ๋กค ํ์ -->
|
667 |
<div id="currentRollMarker" style="
|
668 |
position: absolute;
|
669 |
-
bottom:
|
670 |
left: 50%;
|
671 |
transform: translateX(-50%);
|
672 |
-
width:
|
673 |
height: 15px;
|
674 |
background: #00ff00;
|
675 |
transition: left 0.1s;
|
|
|
676 |
"></div>
|
677 |
</div>
|
678 |
</div>
|
@@ -847,9 +883,20 @@
|
|
847 |
const currentRollMarker = document.getElementById('currentRollMarker');
|
848 |
if (currentRollMarker && fighter.rotation) {
|
849 |
const rollDegrees = fighter.rotation.z * (180 / Math.PI);
|
850 |
-
// -
|
851 |
-
const rollOffset = (rollDegrees /
|
852 |
currentRollMarker.style.left = `calc(50% + ${rollOffset}px)`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
853 |
}
|
854 |
// RWR ์
๋ฐ์ดํธ
|
855 |
updateRWR(fighter);
|
|
|
624 |
</div>
|
625 |
</div>
|
626 |
|
627 |
+
<!-- ๋กค ์ธ๋์ผ์ดํฐ (์ข/์ฐ ๊ธฐ์ธ๊ธฐ) - ํฌ๋ก์คํค์ด ๋ฐ๋ก ์ -->
|
628 |
<div class="hud-roll-indicator" id="rollIndicator" style="
|
629 |
position: absolute;
|
630 |
+
top: -90px;
|
631 |
left: 50%;
|
632 |
transform: translateX(-50%);
|
633 |
+
width: 300px;
|
634 |
+
height: 35px;
|
635 |
">
|
636 |
<!-- ๋กค ๊ฐ๋ ํ์ -->
|
637 |
<div style="position: relative; width: 100%; height: 100%;">
|
|
|
643 |
transform: translateX(-50%);
|
644 |
width: 0;
|
645 |
height: 0;
|
646 |
+
border-left: 12px solid transparent;
|
647 |
+
border-right: 12px solid transparent;
|
648 |
+
border-top: 18px solid #00ff00;
|
649 |
+
z-index: 2;
|
650 |
+
"></div>
|
651 |
+
<!-- ๋กค ์ค์ผ์ผ ๋ฐฐ๊ฒฝ -->
|
652 |
+
<div style="
|
653 |
+
position: absolute;
|
654 |
+
bottom: 5px;
|
655 |
+
left: 0;
|
656 |
+
right: 0;
|
657 |
+
height: 15px;
|
658 |
+
background: rgba(0, 0, 0, 0.3);
|
659 |
+
border: 1px solid rgba(0, 255, 0, 0.3);
|
660 |
+
border-radius: 3px;
|
661 |
+
"></div>
|
662 |
+
<!-- ์ํ ๊ตฌ์ญ ํ์ (ยฑ30๋ ์ด์) -->
|
663 |
+
<div style="
|
664 |
+
position: absolute;
|
665 |
+
bottom: 5px;
|
666 |
+
left: 0;
|
667 |
+
width: 25%;
|
668 |
+
height: 15px;
|
669 |
+
background: rgba(255, 0, 0, 0.2);
|
670 |
+
border-radius: 3px 0 0 3px;
|
671 |
+
"></div>
|
672 |
+
<div style="
|
673 |
+
position: absolute;
|
674 |
+
bottom: 5px;
|
675 |
+
right: 0;
|
676 |
+
width: 25%;
|
677 |
+
height: 15px;
|
678 |
+
background: rgba(255, 0, 0, 0.2);
|
679 |
+
border-radius: 0 3px 3px 0;
|
680 |
"></div>
|
681 |
<!-- ๋กค ์ค์ผ์ผ -->
|
682 |
<div style="
|
683 |
position: absolute;
|
684 |
+
bottom: 22px;
|
685 |
+
width: 100%;
|
|
|
686 |
display: flex;
|
687 |
+
justify-content: space-between;
|
688 |
align-items: flex-end;
|
689 |
+
padding: 0 10px;
|
690 |
+
box-sizing: border-box;
|
691 |
">
|
692 |
+
<div style="color: rgba(255, 0, 0, 0.7); font-size: 10px; font-weight: bold;">-60</div>
|
693 |
+
<div style="position: absolute; left: 25%; transform: translateX(-50%); width: 1px; height: 10px; background: rgba(255, 255, 0, 0.6);"></div>
|
694 |
+
<div style="position: absolute; left: 25%; transform: translateX(-50%); color: rgba(255, 255, 0, 0.7); font-size: 10px; top: -15px;">-30</div>
|
695 |
+
<div style="position: absolute; left: 50%; transform: translateX(-50%); width: 2px; height: 12px; background: rgba(0, 255, 0, 0.8);"></div>
|
696 |
+
<div style="position: absolute; left: 50%; transform: translateX(-50%); color: rgba(0, 255, 0, 1); font-size: 11px; font-weight: bold; top: -15px;">0</div>
|
697 |
+
<div style="position: absolute; left: 75%; transform: translateX(-50%); width: 1px; height: 10px; background: rgba(255, 255, 0, 0.6);"></div>
|
698 |
+
<div style="position: absolute; left: 75%; transform: translateX(-50%); color: rgba(255, 255, 0, 0.7); font-size: 10px; top: -15px;">30</div>
|
699 |
+
<div style="color: rgba(255, 0, 0, 0.7); font-size: 10px; font-weight: bold;">60</div>
|
700 |
</div>
|
701 |
<!-- ํ์ฌ ๋กค ํ์ -->
|
702 |
<div id="currentRollMarker" style="
|
703 |
position: absolute;
|
704 |
+
bottom: 5px;
|
705 |
left: 50%;
|
706 |
transform: translateX(-50%);
|
707 |
+
width: 3px;
|
708 |
height: 15px;
|
709 |
background: #00ff00;
|
710 |
transition: left 0.1s;
|
711 |
+
box-shadow: 0 0 5px #00ff00;
|
712 |
"></div>
|
713 |
</div>
|
714 |
</div>
|
|
|
883 |
const currentRollMarker = document.getElementById('currentRollMarker');
|
884 |
if (currentRollMarker && fighter.rotation) {
|
885 |
const rollDegrees = fighter.rotation.z * (180 / Math.PI);
|
886 |
+
// -60๋์์ +60๋ ๋ฒ์๋ฅผ -140px์์ +140px๋ก ๋งคํ (300px ๋๋น)
|
887 |
+
const rollOffset = (rollDegrees / 60) * 140;
|
888 |
currentRollMarker.style.left = `calc(50% + ${rollOffset}px)`;
|
889 |
+
|
890 |
+
// ๋กค์ด ยฑ30๋๋ฅผ ์ด๊ณผํ๋ฉด ์์ ๋ณ๊ฒฝ
|
891 |
+
if (Math.abs(rollDegrees) > 30) {
|
892 |
+
currentRollMarker.style.background = '#ff0000';
|
893 |
+
currentRollMarker.style.boxShadow = '0 0 8px #ff0000';
|
894 |
+
currentRollMarker.style.width = '4px';
|
895 |
+
} else {
|
896 |
+
currentRollMarker.style.background = '#00ff00';
|
897 |
+
currentRollMarker.style.boxShadow = '0 0 5px #00ff00';
|
898 |
+
currentRollMarker.style.width = '3px';
|
899 |
+
}
|
900 |
}
|
901 |
// RWR ์
๋ฐ์ดํธ
|
902 |
updateRWR(fighter);
|