Forem: Michel

Web component

Michel — Thu, 29 May 2025 11:46:49 +0000

Gérer des clés étrangères avec SQLite

Michel — Wed, 16 Aug 2023 17:22:18 +0000

Pour les petits trucs en .NET Core, le plus simple est d'utiliser une base de données SQLite. Mais si on veut gérer correctement les clés étrangères, il faut penser à tenir compte de quelques particularités, d'où ce billet pour ne pas oublier...

Dans l'exemple qui suit, la clé étrangère permet de décrire la relation entre les deux tables "Blogs" (les parents) et "Posts" (les enfants) et d'assurer l'intégrité des données afin qu'il n'y ait pas d'enfants sans un parent. Toute tentative d'insertion d'une ligne dans la table "Posts" qui ne correspondrait pas à une ligne de la table "Blogs" génèrera une erreur SQL. De la même façon, on provoquera une erreur SQL si on essaie de supprimer une ligne de la table "Blogs" alors qu'il y a des données qui en dépendent dans la table "Posts".

CREATE TABLE Blogs
(
  Blog_ID     INTEGER PRIMARY KEY,
  Title       TEXT
);

CREATE TABLE Posts
(
  Post_ID     INTEGER PRIMARY KEY,
  Blog_ID     INTEGER,
  Content     TEXT,
  FOREIGN KEY (Blog_ID) REFERENCES Blogs (Blog_ID)
);

SQLite permet de définir des clés étrangères sans problème. La difficulté c'est que par défaut les contraintes liées aux clés étrangères sont désactivées (pour rester compatible avec les premières versions de SQLite).

Concrètement, ça veut donc dire qu'on peut créer des clés étrangères avec SQLite, mais qu'elles ne servent à rien ! Et donc qu'on pourra sans problème insérer des données sans clé étrangère "parent" ou supprimer des données "parents" pourtant utilisées par des enregistrements "enfants" :(

Heureusement, il est possible d'activer les contraintes liées aux étrangères. On ne peut pas faire cela de façon "globale", mais uniquement au niveau de la connexion à la base de données. Sous SQlite, on réalise ça avec la commande "PRAGMA" :

sqlite> PRAGMA foreign_keys = ON;

Avec ADO.NET ou Entity Framework, c'est encore plus simple (ou pas) puisqu'il suffit d'ajouter "Foreign Keys=true" à la chaine de connexion. Ce qui a pour effet d'envoyer automatiquement la commande PRAGMA foreign_keys = 1 immédiatement après l'ouverture de la connexion à la base de données.

Grâce à cette modification toute simple, il ne sera plus possible d'ajouter un "enfant" sans référencer un "parent" existant. Ou de supprimer un parent qui a un enfant...

INSERT INTO Blogs (Blog_ID, Title)
VALUES (1, 'Mon nouveau blogue');

COMMIT

INSERT INTO Posts (Post_ID, Blog_ID, Content)
VALUES (1, 33, 'Mon premier billet');
=> FOREIGN KEY constraint failed

INSERT INTO Posts (Post_ID, Blog_ID, Content)
VALUES (1, 1, 'Mon premier billet');

COMMIT

DELETE FROM Blogs WHERE Blog_ID = 1;
=> FOREIGN KEY constraint failed

Attention : Avec EF Core, la clause ON DELETE des clés étrangères est définie à CASCADE par défaut... De quoi alimenter un autre billet de blogue !

Billet publié à l'origine sur blog.pagesd.info.
Illustration: C'est quoi le pire : un index inutile ou une clé étrangère non indexée ?

Générer un badge / avatar en C#

Michel — Mon, 14 Aug 2023 10:29:56 +0000

J'ai récemment eu besoin d'afficher à nouveau des avatars, et j'ai voulu en profiter pour essayer une autre façon de faire par rapport à ce que j'avais fait il y a 2 ans avec "Créer un badge / avatar en CSS".

Et donc, plutôt que de faire ça avec du bon vieux code HTML et CSS, je génère automatiquement une image pour les personnes qui n'ont pas de "vrai" avatar.

Renvoyer une image statique

Les images des avatars sont stockées dans le dossier "/wwwroot/avatars" pour les cas où il existe un avatar.

Chaque avatar est enregistré en JPG, avec un nom de la forme "trigramme.prenom.nom.jpg".

trigramme = initiale du prénom + initiale du nom + lettre finale du nom (donc 3 lettres au total)
prenom = le prénom en minuscule sans accents, espaces, tirets... de la personne
nom = le nom en minuscule sans accents, espaces, tirets... de la personne

Par conséquent, un nom de fichier est composé uniquement des 26 lettres "a" à "z", avec un "." pour séparer les différentes parties : "tsk.tony.stark.jpg", "bbr.bruce.banner.jpg", "srs.steve.rogers.jpg", etc...

De cette façon, lorsqu'il existe un "vrai" avatar pour une personne, j'utilise simplement l'URL de l'image "/avatars/tsk.tony.stark.jpg" et le middleware "UseStaticFiles()" renvoie cette image sans chercher plus loin.

Renvoyer une image dynamique

Dans les cas où il n'existe pas d'image, j'ai une route qui prend le relai et qui renvoie une image générée à la volée. Ce qui donne au niveau de mon fichier "Program.cs" :

// Middleware pour les fichiers statiques
// => renvoie entre autre les images utilisées pour les avatars
app.UseStaticFiles();

...

// Route par défaut pour une application MVC basique
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

// Route spécifique pour générer des avatars
app.MapControllerRoute(
    name: "avatars",
    pattern: "/avatars/{id}.jpg",
    defaults: new { controller = "Avatars", action = "Index" });

Puis, dans le contrôleur "AvatarsController.cs", je n'ai plus qu'à générer une image en fonction de l'identifiant de l'image, à savoir une chaine de la forme "trigramme.prenom.nom.jpg".

public ActionResult Index(string id = "")
{
    var trigramme = id.Substring(0, 3).ToUpper();

    var color = GetColor(trigramme);
    var avatar = GetBitmap(color, trigramme);

    // Convertir l'image en tableau de bytes (byte array)
    using (MemoryStream ms = new MemoryStream())
    {
        avatar.Save(ms, ImageFormat.Jpeg);
        byte[] imageBytes = ms.ToArray();

        // Renvoyer l'image directement comme réponse HTTP avec le type de contenu approprié
        return File(imageBytes, "image/jpg");
    }
}

Je commence par récupérer le trigramme de la personne car il va me permettre de générer une couleur de fond pour l'avatar, via la fonction GetColor(trigramme).

Puis j'appelle la méthode GetImage(color, trigramme) qui est chargée de générer l'image correspondant à l'avatar.

Et enfin, je renvoie cette image au navigateur. Je peux alors utiliser la route de cette image "/avatars/tsk.tony.stark.jpg" exactement comme si c'état un fchier statique.

Afficher l'avatar

Côté HTML, je n'ai donc pas à me préoccuper de savoir s'il s'agit d'une image statique ou dynamique et je peux me contenter d'afficher une image basique :

<div class="round-avatar">
    <img src="/avatars/@(user.Trigramme).@(user.Prenom).@(user.Nom).jpg" />
</div>

Puis quelques lignes de CSS pour donner un look "fini" à l'avatar :

/* Avatars ronds */
.round-avatar img {
    border-radius: 50%;
    height: 64px;
    width: 64px;
}
/* Bordure au survol */
.round-avatar:hover img {
    box-shadow: 0 0 0 4px #fff;
}

Générer l'avatar en C

La fonction GetColor() est un peu tarabiscottée et me permet de définir une couleur en fonction du trigramme. Je ferais peut-être un autre billet pour expliquer comment je procède...

La fonction GetImage() génère un carré avec le fond de la couleur demandée et les initiales de la personne en blanc. Pour cela, j'utilise System.Drawing de façon assez basique :

using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
...

private Bitmap GetBitmap (Color color, string trigramme)
{
    // Créer une image avec le fond de la couleur demandée
    var image = new Bitmap(400, 400);
    using (Graphics gfx = Graphics.FromImage(image))
    {
        gfx.SmoothingMode = SmoothingMode.AntiAlias;
        gfx.Clear(color);
    }

    // Ajouter les 2 initiales du trigramme centré au milieu de l'image
    using (Graphics gfx = Graphics.FromImage(image))
    {
        Font font = new Font("Calibri", 128, FontStyle.Bold);
        Brush brush = new SolidBrush(Color.White);
        StringFormat format = new StringFormat();
        format.Alignment = StringAlignment.Center;
        format.LineAlignment = StringAlignment.Center;

        gfx.DrawString(trigramme.Substring(0, 2), font, brush, new Rectangle(0, 0, 400, 400), format);
    }

    // Renvoie l'image générée
    return image;
}

Conclusion

C'était pas très compliqué à coder et c'est amusant d'avoir un truc simple capable d'afficher des avatars sans avoir à faire la distinction entre les personnes pour lesquelles il existe un "vrai" avatar et celles pour lesquelles il n'y en a pas.

Billet publié à l'origine sur blog.pagesd.info.

Array.every() et new Set() sauvent LeMOT

Michel — Wed, 18 Jan 2023 13:43:16 +0000

Y'a comme un bug ?

Hier j'ai eu un petit problème dans mon jeu de Wordle en français. Comme dans le Wordle d'origine, j'utilise 2 listes de mots :

la première avec tous les mots de 5 lettres acceptés par mon jeu : "jouables"
la seconde avec les mots à trouver : "gagnants"

Contrairement à Josh Wardle, je n'ai pas préparé cette liste une fois pour toute lorsque j'ai créé le jeu. Dans la pratique, je la complète tous les 2 ou 3 mois, en ajoutant entre 50 et 100 mots à chaque fois. Je prends des mots au hasard dans la liste principale et je fais quelques ajustements pour éviter les mots trop compliqués ou pas très heureux...

Une fois ces nouveaux mots trouvés, je vérifie qu'ils n'ont pas déjà été proposés (pas de doublons) et aussi qu'ils existent bien dans la liste des mots acceptés (pas de mots introuvables). Je fais ça parce qu'il m'arrive de faire une faute de frappe quand je fais mes derniers petits ajustements.

Malheureusement c'est quelque chose que je fais manuellement et la dernière fois, j'ai dû rater une étape. Lundi, le mot à trouver était "MONOI" ("monoï" avec la bonne orthographe), mais bizarrement ce mot ne faisait pas parti de la liste des mots jouables reconnus par l'application !

Et donc rien à faire, même en jouant bien on ne pouvait que perdre puis s'entendre dire que la solution était "MONOI" alors que ça nous avait été refusé juste avant ! 😠😡

Le bug en action...

Prudence est mère de sûreté...

Aussi pour éviter que cela ne se reproduise, j'ai désormais automatisé ça directement dans le code. Cela affiche un message lorsque il y a des mots "gagnants" qui n'existent pas dans la liste des mots "jouables" (donc des mots inconnus qui ne seront pas trouvables). Et un autre message si la liste des mots "gagnants" contient des doublons (en cas de mots déjà proposés).


// Vérifie que tous les mots gagnants existent dans les mots jouables
if (gagnants.every(elem => jouables.includes(elem)) === false)
  console.log("gagnants inconnus !");

// Vérifie qu'il n'y a pas de doublon dans les mots gagnants
if (gagnants.length !== [...new Set(gagnants)].length)
  console.log("gagnants doublons !");

Les zexplications de ChatGPT :

// Vérifie que tous les mots gagnants existent dans les mots jouables
if (gagnants.every(elem => jouables.includes(elem)) === false)
  console.log("gagnants inconnus !");

Ce code vérifie si tous les éléments de l'array "gagnants" apparaissent dans l'array "jouables". Si ce n'est pas le cas, le message "gagnants inconnus !" est affiché dans la console. La méthode "every()" parcourt chaque élément de l'array "gagnants" et vérifie si cet élément existe dans l'array "jouables" en utilisant la méthode "includes()". Si tous les éléments de "gagnants" existent dans "jouables", la fonction "every()" renvoie "true" et le code dans la condition if ne sera pas exécuté, sinon elle renvoie "false" et le code dans la condition if sera exécuté.

// Vérifie qu'il n'y a pas de doublon dans les mots gagnants
if (gagnants.length !== [...new Set(gagnants)].length)
  console.log("gagnants doublons !");

Cette ligne de code vérifie s'il y a des doublons dans l'array "gagnants". Elle utilise le "!==" pour vérifier si la longueur de l'array "gagnants" est différente de celle de l'array créé par la combinaison de "new Set()" et de l'opérateur de décomposition "[...]". La méthode "Set()" crée un nouvel objet Set qui contient les éléments uniques de l'array passé en paramètre, l'opérateur de décomposition "[...]" permet de convertir ce nouvel objet en array.
Si la longueur de l'array "gagnants" est égale à celle de l'array créé par la combinaison de "new Set()" et de l'opérateur de décomposition "[...]", cela signifie qu'il n'y a pas de doublons dans "gagnants" et la condition if ne sera pas exécuté. Sinon, il y a des doublons dans "gagnants" et le message "gagnants doublons !" sera affiché dans la console.

Que le jeux continue !

Heureusement, c'est arrivé une seule fois en un peu plus d'un an de jeu.

Mais au moins, maintenant, si on perd ça ne sera plus que la faute à pas de chance : https://www.solitaire-play.com/lemot/ :)

Billet publié à l'origine sur blog.pagesd.info.

Replace Windows 10's emoji

Michel — Tue, 20 Sep 2022 17:55:11 +0000

Lately, I've been back on developing a sort of Twitter client / application to help me track interactions around my French Wordle game (and the 3 other games that I developed later).

This weekend, to take my mind off things a bit, I tried to improve the look of the emojis.

Initially, since it's a web application, they are displayed with the default Windows 10 font for emojis, which isn't super great:

Basic emoji for Windows 10

1st try: "Segoe UI Emoji" from Windows 11

To make it easier, I tried to install the latest version of the "Segoe UI Emoji" font from Windows 11 and see what happened... Not much actually!

Still using the original Windows 10 "Segoe UI Emoji" font :(

I now have two "Segoe UI Emoji" fonts on my PC which doesn't seem to be ready to use the newer one by default.

However, Firefox has proved to be smarter:

The new "Segoe UI Emoji" font in Windows 11 :)

2nd try: "Noto Color Emoji" from Google

Then I saw a new font from Google: "Noto Color Emoji" (https://fonts.google.com/noto/specimen/Noto+Color+Emoji).

After downloading it, I could have try to use it as a "system" font for emojis... But there was no reason for it to do better than Microsoft's "Segoe UI Emoji".

And there is nothing at the HTML/CSS level to indicate how emojis should be displayed using a particular font. If I want that, the easiest way is to include the emojis to be displayed inside a  tag with a class to later define its font. Something like 🥳 for example...

I wrote a quick code so that the emojis would be displayed using this font. To do this, I wrapped all the emojis in a "pseudo" <e> tag by using the following function:

private string MakePrettyEmojis(string content)
{
    var pretty = "";
    var runes = content.EnumerateRunes();
    foreach (var r in runes)
    {
        var one = r.ToString();
        if (one == "\u2b1c")
            pretty += "<e>" + one + "</e>";
        else if (one == "\u26aa")
            pretty += "<e>" + one + "</e>";
        else if (r.IsBmp == false)
            pretty += "<e>" + one + "</e>";
        else
            pretty += r.ToString();
    }
    pretty = pretty.Replace("</e><e>", "");
    return pretty;
}

Note: As all emojis are apparently not on the same boat, I will have to try a little harder to manage all the existing emojis (something like a Regex certainly).

The <e> tag does not exist but browsers do not seem to be disturbed. And so, <e>🥳</e> will be more "soft" than a long 🥳 :)

I update my CSS to define that <e> elements must be displayed with the "Noto Color Emoji" font:

e {
    font-family: "Noto Color Emoji"
}

And the result is finally there, whatever the browser!

Finally more cute emojis!!!

But I'm not a big fan of this little 3D effect. It feels like being back in the days of Windows 3.1 :)

3rd try: "Segoe UI Emoji" the return

Of course, I'll take a chance on:

e {
    font-family: "Segoe UI Emoji"
}

But since there are 2 "Segoe UI Emoji" fonts on my Windows, the new one still doesn't override the old one... Unless there is a font-version somewhere...

Back to square one (except Firefox)

4th try: "Twitter Color Emoji SVGinOT Font" by ???

I'm looking if there are other emoji fonts and I find one based on Twitter emojis, even though it looks more like DIY than official stuff: https://github.com/eosrei/twemoji-color-font.

I download, install and then:

e {
    font-family: "Twitter Color Emoji"
}

And oops...

All emojis are light gray...

5th try: "Emoji for everyone" from Twitter!!!

However, it led me to the "Twemoji" page: https://twemoji.twitter.com/.

Twitter's open source emoji has you covered for all your project's emoji needs. With support for the latest Unicode emoji specification, featuring 3,245 emojis, and all for free.

Wait, that's awesome!

It looks like this is exactly what I'm looking for! Something not complicated that can replace all the emojis of a page with the image of the corresponding Twitter emoji. That's good, cause I really like Twitter emojis :)

I delete my "MakePrettyEmojis" function and my piece of CSS to return to the starting situation.

I add some JavaScript to my "_Layout.cshtml" file:

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>

<script>
    window.onload = function () {
        // https://gist.github.com/Armster15/db063ab0dc5be699ae07a067a7333752
        // Parses the document body and
        // inserts <img> tags in place of Unicode Emojis
        twemoji.parse(document.body,
            { folder: 'svg', ext: '.svg' } // This is to specify to Twemoji to use SVGs and not PNGs
        );
    }
</script>

Then I size the emojis with CSS:

.emoji {
    height: 1.2em;
    width: 1.2em;
    margin: 0 1px;
}

Tada! It's perfectly perfect.

Conclusion

Initially, my plan was to replace the Windows 10 emojis with more modern ones (and the latest ones from Microsoft were fine for me). But with the difficulties and to avoid having to "hack" my system, I preferred to just modify my application so that it displays the pretty emojis from Twitter instead.

This post was originally published on blog.pagesd.info.

Remplacer les émojis de Windows 10

Michel — Mon, 19 Sep 2022 18:35:24 +0000

Ces derniers temps, je me suis remis sur le développement d'une sorte d'application / client Twitter pour me faciliter le suivi des interactions autour de mon jeu de Wordle en français (et des 3 autres que j'ai développés depuis).

Ce week-end, pour me changer un peu les idées, j'ai décidé d'améliorer le rendu des émojis.

Au départ, comme il s'agit d'une application web, ils sont affichés avec la police par défaut de Windows 10 pour les émojis, ce qui n'est pas super génial :

Les émojis de base pour Windows 10

1er essai : "Segoe UI Emoji" de Windows 11

Pour faire au plus simple, j'ai essayé d'installer la dernière version de la police "Segoe UI Emoji" de Windows 11 et de voir ce que ça donnait... Pas grand chose en fait !

Toujours les émojis de la police "Segoe UI Emoji" d'origine de Windows 10 :(

J'ai maintenant deux polices "Segoe UI Emoji" sur mon PC qui ne semble pas très chaud pour utiliser la plus récente par défaut.

Malgré tout, Firefox s'est montré plus malin :

Les nouveaux émojis de la police "Segoe UI Emoji" de Windows 11 :)

2ème essai : "Noto Color Emoji" de Google

Puis j'ai vu passer une nouvelle police de chez Google : "Noto Color Emoji" (https://fonts.google.com/noto/specimen/Noto+Color+Emoji).

Après l'avoir téléchargée, je pouvais essayer de l'utiliser comme police "système" pour les émojis... Mais il n'y avait pas de raison qu'elle se débrouille mieux que la "Segoe UI Emoji" de Microsoft himself.

Et il n'existe rien au niveau HTML / CSS pour indiquer qu'il faut afficher les émojis en utilisant une police particulière. Si on veut y arriver, le plus simple est d'englober les émojis à afficher dans une balise  avec une classe particulière pour pouvoir définir sa police. Quelque chose comme 🥳 par exemple...

Alors j'ai bricolé vite fait un truc pour que les émojis soient affichés en utilisant cette police. Pour cela, j'ai encadré tous les émojis dans une "pseudo" balise <e> grâce à la fonction suivante :

private string MakePrettyEmojis(string content)
{
    var pretty = "";
    var runes = content.EnumerateRunes();
    foreach (var r in runes)
    {
        var one = r.ToString();
        if (one == "\u2b1c")
            pretty += "<e>" + one + "</e>";
        else if (one == "\u26aa")
            pretty += "<e>" + one + "</e>";
        else if (r.IsBmp == false)
            pretty += "<e>" + one + "</e>";
        else
            pretty += r.ToString();
    }
    pretty = pretty.Replace("</e><e>", "");
    return pretty;
}

Note : Comme tous les émojis ne sont apparemment pas logés à la même enseigne, il faudra me creuser un peu plus les méninges pour réussir à gérer correctement tous les émojis existants (quelque chose dans le genre Regex certainement).

La balise <e> n'existe pas mais elle ne semble pas perturber les navigateurs. Et donc, <e>🥳</e> sera quand même plus "discret" qu'un long 🥳 :)

Je complète mon fichier CSS pour y indiquer que les éléments <e> doivent être affichés avec la police "Noto Color Emoji" :

e {
    font-family: "Noto Color Emoji"
}

Et le résultat est enfin là, quelque soit le navigateur !

Enfin de plus jolis émojis !!!

Mais j'aime moyen ce petit effet 3D. On se croirait revenu au temps de Windows 3.1 :)

3ème essai : "Segoe UI Emoji" le retour

Bien entendu je tente le coup avec :

e {
    font-family: "Segoe UI Emoji"
}

Mais comme il y a 2 polices "Segoe UI Emoji" sur mon Windows, la nouvelle ne prend toujours pas le dessus sur l'ancienne... A moins qu'il existe un font-version quelque part...

Retour à la case départ (à part Firefox)

4ème essais : "Twitter Color Emoji SVGinOT Font" de ???

Je cherche s'il existe d'autre polices d'emojis et je tombe sur celle de Twitter, même si cela ressemble plus à du bricolage qu'à un truc officiel : https://github.com/eosrei/twemoji-color-font.

Je télécharge, installe puis :

e {
    font-family: "Twitter Color Emoji"
}

Et oups...

Tous les émojis sont gris clair...

5ème essai : "Emoji for everyone" de Twitter !!!

Par contre, ça m'a conduit sur la page de "Twemoji" : https://twemoji.twitter.com/.

L'emoji open source de Twitter répond à tous les besoins de votre projet en matière d'emoji. Il prend en charge la dernière spécification Unicode des emojis et propose 3 245 emojis, le tout gratuitement.

Mais c'est génial !

Il semblerait bien que cela soit pile ce que je cherche ! Quelque chose de pas compliqué du tout qui remplace tous les émojis d'une page par l'image de l'émoji Twitter correspondant. Ca tombe bien, il me plaisent beaucoup les émojis de Twitter moi :)

Je vire ma fonction "MakePrettyEmojis" et mon bout de CSS pour revenir à la situation de départ.

J'ajoute un peu de JavaScript dans mon fichier "_Layout.cshtml" :

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>

<script>
    window.onload = function () {
        // https://gist.github.com/Armster15/db063ab0dc5be699ae07a067a7333752
        // Parses the document body and
        // inserts <img> tags in place of Unicode Emojis
        twemoji.parse(document.body,
            { folder: 'svg', ext: '.svg' } // This is to specify to Twemoji to use SVGs and not PNGs
        );
    }
</script>

Et je dimensionne les émojis dans mon CSS :

.emoji {
    height: 1.2em;
    width: 1.2em;
    margin: 0 1px;
}

Tada ! C'est parfaitement parfait.

Conclusion

Au départ, je comptais remplacer les émojis de Windows 10 pour en utiliser de plus modernes (et les derniers de Microsoft m'allaient très bien). Mais devant les difficultés et pour éviter d'avoir à "hacker" mon système, j'ai préféré me contenter de modifier mon application pour qu'elle affiche les jolis émojis de Twitter à la place.

Billet publié à l'origine sur blog.pagesd.info.

Dark mode for French Wordle

Michel — Wed, 02 Feb 2022 20:56:39 +0000

Last Sunday, I added a dark theme to LeMOT, my French Wordle. Some players seemed to want it and it was a good opportunity for me to see how to do it without too many fuss.

Colors for light mode

To start with, I looked for the colors used in my CSS file and I found about ten of them. But in practice, this corresponds to the following 12 use cases:

#fff for the general white background
#333 for the general near-black text
#888 for slightly lighter text in italics
#ddd for text watermark
#ccc light gray for the background of unused keyboard keys
#fff white to display the letters once played in the boxes
#ffb000 the famous orange for the background of well placed letters :)
#648fff the blue for the background of misplaced letters
#ddd a slightly lighter gray for the background of the letters missing from the word to guess
#bbb not very light gray for icons
#dc267f a purple background for the "unknown word" message
#fff white text for the "unknown word" message

Done!

Colors for dark mode

I then searched what colors to use when in dark mode. It wasn't too difficult, since you just have to look at the original Wordle for inspiration... After a few tries, I came up with these colors:

#222 for a very black general background
#333 for a very white general text
#888 for a less white italic text
#444 for the watermark text in grey / black
#888 a "medium" gray for the background of the unused keyboard keys
#fff white to display the letters once played in the boxes
#ffb000 the famous orange for the background of well placed letters :)
#648fff the blue for the background of misplaced letters
#444 a gray / black for the background of the letters absent from the word to guess
#888 a "medium" gray for the icons
#dc267f a purple background for the message "unknown word"
#fff white text for the "unknown word" message

As I display links in bright blue (#00f), I had to find another one that would look good in both dark and light modes. I took the blue #2962ff from one of my other sites, but I probably have to improve it because I'm not very happy with it...

Dark colors, done!

Setting light or dark theme

Now, either I was finally starting to code a settings screen, or I was cheating by relying on the prefers-color-scheme media directive. This directive detects the user's choice of theme preference (dark or light).

Of course I did the easiest one. But also the most normal one in my opinion: why force people to repeat in my game what they have already set on their phone or browser!

And so now, my CSS file starts with a bunch of CSS variables.

/* Thèmes
   ========================================================================== */

:root {
  --fond-general: #fff;      /* Fond blanc général */
  --texte-normal: #333;      /* Texte quasi noir */
  --texte-clair: #888;       /* Texte plus clair pour notes */
  --texte-jouee: #fff;       /* Texte blanc une fois la lettre jouée */
  --filigrane: #ddd;         /* Couleur du texte en filigrane */
  --message-fond: #dc267f;   /* Fond mauve pour les messages */
  --message-texte: #fff;     /* Texte blanc pour les messages */
  --touche-fond: #ccc;       /* Fond gris clair pour touche inutilisée */
  --touche-texte: #333;      /* Texte quasi noir pour touche en général */
  --fond-correct: #ffb000;   /* Orange pour les lettres bien placées */
  --fond-present: #648fff;   /* Bleu pour les lettres mal placées */
  --fond-absent: #ddd;       /* Gris clair pour les lettres absentes */
  --couleur-icone: #bbb;     /* Gris pas très clair pour icones */
  --texte-lien: #2962ff;     /* Bleu pour les liens */
}

@media (prefers-color-scheme: dark) { :root {
  --fond-general: #222;      /* Fond très noir général */
  --texte-normal: #eee;      /* Texte très blanc */
  --texte-jouee: #fff;       /* Texte blanc une fois la lettre jouée */
  --texte-clair: #888;       /* Texte moins blanc pour notes */
  --filigrane: #444;         /* Couleur du texte en filigrane */
  --message-fond: #dc267f;   /* Fond mauve pour les messages */
  --message-texte: #fff;     /* Texte blanc pour les messages */
  --touche-fond: #888;       /* Fond gris moyen pour touche inutilisée */
  --touche-texte: #fff;      /* Texte blanc pour touche en général */
  --fond-correct: #ffb000;   /* Orange pour les lettres bien placées */
  --fond-present: #648fff;   /* Bleu pour les lettres mal placées */
  --fond-absent: #444;       /* Gris-noir pour les lettres absentes */
  --couleur-icone: #888;     /* Gris moyen pour icones */
  --texte-lien: #2962ff;     /* Bleu pour les liens */
}}

A good thing done!

A last one for the road...

I use an antiquity to compress CSS (Microsoft Ajax Minifier) and it didn't hold up against CSS variables :( So for now, I went to the first comer, namely CSSO, via its csso-cli version to do the job.

I wonder if it would be possible to compress the CSS variable names, so that --fond-general is shortened to --a, --texte-normal becomes --b, etc...

This is something I'll definitely have to review some day to make an informed decision about what I'll use from now on...

Conclusion

Anyway, another weekend well spent, since it is finally possible to enjoy LeMOT to its fullest, even if you prefer to use a dark mode!

And to play, it's still there: https://www.solitaire-play.com/lemot/ :)

This post was originally published on blog.pagesd.info.

Mode sombre pour Wordle en français

Michel — Tue, 01 Feb 2022 12:15:09 +0000

Dimanche dernier, j'ai ajouté un thème sombre (dark mode en anglais) sur LeMOT, mon Wordle en français. Certains joueurs semblaient y tenir et c'était l'occasion pour moi de voir comment faire ça sans trop me compliquer la vie.

Couleurs en mode clair (light mode)

Pour commencer, j'ai recherché quelles étaient les couleurs utilisées dans mon fichier CSS et j'en ai trouvé une dizaine. Mais en pratique, cela correspond aux 12 cas d'utilisation suivants :

#fff pour le fond blanc général
#333 pour le texte général en quasi noir
#888 pour le texte un peu plus clair en italique
#ddd pour le texte en filigrane
#ccc du gris clair pour pour le fond des touches du clavier inutilisées
#fff du blanc pour afficher les lettres une fois jouées dans les cases
#ffb000 le célèbre orange pour le fond des lettres bien placées :)
#648fff le bleu pour le fond des lettres mal placées
#ddd un gris un peu plus clair pour pour le fond des lettres absentes du mot à deviner
#bbb du gris pas très clair pour les icones
#dc267f un fond mauve pour le message "mot inconnu"
#fff le blanc du texte pour le message "mot inconnu"

Ca c'est fait !

Couleurs en mode sombre (dark mode)

J'ai ensuite recherché quelles couleurs utiliser quand on est en mode sombre. Ca n'a pas été trop compliqué, puisqu'il suffit de regarder du côté du Wordle d'origine pour l'inspiration... Après quelques essais, je suis arrivé à ces couleurs :

#222 pour un fond général très noir
#333 pour un texte général très blanc
#888 pour un texte italique moins blanc
#444 pour le texte des filigranes en gris / noir
#888 du gris "moyen" pour pour le fond des touches du clavier inutilisées
#fff du blanc pour afficher les lettres une fois jouées dans les cases
#ffb000 le célèbre orange pour le fond des lettres bien placées :)
#648fff le bleu pour le fond des lettres mal placées
#444 un gris / noir pour pour le fond des lettres absentes du mot à deviner
#888 du gris "moyen" pour les icones
#dc267f un fond mauve pour le message "mot inconnu"
#fff le blanc du texte pour le message "mot inconnu"

Comme jusqu'à présent j'affichais les liens en bleu pétant (#00f), j'ai dû en trouver un autre qui rendrait bien dans les deux modes sombres et clair. J'ai repris le bleu #2962ff d'un de mes autres sites, mais sans doute à améliorer parce que je n'en suis pas super satisfait...

Les couleurs sombres, c'est fait !

Paramétrage du thème clair ou sombre

Là, ou bien j'attaquais enfin l'écran de paramétrage de LeMOT, ou bien je trichais en me basant sur la directive média prefers-color-scheme. Celle-ci permet de détecter le choix de l'utilisateur quant à ses préférences en ce qui concerne le thème à utiliser (sombre ou clair).

J'ai bien entendu fait le plus facile des 2. Mais aussi le plus normal selon moi : pourquoi obliger les gens à devoir redire dans mon jeu ce qu'ils ont déjà paramétré sur leur téléphone ou leur navigateur !

Et donc désormais, mon fichier CSS commence par une palanquée de variables CSS.

/* Thèmes
   ========================================================================== */

:root {
  --fond-general: #fff;      /* Fond blanc général */
  --texte-normal: #333;      /* Texte quasi noir */
  --texte-clair: #888;       /* Texte plus clair pour notes */
  --texte-jouee: #fff;       /* Texte blanc une fois la lettre jouée */
  --filigrane: #ddd;         /* Couleur du texte en filigrane */
  --message-fond: #dc267f;   /* Fond mauve pour les messages */
  --message-texte: #fff;     /* Texte blanc pour les messages */
  --touche-fond: #ccc;       /* Fond gris clair pour touche inutilisée */
  --touche-texte: #333;      /* Texte quasi noir pour touche en général */
  --fond-correct: #ffb000;   /* Orange pour les lettres bien placées */
  --fond-present: #648fff;   /* Bleu pour les lettres mal placées */
  --fond-absent: #ddd;       /* Gris clair pour les lettres absentes */
  --couleur-icone: #bbb;     /* Gris pas très clair pour icones */
  --texte-lien: #2962ff;     /* Bleu pour les liens */
}

@media (prefers-color-scheme: dark) { :root {
  --fond-general: #222;      /* Fond très noir général */
  --texte-normal: #eee;      /* Texte très blanc */
  --texte-jouee: #fff;       /* Texte blanc une fois la lettre jouée */
  --texte-clair: #888;       /* Texte moins blanc pour notes */
  --filigrane: #444;         /* Couleur du texte en filigrane */
  --message-fond: #dc267f;   /* Fond mauve pour les messages */
  --message-texte: #fff;     /* Texte blanc pour les messages */
  --touche-fond: #888;       /* Fond gris moyen pour touche inutilisée */
  --touche-texte: #fff;      /* Texte blanc pour touche en général */
  --fond-correct: #ffb000;   /* Orange pour les lettres bien placées */
  --fond-present: #648fff;   /* Bleu pour les lettres mal placées */
  --fond-absent: #444;       /* Gris-noir pour les lettres absentes */
  --couleur-icone: #888;     /* Gris moyen pour icones */
  --texte-lien: #2962ff;     /* Bleu pour les liens */
}}

Une bonne chose de faite !

Un petit dernier pour la route...

J'utilise une antiquité pour compresser les CSS (Microsoft Ajax Minifier) et elle n'a pas tenu le coup face aux variables CSS :( Alors pour l'instant, je suis passé au premier venu, à savoir CSSO, via sa version csso-cli pour faire le boulot.

Je me demande quand même s'il ne lui serait pas possible de compresser le nom des variables CSS, pour que --fond-general soit raccourci en --a, --texte-normal devienne --b, etc...

De toute façon, c'est un truc que je devrai revoir un jour ou l'autre pour décider de façon éclairée de ce que je vais utiliser désormais...

Conclusion

Quoiqu'il en soit, encore un week-end bien employé, puisqu'il est enfin possible d'apprécier LeMOT à sa juste valeur, même si vous préférez utiliser un mode sombre !

Et pour jouer, c'est toujours par là : https://www.solitaire-play.com/lemot/ :)

Billet publié à l'origine sur blog.pagesd.info.

Share the French Wordle grid

Michel — Sun, 23 Jan 2022 19:27:28 +0000

Until last Sunday, it wasn't very clear that we could share the results in my French Wordle game. Thankfully, I just need a simple screen to solve this problem.

At least now it is obvious for everyone that it's possible to share the result of his game. And even that you are strongly invited to do so :)

Before this update, I displayed a short message for 2 or 3 seconds that said "Bravo! Result copied to the clipboard". So you had to be a bit careful to understand that it was possible to share your result, like with the original Wordle.

Not to mention that it's better than automatically paste the grid into the clipboard, without notifying the player. But that's okay, at first I wanted to deploy quickly.

And it's not to brag, but I do feel that shares on Twitter have increased after this small improvment :)

So, don't be afraid to play LeMOT and share your game!

This post was originally published on blog.pagesd.info.

Partager la grille de Wordle en français

Michel — Sat, 22 Jan 2022 11:15:53 +0000

Jusqu'à dimanche dernier, il n'était pas super évident qu'on pouvait partager les résultats dans mon Wordle en français. Heureusement, il a suffit d'ajouter un écran tout simple pour résoudre ce problème.

Au moins, maintenant il est clair pour tout le monde qu'il est possible de partager le résultat de sa partie. Et même qu'on y est fortement invité :)

Avant, j'affichais un simple message pendant 2 ou 3 secondes qui annonçait "Bravo ! Résultat copié dans le presse-papiers". Il fallait donc être un peu attentif pour se rendre compte qu'il était alors possible de partager son résultat comme avec le Wordle original.

Sans compter que c'est quand même mieux que de coller automatiquement la grille de résultat dans le presse-papier, sans demander auparavant l'avis du joueur. Mais bon, au début, j'étais pressé...

Et ce n'est pas pour me vanter, mais j'ai bien l'impression que les partages sur Twitter ont augmenté après cette petite modification :)

Alors, n'hésitez pas à jouer à LeMOT et à pargager votre partie !

Billet publié à l'origine sur blog.pagesd.info.

Adding SVG Icons to my French Wordle

Michel — Wed, 19 Jan 2022 13:01:32 +0000

Just after I modified my French Wordle game to use accessible colors, I took a little time to add SVG icons.

My first "icons"

Initially, I only used simple Ascii or Unicode characters to represent the game actions or the keyboard keys:

"?" for the Help menu
"⚙" for the Settings menu
"↵" for Enter key
"⌫" for Backspace key

It's simple, it works, and considering that I've rarely had the opportunity to use SVG icons, this was the most practical solution to quickly create LeMOT.

It was decent, but it didn't look the same depending on what you're playing on: Windows PC, phone, iPhone, ... And then I had to tweak some CSS to give a "button" look to my menu icons.

.menu {
  background-color: #ddd;
  color: #fff;
  border-radius: 50%;
  font-size: 24px;
  width: 35px;
  height: 35px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.menu:hover {
  background-color: #bbb;
}

Switching to SVG icons

Regardless, I had planned from the beginning to look at SVG icons to improve LeMOT. As I had a number of SVG icon sets bookmarks, I looked for one that would be the best fit.

Though in the end these are not the icons I selected, I listed them here because they are all very good. But I had some difficulties finding icons to represent the Enter and Backspace keys. Also, just at that time, Josh Wardle had added a new icon in the menu to view stats.

Also, because I was impatient, I had trouble finding explanations for how to color or resize them.

Luckily, I finally tilted and thought again about Bootstrap icons that I sometimes use as icon fonts! And there we are, everything I needed, plus they were easily customizable with a bit of CSS.

To set the color:

svg {
  fill: green;
}

To resize them:

svg {
  height: 1.75em;
  width: 1.75em;
}

The icing on the cake, using the "em" unit allows them to be sized proportionally to the font size.

Problem with clicking on SVG icons

As it was late and I hadn't tested enough (or not at all?), it bugged :(

Guillaume

@yomz

@ms_michel hello je te signale un bug impossible d’effacer des lettres le jeu est planté

00:17 AM - 14 Jan 2022

On the phones, it was no longer possible to go back and correct a letter or to validate the word entered! All of this because my code was still relying on the Unicode characters "↵" and "⌫" to detect which key had been used.

  if (touche === "↵") {
    validerLigne();
  } else if (touche === "⌫") {
    retourArriere();
  }

Or something like that...

Never mind, I just had to add a data-attribute on the 2 keys and problem solved!

Unfortunately, when you click on an SVG, the event.target given by the "click" event doesn't necessarily correspond to the DOM element "button" that represents the key. It can be the "SVG" element or even the "PATH" element depending on the exact place where you clicked...

Note: Most certainly on a phone it will always fall on the "button" (unless you have a super thin finger), but I don't want to leave anything to chance.

Fortunately, this is a well-known problem that I had already encountered in my previous run-ins with event delegation. In his post "Detecting click events on SVGs with vanilla JS event delegation", Chris Ferdinandi gives two solutions to solve the problem.

Of course, I took the simpler solution and added a pointer-events: none; to my CSS file.

And that's why it's now possible to play French Wordle on a phone and with pretty icons.

This post was originally published on blog.pagesd.info.

Ajout d'icônes SVG à mon Wordle français

Michel — Sun, 16 Jan 2022 10:49:13 +0000

Juste après avoir modifié ma version de Wordle en français pour utiliser des couleurs accessibles, j'ai pris un petit moment pour ajouter de véritables icônes SVG.

Mes premières "icônes"

Au départ, je m'étais contenté d'utiliser de simples caractères Ascii ou Unicode pour représenter les actions du jeu ou les touches du clavier :

"?" pour le menu Aide
"⚙" pour le menu paramétrage
"↵" pour la touche Entrée
"⌫" pour la touche Retour arrière

C'est simple, ça marche et comme jusqu'à présent j'ai rarement eu l'occasion d'utiliser des icônes au format SVG, c'était la solution la plus pratique pour créer LeMOT super rapidement.

C'était pas mal, mais ça ne rendait pas pareil selon sur quoi on joue : un PC sous Windows, un téléphone, un iPhone, ... Et puis j'avais dû bidouiller du CSS pour réussir à donner un aspect "bouton" aux icônes du menu.

.menu {
  background-color: #ddd;
  color: #fff;
  border-radius: 50%;
  font-size: 24px;
  width: 35px;
  height: 35px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.menu:hover {
  background-color: #bbb;
}

Changement pour des icônes SVG

Malgré tout, j'avais prévu dès le début de regarder du côté des icônes SVG pour améliorer LeMOT. Comme j'avais sous le coude un certain nombre de jeux d'icônes SVG, j'ai cherché lequel conviendrait mieux.

Même si au final ce ne sont pas les icônes que j'ai sélectionnées, je les ai listées ici parce qu'elles sont toutes très bien. Par contre j'ai eu quelquefois un problème pour trouver des icônes qui représentent les touches Entrée et Retour arrière. En plus, juste à ce moment-là, Josh Wardle avait ajouté une nouvelle icône dans le menu pour consulter les statistiques.

Et aussi, comme j'étais un peu impatient, j'ai eu un peu de mal à trouver des explications pour savoir comment les colorer ou les dimensionner.

Par chance, j'ai fini par tilter et j'ai repensé aux icônes Bootstrap que j'utilise quelquefois sous forme de police d'icônes ! Et là, il y avait tout ce dont j'avais besoin et en plus elles étaient facilement personnalisables avec un peu de CSS.

Pour définir la couleur :

svg {
  fill: green;
}

Pour les dimensionner :

svg {
  height: 1.75em;
  width: 1.75em;
}

Cerise sur le gâteau, le fait d'utiliser l'unité de mesure "em" permet de les dimensionner proportionnellement à la taille de la police.

Un problème de clic sur les icônes SVG

Comme il était tard et que je n'avais pas suffisamment (ou pas du tout ?) testé, ça a bugué :(

Guillaume

@yomz

@ms_michel hello je te signale un bug impossible d’effacer des lettres le jeu est planté

00:17 AM - 14 Jan 2022

Sur les téléphones, il n'était plus possible de revenir en arrière pour corriger une lettre ou de valider le mot saisi ! Tout ça parce que mon code se basait toujours sur les caractères Unicode "↵" et "⌫" pour détecter quelle touche avait été utilisée.

  if (touche === "↵") {
    validerLigne();
  } else if (touche === "⌫") {
    retourArriere();
  }

Ou quelque chose dans le genre...

Qu'à cela ne tienne, je n'avais qu'à ajouter un data-attribut sur les 2 touches concernées et problème résolu !

Malheureusement, quand on clique sur un SVG, le event.target que donne l'évènement "click" ne correspond pas obligatoirement à l'élément DOM "button" qui représente la touche. Cela peut être l'élément "SVG" ou même l'élément "PATH" en fonction de l'endroit exact où on a cliqué...

Note : Très certainement que sur un téléphone ça tombe toujours sur le "button" (à moins d'avoir un doigt super fin), mais autant ne rien laisser au hasard.

Heureusement, c'est un problème bien connu que j'avais d'ailleurs déjà rencontré lors de mes précédents accrochages avec la délégation d'évènement. Dans son article "Detecting click events on SVGs with vanilla JS event delegation", Chris Ferdinandi donne deux solutions pour résoudre le problème.

Bien entendu, j'ai pris la solution la plus simple et j'ai ajouté un pointer-events: none; à mon fichier CSS.

Et c'est pour cela que maintenant, il est possible de jouer à Wordle en français sur un téléphone et avec de jolies icônes.

Billet publié à l'origine sur blog.pagesd.info.