🎮 Gaming Dashboard

A sleek, dark-themed real-time gaming dashboard built with SvelteKit, TypeScript, and Tailwind CSS. Tracks player stats, match history, live activity, leaderboard rankings, and active session data — all in one responsive interface.

✨ Features

• Stats Grid — Live K/D ratio, win rate, average damage, hours played, headshot %, and MMR with weekly deltas
• Performance Chart — 7-day bar chart with kills / wins / damage tabs and weekly averages
• Recent Matches — Scrollable match history with W/L results, KDA breakdown, map icons, and timestamps
• Leaderboard — Live-ranked player table with MMR, wins, K/D, and current-user highlighting
• Live Activity Feed — Real-time event stream (kills, objectives, level-ups) that auto-updates every 5 seconds
• Friends Panel — Online/offline friend list with in-game status and hover-reveal invite buttons
• Session Card — Active match tracker with a live elapsed timer, score, ping indicator, and damage dealt
• Toast Notifications — Action feedback system (invite sent, top-up confirmed, match found, etc.)
• Collapsible Sidebar — Icon-only or full-label sidebar toggle with Quick Match button
• Reactive State — All components share a central Svelte store; no prop drilling

📁 Project Structure

gaming-dashboard/
├── src/
│   ├── lib/
│   │   ├── components/
│   │   │   ├── dashboard/          # Core dashboard panels
│   │   │   │   ├── StatsGrid.svelte
│   │   │   │   ├── PlayerChart.svelte
│   │   │   │   ├── RecentMatches.svelte
│   │   │   │   ├── Leaderboard.svelte
│   │   │   │   └── LiveActivity.svelte
│   │   │   └── ui/                 # Shared UI components
│   │   │       ├── Sidebar.svelte
│   │   │       ├── Toast.svelte
│   │   │       ├── FriendsPanel.svelte
│   │   │       └── SessionCard.svelte
│   │   ├── stores/
│   │   │   └── index.ts            # Global Svelte stores + helpers
│   │   ├── types.ts                # TypeScript interfaces
│   │   └── utils.ts                # Formatters + mock data generators
│   ├── routes/
│   │   └── +page.svelte            # Main dashboard page
│   ├── app.css                     # Global styles + Tailwind layers
│   └── app.html                    # HTML shell
├── static/                         # Static assets (avatars, game images)
├── package.json
├── svelte.config.js
├── tailwind.config.js
├── vite.config.ts
└── tsconfig.json

🚀 Getting Started

Prerequisites

• Node.js v18 or higher
• npm v9 or higher

Installation

# Clone the repository
git clone https://github.com/your-username/gaming-dashboard.git
cd gaming-dashboard

# Install dependencies
npm install

# Start the development server
npm run dev

Open your browser at http://localhost:5173.

Build for Production

npm run build
npm run preview

🛠️ Tech Stack

🎨 Design System

The dashboard uses a custom dark theme defined in tailwind.config.js and app.css:

• Primary accent: #F5C400 (gold yellow)
• Background scale: dark-900 → dark-400 (#0D0D0D to #333333)
• Display font: Barlow Condensed — used for headings, stat values, and labels
• Body font: DM Sans — used for UI text and descriptions
• Mono font: JetBrains Mono — used for numbers, timestamps, and code-like labels

🔌 Connecting Real Data

All mock data lives in src/lib/utils.ts. To wire in a real backend:

1. Replace mock generators — swap generateMatches(), generateLeaderboard(), etc. with API calls in your +page.svelte load function or a SvelteKit +page.server.ts
2. Live updates — replace the setInterval in LiveActivity.svelte and SessionCard.svelte with a WebSocket connection (e.g. Socket.io or Supabase Realtime)
3. Store updates — push data directly into the Svelte stores (activityFeed, session, leaderboard) and every subscribed component will re-render automatically

// Example: push a real WebSocket event into the activity feed
import { pushActivity } from '$lib/stores';

socket.on('kill_event', (data) => {
  pushActivity({ type: 'kill', message: data.message });
});

📦 Available Scripts

npm run dev        # Start development server with HMR
npm run build      # Build for production
npm run preview    # Preview the production build locally
npm run check      # Run svelte-check for type errors
npm run check:watch  # Run svelte-check in watch mode

🤝 Contributing

Contributions are welcome! To get started:

1. Fork the repository
2. Create a new branch: git checkout -b feature/your-feature-name
3. Make your changes and commit: git commit -m 'Add some feature'
4. Push to the branch: git push origin feature/your-feature-name
5. Open a Pull Request

Please make sure npm run check passes before submitting.

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgements

• UI design inspired by the MGM Gaming Dashboard concept
• Icons provided via emoji for zero-dependency rendering
• Fonts served by Google Fonts