CSS Architecture
Relevant source files
The following files were used as context for generating this wiki page:
The CSS architecture of the RemyMan (Kilo Man) project is built on a hybrid approach that combines global styling, modern utility-first frameworks, and specialized rendering logic. The system leverages Tailwind CSS v4 for standard UI components and layout management, while offloading high-performance game visuals to an HTML5 Canvas-based rendering engine.
This architecture ensures that the application remains responsive and accessible through standard CSS for the user interface (overlays, menus, and forms), while maintaining the performance required for a 2D platformer through procedural drawing techniques within the React component lifecycle.
Sources: architecture_plan.md:6, package.json:20-22
Styling Foundation and Frameworks
The project utilizes Tailwind CSS as its primary styling engine, integrated with PostCSS. The configuration is characterized by its transition to Tailwind v4, which moves towards a CSS-first configuration approach using @theme blocks.
Global Styles and Theme Configuration
The root styling is defined in app/globals.css, which sets up the foundational variables for light and dark modes and configures the standard CSS reset for a full-screen application.
| Variable | Light Mode Default | Dark Mode Default | Description |
|---|---|---|---|
--background | #ffffff | #0a0a0a | Primary background color |
--foreground | #171717 | #ededed | Primary text/content color |
--font-sans | var(--font-geist-sans) | N/A | Sans-serif font variable |
--font-mono | var(--font-geist-mono) | N/A | Monospace font variable |
Sources: app/globals.css:3-17, package.json:16-22
Layout and Application Reset
To ensure the game consumes the entire viewport without scrollbars, the architecture implements a strict reset on the html and body elements.
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
Sources: app/globals.css:26-32
UI Component Architecture
The User Interface (UI) follows a "HUD Overlay" pattern where React components are layered on top of the game canvas using absolute positioning and Tailwind utility classes.
The Overlay Pattern
The UIOverlay.tsx component serves as the primary container for non-gameplay interactive elements. It uses a combination of semi-transparent backgrounds and high-contrast borders to maintain visibility against the dynamic canvas background.
The diagram shows the stacking context where the UIOverlay sits above the GameCanvas to handle user interaction and status displays.
Sources: app/components/Game/GameContainer.tsx:50-65, app/components/Game/UIOverlay.tsx:16-18
UI Styling Constants
The visual identity of the UI is defined by a specific set of Tailwind utility classes applied across components:
- Color Palette: Heavily relies on
yellow-500(Amber) for accents andblack/80for high-opacity backgrounds to create a "retro-tech" aesthetic. - Typography: Uses
font-monofor all instructional and technical data to reinforce the game's theme. - Interactivity: Buttons utilize
transition-colorswith hover states (hover:bg-yellow-400).
Sources: app/components/Game/UIOverlay.tsx:21-44, app/components/Game/UIOverlay.tsx:84-88
Procedural Visuals and "3D-Seeming" Logic
While the UI uses standard CSS, the game world’s "CSS" (visual properties) is managed programmatically via the GameCanvas. This involves translating "style" requirements into Canvas API calls.
The Rendering Pipeline
The architecture defines specific helper functions to handle different visual aspects of the game world, effectively acting as a CSS engine for the Canvas.
The diagram illustrates the sequential rendering process used to simulate depth and style within the HTML5 Canvas.
Sources: app/components/Game/GameCanvas.tsx:139-150, app/components/Game/GameCanvas.tsx:206-218, architecture_plan.md:37-50
Simulated Depth (2.5D)
To achieve the "pretty, 3D-seeming" look specified in the architecture plan, the system uses "top face" rendering for platforms rather than simple flat boxes.
| Element | Styling Technique | Logic/Colors Used |
|---|---|---|
| Platform Top | Horizontal Rect | #fbbf24 (Light Amber) |
| Platform Face | Linear Gradient | #d97706 to #92400e |
| Parallax Sky | Linear Gradient | #0f172a (Dark) to #3b0764 (Purple) |
| Player Shadow | Ellipse Gradient | rgba(0,0,0,0.3) |
Sources: app/components/Game/GameCanvas.tsx:209-218, app/components/Game/GameCanvas.tsx:142-146, app/components/Game/GameCanvas.tsx:227-231
Conclusion
The CSS architecture for this project is a strategic split between Tailwind CSS v4 for structured, responsive UI overlays and Procedural Canvas Rendering for game world aesthetics. This ensures that the application benefits from modern web styling tools for menus and controls while maintaining a cohesive, high-performance visual style for the core platforming experience.