532 lines
15 KiB
Markdown
532 lines
15 KiB
Markdown
# Inventaire Skins
|
||
|
||
## 1. Définition
|
||
Interface de gestion permettant au joueur de visualiser, trier et équiper les éléments cosmétiques (skins) acquis pour son avatar ou son zoo. Il gère les pièces de skins unitairement.
|
||
|
||
## 2. Fonctions
|
||
* **Stockage :** Centralise tous les skins (têtes, corps, accessoires, décors).
|
||
* **Équipement :** Permet d'appliquer un skin à l'avatar ou de sélectionner un skin par défaut pour les bâtiments.
|
||
* **Visualisation :** Affiche les items possédés et ceux manquants (grisés).
|
||
|
||
## 3. Icone
|
||
* **Représentation :** Coffre ouvert ou Cintre.
|
||
* **Couleur dominante :** Marron (cuir) et Or.
|
||
|
||
## 4. Interactions
|
||
* **Ouverture :** Depuis le menu profil ou la boutique.
|
||
* **Filtrage :** Par catégorie (Chapeaux, T-shirts, Zoo), par thème (Jungle, Espace) ou par rareté.
|
||
* **Sélection :** Clic sur un item pour voir les détails et le bouton "Équiper".
|
||
|
||
## 5. Annexes Techniques
|
||
|
||
### Données (JSON)
|
||
```json
|
||
{
|
||
"inventory_id": "inv_skins_player_123",
|
||
"items": [
|
||
{
|
||
"item_id": "skin_hat_01",
|
||
"acquired_date": "2026-03-01",
|
||
"is_equipped": true
|
||
},
|
||
{
|
||
"item_id": "skin_shirt_05",
|
||
"acquired_date": "2026-03-02",
|
||
"is_equipped": false
|
||
}
|
||
],
|
||
"capacity": "unlimited" // Ou valeur numérique si limite
|
||
}
|
||
```
|
||
|
||
### Règles Métier
|
||
* L'inventaire sépare les skins d'avatar des skins de zoo.
|
||
* Impossible de vendre ou supprimer un skin (sauf si fonctionnalité de recyclage prévue).
|
||
* Mise à jour en temps réel lors d'un achat ou d'un gain.
|
||
|
||
## 6. Annexes UX/UI
|
||
* **Grille :** Affichage des items sous forme de grille scrollable.
|
||
* **Paper Doll :** Prévisualisation de l'avatar au centre ou sur le côté avec les équipements actuels.
|
||
* **Drag & Drop :** (Optionnel) Glisser un item sur la prévisualisation pour l'équiper.
|
||
|
||
|
||
# Annexes UX/UI
|
||
|
||
## 0. Direction Artistique & Vue
|
||
* **Vue** : Isométrique (2.5D).
|
||
* **Style** : Coloré, vivant, détails foisonnants (Réf: IMG_20260303_170253.jpg).
|
||
* **Sprites** : 4 directions.
|
||
* **Interactions** :
|
||
* **Sélection** : Cliquer sur la base de l'élément (ou son sprite principal) pour le sélectionner.
|
||
* **Feedback** : Surbrillance (outline blanc/jaune) au survol de la souris.
|
||
|
||
## Définition
|
||
|
||
| Champ | Valeur |
|
||
|---|---|
|
||
| Concept | Inventaire “Skins” : vue de possession + équipement de cosmétiques (avatar et zoo). |
|
||
| Rôle | Donner un accès rapide à l’équipement, au filtrage, et à la prévisualisation sans étapes inutiles. |
|
||
| Portée | UI profil/boutique ; impact avatar, bâtiments, décorations. |
|
||
| Contrainte | Pas de cache/mémorisation : état “équipé” lu comme source de vérité ; pas d’analytics ; aucune suppression/vente implicite. |
|
||
|
||
## Fonctions (tableau détaillé)
|
||
|
||
| Fonction | Déclencheur | Entrées | Sorties | Règles | Observabilité |
|
||
|---|---|---|---|---|---|
|
||
| Ouvrir inventaire | menu | `player_id` | page/grille | affiche items possédés + grisés | Event `OPEN_SKIN_INVENTORY` |
|
||
| Filtrer | UI | catégorie/thème/rareté | liste filtrée | filtres combinables | Event `FILTER_SKINS` |
|
||
| Trier | UI | critère | liste triée | stable | Event `SORT_SKINS` |
|
||
| Prévisualiser | clic item | `item_id` | preview | paper doll / rendu zoo | Event `PREVIEW_SKIN` |
|
||
| Équiper | clic “Équiper” | `item_id`, slot | `is_equipped=true` | un item équipé par slot | Event `EQUIP_SKIN` |
|
||
| Déséquiper | clic “Retirer” | slot | `is_equipped=false` | revient au skin de base explicite | Event `UNEQUIP_SKIN` |
|
||
| Synchroniser après achat | achat | receipt | inventaire maj | immédiat, sans cache | Event `SKIN_ACQUIRED` |
|
||
|
||
## Icone de base
|
||
|
||
| Élément | Spécification |
|
||
|---|---|
|
||
| Représentation | Cintre / coffre |
|
||
| Couleur dominante | Marron + or |
|
||
| Variantes | `icon_skin_hanger.png`, `icon_skin_chest.png` |
|
||
| États | normal, selected, disabled (non possédé) |
|
||
|
||
## Interactions (tableau détaillé)
|
||
|
||
| Interaction | Type | Préconditions | Étapes UI | Résultat | Erreurs / Messages |
|
||
|---|---|---|---|---|---|
|
||
| Ouvrir | Navigation | - | profil → skins | grille | - |
|
||
| Équiper item | Action | possédé | clic item → équiper | appliqué | `SKIN_NOT_OWNED` |
|
||
| Prévisualiser | Consultation | - | clic item | preview | - |
|
||
| Filtrer | Consultation | - | toggles | liste | - |
|
||
| Drag & drop | Action | option active | drag → drop | équipe | `DROP_INVALID` |
|
||
|
||
## Personnage contextuel (événements & interaction)
|
||
Le module “Inventaire Skins” affiche le **joueur actif** via son avatar (voir `avatar_joueur.md`) comme personnage contextuel.
|
||
|
||
### Affichage
|
||
L’avatar s’affiche lorsque :
|
||
- le module est **actionné** (ouverture inventaire, sélection d’un item, équipement/déséquipement) ;
|
||
- un **événement** lié aux skins survient (acquisition, équipement réussi/échoué).
|
||
|
||
### Déclencheurs (exemples)
|
||
| Event | Condition | Effet UI personnage |
|
||
|---|---|---|
|
||
| `OPEN_SKIN_INVENTORY` | ouverture | avatar/paper doll visible, cohérent avec l’équipement courant |
|
||
| `PREVIEW_SKIN` | clic item | l’avatar adopte la prévisualisation (paper doll) |
|
||
| `EQUIP_SKIN` / `UNEQUIP_SKIN` | action | feedback visuel sur l’avatar + message |
|
||
| `SKIN_ACQUIRED` | achat/gain | bulle “Nouveau skin” + CTA “Équiper” |
|
||
|
||
### Skins & thèmes
|
||
Le module applique `theme.md` et l’équipement de `inventaire_skins.md` sur l’avatar, sans inférer silencieusement un skin “par défaut”.
|
||
|
||
## Annexes Techniques
|
||
|
||
### 1. Données et États (tableau détaillé)
|
||
|
||
| Donnée / État | Type | Exemple | Source | Contraintes |
|
||
|---|---|---|---|---|
|
||
| `inventory_id` | string | `inv_skins_<player_id>` | DB | stable |
|
||
| `items[].item_id` | string | `skin_hat_01` | DB | id unique |
|
||
| `items[].acquired_at` | timestamp | - | DB | UTC |
|
||
| `items[].is_equipped` | boolean | true | DB | par slot |
|
||
| `items[].slot` | string | `HAT` | DB | enum |
|
||
| `items[].theme` | string | `JUNGLE` | config | enum |
|
||
| `items[].rarity` | string | `RARE` | config | enum |
|
||
| `capacity` | string \| int | `unlimited` | config | pas de limite par défaut |
|
||
|
||
#### Caractéristiques Initiales (tableau détaillé)
|
||
|
||
| Caractéristique | Valeur initiale | Unité | Notes |
|
||
|---|---:|---|---|
|
||
| Capacité | illimitée | - | règle existante |
|
||
| Slots avatar | 6 | count | ex: hat, top, bottom, shoes, accessory, back |
|
||
| Slots zoo | 8 | count | ex: sol, clôture, portes, UI, etc. |
|
||
|
||
#### Scores Initiaux (tableau détaillé)
|
||
|
||
| Score | Valeur initiale | Plage | Impact |
|
||
|---|---:|---|---|
|
||
| Skins possédés | 0 | 0..∞ | collection |
|
||
| Skins équipés | 0 | 0..slots | rendu |
|
||
|
||
### 2. Cycles de Vie et Apparition (tableau détaillé)
|
||
|
||
| Phase | Déclencheur | Entrées | Sorties | Invariants |
|
||
|---|---|---|---|---|
|
||
| Acquisition | achat/gain | item_id | inventaire +1 | pas de doublon |
|
||
| Équipement | action | slot | is_equipped | exclusivité slot |
|
||
| Déséquipement | action | slot | base | base explicite |
|
||
|
||
#### Conditions d'Apparition (tableau détaillé)
|
||
|
||
| Condition | Seuil | Opérateur | Résultat |
|
||
|---|---:|---|---|
|
||
| Achat skin | true | est | item ajouté |
|
||
|
||
#### Conditions de Disparition (tableau détaillé)
|
||
|
||
| Condition | Seuil | Opérateur | Résultat |
|
||
|---|---:|---|---|
|
||
| - | - | - | pas de suppression |
|
||
|
||
#### Hérédité (tableau détaillé)
|
||
|
||
| Élément | Hérité | Règle |
|
||
|---|---|---|
|
||
| Inventaire | Oui | persiste compte |
|
||
| Équipement | Oui | persiste par profil |
|
||
|
||
### 3. Impacts Environnementaux
|
||
|
||
#### Impact Température (tableau détaillé)
|
||
|
||
| Condition | Effet | Notes |
|
||
|---|---|---|
|
||
| - | aucun | cosmétique |
|
||
|
||
#### Impact Milieu (Biome) (tableau détaillé)
|
||
|
||
| Biome | Effet | Notes |
|
||
|---|---|---|
|
||
| - | aucun | - |
|
||
|
||
#### Impact Saisons (tableau détaillé)
|
||
|
||
| Saison | Effet | Notes |
|
||
|---|---|---|
|
||
| Saison active | skins saisonniers visibles | gating |
|
||
|
||
#### Impact Heure / Jour-Nuit (tableau détaillé)
|
||
|
||
| Période | Effet | Notes |
|
||
|---|---|---|
|
||
| - | aucun | - |
|
||
|
||
### 4. Impacts Biologiques et Sociaux
|
||
|
||
#### Impact Reproduction (tableau détaillé)
|
||
|
||
| Facteur | Effet sur taux | Condition |
|
||
|---|---|---|
|
||
| - | aucun | - |
|
||
|
||
#### Impact Mort (tableau détaillé)
|
||
|
||
| Cas | Effet | Condition |
|
||
|---|---|---|
|
||
| - | aucun | - |
|
||
|
||
#### Impact Nourriture (tableau détaillé)
|
||
|
||
| Ressource | Effet | Condition |
|
||
|---|---|---|
|
||
| - | aucun | - |
|
||
|
||
#### Impact Attractivité(Visiteurs (tableau détaillé)
|
||
|
||
| Action/État | Gain | Rayon | Notes |
|
||
|---|---:|---:|---|
|
||
| Skins zoo | + | zoo | esthétique |
|
||
|
||
#### Impact Attractivité Animaux) (tableau détaillé)
|
||
|
||
| Action/État | Effet animaux | Condition |
|
||
|---|---|---|
|
||
| - | - | - |
|
||
|
||
#### Impact Valeur (tableau détaillé)
|
||
|
||
| Facteur | Variation | Condition |
|
||
|---|---:|---|
|
||
| Collection | + | complétude |
|
||
|
||
### 5. Impacts Logistiques et Économiques
|
||
|
||
#### Vitesse (Camion) (tableau détaillé)
|
||
|
||
| Paramètre | Effet | Condition |
|
||
|---|---|---|
|
||
| - | - | - |
|
||
|
||
#### Vitesse (Nurserie) (tableau détaillé)
|
||
|
||
| Paramètre | Effet | Condition |
|
||
|---|---|---|
|
||
| - | - | - |
|
||
|
||
#### Vitesse (Accueil) (tableau détaillé)
|
||
|
||
| Paramètre | Effet | Condition |
|
||
|---|---|---|
|
||
| - | - | - |
|
||
|
||
#### Vitesse (Recherche) (tableau détaillé)
|
||
|
||
| Paramètre | Effet | Condition |
|
||
|---|---|---|
|
||
| - | - | - |
|
||
|
||
#### Vitesse (Labo) (tableau détaillé)
|
||
|
||
| Paramètre | Effet | Condition |
|
||
|---|---|---|
|
||
| - | - | - |
|
||
|
||
#### Vitesse (Visite) (tableau détaillé)
|
||
|
||
| Paramètre | Effet | Condition |
|
||
|---|---|---|
|
||
| - | - | - |
|
||
|
||
#### Dépenses (Billeterie) (tableau détaillé)
|
||
|
||
| Poste | Coût | Unité | Condition |
|
||
|---|---:|---|---|
|
||
| - | 0 | - | - |
|
||
|
||
#### Dépenses (Boutiques) (tableau détaillé)
|
||
|
||
| Poste | Coût | Unité | Condition |
|
||
|---|---:|---|---|
|
||
| - | 0 | - | - |
|
||
|
||
#### Dépenses (Visiteurs) (tableau détaillé)
|
||
|
||
| Poste | Coût | Unité | Condition |
|
||
|---|---:|---|---|
|
||
| - | 0 | - | - |
|
||
|
||
#### Dépenses (Employés) (tableau détaillé)
|
||
|
||
| Poste | Coût | Unité | Condition |
|
||
|---|---:|---|---|
|
||
| - | 0 | - | - |
|
||
|
||
#### Dépenses (Boutiques) (tableau détaillé)
|
||
|
||
| Poste | Coût | Unité | Condition |
|
||
|---|---:|---|---|
|
||
| Section dupliquée | 0 | - | conservée |
|
||
|
||
#### Dépenses (Nurseries) (tableau détaillé)
|
||
|
||
| Poste | Coût | Unité | Condition |
|
||
|---|---:|---|---|
|
||
| - | 0 | - | - |
|
||
|
||
#### Dépenses (Nourriture) (tableau détaillé)
|
||
|
||
| Poste | Coût | Unité | Condition |
|
||
|---|---:|---|---|
|
||
| - | 0 | - | - |
|
||
|
||
#### Dépenses (Acceuil des animaux) (tableau détaillé)
|
||
|
||
| Poste | Coût | Unité | Condition |
|
||
|---|---:|---|---|
|
||
| - | 0 | - | - |
|
||
|
||
#### Dépenses (Camion) (tableau détaillé)
|
||
|
||
| Poste | Coût | Unité | Condition |
|
||
|---|---:|---|---|
|
||
| - | 0 | - | - |
|
||
|
||
#### Trajet Visiteurs
|
||
|
||
##### Trajet Visiteurs vers/depuis la ville (tableau détaillé)
|
||
|
||
| Source | Destination | Déclencheur | Effet |
|
||
|---|---|---|---|
|
||
| - | - | - | - |
|
||
|
||
##### Trajet Visiteurs vers/depuis les animaux (tableau détaillé)
|
||
|
||
| Source | Destination | Déclencheur | Effet |
|
||
|---|---|---|---|
|
||
| - | - | - | - |
|
||
|
||
##### Trajet Visiteurs vers/depuis les boutiques (tableau détaillé)
|
||
|
||
| Source | Destination | Déclencheur | Effet |
|
||
|---|---|---|---|
|
||
| - | - | - | - |
|
||
|
||
##### Trajet Visiteurs vers/depuis la billeterie (entrées/sorties du zoo) (tableau détaillé)
|
||
|
||
| Source | Destination | Déclencheur | Effet |
|
||
|---|---|---|---|
|
||
| - | - | - | - |
|
||
|
||
### 6. Événements
|
||
|
||
#### Événements du Jeu (tableau détaillé)
|
||
|
||
| Event | Déclencheur | Payload | Effet |
|
||
|---|---|---|---|
|
||
| `OPEN_SKIN_INVENTORY` | menu | - | UI |
|
||
| `EQUIP_SKIN` | clic | item_id, slot | équipé |
|
||
| `UNEQUIP_SKIN` | clic | slot | base |
|
||
|
||
#### Événements du Carte (tableau détaillé)
|
||
|
||
| Event | Déclencheur | Effet |
|
||
|---|---|---|
|
||
| - | - | - |
|
||
|
||
#### Événements du Zoo (tableau détaillé)
|
||
|
||
| Event | Déclencheur | Effet |
|
||
|---|---|---|
|
||
| - | - | - |
|
||
|
||
#### Événements du Ville / Visiteur (tableau détaillé)
|
||
|
||
| Event | Déclencheur | Effet |
|
||
|---|---|---|
|
||
| - | - | - |
|
||
|
||
#### Événements du Visiteur (tableau détaillé)
|
||
|
||
| Event | Déclencheur | Effet |
|
||
|---|---|---|
|
||
| - | - | - |
|
||
|
||
#### Événements du Joueur (tableau détaillé)
|
||
|
||
| Event | Déclencheur | Effet |
|
||
|---|---|---|
|
||
| `FILTER_SKINS` | toggle | UI |
|
||
|
||
### 7. Progression
|
||
|
||
#### Tableau des Upgrades (tableau détaillé)
|
||
|
||
| Niveau | Coût | Effet | Débloque |
|
||
|---|---:|---|---|
|
||
| 1 | 0 | inventaire dispo | - |
|
||
|
||
### 8. Logique et Interfaces
|
||
|
||
#### Pseudo-code Impacts (tableau détaillé)
|
||
|
||
| Fonction | Entrées | Sorties | Notes |
|
||
|---|---|---|---|
|
||
| `equipSkin` | item, slot | state | exclusif slot |
|
||
| `filterSkins` | list, filters | list | combinable |
|
||
|
||
#### Messages d'Infos / Alerte (tableau détaillé)
|
||
|
||
| ID | Niveau | Message | Condition |
|
||
|---|---|---|---|
|
||
| `SKIN_NOT_OWNED` | Warning | "Skin non possédé." | équiper |
|
||
| `SKIN_EQUIPPED` | Info | "Skin équipé." | succès |
|
||
|
||
## Annexes UX/UI
|
||
|
||
### 1. Expérience Utilisateur (UX)
|
||
|
||
#### Description UX (tableau détaillé)
|
||
|
||
| Parcours | But | Friction | Réduction clics |
|
||
|---|---|---|---|
|
||
| Équiper avatar | personnaliser | navigation | paper doll + bouton direct |
|
||
| Équiper zoo | thème | sélection | filtres |
|
||
|
||
#### Description UI (tableau détaillé)
|
||
|
||
| Composant | Contenu | États |
|
||
|---|---|---|
|
||
| Grille | items | owned/missing |
|
||
| Paper doll | preview | slot highlight |
|
||
| Bouton équiper | CTA | enabled/disabled |
|
||
|
||
#### Emplacement (tableau détaillé)
|
||
|
||
| Zone UI | Position | Notes |
|
||
|---|---|---|
|
||
| Profil | onglet skins | - |
|
||
| Boutique | lien | - |
|
||
|
||
#### Intégration (tableau détaillé)
|
||
|
||
| Intégration | Contrat | Notes |
|
||
|---|---|---|
|
||
| `skin.md` | definition item | ids cohérents |
|
||
| `avatar_joueur.md` | rendu avatar | slots |
|
||
|
||
#### Navigation (tableau détaillé)
|
||
|
||
| Action | Chemin | Résultat |
|
||
|---|---|---|
|
||
| Ouvrir | profil → skins | grille |
|
||
| Équiper | item → CTA | appliqué |
|
||
|
||
#### Événements (tableau détaillé)
|
||
|
||
| Event UI | Déclencheur | Effet |
|
||
|---|---|---|
|
||
| `OPEN_SKIN_INVENTORY` | menu | UI |
|
||
| `CLICK_EQUIP` | CTA | équipe |
|
||
|
||
#### Assets Skinables
|
||
|
||
##### Musiques (tableau détaillé)
|
||
|
||
| Asset | Usage | Durée | Notes |
|
||
|---|---|---:|---|
|
||
| `skins_inventory_loop.mp3` | inventaire | loop | neutre |
|
||
|
||
##### Sons (tableau détaillé)
|
||
|
||
| Asset | Usage | Volume |
|
||
|---|---|---|
|
||
| `ui_equip.mp3` | équiper | bas |
|
||
| `ui_unequip.mp3` | retirer | bas |
|
||
|
||
##### Graphiques (tableau détaillé)
|
||
|
||
| Asset | Usage | Contraintes |
|
||
|---|---|---|
|
||
| `paper_doll_frame.png` | preview | scalable |
|
||
| `skin_item_tile.png` | tuile | grille |
|
||
|
||
##### Images (tableau détaillé)
|
||
|
||
| Asset | Usage |
|
||
|---|---|
|
||
| `skin_missing_overlay.png` | grisé |
|
||
|
||
##### Vidéos (tableau détaillé)
|
||
|
||
| Asset | Usage | Durée |
|
||
|---|---|---:|
|
||
| `equip_fx.webm` | feedback | 0.6s |
|
||
|
||
##### Animations (tableau détaillé)
|
||
|
||
| Animation | Déclencheur | Notes |
|
||
|---|---|---|
|
||
| glow item | hover | 0.2s |
|
||
| bounce CTA | success | 0.3s |
|
||
|
||
##### Couleurs (tableau détaillé)
|
||
|
||
| Token | Valeur | Usage |
|
||
|---|---|---|
|
||
| `skins_gold` | #D4AF37 | rareté |
|
||
| `skins_brown` | #6D4C41 | fond |
|
||
|
||
##### Textes (tableau détaillé)
|
||
|
||
| Clé | FR | EN |
|
||
|---|---|---|
|
||
| `skins.title` | Skins | Skins |
|
||
| `skins.equip` | Équiper | Equip |
|
||
|
||
##### Formes (tableau détaillé)
|
||
|
||
| Élément | Forme | Notes |
|
||
|---|---|---|
|
||
| Tuiles | rectangles arrondis | lisibles |
|