Pika Pao Play

Pierre-feuille-ciseaux réinventé en un jeu web multijoueur en temps réel avec 5 thèmes et 26 langues

Visit Pika Pao Play

Aperçu du projet

Ce sur quoi nous avons travaillé

Modes Solo vs CPU & Multijoueur en temps réel
5 thèmes visuels interchangeables
Internationalisation en 26 langues avec détection automatique
Classement mondial avec statistiques persistantes
Animations Premium (GSAP + Framer Motion + Canvas Confetti)
Système d'effets sonores avec option de sourdine
Supabase Realtime pour la synchronisation multijoueur

Contexte

Pika Pao Play transforme le classique Pierre-feuille-ciseaux en une expérience numérique soignée et compétitive. L'objectif était de prouver que même un concept de jeu simple peut devenir un produit premium lorsqu'il est développé avec la bonne stack technologique et une attention particulière aux détails.

Le défi

Réactivité instantanée — aucun écran de chargement ni latence perçue, même lors de sessions multijoueurs en temps réel entre différentes zones géographiques.
Synchronisation en temps réel — les deux joueurs doivent voir les choix, les scores et la progression de la manche simultanément, sans aucun décalage.
Identité visuelle à grande échelle — 5 thèmes entièrement distincts qui transforment toute l'UI sans modifier le code des composants.
Accessibilité mondiale — 26 langues, y compris le support RTL (arabe), avec détection automatique du navigateur.
Jeu mobile-first — offrir une expérience premium, similaire à une application native, entièrement dans le navigateur, sans installation.

La solution

Phase 1 : Système de thèmes tokenisés

Un design system entièrement tokenisé utilisant des propriétés personnalisées CSS. Les 5 thèmes sont définis dans un seul fichier CSS avec des tokens sémantiques, permettant un changement de thème instantané.

Phase 2 : Moteur multijoueur en temps réel

Développé sur les abonnements Supabase Realtime sur une table game_rooms avec détection instantanée des choix, progression synchronisée des manches et suivi automatique des scores.

Phase 3 : Internationalisation (i18n) en 26 langues

26 fichiers JSON de localisation avec une structure de clés cohérente. i18next-browser-languagedetector sélectionne automatiquement la langue de l'utilisateur. Support RTL complet pour l'arabe.

Phase 4 : Couche d'animation premium

GSAP + Framer Motion pour des transitions ultra-fluides, Canvas Confetti en cas de victoire, système d'effets sonores personnalisés avec option de sourdine et effets de particules en arrière-plan.

Phase 5 : Classement mondial

Statistiques des joueurs persistantes dans Supabase avec des classements synchronisés sur le cloud. Les joueurs sauvegardent leurs scores et se disputent les premières places d'un classement mondial.

Résultats

Installation requise

Navigateur uniquement

App StoreZéro installation

Thèmes visuels

Changement à la volée

1 par défaut5 thèmes

Support linguistique

Détection automatique

Anglais uniquement26 langues

Multijoueur

Supabase Realtime

Local uniquementMondial en temps réel

Temps de chargement inférieur à une seconde grâce au bundling optimisé et au code splitting de Vite
Multijoueur en temps réel fonctionnel sur tous les appareils et zones géographiques via Supabase Realtime
5 identités visuelles entièrement distinctes, interchangeables à la volée sans recharger la page
Portée mondiale avec support de 26 langues, y compris RTL (arabe)
Sensation premium grâce aux animations GSAP + Framer Motion, aux effets de confettis et au design sonore