Portfolio comme un OS #3 — le système de fenêtres

Aujourd'hui, on parle du système de fenêtres — ces petites fenêtres qui s'ouvrent quand tu cliques sur une icône du bureau.

Chaque icône écoute un événement de clic qui appelle une fonction d'ouverture, basée sur l'attribut « contenu » stocké dans la structure de données de l'icône. Pour toutes les fenêtres à ouvrir, j'ai défini sur la vue un état : une liste d'objets { identifiant de l'icône, window (les attributs de l'icône cliquée) }. Au clic, on insère ces attributs dans la liste, et un composant se charge d'afficher les fenêtres ouvertes — avec un bon coup de CSS.

Comme une fenêtre subit beaucoup d'actions (ouverture, fermeture, déplacement, redimensionnement…), j'ai créé un hook personnalisé en React — un truc que je te conseille vivement. Un autre état retient l'identifiant de la fenêtre au premier plan, pour lui donner le plus grand z-index et faire passer son contenu devant les autres.

Plusieurs autres fonctionnalités vivent dans ce hook. Voilà pour le système de fenêtres — le prochain billet parlera de la barre des tâches. Je reste ouvert à tout commentaire et apport. ✊🏾