# 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 `localStorage`.
- Outils disponibles : bloc notes, checklist avec quantités, screenshots.
- 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 et contrôle du quota localStorage.
- Pages de guides de jeu éditables via JSON.

## 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 lit automatiquement un fichier `.env` à la racine du projet.

```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.

## 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, 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/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/toolbox-icons.json` | Manifeste des icônes SVG réutilisables. |

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

## 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.

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/ScreenshotsModule.jsx`
- `website/src/features/toolboxes/modules/LinksModule.jsx`
- `website/src/features/toolboxes/modules/CountersModule.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 les helpers de `website/src/main.jsx` tant que le stockage reste en localStorage.

## 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/
        │   │   └── mhwilds/
        │   └── toolboxes/
        │       └── modules/
        └── styles/
            ├── _base.scss
            ├── _cards.scss
            ├── _games.scss
            ├── _home.scss
            ├── _icons.scss
            ├── _mhwilds.scss
            ├── _overlays.scss
            ├── _responsive.scss
            ├── _shell.scss
            ├── _tokens.scss
            ├── _toolboxes.scss
            └── main.scss
```

## Stockage local

Clés principales :

- `sokkog:toolboxes` : registre local des toolboxes.
- `sokkog:game-toolbox-links` : associations locales jeu -> toolbox.
- `sokkog:toolbox:{toolboxId}:module:{moduleId}` : données de chaque outil.
- `sokkog:drawer-width` : largeur du panneau latéral.

Le quota applicatif est contrôlé côté navigateur avant écriture. Les imports globaux simulent l’espace nécessaire avant de modifier les données locales.