five-on-it / apps/client/src/gui/game-ui
apps/client/src/gui/game-ui
The in-game UI, drawn in the scene with Babylon's GUI on one full-screen texture over the picture: the labels that follow something in the world (the interaction prompt over the player's character, the tag over the car it looks at), the mission panel and a race's readout, the inventory strip and the panels built on slots (a container's, a shop's, a garage's), the phone and the radio wheel (radio-wheel.ts). The game loop owns it (renderer/game.ts): it hands it what to show as it changes and gets the clicks back through GameUiActions; React never sees it. A label is placed on every frame the scene draws (labels.ts); a panel is rebuilt only when what it shows changed (panel.ts). The texture is drawn at the page's own pixel size whatever the engine's scaling, so the type is as crisp as the overlay's.
Input: a panel that takes the mouse (the phone, the strip, a container's, a garage's) is never under a shot or the aim (covers, read by renderer/mouse.ts); a key typed into a field (a keypad's code) is the field's, not the game's (claims, read by renderer/keyboard.ts and the chat's Enter), Enter there presses the screen's first button and Esc gives the keys back. The panels answer the pointer from their own layout (PanelPointing, fed every pointer event of the scene here), so a click is never lost to a panel rebuilt under it; the GUI's own picking keeps a field's caret only. Everything visible is listed for the end-to-end tests with where it is on the page (debug, in window.__poc().gui), the very rectangles a click is answered from, so they click it with real pointer events.