Tooltips

client/gui/gui_screen.ts

@@ -7,6 +7,7 @@ import { InputManager } from "../input_manager.ts";
 import { ClientInventories } from "../inventory.ts";
 import { canvas, Texture } from "../renderer/mod.ts";
 import { draw_item, draw_nine_slice } from "../rendering/render_utils.ts";
+import { draw_tooltip, item_tooltip } from "./tooltip.ts";
 
 export class Slot {
 	container: ContainerKey;
@@ -99,9 +100,15 @@ export class GuiInventoryScreen extends GuiScreen {
 			}
 		}
 
+		const mouse = InputManager.get_mouse_position();
 		if (this.inventories.cursor.item) {
-			const mouse = InputManager.get_mouse_position();
 			draw_item(this.inventories.cursor.item, mouse.x, mouse.y);
+		} else if (this.hovering) {
+			// what's in the slot under the mouse, while not carrying anything
+			const item = this.get_container(this.hovering.container)?.get_item(this.hovering.index);
+			if (item) {
+				draw_tooltip(item_tooltip(item), mouse.x, mouse.y);
+			}
 		}
 	}
 

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,

client/gui/tooltip.ts

@@ -0,0 +1,55 @@
+// the box next to the mouse saying what an item is, like minecraft's: its name, then its lore
+import { EverythingRegistry, ItemRegistry } from "$/common/everything_registry.ts";
+import type { ItemStack } from "$/common/inventory.ts";
+import { display_name } from "$/common/utils.ts";
+import { canvas, draw_rect, draw_text, measure_text } from "$/client/renderer/mod.ts";
+import { TEXT_HEIGHT, TEXT_SCALE } from "./widgets.ts";
+
+type Color = [number, number, number, number];
+
+const NAME_COLOR: Color = [1, 1, 1, 1];
+const LORE_COLOR: Color = [0.66, 0.66, 0.66, 1];
+const BACKGROUND: Color = [0.06, 0.02, 0.1, 0.94];
+const BORDER: Color = [0.31, 0.1, 0.6, 1];
+const BORDER_WIDTH = 2;
+const PADDING = 8;
+const LINE_GAP = 4;
+// from the mouse, so the cursor doesn't cover it
+const OFFSET = 16;
+
+export interface TooltipLine {
+	text: string;
+	color: Color;
+}
+
+// its name, the item's lore from its json, then what the server's scripts said about this stack
+export function item_tooltip(item: ItemStack): TooltipLine[] {
+	const lines: TooltipLine[] = [{ text: display_name(item.type_id), color: NAME_COLOR }];
+	const static_lore = EverythingRegistry.get<ItemRegistry>("items", item.type_id)?.lore;
+	for (const lore of [static_lore, item.lore]) {
+		for (const text of lore?.split("\n") ?? []) {
+			lines.push({ text, color: LORE_COLOR });
+		}
+	}
+	return lines;
+}
+
+// below and right of the mouse, moved back inside the window when it would go past its edge
+export function draw_tooltip(lines: TooltipLine[], mouse_x: number, mouse_y: number) {
+	const line_height = TEXT_HEIGHT * TEXT_SCALE;
+	const width = Math.max(...lines.map((line) => measure_text(line.text, TEXT_SCALE))) + PADDING * 2;
+	const height = lines.length * line_height + (lines.length - 1) * LINE_GAP + PADDING * 2;
+
+	let x = mouse_x + OFFSET;
+	let y = mouse_y + OFFSET;
+	if (x + width > canvas.width) x = mouse_x - OFFSET - width;
+	if (y + height > canvas.height) y = canvas.height - height;
+	x = Math.max(0, x);
+	y = Math.max(0, y);
+
+	draw_rect(x, y, width, height, BORDER);
+	draw_rect(x + BORDER_WIDTH, y + BORDER_WIDTH, width - BORDER_WIDTH * 2, height - BORDER_WIDTH * 2, BACKGROUND);
+	lines.forEach((line, i) => {
+		draw_text(line.text, x + PADDING, y + PADDING + i * (line_height + LINE_GAP), TEXT_SCALE, line.color);
+	});
+}