`](#replacement-reference) | A reference to a replacement in the global registry. |
+
+### Global Replacement Registry
+Replacements can be defined globally by including them in `` in the root `
+
+```
+
+
## Examples
### Enabling Blitz Mode
diff --git a/src/components/PlayerComponent.module.css b/src/components/PlayerComponent.module.css
new file mode 100644
index 00000000..e1369fc0
--- /dev/null
+++ b/src/components/PlayerComponent.module.css
@@ -0,0 +1,11 @@
+.PlayerComponent span {
+ margin-right: 0; /* Remove the span padding in tables that comes from the main CSS */
+}
+
+.PlayerComponent--team-color {
+ color: var(--team-color);
+}
+
+.PlayerComponent__rank {
+ color: var(--ifm-color-primary);
+}
diff --git a/src/components/PlayerComponent.tsx b/src/components/PlayerComponent.tsx
new file mode 100644
index 00000000..cd336005
--- /dev/null
+++ b/src/components/PlayerComponent.tsx
@@ -0,0 +1,61 @@
+import clsx from "clsx";
+import styles from "./PlayerComponent.module.css";
+
+export enum PlayerStyle {
+ Plain,
+ SimpleColor,
+ Color,
+ Fancy,
+ Tab,
+ Verbose,
+}
+
+interface PlayerComponentProps {
+ /** The player style to display */
+ style: PlayerStyle;
+ /** Whether to render the component from the view of the server operator */
+ isOp?: boolean;
+ /** The username of the player */
+ username?: string;
+ /** The alternative nickname of the player (shown only if isOp is true) */
+ nickname?: string;
+ /** The flair to display */
+ flair?: JSX.Element;
+ /** The team color of the player */
+ teamColor?: string;
+}
+
+declare module "csstype" {
+ interface Properties {
+ "--team-color"?: string;
+ }
+}
+
+export default function PlayerComponent({
+ style,
+ isOp = false,
+ username = "username",
+ nickname = "nickname",
+ flair = *,
+ teamColor = "var(--ifm-color-info-darkest)",
+}: PlayerComponentProps = {
+ style: PlayerStyle.Color,
+}) {
+ return (= PlayerStyle.SimpleColor && styles["PlayerComponent--team-color"]
+ )} style={{
+ "--team-color": teamColor,
+ }}>
+ {style >= PlayerStyle.Fancy && flair}
+ = PlayerStyle.Fancy && nickname ? "line-through" : undefined,
+ fontWeight: style === PlayerStyle.Tab ? "bold" : undefined,
+ }}
+ title={style >= PlayerStyle.Color && style !== PlayerStyle.Tab ? `Teleport to ${username}` : ""}>
+ {username}
+
+ {isOp && style === PlayerStyle.Verbose && nickname && <> {nickname}}
+
);
+}