Feat welcom page by Ilia1177 · Pull Request #68 · codastream/transcendence

Ilia1177 · 2026-02-09T10:44:08Z

This PR introduce the Welcome Page that handle register, and login forms.
An Halo components has been added to display the formes
LoginForm and RegisterForm has been modified to handle toggle between theme with a button instead of a link.
/login and /signup have been replaced with /welcome.

------- UPDATE:
Redirect to welcomePage after register (as logged in) and after logged in.
If user is logged in, the WelcomePage display 3 Circles with links to
/game/pong-ai
/game/create-session
/game/tournament

-------- UPDATE:
Halo size is changing when hovering it.
Padding has been added in Halo component (could be better).
Redirect to /welcome if auth fail

modify LoginForm and register form with a toggle button to switch from each other /login and /signup no more exist and has been replaced with /welcom srcs/nginx/src/App.tsx srcs/nginx/src/components/molecules/Halo.tsx srcs/nginx/src/components/organisms/LoginForm.tsx srcs/nginx/src/components/organisms/RegisterForm.tsx srcs/nginx/src/pages/AnimationPage.tsx

jmtth · 2026-02-09T14:49:38Z

srcs/nginx/src/components/molecules/Halo.tsx

+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Circle size={50} className="cursor-pointer">
+        {!isHovered ? (


C'est à revoir car si la souris n'est plus sur les champs, cela efface tout ce que l'on a tapé.
Si j'utilise la souris pour l'autocomplétion, cela efface aussi les données.
La taille du rond en dur ne va pas, ou n'est pas adaptée ; les champs débordent, ce n'est pas esthétique.

Je t'accorde que l'esthetique n'y est pas, mais au moins c'est fonctionnelle. L'idee est d'avant tout d'avoir quelque chose qui puisse marcher, afin de pouvoir devellopper le game UI plus facilement. Egalement -> la gestion des petits ecrans (mobile) n'est pas la. Je vais revoir le fonctionnement. Si tu prefere on peut abandonner l'idee d'avoir le "play" et avoir le formulaire directement (qui ne s'efface pas) ?

Change are done ! Le halo s'agrandit quand on passe la souris dessus, et le texte reste en memoire (le formulaire reste monté, et on toggle seulement la visibilité de celui ci). Tu me diras ce que tu en pense !

non l'idée est bonne c'est juste la gestion du hover qui ne va pas, peut être tout inclure dans une div.
j'ai tester un bouton cliquable comme cela

<motion.div whileHover={{ scale: 1.1, color: '#029c8a' }} whileTap={{ scale: 0.95, color: '#ff0088' }} initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 + 1 }} exit={{ opacity: 0, y: 0 }} transition={{ duration: 0.2 }} className={` basis-50 h-56 m-10 p-6 aspect-square rounded-full bg-slate-100/80 flex items-center justify-center font-quantico ${dropdownStyle} `} > <p className="text-2xl text-center whitespace-nowrap">{children}</p> </motion.div>

motion div c'est assez sympa à utiliser

Je comprends pas pourquoi la gerstion du hover serai mauvaise ?

trop bien
je teste demain matin

Presque parfait sur ordi, on peut accéder au formulaire facilement.

Par contre sur mobile il faudrait que le fond s'adapte à la page car ce n'est pas pratique.

jmtth · 2026-02-09T14:54:19Z

srcs/nginx/src/components/organisms/LoginForm.tsx

      login({ username: username, avatarUrl: null });
-      navigate(`/profile/${username}`, { replace: true });
+      // navigate(`/profile/${username}`, { replace: true });
+      navigate(`/welcome`, { replace: true });


Je ne suis pas sûr que rajouter une page soit la meilleure solution.
Il faudrait plutôt mettre une variable dans le local storage pour ne pas rejouer l'animation et que cette page soit directement intégrée à la racine.
Car lorsque nous ajouterons le retour à l'accueil, lors du clic sur le logo du site, c'est mieux d'aller directement à la racine plutôt que /welcome.

L'animation n'est pas geré dans cette PR (mis en place par francois) je ne m'en occupe pas, elle est mis en place sur la racine. Cela pourrait etre vu par la suite ? On s'etait mis d'accord pour avoir une welcome page (qui remplace /login et /signup), si ca ne te semble pas pertinent, il faudrai que tu propose une autre solution clair (et c'est bien de le proposé avant qu'on se mette a coder). Le display de la page d'acceuil pourrait tres bien se faire a la racine '/' mais la racine est deja dedié a l'animation de bienvenue. Nous pouvons redirer sur '/welcome' en cliquant sur le logo. Nous suivons le plans ce qui a été énoncé aux reunions, tu trouveras un shema UIX dans le discord ! Cette PR permet d'avoir un acces simple au /game/* afin d'avoir un developpement plus aisé de celui ci, et de construire un debut d'UIX final.

Il est préferable, d'arriver sur la welcome Page plutot que sur la page profile en premier lieux.(basique UIX)

La welcome page et la racine c'est la même chose.
L'animation se lance qu'au premier lancement., elle peut très bien cohabiter avec le bouton play un peu comme le isHovered
Lorsque tu clique sur le logo d'un site il te redirige vers l'accueil genre toto.fr mais jamais toto.fr/welcome
il n'est pas question d'arriver sur /profile mais juste la racine avec le bouton play
Ce que je disais c'est qu'il ne faut pas rajouter une page

Yes, je comprends ton point de vue, et le fait qu'une page en plus ne te semble pas pertinent. Cepandant, laisse moi rectifier certains concepts...

Non, la welcomePage (ou landing page) et la racine (ou nom de domaine) ne sont pas forcément la meme chose, elles peuvent l'etre, mais ce n'est pas systématique.

La pattern 'www.example.com/landingpage' est régulierement utilisé sur le web (on retrouve souvent une page 'langue', derriere le nom de domaine, qui fait office de landing page). Sur certains site web, quand tu tape le nom de domaine www.example.com, tu es redirigé sur une landing page --> www.example.com/landing_page

exemple:
https://www.facebook.com/?locale=fr_FR
https://www.microsoft.com/fr-fr
https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal --> (this one is a good one!)
https://www.sap.com/france/index.html
(il y en a pleins d'autres...)

Dans notre cas (pour le moment) la racine est utilisé pour jouer une animation.

Le fait d'avoir une landing page a la racine ou sur une page differente ne change pas grands chose sur notre projet (voir absolument rien).

Si tu veux qu'on reste a la racine, il faudrai modifier les '/welcome' en '/' , c'est pas grands chose à faire en soit mais comme il y a l'animation sur le '/' il faut gerer ca, et comme je te le disais, ce n'est pas dans le scope de ma PR (less is more ;) ).

Ceci dit, je pense que c'est facilement faisable d'associer l'animation + landing page a la racine, mais je ne voit pas pourquoi changer ce comportement (ca ne joue ni sur le rendus du site, ni sur notre eval). Personnellement je trouve que ca marche tres bien comme ca, et je vois pas pourquoi changer (l'animation qu'a fait francois est tres bien a la racine, why not ?) ! Mais on peut toujours le modifier si tu y tiens vraiment ?

So what should we do ?

Ok, ton point de vue m'a convaincu.
Je trouvais juste que les outils de React nous évitaient d'avoir de nombreuses pages et que nous gardions l'esprit du SPA

jmtth · 2026-02-09T14:55:12Z

srcs/nginx/src/components/organisms/RegisterForm.tsx

    if (user && isLoggedIn) {
-      navigate(`/profile/${user.username}`);
+      // navigate(`/profile/${user.username}`);
+      navigate(`/welcome`);


idem register form

Idem -> soit on reviens a la racine '/' avec l'animation, soit sur /welcome, mais pas sur /profile

Il y a une discussion sur le discord, a propos de l'UIX design, ou on parle de la navigation user et du comportement du front. Ce sujet (WelcomePage) a été abordé, et a été validé avec françois. On se retrouve sur le channel pour en parler plus précisement ! C'est toujours mieux d'en parler en amont, plutot que sur les PRs (quand c'est possible).

…instead of form

…for error msg

rom98759

👍🏼 Parfait rien a dire

codastream · 2026-02-12T16:57:28Z

srcs/nginx/src/components/molecules/CircleButton.tsx

c'est du détail, si ça n'inclut pas d'autres composants, ce serait à ranger dans atoms plutôt que molécules

codastream · 2026-02-12T17:01:17Z

srcs/nginx/src/locales/fr/common.json

+    "playWithAI": "Joue avec un ROBOT (no friends?)",
+    "playWithFriends": "Joue avec ton copaing",
+    "tournament": "Defi tes potes en tournois"


Suggested change

"playWithAI": "Joue avec un ROBOT (no friends?)",

"playWithFriends": "Joue avec ton copaing",

"tournament": "Defi tes potes en tournois"

"playWithAI": "Match IA",

"playWithFriends": "Jouer contre un ami",

"tournament": "Tournoi"

codastream · 2026-02-12T17:04:56Z

srcs/nginx/src/locales/tf/common.json

+  "game": {
+    "playWithAI": "No friends? Joue avec un ROBOT",
+    "playWithFriends": "Joue avec ton copaing",
+    "tournament": "Defi tes potes en tournois"


il faudrait des titres plus courts

Suggested change

"game": {

"playWithAI": "No friends? Joue avec un ROBOT",

"playWithFriends": "Joue avec ton copaing",

"tournament": "Defi tes potes en tournois"

"game": {

"playWithAI": "Seul ? Tape le bot",

"playWithFriends": "Entouré ? Tape ton pote",

"tournament": "Compét"

jmtth · 2026-02-09T19:33:21Z

srcs/nginx/src/components/molecules/Halo.tsx

+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Circle size={50} className="cursor-pointer">
+        {!isHovered ? (


trop bien
je teste demain matin

jmtth · 2026-02-10T07:56:06Z

srcs/nginx/src/components/organisms/LoginForm.tsx

      login({ username: username, avatarUrl: null });
-      navigate(`/profile/${username}`, { replace: true });
+      // navigate(`/profile/${username}`, { replace: true });
+      navigate(`/welcome`, { replace: true });


Ok, ton point de vue m'a convaincu.
Je trouvais juste que les outils de React nous évitaient d'avoir de nombreuses pages et que nous gardions l'esprit du SPA

jmtth · 2026-02-10T08:32:09Z

srcs/nginx/src/components/molecules/Halo.tsx

+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Circle size={50} className="cursor-pointer">
+        {!isHovered ? (


Presque parfait sur ordi, on peut accéder au formulaire facilement.

Par contre sur mobile il faudrait que le fond s'adapte à la page car ce n'est pas pratique.

ilia added 2 commits February 9, 2026 11:19

fix: add the actual WelcomePage.tsx

57cb9d2

Ilia1177 requested review from codastream, jmtth, lisambet and rom98759 as code owners February 9, 2026 10:44

ilia added 2 commits February 9, 2026 11:53

fix: Added onToggleForm in HaloProps

afede97

fix: redirect to welcomePage after login. Display 3 links if logged

49337b2

jmtth requested changes Feb 9, 2026

View reviewed changes

ilia added 3 commits February 9, 2026 17:04

fix: Add padding between forms and Halo. toggle form visibility

6200ccb

fix: Redirect to /welcome if wrong username. Padding apply to circle …

49621bd

…instead of form

fix: [NGINX]: change size of Halo when hovered, add spaceing in halo …

6341082

…for error msg

Ilia1177 requested a review from jmtth February 9, 2026 18:42

fix: [NGINX] Add CircleButton component, and use it to display options

8a008ee

rom98759 approved these changes Feb 11, 2026

View reviewed changes

codastream reviewed Feb 12, 2026

View reviewed changes

jmtth approved these changes Feb 13, 2026

View reviewed changes

Conversation

Ilia1177 commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Ilia1177 Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rom98759 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Ilia1177 commented Feb 9, 2026 •

edited

Loading

Ilia1177 Feb 9, 2026 •

edited

Loading