# Sokko G

Webapp React locale pour préparer et accompagner des sessions gaming sur second écran.

Sokko G propose des toolboxes modulaires stockées dans le navigateur, ainsi que des pages de guides de jeu maintenues dans le dépôt. Aucune donnée utilisateur n’est envoyée côté serveur.

## Fonctionnalités

- Toolboxes locales stockées dans IndexedDB.
- Outils disponibles : bloc notes, checklist avec quantités, images, annotation d’images, liens, compteurs et calculateur.
- Import/export d’une toolbox.
- Import/export global de toutes les toolboxes.
- Association locale entre une page jeu et une toolbox.
- Panneau latéral redimensionnable sur les pages jeux.
- Suivi d’un budget de stockage recommandé, avec quota navigateur en information.
- Pages de guides de jeu éditables via JSON.
- Listes de jeu exportables vers les checklists.

## Démarrage

```bash
npm run dev
```

Par défaut, le site démarre sur `http://localhost:5173`.

Pour générer la version statique de production :

```bash
npm run build
```

Le build est généré dans `website/dist`.
`npm start` sert cette version statique avec `server.mjs`.

## Configuration

Le serveur et Vite lisent automatiquement un fichier `.env` facultatif à la racine
du projet, avec le parseur natif de Node. Les variables déjà définies dans le
processus sont prioritaires, y compris lorsqu'elles sont vides.

```bash
cp .env.example .env
```

Exemple :

```env
PORT=5173
```

Le fichier `.env` est ignoré par git. Pour changer le port localement, modifier `PORT`.

## Vérifications

Avant un push ou une mise en ligne :

```bash
npm run check
```

Cette commande vérifie la configuration Node/Vite, lance les tests, puis exécute le build React.

Pour inclure les parcours navigateur, lancer `npm run check:full`. Les deux
validations sont exécutées successivement pour éviter la concurrence avec le build.
La suite E2E utilise deux workers par défaut pour limiter la contention lors du
chargement initial des outils par Vite. Le parallélisme reste ajustable avec
`npm run test:e2e -- --workers=4`. Les traces des tests en échec sont conservées
dans `test-results` et consultables depuis le rapport Playwright.

L'application est enveloppée dans `StrictMode` : en développement (y compris les
E2E sur Vite), React rejoue certains rendus et cycles d'effets pour détecter les
effets de bord et les nettoyages manquants. Ces contrôles supplémentaires ne
s'exécutent pas en production. Les règles recommandées React Hooks, dont
`react-hooks/set-state-in-effect`, sont actives dans ESLint.

## Contenu éditable

Les contenus maintenus à la main sont regroupés dans `website/public/data`.

| Fichier | Rôle |
| --- | --- |
| `website/public/data/site.json` | Textes généraux du site : home, about, navigation, sidebar, page toolboxes. |
| `website/public/data/games.json` | Liste des jeux affichés sur `/games` et contenus des cards jeux. |
| `website/public/data/mhwilds/monsters.json` | Données des monstres Monster Hunter Wilds. |
| `website/public/data/mhwilds/endemic_life.json` | Données de la faune Monster Hunter Wilds. |
| `website/public/data/mhwilds/lists/*.json` | Listes de jeu MHWilds copiables ou convertibles en checklist. |
| `website/public/data/mhwilds/lists/index.json` | Index généré automatiquement des listes MHWilds. |
| `website/public/data/mhwilds/i18n/fr.json` | Traductions françaises des données MHWilds. |
| `website/public/data/mhwilds/i18n/en.json` | Traductions anglaises des données MHWilds. |
| `website/public/data/diablo4/affixes_types.json` | Données et filtres des affixes Diablo IV. |
| `website/public/data/toolbox-icons.json` | Manifeste des icônes SVG réutilisables. |

Les images publiques sont dans `website/public/static`.

Les index de listes sont générés automatiquement par :

```bash
npm run lists:index
```

Ce script est lancé avant `npm run dev`, `npm run build` et `npm run check`.

## Pages jeux

Les pages jeux sont dans `website/src/features/games`.

- `website/src/features/games/GamesPage.jsx` : liste des jeux disponibles.
- `website/src/features/games/GameRoute.jsx` : route vers la page du jeu demandé.
- `website/src/features/games/mhwilds/` : vues et composants propres à Monster Hunter Wilds.
- `website/src/features/games/diablo4/` : vues et composants propres à Diablo IV.

Pour ajouter un jeu :

- ajouter son entrée dans `website/public/data/games.json` ;
- créer son dossier dans `website/src/features/games/` si la page nécessite un rendu spécifique ;
- brancher sa route dans `website/src/features/games/GameRoute.jsx`.

## Outils de toolbox

Les outils de toolbox sont déclarés dans `website/src/features/toolboxes/modules/index.jsx`.
Chaque outil possède son propre fichier de composant :

- `website/src/features/toolboxes/modules/NotepadModule.jsx`
- `website/src/features/toolboxes/modules/ChecklistModule.jsx`
- `website/src/features/toolboxes/modules/ImagesModule.jsx`
- `website/src/features/toolboxes/modules/LinksModule.jsx`
- `website/src/features/toolboxes/modules/CountersModule.jsx`
- `website/src/features/toolboxes/modules/CalculatorModule.jsx`
- `website/src/features/toolboxes/modules/ImageAnnotationModule.jsx`

Pour ajouter ou maintenir un outil :

- créer son fichier dans `website/src/features/toolboxes/modules/` ;
- l’ajouter au registre `MODULE_COMPONENTS` dans `website/src/features/toolboxes/modules/index.jsx` ;
- garder les données persistées via le service IndexedDB `website/src/utils/indexedDbStorage.js`.

## Structure

```text
.
├── DESIGN_SYSTEM.md
├── package.json
├── server.mjs
├── vite.config.js
├── tests/
└── website/
    ├── index.html
    ├── public/
    │   ├── data/
    │   └── static/
    └── src/
        ├── main.jsx
        ├── components/
        ├── features/
        │   ├── games/
        │   │   ├── diablo4/
        │   │   └── mhwilds/
        │   └── toolboxes/
        │       └── modules/
        └── styles/
            ├── _base.scss
            ├── _cards.scss
            ├── _diablo4.scss
            ├── _games.scss
            ├── _home.scss
            ├── _icons.scss
            ├── _mixins.scss
            ├── _mhwilds.scss
            ├── _nebula.scss
            ├── _overlays.scss
            ├── _responsive.scss
            ├── _shell.scss
            ├── _tokens.scss
            ├── _toolboxes.scss
            └── main.scss
```

## Stockage local

Les données utilisateur sont stockées dans IndexedDB, dans la base `sokkog`.

Espaces principaux :

- `kv` : registre des toolboxes, associations jeu -> toolbox et réglages locaux.
- `modules` : données de chaque outil, indexées par `{toolboxId}:{moduleId}`.

La barre affichée utilise un budget recommandé de confort pour l’app. Le quota navigateur réel vient de `navigator.storage.estimate()` et peut être beaucoup plus élevé selon l’espace disque disponible. Les images et annotations restent locales et peuvent occuper beaucoup d’espace ; les exports globaux restent recommandés pour sauvegarder les données.