Adding files

html/css/app.css

@@ -0,0 +1,61 @@
+@font-face {
+	font-family: bankgothic;
+	src: url('../bankgothic.ttf');
+}
+
+@font-face {
+	font-family: pcdown;
+	src: url('../pdown.ttf');
+}
+
+#controls {
+	font-family   : pcdown;
+	font-size     : 3em;
+	color         : #FFF;
+	position      : absolute;
+	bottom        : 40;
+	right         : 40;
+	
+	text-shadow:
+   	-1px -1px 0 #000,
+		 1px -1px 0 #000,
+		-1px  1px 0 #000,
+		 1px  1px 0 #000
+	;
+}
+
+.controls {
+	display: none;
+}
+
+.menu {
+		font-family     : bankgothic;  
+    min-width       : 350px;
+    background-color: #506be6;
+    color           : #fff;
+    box-shadow      : 0px 0px 50px 0px #000;
+    position        : absolute;
+    left            : 40;
+    top             : 40; 
+}
+
+.menu .head {
+	text-align  : center;
+  height      : 40px;
+  line-height : 40px;
+}
+
+.menu .menu-items .menu-item {
+  height          : 40px;
+  display         : block;
+  background-color: #f1f1f1;
+  box-shadow      : inset 1px 0px 0px 1px #b8b8b8;
+  height          : 32px;
+  line-height     : 32px;
+  color           : #3A3A3A;
+	text-align      :  center;
+}
+
+.menu .menu-items .menu-item.selected {
+	background-color: #d0d0d0;
+}

html/scripts/app.js

@@ -0,0 +1,168 @@
+(function(){
+
+	let DefaultTpl = 
+		'<div class="head">{{title}}</div>' +
+			'<div class="menu-items">' + 
+				'{{#items}}<div class="menu-item" data-value="{{value}}">{{label}}</div>{{/items}}' +
+			'</div>'+
+		'</div>'
+	;
+
+	let DefaultWithTypeAndCountTpl = 
+		'<div class="head">{{title}}</div>' +
+			'<div class="menu-items">' + 
+				'{{#items}}<div class="menu-item" data-value="{{value}}" data-remove-on-select="{{removeOnSelect}}" data-type="{{type}}" data-count="{{count}}">{{label}}</div>{{/items}}' +
+			'</div>'+
+		'</div>'
+	;
+
+	let menus = {
+
+		cloakroom : {
+		  title     : 'Vestiaire',
+		 	visible   : false,
+		 	current   : 0,
+		 	hasControl: true,
+		 	template  : DefaultTpl,
+
+		  items: [
+		  	{label: 'Tenue civile',   value: 'citizen_wear'},
+		  	{label: 'Tenue de travail', value: 'job_wear'}
+		  ]
+		},
+	}
+
+	let renderMenus = function(){
+		for(let k in menus){
+
+			let elem = $('#menu_' + k);
+
+			elem.html(Mustache.render(menus[k].template, menus[k]));
+
+			if(menus[k].visible)
+				elem.show();
+			else
+				elem.hide();
+
+		}
+	}
+
+	let showMenu = function(menu){
+
+		currentMenu = menu;
+
+		for(let k in menus)
+			menus[k].visible = false;
+
+		menus[menu].visible = true;
+
+		renderMenus();
+
+		if(menus[currentMenu].items.length > 0){
+
+			$('#menu_' + currentMenu + ' .menu-item').removeClass('selected');
+			$('#menu_' + currentMenu + ' .menu-item:eq(0)').addClass('selected');
+
+			menus[currentMenu].current = 0;
+			currentVal                 = menus[currentMenu].items[menus[currentMenu].current].value;
+			currentType                = $('#menu_' + currentMenu + ' .menu-item:eq(0)').data('type');
+			currentCount               = $('#menu_' + currentMenu + ' .menu-item:eq(0)').data('count');
+		}
+		
+		isMenuOpen        = true
+	}
+
+	let hideMenus = function(){
+		
+		for(let k in menus)
+			menus[k].visible = false;
+
+		renderMenus();
+		isMenuOpen = false;
+	}
+
+	let isMenuOpen        = false
+	let currentMenu       = null;
+	let currentControl    = null;
+	let currentVal        = null;
+	let currentType       = null;
+	let currentCount      = null;
+
+	renderMenus();
+
+	window.onData = function(data){
+
+		if(data.showMenu === true){
+			showMenu(data.menu);
+		}
+
+		if(data.showMenu === false){
+			hideMenus();
+		}
+
+		if(data.move && isMenuOpen){
+
+			if(data.move == 'UP'){
+				if(menus[currentMenu].current > 0)
+					menus[currentMenu].current--;
+			}
+
+			if(data.move == 'DOWN'){
+				
+				let max = $('#menu_' + currentMenu + ' .menu-item').length;
+
+				if(menus[currentMenu].current < max - 1)
+					menus[currentMenu].current++;
+			}
+
+			$('#menu_' + currentMenu + ' .menu-item').removeClass('selected');
+			$('#menu_' + currentMenu + ' .menu-item:eq(' + menus[currentMenu].current + ')').addClass('selected');
+
+			currentVal   = menus[currentMenu].items[menus[currentMenu].current].value;
+			currentType  = $('#menu_' + currentMenu + ' .menu-item:eq(' + menus[currentMenu].current + ')').data('type');
+			currentCount = $('#menu_' + currentMenu + ' .menu-item:eq(' + menus[currentMenu].current + ')').data('count');
+		}
+
+		if(data.enterPressed){
+
+			if(isMenuOpen) {
+
+				$.post('http://esx_jobs/select', JSON.stringify({
+					menu : currentMenu,
+					val  : currentVal,
+					type : currentType,
+					count: currentCount
+				}))
+
+				let elem = $('#menu_' + currentMenu + ' .menu-item.selected')
+
+				if(elem.data('remove-on-select') == true){
+					
+					elem.remove();
+
+					menus[currentMenu].items.splice(menus[currentMenu].current, 1)
+					menus[currentMenu].current = 0;
+
+					$('#menu_' + currentMenu + ' .menu-item').removeClass('selected');
+					$('#menu_' + currentMenu + ' .menu-item:eq(0)').addClass('selected');
+					
+					currentVal   = menus[currentMenu].items[0].value;
+					currentType  = $('#menu_' + currentMenu + ' .menu-item:eq(0)').data('type');
+					currentCount = $('#menu_' + currentMenu + ' .menu-item:eq(0)').data('count');
+				}
+
+			} 
+
+		}
+
+		if(data.backspacePressed){
+			if(isMenuOpen && currentMenu == 'cloakroom'){
+				hideMenus();
+			}
+		}
+
+	}
+
+	window.onload = function(e){ window.addEventListener('message', function(event){ onData(event.data) }); }
+
+})()

html/ui.html

@@ -0,0 +1,15 @@
+<html>
+	<head>
+		<meta charset="utf-8"/>
+		<link rel="stylesheet" href="css/app.css" type="text/css" />
+	</head>
+	<body>
+
+		<div class="menu" id="menu_cloakroom"></div>
+
+	  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
+		<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
+		<script src="scripts/mustache.min.js"></script>
+		<script src="scripts/app.js"></script>
+	</body>
+</html>