Hugging Face's logo

Spaces:
cutechicken
/
3D-Airforce-Simulator
Running

App Files Community
1
cutechicken commited on
Commit
8624016
ยท
verified ยท
1 Parent(s): 49af122

Update index.html

Browse files
Files changed (1) hide show
  1. 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: -40px;
631
  left: 50%;
632
  transform: translateX(-50%);
633
- width: 200px;
634
- height: 30px;
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: 10px solid transparent;
647
- border-right: 10px solid transparent;
648
- border-top: 15px solid #00ff00;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
649
  "></div>
650
  <!-- ๋กค ์Šค์ผ€์ผ -->
651
  <div style="
652
  position: absolute;
653
- bottom: 0;
654
- left: 50%;
655
- transform: translateX(-50%);
656
  display: flex;
 
657
  align-items: flex-end;
658
- gap: 20px;
 
659
  ">
660
- <div style="color: rgba(0, 255, 0, 0.5); font-size: 10px;">-30</div>
661
- <div style="width: 1px; height: 10px; background: rgba(0, 255, 0, 0.5);"></div>
662
- <div style="color: rgba(0, 255, 0, 0.8); font-size: 10px; font-weight: bold;">0</div>
663
- <div style="width: 1px; height: 10px; background: rgba(0, 255, 0, 0.5);"></div>
664
- <div style="color: rgba(0, 255, 0, 0.5); font-size: 10px;">30</div>
 
 
 
665
  </div>
666
  <!-- ํ˜„์žฌ ๋กค ํ‘œ์‹œ -->
667
  <div id="currentRollMarker" style="
668
  position: absolute;
669
- bottom: 15px;
670
  left: 50%;
671
  transform: translateX(-50%);
672
- width: 2px;
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
- // -30๋„์—์„œ +30๋„ ๋ฒ”์œ„๋ฅผ -60px์—์„œ +60px๋กœ ๋งคํ•‘
851
- const rollOffset = (rollDegrees / 30) * 60;
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);