HTML interface module + playing cards (ported from Baystation12 with modifications) using the new module

2026-07-20 04:26:03 +01:00 · 2015-06-08 22:13:25 +02:00
parent 389007d85d
commit 1b364c0e82
25 changed files with 1357 additions and 1 deletions
@@ -0,0 +1,13 @@
+// Used by playing cards; /obj/item/weapon/hand
+// Subtype exists because of sendResources; these must be sent when the client connects.
+
+/datum/html_interface/cards/New()
+	. = ..()
+
+	src.head = src.head + "<link rel=\"stylesheet\" type=\"text/css\" href=\"cards.css\" />"
+	src.updateLayout("<div id=\"headbar\"></div><div class=\"wrapper\"><table><tr><td style=\"vertical-align: middle;\"><div id=\"hand\"></div></td></tr></table></div>")
+
+/datum/html_interface/cards/sendResources(client/client)
+	. = ..() // we need the default resources
+
+	client << browse_rsc('cards.css')
@@ -0,0 +1,11 @@
+html
+{
+	-ms-overflow-style: scrollbar;
+}
+
+body
+{
+	font-family: Arial;
+	overflow-y: scroll;
+	overflow-x: auto;
+}
@@ -0,0 +1,321 @@
+/*
+Author: NullQuery
+Created on: 2014-09-24
+
+	** CAUTION - A WORD OF WARNING **
+
+If there is no getter or setter available and you aren't extending my code with a sub-type, DO NOT ACCESS VARIABLES DIRECTLY!
+
+Add a getter/setter instead, even if it does nothing but return or set the variable. Thank you for your patience with me. -NQ
+
+	** Public API **
+
+	var/datum/html_interface/hi = new/datum/html_interface(ref, title, width = 700, height = 480, head = "")
+
+Creates a new HTML interface object with [ref] as the object and [title] as the initial title of the page. [width] and [height] is the initial width and height
+of the window. The text in [head] is added just before the end </head> tag.
+
+	hi.setTitle(title)
+
+Changes the title of the page.
+
+	hi.getTitle()
+
+Returns the current title of the page.
+
+	hi.updateLayout(layout)
+
+Updates the overall layout of the page (the HTML code between the body tags).
+
+This should be used sparingly.
+
+	hi.updateContent(id, content, ignore_cache = FALSE)
+
+Updates a portion of the page, i.e., the DOM element with the appropriate ID. The contents of the element are replaced with the provided HTML.
+
+The content is cached on the server-side to minimize network traffic when the client "should have" the same HTML. The client may not have
+the same HTML if scripts cause the content to change. In this case set the ignore_cache parameter.
+
+	hi.executeJavaScript(jscript, client = null)
+
+Executes Javascript on the browser.
+
+The client is optional and may be a /mob, /client or /html_interface_client object. If not specified the code is executed on all clients.
+
+	hi.show(client)
+
+Shows the HTML interface to the provided client. This will create a window, apply the current layout and contents. It will then wait for events.
+
+	hi.hide(client)
+
+Hides the HTML interface from the provided client. This will close the browser window.
+
+	hi.isUsed()
+
+Returns TRUE if the interface is being used (has an active client) or FALSE if not.
+
+	** Additional notes **
+
+When working with byond:// links make sure to reference the HTML interface object and NOT the original object. Topic() will still be called on
+your object, but it will pass through the HTML interface first allowing interception at a higher level.
+
+
+	** Sample code **
+
+mob/var/datum/html_interface/hi
+
+mob/verb/test()
+	if (!hi) hi = new/datum/html_interface(src, "[src.key]")
+
+	hi.updateLayout("<div id=\"content\"></div>")
+	hi.updateContent("content", "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porttitor, leo nec facilisis aliquam, elit ligula iaculis sapien, non vulputate neque metus id quam. Cras mauris nisl, pharetra malesuada massa nec, volutpat feugiat metus. Duis sed condimentum purus. In ex leo, laoreet ac rhoncus quis, volutpat ac risus. Ut et tempus magna. Vestibulum in nisl vitae metus commodo tempus et dapibus urna. Integer nec vestibulum lacus. Donec quis metus non lacus bibendum lacinia. Aenean tincidunt libero vestibulum metus blandit pharetra. Nunc quis magna volutpat, bibendum nulla in, sagittis risus. Sed id velit sodales, bibendum purus accumsan, eleifend purus.</p><p>Suspendisse potenti. Proin lorem orci, euismod at elit in, molestie dapibus leo. Nulla lacinia vel urna nec vulputate. Praesent non enim metus. Quisque non pharetra justo. Integer efficitur massa orci, vitae placerat libero eleifend sit amet. Fusce in placerat quam. Praesent quis lectus turpis. Aenean mattis lacus sed laoreet sagittis. Aliquam efficitur nisl at tellus ultrices auctor. Quisque hendrerit, mi quis suscipit interdum, justo magna gravida libero, et venenatis sapien ante quis odio.</p><p>Etiam ullamcorper condimentum lacus, eu laoreet ipsum gravida et. Fusce odio libero, iaculis euismod finibus sit amet, condimentum ac ante. Etiam pretium lorem mauris, sit amet varius tortor efficitur eget. Pellentesque at lacinia lectus. Integer tristique nibh hendrerit purus placerat dapibus. Cras elementum est elementum, bibendum orci nec, consequat elit. Fusce porttitor neque quis libero placerat, vel varius arcu aliquet. Aenean vitae rhoncus nunc, non tempus magna. Aliquam lacinia sit amet dolor id maximus. Curabitur eget eleifend nisl. Mauris interdum nibh feugiat lectus lacinia fringilla. Aliquam nec magna vel leo ultricies dignissim. Duis eu luctus odio, finibus dictum nulla.</p>Mauris fringilla a lorem vel euismod. Sed auctor eget lorem sed lacinia. Maecenas vel posuere sapien. In lobortis odio non tincidunt ultricies. Sed consequat molestie orci et pharetra. Suspendisse potenti. Vestibulum vitae ornare risus, nec semper arcu. Duis et interdum lacus.</p><p>Etiam urna nulla, pulvinar at est auctor, varius feugiat orci. Vestibulum efficitur maximus imperdiet. Donec vehicula, leo sit amet condimentum pulvinar, urna felis aliquet velit, bibendum placerat dui libero sed tortor. Vivamus ac diam commodo nisi facilisis lacinia. Aenean a rhoncus risus, venenatis efficitur arcu. Curabitur tincidunt nulla eget augue malesuada imperdiet. Quisque ligula purus, dictum a imperdiet eget, eleifend eu leo. Phasellus massa ipsum, molestie nec pellentesque eu, scelerisque et mi. Vivamus at libero varius, lacinia magna non, imperdiet tortor. Donec scelerisque ipsum sollicitudin justo ornare accumsan. In velit orci, lobortis eget maximus et, scelerisque ut nulla. Cras sit amet finibus sapien. Aenean metus lorem, gravida a rutrum quis, varius eu arcu. Integer ac hendrerit purus. Aliquam cursus ultricies tortor. Fusce scelerisque, arcu id pellentesque accumsan, nulla turpis tempus lectus, tincidunt blandit mi nisi non metus.</p>")
+
+	hi.show(src)
+
+*/
+
+/datum/html_interface
+	// The atom we should report to.
+	var/atom/ref
+
+	// The current title of the browser window.
+	var/title
+
+	// A list of content elements that have been changed. This is necessary when showing the browser control to new clients.
+	var/list/content_elements = new/list()
+
+	// The HTML layout, typically what's in-between the <body></body> tag. May be overridden by extensions.
+	var/layout
+
+	// An associative list of clients currently viewing this screen. The key is the /client object, the value is the /datum/html_interface_client object.
+	var/list/clients
+
+	// This goes just before the closing HEAD tag. I haven't exposed any getters/setters for it because it's only being used by extensions.
+	var/head = ""
+
+	// The initial width of the browser control, used when the window is first shown to a client.
+	var/width
+
+	// The initial height of the browser control, used when the window is first shown to a client.
+	var/height
+
+/datum/html_interface/New(atom/ref, title, width = 700, height = 480, head = "")
+	. = ..()
+
+	src.ref            = ref
+	src.title          = title
+	src.width          = width
+	src.height         = height
+	src.head           = head
+
+/datum/html_interface/Destroy()
+	if (src.clients)
+		for (var/client in src.clients)
+			src.hide(src.clients[client])
+
+	return ..()
+
+/*                 * Hooks */
+/datum/html_interface/proc/specificRenderTitle(datum/html_interface_client/hclient, ignore_cache = FALSE)
+
+/datum/html_interface/proc/sendResources(client/client)
+	client << browse_rsc('jquery.min.js')
+	client << browse_rsc('bootstrap.min.js')
+	client << browse_rsc('bootstrap.min.css')
+	client << browse_rsc('html_interface.css')
+	client << browse_rsc('html_interface.js')
+
+/datum/html_interface/proc/createWindow(datum/html_interface_client/hclient)
+	winclone(hclient.client, "window", "browser_\ref[src]")
+
+	var/list/params = list(
+		"size"        = "[width]x[height]",
+		"statusbar"   = "false",
+		"on-close"    = "byond://?src=\ref[src]&html_interface_action=onclose"
+	)
+
+	if (hclient.client.hi_last_pos) params["pos"] = "[hclient.client.hi_last_pos]"
+
+	winset(hclient.client, "browser_\ref[src]", list2params(params))
+
+	winset(hclient.client, "browser_\ref[src].browser", list2params(list("parent" = "browser_\ref[src]", "type" = "browser", "pos" = "0,0", "size" = "[width]x[height]", "anchor1" = "0,0", "anchor2" = "100,100", "use-title" = "true", "auto-format" = "false")))
+
+/*                 * Public API */
+/datum/html_interface/proc/getTitle() return src.title
+
+/datum/html_interface/proc/setTitle(title, ignore_cache = FALSE)
+	src.title = title
+
+	var/datum/html_interface_client/hclient
+
+	for (var/client in src.clients)
+		hclient = src._getClient(src.clients[client])
+
+		if (hclient && hclient.active) src._renderTitle(src.clients[client], ignore_cache)
+
+/datum/html_interface/proc/executeJavaScript(jscript, datum/html_interface_client/hclient = null)
+	if (hclient)
+		hclient = getClient(hclient)
+
+		if (istype(hclient))
+			if (hclient.is_loaded) hclient.client << output(list2params(list(jscript)), "browser_\ref[src].browser:eval")
+	else
+		for (var/client in src.clients) src.executeJavaScript(jscript, src.clients[client])
+
+/datum/html_interface/proc/updateLayout(layout)
+	src.layout = layout
+
+	var/datum/html_interface_client/hclient
+
+	for (var/client in src.clients)
+		hclient = src._getClient(src.clients[client])
+
+		if (hclient && hclient.active) src._renderLayout(hclient)
+
+/datum/html_interface/proc/updateContent(id, content, ignore_cache = FALSE)
+	src.content_elements[id] = content
+
+	var/datum/html_interface_client/hclient
+
+	for (var/client in src.clients)
+		hclient = src._getClient(src.clients[client])
+
+		if (hclient && hclient.active) src._renderContent(id, hclient, ignore_cache)
+
+/datum/html_interface/proc/show(datum/html_interface_client/hclient)
+	hclient = getClient(hclient, TRUE)
+
+	if (istype(hclient))
+		// This needs to be commented out due to BYOND bug http://www.byond.com/forum/?post=1487244
+		// /client/proc/send_resources() executes this per client to avoid the bug, but by using it here files may be deleted just as the HTML is loaded,
+		// causing file not found errors.
+//		src.sendResources(hclient.client)
+
+		if (winexists(hclient.client, "browser_\ref[src]"))
+			src._renderTitle(hclient, TRUE)
+			src._renderLayout(hclient)
+		else
+			src.createWindow(hclient)
+			hclient.is_loaded = FALSE
+			hclient.client << output(replacetextEx(replacetextEx(file2text('html_interface.html'), "\[hsrc\]", "\ref[src]"), "</head>", "[head]</head>"), "browser_\ref[src].browser")
+			winshow(hclient.client, "browser_\ref[src]", TRUE)
+
+/datum/html_interface/proc/hide(datum/html_interface_client/hclient)
+	hclient = getClient(hclient)
+
+	if (istype(hclient))
+		if (src.clients)
+			src.clients.Remove(hclient.client)
+
+			if (!src.clients.len) src.clients = null
+
+		hclient.client.hi_last_pos = winget(hclient.client, "browser_\ref[src]" ,"pos")
+
+		winshow(hclient.client, "browser_\ref[src]", FALSE)
+		winset(hclient.client, "browser_\ref[src]", "parent=none")
+
+		if (hascall(src.ref, "hiOnHide")) call(src.ref, "hiOnHide")(hclient)
+
+// Convert a /mob to /client, and /client to /datum/html_interface_client
+/datum/html_interface/proc/getClient(client, create_if_not_exist = FALSE)
+	if (istype(client, /datum/html_interface_client)) return src._getClient(client)
+	else if (ismob(client))
+		var/mob/mob = client
+		client      = mob.client
+
+	if (istype(client, /client))
+		if (create_if_not_exist && (!src.clients || !(client in src.clients)))
+			if (!src.clients)             src.clients = new/list()
+			if (!(client in src.clients)) src.clients[client] = new/datum/html_interface_client(client)
+
+		if (src.clients && (client in src.clients)) return src._getClient(src.clients[client])
+		else                                        return null
+	else                                            return null
+
+/datum/html_interface/proc/enableFor(datum/html_interface_client/hclient)
+	hclient.active = TRUE
+
+	src.show(hclient)
+
+/datum/html_interface/proc/disableFor(datum/html_interface_client/hclient)
+	hclient.active = FALSE
+
+/datum/html_interface/proc/isUsed()
+	if (src.clients && src.clients.len > 0)
+		var/datum/html_interface_client/hclient
+		for (var/key in clients)
+			hclient = clients[key]
+			if (hclient.active) return TRUE
+
+	return FALSE
+
+/*                 * Danger Zone */
+
+/datum/html_interface/proc/_getClient(datum/html_interface_client/hclient)
+	if (hclient)
+		if (hclient.client)
+			if (hascall(src.ref, "hiIsValidClient"))
+				var/res = call(src.ref, "hiIsValidClient")(hclient)
+
+				if (res)
+					if (!hclient.active) src.enableFor(hclient)
+				else
+					if (hclient.active)  src.disableFor(hclient)
+
+			return hclient
+		else
+			return null
+	else
+		return null
+
+/datum/html_interface/proc/_renderTitle(datum/html_interface_client/hclient, ignore_cache = FALSE)
+	if (hclient && hclient.is_loaded)
+		// Only render if we have new content.
+
+		if (ignore_cache || src.title != hclient.title)
+			hclient.title = title
+
+			src.specificRenderTitle(hclient)
+
+			hclient.client << output(list2params(list(title)), "browser_\ref[src].browser:setTitle")
+
+/datum/html_interface/proc/_renderLayout(datum/html_interface_client/hclient)
+	if (hclient && hclient.is_loaded)
+		var/html   = src.layout
+
+		// Only render if we have new content.
+		if (html != hclient.layout)
+			hclient.layout = html
+
+			hclient.client << output(list2params(list(html)), "browser_\ref[src].browser:updateLayout")
+
+			for (var/id in src.content_elements) src._renderContent(id, hclient)
+
+/datum/html_interface/proc/_renderContent(id, datum/html_interface_client/hclient, ignore_cache = FALSE)
+	if (hclient && hclient.is_loaded)
+		var/html   = src.content_elements[id]
+
+		// Only render if we have new content.
+		if (ignore_cache || !(id in hclient.content_elements) || html != hclient.content_elements[id])
+			hclient.content_elements[id] = html
+
+			hclient.client << output(list2params(list(id, html)), "browser_\ref[src].browser:updateContent")
+
+/datum/html_interface/Topic(href, href_list[])
+	var/datum/html_interface_client/hclient = getClient(usr.client)
+
+	if (istype(hclient))
+		if ("html_interface_action" in href_list)
+			switch (href_list["html_interface_action"])
+
+				if ("onload")
+					hclient.layout = null
+					hclient.content_elements.len = 0
+					hclient.is_loaded = TRUE
+
+					src._renderTitle(hclient, TRUE)
+					src._renderLayout(hclient)
+
+				if ("onclose")
+					src.hide(hclient)
+		else if (src.ref && hclient.active) src.ref.Topic(href, href_list, hclient)
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta charset="UTF-8" />
+		<title></title>
+		<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
+		<link rel="stylesheet" type="text/css" href="html_interface.css" />
+		<script type="text/javascript">var hSrc = "[hsrc]";</script>
+		<script type="text/javascript" src="jquery.min.js"></script>
+		<script type="text/javascript" src="bootstrap.min.js"></script>
+		<script type="text/javascript" src="html_interface.js"></script>
+	</head>
+	<body>
+	</body>
+</html>
@@ -0,0 +1,45 @@
+var is_loading								= false;
+var load_count								= 0;
+
+function onload()
+{
+	if (!is_loading)
+	{
+		var count							= ++load_count;
+		is_loading							= true;
+		$("body").html("");
+
+		window.location.href				= "byond://?src=" + hSrc + "&html_interface_action=onload";
+		
+		// The request may fail which would prevent the player from refreshing the screen again. Try to detect this retry.
+		setTimeout(function()
+		{
+			if (count == load_count && is_loading && $("body").html() == "")
+			{
+				is_loading					= false;
+				onload();
+			}
+		}, 500);
+	}
+}
+
+$(document).ready(function()
+{
+	$(document).on("keydown", function(e)
+	{
+		if (!e.ctrlKey && e.which == 116)
+		{
+			e.preventDefault();
+
+			onload();
+		}
+	});
+
+	onload();
+});
+
+function fixText(text)						{ return text.replace(/ÿ/g, ""); }
+
+function setTitle(new_title)				{ $("title").html(fixText(new_title)); $(window).trigger("onUpdateTitle"); }
+function updateLayout(new_html)				{ $("body").html(fixText(new_html)); $(window).trigger("onUpdateLayout"); setTimeout(function(){ is_loading = false; }, 200); }
+function updateContent(id, new_html)		{ $("#" + id).html(fixText(new_html)); $(window).trigger("onUpdateContent"); }
@@ -0,0 +1,43 @@
+/datum/html_interface_client
+	// The /client object represented by this model.
+	var/client/client
+
+	// The layout currently visible to the client.
+	var/layout
+
+	// The content elements (mirrored from /datum/html_interface) currently visible to the client.
+	var/list/content_elements = new/list()
+
+	// The current title for this client
+	var/title
+
+	// TRUE if the browser control has loaded and will accept input, FALSE if not.
+	var/is_loaded = FALSE
+
+	// TRUE if this client should receive updates, FALSE if not.
+	var/active = TRUE
+
+	// A list of extra variables, for use by extensions.
+	var/list/extra_vars
+
+/datum/html_interface_client/New(client/client)
+	. = ..()
+
+	src.client = client
+
+/datum/html_interface_client/proc/putExtraVar(key, value)
+	if (!src.extra_vars) src.extra_vars = new/list()
+	src.extra_vars[key] = value
+
+/datum/html_interface_client/proc/removeExtraVar(key)
+	if (src.extra_vars)
+		. = src.extra_vars[key]
+
+		src.extra_vars.Remove(key)
+
+		if (!src.extra_vars.len) src.extra_vars = null
+
+	return .
+
+/datum/html_interface_client/proc/getExtraVar(key)
+	if (src.extra_vars) return src.extra_vars[key]
@@ -0,0 +1,315 @@
+body
+{
+	background-color: #272727;
+	background-image: url(uiBg.png);
+	background-repeat: repeat-x;
+	background-position: center top;
+	
+	font-family: verdana,Geneva,sans-serif;
+	font-size: 12px;
+	color: #FFFFFF;
+	line-height: 170%; /* NullQuery: 170% of what? */
+}
+
+#ntbgcenter
+{
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	height: 246px;
+
+	background-image: url(uiBgcenter.png);
+	background-position: center;
+	background-repeat: no-repeat;
+
+	z-index: -1;
+}
+
+#content
+{
+	padding: 8px;
+	font-family: Verdana, Geneva, sans-serif;
+}
+
+hr
+{
+	background-color: #40628a;
+	height: 1px;
+}
+
+a, a:link, a:visited, a:active, .linkOn, .linkOff
+{ 
+	color: #ffffff; 
+	text-decoration: none;
+	background: #40628a;
+	border: 1px solid #161616;
+	padding: 1px 4px 1px 4px;
+	margin: 0 2px 0 0;
+	cursor:default;
+}
+
+a.nobg, a.nobg:link, a.nobg:visited, a.nobg:active
+{ 
+	color: #ffffff; 
+	text-decoration: none;
+	background: transparent;
+	border: none;
+	padding: 0px;
+	margin: 0px;
+	cursor:default;
+	font-weight:bold;
+}
+a.nobg:hover 
+{ 
+	color:#40628a;
+}
+
+a:hover 
+{ 
+	color: #40628a;
+	background: #ffffff;
+}
+
+a.white, a.white:link, a.white:visited, a.white:active
+{ 
+	color: #40628a; 
+	text-decoration: none;
+	background: #ffffff;
+	border: 1px solid #161616;
+	padding: 1px 4px 1px 4px;
+	margin: 0 2px 0 0;
+	cursor:default;
+}
+
+a.white:hover 
+{ 
+	color: #ffffff;
+	background: #40628a;
+}
+
+.linkOn, a.linkOn:link, a.linkOn:visited, a.linkOn:active, a.linkOn:hover
+{ 
+	color: #ffffff; 
+	background: #2f943c;
+	border-color: #24722e;
+}
+
+.linkOff, a.linkOff:link, a.linkOff:visited, a.linkOff:active, a.linkOff:hover
+{ 
+	color: #ffffff; 
+	background: #999999;
+	border-color: #666666;
+}
+
+a.icon, .linkOn.icon, .linkOff.icon
+{
+	position: relative;
+	padding: 1px 4px 2px 20px;
+}
+
+a.icon img, .linkOn.icon img
+{
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 18px;
+	height: 18px;
+}
+
+ul
+{
+	padding: 4px 0 0 10px;
+	margin: 0;
+	list-style-type: none;
+}
+
+li
+{
+	padding: 0 0 2px 0;
+}
+
+img, a img 
+{ 
+	border-style:none; 
+}
+
+h1, h2, h3, h4, h5, h6
+{
+	margin: 0;
+	padding: 16px 0 8px 0; 
+	color: #517087;
+}
+
+h1
+{
+	font-size: 15px;
+}
+
+h2
+{
+	font-size: 14px;
+}
+
+h3
+{
+	font-size: 13px;
+}
+
+h4
+{
+	font-size: 12px;
+}
+
+.good
+{
+	color: #00ff00;
+}
+
+.average
+{
+	color: #d09000;
+}
+
+.bad
+{
+	color: #ff0000;
+}
+
+.highlight
+{
+	color: #8BA5C4;
+}
+
+.dark
+{
+	color: #272727;
+}
+
+.notice
+{
+	position: relative;
+	background: #E9C183;
+	color: #15345A;
+	font-size: 10px;
+	font-style: italic;
+	padding: 2px 4px 0 4px;
+	margin: 4px;
+}
+
+.notice.icon
+{	
+	padding: 2px 4px 0 20px;
+}
+
+.notice img
+{
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 16px;
+	height: 16px;
+}
+
+div.notice
+{
+	clear: both;
+}
+
+.statusDisplay
+{
+	background: #000000;
+	color: #ffffff;
+	border: 1px solid #40628a;
+	padding: 4px;
+	margin: 3px 0;
+}
+
+.statusLabel
+{
+	width: 138px;
+	float: left;
+	overflow: hidden;
+	color: #98B0C3;
+}
+
+.statusValue
+{
+	float: left;
+}
+
+.block
+{
+	padding: 8px;
+	margin: 10px 4px 4px 4px;
+	border: 1px solid #40628a;
+	background-color: #202020;
+}
+
+.block h3
+{
+	padding: 0;
+}
+
+.progressBar
+{
+	width: 240px;
+	height: 14px;
+	border: 1px solid #666666;
+	float: left;
+	margin: 0 5px;
+	overflow: hidden;
+}
+
+.progressFill
+{
+	width: 100%;
+	height: 100%;
+	background: #40628a;
+	overflow: hidden;
+}
+
+.progressFill.good
+{
+	color: #ffffff;
+	background: #00ff00;
+}
+
+.progressFill.average
+{
+	color: #ffffff;
+	background: #d09000;
+}
+
+.progressFill.bad
+{
+	color: #ffffff;
+	background: #ff0000;
+}
+
+.progressFill.highlight
+{
+	color: #ffffff;
+	background: #8BA5C4;
+}
+
+.clearBoth
+{
+	clear: both;
+}
+
+.clearLeft
+{
+	clear: left;
+}
+
+.clearRight
+{
+	clear: right;
+}
+
+.line
+{
+	width: 100%;
+	clear: both;
+}
@@ -0,0 +1,175 @@
+/*
+Author: NullQuery
+Created on: 2014-09-25
+
+Extension to implement Nanotrasen styled windows.
+
+Additional procs:
+
+	hi.setEyeColor(color, client)
+
+Use this to set the color of the 'eye' in the top-left corner of the window.
+
+The client is optional and may be a /mob, /client or /html_interface_client object. It must be specified, since the eye icon is specific to a client.
+
+*/
+
+/datum/html_interface/nanotrasen/New()
+	. = ..()
+
+	// Add appropriate CSS and set the default layout.
+	src.head = src.head + "<link rel=\"stylesheet\" type=\"text/css\" href=\"nanotrasen.css\" />"
+	src.updateLayout("")
+
+/datum/html_interface/updateLayout(layout)
+	// Wrap the layout in our custom HTML
+	return ..("<div id=\"ntbgcenter\"></div><div id=\"content\">[layout]</div>")
+
+/datum/html_interface/specificRenderTitle(datum/html_interface_client/hclient, ignore_cache = FALSE)
+	// Update the title in our custom header (in addition to default functionality)
+	winset(hclient.client, "browser_\ref[src].uiTitle", list2params(list("text" = "[src.title]")))
+
+/datum/html_interface/nanotrasen/sendResources(client/client)
+	. = ..() // we need the default resources
+
+	client << browse_rsc('uiBg.png')
+	client << browse_rsc('uiBgcenter.png')
+	client << browse_rsc('nanotrasen.css')
+
+/datum/html_interface/nanotrasen/createWindow(datum/html_interface_client/hclient)
+	. = ..() // we want the default window
+
+	// Remove the titlebar
+	winset(hclient.client, "browser_\ref[src]", list2params(list(
+		"titlebar"    = "false"
+	)))
+
+	// Reposition the browser
+	winset(hclient.client, "browser_\ref[src].browser", list2params(list(
+		"pos"         = "0,35",
+		"size"        = "[width]x[height - 35]"
+	)))
+
+	// Add top background image
+	winset(hclient.client, "browser_\ref[src].topbg", list2params(list(
+		"parent"      = "browser_\ref[src]",
+		"type"        = "label",
+		"pos"         = "0,0",
+		"size"        = "[width]x35",
+		"anchor1"     = "0,0",
+		"anchor2"     = "100,0",
+		"image"       = "['uiBgtop.png']",
+		"image-mode"  = "tile",
+		"is-disabled" = "true"
+	)))
+
+	// Add Nanotrasen logo
+	winset(hclient.client, "browser_\ref[src].uiTitleFluff", list2params(list(
+		"parent"      = "browser_\ref[src]",
+		"type"        = "label",
+		"pos"         = "[width - 42 - 4 - 24 - 4 - 24 - 4],5",
+		"size"        = "42x24",
+		"anchor1"     = "100,0",
+		"anchor2"     = "100,0",
+		"image"       = "['uiTitleFluff.png']",
+		"image-mode"  = "tile",
+		"is-disabled" = "true"
+	)))
+
+	// Add Eye picture
+	winset(hclient.client, "browser_\ref[src].uiTitleEye", list2params(list(
+		"parent"      = "browser_\ref[src]",
+		"type"        = "label",
+		"pos"         = "8,5",
+		"size"        = "42x24",
+		"anchor1"     = "0,0",
+		"anchor2"     = "0,0",
+		"image"       = "['uiEyeGreen.png']",
+		"image-mode"  = "tile",
+		"is-disabled" = "true"
+	)))
+
+	// Add title text
+	winset(hclient.client, "browser_\ref[src].uiTitle", list2params(list(
+		"parent"         = "browser_\ref[src]",
+		"type"           = "label",
+		"is-transparent" = "true",
+		"pos"            = "64,0",
+		"size"           = "580x35",
+		"anchor1"        = "0,0",
+		"anchor2"        = "100,0",
+		"is-disabled"    = "true",
+		"text"           = "[src.title]",
+		"align"          = "left",
+		"font-family"    = "verdana,Geneva,sans-serif",
+		"font-size"      = "12", // ~ 16px
+		"text-color"     = "#E9C183"
+	)))
+
+	// Add minimize button
+	// TODO: Style the button (add image)
+	winset(hclient.client, "browser_\ref[src].uiTitleMinimize", list2params(list(
+		"parent"         = "browser_\ref[src]",
+		"type"           = "button",
+		"is-flat"        = "true",
+		"background-color"="#383838", // should be unnecessary if image is used
+		"text-color"     = "#FFFFFF", // should be unnecessary if image is used
+		"is-transparent" = "true",
+		"pos"            = "[width - 24 - 4 - 24 - 4],5",
+		"size"           = "24x24",
+		"anchor1"        = "100,0",
+		"anchor2"        = "100,0",
+		"text"           = "-",
+		"font-family"    = "verdana,Geneva,sans-serif", // should be unnecessary if image is used
+		"font-size"      = "12", // ~ 16px - should be unnecessary if image is used
+
+		// Disable resizing (disables maximizing), minimize window, bind window.on-size to catch 'restore window' button to enable resizing if restored.
+		"command"        = ".winset \"browser_\ref[src].can-resize=false;browser_\ref[src].is-minimized=true;browser_\ref[src].on-size=\".swinset \\\"browser_\ref[src].can-resize=true;browser_\ref[src].on-size=\\\"\"\""
+	)))
+
+	// Add close button
+	// TODO: Style the button (add image)
+	winset(hclient.client, "browser_\ref[src].uiTitleClose", list2params(list(
+		"parent"         = "browser_\ref[src]",
+		"type"           = "button",
+		"is-flat"        = "true",
+		"background-color"="#383838", // should be unnecessary if image is used
+		"text-color"     = "#FFFFFF", // should be unnecessary if image is used
+		"command"        = "byond://?src=\ref[src];html_interface_action=onclose",
+		"is-transparent" = "true",
+		"pos"            = "[width - 24 - 4],5",
+		"size"           = "24x24",
+		"anchor1"        = "100,0",
+		"anchor2"        = "100,0",
+		"text"           = "X",
+		"font-family"    = "verdana,Geneva,sans-serif", // should be unnecessary if image is used
+		"font-size"      = "12" // ~ 16px - should be unnecessary if image is used
+	)))
+
+/datum/html_interface/nanotrasen/enableFor(datum/html_interface_client/hclient)
+	. = ..()
+
+	src.setEyeColor("green", hclient)
+
+/datum/html_interface/nanotrasen/disableFor(datum/html_interface_client/hclient)
+	hclient.active = FALSE
+
+	src.setEyeColor("red", hclient)
+
+/datum/html_interface/nanotrasen/proc/setEyeColor(color, datum/html_interface_client/hclient)
+	hclient = getClient(hclient)
+
+	if (istype(hclient))
+		var/resource
+		switch (color)
+			if ("green")  resource = 'uiEyeGreen.png'
+			if ("orange") resource = 'uiEyeOrange.png'
+			if ("red")    resource = 'uiEyeRed.png'
+			else          CRASH("Invalid color: [color]")
+
+		if (hclient.getExtraVar("eye_color") != color)
+			hclient.putExtraVar("eye_color", color)
+
+			winset(hclient.client, "browser_\ref[src].uiTitleEye", list2params(list("image" = "[resource]")))
+	else
+		WARNING("Invalid object passed to /datum/html_interface/nanotrasen/proc/setEyeColor")