Tooltips

client/gui/hud.ts

@@ -3,15 +3,26 @@ import { AssetManager } from "$/client/assets.ts";
 import type { Client } from "$/client/client.ts";
 import type { ClientInventories } from "$/client/inventory.ts";
 import { draw_item, draw_nine_slice } from "$/client/rendering/render_utils.ts";
-import { canvas, draw_rect_stroke, Texture } from "$/client/renderer/mod.ts";
+import { canvas, draw_rect_stroke, draw_text, measure_text, Texture } from "$/client/renderer/mod.ts";
+import { display_name } from "$/common/utils.ts";
+import { TEXT_HEIGHT, TEXT_SCALE } from "./widgets.ts";
 
 const PADDING = 10;
 const CROSSHAIR_SIZE = 8;
+// how long the held item's name shows above the hotbar after it changes, and the last part of that it fades out in
+const HELD_NAME_MS = 2000;
+const HELD_NAME_FADE_MS = 500;
+const HELD_NAME_GAP = 12;
 
 // what's drawn over the world while playing, like minecraft's Gui: hotbar, crosshair and chat
 export class Hud {
+	// what was held last frame, as slot and item id, and when the held item last changed
+	#held = "";
+	#held_since = -Infinity;
+
 	render(client: Client) {
 		this.#render_hotbar(client.player.inventories);
+		this.#render_held_name(client.player.inventories);
 		this.#render_crosshair();
 		client.chat.render(false);
 	}
@@ -54,6 +65,30 @@ export class Hud {
 		}
 	}
 
+	// like minecraft: switching slots, or a different item ending up in the selected one, shows its name for a bit
+	#render_held_name(inventories: ClientInventories) {
+		const item = inventories.inventory.get_item(inventories.hotbar_selected);
+		const held = item ? `${inventories.hotbar_selected} ${item.type_id}` : "";
+		const now = performance.now();
+		if (held !== this.#held) {
+			this.#held = held;
+			this.#held_since = item ? now : -Infinity;
+		}
+
+		const shown_for = now - this.#held_since;
+		if (!item || shown_for > HELD_NAME_MS) {
+			return;
+		}
+		const alpha = Math.min(1, (HELD_NAME_MS - shown_for) / HELD_NAME_FADE_MS);
+		const name = display_name(item.type_id);
+		const hotbar_top = canvas.height - (PADDING * 2 + SLOT_SIZE);
+		const x = (canvas.width - measure_text(name, TEXT_SCALE)) / 2;
+		const y = hotbar_top - HELD_NAME_GAP - TEXT_HEIGHT * TEXT_SCALE;
+		// a shadow so it reads over bright sky and snow
+		draw_text(name, x + TEXT_SCALE, y + TEXT_SCALE, TEXT_SCALE, [0.15, 0.15, 0.15, alpha]);
+		draw_text(name, x, y, TEXT_SCALE, [1, 1, 1, alpha]);
+	}
+
 	#render_crosshair() {
 		draw_rect_stroke(
 			(canvas.width - CROSSHAIR_SIZE) / 2,