Développeur lance un site web thématique Sith avec jeu de consentement de cookies

Résumé Rapide

Un développeur a repensé son site web avec un thème Seigneur Sith unique, centré autour de l'Empire Galactique des Cookies. La refonte propose un jeu de consentement de cookies interactif sur la page d'accueil, remplaçant une version précédente plus ennuyeuse. Le développeur a testé le site sur diverses plateformes, notamment Linuxes avec Firefox et Chrome, et Macbook avec Safari, notant la compatibilité avec les anciens téléphones Android. Pour un gameplay optimal, une largeur de fenêtre minimale de 800 pixels est recommandée, avec la meilleure expérience sur les grands écrans. Le site inclut une série d'articles « making of » détaillant le processus de développement, des mécaniques du jeu à la création de l'avatar. Le développement actuel se concentre sur le backport de CMUdict vers JavaScript pour améliorer le timing des phonèmes dans l'animation de l'avatar, utilisant la détection d'énergie de forme d'onde. Notamment, le développeur a confirmé qu'aucun LLM n'a été utilisé ; tout le code est écrit à la main et laissé non minifié à des fins éducatives. Un combat de boss secret est également caché dans le jeu, accessible via les Outils de développement.

Le Design de l'Empire Galactique des Cookies

La refonte du site web a été entreprise pendant la période de Noël et de fin d'année. Le développeur a choisi une esthétique Seigneur Sith pour commander l'Empire Galactique des Cookies, motivé par le désir d'améliorer le jeu de consentement de cookies précédent qui était devenu ennuyeux avec le temps. Le nouveau thème est appliqué à la page d'accueil du site, qui sert de plateforme de lancement pour l'expérience interactive.

L'élément interactif principal est un jeu qui se déclenche exclusivement sur la page d'accueil. Il propose un vaisseau spatial joueur naviguant dans un monde de jeu où la caméra zoome et suit le vaisseau sur les petits écrans. Le développeur a noté que le jeu est jouable à une largeur de fenêtre minimale de 800 pixels, bien qu'une largeur de 1280 pixels offre la meilleure expérience sans mouvement de caméra. Le jeu inclut également un combat de boss secret caché que les utilisateurs peuvent débloquer en interagissant avec les Outils de développement du navigateur.

Implémentation Technique & Compatibilité

Des tests approfondis ont été menés pour garantir que le site fonctionne dans différents environnements. Le développeur a testé le site web sur Firefox et Chrome/Chromium fonctionnant sur Linuxes, ainsi que Safari sur un Macbook. Bien qu'un iPhone n'ait pas été disponible pour les tests, le site a fonctionné correctement sur les anciens téléphones Android utilisant un hack de meta viewport.

Le développeur a exprimé sa frustration quant au fait que ce hack reste nécessaire après 15 ans. Le site est conçu pour fonctionner sur les navigateurs modernes, l'animation de l'avatar étant un axe clé du développement en cours. Pour améliorer l'avatar, le développeur travaille sur les tâches techniques suivantes :

• Backport de CMUdict vers JavaScript/ECMAScript.
• Implémentation de la détection d'énergie de forme d'onde pour le timing des phonèmes.
• Utilisation d'un détecteur de taux de passage à zéro pour une meilleure synchronisation.

Ces changements visent à corriger les problèmes de timing avec les phonèmes, car les outils existants basés sur Python n'étaient pas suffisamment en temps réel. Le développeur a noté que les articles existants sur l'animation de phonèmes étaient « un peu pourris et cassés », menant à une approche hautement expérimentale avec le nouveau détecteur de frontière.

Philosophie de Développement et Ressources

Le développeur a rendu le code source pleinement accessible au public. Un choix de conception spécifique a été fait pour garder le code sans bundle et sans minification. Cela permet aux visiteurs de lire et d'apprendre directement depuis le code. Le développeur a explicitement déclaré qu'aucun LLM n'a été utilisé dans la création du site web ; tout a été codé à la main.

Pour ceux qui s'intéressent aux détails techniques, une série de blog « making of » est disponible. Ces articles couvrent le processus de développement, la création de l'avatar, et des débogueurs spécifiques utilisés durant le projet. Les ressources incluent :

• Making of the Game
• Making of the Avatar
• Debuggers to toy around with

Le développeur espère que les utilisateurs apprécieront leur séjour et s'amuseront à jouer au Cookie Consent Game.