Implement hitpoints display mode

Rosuav · Aug 12, 2024 · b0ef5ff · b0ef5ff
1 parent c99d8fa
commit b0ef5ff
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/httpstatic/monitor.js b/httpstatic/monitor.js
@@ -1,5 +1,5 @@
 import {choc, set_content, DOM} from "https://rosuav.github.io/choc/factory.js";
-const {DIV} = choc;
+const {DIV, IMG} = choc; //autoimport
 import {ensure_font} from "$$static||utils.js$$";
 
 const currency_formatter = new Intl.NumberFormat("en-US", {style: "currency", currency: "USD"});
@@ -79,6 +79,22 @@ export function update_display(elem, data) { //Used for the preview as well as t
 	}
 	if (type === "goalbar") {
 		const t = styleinfo[data.id];
+		if (t.format === "hitpoints") {
+			const m = /^([0-9]+):([^ ]+) (.*)$/.exec(data.display);
+			if (!m) {console.error("Something's misconfigured (see monitor.js goalbar regex) -- display", data.display); return;}
+			const maxhp = t.t[0];
+			const curhp = maxhp - m[1], avatar = m[2], name = m[3];
+			const pos = curhp/maxhp * 100;
+			elem.style.background = `linear-gradient(.25turn, ${t.fillcolor} ${pos}%, ${t.barcolor} ${pos}%, ${t.barcolor})`;
+			elem.style.display = "flex";
+			const img = elem.querySelector("img") || IMG({src: avatar});
+			if (img.src !== avatar) img.src = avatar; //Avoid flicker
+			set_content(elem, [
+				img,
+				DIV(name), DIV(curhp + "/" + maxhp), DIV()
+			]);
+			return;
+		}
 		const thresholds = t.t;
 		const m = /^([0-9]+):(.*)$/.exec(data.display);
 		if (!m) {console.error("Something's misconfigured (see monitor.js goalbar regex) -- display", data.display); return;}

diff --git a/modules/http/chan_minigames.pike b/modules/http/chan_minigames.pike
@@ -155,9 +155,10 @@ __async__ void update_boss(object channel, mapping game) {
 			"fw_dono": 1, "fw_member": 1, "fw_shop": 1, "fw_gift": 1,
 			"thresholds": "$bossmaxhp$ 1",
 			"text": "$bossavatar$ $bossname$",
+			"font": "Lexend", "fontsize": "30",
+			"fillcolor": "#ff0000", "barcolor": "#ffffdd", "color": "#000000",
+			"borderwidth": "4", "bordercolor": "#00ffff",
 		]));
-		werror("GOT INFO %O\n", info);
-		werror("ID: %O\n", game->monitorid);
 		await(G->G->DB->mutate_config(channel->userid, "minigames") {__ARGS__[0]->boss = game;});
 	}
 	if (!channel->commands->slayboss) G->G->cmdmgr->update_command(channel, "", "slayboss", #"

diff --git a/modules/http/chan_monitors.pike b/modules/http/chan_monitors.pike
@@ -48,7 +48,6 @@ __async__ mapping(string:mixed) http_request(Protocols.HTTP.Server.Request req)
 		if (!info) nonce = 0;
 		return render_template("monitor.html", ([
 			"vars": (["ws_type": ws_type, "ws_group": nonce + "#" + req->misc->channel->userid, "ws_code": "monitor"]),
-			"styles": "#display div {width: 33%;}#display div:nth-of-type(2) {text-align: center;}#display div:nth-of-type(3) {text-align: right;}",
 		]));
 	}
 	if (!req->misc->is_mod) return render_template("login.md", (["msg": "moderator privileges"]) | req->misc->chaninfo);

diff --git a/templates/monitor.html b/templates/monitor.html
@@ -7,7 +7,10 @@
 </head>
 <body>
 <style>
-$$styles$$
+#display div {width: 33%;}
+#display div:nth-of-type(2) {text-align: center;}
+#display div:nth-of-type(3) {text-align: right;}
+img {max-width: 40px; background: #eee; padding-right: 2px;}
 </style>
 <main>
 <div id=display></div>