Skip to content
Playupi

Frontend

Layout Structure

The frontend uses a consistent layout across all pages: a fixed header, a category sidebar (desktop) or hamburger menu (mobile), the main content area, and a footer.

+----------------------------------------------------------+
|  [Logo]         [Search Bar]              [Login*]        |  <- Header
+--------+-------------------------------------------------+
|        |                                                  |
| [Cat]  |              Main Content                        |
| [Cat]  |              (grid / game player)                |
| [Cat]  |                                                  |
| [Cat]  |                                                  |
|        |                                                  |
+--------+-------------------------------------------------+
|  [Lang]  [Terms] [Privacy] [FAQ] [Contact] [Social]      |  <- Footer
+----------------------------------------------------------+


* Login: future feature, not in MVP

Common Elements

ElementBehavior
LogoClick returns to Home
Search barSearches across games, categories, and authors. Results are grouped by type
LoginFuture feature. Placeholder zone for account login

The header is fixed (sticky) on all pages.

Category Sidebar

Desktop

  • Positioned as a left column
  • Default state: collapsed (icons only)
  • On hover: expands to show icon + category name
  • Categories use the same card style as game cards (square icon, title on hover)

Mobile

  • No sidebar column
  • Categories accessible via a hamburger menu in the header
  • Hamburger opens a full-height overlay or drawer with category list
ElementDetails
Language selectorDropdown to switch site language
Legal linksTerms of Use, Privacy Policy, FAQ, Contact
Social iconsInstagram, YouTube, TikTok (expandable)

Components

Game Card

The primary UI element used across all game lists.

PropertyDetail
ShapeSquare or fixed-ratio rectangle
Default stateGame thumbnail/icon only
Hover stateTitle appears at the bottom inside the card, overlaid on the thumbnail
Tag badgeSmall icon in the top-left corner for tags (New, Trendy)
ClickNavigates to the game detail page

Used in: Home grid, category grid, author grid, recommendations on game page.

Category Card

Used in the sidebar and category-related navigation.

PropertyDetail
StyleSame visual style as game cards
ContentCategory icon + name (name visible on hover or expand)

Pages

Home Page

  • Full-width grid of game cards
  • Games sorted by rank (global ranking)
  • Pagination or infinite scroll (load more)
  • 10% of slots reserved for exploration games (see Exploration & Ranking)

Category Page

  • Same grid layout as Home
  • Category name displayed as page title
  • Games filtered by the selected category, then sorted by rank
  • Pagination or load more
  • 10% exploration slot allocation

Author Page

  • Same grid layout as Home/Category
  • Author name displayed as page title
  • Shows all games from a single author, sorted by rank
  • Pagination or load more
  • No exploration slots on author pages

Accessible from:

  • Search bar (author search)
  • Author name link on a game detail page

Game Detail Page

The game page has two main zones: the player area (top) and the game info section (below).

Player Area

+----------------------------------------------+-----------+
|                                               | Rec Game  |
|                                               | Rec Game  |
|              Game iframe / Canvas             | Rec Game  |
|                                               | Rec Game  |
|                                               | Rec Game  |
+----------------------------------------------+-----------+
| [icon] Game Title  |  Author  | [FS]         | Rec Game  |
+----------------------------------------------+-----------+
|  Rec Game  |  Rec Game  |  Rec Game  |  Rec Game  | ...  |
+--------------------------------------------------------------+
|  Rec Cat   |  Rec Cat   |  Rec Cat   |  Rec Cat   |          |
+--------------------------------------------------------------+

Player footer (below the iframe):

  • Game icon (square)
  • Game title
  • Author name (clickable, links to author page)
  • Like / dislike buttons
  • Fullscreen button

Recommendations:

  • Right side of the iframe: recommended game cards (vertical stack)
  • Below the iframe: recommended game cards (horizontal row)
  • Last row: recommended category cards

Recommended game lists include the 10% exploration slot allocation.

Game Info Section

ElementDetail
IconLarge square game icon
TitleGame name
AuthorClickable, links to author page
RatingFuture: star rating + vote count
DescriptionFull game description
InstructionsHow to play
More by this authorGrid of other games by the same author, sorted by rank (if any exist)

Responsive Behavior

Desktop

  • Sidebar visible (collapsed by default, expand on hover)
  • Game iframe plays inline with auto-play behavior (loads automatically when visiting the page)
  • Grid adapts column count based on viewport width

Mobile

  • No sidebar; categories in hamburger menu
  • Game iframe is fullscreen when playing
  • No auto-play: user must tap a Play button to launch the game
  • Game card grid: 2 columns minimum
  • Player footer elements stack or collapse as needed
BreakpointLayout
< 640pxMobile: 2-column grid, hamburger menu, fullscreen game
640px - 1024pxTablet: 3-4 column grid, collapsible sidebar
> 1024pxDesktop: 4-6 column grid, sidebar with hover expand

Loading States

Every data-dependent view shows a skeleton placeholder while loading. Skeleton elements match the shape and size of the content they replace.

ViewSkeleton
Game gridGrid of placeholder cards (gray rectangles with rounded corners, no text). Same column count as the loaded state. Show 12 skeletons on first load
Game detail pagePlaceholder for iframe area (16:9 gray box), player footer bar with muted rectangles, recommendation placeholders
Search results3 placeholder rows per result type (games, categories, authors)
SidebarCategory icon placeholders (circles or rounded squares)
Metrics (admin)Placeholder cards with pulsing animation for each metric value

Skeletons use a subtle pulse animation (opacity: 0.4 → 0.7, 1.5s loop) on var(--bg-surface-2).

Error States

ScenarioDisplay
Game list fails to load”Something went wrong. Try refreshing.” with a retry button. No empty grid
Game iframe fails to loadAfter 15s timeout: “This game couldn’t be loaded. Try again or play something else.” with retry + back to home buttons
Search returns no results”No results for ‘{query}’. Try a different search.” No skeleton, show immediately
Network offlineToast notification: “You’re offline. Some features may not work.”
Rate limited (429)“Too many requests. Please wait a moment.”
404 — Game not found”This game doesn’t exist or was removed.” with a link back to Home
404 — Category not found”This category doesn’t exist.” with a link back to Home

Error messages are always paired with an actionable next step (retry, go home, search).

404 Page

A custom 404 page for unmatched routes:

  • Large “404” display text
  • “Page not found” subtitle
  • Search bar (same as header) to help users find what they were looking for
  • “Back to Home” button
  • Recommended games grid (top 6 ranked games) as a fallback content area

SEO

See SEO for the full SEO strategy: meta tags, structured data, Open Graph, sitemap, robots.txt, Core Web Vitals, internal linking, and image optimization.

Interactions

InteractionBehavior
Game card hoverTitle fades in at bottom of card
Sidebar hover (desktop)Sidebar expands from icon-only to icon + label
Like / dislikeToggle state. One active at a time. Persisted per user
FullscreenExpands iframe to fullscreen via Fullscreen API
SearchDebounced input, results grouped by type (games, categories, authors)
PaginationLoad more button or infinite scroll, fetching next page of ranked results