Michatec/wk_wars2x
1
1
Fork 0
mirror of https://github.com/Michatec/wk_wars2x.git synced 2026-04-01 08:26:27 +02:00
Code Issues Packages Projects Releases Activity

Started work on UI settings

Browse Source
This commit is contained in:
Dan
2019-12-05 17:52:29 +00:00
parent 9966ed8fc1
commit fb826b3c4c
2 changed files with 156 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
nui/radar.css
View File

@@ -34,6 +34,8 @@ button:focus { outline: none; }
/* left: 0; */
background-image: url( "frame.png" );
z-index: 1;
}
.frame_border {
@@ -357,7 +359,7 @@ button:focus { outline: none; }
/* clip-path: polygon( 5% 0, 95% 0, 100% 25%, 90% 100%, 10% 100%, 0 25% ); */
z-index: 15;
z-index: 2;
}
/* Button template classes */
#rc button {
@@ -560,4 +562,128 @@ button:focus { outline: none; }
#rc .blue {
background-color: rgb( 84, 210, 255 );
}
}
#uiSettingsBox {
width: 200px;
height: 250px;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* background-color: rgb( 0, 255, 55 ); */
background-color: transparent;
/* display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px; */
z-index: 3;
}
#uiSettingsBox .title {
text-align: center;
font-size: 20px;
padding: 5px 0;
margin: 0 auto;
color: rgb( 255, 255, 255 );
background-color: rgb( 20, 22, 18 );
}
#uiSettingsBox .remote_settings {
background-color: rgb( 20, 22, 18 );
}
#uiSettingsBox .remote_settings .alignment {
height: 200px;
background-color: purple;
display: flex;
justify-content: space-evenly;
align-items: center;
}
#uiSettingsBox .remote_settings .alignment .aligner {
height: 85%;
width: 25%;
}
#uiSettingsBox .radar_settings {
background-color: rgb(50, 54, 45);
}
#uiSettingsBox .radar_settings .alignment {
height: 200px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
padding: 5px;
}
#uiSettingsBox .radar_settings .alignment .aligner {
width: 55px;
height: 55px;
position: relative;
background-color: rgb( 225, 225, 225 );
border-radius: 10px;
}
#uiSettingsBox .radar_settings .alignment .aligner:hover {
width: 55px;
height: 55px;
background-color: rgb( 255, 255, 255 );
position: relative;
}
#uiSettingsBox .radar_settings .alignment .aligner .arrow {
width: 45px;
height: 45px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: rgb( 0, 0, 0 );
clip-path: polygon( 50% 0, 10% 30%, 10% 50%, 40% 30%, 40% 100%, 60% 100%, 60% 30%, 90% 50%, 90% 30% );
}
#uiSettingsBox .radar_settings .alignment .aligner .top_left { transform: rotate( -45deg ); }
#uiSettingsBox .radar_settings .alignment .aligner .top_right { transform: rotate( 45deg ); }
#uiSettingsBox .radar_settings .alignment .aligner .left { transform: rotate( -90deg ); }
#uiSettingsBox .radar_settings .alignment .aligner .right { transform: rotate( 90deg ); }
#uiSettingsBox .radar_settings .alignment .aligner .bottom_left { transform: rotate( -135deg ); }
#uiSettingsBox .radar_settings .alignment .aligner .bottom { transform: rotate( 180deg ); }
#uiSettingsBox .radar_settings .alignment .aligner .bottom_right { transform: rotate( 135deg ); }
#uiSettingsBox .radar_settings .alignment .aligner button {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: none;
background-color: transparent;
}
#uiSettingsBox .radar_settings .alignment .holo {
width: 55px;
height: 55px;
background-color: transparent;
}

28
nui/radar.html
View File

@@ -160,6 +160,34 @@
<p class="logo"><span class="large">Wraith</span> ARS 2X</p>
</div>
<div id="uiSettingsBox">
<!-- <div class="remote_settings">
<p class="title">Remote</p>
<div class="alignment">
<button id="remoteAlignLeft" class="aligner"></button>
<button id="remoteAlignCentre" class="aligner"></button>
<button id="remoteAlignRight" class="aligner"></button>
</div>
</div> -->
<div class="radar_settings">
<p class="title">Radar Position</p>
<div class="alignment">
<div class="aligner"><div class="arrow top_left"></div><button></button></div>
<div class="aligner"><div class="arrow"></div><button></button></div>
<div class="aligner"><div class="arrow top_right"></div><button></button></div>
<div class="aligner"><div class="arrow left"></div><button></button></div>
<div class="holo"></div>
<div class="aligner"><div class="arrow right"></div><button></button></div>
<div class="aligner"><div class="arrow bottom_left"></div><button></button></div>
<div class="aligner"><div class="arrow bottom"></div><button></button></div>
<div class="aligner"><div class="arrow bottom_right"></div><button></button></div>
</div>
</div>
</div>
<!-- Load JavaScript files -->
<script src="nui://game/ui/jquery.js"></script>
<script src="radar.js"></script>