Skip to content

User interface

Every screen element in Applejack, wireframed. This page covers three separate systems:

  • The HUD — always on screen during play, in the four corners.
  • The player menu — press your menu key (default ` / backquote) to open it, with a tab per topic.
  • Admin and dev tools — only visible to server staff, on their own keybinds.

The wireframes below are plain text, not screenshots — Applejack is still pre-alpha and hasn't run in a live client yet (see ROADMAP.md § Verification debt), so this page shows the real, implemented layout of every panel rather than a mockup of one that doesn't exist yet. Colors and spacing follow Architecture/23_UI_DESIGN_SYSTEM.md — a dark background with a blue accent color for anything clickable.


1. The HUD

Four elements, one per screen corner, always visible while you're playing:

┌──────────────────────────────────────────────────────────────────┐
│  $1,240                     Server bulletin text here      Hunger: 72/100
│  (Money, top-left)          (Bulletin, top-center,          Rest: 55/100
│                               only when staff set one)      (Needs, top-right)
│
│
│                          (your view of the world)
│
│
│  ┌───────────────┬───────────────┬───────────────┐
│  │ Bandage   x3   │ Radio     x1  │ Water     x2  │
│  └───────────────┴───────────────┴───────────────┘
│  (Inventory, bottom-left)
└──────────────────────────────────────────────────────────────────┘

Money

┌───────────┐
│  $1,240   │
└───────────┘
Top-left. Just your current balance. Updates the moment it changes — you never need to open a menu to check it.

Needs

┌────────────────────┐
│ Hunger: 72/100      │
│ Rest: 55/100        │
└────────────────────┘
Top-right. One line per need this server has configured, each shown as value/max. No bar graphics yet — just numbers.

Bulletin

┌──────────────────────────────────────┐
│  Patrol shift starts in 10 minutes    │
└──────────────────────────────────────┘
Top-center. Only appears when a staff member has set one — invisible the rest of the time.

Inventory (HUD)

┌───────────────┬───────────────┬───────────────┐
│ Bandage   x3   │ Radio     x1  │ Water     x2  │
└───────────────┴───────────────┴───────────────┘
Bottom-left. One tile per stack of items you're carrying: name and count. The same panel also appears as a full tab in the player menu (§2.2) — checking your bag mid-interaction doesn't require opening the whole menu.


2. The player menu

Press your menu key (` / backquote by default, rebindable in your input settings) to open a full-screen menu with a row of icons down the left side and one topic per icon:

┌────┬─────────────────────────────────────────────────┐
│ 👤 │                                                   │
│ 🎒 │                                                   │
│ ⚖  │                content for the selected           │
│ ℹ  │                tab goes here                      │
│ ❓ │                                                   │
│ 📜 │                                                   │
│ 👥 │                                                   │
│    │                                                   │
│ ✕  │                                                   │
└────┴─────────────────────────────────────────────────┘
  ↑
 icon rail: Character, Inventory, Laws, Info, Help,
 Changelog, Credits, then Close at the bottom

Only one tab's content is loaded at a time — switching tabs swaps what's on the right, it doesn't keep every tab running in the background.

2.1 Character

┌────┬─────────────────────────────────────────────────┐
│ 👤 │  Rosa Ibarra                                      │
│    │  ┌─────────────────┐  ┌─────────────────┐        │
│    │  │ Details          │  │ Gender    Change│        │
│    │  │ (your blurb)     │  │ Female          │        │
│    │  └─────────────────┘  └─────────────────┘        │
│    │  FACTIONS                                         │
│    │  ┌───────────────────────────────────────────┐   │
│    │  │ Ashford Police Department        [Joined]  │   │
│    │  ├───────────────────────────────────────────┤   │
│    │  │ Civilian                         [Become]  │   │
│    │  ├───────────────────────────────────────────┤   │
│    │  │ Riverside Cartel                 [Become]  │   │
│    │  └───────────────────────────────────────────┘   │
└────┴─────────────────────────────────────────────────┘
Your name, an editable details blurb, an editable gender, and every job you're eligible for, grouped by faction. Become joins a job on the spot; a full or already-joined job shows a label instead of a button. Player counts show as (current/max) where a job has a cap.

2.2 Inventory

┌────┬─────────────────────────────────────────────────┐
│ 🎒 │  Space used: 6 / 20                               │
│    │  ┌────────┬────────┬────────┬────────┬────────┐ │
│    │  │Bandage │ Radio  │ Water  │        │        │ │
│    │  │  x3    │  x1    │  x2    │        │        │ │
│    │  └────────┴────────┴────────┴────────┴────────┘ │
└────┴─────────────────────────────────────────────────┘
The same panel as the HUD's bottom-left inventory (§1), just larger — a grid of everything you're carrying and how much space you've used.

2.3 Laws

┌────┬─────────────────────────────────────────────────┐
│ ⚖  │  CITY LAWS                                        │
│    │  1  No random deathmatch.                         │
│    │  2  Curfew after 11pm in the industrial district.  │
│    │  3  Firearms must be holstered inside city hall.   │
│    │  ...                                               │
│    │  10 (unset)                                        │
└────┴─────────────────────────────────────────────────┘
The ten laws this server currently has posted. If you hold the law.edit permission, each row becomes an editable text box with a Save button instead of plain text — everyone else sees a read-only list. Edits have a two-minute cooldown between them.

2.4 Info

┌────┬─────────────────────────────────────────────────┐
│ ℹ  │  WELCOME                                          │
│    │  Welcome to Applejack. Semi-serious roleplay --    │
│    │  read the Laws tab before picking a job. Be        │
│    │  respectful.                                       │
│    │                                                    │
│    │  RULES                                             │
│    │  (this server's rules text)                        │
└────┴─────────────────────────────────────────────────┘
A welcome blurb and the server's rules, one after the other. Purely informational — nothing here is clickable.

2.5 Help

┌────┬─────────────────────────────────────────────────┐
│ ❓ │  GENERAL                                          │
│    │  /help [command]   Lists every registered command │
│    │  /team <job>       Joins a job you're eligible for│
│    │  CHARACTER                                        │
│    │  /details <text>   Sets your character's details  │
│    │  /gender <m|f>     Sets your character's gender   │
│    │  LAW                                               │
│    │  /laws             Lists all ten laws              │
│    │  /setlaw <i> <t>   Sets one law (needs law.edit)   │
└────┴─────────────────────────────────────────────────┘
Every command this server has, grouped by category, with its usage and what it does. This list is generated from the server's actual command list — it can't go out of date the way a hand-written help page could.

2.6 Changelog

┌────┬─────────────────────────────────────────────────┐
│ 📜 │  (release notes, most recent first)               │
└────┴─────────────────────────────────────────────────┘
What's changed, release by release. Plain text, written by the server's operators.

2.7 Credits

┌────┬─────────────────────────────────────────────────┐
│ 👥 │  ORIGINAL APPLEJACK                               │
│    │  kuromeku -- original creator of Applejack (Cider)│
│    │  Lexi -- further development                      │
│    │                                                    │
│    │  APPLEJACK -- S&BOX REWRITE                        │
│    │  fobiat -- rewrite and modernisation                │
│    │           (fobiat.github.io)                        │
│    │                                                    │
│    │  ENGINE                                            │
│    │  Built on S&box by Facepunch Studios               │
└────┴─────────────────────────────────────────────────┘
Who made this. The original Garry's Mod gamemode's authors, and the team behind this S&box rewrite.


3. Admin and dev tools

These two panels only open for server staff, and only ever show what your own permissions allow — see Guides/04_SERVER_ADMIN_GUIDE.md if you're setting up a server rather than playing on one.

3.1 Admin panel

┌──────────────────────────────────────────────────────────────────┐
│  ADMIN                                                             │
│  ┌────────────────────────────────────────────────────────────┐  │
│  │ Rosa Ibarra   a13f-92c1   admin.give                        │  │
│  │ [Grant admin.bulletin] [Grant admin.moderate] [Revoke admin.give] [Kick] │
│  ├────────────────────────────────────────────────────────────┤  │
│  │ Dez Okafor    f501-77ee   (none)                             │  │
│  │ [Grant admin.bulletin] [Grant admin.moderate] [Kick]         │  │
│  └────────────────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────────┘
One row per currently-connected character: their name, id, and current permissions, with a Grant/Revoke button per known permission and a Kick button. Opens on its own keybind (admin_panel), gated on the admin.moderate permission.

3.2 Dev menu

┌──────────────────────────────────────────────────────────────────┐
│  ITEMS                                                              │
│  Bandage (item.bandage)                              [Give]        │
│  Radio (item.radio)                                  [Give]        │
│                                                                     │
│  JOBS                                                               │
│  Patrol Officer (job.patrol)                         [Join]        │
│                                                                     │
│  MODULES (BOOT ORDER)                                               │
│  Core, Persistence, Ui, Character, ...                              │
│                                                                     │
│  CONFIGURATION                                                      │
│  Economy: StartingMoney=500, MaxMoney=999999                        │
│                                                                     │
│  RECENT LOG                                                         │
│  [14:02:11] Character joined: Rosa Ibarra                           │
│  [14:03:47] Grant failed: unknown permission                        │
└──────────────────────────────────────────────────────────────────┘
Five sections: every item (with a one-click Give), every job (with a one-click Join), the order modules booted in, every module's loaded configuration, and a tail of the recent server log. Opens on its own keybind (dev_menu), gated on the admin.give permission.


Where this comes from

This page mirrors what's actually implemented in Code/Ui/, Code/Admin/Ui/, Code/Characters/Ui/, Code/Law/Ui/, and Code/Commands/Ui/ — not a proposal. For the underlying design decisions (why these tabs exist, why some legacy menus didn't make it back), see Architecture/24_PLAYER_MENU.md and Architecture/23_UI_DESIGN_SYSTEM.md.