Wordle visual redesign

[Reelwens]

Proposition de nouveau design pour WordleFR 🎨

Capture d'écran des maquettes d'interface de l'évolution proposée :

[netlify[bot]]

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

🔨 Explore the source changes: b03a3156e2618c14c0dbc5c11dd94407d7045484

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

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

[richie3366]

C'est super bien fait, j'adore !

Je suggère (à voir si @LouanBen est du même avis) d'ajouter un remerciement à ton nom pour tout ce travail de redesign. Cela pourrait se faire en changeant celui en place :

Merci à Richie pour son aide précieuse !

par

Merci à Richie pour son aide précieuse, ainsi qu'à Reelwens pour le nouveau design !

(à toi de choisir vers quoi tu veux linker ton nom)

Sinon, il n'y a qu'une seule chose qui me perturbe, c'est la taille de "LE MOT" en header, je trouve qu'il est un peu petit. Je me demande comment ça rendrait en plus gros.

Merci en tout cas pour avoir passé de ton temps sur cette super PR. :)

[Reelwens]

Hello

Merci @richie3366 pour ton commentaire, ça me fait très plaisir 😊

J'ai fait des modifications supplémentaires suites à quelques tests (merci @PLhery) :

• Ajout d'un reset.css dans App.vue, pour que tous les navigateurs interprètent le code de la même façon
• Ajout de target blank sur les liens externes, pour que le joueur garde la page du jeu ouverte
• Correction des breakpoint de responsive en hauteur qui posaient problème
• Agrandissement du logo "Le mot" qui était une très bonne suggestion de @richie3366

[LouanBen]

Coucou @Reelwens !

J'adore, ça rend super bien, bravo !

Je vais être tatillon sur quelques détails de responsive à modifier si possible :

• Lors des premiers retours d'utilisateurs sur le jeu, le plus petit portable/navigateur qu'il m'ai été donné de voir a un viewport de 320x460. Sur ton design le clavier ne rentre malheureusement pas sur ce viewport, il faudrait changer ça ;) Le header est également un peu coupé au dessus.

• Pour les très petite largeurs d'écran (comme le Galaxy Fold), je suggère d'afficher les 4 stats du dessus en format "carré" (2 lignes de 2), plutôt qu'en format "ligne" (une ligne de 4). La selection du clavier dans les paramètres pourrait aussi être améliorée (peut-être une liste verticale ?)

• Je propose de renommer le bouton "1mot.net" en "Définition", c'est plus parlant et ça intéresse certainement plus de monde.

• Ça serait top de modifier le favicon actuel pour en faire un qui correspond au nouveau design :D (celui que j'ai fais est moche en plus...). Tu peux juste refaire le L vert, ou bien en proposer un autre si t'es inspiré !

• Tu peux bien évidemment t'ajouter dans les crédits comme l'a proposé @richie3366 :) ! Je propose : Merci à Richie pour son aide précieuse, ainsi qu'à Reelwens pour le design ! La même phrase que Richie, mais sans le "nouveau", c'est LE design maintenant :)

Merci encore à toi, contacte moi si t'as le moindre soucis ou si t'as besoin de précisions !

[Reelwens]

Merci pour tes retours @LouanBen, à vrai dire ne ne savais pas qu'il existait des devices si petits !

Je me suis occupé des problèmes relevés :

• Responsive affiné sur le clavier, la grille, le header, la modal endgame et la modal paramètres
• Modification du wording des définitions et des crédits (merci :D)
• Modification du favicon (et ajout du .ai à la racine)

J'en ai aussi profité pour augmenter légèrement la hauteur de la taille des touches de clavier sur les tailles d'écran qui le permettent, j'ai remarqué après tests que ça offrait une bien meilleure UX :)

@Richie3366 & @iamsabbirsobhani : I integrated the PR-31 in my own, to simplify the merge and PR process, thank you for your contribution 😊