Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ImLukzy/ChefDash/llms.txt

Use this file to discover all available pages before exploring further.

HomeView is the first screen players see when ChefDash launches. It combines an arcade-style status bar at the top with a bold retro logo in the centre and a large call-to-action button at the bottom. Every element is built on a dark arcadeDark background with a subtle radial orange glow, keeping the visual language consistent with the rest of the game. The screen becomes active whenever gameState.activeTab is set to "house.fill", which is also the default value on first launch.

​
UI Zones

HomeView is divided into three distinct vertical regions that stack inside a full-screen VStack.

Top HUD Bar

A horizontal strip containing the player profile chip on the left and a floating gear button on the right. The chip displays gameState.playerAvatar and gameState.playerName (uppercased) alongside the current 🪙 coins balance rendered in neonYellow.

Central Logo Area

A layered ZStack of a 🍔 emoji (90 pt) and a 🏃‍♂️ emoji (65 pt) with an offset overlap creates the game mascot. Below it sit the CHEF DASH wordmark (42 pt black rounded) and a CRAZY KITCHEN ARCADE badge in orangeAccent.

Bottom Start Button

A full-width rounded rectangle button labelled ¡INICIAR PARTIDA! with a play.fill icon. It sits 90 pt above the bottom edge so it clears the floating CustomTabBar. Tapping it fires haptics and transitions to the map.

​
Color Palette

All three colours are defined as private constants directly inside HomeView and shared across the other main screens for visual coherence.
ConstantRGB ValuesUsage
arcadeDark(0.08, 0.08, 0.10)Full-screen background
orangeAccent(0.96, 0.44, 0.13)Buttons, badge text, glow shadow
neonYellow(0.98, 0.82, 0.20)Coin balance in HUD chip
All tab transitions use the same spring animation parameters throughout HomeView. 
withAnimation(.spring(response: 0.4, dampingFraction: 0.75)) {
    gameState.activeTab = "<destination>"
}
1

Profile chip → Profile screen

Tapping the player avatar/name chip in the top-left calls gameState.activeTab = "profile" with the spring animation. This is a shortcut to ProfileView without using the tab bar.
2

Gear icon → Settings screen

Tapping the gearshape.fill button in the top-right calls gameState.activeTab = "settings". The gear icon is 38×38 pt, uses a translucent white background, and is clipped to a Circle.
3

Start button → Map screen

The main call-to-action fires .heavy haptic feedback (when isHapticsEnabled is true) before transitioning to gameState.activeTab = "map.fill".

​
Start Button — Source Code

The complete action block for the Start Game button, as written in HomeView.swift: 
Button(action: {
    if gameState.isHapticsEnabled {
        UIImpactFeedbackGenerator(style: .heavy).impactOccurred()
    }
    withAnimation(.spring(response: 0.4, dampingFraction: 0.75)) {
        gameState.activeTab = "map.fill"
    }
}) {
    HStack(spacing: 12) {
        Text("¡INICIAR PARTIDA!")
            .font(.system(size: 16, weight: .black, design: .rounded))
            .tracking(1)
        Image(systemName: "play.fill")
            .font(.system(size: 14))
    }
    .foregroundColor(.white)
    .frame(maxWidth: .infinity, minHeight: 60)
    .background(
        LinearGradient(
            colors: [orangeAccent, orangeAccent.opacity(0.85)],
            startPoint: .top,
            endPoint: .bottom
        )
    )
    .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
    .shadow(color: orangeAccent.opacity(0.4), radius: 12, y: 6)
}
.padding(.horizontal, 32)
.padding(.bottom, 90)
The .padding(.bottom, 90) is intentional — it lifts the button above the floating CustomTabBar which overlays the bottom of the screen. Removing it causes the button to be visually obscured by the tab bar.

Build docs developers (and LLMs) love

Get started for freeTalk to us