181 lines
4.8 KiB
Markdown
181 lines
4.8 KiB
Markdown
# Initial D Arcade Stage - Site de Classement
|
|
|
|
Un site web moderne et responsive reproduisant l'interface du site officiel Initial D Arcade Stage, créé avec React et TypeScript.
|
|
|
|
## 🏁 Fonctionnalités
|
|
|
|
- **Page d'accueil** : Présentation du jeu avec design inspiré de l'univers Initial D
|
|
- **Page de classement** : Tableau des meilleurs temps avec filtres et onglets
|
|
- **Design responsive** : Interface adaptée à tous les écrans
|
|
- **Animations fluides** : Utilisation de Framer Motion pour les transitions
|
|
- **Thème sombre** : Interface moderne avec couleurs d'Initial D
|
|
- **Navigation intuitive** : Menu de navigation avec indicateurs visuels
|
|
|
|
## 🚗 Technologies Utilisées
|
|
|
|
- **React 18** : Framework JavaScript pour l'interface utilisateur
|
|
- **TypeScript** : Typage statique pour une meilleure maintenabilité
|
|
- **Material-UI (MUI)** : Composants UI modernes et personnalisables
|
|
- **Framer Motion** : Animations et transitions fluides
|
|
- **React Router** : Navigation entre les pages
|
|
- **Emotion** : Styling CSS-in-JS
|
|
|
|
## 🎨 Design
|
|
|
|
Le site reprend l'esthétique du site officiel Initial D avec :
|
|
- Couleurs principales : Orange (#ff6b35) et noir (#0a0a0a)
|
|
- Police Orbitron pour les titres
|
|
- Effets de lueur et animations
|
|
- Interface sombre et moderne
|
|
- Icônes Material Design
|
|
|
|
## 📱 Pages
|
|
|
|
### Page d'Accueil
|
|
- Hero section avec titre animé
|
|
- Section des caractéristiques du jeu
|
|
- Call-to-action vers le classement
|
|
- Design responsive avec animations
|
|
|
|
### Page de Classement
|
|
- Tableau des meilleurs temps
|
|
- Filtres par circuit
|
|
- Onglets pour différents types de classement
|
|
- Statistiques en temps réel
|
|
- Avatars et badges pour les joueurs
|
|
|
|
## 🚀 Installation et Démarrage
|
|
|
|
1. **Cloner le projet**
|
|
```bash
|
|
git clone [url-du-repo]
|
|
cd initiald-ranking
|
|
```
|
|
|
|
2. **Installer les dépendances**
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. **Démarrer le serveur de développement**
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
4. **Ouvrir dans le navigateur**
|
|
```
|
|
http://localhost:3000
|
|
```
|
|
|
|
## 📦 Scripts Disponibles
|
|
|
|
- `npm start` : Démarre le serveur de développement
|
|
- `npm run build` : Construit l'application pour la production
|
|
- `npm test` : Lance les tests
|
|
- `npm run eject` : Éjecte la configuration (irréversible)
|
|
|
|
## 🏗️ Structure du Projet
|
|
|
|
```
|
|
src/
|
|
├── components/ # Composants réutilisables
|
|
│ └── Header.tsx # En-tête avec navigation
|
|
├── pages/ # Pages de l'application
|
|
│ ├── Home.tsx # Page d'accueil
|
|
│ └── Ranking.tsx # Page de classement
|
|
├── types/ # Définitions TypeScript
|
|
│ └── index.ts # Interfaces et types
|
|
├── assets/ # Ressources statiques
|
|
├── App.tsx # Composant principal
|
|
├── index.tsx # Point d'entrée
|
|
└── index.css # Styles globaux
|
|
```
|
|
|
|
## 🎯 Fonctionnalités Principales
|
|
|
|
### Navigation
|
|
- Menu de navigation responsive
|
|
- Indicateurs visuels pour la page active
|
|
- Logo animé avec icône de voiture
|
|
|
|
### Classement
|
|
- Données simulées de joueurs Initial D
|
|
- Filtrage par circuit
|
|
- Onglets pour différents vues
|
|
- Statistiques en temps réel
|
|
|
|
### Design
|
|
- Thème sombre cohérent
|
|
- Animations fluides
|
|
- Effets de survol
|
|
- Typographie optimisée
|
|
|
|
## 🎨 Personnalisation
|
|
|
|
### Couleurs
|
|
Les couleurs principales peuvent être modifiées dans :
|
|
- `src/App.tsx` : Thème Material-UI
|
|
- `src/App.css` : Variables CSS personnalisées
|
|
|
|
### Données
|
|
Les données de classement sont simulées dans :
|
|
- `src/pages/Ranking.tsx` : Tableau `rankingData`
|
|
|
|
### Styles
|
|
Les styles peuvent être personnalisés dans :
|
|
- `src/App.css` : Styles globaux
|
|
- `src/index.css` : Reset CSS et styles de base
|
|
|
|
## 📱 Responsive Design
|
|
|
|
Le site est entièrement responsive avec :
|
|
- Breakpoints Material-UI
|
|
- Grille CSS adaptative
|
|
- Typographie responsive
|
|
- Navigation mobile optimisée
|
|
|
|
## 🔧 Configuration
|
|
|
|
### Variables d'Environnement
|
|
Créer un fichier `.env` pour les variables d'environnement :
|
|
```
|
|
REACT_APP_API_URL=your-api-url
|
|
REACT_APP_VERSION=1.0.0
|
|
```
|
|
|
|
### Build de Production
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
## 🚀 Déploiement
|
|
|
|
Le projet peut être déployé sur :
|
|
- **Netlify** : Drag & drop du dossier `build`
|
|
- **Vercel** : Connexion GitHub automatique
|
|
- **GitHub Pages** : Utilisation de `gh-pages`
|
|
- **Firebase Hosting** : Configuration Firebase
|
|
|
|
## 📄 Licence
|
|
|
|
Ce projet est créé à des fins éducatives et de démonstration. Initial D est une propriété de SEGA.
|
|
|
|
## 🤝 Contribution
|
|
|
|
Les contributions sont les bienvenues ! N'hésitez pas à :
|
|
1. Fork le projet
|
|
2. Créer une branche feature
|
|
3. Commiter vos changements
|
|
4. Pousser vers la branche
|
|
5. Ouvrir une Pull Request
|
|
|
|
## 📞 Support
|
|
|
|
Pour toute question ou problème :
|
|
- Ouvrir une issue sur GitHub
|
|
- Contacter l'équipe de développement
|
|
|
|
---
|
|
|
|
**Initial D Arcade Stage** - Reproduit avec ❤️ en React
|