MudEngine Part 6: Multiplayer

Step 9 / 12

CSS Additions

The multiplayer UI needs additional styles for the game layout, player indicators, sidebar, and name screen.

Append these styles to assets/main.css. The dioxus-components (Button, Card, Input, Separator) bring their own scoped styles from Part 5 — no extra CSS needed for them.

mud-engine/assets/main.css

/* ── Game Layout ── */
.game-layout {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}

.grid-area {
    flex: 1;
    min-width: 0;
}

/* ── Player indicator in grid cells ── */
.player-indicator {
    font-size: 11px;
    color: #a0d0ff;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-indicator::before {
    content: "◆ ";
    color: #60a0ff;
}

/* ── Player list sidebar ── */
.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #12122a;
    border-radius: 8px;
    padding: 12px;
}

.sidebar h2 {
    font-size: 14px;
    margin: 0 0 10px 0;
    color: #a0a0c0;
}

.player-entry {
    padding: 6px 8px;
    margin-bottom: 4px;
    border-radius: 4px;
    background: #1a1a30;
    font-size: 13px;
}

.player-entry.me {
    background: #1a3050;
    border: 1px solid #3b82f6;
}

.player-name {
    color: #d0d0e0;
    display: block;
}

.player-room {
    color: #6b6b8a;
    font-size: 11px;
    display: block;
}

/* ── Name Screen ── */
.name-screen {
    text-align: center;
    padding: 80px 20px;
}

.name-screen h1 {
    font-size: 36px;
    margin-bottom: 10px;
}

.subtitle {
    color: #8a8aaa;
    margin-bottom: 24px;
    font-size: 15px;
}

/* ── Direction pad ── */
.direction-pad Button {
    min-width: 100px;
}

Step 9 / 12

◀ Prev Next ▶