Untitled

-- ui.html
<html>
<head>
	<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
	<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
	<div id="container">
		<div id="money">
		</div>
		<div id="dirty">
		</div>
		<div id="bank">
		</div>
		<div id="change">
		</div>
	</div>
</body>
<script src="script.js" type="text/javascript"></script>
</html>

-- script.js
$(document).ready(function(){

	function addCommas(nStr) {
		nStr += '';
		var x = nStr.split('.');
		var x1 = x[0];
		var x2 = x.length > 1 ? '.' + x[1] : '';
		var rgx = /(\d+)(\d{3})/;
		while (rgx.test(x1)) {
			x1 = x1.replace(rgx, '$1' + ',<span style="margin-left: 0px; margin-right: 1px;"/>' + '$2');
		}
		return x1 + x2;
	}

	var moneyIcon = "$";
	var bankIcon = "💳";

	window.addEventListener('message', (event) => {
		if(event.data.action == "SetMoney"){
			$("#money").html("<font style='color: rgb(0, 125, 0); font-weight: 700; margin-right: 6px;'>" + moneyIcon + "</font>" + addCommas(event.data.value));
		}

		if(event.data.action == "SetDirty"){
			$("#dirty").html("<font style='color: rgb(255, 0, 0); font-weight: 700; margin-right: 6px;'>" + moneyIcon + "</font><span style='color: rgb(255, 0, 0);'>" + addCommas(event.data.value) + "</span>");
		}

		if(event.data.action == "SetBank"){
			$("#bank").html("<font style='font-size: 20px;font-weight: 700;margin-right: 6px;vertical-align: middle;'>" + bankIcon + "</font>" + addCommas(event.data.value));
		}

		if(event.data.action == "AddMoney"){
			$(".changemoney").remove();

			var element = $("<div class='changemoney'>+ <font style='color: rgb(0, 125, 0); font-weight: 700; margin-right: 6px;'>" + moneyIcon + "</font>"+addCommas(event.data.value) + "</div>");
			$("#change").append(element);

			setTimeout(function(){
				$(element).fadeOut(600, function() { $(this).remove(); });
			}, 1000);
		}

		if(event.data.action == "RemoveMoney"){
			$(".changemoney").remove();

			var element = $("<div class='changemoney'>- <font style='color: rgb(0, 125, 0); font-weight: 700; margin-right: 6px;'>" + moneyIcon + "</font>"+addCommas(event.data.value) + "</div>");
			$("#change").append(element);

			setTimeout(function(){
				$(element).fadeOut(600, function() { $(this).remove(); });
			}, 1000);
		}

		if(event.data.action == "AddDirty"){
			$(".changedirty").remove();

			var element = $("<div class='changedirty'>+ <font style='color: rgb(255, 0, 0); font-weight: 700; margin-right: 6px;'>" + moneyIcon + "</font><span style='color: rgb(255, 0, 0);'>"+addCommas(event.data.value)+"</span></div>");
			$("#change").append(element);

			setTimeout(function(){
				$(element).fadeOut(600, function() { $(this).remove(); });
			}, 1000);
		}

		if(event.data.action == "RemoveDirty"){
			$(".changedirty").remove();

			var element = $("<div class='changedirty'>- <font style='color: rgb(255, 0, 0); font-weight: 700; margin-right: 6px;'>" + moneyIcon + "</font><span style='color: rgb(255, 0, 0);'>"+addCommas(event.data.value)+"</span></div>");
			$("#change").append(element);

			setTimeout(function(){
				$(element).fadeOut(600, function() { $(this).remove(); });
			}, 1000);
		}

		if(event.data.action == "AddBank"){
			$(".changebank").remove();

			var element = $("<div class='changebank'>+ <font style='font-size: 20px;font-weight: 700;margin-right: 6px;vertical-align: middle;'>" + bankIcon + "</font>"+addCommas(event.data.value)+"</div>");
			$("#change").append(element);

			setTimeout(function(){
				$(element).fadeOut(600, function() { $(this).remove(); });
			}, 1000);
		}

		if(event.data.action == "RemoveBank"){
			$(".changebank").remove();

			var element = $("<div class='changebank'>- <font style='font-size: 20px;font-weight: 700;margin-right: 6px;vertical-align: middle;'>" + bankIcon + "</font>"+addCommas(event.data.value)+"</div>");
			$("#change").append(element);

			setTimeout(function(){
				$(element).fadeOut(600, function() { $(this).remove(); });
			}, 1000);
		}
	});
});