Dock terminal lobby

interface/skin.dmf

@@ -137,6 +137,15 @@ window "mapwindow"
 		saved-params = ""
 		text = ""
 		align = left
+	elem "lobby_browser"
+		type = BROWSER
+		pos = 0,0
+		size = 640x480
+		anchor1 = 0,0
+		anchor2 = 100,100
+		is-visible = false
+		background-color = #0b0b0e
+		saved-params = ""
 
 window "info_and_buttons"
 	elem "info_and_buttons"

tgstation.dme

@@ -7245,6 +7245,16 @@
 #include "voidcrew\modules\lich\lich_spells.dm"
 #include "voidcrew\modules\lich\lich_thrall.dm"
 #include "voidcrew\modules\lich\lich_wards.dm"
+#include "voidcrew\modules\lobby_terminal\_lobby_terminal.dm"
+#include "voidcrew\modules\lobby_terminal\lobby_assets.dm"
+#include "voidcrew\modules\lobby_terminal\lobby_bezel.dm"
+#include "voidcrew\modules\lobby_terminal\lobby_character.dm"
+#include "voidcrew\modules\lobby_terminal\lobby_character_prefs.dm"
+#include "voidcrew\modules\lobby_terminal\lobby_character_preview.dm"
+#include "voidcrew\modules\lobby_terminal\lobby_crews.dm"
+#include "voidcrew\modules\lobby_terminal\lobby_housing.dm"
+#include "voidcrew\modules\lobby_terminal\lobby_tgui.dm"
+#include "voidcrew\modules\lobby_terminal\lobby_yard.dm"
 #include "voidcrew\modules\loot\abandoned_crate.dm"
 #include "voidcrew\modules\loot\gene_injectors.dm"
 #include "voidcrew\modules\loot\loot_guns.dm"

tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/Bezel.tsx

@@ -0,0 +1,272 @@
+/**
+ * The terminal's bezel: frame, top strip, deck with the big keys, grille and the tray of
+ * small lobby buttons. Class tree from the art's lobby_terminal.css:
+ *
+ *   .lt-bezel (--s) > .lt-screen, .lt-frame > .lt-strip, .lt-deck > .lt-deck-row >
+ *     .lt-keys > .lt-key..., .lt-grille-slot > .lt-grille, .lt-tray > .lt-sbtn...
+ *
+ * Without the art (static.bezel null) the same tree is drawn by PLACEHOLDER_CSS.
+ */
+import type { ReactNode } from 'react';
+import { resolveAsset } from 'tgui/assets';
+import { useBackend } from 'tgui/backend';
+import { useFocusable } from './nav';
+import type { LobbyData } from './types';
+
+type KeyId = 'join' | 'ready' | 'notready' | 'observe' | 'character' | 'start';
+
+const KEY_LABEL: Record<KeyId, string> = {
+  join: 'JOIN',
+  ready: 'READY',
+  notready: 'READY',
+  observe: 'OBSERVE',
+  character: 'CHARACTER',
+  start: 'START',
+};
+
+function Key(props: {
+  id: KeyId;
+  disabled?: boolean;
+  /** Glows while its screen is open (CHARACTER). */
+  lit?: boolean;
+  title: string;
+  onClick: () => void;
+}) {
+  const { id, disabled, lit, title, onClick } = props;
+  const focus = useFocusable<HTMLButtonElement>(!disabled, {
+    activate: onClick,
+  });
+  return (
+    <button
+      ref={focus.ref}
+      type="button"
+      className={`lt-key lt-key--${id}${disabled ? ' is-disabled' : ''}${lit ? ' is-lit' : ''}${focus.focused ? ' is-focus' : ''}`}
+      disabled={disabled}
+      title={title}
+      onClick={disabled ? undefined : onClick}
+      onMouseEnter={focus.onMouseEnter}
+    >
+      <span className="lt-key-legend">{KEY_LABEL[id]}</span>
+    </button>
+  );
+}
+
+type SmallId = 'wiki' | 'poll' | 'crew_manifest' | 'settings' | 'changelog';
+
+function SmallButton(props: {
+  id: SmallId;
+  title: string;
+  disabled?: boolean;
+  mark?: boolean;
+  onClick: () => void;
+}) {
+  const { id, title, disabled, mark, onClick } = props;
+  const focus = useFocusable<HTMLButtonElement>(!disabled, {
+    activate: onClick,
+  });
+  const state = disabled ? '_disabled' : focus.focused ? '_highlighted' : '';
+  return (
+    <button
+      ref={focus.ref}
+      type="button"
+      className={`lt-sbtn${disabled ? ' is-disabled' : ''}${focus.focused ? ' is-focus' : ''}`}
+      title={title}
+      disabled={disabled}
+      onClick={disabled ? undefined : onClick}
+      onMouseEnter={focus.onMouseEnter}
+    >
+      <img
+        className="lt-sbtn-icon"
+        src={resolveAsset(`lt_${id}${state}.png`)}
+        width={24}
+        height={24}
+        alt=""
+      />
+      {mark ? (
+        <img
+          className="lt-sbtn-mark"
+          src={resolveAsset('lt_new_poll.png')}
+          width={24}
+          height={26}
+          alt=""
+        />
+      ) : null}
+    </button>
+  );
+}
+
+export function Bezel(props: {
+  s: number;
+  children: ReactNode;
+  /** The CHARACTER tab is open: the key glows. */
+  characterLit?: boolean;
+  /** The CHARACTER key: switches to the CHARACTER tab. */
+  onCharacter: () => void;
+}) {
+  const { s, children, characterLit, onCharacter } = props;
+  const { data, act } = useBackend<LobbyData>();
+  const art = !!data.bezel;
+  const preRound = data.phase === 'loading' || data.phase === 'pregame';
+  const ready = !!data.ready;
+  const showReady = preRound || data.phase === 'setup';
+
+  return (
+    <div
+      className={art ? 'lt-bezel' : 'lt-bezel lt-ph'}
+      style={{ ['--s' as string]: s }}
+    >
+      {!art && <style>{PLACEHOLDER_CSS}</style>}
+      <div className="lt-screen">{children}</div>
+      <div className="lt-frame">
+        <div className="lt-strip" />
+      </div>
+      <div className="lt-deck">
+        <div className="lt-deck-row">
+          <div className="lt-keys">
+            {showReady ? (
+              <>
+                <Key
+                  id={ready ? 'ready' : 'notready'}
+                  disabled={!preRound}
+                  title={ready ? 'Ready' : 'Not ready'}
+                  onClick={() => act('ready')}
+                />
+                <span
+                  className={`lt-lamp lt-lamp--${ready ? 'ready' : 'notready'}`}
+                />
+              </>
+            ) : (
+              <Key
+                id="join"
+                disabled={data.phase !== 'playing'}
+                title="Join"
+                onClick={() => act('join')}
+              />
+            )}
+            <Key
+              id="observe"
+              disabled={!data.can_observe}
+              title="Observe"
+              onClick={() => act('observe')}
+            />
+            <Key
+              id="character"
+              disabled={!data.prefs_ready}
+              lit={characterLit}
+              title="Character"
+              onClick={onCharacter}
+            />
+            {data.localhost_admin && preRound ? (
+              <Key
+                id="start"
+                title="Start now"
+                onClick={() => act('start_now')}
+              />
+            ) : null}
+          </div>
+          <div className="lt-grille-slot">
+            <div className="lt-grille" />
+          </div>
+          <div className="lt-tray">
+            <SmallButton
+              id="wiki"
+              title="Wiki"
+              disabled={!data.wiki}
+              onClick={() => act('wiki')}
+            />
+            <SmallButton
+              id="poll"
+              title="Polls"
+              disabled={!data.polls}
+              mark={data.polls === 2}
+              onClick={() => act('polls')}
+            />
+            <SmallButton
+              id="crew_manifest"
+              title="Crew manifest"
+              onClick={() => act('manifest')}
+            />
+            <SmallButton
+              id="settings"
+              title="Settings"
+              disabled={!data.prefs_ready}
+              onClick={() => act('settings')}
+            />
+            <SmallButton
+              id="changelog"
+              title="Changelog"
+              onClick={() => act('changelog')}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Keycap legends are baked into the art; only the placeholder (and the START key, which has
+ * no art) shows the text legend.
+ */
+const LEGEND_CSS = `
+.lt-key-legend { display: none; }
+.lt-key--start { width: calc(var(--s) * 52px); height: calc(var(--s) * 34px); position: relative;
+  background: #9aa39f; box-shadow: inset 0 0 0 calc(var(--s) * 2px) #20202a; }
+.lt-key--start .lt-key-legend, .lt-ph .lt-key-legend { display: block; position: absolute;
+  left: calc(var(--s) * 6px); right: calc(var(--s) * 6px); top: calc(var(--s) * 9px); height: calc(var(--s) * 13px);
+  background: #36373a; color: #7effbf; font-family: 'VCR', monospace; font-size: calc(var(--s) * 9px);
+  line-height: calc(var(--s) * 13px); text-align: center; letter-spacing: calc(var(--s) * 1px); }
+.lt-key--start.is-focus .lt-key-legend { color: #ffc41f; }
+.lt-key-legend { pointer-events: none; }
+.lt-key.is-lit { position: relative; }
+.lt-key.is-lit::after { content: ''; position: absolute; pointer-events: none;
+  left: calc(var(--s) * 9px); top: calc(var(--s) * 5px); width: calc(var(--s) * 77px); height: calc(var(--s) * 15px);
+  background: rgba(126,255,191,.16); mix-blend-mode: screen;
+  box-shadow: 0 0 calc(var(--s) * 6px) rgba(126,255,191,.55), inset 0 0 calc(var(--s) * 3px) rgba(126,255,191,.5); }
+`;
+
+export const BEZEL_EXTRA_CSS = LEGEND_CSS;
+
+/** Stand-in for the art: the same layout in flat lobby colours. */
+const PLACEHOLDER_CSS = `
+.lt-ph.lt-bezel { --s: 1; position: absolute; inset: 0; overflow: hidden; background: #9aa39f; user-select: none; }
+.lt-ph .lt-screen { position: absolute; top: calc(var(--s) * 15px); left: calc(var(--s) * 13px);
+  right: calc(var(--s) * 13px); bottom: calc(var(--s) * 52px); overflow: hidden; z-index: 1; }
+.lt-ph .lt-frame { position: absolute; top: calc(var(--s) * 12px); left: calc(var(--s) * 10px);
+  right: calc(var(--s) * 10px); bottom: calc(var(--s) * 49px); box-sizing: border-box;
+  border: calc(var(--s) * 3px) solid #51575e; border-bottom-color: #e0e3dc; border-right-color: #e0e3dc;
+  pointer-events: none; z-index: 2; }
+.lt-ph .lt-strip { position: absolute; top: calc(var(--s) * -10px); left: calc(50% - var(--s) * 30px);
+  width: calc(var(--s) * 61px); height: calc(var(--s) * 6px); background: #36373a; }
+.lt-ph .lt-deck { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--s) * 49px); z-index: 2;
+  border-top: calc(var(--s) * 2px) solid #e0e3dc; box-sizing: border-box; }
+.lt-ph .lt-deck-row { position: absolute; top: calc(var(--s) * 6px); left: calc(var(--s) * 30px);
+  right: calc(var(--s) * 29px); display: flex; align-items: flex-start; }
+.lt-ph .lt-keys { display: flex; align-items: flex-start; flex: none; }
+.lt-ph .lt-key { display: block; flex: none; margin: 0; padding: 0; border: 0; outline: 0; position: relative;
+  height: calc(var(--s) * 34px); background: #bec4bf; box-shadow: inset 0 0 0 calc(var(--s) * 2px) #20202a; cursor: pointer; }
+.lt-ph .lt-key + .lt-key { margin-left: calc(var(--s) * 4px); }
+.lt-ph .lt-key--join, .lt-ph .lt-key--ready, .lt-ph .lt-key--notready { width: calc(var(--s) * 68px); }
+.lt-ph .lt-key--observe { width: calc(var(--s) * 84px); }
+.lt-ph .lt-key--character { width: calc(var(--s) * 100px); }
+.lt-ph .lt-key.is-focus { background: #e0e3dc; }
+.lt-ph .lt-key:active { background: #9aa39f; }
+.lt-ph .lt-key.is-disabled { cursor: default; background: #9aa39f; }
+.lt-ph .lt-key.is-disabled .lt-key-legend { color: #33676a; }
+.lt-ph .lt-key--notready .lt-key-legend { color: #ff4f6a; }
+.lt-ph .lt-lamp { flex: none; width: calc(var(--s) * 10px); height: calc(var(--s) * 9px);
+  margin: calc(var(--s) * 11px) calc(var(--s) * 1px) 0 calc(var(--s) * 2px); background: #20202a; }
+.lt-ph .lt-lamp + .lt-key { margin-left: 0; }
+.lt-ph .lt-lamp--ready { background: #7effbf; }
+.lt-ph .lt-lamp--notready { background: #ff4f6a; }
+.lt-ph .lt-grille-slot { flex: 1 1 0; min-width: 0; }
+.lt-ph .lt-tray { flex: none; position: relative; display: flex; margin-top: calc(var(--s) * 1px);
+  padding: calc(var(--s) * 3px); width: calc(var(--s) * 142px); height: calc(var(--s) * 31px);
+  box-sizing: border-box; background: #36373a; }
+.lt-ph .lt-sbtn { position: relative; flex: none; margin: 0; padding: 0; border: 0; background: none;
+  width: calc(var(--s) * 24px); height: calc(var(--s) * 24px); cursor: pointer; }
+.lt-ph .lt-sbtn + .lt-sbtn { margin-left: calc(var(--s) * 4px); }
+.lt-ph .lt-sbtn-icon, .lt-ph .lt-sbtn-mark { position: absolute; left: 0; top: 0;
+  transform: scale(var(--s)); transform-origin: 0 0; pointer-events: none; image-rendering: pixelated; }
+.lt-ph .lt-sbtn-mark { top: calc(var(--s) * -1px); }
+`;