# Framed Tracker Framed Tracker est une application web pour suivre et analyser vos scores aux jeux [Framed](https://framed.wtf/) (Daily Frame et One Frame). ## Table des matières - [Architecture](#architecture) - [Installation](#installation) - [API Routes](#api-routes) - [Authentication](#authentication) - [Database Schema](#database-schema) - [Themes](#themes) - [Development](#development) ## Architecture L'application est construite avec une architecture client-serveur: - **Frontend**: React.js avec Tailwind CSS pour les styles - **Backend**: Node.js avec Express.js - **Base de données**: SQLite ### Structure du projet ``` framed-tracker/ ├── client/ # Frontend React │ ├── public/ # Fichiers statiques │ └── src/ # Code source React │ ├── App.jsx # Composant principal React │ ├── api.js # Fonctions d'API │ └── index.css # Styles CSS ├── server/ # Backend Express │ ├── server.js # Point d'entrée du serveur │ ├── schema.sql # Schéma de la base de données │ ├── scripts/ # Scripts utilitaires │ │ ├── init-db.js # Initialisation de la BD │ │ └── backup-db.js # Sauvegarde de la BD │ └── public/ # Build du frontend (production) ├── data/ # Stockage des données │ └── framed.db # Base de données SQLite ├── backups/ # Sauvegardes de la BD ├── nginx/ # Configuration NGINX (production) └── docker-compose.yml # Configuration Docker ``` ## Installation ### Avec Docker (recommandé) 1. Cloner le dépôt: ``` git clone https://github.com/votre-username/framed-tracker.git cd framed-tracker ``` 2. Lancer en mode développement: ``` docker-compose up ``` 3. Créer une version de production: ``` docker-compose --profile build up framed-client-build docker-compose --profile prod up -d ``` ### Installation manuelle 1. Installer les dépendances du serveur: ``` cd server npm install ``` 2. Installer les dépendances du client: ``` cd client npm install ``` 3. Lancer le serveur: ``` cd server npm start ``` 4. Lancer le client (dans un autre terminal): ``` cd client npm start ``` ## API Routes ### Authentification - `POST /api/register` - Inscription utilisateur - Body: `{ username, password }` - Response: `{ message, userId, username }` - `POST /api/login` - Connexion utilisateur - Body: `{ username, password }` - Response: `{ userId, username }` ### Scores - `POST /api/scores` - Ajouter un score - Body: `{ userId, date, gameType, gameNumber, score }` - Response: Objet score créé - `GET /api/scores/user/:userId` - Récupérer les scores d'un utilisateur - Response: Liste des scores - `DELETE /api/scores/:id?userId=` - Supprimer un score - Response: `{ message }` ### Statistiques et classement - `GET /api/stats/:userId` - Statistiques d'un utilisateur - Response: Statistiques par type de jeu - `GET /api/leaderboard?gameType=` - Classement global - Query Params: `gameType` (all, daily, one) - Response: Liste des joueurs avec leurs statistiques - `GET /api/scores?gameType=` - Tous les scores (admin) - Query Params: `gameType` (all, daily, one) - Response: Liste complète des scores ## Authentication L'authentification est gérée sans JWT ou sessions côté serveur. À la place: 1. Un utilisateur s'inscrit avec un nom d'utilisateur et un mot de passe 2. Le mot de passe est hashé avec bcrypt avant d'être stocké en base de données 3. Lors de la connexion, le mot de passe fourni est comparé avec le hash stocké 4. Les données utilisateur (userId, username) sont stockées dans le localStorage 5. Ces données sont incluses dans les requêtes API nécessitant une authentification Cette approche est simple mais convient à cette application. Une authentification plus robuste avec JWT serait préférable pour une application en production à plus grande échelle. ### Sécurité - Les mots de passe sont hashés avec bcrypt (10 rounds de salage) - Validation des entrées pour prévenir les injections SQL - Vérification des autorisations pour la manipulation des scores - CORS configuré pour restreindre les origines ## Database Schema La base de données SQLite contient deux tables principales: ### Table `users` | Colonne | Type | Description | |-------------|-----------|--------------------------------| | id | INTEGER | Clé primaire auto-incrémentée | | username | TEXT | Nom d'utilisateur (unique) | | password | TEXT | Mot de passe hashé | | created_at | TIMESTAMP | Date de création du compte | ### Table `scores` | Colonne | Type | Description | |-------------|-----------|----------------------------------| | id | INTEGER | Clé primaire auto-incrémentée | | user_id | INTEGER | ID de l'utilisateur (clé étrangère) | | date | TEXT | Date du jeu (YYYY-MM-DD) | | game_type | TEXT | Type de jeu ("daily" ou "one") | | game_number | INTEGER | Numéro du jeu | | score | INTEGER | Score (1-6) | | created_at | TIMESTAMP | Date d'enregistrement du score | ### Index - `idx_users_username`: Index unique sur le nom d'utilisateur - `idx_scores_user_id`: Index sur les scores par utilisateur - `idx_scores_game_type`: Index sur les scores par type de jeu - `idx_scores_user_game_type`: Index composite pour les requêtes fréquentes ### Vues - `user_stats`: Statistiques globales par utilisateur - `user_game_type_stats`: Statistiques par type de jeu et utilisateur - `leaderboard`: Classement général - `leaderboard_by_type`: Classement par type de jeu ## Themes L'application propose plusieurs thèmes visuels: 1. **Standard**: Thème clair par défaut 2. **Sombre**: Thème sombre avec fond noir et texte clair 3. **Matrix**: Thème inspiré de Matrix avec texte vert sur fond noir 4. **Matrix Hardcore**: Version extravagante du thème Matrix avec: - Animation de "pluie de code" en arrière-plan - Effets de glitch sur les titres - Effets d'animation sur les boutons - Effet de scan ligne - Scores colorés (vert pour bon, jaune pour moyen, rouge pour mauvais) Les thèmes sont stockés dans localStorage et s'appliquent à toute l'interface. ## Development ### Technologies utilisées - **Frontend**: - React.js - Tailwind CSS - Axios - HTML5 Canvas (pour les animations Matrix) - **Backend**: - Node.js - Express.js - SQLite3 - bcrypt (hachage des mots de passe) - **DevOps**: - Docker & Docker Compose - NGINX (en production) ### Scripts utilitaires - **Initialisation de la base de données**: ``` node server/scripts/init-db.js ``` - **Sauvegarde de la base de données**: ``` node server/scripts/backup-db.js ``` ### Environnement de production En production, l'application est servie par NGINX qui: 1. Redirige les requêtes API vers le backend Node.js 2. Sert les fichiers statiques du frontend 3. Gère le caching et l'optimisation La configuration Docker permet une isolation complète et une facilité de déploiement.