162 lines
5.6 KiB
Markdown
162 lines
5.6 KiB
Markdown
# 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, 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 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/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`.
|
||
|
||
## 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/ScreenshotsModule.jsx` : outil Images, conservé sous ce nom technique pour le stockage existant.
|
||
- `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 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/
|
||
│ │ ├── 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
|
||
|
||
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.
|