RandomLock¶
RandomLock est une petite application web statique qui tire au sort un héros de Deadlock (le jeu de Valve) et l'affiche en grand avec son nom. Ce n'est qu'un front : pas de backend, pas de base de données, pas de compte.
| Production | https://randomlock.dunkan.xyz |
| Dépôt | https://github.com/DuncanCos/RandomDeadlock (branche main) |
| Hébergement | Dokploy, projet randomlock, application front (détails) |
| Héros disponibles | 32 (liste en dur dans src/App.jsx) |
Côté utilisateur¶
L'écran est coupé en deux :
| Zone | Contenu |
|---|---|
| Gauche (⅓ de la largeur) | Grille de toutes les cartes de héros avec leur nom en surimpression (2 colonnes, 4 à partir du breakpoint md), avec défilement vertical |
| Droite | Image du héros tiré en pleine hauteur, avec l'image de son nom et le bouton Choisir à nouveau par-dessus, au centre |
Déroulement :
- Au chargement de la page, un héros est tiré au hasard parmi les 32.
- Le bouton Choisir à nouveau relance un tirage.
Comportement du tirage
- Chaque tirage est uniforme et indépendant : le même héros peut sortir deux fois de suite.
- La grille de gauche ne sert qu'à l'affichage. On ne peut pas cliquer sur un héros, ni en exclure un du tirage.
Stack¶
| Brique | Version (package.json) |
Rôle |
|---|---|---|
| React | ^19.2.0 |
UI : un seul composant, App |
| Vite | rolldown-vite@7.2.2 (alias npm) |
Serveur de dev et build |
@vitejs/plugin-react-swc |
^4.2.1 |
Transpilation JSX et Fast Refresh via SWC |
| Tailwind CSS | ^4.1.17 (+ @tailwindcss/vite) |
Classes utilitaires |
| daisyUI | ^5.5.5 |
Composant bouton (btn btn-primary) |
| ESLint | ^9.39.1 |
Lint (configuration « flat ») |
Le projet n'a pas de TypeScript, de routeur, de variables d'environnement ni de tests.
Dans cette section¶
- Architecture : structure du code, logique de tirage, assets et ajout d'un héros
- Développement : lancer le projet en local, lint et build
- Déploiement : configuration Dokploy et redéploiement