Added doodles.png

.45env45

@@ -0,0 +1,10 @@
+POSTGRES_PASSWORD=coucou
+JWT_SECRET=superlongsecretkeyatleast32characterspleasenevercommitthis
+POSTGRES_DB=database
+POSTGRES_HOST=database
+POSTGRES_USER=user
+GITHUB_CLIENT_ID=Ov23li6ovg3fzec5IO5D
+GITHUB_CLIENT_SECRET=0345e959e8f0e9f784061c5c90ee227ddb2ef9ab
+GITHUB_CALLBACK_URL=http://localhost:8080/api/auth/github/callback
+
+pogpog

Transcendence/Makefile

@@ -1,6 +1,8 @@
-all : up
+all :
+	@docker compose -f ./docker-compose.yml up -d
 
-up :
+no_cache :
+	@docker compose -f ./docker-compose.yml build --no-cache
 	@docker compose -f ./docker-compose.yml up -d
 
 clean :
@@ -10,448 +12,6 @@ fclean :
 	@docker compose -f ./docker-compose.yml down -v -t 1
 	@docker system prune -af --volumes
 
-re : fclean up
+re : fclean no_cache
 
-
+.PHONY : all no_cache clean fclean re
-
-# ╭────────────────────────────────────────────────────────────────────────────╮
-# │─██████████████─██████████████─██████████████─██████─────────██████████████─│
-# │─██░░░░░░░░░░██─██░░░░░░░░░░██─██░░░░░░░░░░██─██░░██─────────██░░░░░░░░░░██─│
-# │─██████░░██████─██░░██████░░██─██░░██████░░██─██░░██─────────██░░██████████─│
-# │─────██░░██─────██░░██──██░░██─██░░██──██░░██─██░░██─────────██░░██─────────│
-# │─────██░░██─────██░░██──██░░██─██░░██──██░░██─██░░██─────────██░░██████████─│
-# │─────██░░██─────██░░██──██░░██─██░░██──██░░██─██░░██─────────██░░░░░░░░░░██─│
-# │─────██░░██─────██░░██──██░░██─██░░██──██░░██─██░░██─────────██████████░░██─│
-# │─────██░░██─────██░░██──██░░██─██░░██──██░░██─██░░██─────────────────██░░██─│
-# │─────██░░██─────██░░██████░░██─██░░██████░░██─██░░██████████─██████████░░██─│
-# │─────██░░██─────██░░░░░░░░░░██─██░░░░░░░░░░██─██░░░░░░░░░░██─██░░░░░░░░░░██─│
-# │─────██████─────██████████████─██████████████─██████████████─██████████████─│
-# ╰────────────────────────────────────────────────────────────────────────────╯
-
-# --------------------------------------------------------------------------------- >
-VALGRIND = valgrind --leak-check=full --show-leak-kinds=all --track-origins=yes -s --track-fds=yes --trace-children=yes $(V_FLAG)
-
-# ↑さ↓ぎょう  を  ↓ほ↑ぞん
-# Default git push
-git: fclean
-	@$(call random_shmol_cat_blink, 作業を保存してるかな.., いいね、いいねえー , $(CLS), );
-	@current_date=$$(date); \
-	git add .; \
-	git commit -m "^^._, work in progress, small changes"; \
-	git push
-
-# Git Push that asks for commit msg
-git2: fclean
-	@$(call random_shmol_cat_blink, 作業を保存してるかな.., いいね、いいねえー , $(CLS), );
-	@read -p "Enter commit message: " msg; \
-	[ -z "$$msg" ] && msg=$$(date); \
-	git add .; \
-	git commit -m "$$msg"; \
-	git push
-
-# Git Push use the content of .gitmsg to push
-# if .gitmsg empty, return error
-# clear .gitmsg on succesfull push.
-GIT_MSG_FILE = ../.gitmsg
-git3: fclean
-	@$(call random_shmol_cat_blink, 作業を保存してるかな.., いいね、いいねえー , $(CLS), );
-	@{ \
-		msg="$$(cat $(GIT_MSG_FILE) 2>/dev/null)"; \
-		[ -z "$$msg" ] && { $(call random_shmol_cat_blink, error, file is empty, , ); exit 1; }; \
-		git add . && \
-		git commit -m "$$msg" && \
-		git push && \
-		: > $(GIT_MSG_FILE) && \
-		$(call random_shmol_cat_blink, success!, $(GIT_MSG_FILE) cleared., , ); \
-	}
-
-
-.SILENT: $(NAME)
-
-
-# ╭────────────────────────────────────────────────────────────────────────────────────╮
-# │─██████████████─████████████████───██████████─██████──────────██████─██████████████─│
-# │─██░░░░░░░░░░██─██░░░░░░░░░░░░██───██░░░░░░██─██░░██████████──██░░██─██░░░░░░░░░░██─│
-# │─██░░██████░░██─██░░████████░░██───████░░████─██░░░░░░░░░░██──██░░██─██████░░██████─│
-# │─██░░██──██░░██─██░░██────██░░██─────██░░██───██░░██████░░██──██░░██─────██░░██─────│
-# │─██░░██████░░██─██░░████████░░██─────██░░██───██░░██──██░░██──██░░██─────██░░██─────│
-# │─██░░░░░░░░░░██─██░░░░░░░░░░░░██─────██░░██───██░░██──██░░██──██░░██─────██░░██─────│
-# │─██░░██████████─██░░██████░░████─────██░░██───██░░██──██░░██──██░░██─────██░░██─────│
-# │─██░░██─────────██░░██──██░░██───────██░░██───██░░██──██░░██████░░██─────██░░██─────│
-# │─██░░██─────────██░░██──██░░██████─████░░████─██░░██──██░░░░░░░░░░██─────██░░██─────│
-# │─██░░██─────────██░░██──██░░░░░░██─██░░░░░░██─██░░██──██████████░░██─────██░░██─────│
-# │─██████─────────██████──██████████─██████████─██████──────────██████─────██████─────│
-# ╰────────────────────────────────────────────────────────────────────────────────────╯
-
-# C_213
-PURPLE = \033[38;5;97m
-# C_430
-GOLD = \033[38;5;178m
-# C_040
-GREEN1 = \033[38;5;40m
-# C_045
-BLUE1 = \033[38;5;45m
-
-# $(C_105), $(C_510), $(C_025)
-# $(RED), $(GOLD), $(BLUE1)
-
-test_color666:
-	@$(call random_cat, $(call pad_word, 12, The⠀Cake), $(call pad_word, 14, Is⠀A⠀Lie⠀...), $(CLS), $(RESET));
-	@$(call random_cat, $(call pad_word, 13, The⠀Cake), $(call pad_word, 15, Is⠀A⠀Lie⠀...), , $(RESET));
-
-
-# $(call pad_word, 12, The⠀Cake)
-pad_word = $(BLINK)$(shell printf "%$(1)s" "$(2)")$(RESET)
-# improve with: STRING1=$$(printf "\033[38;5;%dm" $$(shuf -i 0-255 -n 1));
-
-# --------------------------------------------------------------------------------- >
-# @$(call print_cat, $(CLEAR), $(body), $(eye), $(txt), $(call pad_word, 12, "The⠀Cake"), $(call pad_word, 12, "Is⠀A⠀Lie..."));
-# print_cat (resest?)(C_c)_sCtt$padded_txt_top))($(padded_txt_bot))
-define print_cat
-    echo -e "$(1)$(2)\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠒⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠇⠀⠘⡄⠀⠀⠀⠀⠀⠀⣀⠀⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡜⠀⠀⠀⠁⠉⠉⠉⠒⠊⠉⠀⡇⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡜$(3)$(BLINK)⣀⡀$(RESET)$(2)⠀⠀⠀⠀⠀⠀⠀⢰⠁⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠲⢴⠁$(3)$(BLINK)⠛⠁$(RESET)$(2)$(3)$(BLINK)⢀⣄$(RESET)$(2)⠀⠀⠀⢸⠀⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠑⠺⡀⠀⠀⢶⠤$(3)$(BLINK)⠈⠋$(RESET)$(2)⠀⠀⠀⡘⠀⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠑⢄⡀⠀⠀⠀⠠⣉⠑⠂⠀⢠⠃⠀⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠊⠀⠀⠀⠀⠀⠀⠁⠀⠀⠈⢆⠀⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⡆⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠤⠒⠒⠃⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⠀\n\
-	\t\t\t\t\t	⠀⠔⠑⠄⠀⠀⠀⠀⠀⠀⠀⠀⡎⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇\n\
-	\t\t\t\t\t	⠸⡀⠀⢣⠀⠀⠀⠀⠀⠀⠀⠀⡇$(4)$(5)$(2)⠀⠀⠀⠀⠀⡇\n\
-	\t\t\t\t\t	⠀⠱⡀⠀⠳⡀⠀⠀⠀⠀⠀⠀⢃$(4)$(6)$(2)⠀⠀⡸⠀\n\
-	\t\t\t\t\t	⠀⠀⠑⢄⠀⠈⠒⢄⡀⠀⠀⠀⠸⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡰⠁⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠑⠦⣀⠀⠈⠉⠐⠒⠒⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⢢⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠉⠐⠒⠠⠤⠤⠤⠤⠔⠂⠠⠤⠤⠤⠄⠐⠒⠂⠉⠉⠉⠉⠉⠁\n$(RESET)"
-endef
-
-# --------------------------------------------------------------------------------- >
-# @$(call random_cat, $(call pad_word, 12, txt1), $(call pad_word, 12, txt2), $(CLS), $(RESET));
-# print_cat (resest?)(C_c)_sCtt$padded_txt_top))($(padded_txt_bot))
-define random_cat
-	COLOR=$$(printf "\033[38;5;%dm" $$(shuf -i 0-255 -n 1)); \
-	COLOR2=$$(printf "\033[38;5;%dm" $$(shuf -i 0-255 -n 1)); \
-	COLOR3=$$(printf "\033[38;5;%dm" $$(shuf -i 0-255 -n 1)); \
-    echo -e "$(3)$${COLOR}\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠒⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠇⠀⠘⡄⠀⠀⠀⠀⠀⠀⣀⠀⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡜⠀⠀⠀⠁⠉⠉⠉⠒⠊⠉⠀⡇⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡜⠀$${COLOR2}$(BLINK)⣀⡀$(RESET)$${COLOR}⠀⠀⠀⠀⠀⠀⠀⠀⢰⠁⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠲⢴⠁⠀$${COLOR2}$(BLINK)⠛⠁$(RESET)$${COLOR}$${COLOR2}$(BLINK)⠀⠀⢀⣄$(RESET)$${COLOR}⠀⠀⠀⠀⢸⠀⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠑⠺⡀⠀⠀⢶⠤$${COLOR2}$(BLINK)⠀⠈⠋$(RESET)$${COLOR}⠀⠀⠀⠀⡘⠀⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠑⢄⡀⠀⠀⠀⠠⣉⠑⠂⠀⢠⠃⠀⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠊⠀⠀⠀⠀⠀⠀⠁⠀⠀⠈⢆⠀⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⡆⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠤⠒⠒⠃⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⠀\n\
-	\t\t\t\t\t	⠀⠔⠑⠄⠀⠀⠀⠀⠀⠀⠀⠀⡎⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇\n\
-	\t\t\t\t\t	⠸⡀⠀⢣⠀⠀⠀⠀⠀⠀⠀⠀⡇$${COLOR3}$(1)$${COLOR}⠀⠀⠀⠀⠀⡇\n\
-	\t\t\t\t\t	⠀⠱⡀⠀⠳⡀⠀⠀⠀⠀⠀⠀⢃$${COLOR3}$(2)$${COLOR}⠀⠀⡸⠀\n\
-	\t\t\t\t\t	⠀⠀⠑⢄⠀⠈⠒⢄⡀⠀⠀⠀⠸⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡰⠁⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠑⠦⣀⠀⠈⠉⠐⠒⠒⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⢢⠀\n\
-	\t\t\t\t\t	⠀⠀⠀⠀⠀⠀⠀⠉⠐⠒⠠⠤⠤⠤⠤⠔⠂⠠⠤⠤⠤⠄⠐⠒⠂⠉⠉⠉⠉⠉⠁\n$(4)"
-endef
-
-# --------------------------------------------------------------------------------- >
-# @$(call shmol_cat_color, $(C_c), $(C_t), txt1, txt2, $(CLS), $(RESET));
-define shmol_cat_color
-	echo -e "$(5)$(2)\
-	\tにゃ~$(1)\t⠀╱|、\n\
-	\t\t(˚ˎ。7⠀⠀⠀$(2)~ $(3) ~$(1)\n\
-	\t\t⠀|、˜\\\\\t\t$(2)$(4)$(1)\n\
-	\t\t⠀じしˍ)ノ\n$(6)"
-endef
-# --------------------------------------------------------------------------------- >
-# @$(call random_shmol_cat, text 1, text 2, $(CLS), $(RESET));
-# $(1)= $(CLEAR); $(2)= text1; $(3)= text2; $(4)= $(RESET)
-define random_shmol_cat
-	COLOR=$$(printf "\033[38;5;%dm" $$(shuf -i 1-255 -n 1)); \
-	COLOR2=$$(printf "\033[38;5;%dm" $$(shuf -i 0-255 -n 1)); \
-	echo -e "$(3)$${COLOR2}\
-	\tにゃ~$${COLOR}\t⠀╱|、\n\
-	\t\t(˚ˎ。7⠀⠀⠀$${COLOR2}~ $(1) ~$${COLOR}\n\
-	\t\t⠀|、˜\\\\\t\t$${COLOR2}~ $(2)$${COLOR}\n\
-	\t\t⠀じしˍ)ノ\n$(4)"
-endef
-
-# // <!> - - - - - - - - - - - </!>
-# --------------------------------------------------------------------------------- >
-rscs:
-	@$(call random_shmol_cat_surligne, text 1, text 2, $(CLS), $(RESET));
-
-define random_shmol_cat_surligne
-	COLOR=$$(printf "\033[0m\033[38;5;%dm" $$(shuf -i 0-255 -n 1)); \
-	COLOR2=$$(printf "\033[48;5;%dm" $$(shuf -i 0-255 -n 1)); \
-	echo -e "$(3)$${COLOR2}\
-	\tにゃ~$${COLOR}\t⠀╱|、\n\
-	\t\t(˚ˎ。7⠀⠀⠀$${COLOR2}~ $(1) ~$${COLOR}\n\
-	\t\t⠀|、˜\\\\\t\t$${COLOR2}~ $(2)$${COLOR}\n\
-	\t\t⠀じしˍ)ノ\n$(4)"
-endef
-
-rscb:
-	@$(call random_shmol_cat_blink, text 1, text 2, $(CLS), $(RESET));
-
-define random_shmol_cat_blink
-	COLOR=$$(printf "\033[0m\033[38;5;%dm" $$(shuf -i 0-255 -n 1)); \
-	COLOR2=$$(printf "\e[5m\033[38;5;%dm" $$(shuf -i 0-255 -n 1)); \
-	echo -e "$(3)\n$${COLOR2}\
-	\tにゃ~$${COLOR}\t⠀╱|、\n\
-	\t\t(˚ˎ。7⠀⠀⠀$${COLOR2}~ $(1) ~$${COLOR}\n\
-	\t\t⠀|、˜\\\\\t\t$${COLOR2}~ $(2)$${COLOR}\n\
-	\t\t⠀じしˍ)ノ\n$(4)"
-endef
-# // <!> - - - - - - - - - - - </!>
-# --------------------------------------------------------------------------------- >
-# @$(call shmol_cat_error, $(RED), $(RED_L));
-# $(1) = $(C_c)$2) = $(C_ttN CLS
-define shmol_cat_error
-	echo -e "$(2)\
-	\tにゃ~$(1)\t⠀╱|、\n\
-	\t\t(˚ˎ。7⠀⠀⠀$(2)~ somshin wen wong ~$(1)\n\
-	\t\t⠀|、˜\\\\\n\
-	\t\t⠀じしˍ)ノ\n$(RESET)"
-endef
-
-# 					Define all 256 colors
-CLEAR = \033[2J\033[H
-CLS = \033[2J\033[H
-RESET = \033[0m
-BLINK = \033[5m
-# U+2800 to U+28FF Braile
-# <Esc>[38;5;ColorNumberm
-BLACK = \033[38;5;0m
-RED = \033[38;5;1m
-GREEN = \033[38;5;2m
-YELLOW = \033[38;5;3m
-BLUE = \033[38;5;4m
-MAGENTA = \033[38;5;5m
-CYAN = \033[38;5;6m
-GRAY = \033[38;5;7m
-
-BLACK_L = \033[38;5;8m
-RED_L = \033[38;5;9m
-GREEN_L = \033[38;5;10m
-YELLOW_L = \033[38;5;11m
-BLUE_L = \033[38;5;12m
-MAGENTA_L = \033[38;5;13m
-CYAN_L = \033[38;5;14m
-WHITE = \033[38;5;15m
-
-C_000 = \033[38;5;16m
-C_001 = \033[38;5;17m
-C_002 = \033[38;5;18m
-C_003 = \033[38;5;19m
-C_004 = \033[38;5;20m
-C_005 = \033[38;5;21m
-C_010 = \033[38;5;22m
-C_011 = \033[38;5;23m
-C_012 = \033[38;5;24m
-C_013 = \033[38;5;25m
-C_014 = \033[38;5;26m
-C_015 = \033[38;5;27m
-C_020 = \033[38;5;28m
-C_021 = \033[38;5;29m
-C_022 = \033[38;5;30m
-C_023 = \033[38;5;31m
-C_024 = \033[38;5;32m
-C_025 = \033[38;5;33m
-C_030 = \033[38;5;34m
-C_031 = \033[38;5;35m
-C_032 = \033[38;5;36m
-C_033 = \033[38;5;37m
-C_034 = \033[38;5;38m
-C_035 = \033[38;5;39m
-C_040 = \033[38;5;40m
-C_041 = \033[38;5;41m
-C_042 = \033[38;5;42m
-C_043 = \033[38;5;43m
-C_044 = \033[38;5;44m
-C_045 = \033[38;5;45m
-C_050 = \033[38;5;46m
-C_051 = \033[38;5;47m
-C_052 = \033[38;5;48m
-C_053 = \033[38;5;49m
-C_054 = \033[38;5;50m
-C_055 = \033[38;5;51m
-C_100 = \033[38;5;52m
-C_101 = \033[38;5;53m
-C_102 = \033[38;5;54m
-C_103 = \033[38;5;55m
-C_104 = \033[38;5;56m
-C_105 = \033[38;5;57m
-C_110 = \033[38;5;58m
-C_111 = \033[38;5;59m
-C_112 = \033[38;5;60m
-C_113 = \033[38;5;61m
-C_114 = \033[38;5;62m
-C_115 = \033[38;5;63m
-C_120 = \033[38;5;64m
-C_121 = \033[38;5;65m
-C_122 = \033[38;5;66m
-C_123 = \033[38;5;67m
-C_124 = \033[38;5;68m
-C_125 = \033[38;5;69m
-C_130 = \033[38;5;70m
-C_131 = \033[38;5;71m
-C_132 = \033[38;5;72m
-C_133 = \033[38;5;73m
-C_134 = \033[38;5;74m
-C_135 = \033[38;5;75m
-C_140 = \033[38;5;76m
-C_141 = \033[38;5;77m
-C_142 = \033[38;5;78m
-C_143 = \033[38;5;79m
-C_144 = \033[38;5;80m
-C_145 = \033[38;5;81m
-C_150 = \033[38;5;82m
-C_151 = \033[38;5;83m
-C_152 = \033[38;5;84m
-C_153 = \033[38;5;85m
-C_154 = \033[38;5;86m
-C_155 = \033[38;5;87m
-C_200 = \033[38;5;88m
-C_201 = \033[38;5;89m
-C_202 = \033[38;5;90m
-C_203 = \033[38;5;91m
-C_204 = \033[38;5;92m
-C_205 = \033[38;5;93m
-C_210 = \033[38;5;94m
-C_211 = \033[38;5;95m
-C_212 = \033[38;5;96m
-C_213 = \033[38;5;97m
-C_214 = \033[38;5;98m
-C_215 = \033[38;5;99m
-C_220 = \033[38;5;100m
-C_221 = \033[38;5;101m
-C_222 = \033[38;5;102m
-C_223 = \033[38;5;103m
-C_224 = \033[38;5;104m
-C_225 = \033[38;5;105m
-C_230 = \033[38;5;106m
-C_231 = \033[38;5;107m
-C_232 = \033[38;5;108m
-C_233 = \033[38;5;109m
-C_234 = \033[38;5;110m
-C_235 = \033[38;5;111m
-C_240 = \033[38;5;112m
-C_241 = \033[38;5;113m
-C_242 = \033[38;5;114m
-C_243 = \033[38;5;115m
-C_244 = \033[38;5;116m
-C_245 = \033[38;5;117m
-C_250 = \033[38;5;118m
-C_251 = \033[38;5;119m
-C_252 = \033[38;5;120m
-C_253 = \033[38;5;121m
-C_254 = \033[38;5;122m
-C_255 = \033[38;5;123m
-C_300 = \033[38;5;124m
-C_301 = \033[38;5;125m
-C_302 = \033[38;5;126m
-C_303 = \033[38;5;127m
-C_304 = \033[38;5;128m
-C_305 = \033[38;5;129m
-C_310 = \033[38;5;130m
-C_311 = \033[38;5;131m
-C_312 = \033[38;5;132m
-C_313 = \033[38;5;133m
-C_314 = \033[38;5;134m
-C_315 = \033[38;5;135m
-C_320 = \033[38;5;136m
-C_321 = \033[38;5;137m
-C_322 = \033[38;5;138m
-C_323 = \033[38;5;139m
-C_324 = \033[38;5;140m
-C_325 = \033[38;5;141m
-C_330 = \033[38;5;142m
-C_331 = \033[38;5;143m
-C_332 = \033[38;5;144m
-C_333 = \033[38;5;145m
-C_334 = \033[38;5;146m
-C_335 = \033[38;5;147m
-C_340 = \033[38;5;148m
-C_341 = \033[38;5;149m
-C_342 = \033[38;5;150m
-C_343 = \033[38;5;151m
-C_344 = \033[38;5;152m
-C_345 = \033[38;5;153m
-C_350 = \033[38;5;154m
-C_351 = \033[38;5;155m
-C_352 = \033[38;5;156m
-C_353 = \033[38;5;157m
-C_354 = \033[38;5;158m
-C_355 = \033[38;5;159m
-C_400 = \033[38;5;160m
-C_401 = \033[38;5;161m
-C_402 = \033[38;5;162m
-C_403 = \033[38;5;163m
-C_404 = \033[38;5;164m
-C_405 = \033[38;5;165m
-C_410 = \033[38;5;166m
-C_411 = \033[38;5;167m
-C_412 = \033[38;5;168m
-C_413 = \033[38;5;169m
-C_414 = \033[38;5;170m
-C_415 = \033[38;5;171m
-C_420 = \033[38;5;172m
-C_421 = \033[38;5;173m
-C_422 = \033[38;5;174m
-C_423 = \033[38;5;175m
-C_424 = \033[38;5;176m
-C_425 = \033[38;5;177m
-C_430 = \033[38;5;178m
-C_431 = \033[38;5;179m
-C_432 = \033[38;5;180m
-C_433 = \033[38;5;181m
-C_434 = \033[38;5;182m
-C_435 = \033[38;5;183m
-C_440 = \033[38;5;184m
-C_441 = \033[38;5;185m
-C_442 = \033[38;5;186m
-C_443 = \033[38;5;187m
-C_444 = \033[38;5;188m
-C_445 = \033[38;5;189m
-C_450 = \033[38;5;190m
-C_451 = \033[38;5;191m
-C_452 = \033[38;5;192m
-C_453 = \033[38;5;193m
-C_454 = \033[38;5;194m
-C_455 = \033[38;5;195m
-C_500 = \033[38;5;196m
-C_501 = \033[38;5;197m
-C_502 = \033[38;5;198m
-C_503 = \033[38;5;199m
-C_504 = \033[38;5;200m
-C_505 = \033[38;5;201m
-C_510 = \033[38;5;202m
-C_511 = \033[38;5;203m
-C_512 = \033[38;5;204m
-C_513 = \033[38;5;205m
-C_514 = \033[38;5;206m
-C_515 = \033[38;5;207m
-C_520 = \033[38;5;208m
-C_521 = \033[38;5;209m
-C_522 = \033[38;5;210m
-C_523 = \033[38;5;211m
-C_524 = \033[38;5;212m
-C_525 = \033[38;5;213m
-C_530 = \033[38;5;214m
-C_531 = \033[38;5;215m
-C_532 = \033[38;5;216m
-C_533 = \033[38;5;217m
-C_534 = \033[38;5;218m
-C_535 = \033[38;5;219m
-C_540 = \033[38;5;220m
-C_541 = \033[38;5;221m
-C_542 = \033[38;5;222m
-C_543 = \033[38;5;223m
-C_544 = \033[38;5;224m
-C_545 = \033[38;5;225m
-C_550 = \033[38;5;226m
-C_551 = \033[38;5;227m
-C_552 = \033[38;5;228m
-C_553 = \033[38;5;229m
-C_554 = \033[38;5;230m
-C_555 = \033[38;5;231m

Transcendence/docker-compose.yml

@@ -1,5 +1,5 @@
 volumes:
-  pgdata:
+  data:
 
 networks:
   transcendence:
@@ -12,7 +12,7 @@ services:
     ports:
       - "5432:5432"
     volumes:
-      - pgdata:/var/lib/postgresql
+      - data:/var/lib/postgresql/data/pg15/
     env_file:
       - ../.env
     networks:
@@ -24,6 +24,8 @@ services:
     build: ./srcs/backend
     expose:
       - "3001"
+    # ports:
+    #   - "3001:3001"
     depends_on:
       - database
     volumes:
@@ -38,7 +40,7 @@ services:
     container_name: frontend
     build: ./srcs/frontend/
     ports:
-      - "8443:443"
+      - "8080:80"
     depends_on:
       - backend
     networks:

Transcendence/srcs/backend/db.js

@@ -127,7 +127,7 @@ async function createTables()
 				status VARCHAR(20) DEFAULT 'waiting',
 				max_players INT DEFAULT 8,
 				current_round INT DEFAULT 0,
-				max_rounds INT DEFAULT 5,
+				max_rounds INT DEFAULT 3,
 				round_duration INT DEFAULT 90,
 				created_at TIMESTAMP DEFAULT NOW(),
 				started_at TIMESTAMP,

Transcendence/srcs/backend/dockerfile

@@ -1,13 +1,5 @@
 FROM node:20-alpine
 
-RUN apk add --no-cache openssl
-RUN mkdir -p /etc/backend/.ssl
-RUN openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
-	-keyout /etc/backend/.ssl/key.pem \
-	-out /etc/backend/.ssl/cert.pem \
-	-subj "/CN=localhost" \
-	-addext "subjectAltName=DNS:localhost,IP:127.0.0.1"
-
 WORKDIR /app
 
 COPY package*.json ./

Transcendence/srcs/backend/index.js

@@ -1,6 +1,5 @@
 import express from 'express';
-import https from 'https';
+import http from 'http';
-import fs from 'fs';
 import cors from 'cors';
 import {Server} from 'socket.io';
 import authRouter from './routes/auth.js';
@@ -14,11 +13,7 @@ import setupSocketIO from './services/socket.js';
 import avatarService from './services/avatar.js';
 
 const app = express();
-const httpsOptions = {
+const server = http.createServer(app);
-	key: fs.readFileSync('/etc/backend/.ssl/key.pem'),
-	cert: fs.readFileSync('/etc/backend/.ssl/cert.pem')
-};
-const server = https.createServer(httpsOptions, app);
 const io = new Server(server,
 {
 	cors:

Transcendence/srcs/backend/routes/auth.js

@@ -26,17 +26,6 @@ router.post('/login', async(req, res) =>
 	res.status(result.status).json(result.data);
 });
 
-router.post('/logout', async(req, res) =>
-{
-  const authHeader = req.headers['authorization'];
-  const token = authHeader && authHeader.split(' ')[1];
-  if (!token)
-    return (res.status(401).json({error: 'Missing token'}));
-
-  const result = await authService.logout(token);
-  res.status(result.status).json(result.data);
-});
-
 router.get('/github', (req, res) => {
   const githubAuthUrl = `https://github.com/login/oauth/authorize?` +
     `client_id=${process.env.GITHUB_CLIENT_ID}&` +

Transcendence/srcs/backend/routes/avatar.js

@@ -25,7 +25,7 @@ router.post('/upload', authenticateToken, upload.single('avatar'), async(req, re
 	res.status(result.status).json(result.data);
 });
 
-router.delete('/delete', authenticateToken, async(req, res) =>
+router.delete('/', authenticateToken, async(req, res) =>
 {
 	const result = await avatarService.deleteAvatar(req.user.userId);
 	res.status(result.status).json(result.data);

Transcendence/srcs/backend/services/auth.js

@@ -2,30 +2,6 @@ import bcrypt from 'bcrypt';
 import jwt from 'jsonwebtoken';
 import {query} from '../db.js';
 
-async function logout(token)
-{
-	try
-	{
-		if (!token)
-			return ({status: 400, data: {error: 'Missing token'}});
-		try
-		{
-			jwt.verify(token, process.env.JWT_SECRET);
-		}
-		catch
-		{
-			return ({status: 401, data: {error: 'Invalid token'}});
-		}
-
-		return ({status: 200, data: {message: 'Logged out'}});
-	}
-	catch (err)
-	{
-		console.error(err);
-		return ({status: 500, data: {error: 'Server error'}});
-	}
-}
-
 async function login(username, password)
 {
 	try
@@ -84,4 +60,4 @@ async function register(username, password)
 	}
 };
 
-export default {register, login, logout};
+export default {register, login};

Transcendence/srcs/backend/services/avatar.js

@@ -69,9 +69,6 @@ async function deleteAvatar(userId) {
 		if (currentAvatar === null)
 			return ({status: 404, data: {error: 'User not found'}});
 
-		if (currentAvatar === DEFAULT_AVATAR)
-			return ({status: 400, data: {error: 'Cannot delete default avatar'}});
-
 		// Reset the avatar to the default one
 		await setAvatar(DEFAULT_AVATAR, userId);
 

Transcendence/srcs/backend/services/socket.js

@@ -30,63 +30,6 @@ async function broadcastRoomsList(io) {
 	}
 }
 
-function startRoomTimer(io, roomId, seconds)
-{
-	const gameState = gameRooms.get(roomId);
-	if (!gameState) return;
-
-	if (gameState.timerInterval)
-		clearInterval(gameState.timerInterval);
-
-	gameState.timerSeconds = seconds;
-
-	gameState.timerInterval = setInterval(() => {
-		gameState.timerSeconds--;
-
-		if (gameState.timerSeconds < 0)
-			gameState.timerSeconds = 0;
-
-		if (gameState.timerSeconds <= 0)
-		{
-			io.to(roomId).emit('game-timer-sync', {
-				remaining: 0
-			});
-			clearInterval(gameState.timerInterval);
-			gameState.timerInterval = null;
-			io.to(roomId).emit('game-timer-ended', { message: 'Temps écoulé !' });
-
-			gameState.currentPlayerIndex = (gameState.currentPlayerIndex + 1) % gameState.players.length;
-			const nextDrawer = gameState.players[gameState.currentPlayerIndex];
-			gameState.drawer = nextDrawer;
-			
-
-			gameState.currentWord = '';
-			gameState.revealedLetters = [];
-			gameState.revealedWord = [];
-			gameState.guessedLetters = [];
-			gameState.wrongGuesses = 0;
-
-			io.to(roomId).emit('game-new-round', {
-				drawer: nextDrawer
-			});
-		}
-		else
-		{
-			io.to(roomId).emit('game-timer-sync', {
-				remaining: gameState.timerSeconds
-			});
-		}
-	}, 1000);
-}
-
-function stopRoomTimer(roomId)
-{
-	const gameState = gameRooms.get(roomId);
-	if (!gameState || !gameState.timerInterval) return;
-	clearInterval(gameState.timerInterval);
-	gameState.timerInterval = null;
-}
-
 // Check if a playing game has only 1 player left and auto-stop it
 async function checkAndStopSinglePlayerGame(io, roomId, dbRoomId) {
 	if (!dbRoomId) return;
@@ -100,7 +43,6 @@ async function checkAndStopSinglePlayerGame(io, roomId, dbRoomId) {
 		const players = await gameRoomService.getRoomPlayers(dbRoomId);
 		if (players.length <= 1) {
 			console.log(`Room ${dbRoomId} has only ${players.length} player(s) left, ending game`);
-			stopRoomTimer(roomId);
 			
 			// Update room status to 'ended'
 			await gameRoomService.updateRoomStatus(dbRoomId, 'waiting');
@@ -250,9 +192,7 @@ function setupSocketIO(io)
 					revealedLetters: gameState.revealedLetters,
 					revealedWord: gameState.revealedWord || [],
 					guessedLetters: gameState.guessedLetters,
-					players: gameState.players,
+					players: gameState.players
-					scores: gameState.scores || {},
-					timer: gameState.timerSeconds || 0
 				});
 			}
 		});
@@ -262,15 +202,6 @@ function setupSocketIO(io)
 			if (socket.gameRoomId) {
 				const roomId = socket.gameRoomId;
 				const dbRoomId = socket.gameRoomDbId;
-				const userId = socket.user.userId;
-
-				if (dbRoomId && userId) {
-					try {
-						await gameRoomService.leaveRoom(dbRoomId, userId);
-					} catch (err) {
-						console.error('Error removing player from room on socket leave:', err.message);
-					}
-				}
 
 				socket.to(roomId).emit('game-player-left', {
 					username: socket.user.username,
@@ -337,8 +268,7 @@ function setupSocketIO(io)
 						revealedWord: gameState.revealedWord || [],
 						guessedLetters: gameState.guessedLetters,
 						players: gameState.players,
-						scores: gameState.scores || {},
+						scores: gameState.scores || {}
-						timer: gameState.timerSeconds || 0
 					});
 				}
 			} catch (err) {
@@ -460,7 +390,6 @@ function setupSocketIO(io)
 			const gameState = gameRooms.get(roomId);
 			if (!gameState) return;
 
-			startRoomTimer(io, roomId, 60);
 			gameState.currentWord = data.word.toLowerCase();
 			gameState.revealedLetters = new Array(data.word.length).fill(false);
 			gameState.revealedWord = new Array(data.word.length).fill('_');
@@ -623,8 +552,6 @@ function setupSocketIO(io)
 				// Update round start scores for next round
 				gameState.roundStartScores = { ...gameState.scores };
 
-				stopRoomTimer(roomId);
-
 				io.to(roomId).emit('game-word-found', {
 					word: gameState.currentWord,
 					winner: username,
@@ -686,7 +613,6 @@ function setupSocketIO(io)
 					// If the drawer left and there are still enough players, choose a new drawer
 					if (wasDrawer && gameState.players.length >= 1)
 					{
-						stopRoomTimer(roomId);
 						// Pick the next player as the new drawer
 						gameState.currentPlayerIndex = gameState.currentPlayerIndex % gameState.players.length;
 						const newDrawer = gameState.players[gameState.currentPlayerIndex];
@@ -706,7 +632,6 @@ function setupSocketIO(io)
 							reason: 'drawer_left',
 							message: `${username} (dessinateur) a quitté, ${newDrawer} devient le nouveau dessinateur`
 						});
-						startRoomTimer(io, roomId, 60);
 					}
 				}
 
@@ -727,7 +652,6 @@ function setupSocketIO(io)
 		socket.on('game-end', async () => {
 			const roomId = socket.gameRoomId;
 			if (!roomId) return;
-			stopRoomTimer(roomId);
 
 			// Update room status to 'waiting' in database
 			const dbRoomId = socket.gameRoomDbId;
@@ -806,16 +730,6 @@ function setupSocketIO(io)
 			_tetrisRelayToOpponent(socket, 'tetris:lines-cleared', data);
 		});
 
-		// Relay pur : shield-activated → adversaire uniquement
-		socket.on('tetris:shield-activated', () => {
-			_tetrisRelayToOpponent(socket, 'tetris:shield-activated', {});
-		});
-
-		// Relay pur : shield-deactivated → adversaire uniquement
-		socket.on('tetris:shield-deactivated', () => {
-			_tetrisRelayToOpponent(socket, 'tetris:shield-deactivated', {});
-		});
-
 		// start-duel → relayé aux DEUX joueurs de la room (inclut l'émetteur)
 		socket.on('tetris:start-duel', () => {
 			const code = socket.tetrisRoomCode;
@@ -943,14 +857,6 @@ function setupSocketIO(io)
 				}
 				else
 				{
-					if (dbRoomId && socket.user.userId) {
-						try {
-							await gameRoomService.leaveRoom(dbRoomId, socket.user.userId);
-						} catch (err) {
-							console.error('Error removing disconnected player from room:', err.message);
-						}
-					}
-
 					// Regular player disconnect
 					socket.to(roomId).emit('game-player-left', {
 						username: socket.user.username,

Transcendence/srcs/frontend/dockerfile

@@ -1,12 +1,5 @@
 FROM nginx:alpine
-RUN apk add --no-cache openssl && \
-    mkdir -p /etc/nginx/ssl && \
-    openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
-    -keyout /etc/nginx/ssl/key.pem \
-    -out /etc/nginx/ssl/cert.pem \
-    -subj "/CN=localhost" \
-    -addext "subjectAltName=DNS:localhost,IP:127.0.0.1"
 COPY src /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
-EXPOSE 443
+EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

Transcendence/srcs/frontend/nginx.conf

@@ -1,9 +1,5 @@
 server {
-    listen 443 ssl;
+    listen 80;
-
-    ssl_certificate /etc/nginx/ssl/cert.pem;
-    ssl_certificate_key /etc/nginx/ssl/key.pem;
-    error_page 497 =301 https://$host:8443$request_uri;
 
     root /usr/share/nginx/html;
     index index.html;
@@ -15,33 +11,27 @@ server {
 
     # Backend API
     location /api/ {
-        proxy_pass https://backend:3001;
+        proxy_pass http://backend:3001;
-		proxy_ssl_verify off;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-Proto https;
     }
 
     # Socket.IO WebSocket proxying
     location /socket.io/ {
-        proxy_pass https://backend:3001;
+        proxy_pass http://backend:3001;
-		proxy_ssl_verify off;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto https;
+        proxy_set_header X-Forwarded-Proto $scheme;
-        proxy_read_timeout 3600s;
-        proxy_send_timeout 3600s;
     }
 
     location /avatar/ {
-        proxy_pass https://backend:3001/avatar/;
+        proxy_pass http://backend:3001/avatar/;
         proxy_http_version 1.1;
         proxy_set_header Host $host;
-        proxy_ssl_verify off;
         proxy_hide_header Content-Type;
         add_header Cache-Control "public, max-age=3600";
     }

Transcendence/srcs/frontend/src/app.js

@@ -2,14 +2,13 @@
  * Application entry point
  * Initializes windows and handles menu interactions
  */
-import { windowRegistry } from '../core/windows.js';
+import { windowRegistry } from './windows.js';
-import { LoginWindow } from '../windows/login.js';
+import { LoginWindow } from './login.js';
-import { LogoutWindow } from '../windows/logout.js';
+import { GlobalChat } from './global_chat.js';
-import { GlobalChat } from '../windows/global_chat.js';
+import { AvatarWindow } from './avatar.js';
-import { AvatarWindow } from '../windows/avatar.js';
+import { FriendsWindow } from './friends.js';
-import { FriendsWindow } from '../windows/friends.js';
+import { GameRoomWindow } from './game_room.js';
-import { GameRoomWindow } from '../windows/game_room.js';
+import { StatsWindow } from './stats.js';
-import { StatsWindow } from '../windows/stats.js';
 
 /**
  * Main application class
@@ -17,6 +16,7 @@ import { StatsWindow } from '../windows/stats.js';
  */
 class App {
     constructor() {
+        console.log("APP STARTED");
         this.initWindows();
         this.initMenu();
         this.initPage();
@@ -34,7 +34,6 @@ class App {
         new FriendsWindow();
         new GameRoomWindow();
         new StatsWindow();
-        new LogoutWindow();
     }
 
     /**
@@ -52,8 +51,7 @@ class App {
             'login': 'login',
             'chat': 'chat',
             'avatar': 'avatar',
-            'friends': 'friends',
+            'friends': 'friends'
-            'logout': 'logout'
         };
 
         // Event delegation on the menu
@@ -78,6 +76,10 @@ class App {
             return;
         }
 
+        const actionMap = {
+            'gameroom': 'gameroom'
+        };
+
         // Event delegation on the menu
         page.addEventListener('click', (e) => {
             const button = e.target.closest('.page__item');
@@ -85,14 +87,9 @@ class App {
 
             const action = button.dataset.action;
 
-            if (action === 'gameroom') {
+            // Actions with associated windows
-                const gameRoomWindow = windowRegistry.get('gameroom');
+            if (actionMap[action]) {
-                windowRegistry.toggle('gameroom');
+                windowRegistry.toggle(actionMap[action]);
-				gameRoomWindow.loadRooms();
-
-                if (gameRoomWindow?.currentTab === 'browse') {
-                    gameRoomWindow.loadRooms();
-                }
                 return;
             }
 
@@ -113,34 +110,34 @@ class App {
 
     colorizeUI() {
     
-        const elements = document.querySelectorAll(".title, .menu__item, .game__item, .page__item");
+    const elements = document.querySelectorAll(".title, .menu__item, .game__item, .page__item");
 
-        const colorizeText = (el) => {
+    const colorizeText = (el) => {
-            const text = el.textContent;
+        const text = el.textContent;
-            el.innerHTML = "";
+        el.innerHTML = "";
 
-            const baseHue = Math.random() * 360;
+        const baseHue = Math.random() * 360;
 
-            // 🎲 random step = makes rainbow "scrambled"
+        // 🎲 random step = makes rainbow "scrambled"
-            const step = (Math.random() * 60) + 10; // 10 → 70
+        const step = (Math.random() * 60) + 10; // 10 → 70
 
-            // 🎲 random direction (left or right rainbow)
+        // 🎲 random direction (left or right rainbow)
-            const direction = Math.random() < 0.5 ? 1 : -1;
+        const direction = Math.random() < 0.5 ? 1 : -1;
 
-            [...text].forEach((char, i) => {
+        [...text].forEach((char, i) => {
-                const span = document.createElement("span");
+            const span = document.createElement("span");
-                span.textContent = char;
+            span.textContent = char;
 
-                const hue = baseHue + (i * step * direction);
+            const hue = baseHue + (i * step * direction);
 
-                span.style.color = `hsl(${hue}, 90%, 60%)`;
+            span.style.color = `hsl(${hue}, 90%, 60%)`;
 
-                span.style.textShadow = `1px 1px 0 rgba(0,0,0,0.3)`;
+            span.style.textShadow = `1px 1px 0 rgba(0,0,0,0.3)`;
 
-                el.appendChild(span);
+            el.appendChild(span);
-            });
+        });
-        };
+    };
-        elements.forEach(colorizeText);
+    elements.forEach(colorizeText);
     }
 
 }
@@ -150,4 +147,4 @@ if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', () => new App());
 } else {
     new App();
-}
+}

Transcendence/srcs/frontend/src/avatar.js

@@ -1,6 +1,6 @@
-import { Window, windowRegistry } from '../core/windows.js';
+import { Window, windowRegistry } from './windows.js';
-import { API, STORAGE_KEYS, CSS } from '../core/config.js';
+import { API, STORAGE_KEYS, CSS } from './config.js';
-import { eventBus, Events } from '../core/events.js';
+import { eventBus, Events } from './events.js';
 
 /**
  * Avatar management window
@@ -67,12 +67,8 @@ export class AvatarWindow extends Window {
         this.refreshBtn = this.createElement('button', [CSS.BTN, CSS.BTN_SECONDARY], {
             text: 'Refresh'
         });
-        
-        this.deleteBtn = this.createElement('button', [CSS.BTN, CSS.BTN_SECONDARY], {
-            text: 'Delete avatar'
-        });
 
-        this.controls.append(this.statsBtn, this.chooseBtn, this.saveBtn, this.refreshBtn, this.deleteBtn);
+        this.controls.append(this.statsBtn, this.chooseBtn, this.saveBtn, this.refreshBtn);
 
         // Feedback message
         this.message = this.createElement('div', CSS.MESSAGE);
@@ -97,7 +93,6 @@ export class AvatarWindow extends Window {
         this.chooseBtn.addEventListener('click', () => this.fileInput.click());
         this.saveBtn.addEventListener('click', () => this.uploadAvatar());
         this.refreshBtn.addEventListener('click', () => this.loadAvatar());
-        this.deleteBtn.addEventListener('click', () => this.deleteAvatar());
     }
 
     /**
@@ -217,14 +212,12 @@ export class AvatarWindow extends Window {
         const token = localStorage.getItem(STORAGE_KEYS.AUTH_TOKEN);
         if (!token) {
             this.showMessage('You must be logged in', 'error');
-            this.showNotification('You must be logged in to change your avatar', 'red');
             return;
         }
 
         const file = this.fileInput.files?.[0];
         if (!file) {
             this.showMessage('Select an image first', 'error');
-            this.showNotification('Please select an image to upload', 'red');
             return;
         }
 
@@ -247,7 +240,6 @@ export class AvatarWindow extends Window {
             if (!response.ok) {
                 const errorMsg = data?.error || data?.message || 'Upload failed';
                 this.showMessage(errorMsg, 'error');
-                this.showNotification('Failed to upload avatar.', 'red');
                 return;
             }
 
@@ -256,47 +248,11 @@ export class AvatarWindow extends Window {
             }
 
             this.showMessage('Avatar saved!', 'success');
-            this.showNotification('Avatar updated successfully!', 'green');
             eventBus.emit(Events.AVATAR_UPDATED, { url: data?.avatar_url });
 
         } catch (error) {
             console.error('Avatar upload error:', error);
             this.showMessage('Upload error', 'error');
-            this.showNotification('Failed to upload avatar.', 'red');
-        }
-    }
-
-    async deleteAvatar() {
-        const token = localStorage.getItem(STORAGE_KEYS.AUTH_TOKEN);
-        if (!token) {
-            this.showMessage('You must be logged in', 'error');
-            this.showNotification('You must be logged in to delete your avatar', 'red');
-            return;
-        }
-
-        try {
-            const response = await fetch(API.AVATAR.DELETE, {
-                method: 'DELETE',
-                headers: {
-                    'Authorization': `Bearer ${token}`
-                }
-            });
-
-            if (!response.ok) {
-                this.showMessage('Failed to delete avatar', 'error');
-                this.showNotification('Failed to delete avatar.', 'red');
-                return;
-            }
-
-            this.preview.src = '';
-            this.showMessage('Avatar deleted!', 'success');
-            this.showNotification('Avatar deleted successfully!', 'green');
-            eventBus.emit(Events.AVATAR_DELETED);
-
-        } catch (error) {
-            console.error('Avatar delete error:', error);
-            this.showMessage('Delete error', 'error');
-            this.showNotification('Failed to delete avatar.', 'red');
         }
     }
 

Transcendence/srcs/frontend/src/config.js

@@ -6,14 +6,12 @@
 export const API = {
     AUTH: {
         LOGIN: '/api/auth/login',
-        LOGOUT: '/api/auth/logout',
         REGISTER: '/api/auth/register',
         GITHUB: '/api/auth/github'
     },
     AVATAR: {
         GET: '/api/avatar/me',
-        UPLOAD: '/api/avatar/upload',
+        UPLOAD: '/api/avatar/upload'
-        DELETE: '/api/avatar/delete'
     },
     FRIENDS: {
         LIST: '/api/friends',

Transcendence/srcs/frontend/src/duel.js

@@ -3,20 +3,17 @@
 // ─────────────────────────────────────────────
 
 class Duel {
-    // ui : { showOverlay, hideOverlay, render, renderOpponent, updateButtons }
+    constructor(socket, tetrisGame, onStatusChange, onStart) {
-    constructor(socket, tetrisGame, onStatusChange, onStart, ui) {
         this.socket         = socket;
         this.tetrisGame     = tetrisGame;
-        this.onStatusChange = onStatusChange;
+        this.onStatusChange = onStatusChange;   // (status, opponentName) => void
-        this.onStart        = onStart;
+        this.onStart        = onStart;          // () => void — déclenche le début du jeu local
-        this.ui             = ui;
 
-        this.action_queue         = [];
+        this.action_queue   = [];
-        this.opponentGrid         = this._emptyGrid();
+        this.opponentGrid   = this._emptyGrid();
-        this.opponentScore        = 0;
+        this.opponentScore  = 0;
-        this.opponentShieldActive = false;
+        this.roomCode       = null;
-        this.roomCode             = null;
+        this.isReady        = false;
-        this.isReady              = false;
 
         this._bindSocketEvents();
     }
@@ -36,11 +33,10 @@ class Duel {
     leave() {
         if (!this.roomCode) return;
         this.socket.emit('tetris:leave');
-        this.roomCode             = null;
+        this.roomCode  = null;
-        this.isReady              = false;
+        this.isReady   = false;
-        this.opponentGrid         = this._emptyGrid();
+        this.opponentGrid = this._emptyGrid();
-        this.opponentScore        = 0;
+        this.opponentScore = 0;
-        this.opponentShieldActive = false;
     }
 
     // ─── Hooks appelés par tetris.js ──────────
@@ -52,7 +48,9 @@ class Duel {
 
     onLocalLinesCleared(count, holeCol) {
         if (!this.isReady) return;
-        const garbageLines = Array.from({ length: count }, () => this._buildGarbageLine(holeCol));
+        const garbageLines = [];
+        for (let i = 0; i < count; i++)
+            garbageLines.push(this._buildGarbageLine(holeCol));
         this.socket.emit('tetris:lines-cleared', { count, holeCol, garbageLines });
     }
 
@@ -62,12 +60,6 @@ class Duel {
         this.endDuel();
     }
 
-    onLocalShieldChanged(event) {
-        if (!this.isReady) return;
-        if (event === 'activated')   this.socket.emit('tetris:shield-activated');
-        else if (event === 'deactivated') this.socket.emit('tetris:shield-deactivated');
-    }
-
     endDuel() {
         this.isReady      = false;
         this.action_queue = [];
@@ -78,7 +70,8 @@ class Duel {
 
     synchronize_game() {
         while (this.action_queue.length > 0) {
-            this._processAction(this.action_queue.shift());
+            const action = this.action_queue.shift();
+            this._processAction(action);
         }
     }
 
@@ -88,7 +81,7 @@ class Duel {
                 this.opponentGrid  = action.grid;
                 this.opponentScore = action.score;
                 document.getElementById('opponent-score').textContent = action.score;
-                this.ui.renderOpponent(this.opponentGrid, this.opponentShieldActive);
+                renderOpponent(this.opponentGrid);
                 break;
 
             case 'LINES_CLEARED':
@@ -96,17 +89,9 @@ class Duel {
                 break;
 
             case 'OPPONENT_GAME_OVER':
-                this.ui.showOverlay('YOU WIN', action.score);
+                showOverlay('YOU WIN', action.score);
                 this.endDuel();
                 break;
-
-            case 'OPPONENT_SHIELD_ACTIVATED':
-                this.opponentShieldActive = true;
-                break;
-
-            case 'OPPONENT_SHIELD_DEACTIVATED':
-                this.opponentShieldActive = false;
-                break;
         }
     }
 
@@ -142,36 +127,28 @@ class Duel {
             this.action_queue.push({ type: 'OPPONENT_GAME_OVER', score: data.score, validBlock: data.validBlock });
         });
 
-        this.socket.on('tetris:shield-activated', () => {
-            this.action_queue.push({ type: 'OPPONENT_SHIELD_ACTIVATED' });
-        });
-
-        this.socket.on('tetris:shield-deactivated', () => {
-            this.action_queue.push({ type: 'OPPONENT_SHIELD_DEACTIVATED' });
-        });
-
         this.socket.on('tetris:start-duel', () => {
             if (this.onStart) this.onStart();
         });
 
         this.socket.on('tetris:pause', () => {
             this.tetrisGame.pause();
-            this.ui.updateButtons();
+            updateButtons();
-            if (this.tetrisGame.isPaused) this.ui.showOverlay('PAUSE');
+            if (this.tetrisGame.isPaused) showOverlay('PAUSE');
-            else this.ui.hideOverlay();
+            else hideOverlay();
         });
 
         this.socket.on('tetris:stop', () => {
             this.tetrisGame.stop();
-            this.ui.updateButtons();
+            updateButtons();
-            this.ui.render();
+            render();
-            this.ui.showOverlay('STOPPED');
+            showOverlay('STOPPED');
         });
 
         this.socket.on('tetris:settings', (data) => {
-            document.getElementById('input-ttd').value       = data.timeToDown;
+            document.getElementById('input-ttd').value        = data.timeToDown;
-            document.getElementById('input-hardening').value = data.hardening;
+            document.getElementById('input-hardening').value  = data.hardening;
-            document.getElementById('input-decrement').value = data.decrementTTD;
+            document.getElementById('input-decrement').value  = data.decrementTTD;
             this.tetrisGame.configure(data);
         });
     }

Transcendence/srcs/frontend/src/events.js

@@ -82,7 +82,6 @@ export const Events = {
 
     // Avatar
     AVATAR_UPDATED: 'avatar:updated',
-    AVATAR_DELETED: 'avatar:deleted',
 
     // Chat
     CHAT_CONNECTED: 'chat:connected',

Transcendence/srcs/frontend/src/friends.js

@@ -1,6 +1,6 @@
-import { Window, windowRegistry } from '../core/windows.js';
+import { Window, windowRegistry } from './windows.js';
-import { API, STORAGE_KEYS, CSS } from '../core/config.js';
+import { API, STORAGE_KEYS, CSS } from './config.js';
-import { eventBus, Events } from '../core/events.js';
+import { eventBus, Events } from './events.js';
 
 /**
  * Friends management window

Transcendence/srcs/frontend/src/game.css

@@ -1,11 +1,3 @@
-/* ============================================
-   TRANSCENDENCE - Main Stylesheet
-   Convention: BEM (Block__Element--Modifier)
-   ============================================ */
-
-/* ============================================
-   CSS VARIABLES
-   ============================================ */
 :root {
     --color-primary: #ffc75e;
     --color-primary-hover: #ffc75e;
@@ -19,16 +11,17 @@
 
     --app-background-base: radial-gradient(
         circle at top,
-        #fff787,
+        #3fc9ff,
-        #ff8080
+        #21fcc5
+
     );
 
-    --app-background-image: url("../assets/background.png");
+    --app-background-image: url("./assets/Frame1.png");
 
-    --color-surface: #ffefce;
+    --color-surface: #ffcc00;
-    --color-surface-light: #ffc75e;
+    --color-surface-light: #feffa6;
     --color-text: #000000;
-    --color-text-muted: #000000;
+    --color-text-muted: #353535;
 
     --font-size-base: 10px;
     --font-size-sm: 1.2rem;
@@ -71,64 +64,146 @@
 html {
     height: 100%;
     background-image:
-        var(--app-background-image),
+        var(--app-background-image),    
         var(--app-background-base);
 
+    animation: bg-animation 12s steps(1) infinite;
+
+    background-size: contain, cover;
+    background-position: center, center;
+    background-repeat: no-repeat, no-repeat;
+        
+
     background-size:
         contain,
         cover;
 
     background-position:
-        center,
         center;
 
     background-repeat:
-        no-repeat,
         no-repeat;
 }
 
 body {
     margin: 0;
-    width: 70%;
-    min-width: 800px;
-    margin: 0 auto;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     color: var(--color-text);
     line-height: 1.5;
 }
 
+.app {
+	position: relative;
+    width: 70%;
+    min-width: 800px;
+    margin: 0 auto;
+}
+
+
+/* ============================================
+    ANIMATIONS
+   ============================================ */
+
+@keyframes wobble {
+    0%   { transform: translate(0%, 0) rotate(0deg); }
+    25%  { transform: translate(-5%, -1px) rotate(-0.5deg); }
+    50%  { transform: translate(0%, 1px) rotate(0.5deg); }
+    75%  { transform: translate(+5%, -1px) rotate(0.5deg); }
+    100% { transform: translate(0%, 0) rotate(0deg); }
+}
+
+@keyframes bounce {
+    0% { transform: translateY(0) rotate(var(--rot)); }
+    33% { transform: translateY(-6px) rotate(var(--rot)); }
+    66% { transform: translateY(-8px) rotate(var(--rot)); }
+    100% { transform: translateY(0) rotate(var(--rot)); }
+}
+
+@keyframes bg-animation {
+    0% {
+        background-image: url("./assets/Frame1.png"), var(--app-background-base);
+    }
+    8.33% {
+        background-image: url("./assets/Frame2.png"), var(--app-background-base);
+    }
+    16.66% {
+        background-image: url("./assets/Frame3.png"), var(--app-background-base);
+    }
+    25% {
+        background-image: url("./assets/Frame4.png"), var(--app-background-base);
+    }
+    33.33% {
+        background-image: url("./assets/Frame5.png"), var(--app-background-base);
+    }
+    41.66% {
+        background-image: url("./assets/Frame6.png"), var(--app-background-base);
+    }
+    50% {
+        background-image: url("./assets/Frame7.png"), var(--app-background-base);
+    }
+    58.33% {
+        background-image: url("./assets/Frame8.png"), var(--app-background-base);
+    }
+    66.66% {
+        background-image: url("./assets/Frame9.png"), var(--app-background-base);
+    }
+    75% {
+        background-image: url("./assets/Frame10.png"), var(--app-background-base);
+    }
+    83.33% {
+        background-image: url("./assets/Frame11.png"), var(--app-background-base);
+    }
+    91.66% {
+        background-image: url("./assets/Frame12.png"), var(--app-background-base);
+    }
+    100% {
+        background-image: url("./assets/Frame1.png"), var(--app-background-base);
+    }
+}
+
 /* ============================================
    TYPOGRAPHY
    ============================================ */
-   
+
 .title {
     position: absolute;
-    top: 20px;                  
+    top: 20px;
     left: 50%;
-    transform: translateX(-50%);
+    translate: -50% 0;
-    text-transform: uppercase;
+    background: #ffcc00;
+    color: #000;
 
-    display: flex;
+    border: 4px solid #feffa6;
-    align-items: center;
+    border-radius: 18px;
-    justify-content: center;
-    gap: 20px;
 
-    font-size: var(--font-size-xl);
-    text-align: center;
-    text-shadow: 2px 2px 10px black;
-    z-index: 1;
-    font-family: "Roboto";
-    letter-spacing: -10px;
-    color: rgba(248, 252, 2, 0.6);
-
-    margin: 0;
     padding: 0.6rem 1.2rem;
 
-    background-color: #ffefce;
+    animation: wobble 2s infinite ease-in-out;
-    border: 2px solid rgba(0, 0, 0, 0.6);
-    border-radius: var(--radius-lg);
 }
 
+.title span {
+    display: inline-block;
+    transform-origin: center;
+    font-size: 4rem;
+    font-weight: bold;
+    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
+
+    animation: bounce 1.2s infinite alternate;
+    animation-timing-function: ease-in-out;
+}
+
+.title span:nth-child(1) { --rot: -5deg; color: #ff4d4d; }
+.title span:nth-child(2) { --rot:  3deg; color: #5beb67; }
+.title span:nth-child(3) { --rot: -3deg; color: #ca8dfc; }
+.title span:nth-child(4) { --rot:  2deg; color: #6698f5; }
+.title span:nth-child(5) { --rot: -4deg; color: #ff66cc; }
+
+.title span:nth-child(2) { animation-delay: 0.2s; }
+.title span:nth-child(3) { animation-delay: 0.4s; }
+.title span:nth-child(4) { animation-delay: 0.6s; }
+.title span:nth-child(5) { animation-delay: 0.8s; }
+
+.title span { will-change: transform; }
 
 /* ============================================
    MENU
@@ -148,10 +223,8 @@ body {
 
 .menu__item {
     background: var(--color-surface);
-    color: var(--color-text);
-    border: 1px solid var(--color-surface-light);
     border-radius: var(--radius-lg);
-    border-color: #000;
+    border: 1px solid var(--color-surface-light);
     padding: var(--spacing-sm) var(--spacing-md);
     font-size: var(--font-size-md);
     cursor: pointer;
@@ -173,36 +246,19 @@ body {
    GAME
    ============================================ */
 
-/* .game {
-    position: fixed;
-    top: 0;
-    right: 50px;
-    padding: 0;
-    margin: 0;
-    z-index: var(--z-menu);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xs);
-} */
-
 .game {
     position: fixed;
     top: var(--spacing-lg);
     right: 50px;
-
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-lg);
-
-    z-index: var(--z-menu);
 }
 
 .game__item {
     background: var(--color-surface);
     color: var(--color-text);
-    border: 1px solid var(--color-surface-light);
     border-radius: var(--radius-lg);
-    border-color: #000;
+    border: 1px solid var(--color-surface-light);
     padding: var(--spacing-sm) var(--spacing-md);
     font-size: var(--font-size-md);
     cursor: pointer;
@@ -220,6 +276,47 @@ body {
     border-color: var(--color-primary);
 }
 
+/* ============================================
+   PAGES
+   ============================================ */
+
+.page {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+
+    z-index: var(--z-menu);
+}
+
+.page__item {
+
+    border-radius: var(--radius-lg);
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-surface-light);
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-align: center;
+}
+
+.page__item:hover {
+    background: var(--color-surface-light);
+    font-size: var(--font-size-lg);
+}
+
+.page__item--active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
+
 /* ============================================
    BUTTONS
    ============================================ */
@@ -409,6 +506,11 @@ body {
    ============================================ */
 .login {
     width: 320px;
+    border-radius: 5px;
+    border-color: #aa1f1f;
+    border: 6px solid #faac37;
+    background: #ffffff;
+    color: #000;
 }
 
 .login__form {
@@ -620,30 +722,6 @@ body {
     padding: var(--spacing-sm) 0;
 }
 
-/* ============================================
-   EASTER EGG BUTTON
-   ============================================ */
-/* .easter-egg {
-    position: absolute;
-    top: 20%;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 1;
-    background: var(--color-surface);
-    color: var(--color-text);
-    border: 1px solid var(--color-surface-light);
-    padding: var(--spacing-sm) var(--spacing-md);
-    cursor: pointer;
-    font-size: var(--font-size-md);
-    border-radius: var(--radius-md);
-    transition: all var(--transition-fast);
-}
-
-.easter-egg:hover {
-    background: var(--color-error);
-    border-color: var(--color-error);
-} */
-
 /* ============================================
    UTILITIES
    ============================================ */
@@ -689,7 +767,7 @@ body {
 .friends__tab {
     flex: 1;
     padding: var(--spacing-sm);
-    background: var(--color-surface);
+    background: var(--color-surface-light);
     border: 1px solid var(--color-surface-light);
     color: var(--color-text);
     cursor: pointer;

Transcendence/srcs/frontend/src/game.html

@@ -9,8 +9,15 @@
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" />
 	</head>
+	<script type="module" src="app.js"></script>
 	<body>
-		<h1 class="title">Lobby</h1>
+		<h1 class="title">
+		  <span>L</span>
+		  <span>o</span>
+		  <span>b</span>
+		  <span>b</span>
+		  <span>y</span>
+		</h1>
 
 		<nav class="menu" aria-label="Menu principal">
 			<button class="menu__item" data-action="login" aria-label="Login">Login</button>
@@ -21,14 +28,11 @@
 
 		<nav class="game" aria-label="Game">
 			<button class="game__item" data-action="Home page" aria-label="Home Page"
-			onclick="window.location.href='../index.html'">Home Page</button>
+			onclick="window.location.href='index.html'">Home Page</button>
 		</nav>
 
     <div class="page" aria-label="Page">
       <button class="page__item" data-action="gameroom" aria-label="Game Rooms">Game Rooms</button>
     </div>
-
-
-		<script type="module" src="../app.js"></script>
 	</body>
 </html>

Transcendence/srcs/frontend/src/game2/doodle.css

@@ -1,87 +0,0 @@
-
-.shape {
-    /* The "Physical" properties */
-    position: fixed;
-    /* transform: translate(-50%, -50%); Optional: This makes 'left/top' refer to the CENTER of the doodle */
-
-    width: 142px;
-    height: 142px;
-
-    /* The "Stenciling" instructions (but no image yet!) */
-    -webkit-mask-size: contain;
-    mask-size: contain;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    
-    /* The default "Paint" color */
-    background-color: white; 
-}
-
-.shape:hover {
-    transform: scale(1.2); /* Grow by 20% when you hover the mouse over it */
-    transition: transform 0.3s ease; /* Make it a smooth grow */
-}
-
-/* Individual Doodle Definitions */
-.doodle-0  { -webkit-mask-image: url('doodles/cat.png');       mask-image: url('doodles/cat.png');       left: 60vw; top: 35vh; }
-.doodle-1  { -webkit-mask-image: url('doodles/ball.png');      mask-image: url('doodles/ball.png');      left: 10vw; top: 10vh; }
-.doodle-2  { -webkit-mask-image: url('doodles/batman.png');    mask-image: url('doodles/batman.png');    left: 20vw; top: 15vh; }
-.doodle-3  { -webkit-mask-image: url('doodles/building.png');  mask-image: url('doodles/building.png');  left: 30vw; top: 20vh; }
-.doodle-4  { -webkit-mask-image: url('doodles/butterfly.png'); mask-image: url('doodles/butterfly.png'); left: 40vw; top: 25vh; }
-.doodle-5  { -webkit-mask-image: url('doodles/car.png');       mask-image: url('doodles/car.png');       left: 50vw; top: 30vh; }
-.doodle-6 { -webkit-mask-image: url('doodles/yin_yang.png');  mask-image: url('doodles/yin_yang.png');  left: 88vw; top: 12vh; }
-.doodle-7  { -webkit-mask-image: url('doodles/clouds.png');    mask-image: url('doodles/clouds.png');    left: 70vw; top: 40vh; }
-.doodle-8  { -webkit-mask-image: url('doodles/controls.png');  mask-image: url('doodles/controls.png');  left: 80vw; top: 45vh; }
-.doodle-9  { -webkit-mask-image: url('doodles/dead.png');      mask-image: url('doodles/dead.png');      left: 90vw; top: 50vh; }
-.doodle-10 { -webkit-mask-image: url('doodles/diamant.png');   mask-image: url('doodles/diamant.png');   left: 15vw; top: 55vh; }
-.doodle-11 { -webkit-mask-image: url('doodles/dice.png');      mask-image: url('doodles/dice.png');      left: 25vw; top: 60vh; }
-.doodle-12 { -webkit-mask-image: url('doodles/earth.png');     mask-image: url('doodles/earth.png');     left: 35vw; top: 65vh; }
-.doodle-13 { -webkit-mask-image: url('doodles/egypt.png');     mask-image: url('doodles/egypt.png');     left: 45vw; top: 70vh; }
-.doodle-14 { -webkit-mask-image: url('doodles/fire.png');      mask-image: url('doodles/fire.png');      left: 55vw; top: 75vh; }
-.doodle-15 { -webkit-mask-image: url('doodles/fish.png');      mask-image: url('doodles/fish.png');      left: 65vw; top: 80vh; }
-.doodle-16 { -webkit-mask-image: url('doodles/flag.png');      mask-image: url('doodles/flag.png');      left: 75vw; top: 85vh; }
-.doodle-17 { -webkit-mask-image: url('doodles/hearts.png');    mask-image: url('doodles/hearts.png');    left: 85vw; top: 90vh; }
-.doodle-18 { -webkit-mask-image: url('doodles/house.png');     mask-image: url('doodles/house.png');     left: 5vw;  top: 45vh; }
-.doodle-19 { -webkit-mask-image: url('doodles/idol.png');      mask-image: url('doodles/idol.png');      left: 12vw; top: 22vh; }
-.doodle-20 { -webkit-mask-image: url('doodles/lotus.png');     mask-image: url('doodles/lotus.png');     left: 22vw; top: 32vh; }
-.doodle-21 { -webkit-mask-image: url('doodles/mail.png');      mask-image: url('doodles/mail.png');      left: 32vw; top: 42vh; }
-.doodle-22 { -webkit-mask-image: url('doodles/moon.png');      mask-image: url('doodles/moon.png');      left: 42vw; top: 52vh; }
-.doodle-23 { -webkit-mask-image: url('doodles/pokeball.png');  mask-image: url('doodles/pokeball.png');  left: 52vw; top: 62vh; }
-.doodle-24 { -webkit-mask-image: url('doodles/runes.png');     mask-image: url('doodles/runes.png');     left: 62vw; top: 72vh; }
-.doodle-25 { -webkit-mask-image: url('doodles/shield.png');    mask-image: url('doodles/shield.png');    left: 72vw; top: 82vh; }
-.doodle-26 { -webkit-mask-image: url('doodles/shiny.png');     mask-image: url('doodles/shiny.png');     left: 82vw; top: 12vh; }
-.doodle-27 { -webkit-mask-image: url('doodles/snail.png');     mask-image: url('doodles/snail.png');     left: 92vw; top: 22vh; }
-.doodle-28 { -webkit-mask-image: url('doodles/sound.png');     mask-image: url('doodles/sound.png');     left: 18vw; top: 82vh; }
-.doodle-29 { -webkit-mask-image: url('doodles/spiral.png');    mask-image: url('doodles/spiral.png');    left: 28vw; top: 72vh; }
-.doodle-30 { -webkit-mask-image: url('doodles/star.png');      mask-image: url('doodles/star.png');      left: 38vw; top: 62vh; }
-.doodle-31 { -webkit-mask-image: url('doodles/stop.png');      mask-image: url('doodles/stop.png');      left: 48vw; top: 52vh; }
-.doodle-32 { -webkit-mask-image: url('doodles/sun.png');       mask-image: url('doodles/sun.png');       left: 58vw; top: 42vh; }
-.doodle-33 { -webkit-mask-image: url('doodles/tree.png');      mask-image: url('doodles/tree.png');      left: 68vw; top: 32vh; }
-.doodle-34 { -webkit-mask-image: url('doodles/triskel.png');   mask-image: url('doodles/triskel.png');   left: 78vw; top: 22vh; }
-
-
-/* 3. A quick animation for the color loop */
-.loop-color {
-    animation: colorShift 12s infinite alternate ease-in-out;
-}
-@keyframes colorShift {
-    /* 0% and 100% are identical to create the "Infinite Circle" effect */
-    0%   { background-color: #3075ff; } /* Royal Blue (Start) */
-    
-    8%   { background-color: #24a1ff; } /* Sky Blue */
-    17%  { background-color: #1ad8ff; } /* Cyan */
-
-    25%  { background-color: #1bffa7; } /* Seafoam Green */
-    33%  { background-color: #1fff4d; } /* Bright Green */
-    42%  { background-color: #8bff32; } /* Lime Green */
-
-    50%  { background-color: #dcff38; } /* Electric Yellow */
-    58%  { background-color: #ffbc29; } /* Golden Yellow */
-    67%  { background-color: #ff8c4a; } /* Coral Orange */
-
-    75%  { background-color: #ff1d1d; } /* Hot Red */
-    83%  { background-color: #ff2bf3; } /* Magenta Pink */
-    92%  { background-color: #ac37ff; } /* Electric Purple */
-
-    100% { background-color: #3075ff; } /* Royal Blue (Seamless Loop) */
-}

Transcendence/srcs/frontend/src/game2/doodle.js

@@ -1,113 +0,0 @@
-const maxdoodles = 34;
-
-// /////////////////////////////////////////////////////////////////////////////////////////>\
-// container for all doodles, create them
-class DoodleContainer {
-
-	constructor(parent) {
-
-		this.parent = parent;
-		this.obj = document.createElement('div');
-		Object.assign(this.obj.style, {
-			width: '100vw', 
-			height: '100vw',
-		});
-
-		this.createAllDoodles();
-		parent.append(this.obj);
-		this.randomizeAnimationStarts();
-	}
-
-	createAllDoodles() {
-
-		for (let i = 0; i <= maxdoodles; i++) {
-			let d = document.createElement('div');
-			d.classList.add('shape', 'doodle-' + i, 'loop-color');
-			d.id = 'shape' + i;
-			this.obj.append(d);
-			d.addEventListener('click', () => {
-				console.log(`hi from ${d.id}!`);
-			})
-		}
-	}
-
-	startSmoothRandomMove(id, speed = 2) {
-
-		const el = document.getElementById(id);
-		if (!el)
-			return;
-
-		// 1. Get initial pixel position or pick random if CSS isn't loaded yet
-		const rect = el.getBoundingClientRect();
-		
-		const state = {
-			x: rect.left || Math.random() * (window.innerWidth - 142),
-			y: rect.top || Math.random() * (window.innerHeight - 142),
-			angle: Math.random() * Math.PI * 2,
-			speed: speed 
-		};
-
-		function update() {
-			// 2. Refresh screen boundaries every frame
-			const screenW = window.innerWidth;
-			const screenH = window.innerHeight;
-			const shapeSize = 142; // Matches your CSS width/height
-
-			// 3. Calculate next step
-			state.x += Math.cos(state.angle) * state.speed;
-			state.y += Math.sin(state.angle) * state.speed;
-
-			// 4. BOUNCE LOGIC
-			// Horizontal check
-			if (state.x <= 0) {
-				state.x = 0;
-				state.angle = Math.PI - state.angle;
-			} else if (state.x + shapeSize >= screenW) {
-				state.x = screenW - shapeSize;
-				state.angle = Math.PI - state.angle;
-			}
-
-			// Vertical check
-			if (state.y <= 0) {
-				state.y = 0;
-				state.angle = -state.angle;
-			} else if (state.y + shapeSize >= screenH) {
-				state.y = screenH - shapeSize;
-				state.angle = -state.angle;
-			}
-
-			// 5. Apply position using pixels for precision
-			el.style.left = state.x + "px";
-			el.style.top = state.y + "px";
-
-			requestAnimationFrame(update);
-		}
-
-		requestAnimationFrame(update);
-	}
-
-	randomizeAnimationStarts() {
-		for (let i = 0; i <= maxdoodles; i++) {
-			const randomSpeed = 1 + Math.random() * 3; 
-			this.startSmoothRandomMove(`shape${i}`, randomSpeed);
-		}
-	}
-}
-
-// /////////////////////////////////////////////////////////////////////////////////////////>
-// all loop-color have the same @colorShift animation cycle, this disynchronize them
-function randomizeColorsStarts() {
-    const shapes = document.querySelectorAll('.loop-color');
-    
-    shapes.forEach(shape => {
-        // Pick a random number between 0 and 10 (since your loop is 10s)
-        const randomDelay = Math.random() * - 15; 
-        
-        // Apply it directly to the element's style
-        shape.style.animationDelay = randomDelay + "s";
-    });
-}
-
-const a = new DoodleContainer(document.body);
-// Call this once when the script loads
-randomizeColorsStarts();

Transcendence/srcs/frontend/src/game2/game.html

@@ -1,43 +0,0 @@
-<!doctype html>
-<html lang="fr">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>Lobby</title>
-		<link rel="stylesheet" href="doodle.css">
-		<link rel="stylesheet" href="game.css" />
-		<!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" /> -->
-
-		<script src="doodle.js" defer></script>
-		<script type="module" src="../trans/app.js"></script>
-	</head>
-	<body>
-		<h1 class="title">
-		  <span>L</span>
-		  <span>o</span>
-		  <span>b</span>
-		  <span>b</span>
-		  <span>y</span>
-		</h1>
-
-		<nav class="menu" aria-label="Menu principal">
-			<button class="menu__item" data-action="login" aria-label="Login">Login</button>
-			<button class="menu__item" data-action="chat" aria-label="Global chat">Global chat</button>
-			<button class="menu__item" data-action="avatar" aria-label="Avatar">Avatar</button>
-			<button class="menu__item" data-action="friends" aria-label="Amis">Amis</button>
-		</nav>
-
-		<nav class="game" aria-label="Game">
-			<button class="game__item" data-action="Home page" aria-label="Home Page"
-			onclick="window.location.href='index.html'">Home Page</button>
-		</nav>
-
-    <div class="page" aria-label="Page">
-      <button class="page__item" data-action="gameroom" aria-label="Game Rooms">Game Rooms</button>
-    </div>
-
-
-	</body>
-</html>

Transcendence/srcs/frontend/src/game_room.js

@@ -1,6 +1,6 @@
-import { Window } from '../core/windows.js';
+import { Window } from './windows.js';
-import { API, STORAGE_KEYS, CSS } from '../core/config.js';
+import { API, STORAGE_KEYS, CSS } from './config.js';
-import { eventBus, Events } from '../core/events.js';
+import { eventBus, Events } from './events.js';
 
 export class GameRoomWindow extends Window {
 	constructor() {
@@ -34,7 +34,6 @@ export class GameRoomWindow extends Window {
 		});
 
 		this.updateTabsAccess();
-		this.loadCurrentTab();
 
 		// Verifier si l'utilisateur est deja dans un salon au chargement
 		const token = localStorage.getItem(STORAGE_KEYS.AUTH_TOKEN);
@@ -120,8 +119,7 @@ export class GameRoomWindow extends Window {
 		this.gameInfo = this.createElement('div', 'gameroom__game-info');
 		this.currentDrawerInfo = this.createElement('div', 'gameroom__drawer-info', { text: '' });
 		this.scoresDisplay = this.createElement('div', 'gameroom__scores-display');
-		this.timerDisplay = this.createElement('div', 'gameroom__timer-display');
+		this.gameInfo.append(this.currentDrawerInfo, this.scoresDisplay);
-		this.gameInfo.append(this.currentDrawerInfo, this.scoresDisplay, this.timerDisplay);
 
 		// Affichage du mot caché
 		this.wordDisplay = this.createElement('div', 'gameroom__word-display');
@@ -196,10 +194,7 @@ export class GameRoomWindow extends Window {
 			players: [],
 			currentPlayerIndex: 0,
 			guessedLetters: [],
-			scores: {},
+			scores: {}
-			counter: 0,
-			counterRound: 0,
-			timer: 0
 		};
 
 		this.initDrawing();
@@ -379,11 +374,10 @@ export class GameRoomWindow extends Window {
 
 		this.socket.on('game-player-left', (data) => {
 			this.showMessage(`${data.username} a quitté le salon`, 'info');
-			console.log(`${data.username} left the room`);
 
 			if (this.gameState.isPlaying)
 			{
-				if (Array.isArray(this.gameState.players))
+				if (this.gameState.players)
 					this.gameState.players = this.gameState.players.filter(p => p !== data.username);
 			}
 
@@ -499,7 +493,7 @@ export class GameRoomWindow extends Window {
 			// If spectating, return to spectator list
 			if (this.isSpectating) {
 				this.resetGameUI();
-				// this.currentRoom = null;
+				this.currentRoom = null;
 				this.isSpectating = false;
 				this.switchTab('spectator');
 				this.showMessage('La partie est terminée', 'info');
@@ -524,8 +518,6 @@ export class GameRoomWindow extends Window {
 				this.gameState.revealedWord = data.revealedWord || new Array(data.wordLength).fill('_');
 				this.gameState.players = data.players;
 				this.gameState.scores = data.scores || {};
-				this.gameState.timer = data.timer || 0;
-				this.updateTimerUI();
 
 				this.showGameUI();
 				this.updateWordDisplay();
@@ -615,15 +607,6 @@ export class GameRoomWindow extends Window {
 			// Setup UI for new round with new drawer
 			this.setupRound();
 		});
-
-		this.socket.on('game-timer-sync', (data) => {
-			this.gameState.timer = data.remaining;
-			this.updateTimerUI();
-		});
-
-		this.socket.on('game-timer-ended', (data) => {
-			this.showMessage(data.message || 'Temps écoulé !', 'info');
-		})
 	}
 
 	disconnectGameSocket() {
@@ -734,7 +717,7 @@ export class GameRoomWindow extends Window {
 		const altPort = window.GLOBAL_CHAT_ALT_PORT;
 		if (altPort) {
 			const host = location.hostname || 'localhost';
-			this.socket = io(`${location.protocol}//${host}:${altPort}`, ioConfig);
+			this.socket = io(`http://${host}:${altPort}`, ioConfig);
 		} else {
 			this.socket = io(ioConfig);
 		}
@@ -768,7 +751,8 @@ export class GameRoomWindow extends Window {
 				return;
 			}
 
-			this.renderRoomsList(data || []);
+			this.roomsList = data || [];
+			this.renderRoomsList(this.roomsList);
 		} catch (error) {
 			console.error('Load rooms error:', error);
 			this.showMessage('Erreur de connexion', 'error');
@@ -855,20 +839,17 @@ export class GameRoomWindow extends Window {
 		const name = this.roomNameInput.value.trim();
 		if (!name) {
 			this.showMessage('Entrez un nom pour le salon', 'error');
-			this.showNotification('Entrez un nom pour le salon', 'red');
 			return;
 		}
 
 		const token = localStorage.getItem(STORAGE_KEYS.AUTH_TOKEN);
 		if (!token) {
 			this.showMessage('Connectez-vous pour creer un salon', 'info');
-			this.showNotification('Connectez-vous pour créer un salon', 'red');
 			return;
 		}
 
 		if (this.currentRoom) {
 			this.showMessage('Vous etes deja dans un salon. Quittez-le d\'abord.', 'error');
-			this.showNotification('Vous êtes déjà dans un salon. Quittez-le d\'abord.', 'red');
 			return;
 		}
 
@@ -882,7 +863,6 @@ export class GameRoomWindow extends Window {
 					this.currentRoom = currentData;
 					this.enterLobby(currentData);
 					this.showMessage('Vous etes deja dans un salon', 'error');
-					this.showNotification('Vous êtes déjà dans un salon. Quittez-le d\'abord.', 'red');
 					return;
 				}
 			}
@@ -903,7 +883,6 @@ export class GameRoomWindow extends Window {
 
 		if (this.roomNameExists(name)) {
 			this.showMessage('Un salon avec ce nom existe deja', 'error');
-			this.showNotification('Un salon avec ce nom existe deja', 'red');
 			return;
 		}
 
@@ -925,7 +904,6 @@ export class GameRoomWindow extends Window {
 			this.showMessage('Salon cree', 'success');
 			eventBus.emit(Events.ROOM_CREATED, data);
 			this.enterLobby(data);
-			this.showNotification(`Vous avez créé le salon "${data.name}"`, 'green');
 		} catch (error) {
 			console.error('Create room error:', error);
 			this.showMessage('Erreur de connexion', 'error');
@@ -1058,7 +1036,6 @@ export class GameRoomWindow extends Window {
 
 		if (this.currentRoom) {
 			this.showMessage('Vous etes deja dans un salon. Quittez-le d\'abord.', 'error');
-			this.showNotification('Vous êtes déjà dans un salon. Quittez-le d\'abord.', 'red');
 			return;
 		}
 
@@ -1072,7 +1049,6 @@ export class GameRoomWindow extends Window {
 					this.currentRoom = currentData;
 					this.enterLobby(currentData);
 					this.showMessage('Vous etes deja dans un salon', 'error');
-					this.showNotification('Vous êtes déjà dans un salon. Quittez-le d\'abord.', 'red');
 					return;
 				}
 			}
@@ -1117,9 +1093,7 @@ export class GameRoomWindow extends Window {
 	}
 
 	async loadLobby() {
-		console.log('Loading lobby for room:', this.currentRoom);
 		if (!this.currentRoom) return;
-		console.log('Managed to load lobby, current room:', this.currentRoom);
 
 		this.gameState.scores = {};
 
@@ -1258,12 +1232,6 @@ export class GameRoomWindow extends Window {
 		}, 5000);
 	}
 
-	updateTimerUI()
-	{
-		if (this.timerDisplay)
-			this.timerDisplay.textContent = `Temps restant : ${this.gameState.timer}s`;
-	}
-
 	// ============================================
 	// LOGIQUE DU JEU
 	// ============================================
@@ -1318,9 +1286,6 @@ export class GameRoomWindow extends Window {
 		this.isSpectating = false;
 
 		this.gameState.scores = {};
-		this.gameState.counter = 0;
-		this.gameState.counterRound = 0;
-		this.gameState.timer = 0;
    		this.gameState.players = [];
    		this.gameState.currentPlayerIndex = 0;
     	this.gameState.guessedLetters = [];
@@ -1544,7 +1509,7 @@ export class GameRoomWindow extends Window {
 		const pointsText = points !== 0 ? ` (${points > 0 ? '+' : ''}${points} pts)` : '';
 
 		if (success) {
-			item.textContent = `${username}: "${guess}" - Bon ${typeText}!${pointsText}`;
+			item.textContent = `${username}: "${guess}" - Bonne ${typeText}!${pointsText}`;
 		} else {
 			item.textContent = `${username}: "${guess}" - Mauvais ${typeText}${pointsText}`;
 		}
@@ -1594,10 +1559,7 @@ export class GameRoomWindow extends Window {
 		this.wordDisplay.textContent = word.split('').join(' ');
 
 		// Auto next round after delay
-		this.gameState.counterRound++;
 		setTimeout(() => {
-			if (this.gameState.counterRound >= (this.gameState.players.length * 4))
-				this.endGame();
 			if (this.gameState.isPlaying) {
 				this.nextRound();
 			}
@@ -1606,11 +1568,8 @@ export class GameRoomWindow extends Window {
 
 	nextRound() {
 		// Move to next player
-		this.gameState.counter++;
+		this.gameState.currentPlayerIndex = (this.gameState.currentPlayerIndex + 1) % this.gameState.players.length;
-		if (this.gameState.counter >= this.gameState.players.length) {
+		const nextDrawer = this.gameState.players[this.gameState.currentPlayerIndex];
-			this.gameState.counter = 0;
-		}
-		const nextDrawer = this.gameState.players[this.gameState.counter];
 
 		if (this.socket?.connected) {
 			this.socket.emit('game-next-round', { drawer: nextDrawer });

Transcendence/srcs/frontend/src/global_chat.js

@@ -1,6 +1,6 @@
-import { Window } from '../core/windows.js';
+import { Window } from './windows.js';
-import { STORAGE_KEYS, CSS } from '../core/config.js';
+import { STORAGE_KEYS, CSS } from './config.js';
-import { eventBus, Events } from '../core/events.js';
+import { eventBus, Events } from './events.js';
 
 /**
  * Global chat window
@@ -222,7 +222,7 @@ export class GlobalChat extends Window {
         const altPort = window.GLOBAL_CHAT_ALT_PORT;
         if (altPort) {
             const host = location.hostname || 'localhost';
-            this.socket = io(`${location.protocol}//${host}:${altPort}`, ioConfig);
+            this.socket = io(`http://${host}:${altPort}`, ioConfig);
         } else {
             this.socket = io(ioConfig);
         }

Transcendence/srcs/frontend/src/index.css

@@ -1,157 +1,764 @@
+/* ============================================
+   TRANSCENDENCE - Main Stylesheet
+   Convention: BEM (Block__Element--Modifier)
+   ============================================ */
 
-
+/* ============================================
-/* ///////////////////////////////////////////////////////// */
+   CSS VARIABLES
+   ============================================ */
 :root {
-	--custom-value: hello;
+    --color-primary: #ffc75e;
+    --color-primary-hover: #ffc75e;
+    --color-success: #3cff01;
+    --color-success-dark: #ffc75e;
+    --color-error: #ff4d4d;
+    --color-warning: #ffc75e;
+    --color-github: #ffc75e;
+
+    --color-bg: #ffe5b5;
 
     --app-background-base: radial-gradient(
         circle at top,
-        #000000,
+        #fff787,
-        #4d4d4d
+        #ff8080
     );
 
     --app-background-image: url("./assets/background.png");
-    --num-value: 10px;
+
-	--black: #000000;
+    --color-surface: #ffefce;
+    --color-surface-light: #ffc75e;
+    --color-text: #000000;
+    --color-text-muted: #000000;
+
+    --font-size-base: 10px;
+    --font-size-sm: 1.2rem;
+    --font-size-md: 1.4rem;
+    --font-size-lg: 1.6rem;
+    --font-size-xl: 3rem;
+
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 12px;
+    --spacing-lg: 16px;
+    --spacing-xl: 24px;
+
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 12px;
+    --radius-full: 50%;
+
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
+
+    --transition-fast: 150ms ease;
+    --transition-normal: 250ms ease;
+    
+    --z-menu: 2;
+    --z-window: 100;
+    --z-modal: 200;
 }
 
-/* ///////////////////////////////////////////////////////// */
+/* ============================================
-*, *::before, *::after {
+   RESET & BASE
+   ============================================ */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
 
+html {
+    height: 100%;
+    background-image:
+        var(--app-background-image),
+        var(--app-background-base);
 
+    background-size:
+        contain,
+        cover;
+
+    background-position:
+        center,
+        center;
+
+    background-repeat:
+        no-repeat,
+        no-repeat;
 }
 
 body {
-
+    margin: 0;
-  line-height: 1.5; /* inherited */
+    width: 70%;
-  word-spacing: 1.4px; /* inherited */
+    min-width: 800px;
-  font-size: 20px;
+    margin: 0 auto;
-  font-family: 'Times New Roman', serif; /* inherited */
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  color: var(--black); /* inherited */
+    color: var(--color-text);
-  text-align: center;
+    line-height: 1.5;
-  color: #696969;
-
-  
-  margin: 0;
-  padding: 0;
-  background-color: var(--black);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
 }
 
-.container-1 {
+/* ============================================
-	display: flex;
+   TYPOGRAPHY
-	justify-content: center;
+   ============================================ */
-	align-items: center;
+   
+.title {
+    position: absolute;
+    top: 20px;                  
+    left: 50%;
+    transform: translateX(-50%);
+    text-transform: uppercase;
 
-	width: 100%;
-	margin: 5px;
-	position: relative;
-	min-height: 200px;
-}
-
-/* ///////////////////////////////////////////////////////// */
-
-.button {
-	color: red;
-	margin: 5px 50px;
-	padding: 5px 50px;
-}
-
-.button-1 {
-    display: inline-block;
-    padding: 10px 20px;
-    background-color: #000000;
-    color: #8e8e8e;
-    text-align: center;
-    text-decoration: none;
-
-    font-size: 16px;
-    cursor: pointer;
-    border: 3px solid #363636;
-    border-radius: 6px;
-    transition: background-color 0.3s;
-
-}
-.button-1:hover {
-    background-color: rgb(202, 135, 10);
-    color: black;
-}
-
-/* ///////////////////////////////////////////////////////// */
-.button-trans {
-/* SIZE */
-	position: absolute;
-	left: 50%;
-	transform: translateX(-50%);
-
-	width: 500px;
-	height: 200px;
-
-/* TEXT */
-	font-family: "Roboto";
-	font-size: 62px;
-    letter-spacing: -10px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-/* Background */
-	background-image: url("./assets/background.png");
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: 150%;
-/* Borders */
-	border-radius: 20px;
-	border-radius: 20px;
-	border: 5px solid transparent; /* keep space for the shadow */
-	background-clip: padding-box;
-	/* metallic effect */
-	box-shadow:
-		0 0 0 5px #c0c0c0 inset,          /* inner shine */
-		0 0 0 2px rgba(255,255,255,0.3) inset; /* subtle highlight */
-	
-/* OTHER */
-	cursor: pointer;
-	transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.button-trans:hover {
-  transform: translateX(-50%) scale(1.02);
-  box-shadow:
-    0 0 20px 5px #fff inset,
-    0 0 20px 5px rgba(255,255,255,0.3) inset;
-}
-
-/* ///////////////////////////////////////////////////////// */
-.button-test {
-	margin-right: auto;
-	margin-left: 20px;
-}
-
-/* ///////////////////////////////////////////////////////// */
-.footer_div {
     display: flex;
-    justify-content: space-around;
+    align-items: center;
-    /* padding: 20px; */
+    justify-content: center;
-    /* margin-top: 80px;
+    gap: 20px;
-    margin-bottom: 100px; */
-}
 
-.ico_footer {
+    font-size: var(--font-size-xl);
     text-align: center;
-    width: 25px;
+    text-shadow: 2px 2px 10px black;
-    vertical-align: top;
+    z-index: 1;
-    /* padding-right: 5px; */
+    font-family: "Roboto";
-}
+    letter-spacing: -10px;
-a {
+    color: rgba(248, 252, 2, 0.6);
-    text-decoration: none;
+
-    color: #5c5c5c;
+    margin: 0;
-}
+    padding: 0.6rem 1.2rem;
-a:hover {
+
-    color: rgb(218, 145, 12);
+    background-color: #ffefce;
+    border: 2px solid rgba(0, 0, 0, 0.6);
+    border-radius: var(--radius-lg);
 }
 
-/* ///////////////////////////////////////////////////////// */
+
+/* ============================================
+   MENU
+   ============================================ */
+
+/* .menu {
+    position: fixed;
+    top: 0;
+    left: 50px;
+    padding: 0;
+    margin: 0;
+    z-index: var(--z-menu);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+} */
+
+.menu {
+    position: fixed;
+    top: var(--spacing-lg);
+    left: 50px;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-lg);
+
+    z-index: var(--z-menu);
+}
+
+.menu__item {
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-surface-light);
+    border-radius: var(--radius-lg);
+    border-color: #000;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-align: center;
+}
+
+.menu__item:hover {
+    background: var(--color-surface-light);
+    font-size: var(--font-size-lg);
+}
+
+.menu__item--active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
+/* ============================================
+   GAME
+   ============================================ */
+
+/* .game {
+    position: fixed;
+    top: 0;
+    right: 50px;
+    padding: 0;
+    margin: 0;
+    z-index: var(--z-menu);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+} */
+
+.game {
+    position: fixed;
+    top: var(--spacing-lg);
+    right: 50px;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-lg);
+
+    z-index: var(--z-menu);
+}
+
+.game__item {
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-surface-light);
+    border-radius: var(--radius-lg);
+    border-color: #000;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-align: center;
+}
+
+.game__item:hover {
+    background: var(--color-surface-light);
+    font-size: var(--font-size-lg);
+}
+
+.game__item--active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
+/* ============================================
+   BUTTONS
+   ============================================ */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-md);
+    font-weight: 500;
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-decoration: none;
+}
+
+.btn:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+
+.btn--primary {
+    background: var(--color-primary);
+    color: var(--color-text);
+}
+
+.btn--primary:hover {
+    background: var(--color-primary-hover);
+}
+
+.btn--secondary {
+    background: var(--color-surface-light);
+    color: var(--color-text);
+}
+
+.btn--success {
+    background: var(--color-success-dark);
+    color: var(--color-text);
+}
+
+.btn--danger {
+    background: var(--color-error);
+    color: var(--color-text);
+}
+
+.btn--github {
+    background: var(--color-github);
+    color: var(--color-text);
+}
+
+.btn--ghost {
+    background: transparent;
+    color: var(--color-text);
+    border: 1px solid var(--color-surface-light);
+}
+
+/* ============================================
+   INPUTS
+   ============================================ */
+.input {
+    width: 100%;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-md);
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-surface-light);
+    border-radius: var(--radius-md);
+    transition: border-color var(--transition-fast);
+}
+
+.input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+}
+
+.input::placeholder {
+    color: var(--color-text-muted);
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+/* ============================================
+   WINDOWS
+   ============================================ */
+.window {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--color-bg);
+    color: var(--color-text);
+    z-index: var(--z-window);
+    display: none;
+    flex-direction: column;
+    min-width: 280px;
+    box-shadow: var(--shadow-lg);
+    border-radius: 5px;
+    border-color: #aa1f1f;
+    border: 6px solid #faac37;
+}
+
+.window--visible {
+    display: flex;
+}
+
+.window--left {
+    left: 25%;
+}
+
+.window--right {
+    left: 75%;
+}
+
+.window__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: var(--color-surface);
+    cursor: move;
+    user-select: none;
+}
+
+.window__title {
+    font-weight: 500;
+    font-size: var(--font-size-md);
+}
+
+.window__close {
+    cursor: pointer;
+    font-size: var(--font-size-lg);
+    opacity: 0.8;
+    transition: opacity var(--transition-fast);
+    background: none;
+    border: none;
+    color: var(--color-text);
+    padding: 0;
+    line-height: 1;
+}
+
+.window__close:hover {
+    opacity: 1;
+}
+
+.window__body {
+    padding: var(--spacing-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    flex: 1;
+    overflow: auto;
+}
+
+/* ============================================
+   MESSAGES
+   ============================================ */
+.message {
+    font-size: var(--font-size-sm);
+    padding: var(--spacing-xs);
+    border-radius: var(--radius-lg);
+    border-color: #000;
+}
+
+.message--success {
+    color: var(--color-success);
+}
+
+.message--error {
+    color: var(--color-error);
+}
+
+.message--info {
+    color: var(--color-text-muted);
+}
+
+/* ============================================
+   LOGIN WINDOW
+   ============================================ */
+.login {
+    width: 320px;
+    border-radius: 5px;
+    border-color: #aa1f1f;
+    border: 6px solid #faac37;
+    background: #ffffff;
+    color: #000;
+}
+
+.login__form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.login__actions {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-top: var(--spacing-xs);
+}
+
+.login__divider {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    margin: var(--spacing-sm) 0;
+}
+
+.login__divider::before,
+.login__divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--color-surface-light);
+}
+
+/* ============================================
+   CHAT WINDOW
+   ============================================ */
+.chat {
+    width: 380px;
+    height: 400px;
+}
+
+.chat__output {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--spacing-sm);
+    background: var(--color-surface);
+    border-radius: var(--radius-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    min-height: 150px;
+}
+
+.chat__message {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    background: var(--color-surface-light);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+}
+
+.chat__message--own {
+    background: var(--color-primary);
+    align-self: flex-end;
+}
+
+.chat__friend-indicator {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background-color: var(--color-success);
+    border-radius: 50%;
+    margin-right: var(--spacing-xs);
+    vertical-align: middle;
+}
+
+.chat__system {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    font-style: italic;
+    text-align: center;
+}
+
+.chat__system--error {
+    color: var(--color-error);
+}
+
+.chat__system--success {
+    color: var(--color-success);
+}
+
+.chat__input-container {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-top: var(--spacing-sm);
+}
+
+.chat__input {
+    flex: 1;
+}
+
+.chat__controls {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-top: var(--spacing-sm);
+}
+
+/* ============================================
+   AVATAR WINDOW
+   ============================================ */
+.avatar-window {
+    width: 360px;
+}
+
+.avatar__preview {
+    width: 120px;
+    height: 120px;
+    object-fit: cover;
+    border-radius: var(--radius-full);
+    border: 3px solid var(--color-text);
+    box-shadow: var(--shadow-md);
+    background: var(--color-surface);
+    align-self: center;
+}
+
+.avatar__username {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    text-align: center;
+    color: var(--color-text);
+    margin-top: var(--spacing-sm);
+}
+
+.avatar__controls {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    align-items: center;
+}
+
+.avatar__file-input {
+    display: none;
+}
+
+/* ============================================
+   STATS WINDOW
+   ============================================ */
+.stats-window {
+    width: 320px;
+}
+
+.stats__avatar {
+    width: 72px;
+    height: 72px;
+    object-fit: cover;
+    border-radius: var(--radius-full);
+    border: 2px solid var(--color-text);
+    align-self: center;
+    display: block;
+    margin: 0 auto var(--spacing-xs);
+}
+
+.stats__username {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    text-align: center;
+    color: #000;
+    margin-bottom: var(--spacing-md);
+}
+
+.stats__section {
+    margin-bottom: var(--spacing-md);
+}
+
+.stats__section-title {
+    font-size: var(--font-size-sm);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--color-primary);
+    border-bottom: 1px solid var(--color-surface-light);
+    padding-bottom: var(--spacing-xs);
+    margin-bottom: var(--spacing-xs);
+}
+
+.stats__section-body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.stats__row {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--font-size-sm);
+    padding: 3px 0;
+}
+
+.stats__label {
+    color: #333;
+}
+
+.stats__value {
+    font-weight: 600;
+    color: #000;
+}
+
+.stats__loading {
+    font-size: var(--font-size-sm);
+    color: #333;
+    text-align: center;
+    padding: var(--spacing-sm) 0;
+}
+
+/* ============================================
+   UTILITIES
+   ============================================ */
+.hidden {
+    display: none !important;
+}
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* ============================================
+   FRIENDS WINDOW
+   ============================================ */
+.friends-window {
+    width: 400px;
+    height: 450px;
+}
+
+.friends__tabs {
+    display: flex;
+    gap: var(--spacing-xs);
+    margin-bottom: var(--spacing-sm);
+}
+
+.friends__tab {
+    flex: 1;
+    padding: var(--spacing-sm);
+    background: var(--color-surface-light);
+    border: 1px solid var(--color-surface-light);
+    color: var(--color-text);
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+    transition: all var(--transition-fast);
+}
+
+.friends__tab:hover {
+    background: var(--color-surface-light);
+}
+
+.friends__tab--active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
+.friends__content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+}
+
+.friends__search {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-bottom: var(--spacing-sm);
+}
+
+.friends__search .input {
+    flex: 1;
+}
+
+.friends__list {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.friends__item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm);
+    background: var(--color-surface);
+    border-radius: var(--radius-md);
+}
+
+.friends__avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius-full);
+    object-fit: cover;
+    border: 2px solid var(--color-surface-light);
+}
+
+.friends__name {
+    flex: 1;
+    font-size: var(--font-size-md);
+    font-weight: 500;
+}
+
+.friends__actions {
+    display: flex;
+    gap: var(--spacing-xs);
+}
+
+.friends__actions .btn {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: var(--font-size-sm);
+}
+
+.friends__empty {
+    text-align: center;
+    color: var(--color-text-muted);
+    padding: var(--spacing-lg);
+}

Transcendence/srcs/frontend/src/index.html

@@ -1,54 +1,31 @@
-<!DOCTYPE html>
+<!doctype html>
-<head>
+<html lang="fr">
-	<link rel="stylesheet" href="./index.css" />
+	<head>
-	<script type="module" src="./index.js"></script>
+		<meta charset="utf-8" />
-</head>
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
-<body>
+		<title>Transcendence</title>
-
+		<link rel="stylesheet" href="index.css" />
-	<div id="header-1" class="container-1" 
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		style="">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<div id="button-test" class="button-1 button-test multicolor" onclick="window.location.href = 'test/index.html';">TEST</div>
+		<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" />
-		<div id="button-trans" class="button-trans multicolor">TRANSCENDENCE</div>
+	</head>
-	</div>
+	<body>
-
+		<h1 class="title">Transcendence</h1>
-	<img id="wiskas" style="margin: auto; display: block;" src="webcat/web_cat_img/wiskas-the-third.jpg">
+
-
+		<nav class="menu" aria-label="Menu principal">
-	<section style="display: flex;
+			<button class="menu__item" data-action="login" aria-label="Login">Login</button>
-			justify-content: center;
+			<button class="menu__item" data-action="chat" aria-label="Global chat">Global chat</button>
-			width: 1000px;
+			<button class="menu__item" data-action="avatar" aria-label="Avatar">Avatar</button>
-			margin: 0 auto;">
+			<button class="menu__item" data-action="friends" aria-label="Amis">Amis</button>
-		<p>I, am wiskas-the-third,
+		</nav>
-			We are the  cat company, we  dont need to present our self for you already know
+
-			who we are, we created the internet, and we are still managing it now<br>
+		<nav class="game" aria-label="Game">
-			We at CAT are the admin, creator, and workers of the internet
+			<button class="game__item" data-action="new_game" aria-label="Skkrrribl.io"
-			Everytime a  human goes to sleep, a cat start its shift, 1 billion pair of whiskers that are always here for you
+			onclick="window.location.href='game.html'">Skkrrribl.io</button>
-			Why? because we are philantropists, dont question it. Our goals are beyond your understanding
+			<button class="game__item" data-action="tetris" aria-label="Tetris"
-			the internet was created by us, for us, and you should be glad we allow you to use it.
+			onclick="window.location.href='tetris.html'">Tetris</button>
-		</p>
+		</nav>
-	</section>
+		
-
+		<script type="module" src="app.js"></script>
-	<section style="display: flex;">
+	</body>
-		<button style="margin-right: 50px;" class="button-1 multicolor" onclick="window.location.href = 'webcat/biblio.html';">
+	</html>
-			Latest News</button><br>
-		<button style="margin-left: 50px;" class="button-1 multicolor" onclick="window.location.href = 'webcat/staff/staff.html';">
-			meet the staff</button><br>
-	</section>
-
-	<footer>
-		<br><br><br>
-		<div class="footer_div" style="margin-top: 100px;">
-			<img class="ico_footer" src="webcat/web_cat_img/facebook_logo.png">
-			<img class="ico_footer" src="webcat/web_cat_img/insta_logo.png">
-			<img class="ico_footer" src="webcat/web_cat_img/twitter_logo.png">
-		</div>
-		<div class="footer_div" style="margin-bottom: 50px;">
-			<a href="https://www.facebook.com/">MIAOUBOOK</a>
-			<a href="https://www.instagram.com/">INSTAMIA</a>
-			<a href="https://twitter.com/">BLUE-SNACK</a>
-		</div>
-		<a href="./webcat/ml/mentions_legales.html">- LEGAL NOTICES -<br>(boring stuff, really, dont go look into this, i mean we are obligated to include it, but it will bore you, like, really)
-		<br>Dont do it! every seconds you spend in this next page, a kitten dies. so dont</a>
-	</footer>
-
-</body>
-</html>

Transcendence/srcs/frontend/src/index.js

@@ -1,54 +0,0 @@
-import { updateElement } from "./test/tools.js";
-import { colorizeText } from "./tools.js";
-
-// //////////////////////////////////////////]
-let div2 = document.createElement('div')
-document.body.append(div2)
-let button1 = document.createElement('button')
-div2.append(button1)
-button1.textContent = 'game-lobby'
-button1.addEventListener('click', () => {
-	window.location.href = './game2/game.html';
-})
-let button2 = document.createElement('button')
-div2.append(button2)
-button2.textContent = 'tetris'
-button2.addEventListener('click', () => {
-	window.location.href = './tetris/tetris.html';
-})
-
-let button4 = document.createElement('button')
-div2.append(button4)
-button4.textContent = 'test'
-button4.addEventListener('click', () => {
-	window.location.href = './test/index.html';
-})
-let img = document.getElementById('wiskas');
-img.before(div2)
-
-// apply multicolor to .multicolor
-colorizeText();
-
-
-/* ///////////////////////////////////////////////////////// */
-// make transcendence button move via: .button-trans
-function updateButtonTranscendence(move) {
-
-	const btn = document.querySelector('.button-trans');
-	btn.addEventListener('mousemove', e => {
-		const rect = btn.getBoundingClientRect();
-		const x = ((e.clientX - rect.left) / rect.width - 0.5) * move;
-		const y = ((e.clientY - rect.top) / rect.height - 0.5) * move;
-		btn.style.backgroundPosition = `calc(50% + ${x}px) calc(50% + ${y}px)`;
-	});
-
-	btn.addEventListener('mouseleave', () => {
-		btn.style.backgroundPosition = 'center';
-	});
-
-	btn.addEventListener('click', () => {
-		window.location.href = './trans/index2.html';
-	});
-}
-/* ///////////////////////////////////////////////////////// */
-updateButtonTranscendence(100);

Transcendence/srcs/frontend/src/login.js

@@ -1,6 +1,6 @@
-import { Window } from '../core/windows.js';
+import { Window } from './windows.js';
-import { API, STORAGE_KEYS, CSS } from '../core/config.js';
+import { API, STORAGE_KEYS, CSS } from './config.js';
-import { eventBus, Events } from '../core/events.js';
+import { eventBus, Events } from './events.js';
 
 /**
  * Login and registration window
@@ -83,8 +83,7 @@ export class LoginWindow extends Window {
     bindEvents() {
         this.loginBtn.addEventListener('click', () => this.handleLogin());
         this.registerBtn.addEventListener('click', () => this.handleRegister());
-        
+        this.githubBtn.addEventListener('click', () => this.handleGitHubLogin());
-        this.githubBtn.addEventListener('click', () => {console.log(API.AUTH.GITHUB); this.handleGitHubLogin();});
 
         // Login with Enter
         this.passwordInput.addEventListener('keypress', (e) => {
@@ -130,7 +129,6 @@ export class LoginWindow extends Window {
             if (response.ok && data.token) {
                 localStorage.setItem(STORAGE_KEYS.AUTH_TOKEN, data.token);
                 this.showMessage('Login successful! Welcome.', 'success');
-				this.showNotification('Login successful', 'green');
 
                 // Emit login event
                 eventBus.emit(Events.USER_LOGGED_IN, { username, token: data.token });
@@ -140,7 +138,6 @@ export class LoginWindow extends Window {
             } else {
                 const errorMsg = data?.message || 'Login failed';
                 this.showMessage(errorMsg, 'error');
-				this.showNotification(errorMsg, 'red');
             }
         } catch (error) {
             console.error('Login error:', error);
@@ -173,12 +170,10 @@ export class LoginWindow extends Window {
 
             if (response.ok) {
                 this.showMessage('Registration successful! You can now sign in.', 'success');
-				this.showNotification('Registration successful', 'green');
                 eventBus.emit(Events.USER_REGISTERED, { username });
             } else {
                 const errorMsg = data?.message || 'Registration failed';
                 this.showMessage(errorMsg, 'error');
-				this.showNotification(errorMsg, 'red');
             }
         } catch (error) {
             console.error('Registration error:', error);
@@ -195,8 +190,6 @@ export class LoginWindow extends Window {
         const left = (screen.width - width) / 2;
         const top = (screen.height - height) / 2;
 
-        console.log(API.AUTH.GITHUB);
-
         const popup = window.open(
             API.AUTH.GITHUB,
             'githubOAuth',
@@ -207,7 +200,6 @@ export class LoginWindow extends Window {
             if (event.data?.token) {
                 localStorage.setItem(STORAGE_KEYS.AUTH_TOKEN, event.data.token);
                 this.showMessage('GitHub login successful! Welcome.', 'success');
-				this.showNotification('GitHub login successful', 'green');
 
                 // Emit login event
                 eventBus.emit(Events.USER_LOGGED_IN, {

Transcendence/srcs/frontend/src/notes.css

@@ -1,188 +0,0 @@
-.test {/* =======================
-	🎨 COLORS & BACKGROUND
-	======================= */
-	color: red;
-	background-color: blue;
-	background-image: url(img.jpg);
-	background-size: cover;
-	background-position: center;
-	background-repeat: no-repeat;
-	opacity: 0.5;
-
-	/* =======================
-	📏 SIZE & SPACING
-	======================= */
-	width: 200px;
-	height: 100px;
-	min-width: 100px;
-	max-width: 500px;
-	padding: 10px;
-	margin: 20px;
-	box-sizing: border-box;
-
-	/* shorthand */
-	margin: 10px 20px;        /* top/bottom left/right */
-	padding: 10px 20px 5px 0; /* top right bottom left */
-
-	/* =======================
-	📍 POSITIONING
-	======================= */
-	position: static;
-	position: relative;
-	position: absolute;
-	position: fixed;
-	position: sticky;
-
-	top: 10px;
-	left: 20px;
-	right: 0;
-	bottom: 0;
-
-	z-index: 10;
-
-	/* =======================
-	📦 DISPLAY & LAYOUT
-	======================= */
-	display: block;
-	display: inline;
-	display: inline-block;
-	display: none;
-	display: flex; /* children can be controled with: justify-content (horizontal) / align-items (vertical) */
-	display: grid;
-
-	/* =======================
-	🔧 FLEXBOX
-	======================= */
-	display: flex;
-	flex-direction: row;          /* row | column */
-	justify-content: center;      /* main axis */
-	align-items: center;          /* cross axis */
-	gap: 10px;
-
-	/* common */
-	justify-content: space-between;
-	justify-content: space-around;
-	justify-content: space-evenly;
-
-	/* =======================
-	🧱 GRID
-	======================= */
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr;
-	grid-template-rows: auto;
-	gap: 10px;
-
-	/* =======================
-	🔤 TEXT & FONT
-	======================= */
-	font-size: 16px;
-	font-weight: bold;
-	font-family: Arial, sans-serif;
-
-	text-align: center;
-	text-decoration: underline;
-	text-transform: uppercase;
-
-	line-height: 1.5;
-	letter-spacing: 2px;
-
-	/* =======================
-	🟦 BORDER & OUTLINE
-	======================= */
-	border: 1px solid black;
-	border-width: 2px;
-	border-style: dashed;
-	border-color: red;
-
-	border-radius: 10px;
-
-	outline: 2px solid blue;
-
-	/* =======================
-	👁️ VISIBILITY
-	======================= */
-	display: none;
-	visibility: hidden;
-
-	overflow: hidden;
-	overflow: scroll;
-	overflow: auto;
-
-	/* =======================
-	🎬 TRANSITIONS & EFFECTS
-	======================= */
-	transition: all 0.3s ease;
-
-	transform: translateX(50px);
-	transform: rotate(45deg);
-	transform: scale(1.1);
-}
-
-/* hover example */
-:hover {
-transform: scale(1.1);
-}
-/* =======================
-   🧠 SELECTORS
-======================= */
-
-/* basic */
-div {}            /* tag */
-.class {}         /* class */
-#id {}            /* id */
-* {}              /* all elements */
-
-/* grouping */
-div, p, span {}   /* multiple selectors */
-
-/* combinators */
-div p {}          /* any descendant */
-div > p {}        /* direct child */
-div + p {}        /* next sibling */
-div ~ p {}        /* all following siblings */
-
-/* attribute selectors */
-input[type="text"] {}
-a[href] {}
-button[class*="btn"] {}   /* contains */
-button[class^="btn"] {}   /* starts with */
-button[class$="btn"] {}   /* ends with */
-
-/* pseudo-classes (state) */
-button:hover {}
-input:focus {}
-a:active {}
-a:visited {}
-input:checked {}
-:nth-child(2) {}
-:nth-child(odd) {}
-:nth-child(even) {}
-:not(.active) {}
-
-/* pseudo-elements (virtual parts) */
-::before {}
-::after {}
-::placeholder {}
-::first-letter {}
-::first-line {}
-
-/* combined examples */
-button.primary:hover {}
-div#main.content {}
-ul li:first-child {}
-input:focus::placeholder {}
-
-/* universal + pseudo */
-*::before {}
-*::after {}
-
-/* =======================
-⚡ SHORTHANDS
-======================= */
-.test2 {
-	background: red url(img.jpg) no-repeat center/cover;
-	border: 2px solid black;
-	font: bold 16px Arial;
-	margin: 10px 20px;
-	padding: 5px 10px;
-}

Transcendence/srcs/frontend/src/notes.js

@@ -1,123 +0,0 @@
-// SIZE
-box.style.width = "200px";
-box.style.height = "100px";
-box.style.minWidth = "100px";
-box.style.maxWidth = "500px";
-
-{
-	display: "flex"           // flex | inline-flex | block | inline | none
-	justifyContent: "flex-start"    // flex-start | flex-end | center | space-between | space-around | space-evenly
-	alignItems: "stretch"     // stretch | flex-start | flex-end | center | baseline
-}
-
-
-
-// POSITION
-box.style.position = "absolute";
-box.style.top = "50px";
-box.style.left = "100px";
-box.style.right = "20px";
-box.style.bottom = "10px";
-box.style.zIndex = "10";
-
-// SPACING
-box.style.margin = "10px";
-box.style.padding = "20px";
-box.style.marginTop = "10px";
-box.style.paddingLeft = "5px";
-
-// BACKGROUND & COLORS
-box.style.background = "red";
-box.style.backgroundColor = "blue";
-box.style.color = "white";
-
-// BORDER
-box.style.border = "2px solid black";
-box.style.borderRadius = "10px";
-
-// TEXT
-box.style.fontSize = "20px";
-box.style.fontWeight = "bold";
-box.style.textAlign = "center";
-
-// DISPLAY & VISIBILITY
-box.style.display = "block";
-box.style.visibility = "visible";
-box.style.opacity = "0.5";
-
-// TRANSFORM
-box.style.transform = "translateX(100px)";
-box.style.transform = "translate(50px, 20px)";
-box.style.transform = "scale(1.5)";
-box.style.transform = "rotate(45deg)";
-box.style.transform = "translateX(100px) scale(2)";
-
-// ANIMATION & TRANSITION
-box.style.transition = "all 0.3s ease";
-box.style.animation = "move 2s linear";
-
-// INTERACTION
-box.style.cursor = "pointer";
-box.style.pointerEvents = "none";
-// /////////////////////////////////////////////////////>
-// /////////////////////////////////////////////////////>
-// CONTENT
-el.textContent = "Hello";          // plain text
-el.innerHTML = "<b>Hello</b>";     // HTML content
-el.innerText = "Hello";            // like textContent but respects line breaks
-
-// ATTRIBUTES
-el.id = "myDiv";                   // element ID
-el.className = "box highlight";    // full class string
-el.classList.add("active");        // add a class
-el.classList.remove("hidden");     // remove a class
-el.classList.toggle("open");       // toggle a class
-el.title = "Tooltip text";         // title attribute
-el.value = "42";                   // input value
-el.src = "image.png";              // img, video, audio src
-el.href = "https://example.com";   // anchor href
-el.alt = "alternative text";       // img alt
-
-// DOM STRUCTURE
-el.appendChild(child);             // add child
-el.append(child1, child2);         // add multiple children
-el.prepend(child);                 // add at start
-el.remove();                        // remove self
-el.replaceWith(newEl);              // replace element
-el.cloneNode(true);                 // copy element (deep if true)
-
-// DATA & CUSTOM
-el.dataset.id = "123";             // data-id attribute
-el.dataset.name = "box1";          // data-name attribute
-
-// EVENTS
-el.onclick = () => {};              // direct event assignment
-el.onmouseover = () => {};
-el.addEventListener("click", () => {});   // preferred
-el.removeEventListener("click", handler);
-
-// VISIBILITY & FOCUS
-el.hidden = true;                   // hides element
-el.focus();                         // focus element
-el.blur();                          // remove focus
-el.tabIndex = 0;                     // make element focusable
-
-// DIMENSIONS & POSITION (read-only or get)
-el.clientWidth;
-el.clientHeight;
-el.offsetWidth;
-el.offsetHeight;
-el.offsetTop;
-el.offsetLeft;
-el.scrollWidth;
-el.scrollHeight;
-el.scrollTop;
-el.scrollLeft;
-
-// OTHER
-el.checked = true;                  // checkbox / radio
-el.selected = true;                 // option element
-el.disabled = true;                 // input/button
-el.readOnly = true;                 // input/textarea
-el.name = "username";               // input / form element
-el.type = "text";                   // input type

Transcendence/srcs/frontend/src/renderer.js

@@ -0,0 +1,133 @@
+// ─────────────────────────────────────────────
+// RENDU
+// ─────────────────────────────────────────────
+
+const CELL   = 30;
+const COLORS = ['#000500','#00ff41','#39ff14','#00e676','#76ff03','#b2ff59','#00ffaa','#ccff00','#2d5a2d'];
+
+const ctxMain     = document.getElementById('canvas-main').getContext('2d');
+const ctxNext     = document.getElementById('canvas-next').getContext('2d');
+const ctxHold     = document.getElementById('canvas-hold').getContext('2d');
+const ctxOpponent = document.getElementById('canvas-opponent').getContext('2d');
+
+function drawCell(ctx, x, y, colorIndex, size) {
+    const p = 1;
+    const color = COLORS[colorIndex];
+    ctx.fillStyle = color;
+    ctx.fillRect(x * size + p, y * size + p, size - p * 2, size - p * 2);
+    // Glow inner
+    ctx.shadowColor = color;
+    ctx.shadowBlur  = 6;
+    ctx.fillStyle = color;
+    ctx.fillRect(x * size + p + 2, y * size + p + 2, size - p * 2 - 4, size - p * 2 - 4);
+    ctx.shadowBlur = 0;
+    // Highlight top/left
+    ctx.fillStyle = 'rgba(200,255,200,0.2)';
+    ctx.fillRect(x * size + p, y * size + p, size - p * 2, 2);
+    ctx.fillRect(x * size + p, y * size + p, 2, size - p * 2);
+    // Shadow bottom/right
+    ctx.fillStyle = 'rgba(0,0,0,0.5)';
+    ctx.fillRect(x * size + p, (y + 1) * size - p - 2, size - p * 2, 2);
+    ctx.fillRect((x + 1) * size - p - 2, y * size + p, 2, size - p * 2);
+}
+
+function clearCanvas(ctx, w, h) {
+    ctx.fillStyle = '#000500';
+    ctx.fillRect(0, 0, w, h);
+}
+
+function drawGridLines(ctx, cols, rows, size) {
+    ctx.strokeStyle = 'rgba(0,255,65,0.06)';
+    ctx.lineWidth   = 1;
+    for (let x = 0; x <= cols; x++) {
+        ctx.beginPath(); ctx.moveTo(x * size, 0); ctx.lineTo(x * size, rows * size); ctx.stroke();
+    }
+    for (let y = 0; y <= rows; y++) {
+        ctx.beginPath(); ctx.moveTo(0, y * size); ctx.lineTo(cols * size, y * size); ctx.stroke();
+    }
+}
+
+function drawGhost(ctx, piece, grid) {
+    if (!piece) return;
+    const ghost = { x: piece.getPosition().x, y: piece.getPosition().y };
+    const shape = piece.getShape();
+
+    while (true) {
+        ghost.y++;
+        let valid = true;
+        for (let row = 0; row < shape.length && valid; row++)
+            for (let col = 0; col < shape[row].length && valid; col++)
+                if (shape[row][col] !== 0) {
+                    const ny = ghost.y + row;
+                    const nx = ghost.x + col;
+                    if (ny < 0 || ny >= grid.length || nx < 0 || nx >= grid[ny].length || grid[ny][nx] !== 0) valid = false;
+                }
+        if (!valid) { ghost.y--; break; }
+    }
+
+    if (ghost.y === piece.getPosition().y) return;
+
+    ctx.strokeStyle = 'rgba(0,255,65,0.25)';
+    ctx.lineWidth   = 1;
+    for (let row = 0; row < shape.length; row++)
+        for (let col = 0; col < shape[row].length; col++)
+            if (shape[row][col] !== 0)
+                ctx.strokeRect(
+                    (ghost.x + col) * CELL + 2,
+                    (ghost.y + row) * CELL + 2,
+                    CELL - 4, CELL - 4
+                );
+}
+
+function drawMiniPiece(ctx, piece, canvasW, canvasH) {
+    clearCanvas(ctx, canvasW, canvasH);
+    if (!piece) return;
+    const shape   = piece.getShape();
+    const color   = piece.getColor();
+    const s       = 20;
+    const offsetX = Math.floor((canvasW / s - shape[0].length) / 2);
+    const offsetY = Math.floor((canvasH / s - shape.length) / 2);
+    for (let row = 0; row < shape.length; row++)
+        for (let col = 0; col < shape[row].length; col++)
+            if (shape[row][col] !== 0)
+                drawCell(ctx, offsetX + col, offsetY + row, color, s);
+}
+
+function render() {
+    // Grille principale
+    clearCanvas(ctxMain, 300, 600);
+    drawGridLines(ctxMain, 10, 20, CELL);
+
+    for (let y = 0; y < game.grid.length; y++)
+        for (let x = 0; x < game.grid[y].length; x++)
+            if (game.grid[y][x] !== 0)
+                drawCell(ctxMain, x, y, game.grid[y][x], CELL);
+
+    // Ghost + pièce courante
+    if (game.currentPiece) {
+        drawGhost(ctxMain, game.currentPiece, game.grid);
+        const { x, y } = game.currentPiece.getPosition();
+        const shape     = game.currentPiece.getShape();
+        const color     = game.currentPiece.getColor();
+        for (let row = 0; row < shape.length; row++)
+            for (let col = 0; col < shape[row].length; col++)
+                if (shape[row][col] !== 0)
+                    drawCell(ctxMain, x + col, y + row, color, CELL);
+    }
+
+    // Panneaux miniatures
+    drawMiniPiece(ctxNext, game.nextPiece,   100, 80);
+    drawMiniPiece(ctxHold, game.storedPiece, 100, 80);
+
+    // Score
+    document.getElementById('score-display').textContent = game.score;
+}
+
+function renderOpponent(opponentGrid) {
+    clearCanvas(ctxOpponent, 300, 600);
+    drawGridLines(ctxOpponent, 10, 20, CELL);
+    for (let y = 0; y < opponentGrid.length; y++)
+        for (let x = 0; x < opponentGrid[y].length; x++)
+            if (opponentGrid[y][x] !== 0)
+                drawCell(ctxOpponent, x, y, opponentGrid[y][x], CELL);
+}

Transcendence/srcs/frontend/src/stats.js

@@ -1,5 +1,5 @@
-import { Window } from '../core/windows.js';
+import { Window } from './windows.js';
-import { API, STORAGE_KEYS } from '../core/config.js';
+import { API, STORAGE_KEYS } from './config.js';
 
 /**
  * Stats window — displays Scribble + Tetris stats for any user

Transcendence/srcs/frontend/src/test/delamerde/a.js

@@ -1,55 +0,0 @@
-import fetch from 'node-fetch';
-import express, { response } from 'express';
-import cors from 'cors';
-
-const app = express();
-const PORT = 3000//process.env.PORT || 3000;
-
-app.use(express.json());
-app.use(cors());
-
-let token;
-async function set_token()
-{
-	fetch("https://api.intra.42.fr/oauth/token", {
-		method: "POST",
-		body: "grant_type=client_credentials&client_id=u-s4t2ud-c226cd35cd1ac08a4c6668deee1c64d7d67a13a766aee672acafd4a1522d483c&client_secret=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",
-		headers: {
-			"User-Agent": "agallon",
-			'Content-Type': 'application/x-www-form-urlencoded',}
-	})
-	.then(response => {
-		return response.json();
-	})
-	.then(data => {
-		token = data;
-		setTimeout(set_token, token.expires_in);
-	})
-	.catch(error => {
-        console.error('Error fetching token:', error);
-    });
-}
-set_token();
-
-app.get('/proxy/profile/:login', async (req, res) => {
-    const { login } = req.params;
-    const profileURL = `https://api.intra.42.fr/v2/users/${login}`;
-    try {
-        const response = await fetch(profileURL, {
-			headers: {
-				"Authorization": `Bearer ${token.access_token}`}});
-		console.log(`response.status =  ${response.status}`);
-		if (response.status !== 200) {
-			throw new Error('User not found');
-		}
-        const data =  await response.json();
-	    res.status(200).json(data);
-    } catch (error) {
-        console.error('Error fetching profile:', error);
-        res.status(500).json({ error: 'Failed to fetch profile' });
-    }
-});
-
-app.listen(PORT, () => {
-    console.log(`Proxy server running on port ${PORT}`);
-});

Transcendence/srcs/frontend/src/test/delamerde/header.js

@@ -1,26 +0,0 @@
-import {checkIfLoggedIn} from './tools.js';
-
-export class Header {
-    constructor() {
-        this.obj = document.createElement('div');
-        Object.assign(this.obj.style, {
-            
-        });
-        let play = document.createElement('span');
-        let title = document.createElement('span');
-        let login = document.createElement('span');
-
-        play.textContent = "PLAY";
-        if (checkIfLoggedIn())
-            title.textContent = "Welcome back you!";
-        else
-            title.textContent = "Welcome to CAT !";
-
-        this.obj.append(play);
-        this.obj.append(title);
-        this.obj.append(login);
-    }
-
-
-
-}

Transcendence/srcs/frontend/src/test/delamerde/popup.js

@@ -1,44 +0,0 @@
-export class Popup {
-
-    constructor(msg, parent = document.body) {
-        this.msg = msg;
-        this.parent = parent;
-        this.obj = document.createElement('span');
-        
-        this.obj.className = "popup";
-        this.obj.textContent = "";
-        this.obj.style.opacity = "0";
-        this.run();
-    }
-
-    async create() {
-        this.parent.appendChild(this.obj);
-    
-        this.obj.style.transition = "opacity 0.5s ease";
-        requestAnimationFrame(() => {
-            this.obj.style.opacity = "1";
-        });
-        await new Promise(r => setTimeout(r, 500));
-    }
-    async write(speed = 50) {
-        for (let i = 0; i < this.msg.length; i++) {
-            this.obj.textContent += this.msg[i];
-            await new Promise(r => setTimeout(r, speed));
-        }
-    }
-    async remove() {
-    
-        await new Promise(r => setTimeout(r, 2000));
-        this.obj.style.transition = "opacity 0.3s ease";
-        this.obj.style.opacity = "0";
-        await new Promise(r => setTimeout(r, 300));
-        if (this.obj.parentNode) {
-            this.obj.parentNode.removeChild(this.obj);
-        }
-    }
-    async run() {
-        await this.create();
-        await this.write();
-        await this.remove();
-    }
-}

Transcendence/srcs/frontend/src/test/delamerde/tools.js

@@ -1,9 +0,0 @@
-import { STORAGE_KEYS } from '../../core/config.js';
-
-export function checkIfLoggedIn() {
-    const token = localStorage.getItem(STORAGE_KEYS.AUTH_TOKEN);
-    if (token) {
-        return true;
-    }
-    return false;
-}

Transcendence/srcs/frontend/src/test/glowing_button.css

@@ -1,43 +0,0 @@
-
-/* ////////////////////////////////////////// */
-.box {
-	background: #142d4a;
-	height: 200px;
-	aspect-ratio: 1/1;
-	border-radius: 10px;
-	position: relative;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-@property --deg {
-	syntax: '<angle>';
-	inherits: true;
-	initial-value: 0deg;
-}
-
-.box::before,
-.box::after {
-	content: "";
-	position: absolute;
-	height: 100%;
-	width: 100%;
-	background: conic-gradient(
-		from var(--deg) at center,
-		#00c3ff,
-		#4d0199,
-		#6300c6,
-		#009dcd
-	);
-	border-radius: inherit;
-	z-index: -2;
-	padding: 2px;
-	animation: autoRotate 2s linear infinite;
-}
-.box::after {
-	filter: blur(10px);
-}
-@keyframes autoRotate {
-	to{ --deg: 360deg; }
-}

Transcendence/srcs/frontend/src/test/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<head>
-	<link rel="stylesheet" href="../game2/game.css" />
-	<link rel="stylesheet" href="./style.css" />
-	<script type="module" src="./script.js"></script>
-</head>
-<body style="background-color: black; display: flex; justify-content: center; align-items: center;">
-<!-- 
-	<div class="container">
-	<div class="item item-1">Item 1</div>
-	<div class="item item-2">Item 2</div>
-	<div class="item item-3">Item 3</div>
-	</div> -->
-	<div></div>
-	<div class="box"></div>
-</body>
-</html>

Transcendence/srcs/frontend/src/test/script.js

@@ -1,17 +0,0 @@
-// import { LoginSidebar } from "./loginSidebar.js";
-import { Sidebar } from "./sidebar.js";
-import { updateElement } from "./tools.js";
-
-let b = updateElement({
-    classList: ['container2'],
-    additionalStyles: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        alignItems: 'center'
-    }
-});
-new Sidebar();
-// new LoginSidebar();
-
-
-// new Sidebar();

Transcendence/srcs/frontend/src/test/sidebar.js

@@ -1,93 +0,0 @@
-import { updateElement } from "./tools.js";
-
-import { windowRegistry } from '../core/windows.js';
-import { LoginWindow } from '../windows/login.js';
-import { LogoutWindow } from '../windows/logout.js';
-import { GlobalChat } from '../windows/global_chat.js';
-import { AvatarWindow } from '../windows/avatar.js';
-import { FriendsWindow } from '../windows/friends.js';
-import { GameRoomWindow } from '../windows/game_room.js';
-import { StatsWindow } from '../windows/stats.js';
-
-export class Sidebar {
-
-/* CONSTURCTOR */
-    constructor(parent = document.body) {
-        this.parent = parent;
-        this.stateopen = 'closed';
-        // this.state = this.checkIfLoggedIn() ? "loggedOut" : "loggedIn";
-
-        this.obj = updateElement({
-            parent: parent,
-        	id: `login-wrapper`,
-            classList: [ 'login-wrapper' ],
-        })
-        this.createAllButtons();
-
-		this.handleClickOutside = (event) => {
-			if (this.stateopen === 'open' && !this.obj.contains(event.target)) {
-				this.toggle();
-			}
-		};
-    }
-
-/* toogle menu open / closed */
-    toggle() {
-        this.stateopen = (this.stateopen === 'open') ? 'closed' : 'open';
-        console.log(this.stateopen);
-		if (this.stateopen === 'open') {
-			this.main_button.style.display = 'none';
-			this.menu_buttons.forEach(b => b.style.display = 'block');
-			// ensure only ONE listener exists
-			document.removeEventListener('click', this.handleClickOutside);
-			document.addEventListener('click', this.handleClickOutside);
-
-		}
-		else {
-			this.menu_buttons.forEach(b => b.style.display = 'none');
-			this.main_button.style.display = 'block';
-			document.removeEventListener('click', this.handleClickOutside);
-		}
-    }
-
-/* create all element, append to div */
-    createAllButtons() {
-	//	not-logged closed button
-        this.main_button = updateElement({
-        	id: `button-main`,
-            parent: this.obj,
-            textContent: 'LOGIN',
-            classList: [ 'login-button' ],
-        })
-		this.obj.append(this.main_button);
-        this.main_button.addEventListener('click', (e) => {
-			e.stopPropagation();
-            this.toggle();
-        })
-	
-	// menu buttons
-        const items = ['friends', 'chat', 'rooms', 'settings', 'log','logout'];
-        this.menu_buttons = [];
-
-        items.forEach(name => {
-            this[name] = updateElement({
-                id: `button-${name}`,
-                parent: this.obj,
-                textContent: name,
-                classList: ['login-button'],
-                additionalStyles: { display: 'none'}
-            })
-            this.menu_buttons.push(this[name]);
-			this.obj.append(this[name]);
-        })
-		this.loginWindow = new LoginWindow();
-		this.obj.append(this.loginWindow.form);
-		this.loginWindow.form.style.display = 'none';
-        this['log'].addEventListener('click', () => {
-			this.menu_buttons.forEach(b => b.style.display = 'none');
-            this.loginWindow.form.style.display = 'block';
-        })
-	// menu elements
-    }
-
-}

Transcendence/srcs/frontend/src/test/style.css

@@ -1,138 +0,0 @@
-/* BASE STYLES */
-:root {
-  --clr-dark: #0f172a;
-  --clr-light: #f1f5f9;
-  --clr-accent: #e11d48;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  line-height: 1.6; /* inherited */
-  word-spacing: 1.4px; /* inherited */
-  font-family: "Roboto", sans-serif; /* inherited */
-  color: var(--clr-dark); /* inherited */
-  background-color: var(--clr-light);
-  /* display: flex; */
-  /* justify-content: center; */
-  /* align-items: center; */
-  height: 100vh;
-  position: relative;
-}
-
-.container {
-  width: 80%;
-  height: 700px;
-  margin: 0 auto;
-  border: 10px solid var(--clr-dark);
-}
-
-.item {
-  width: 150px;
-  height: 150px;
-  background-color: #fb7185;
-  padding: 1em;
-  font-weight: 700;
-  color: var(--clr-light);
-  text-align: center;
-  border: 10px solid var(--clr-accent);
-  border-radius: 10px;
-
-  margin-left: -50px
-}
-
-/* END OF BASE STYLES */
-.item-1 {
-	font-size: 1.5rem;
-}
-.container {
-  display: flex;
-}
-
-
-.container2 {
-  margin: 0 auto;
-  border: 10px solid var(--clr-dark);
-}
-/*//////////////////////////////////////////////////////////*/
-
-
-.button {
-  padding: 10px 18px;
-  font-size: 14px;
-  font-family: inherit;
-
-  color: white;
-  background-color: #3b82f6; /* blue */
-
-  border: none;
-  border-radius: 8px;
-
-  cursor: pointer;
-
-  transition: all 0.2s ease;
-}
-.button:hover {
-  background-color: #2563eb;
-  transform: translateY(-1px);
-}
-.button:active {
-  transform: translateY(1px);
-  background-color: #1d4ed8;
-}
-.button:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
-}
-
-/*//////////////////////////////////////////////////////////*/
-.login-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 7px;
-
-  background-color: #3b82f6; /* blue */
-
-  padding-right: 75px;
-  padding-bottom: 25px;
-  padding-top: 25px;
-  position: fixed;
-  top: 0;
-  right: 0;
-}
-
-.loggin-button {
-  position: relative;
-  display: inline-block;
-  border: 5px solid blue;
-  height: 35px;
-  min-width: 50px;
-
-}
-/*//////////////////////////////////////////////////////////*/
-/* LOGIN */
-
-.login-button {
-  width: 150px;
-  height: 150px;
-  background-color: #fb7185;
-  padding: 1em;
-  font-weight: 700;
-  color: var(--clr-light);
-  text-align: center;
-  border: 10px solid var(--clr-accent);
-  border-radius: 10px;
-
-  margin-left: -50px
-
-}
-
-.login-element {
-
-}

Transcendence/srcs/frontend/src/test/tools.js

@@ -1,29 +0,0 @@
-
-export function updateElement({
-    el,                  // existing element or null to create new
-    parent = document.body,
-    id = null,
-    classList = [],      // object like { css - classes to add }
-    textContent = "",
-    additionalStyles = {} // object like { color: 'red', display: 'flex' }
-} = {}) {
-    // If no element passed, create a div by default
-    if (!el) {
-        el = document.createElement('div');
-        parent.appendChild(el);
-    }
-
-    // Set ID if provided
-    if (id) el.id = id;
-
-    // Manage classes
-    classList.forEach(cls => el.classList.add(cls));
-
-    // Set text content
-    if (textContent !== undefined) el.textContent = textContent;
-
-    // Apply additional styles
-    Object.assign(el.style, additionalStyles);
-
-    return el; // return element for further use
-}

Transcendence/srcs/frontend/src/tetris.css

@@ -445,37 +445,6 @@ button:disabled { opacity: 0.3; cursor: not-allowed; }
     letter-spacing: 0.05em;
 }
 
-/* ── Theme color picker ── */
-.theme-btns {
-    display: flex;
-    gap: 6px;
-    margin-top: 2px;
-}
-
-.theme-btn {
-    width: 22px;
-    height: 22px;
-    min-width: 22px;
-    padding: 0;
-    border-radius: 50%;
-    border: 2px solid transparent;
-    cursor: pointer;
-    transition: transform 0.15s, box-shadow 0.15s;
-}
-
-.theme-btn[data-theme="green"]  { background: #00ff41; }
-.theme-btn[data-theme="red"]    { background: #ff1744; }
-.theme-btn[data-theme="yellow"] { background: #ffd600; }
-.theme-btn[data-theme="blue"]   { background: #00b0ff; }
-
-.theme-btn:hover { transform: scale(1.2); }
-
-.theme-btn.active {
-    border-color: #ffffff;
-    box-shadow: 0 0 8px currentColor;
-    transform: scale(1.15);
-}
-
 #settings-panel input[type="number"] {
     background: var(--bg);
     border: 1px solid var(--border);
@@ -651,36 +620,3 @@ button:disabled { opacity: 0.3; cursor: not-allowed; }
 }
 
 body { overflow: hidden; }
-
-
-/* ── Shield ───────────────────────────────── */
-.shield-bar-bg {
-    width: 100%;
-    height: 4px;
-    background: rgba(0,212,255,0.15);
-    border-radius: 2px;
-    margin-top: 4px;
-    overflow: hidden;
-}
-
-.shield-bar {
-    height: 100%;
-    background: #00d4ff;
-    border-radius: 2px;
-    transition: width 0.1s linear;
-    box-shadow: 0 0 6px #00d4ff;
-}
-
-.shield-ready   { color: #00d4ff !important; }
-.shield-active  { color: #00ffff !important; text-shadow: 0 0 8px #00ffff; }
-.shield-cooldown { color: var(--dim) !important; }
-
-kbd {
-    display: inline-block;
-    padding: 0 3px;
-    border: 1px solid var(--border);
-    border-radius: 2px;
-    font-size: 0.6rem;
-    font-family: inherit;
-    color: var(--dim);
-}

Transcendence/srcs/frontend/src/tetris.html

@@ -15,9 +15,10 @@
 
 <h1 data-text="TETRIS">TETRIS<span class="cursor">_</span></h1>
 
-<a id="btn-home" href="/">Home</a>
+<!-- Bouton home -->
+	<a id="btn-home" href="/">Home</a>
 
-<!-- Panneau duel -->
+<!-- Panneau de connexion duel -->
 <div id="duel-panel">
     <span class="settings-title">Duel</span>
     <div class="duel-row">
@@ -39,7 +40,7 @@
     <div id="local-section">
         <div id="app">
 
-            <!-- Colonne gauche : Hold + Score + Boutons + Paramètres -->
+            <!-- Colonne gauche : Hold + Score + Boutons + Settings -->
             <div id="left-column">
                 <div class="panel">
                     <div class="panel-title">Hold</div>
@@ -50,12 +51,6 @@
                         <div class="score-value" id="score-display">0</div>
                     </div>
 
-                    <div class="score-block">
-                        <div class="score-label">Shield <kbd>E</kbd></div>
-                        <div class="score-value shield-ready" id="shield-status-display">PRÊT</div>
-                        <div class="shield-bar-bg"><div class="shield-bar" id="shield-bar"></div></div>
-                    </div>
-
                     <div class="btn-group">
                         <button id="btn-start">Start</button>
                         <button id="btn-pause" disabled>Pause</button>
@@ -63,18 +58,9 @@
                     </div>
                 </div>
 
-                <!-- Paramètres -->
+                <!-- Panneau de configuration -->
                 <div id="settings-panel">
                     <div class="settings-title">Paramètres</div>
-                    <div class="settings-row">
-                        <label>Couleur</label>
-                        <div class="theme-btns">
-                            <button class="theme-btn active" data-theme="green"  title="Vert"></button>
-                            <button class="theme-btn"        data-theme="red"    title="Rouge"></button>
-                            <button class="theme-btn"        data-theme="yellow" title="Jaune"></button>
-                            <button class="theme-btn"        data-theme="blue"   title="Bleu"></button>
-                        </div>
-                    </div>
                     <div class="settings-row">
                         <label for="input-ttd">Vitesse initiale (ms)</label>
                         <input type="number" id="input-ttd" min="100" max="3000" step="50" value="1000">
@@ -111,7 +97,6 @@
                     <div><span>W</span> Rot. droite</div>
                     <div><span>Espace</span> Drop</div>
                     <div><span>C</span> Hold</div>
-                    <div><span>E</span> Shield</div>
                 </div>
             </div>
 
@@ -126,7 +111,6 @@
                 <div class="score-label">Score</div>
                 <div class="score-value" id="opponent-score">—</div>
             </div>
-            <div id="opponent-shield-indicator" style="display:none;color:#00d4ff;font-size:0.75rem;text-align:center;letter-spacing:1px;margin-top:4px;">&#x1F6E1; SHIELD ACTIF</div>
         </div>
 
         <div id="opponent-wrapper">
@@ -150,22 +134,34 @@
 
     <div id="lb-scores" class="lb-content lb-content--active">
         <table class="lb-table">
-            <thead><tr><th>#</th><th>Joueur</th><th>Meilleur score</th><th>Parties</th></tr></thead>
+            <thead>
-            <tbody id="lb-scores-body"><tr><td colspan="4">Chargement…</td></tr></tbody>
+                <tr><th>#</th><th>Joueur</th><th>Meilleur score</th><th>Parties</th></tr>
+            </thead>
+            <tbody id="lb-scores-body">
+                <tr><td colspan="4">Chargement…</td></tr>
+            </tbody>
         </table>
     </div>
 
     <div id="lb-wins" class="lb-content">
         <table class="lb-table">
-            <thead><tr><th>#</th><th>Joueur</th><th>Victoires</th><th>Parties</th></tr></thead>
+            <thead>
-            <tbody id="lb-wins-body"><tr><td colspan="4">Chargement…</td></tr></tbody>
+                <tr><th>#</th><th>Joueur</th><th>Victoires</th><th>Parties</th></tr>
+            </thead>
+            <tbody id="lb-wins-body">
+                <tr><td colspan="4">Chargement…</td></tr>
+            </tbody>
         </table>
     </div>
 
     <div id="lb-history" class="lb-content">
         <table class="lb-table">
-            <thead><tr><th>#</th><th>Date</th><th>Type</th><th>Score</th><th>Résultat</th></tr></thead>
+            <thead>
-            <tbody id="lb-history-body"><tr><td colspan="5">Chargement…</td></tr></tbody>
+                <tr><th>#</th><th>Date</th><th>Type</th><th>Score</th><th>Résultat</th></tr>
+            </thead>
+            <tbody id="lb-history-body">
+                <tr><td colspan="5">Chargement…</td></tr>
+            </tbody>
         </table>
     </div>
 </div>
@@ -177,9 +173,59 @@
 <script src="tetris.js"></script>
 <script src="renderer.js"></script>
 <script src="duel.js"></script>
-<script src="leaderboard.js"></script>
 <script src="ui.js"></script>
-<script src="effects.js"></script>
 
+<script>
+// ── Responsive scaling ──────────────────────────
+(function() {
+    const container = document.getElementById('scale-container');
+    // Dimensions naturelles du contenu (single-player)
+    const NAT_W = 640;
+    const NAT_H = 1020;
+
+    function resize() {
+        const s = Math.min(
+            window.innerWidth  / NAT_W,
+            window.innerHeight / NAT_H
+        );
+        container.style.transform       = 'scale(' + s + ')';
+        container.style.transformOrigin = 'top center';
+        // Compense l'espace de layout non affecté par transform
+        container.style.marginBottom    = ((s - 1) * NAT_H) + 'px';
+    }
+
+    resize();
+    window.addEventListener('resize', resize);
+})();
+</script>
+
+<script>
+// ── Matrix rain ──────────────────────────────────
+(function() {
+    const canvas = document.getElementById('matrix-bg');
+    const ctx = canvas.getContext('2d');
+    function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }
+    resize();
+    window.addEventListener('resize', resize);
+    const chars = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEF>_{}[]|\\/#@$%^&*01';
+    const fs = 14;
+    let drops = [];
+    function initDrops() { drops = Array(Math.floor(canvas.width / fs)).fill(1); }
+    initDrops();
+    window.addEventListener('resize', initDrops);
+    setInterval(function() {
+        ctx.fillStyle = 'rgba(0,5,0,0.05)';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.font = fs + 'px monospace';
+        for (let i = 0; i < drops.length; i++) {
+            const ch = chars[Math.floor(Math.random() * chars.length)];
+            ctx.fillStyle = drops[i] * fs < 50 ? '#aaffaa' : '#00ff41';
+            ctx.fillText(ch, i * fs, drops[i] * fs);
+            if (drops[i] * fs > canvas.height && Math.random() > 0.975) drops[i] = 0;
+            drops[i]++;
+        }
+    }, 40);
+})();
+</script>
 </body>
 </html>