App Layout & Pages
Relevant source files
The following files were used as context for generating this wiki page:
The App Layout and Pages system in Kilo Man establishes the structural foundation of the application using the Next.js App Router architecture. It is designed to support a high-performance, full-screen 2D platformer by managing global styles, font optimization, metadata, and the primary entry point for the game engine.
The scope of this system includes the root HTML structure, the viewport configuration, and the orchestration of the game’s primary components within a single-page application (SPA) model. Sources: architecture_plan.md:1-10, app/layout.tsx:1-35
Root Infrastructure
Application Layout
The application utilizes a single RootLayout component that wraps all pages. This layout is responsible for defining the language attribute, injecting global CSS, and applying the Inter font family across the application. The layout uses the antialiased class to ensure crisp text rendering on high-resolution displays. Sources: app/layout.tsx:11-35
Metadata and SEO
The project defines static metadata within the layout to manage the document title, description, and branding icons.
| Field | Value | Source |
|---|---|---|
| Title | Kilo Man | app/layout.tsx:13 |
| Description | A thrilling platformer game | app/layout.tsx:14 |
| Icon | /KiloLogo.png | app/layout.tsx:16 |
Component Hierarchy & Page Structure
The application follows a hierarchical structure where the root layout provides the global context, the main page provides the container, and the game-specific components handle logic and rendering.
This diagram illustrates the component nesting starting from the Next.js entry point down to the specific game modules. Sources: app/page.tsx:1-9, app/components/Game/GameContainer.tsx:65-79
Main Page Entry Point
The primary entry point of the game is app/page.tsx. It serves as a specialized wrapper that ensures the game occupies the full width and height of the user's screen. By applying the overflow-hidden class, it prevents browser scrollbars from interfering with the game's internal canvas scrolling and camera systems. Sources: app/page.tsx:3-9
Global Styling and Theme
The visual architecture is governed by Tailwind CSS and a global stylesheet that enforces a "dark mode" aesthetic suitable for a space-themed platformer.
Viewport and Body Constraints
To ensure the game loop and canvas rendering function correctly, the global styles strictly enforce a 100% height on the HTML and body elements while disabling external scrolling. Sources: app/globals.css:26-31
Theme Configuration
The project uses CSS variables to define the primary background and foreground colors, which are synchronized with Tailwind's theme engine.
| Variable | Light Mode Value | Dark Mode Value | Source |
|---|---|---|---|
| --background | #ffffff | #0a0a0a | app/globals.css:4, app/globals.css:17 |
| --foreground | #171717 | #ededed | app/globals.css:5, app/globals.css:18 |
Game Orchestration
Within the app/page.tsx, the GameContainer component is initialized. This component acts as the bridge between the static page layout and the dynamic game state.
- State Management: It manages the
gameState(start, playing, won, lost). - UI Synchronization: It renders the
UIOverlayon top of theGameCanvas. - Responsive Scaling: The layout relies on Tailwind classes like
w-screenandh-screento ensure the canvas scales to the available viewport.
Sources: app/components/Game/GameContainer.tsx:10-25, app/page.tsx:5-7
The sequence above describes the initialization flow from the initial browser request through the layout and page to the game's start state. Sources: app/layout.tsx:21-34, app/page.tsx:3-9, app/components/Game/GameContainer.tsx:10-15
Conclusion
The layout and page structure of Kilo Man provide a lightweight but robust foundation for the game engine. By leveraging the Next.js App Router, the project maintains clear separation between global configuration (layout), route entry (page), and game logic (components). This ensures that the platformer can utilize the full viewport while maintaining optimized asset loading and theme consistency.