---
sidebar_position: 17
title: Vos prochaines étapes
---

C'est désormais à votre tour, nous allons vous donner une description ainsi qu'un Mockup, un peu comme dans une demande d'évolution dans une entreprise.

A vous de réaliser les développements nécessaires !

## Description

Une nouvelle page d'inventaire doit être créée.

Celle-ci est composée de deux parties :
 - A gauche une grille representant les éléments déjà présent dans mon inventaire
 - A droite une grille/liste des éléments disponibles

Voici les spécifications de la page :
* Elle devra être accessible à partir de l'url "inventory" du site internet.
* Elle devra aussi afficher les images et le texte alternatif de chaque élément.
* Elle devra logger toutes les actions de l'utilisateur.
* Le texte de la page devra être en Anglais/Français au minimum.

### Grille d'inventaire

Voici les spécifications de la grille d'inventaire :
* Cette grille doit contenir les éléments qui sont déjà présent dans mon inventaire, ainsi que les emplacements libres.
* L'ajout dans la grille est disponible grâce à un glissé / déposé de la liste de droite.
* Lors de la sauvegarde la prise en compte de la position de l'élément déposé doit prise en compte.
* Il ne doit pas être possible de remplacer un élément par un autre sauf si celui-ci (l'élément cible) devient l'élément à déposer dans une autre position.
* Déplacer un élément en dehors de l'inventaire sera &quivalent à une supression.

Pour les plus courageux (**optionnel**):
* Respecter la donnée `stackSize`, gestion du nombre d'élément pour une case.
* Gérer le clic droit pour le glissé / déposé (coupe le nombre d'éléments en deux).
* Gérer la taille de l'inventaire en fichier de configuration.

### Liste des éléments

Voici les spécifications de la liste des éléments :
* La liste devra avoir une pagination.
* Le nom et l'image des éléments devront être présent.
* Un champ de recherche permettra de filtrer les éléments, le filtrage devra être fait côté serveur et non par la liste.
* Il doit être possible de trier les éléments par leur noms.

## Mockup

![Mockup](/img/your-next-steps.png)