MudEngine Part 5: Polished UI with dioxus-components

Step 10 / 11

Update the CSS

The components bring their own scoped styles via CSS modules, but we still need the layout CSS for the grid and the direction pad. Replace the contents of assets/main.css with this simplified version:

mud-engine/assets/main.css

/* ── Global ── */
body {
    margin: 0;
    background: #0d0d1a;
    color: #c0c0d0;
    font-family: 'Courier New', Courier, monospace;
}

/* ── App container ── */
#main {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px;
}

/* ── World Grid ── */
.world-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background: #1a1a30;
    padding: 4px;
    border-radius: 8px;
}

.world-grid .cell {
    padding: 10px;
    text-align: center;
    font-size: 13px;
    border-radius: 4px;
}

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

🎯 What we kept vs removed

We kept the body styling, the app container, and the grid layout — the components library does not provide those.

We removed the .description, .command-input, and .feedback CSS classes because those elements are now handled by the components: Card replaces the description div, Input replaces the command input. The .cell and .cell.active classes are kept — they style our custom RoomCell component.

Step 10 / 11

◀ Prev Next ▶