MotionCave Launcher

Desktop launcher với xác thực Guard Service — lấy cảm hứng từ HoYoPlay.

Tech Stack

• Runtime: Electron 34+
• UI: React 19 + TypeScript
• Styling: Tailwind CSS v4
• State: Zustand
• Auth / DB: Firebase Auth + Firestore
• Guard IPC: Node.js Named Pipe (net module)
• Build: electron-vite + electron-builder

Setup

1. Cài đặt dependencies

npm install

2. Cấu hình Firebase

1. Tạo project tại console.firebase.google.com
2. Bật Authentication → Email/Password
3. Bật Firestore Database (chọn region gần nhất)
4. Copy Firebase config từ Project Settings → Your apps → Web app
5. Cập nhật file .env:

   VITE_FIREBASE_API_KEY=...
   VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
   VITE_FIREBASE_PROJECT_ID=your-project-id
   VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
   VITE_FIREBASE_MESSAGING_SENDER_ID=...
   VITE_FIREBASE_APP_ID=...
   

3. Deploy Firestore Security Rules

npm install -g firebase-tools
firebase login
firebase init firestore
firebase deploy --only firestore:rules

4. Deploy Cloud Function (auto-create profile)

firebase init functions
# Copy functions/index.ts to your functions/src/index.ts
npm install firebase-admin firebase-functions  # inside functions/
firebase deploy --only functions

5. Set admin đầu tiên

Sau khi đăng ký, vào Firebase Console → Firestore → profiles/{uid} → Sửa field role thành "admin".

6. Chạy development

npm run dev

7. Build Windows installer

npm run build:win

Cấu trúc project

src/
├── main/          # Electron main process
│   ├── index.ts        # App lifecycle
│   ├── guard.ts        # Named Pipe IPC guard service
│   ├── tray.ts         # System tray
│   ├── ipc-handlers.ts # IPC channels
│   └── auto-updater.ts # electron-updater
├── preload/       # contextBridge API
└── renderer/      # React app
    └── src/
        ├── lib/        # firebase.ts, types.ts, constants.ts
        ├── stores/     # Zustand stores (auth, app)
        ├── components/ # UI components
        └── pages/      # Route pages
functions/
└── index.ts       # Cloud Function: auto-create profile on signup
firestore.rules    # Firestore security rules
DESIGN.md          # Design system tokens

Guard Service Protocol

Ứng dụng chính kết nối Named Pipe để xác thực:

Launcher start → Named Pipe mở tại \\.\pipe\motioncave-guard
App main kết nối → gửi handshake
Guard xác thực → trả về auth_ok / auth_denied
App main gửi heartbeat mỗi 5 giây
Guard miss 15 giây → revoke session

Design System

Xem DESIGN.md — Flat dark, Zinc palette, Cyan accent, Geist font. Nghiêm cấm: 3D, gradient, shadow lớn.