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

npm run dev

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

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

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.

cp .env.example .env

Exemple :

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 :

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

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

.
├── 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/
            ├── _tokens.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.