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

Started new remote control

Browse Source
This commit is contained in:
Dan
2019-11-23 21:44:18 +00:00
parent 348ee28ab6
commit 4222dc9984
2 changed files with 118 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
nui/radar.css
View File

@@ -128,13 +128,13 @@
position: absolute; position: absolute;
color: rgb( 255, 255, 255 ); color: rgb( 255, 255, 255 );
} }
#radar .labeltop { #radar .label_top {
top: 0; top: 0;
left: 0; left: 0;
padding-top: 3px; padding-top: 3px;
} }
#radar .labelbottom { #radar .label_bottom {
bottom: 0; bottom: 0;
left: 0; left: 0;
padding-bottom: 3px; padding-bottom: 3px;
@@ -319,3 +319,92 @@
color: rgb( 15, 244, 57 ); color: rgb( 15, 244, 57 );
text-shadow: 0 0 8px rgba( 15, 244, 57, 0.65 ); text-shadow: 0 0 8px rgba( 15, 244, 57, 0.65 );
} }
button {
border: none;
margin: 0;
padding: 0;
/* Turn bg colour into a gradient */
background-color: rgb( 200, 200, 200 );
font-family: 'Heebo-Regular';
}
button:hover {
background-color: rgb( 220, 220, 220 );
}
#rc {
width: 275px;
height: 600px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
padding-top: 25px;
display: grid;
grid-template-rows: 40px 30px 200px auto;
justify-items: center;
align-items: center;
color: white;
background-color: rgb( 50, 50, 50 );
z-index: 15;
}
/* Button template classes */
#rc .rounded_btn {
border-radius: 30px;
}
#rc .zone_btn {
width: 65px;
height: 65px;
}
/* Buttons and remote control elements */
#rc .toggle_display {
width: 130px;
height: 30px;
}
#rc .label {
font-family: 'Heebo-Regular';
font-size: 20px;
letter-spacing: 1px;
}
#rc .antenna_btns_container {
width: 95%;
height: 100%;
display: grid;
grid-template-rows: 45% 10% 45%;
align-items: center;
}
#rc .antenna_btns_container .btns {
display: flex;
justify-content: space-evenly;
align-items: flex-end;
}
#rc .antenna_btns_container .btns .top_left {
border-radius: 35px 5px 5px 5px;
}
#rc .antenna_btns_container .btns .top_middle {
}
#rc .antenna_btns_container .btns .top_right {
border-radius: 5px 35px 5px 5px;
}
#rc .antenna_btns_container .breaker {
width: 100%;
height: 5px;
background-color: white;
}

29
nui/radar.html
View File

@@ -4,14 +4,15 @@
</head> </head>
<body onselectstart="return false;" ondragstart="return false;"> <body onselectstart="return false;" ondragstart="return false;">
<div class="unit_frame" style="display: none;"> <!-- <div class="unit_frame" style="display: none;"> -->
<div class="unit_frame">
<div class="frame_border"></div> <div class="frame_border"></div>
<div class="radar_container"> <div class="radar_container">
<div class="panel_side panel_left"></div> <div class="panel_side panel_left"></div>
<div id="radar"> <div id="radar">
<div class="label labeltop">FRONT ANTENNA</div> <div class="label label_top">FRONT ANTENNA</div>
<div class="pwr_button_container"> <div class="pwr_button_container">
<div class="pwr_button">PWR</div> <div class="pwr_button">PWR</div>
@@ -104,13 +105,35 @@
<div class="speed_label">PATROL SPEED</div> <div class="speed_label">PATROL SPEED</div>
</div> </div>
<div class="label labelbottom">REAR ANTENNA</div> <div class="label label_bottom">REAR ANTENNA</div>
</div> </div>
<div class="panel_side panel_right"></div> <div class="panel_side panel_right"></div>
</div> </div>
</div> </div>
<div id="rc">
<button class="rounded_btn toggle_display">TOGGLE DISPLAY</button>
<p class="label">FRONT ANTENNA</p>
<div class="antenna_btns_container">
<div class="btns">
<button class="zone_btn top_left" id="frontOppBtn">OPP</button>
<button class="zone_btn top_middle" id="frontXmitBtn">XMIT</button>
<button class="zone_btn top_right" id="frontSameBtn">SAME</button>
</div>
<div class="breaker"></div>
<div class="btns">
<button class="zone_btn" id="rearOppBtn">OPP</button>
<button class="zone_btn" id="rearXmitBtn">XMIT</button>
<button class="zone_btn" id="rearSameBtn">SAME</button>
</div>
</div>
</div>
<!-- Load JavaScript files --> <!-- Load JavaScript files -->
<script src="nui://game/ui/jquery.js"></script> <script src="nui://game/ui/jquery.js"></script>
<script src="radar.js"></script> <script src="radar.js"></script>