LouanBen / wordle-fr

"Le Mot" un Wordle en français.
https://wordle.louan.me
GNU General Public License v3.0
127 stars 40 forks source link

Interactive keyboard & colorblind mode modifications #38

Closed HiitSayZ closed 2 years ago

HiitSayZ commented 2 years ago

Added hover color and animation on keyboard and changed 'has-letter' color for colorblinds on grid.

netlify[bot] commented 2 years ago

✔️ Deploy Preview for wordle-fr-louan ready!

🔨 Explore the source changes: 616862790713135c13fdf8bfa29254f6c81c7a8c

🔍 Inspect the deploy log: https://app.netlify.com/sites/wordle-fr-louan/deploys/61f3824d7a57de0007d12798

😎 Browse the preview: https://deploy-preview-38--wordle-fr-louan.netlify.app/

richie3366 commented 2 years ago

Mentioning @Reelwens & @LouanBen to request their approval.

Thanks for your PR contrib @hiitsayz!

Some things I noticed:

I have no comment regarding the relevance of your changes in terms of colorblindness (because I'm not a colorblind person), so I'll trust you on its necessity. And I have nothing interesting to say about the visual effect added to the keys, that's why I mentioned two folks who will certainly have some relevant comments &/or approvals to make. :)

Reelwens commented 2 years ago

Bonjour :) Je connais @hiitsayz et je sais qu'il parle le français, je vais donc utiliser cette langue pour m'exprimer avec plus d'aisance. Merci pour ta contribution !

J'aime beaucoup la proposition d'animation de couleur au hover, ça rend la navigation plus sympa sur ordinateur. Je trouve l'animation de transition un poil perturbante par contre, mais pourquoi pas. Je laisse @LouanBen donner son avis 😊 Cependant, comme l'a relevé @richie3366, il y a un souci sur les appareils mobile. Le hover reste actif jusqu'à ce que l'utilisateur ait cliqué autre part. Ça pourrait être fixé via du JS en ajoutant une class au hover, ou bien en désactivant la modification sur les appareils mobile.

Concernant la modification du mode daltonien, il y a un souci de lisibilité. Le cadre blanc #000 entourant les lettres elles-mêmes blanches rend les choses moins faciles à lire et à interpréter. Je comprends cependant très bien l'intention d'avoir voulu garder le même taux de contraste que dans le mode non-daltonien. Peut-être que la solution serait plutôt de baisser la luminosité des cases qui ne sont pas encore actives, voire de leur donner la même que dans le mode non-daltonien ?

LouanBen commented 2 years ago

Coucou ! Déso pour le temps de réponse !

Je rejoins les commentaires de @richie3366 et @Reelwens sur les petits soucis mentionnés.

Pour l'animation des touches au hover, est-ce que ça serait pas moins perturbant si ça se faisait au clic plutôt ? Ça changerait rien sur portable (mise à part peut-être un fix au bug soulevé par Richie) mais ça serait plus cohérent sur PC, à mon sens.

Pour le changement de contraste sur le mode daltonien, je pense que le cadre blanc autour d'une lettre grisée ne devrait pas rester après validation du mot. Sinon pour le cadre blanc lorsqu'on rentre des lettres, j'avoue ne pas trop comprendre à quoi ça sert (et je suis curieux de savoir), mais si ça aide les personne daltonienne et malvoyantes d'une quelconque manière, ça me va :D

Merci pour ta PR et tes suggestions !

HiitSayZ commented 2 years ago

Salut ! J'ai fait les changements demandés pour le clavier, cependant pour expliquer les changements par rapport à la couleur blanche sur les cases, voici quelques screens :

(Version sans mode daltonien) : https://i.imgur.com/uv5jAdU.png (Version avec mode daltonien avant mes modifications) : https://i.imgur.com/e8LP7Ru.png

Le souci ici est qu'on passait d'une couleur claire à foncée sans le mode daltonien mais on effectuait le contraire pour les daltoniens. Le choix du blanc a été fait parce que c'est une des couleurs (qui n'est pas une couleur) perceptible par tous les types de daltonismes, c'est la meilleure manière de distinguer une différence et donc de savoir sur quel mot il est focus.

Cependant j'ai modifié le fait qu'il y ait toujours la bordure blanche lorsque le mot est validé :)

richie3366 commented 2 years ago

On merge ça très tardivement, désolé. Merci d'avoir fait les modifs demandées. :)

LouanBen commented 2 years ago

Coucou, vraiment désolé pour le retard et merci encore pour les modifs !! On merge :)