docs/QUICKSTART.md

🚀 Quick Start Guide - RTS Commander

Pour les utilisateurs

Jouer en ligne

👉 Cliquez ici pour jouer

Aucune installation requise ! Le jeu se lance directement dans votre navigateur.

Contrôles du jeu

Souris

• Clic gauche : Sélectionner une unité
• Clic gauche + Glisser : Sélection multiple (boîte)
• Shift + Clic : Ajouter à la sélection
• Clic droit : Déplacer les unités / Attaquer
• Clic sur minimap : Déplacer la caméra

Clavier

• W/A/S/D ou Flèches : Déplacer la caméra
• Ctrl + A : Sélectionner toutes les unités
• Esc : Annuler l'action en cours

Interface

• Menu gauche : Construire bâtiments et entraîner unités
• Menu droit : File de production et actions rapides
• Boutons +/- : Zoom
• Bouton 🎯 : Réinitialiser la vue

Conseils de démarrage

1. Économie d'abord 💰

   • Construisez une Raffinerie (Refinery)
   • Entraînez des Récolteurs (Harvesters)
   • Collectez les minerais (jaune) et gemmes (violet)

2. Énergie ⚡

   • Construisez des Centrales (Power Plants)
   • Surveillez votre consommation d'énergie

3. Armée ⚔️

   • Caserne (Barracks) → Infanterie
   • Usine (War Factory) → Chars, Artillerie
   • Mélangez les types d'unités

4. Défense 🛡️

   • Placez des Tourelles (Defense Turrets)
   • Gardez des unités près de votre base

---

Pour les développeurs

Installation locale

Prérequis

• Python 3.11+
• pip

Méthode 1 : Script automatique

cd web/
python3 start.py

Méthode 2 : Manuel

cd web/
pip install -r requirements.txt
uvicorn app:app --host 0.0.0.0 --port 7860 --reload

Ouvrez http://localhost:7860 dans votre navigateur.

Tests

cd web/
./test.sh

Build Docker

cd web/
docker build -t rts-game .
docker run -p 7860:7860 rts-game

Structure du projet

web/
├── app.py              # Backend FastAPI
├── static/
│   ├── index.html      # Interface HTML
│   ├── styles.css      # Design CSS
│   └── game.js         # Client JavaScript
├── Dockerfile          # Configuration Docker
├── requirements.txt    # Dépendances Python
└── README.md          # Documentation HuggingFace

Déploiement HuggingFace Spaces

1. Créer un Space

   • Allez sur https://huggingface.co/spaces
   • Cliquez sur "Create new Space"
   • Nom : rts-commander
   • SDK : Docker
   • License : MIT

2. Uploader les fichiers

   • Tous les fichiers du dossier web/
   • Particulièrement important : Dockerfile, README.md

3. Configuration automatique

   • HuggingFace détecte le Dockerfile
   • Build automatique
   • Déploiement en quelques minutes

4. Vérification

   • Le Space s'ouvre automatiquement
   • Vérifiez l'endpoint /health
   • Testez la connexion WebSocket

Variables d'environnement (optionnel)

# .env (si besoin)
HOST=0.0.0.0
PORT=7860
DEBUG=False

Développement

Structure du code

Backend (app.py)

• FastAPI application
• WebSocket manager
• Game state management
• AI system

Frontend

• index.html : Structure UI
• styles.css : Design moderne
• game.js : Logique client

Ajouter une nouvelle unité

1. Backend : Ajouter dans UnitType enum

class UnitType(str, Enum):
    # ...
    NEW_UNIT = "new_unit"

2. Frontend : Ajouter bouton dans index.html

<button class="unit-btn" data-type="new_unit">
    <span class="unit-icon">🆕</span>
    <span class="unit-name">New Unit</span>
    <span class="unit-cost">123</span>
</button>

3. Rendering : Ajouter dans game.js

case 'new_unit':
    // Code de rendu
    break;

Ajouter un nouveau bâtiment

Même process que pour les unités, mais avec BuildingType.

API Reference

WebSocket Endpoint

ws://localhost:7860/ws

REST Endpoints

• GET / : Interface de jeu
• GET /health : Health check

WebSocket Messages

Client → Serveur

// Déplacer unités
ws.send(JSON.stringify({
    type: "move_unit",
    unit_ids: ["uuid1", "uuid2"],
    target: {x: 100, y: 200}
}));

// Construire unité
ws.send(JSON.stringify({
    type: "build_unit",
    building_id: "uuid",
    unit_type: "tank"
}));

// Placer bâtiment
ws.send(JSON.stringify({
    type: "build_building",
    building_type: "barracks",
    position: {x: 240, y: 240},
    player_id: 0
}));

Serveur → Client

{
    type: "state_update",
    state: {
        tick: 1234,
        players: {...},
        units: {...},
        buildings: {...},
        terrain: [...],
        fog_of_war: [...]
    }
}

Performance Tips

1. Canvas rendering

   • Utilisez requestAnimationFrame()
   • Évitez les redessins complets
   • Utilisez les layers

2. WebSocket

   • Envoyez seulement les changements
   • Compressez les données si nécessaire
   • Throttle les mises à jour

3. Game loop

   • 20 ticks/sec est suffisant
   • Interpolation côté client
   • Prediction pour fluidité

Debugging

Backend

# Activer logs détaillés
uvicorn app:app --log-level debug

Frontend

// Dans la console du navigateur
console.log(window.gameClient.gameState);
console.log(window.gameClient.selectedUnits);

WebSocket

// Monitorer les messages
ws.addEventListener('message', (e) => {
    console.log('Received:', JSON.parse(e.data));
});

Troubleshooting

Le jeu ne se charge pas

• Vérifiez la console du navigateur (F12)
• Vérifiez que le serveur est lancé
• Testez /health endpoint

WebSocket se déconnecte

• Vérifiez les logs serveur
• Problème de firewall ?
• Timeout trop court ?

Lag/Performance

• Réduisez le zoom
• Fermez autres onglets
• Vérifiez la connexion réseau

Contributing

Les contributions sont les bienvenues !

1. Fork le projet
2. Créer une branche (git checkout -b feature/AmazingFeature)
3. Commit vos changements (git commit -m 'Add some AmazingFeature')
4. Push vers la branche (git push origin feature/AmazingFeature)
5. Ouvrir une Pull Request

Support

• 📧 Email : support@example.com
• 💬 Discord : [Lien Discord]
• 🐛 Issues : [GitHub Issues]

License

MIT License - voir le fichier LICENSE pour plus de détails.

---

Bon jeu ! 🎮