Compare commits
5 Commits
kali2
..
LosGringos
| Author | SHA1 | Date | |
|---|---|---|---|
 Thomas Fauve-Piot
|
0a6e9a25ed | ||
|
Thomas Fauve-Piot
|
cb1fc01ad6 | ||
|
Thomas Fauve-Piot
|
27704b97f8 | ||
|
Thomas Fauve-Piot
|
938d4cf3b5 | ||
|
Thomas Fauve-Piot
|
167896aedd |
@@ -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
|
||||||
+6
-446
@@ -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
|
@docker compose -f ./docker-compose.yml up -d
|
||||||
|
|
||||||
clean :
|
clean :
|
||||||
@@ -10,448 +12,6 @@ fclean :
|
|||||||
@docker compose -f ./docker-compose.yml down -v -t 1
|
@docker compose -f ./docker-compose.yml down -v -t 1
|
||||||
@docker system prune -af --volumes
|
@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
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
volumes:
|
volumes:
|
||||||
pgdata:
|
data:
|
||||||
|
|
||||||
networks:
|
networks:
|
||||||
transcendence:
|
transcendence:
|
||||||
@@ -12,7 +12,7 @@ services:
|
|||||||
ports:
|
ports:
|
||||||
- "5432:5432"
|
- "5432:5432"
|
||||||
volumes:
|
volumes:
|
||||||
- pgdata:/var/lib/postgresql
|
- data:/var/lib/postgresql/data/pg15/
|
||||||
env_file:
|
env_file:
|
||||||
- ../.env
|
- ../.env
|
||||||
networks:
|
networks:
|
||||||
@@ -24,6 +24,8 @@ services:
|
|||||||
build: ./srcs/backend
|
build: ./srcs/backend
|
||||||
expose:
|
expose:
|
||||||
- "3001"
|
- "3001"
|
||||||
|
# ports:
|
||||||
|
# - "3001:3001"
|
||||||
depends_on:
|
depends_on:
|
||||||
- database
|
- database
|
||||||
volumes:
|
volumes:
|
||||||
@@ -38,7 +40,7 @@ services:
|
|||||||
container_name: frontend
|
container_name: frontend
|
||||||
build: ./srcs/frontend/
|
build: ./srcs/frontend/
|
||||||
ports:
|
ports:
|
||||||
- "8443:443"
|
- "8080:80"
|
||||||
depends_on:
|
depends_on:
|
||||||
- backend
|
- backend
|
||||||
networks:
|
networks:
|
||||||
|
|||||||
@@ -127,7 +127,7 @@ async function createTables()
|
|||||||
status VARCHAR(20) DEFAULT 'waiting',
|
status VARCHAR(20) DEFAULT 'waiting',
|
||||||
max_players INT DEFAULT 8,
|
max_players INT DEFAULT 8,
|
||||||
current_round INT DEFAULT 0,
|
current_round INT DEFAULT 0,
|
||||||
max_rounds INT DEFAULT 5,
|
max_rounds INT DEFAULT 3,
|
||||||
round_duration INT DEFAULT 90,
|
round_duration INT DEFAULT 90,
|
||||||
created_at TIMESTAMP DEFAULT NOW(),
|
created_at TIMESTAMP DEFAULT NOW(),
|
||||||
started_at TIMESTAMP,
|
started_at TIMESTAMP,
|
||||||
|
|||||||
@@ -1,13 +1,5 @@
|
|||||||
FROM node:20-alpine
|
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
|
WORKDIR /app
|
||||||
|
|
||||||
COPY package*.json ./
|
COPY package*.json ./
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import express from 'express';
|
import express from 'express';
|
||||||
import https from 'https';
|
import http from 'http';
|
||||||
import fs from 'fs';
|
|
||||||
import cors from 'cors';
|
import cors from 'cors';
|
||||||
import {Server} from 'socket.io';
|
import {Server} from 'socket.io';
|
||||||
import authRouter from './routes/auth.js';
|
import authRouter from './routes/auth.js';
|
||||||
@@ -14,11 +13,7 @@ import setupSocketIO from './services/socket.js';
|
|||||||
import avatarService from './services/avatar.js';
|
import avatarService from './services/avatar.js';
|
||||||
|
|
||||||
const app = express();
|
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,
|
const io = new Server(server,
|
||||||
{
|
{
|
||||||
cors:
|
cors:
|
||||||
|
|||||||
@@ -26,17 +26,6 @@ router.post('/login', async(req, res) =>
|
|||||||
res.status(result.status).json(result.data);
|
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) => {
|
router.get('/github', (req, res) => {
|
||||||
const githubAuthUrl = `https://github.com/login/oauth/authorize?` +
|
const githubAuthUrl = `https://github.com/login/oauth/authorize?` +
|
||||||
`client_id=${process.env.GITHUB_CLIENT_ID}&` +
|
`client_id=${process.env.GITHUB_CLIENT_ID}&` +
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ router.post('/upload', authenticateToken, upload.single('avatar'), async(req, re
|
|||||||
res.status(result.status).json(result.data);
|
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);
|
const result = await avatarService.deleteAvatar(req.user.userId);
|
||||||
res.status(result.status).json(result.data);
|
res.status(result.status).json(result.data);
|
||||||
|
|||||||
@@ -2,30 +2,6 @@ import bcrypt from 'bcrypt';
|
|||||||
import jwt from 'jsonwebtoken';
|
import jwt from 'jsonwebtoken';
|
||||||
import {query} from '../db.js';
|
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)
|
async function login(username, password)
|
||||||
{
|
{
|
||||||
try
|
try
|
||||||
@@ -84,4 +60,4 @@ async function register(username, password)
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {register, login, logout};
|
export default {register, login};
|
||||||
|
|||||||
@@ -69,9 +69,6 @@ async function deleteAvatar(userId) {
|
|||||||
if (currentAvatar === null)
|
if (currentAvatar === null)
|
||||||
return ({status: 404, data: {error: 'User not found'}});
|
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
|
// Reset the avatar to the default one
|
||||||
await setAvatar(DEFAULT_AVATAR, userId);
|
await setAvatar(DEFAULT_AVATAR, userId);
|
||||||
|
|
||||||
|
|||||||
@@ -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
|
// Check if a playing game has only 1 player left and auto-stop it
|
||||||
async function checkAndStopSinglePlayerGame(io, roomId, dbRoomId) {
|
async function checkAndStopSinglePlayerGame(io, roomId, dbRoomId) {
|
||||||
if (!dbRoomId) return;
|
if (!dbRoomId) return;
|
||||||
@@ -100,7 +43,6 @@ async function checkAndStopSinglePlayerGame(io, roomId, dbRoomId) {
|
|||||||
const players = await gameRoomService.getRoomPlayers(dbRoomId);
|
const players = await gameRoomService.getRoomPlayers(dbRoomId);
|
||||||
if (players.length <= 1) {
|
if (players.length <= 1) {
|
||||||
console.log(`Room ${dbRoomId} has only ${players.length} player(s) left, ending game`);
|
console.log(`Room ${dbRoomId} has only ${players.length} player(s) left, ending game`);
|
||||||
stopRoomTimer(roomId);
|
|
||||||
|
|
||||||
// Update room status to 'ended'
|
// Update room status to 'ended'
|
||||||
await gameRoomService.updateRoomStatus(dbRoomId, 'waiting');
|
await gameRoomService.updateRoomStatus(dbRoomId, 'waiting');
|
||||||
@@ -250,9 +192,7 @@ function setupSocketIO(io)
|
|||||||
revealedLetters: gameState.revealedLetters,
|
revealedLetters: gameState.revealedLetters,
|
||||||
revealedWord: gameState.revealedWord || [],
|
revealedWord: gameState.revealedWord || [],
|
||||||
guessedLetters: gameState.guessedLetters,
|
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) {
|
if (socket.gameRoomId) {
|
||||||
const roomId = socket.gameRoomId;
|
const roomId = socket.gameRoomId;
|
||||||
const dbRoomId = socket.gameRoomDbId;
|
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', {
|
socket.to(roomId).emit('game-player-left', {
|
||||||
username: socket.user.username,
|
username: socket.user.username,
|
||||||
@@ -337,8 +268,7 @@ function setupSocketIO(io)
|
|||||||
revealedWord: gameState.revealedWord || [],
|
revealedWord: gameState.revealedWord || [],
|
||||||
guessedLetters: gameState.guessedLetters,
|
guessedLetters: gameState.guessedLetters,
|
||||||
players: gameState.players,
|
players: gameState.players,
|
||||||
scores: gameState.scores || {},
|
scores: gameState.scores || {}
|
||||||
timer: gameState.timerSeconds || 0
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -460,7 +390,6 @@ function setupSocketIO(io)
|
|||||||
const gameState = gameRooms.get(roomId);
|
const gameState = gameRooms.get(roomId);
|
||||||
if (!gameState) return;
|
if (!gameState) return;
|
||||||
|
|
||||||
startRoomTimer(io, roomId, 60);
|
|
||||||
gameState.currentWord = data.word.toLowerCase();
|
gameState.currentWord = data.word.toLowerCase();
|
||||||
gameState.revealedLetters = new Array(data.word.length).fill(false);
|
gameState.revealedLetters = new Array(data.word.length).fill(false);
|
||||||
gameState.revealedWord = new Array(data.word.length).fill('_');
|
gameState.revealedWord = new Array(data.word.length).fill('_');
|
||||||
@@ -623,8 +552,6 @@ function setupSocketIO(io)
|
|||||||
// Update round start scores for next round
|
// Update round start scores for next round
|
||||||
gameState.roundStartScores = { ...gameState.scores };
|
gameState.roundStartScores = { ...gameState.scores };
|
||||||
|
|
||||||
stopRoomTimer(roomId);
|
|
||||||
|
|
||||||
io.to(roomId).emit('game-word-found', {
|
io.to(roomId).emit('game-word-found', {
|
||||||
word: gameState.currentWord,
|
word: gameState.currentWord,
|
||||||
winner: username,
|
winner: username,
|
||||||
@@ -686,7 +613,6 @@ function setupSocketIO(io)
|
|||||||
// If the drawer left and there are still enough players, choose a new drawer
|
// If the drawer left and there are still enough players, choose a new drawer
|
||||||
if (wasDrawer && gameState.players.length >= 1)
|
if (wasDrawer && gameState.players.length >= 1)
|
||||||
{
|
{
|
||||||
stopRoomTimer(roomId);
|
|
||||||
// Pick the next player as the new drawer
|
// Pick the next player as the new drawer
|
||||||
gameState.currentPlayerIndex = gameState.currentPlayerIndex % gameState.players.length;
|
gameState.currentPlayerIndex = gameState.currentPlayerIndex % gameState.players.length;
|
||||||
const newDrawer = gameState.players[gameState.currentPlayerIndex];
|
const newDrawer = gameState.players[gameState.currentPlayerIndex];
|
||||||
@@ -706,7 +632,6 @@ function setupSocketIO(io)
|
|||||||
reason: 'drawer_left',
|
reason: 'drawer_left',
|
||||||
message: `${username} (dessinateur) a quitté, ${newDrawer} devient le nouveau dessinateur`
|
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 () => {
|
socket.on('game-end', async () => {
|
||||||
const roomId = socket.gameRoomId;
|
const roomId = socket.gameRoomId;
|
||||||
if (!roomId) return;
|
if (!roomId) return;
|
||||||
stopRoomTimer(roomId);
|
|
||||||
|
|
||||||
// Update room status to 'waiting' in database
|
// Update room status to 'waiting' in database
|
||||||
const dbRoomId = socket.gameRoomDbId;
|
const dbRoomId = socket.gameRoomDbId;
|
||||||
@@ -806,16 +730,6 @@ function setupSocketIO(io)
|
|||||||
_tetrisRelayToOpponent(socket, 'tetris:lines-cleared', data);
|
_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)
|
// start-duel → relayé aux DEUX joueurs de la room (inclut l'émetteur)
|
||||||
socket.on('tetris:start-duel', () => {
|
socket.on('tetris:start-duel', () => {
|
||||||
const code = socket.tetrisRoomCode;
|
const code = socket.tetrisRoomCode;
|
||||||
@@ -943,14 +857,6 @@ function setupSocketIO(io)
|
|||||||
}
|
}
|
||||||
else
|
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
|
// Regular player disconnect
|
||||||
socket.to(roomId).emit('game-player-left', {
|
socket.to(roomId).emit('game-player-left', {
|
||||||
username: socket.user.username,
|
username: socket.user.username,
|
||||||
|
|||||||
@@ -1,12 +1,5 @@
|
|||||||
FROM nginx:alpine
|
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 src /usr/share/nginx/html
|
||||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
EXPOSE 443
|
EXPOSE 80
|
||||||
CMD ["nginx", "-g", "daemon off;"]
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
@@ -1,9 +1,5 @@
|
|||||||
server {
|
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;
|
root /usr/share/nginx/html;
|
||||||
index index.html;
|
index index.html;
|
||||||
@@ -15,33 +11,27 @@ server {
|
|||||||
|
|
||||||
# Backend API
|
# Backend API
|
||||||
location /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 Host $host;
|
||||||
proxy_set_header X-Real-IP $remote_addr;
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
proxy_set_header X-Forwarded-Proto https;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
# Socket.IO WebSocket proxying
|
# Socket.IO WebSocket proxying
|
||||||
location /socket.io/ {
|
location /socket.io/ {
|
||||||
proxy_pass https://backend:3001;
|
proxy_pass http://backend:3001;
|
||||||
proxy_ssl_verify off;
|
|
||||||
proxy_http_version 1.1;
|
proxy_http_version 1.1;
|
||||||
proxy_set_header Upgrade $http_upgrade;
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
proxy_set_header Connection "upgrade";
|
proxy_set_header Connection "upgrade";
|
||||||
proxy_set_header Host $host;
|
proxy_set_header Host $host;
|
||||||
proxy_set_header X-Real-IP $remote_addr;
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
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/ {
|
location /avatar/ {
|
||||||
proxy_pass https://backend:3001/avatar/;
|
proxy_pass http://backend:3001/avatar/;
|
||||||
proxy_http_version 1.1;
|
proxy_http_version 1.1;
|
||||||
proxy_set_header Host $host;
|
proxy_set_header Host $host;
|
||||||
proxy_ssl_verify off;
|
|
||||||
proxy_hide_header Content-Type;
|
proxy_hide_header Content-Type;
|
||||||
add_header Cache-Control "public, max-age=3600";
|
add_header Cache-Control "public, max-age=3600";
|
||||||
}
|
}
|
||||||
|
|||||||
+16
-19
@@ -2,14 +2,13 @@
|
|||||||
* Application entry point
|
* Application entry point
|
||||||
* Initializes windows and handles menu interactions
|
* 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
|
* Main application class
|
||||||
@@ -17,6 +16,7 @@ import { StatsWindow } from '../windows/stats.js';
|
|||||||
*/
|
*/
|
||||||
class App {
|
class App {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
console.log("APP STARTED");
|
||||||
this.initWindows();
|
this.initWindows();
|
||||||
this.initMenu();
|
this.initMenu();
|
||||||
this.initPage();
|
this.initPage();
|
||||||
@@ -34,7 +34,6 @@ class App {
|
|||||||
new FriendsWindow();
|
new FriendsWindow();
|
||||||
new GameRoomWindow();
|
new GameRoomWindow();
|
||||||
new StatsWindow();
|
new StatsWindow();
|
||||||
new LogoutWindow();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -52,8 +51,7 @@ class App {
|
|||||||
'login': 'login',
|
'login': 'login',
|
||||||
'chat': 'chat',
|
'chat': 'chat',
|
||||||
'avatar': 'avatar',
|
'avatar': 'avatar',
|
||||||
'friends': 'friends',
|
'friends': 'friends'
|
||||||
'logout': 'logout'
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Event delegation on the menu
|
// Event delegation on the menu
|
||||||
@@ -78,6 +76,10 @@ class App {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const actionMap = {
|
||||||
|
'gameroom': 'gameroom'
|
||||||
|
};
|
||||||
|
|
||||||
// Event delegation on the menu
|
// Event delegation on the menu
|
||||||
page.addEventListener('click', (e) => {
|
page.addEventListener('click', (e) => {
|
||||||
const button = e.target.closest('.page__item');
|
const button = e.target.closest('.page__item');
|
||||||
@@ -85,14 +87,9 @@ class App {
|
|||||||
|
|
||||||
const action = button.dataset.action;
|
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;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 994 B After Width: | Height: | Size: 994 B |
|
Before Width: | Height: | Size: 1018 B After Width: | Height: | Size: 1018 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 955 B After Width: | Height: | Size: 955 B |
|
Before Width: | Height: | Size: 1022 B After Width: | Height: | Size: 1022 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 887 B After Width: | Height: | Size: 887 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1000 B After Width: | Height: | Size: 1000 B |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
+4
-48
@@ -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
|
* Avatar management window
|
||||||
@@ -68,11 +68,7 @@ export class AvatarWindow extends Window {
|
|||||||
text: 'Refresh'
|
text: 'Refresh'
|
||||||
});
|
});
|
||||||
|
|
||||||
this.deleteBtn = this.createElement('button', [CSS.BTN, CSS.BTN_SECONDARY], {
|
this.controls.append(this.statsBtn, this.chooseBtn, this.saveBtn, this.refreshBtn);
|
||||||
text: 'Delete avatar'
|
|
||||||
});
|
|
||||||
|
|
||||||
this.controls.append(this.statsBtn, this.chooseBtn, this.saveBtn, this.refreshBtn, this.deleteBtn);
|
|
||||||
|
|
||||||
// Feedback message
|
// Feedback message
|
||||||
this.message = this.createElement('div', CSS.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.chooseBtn.addEventListener('click', () => this.fileInput.click());
|
||||||
this.saveBtn.addEventListener('click', () => this.uploadAvatar());
|
this.saveBtn.addEventListener('click', () => this.uploadAvatar());
|
||||||
this.refreshBtn.addEventListener('click', () => this.loadAvatar());
|
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);
|
const token = localStorage.getItem(STORAGE_KEYS.AUTH_TOKEN);
|
||||||
if (!token) {
|
if (!token) {
|
||||||
this.showMessage('You must be logged in', 'error');
|
this.showMessage('You must be logged in', 'error');
|
||||||
this.showNotification('You must be logged in to change your avatar', 'red');
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const file = this.fileInput.files?.[0];
|
const file = this.fileInput.files?.[0];
|
||||||
if (!file) {
|
if (!file) {
|
||||||
this.showMessage('Select an image first', 'error');
|
this.showMessage('Select an image first', 'error');
|
||||||
this.showNotification('Please select an image to upload', 'red');
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -247,7 +240,6 @@ export class AvatarWindow extends Window {
|
|||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
const errorMsg = data?.error || data?.message || 'Upload failed';
|
const errorMsg = data?.error || data?.message || 'Upload failed';
|
||||||
this.showMessage(errorMsg, 'error');
|
this.showMessage(errorMsg, 'error');
|
||||||
this.showNotification('Failed to upload avatar.', 'red');
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -256,47 +248,11 @@ export class AvatarWindow extends Window {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.showMessage('Avatar saved!', 'success');
|
this.showMessage('Avatar saved!', 'success');
|
||||||
this.showNotification('Avatar updated successfully!', 'green');
|
|
||||||
eventBus.emit(Events.AVATAR_UPDATED, { url: data?.avatar_url });
|
eventBus.emit(Events.AVATAR_UPDATED, { url: data?.avatar_url });
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Avatar upload error:', error);
|
console.error('Avatar upload error:', error);
|
||||||
this.showMessage('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');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
+1
-3
@@ -6,14 +6,12 @@
|
|||||||
export const API = {
|
export const API = {
|
||||||
AUTH: {
|
AUTH: {
|
||||||
LOGIN: '/api/auth/login',
|
LOGIN: '/api/auth/login',
|
||||||
LOGOUT: '/api/auth/logout',
|
|
||||||
REGISTER: '/api/auth/register',
|
REGISTER: '/api/auth/register',
|
||||||
GITHUB: '/api/auth/github'
|
GITHUB: '/api/auth/github'
|
||||||
},
|
},
|
||||||
AVATAR: {
|
AVATAR: {
|
||||||
GET: '/api/avatar/me',
|
GET: '/api/avatar/me',
|
||||||
UPLOAD: '/api/avatar/upload',
|
UPLOAD: '/api/avatar/upload'
|
||||||
DELETE: '/api/avatar/delete'
|
|
||||||
},
|
},
|
||||||
FRIENDS: {
|
FRIENDS: {
|
||||||
LIST: '/api/friends',
|
LIST: '/api/friends',
|
||||||
+16
-39
@@ -3,18 +3,15 @@
|
|||||||
// ─────────────────────────────────────────────
|
// ─────────────────────────────────────────────
|
||||||
|
|
||||||
class Duel {
|
class Duel {
|
||||||
// ui : { showOverlay, hideOverlay, render, renderOpponent, updateButtons }
|
constructor(socket, tetrisGame, onStatusChange, onStart) {
|
||||||
constructor(socket, tetrisGame, onStatusChange, onStart, ui) {
|
|
||||||
this.socket = socket;
|
this.socket = socket;
|
||||||
this.tetrisGame = tetrisGame;
|
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;
|
||||||
|
|
||||||
@@ -40,7 +37,6 @@ class Duel {
|
|||||||
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 ──────────
|
// ─── Hooks appelés par tetris.js ──────────
|
||||||
@@ -52,7 +48,9 @@ class Duel {
|
|||||||
|
|
||||||
onLocalLinesCleared(count, holeCol) {
|
onLocalLinesCleared(count, holeCol) {
|
||||||
if (!this.isReady) return;
|
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 });
|
this.socket.emit('tetris:lines-cleared', { count, holeCol, garbageLines });
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -62,12 +60,6 @@ class Duel {
|
|||||||
this.endDuel();
|
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() {
|
endDuel() {
|
||||||
this.isReady = false;
|
this.isReady = false;
|
||||||
this.action_queue = [];
|
this.action_queue = [];
|
||||||
@@ -78,7 +70,8 @@ class Duel {
|
|||||||
|
|
||||||
synchronize_game() {
|
synchronize_game() {
|
||||||
while (this.action_queue.length > 0) {
|
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.opponentGrid = action.grid;
|
||||||
this.opponentScore = action.score;
|
this.opponentScore = action.score;
|
||||||
document.getElementById('opponent-score').textContent = action.score;
|
document.getElementById('opponent-score').textContent = action.score;
|
||||||
this.ui.renderOpponent(this.opponentGrid, this.opponentShieldActive);
|
renderOpponent(this.opponentGrid);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'LINES_CLEARED':
|
case 'LINES_CLEARED':
|
||||||
@@ -96,17 +89,9 @@ class Duel {
|
|||||||
break;
|
break;
|
||||||
|
|
||||||
case 'OPPONENT_GAME_OVER':
|
case 'OPPONENT_GAME_OVER':
|
||||||
this.ui.showOverlay('YOU WIN', action.score);
|
showOverlay('YOU WIN', action.score);
|
||||||
this.endDuel();
|
this.endDuel();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'OPPONENT_SHIELD_ACTIVATED':
|
|
||||||
this.opponentShieldActive = true;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'OPPONENT_SHIELD_DEACTIVATED':
|
|
||||||
this.opponentShieldActive = false;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -142,30 +127,22 @@ class Duel {
|
|||||||
this.action_queue.push({ type: 'OPPONENT_GAME_OVER', score: data.score, validBlock: data.validBlock });
|
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', () => {
|
this.socket.on('tetris:start-duel', () => {
|
||||||
if (this.onStart) this.onStart();
|
if (this.onStart) this.onStart();
|
||||||
});
|
});
|
||||||
|
|
||||||
this.socket.on('tetris:pause', () => {
|
this.socket.on('tetris:pause', () => {
|
||||||
this.tetrisGame.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.socket.on('tetris:stop', () => {
|
||||||
this.tetrisGame.stop();
|
this.tetrisGame.stop();
|
||||||
this.ui.updateButtons();
|
updateButtons();
|
||||||
this.ui.render();
|
render();
|
||||||
this.ui.showOverlay('STOPPED');
|
showOverlay('STOPPED');
|
||||||
});
|
});
|
||||||
|
|
||||||
this.socket.on('tetris:settings', (data) => {
|
this.socket.on('tetris:settings', (data) => {
|
||||||
-1
@@ -82,7 +82,6 @@ export const Events = {
|
|||||||
|
|
||||||
// Avatar
|
// Avatar
|
||||||
AVATAR_UPDATED: 'avatar:updated',
|
AVATAR_UPDATED: 'avatar:updated',
|
||||||
AVATAR_DELETED: 'avatar:deleted',
|
|
||||||
|
|
||||||
// Chat
|
// Chat
|
||||||
CHAT_CONNECTED: 'chat:connected',
|
CHAT_CONNECTED: 'chat:connected',
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
+3
-3
@@ -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
|
* Friends management window
|
||||||
+161
-83
@@ -1,11 +1,3 @@
|
|||||||
/* ============================================
|
|
||||||
TRANSCENDENCE - Main Stylesheet
|
|
||||||
Convention: BEM (Block__Element--Modifier)
|
|
||||||
============================================ */
|
|
||||||
|
|
||||||
/* ============================================
|
|
||||||
CSS VARIABLES
|
|
||||||
============================================ */
|
|
||||||
:root {
|
:root {
|
||||||
--color-primary: #ffc75e;
|
--color-primary: #ffc75e;
|
||||||
--color-primary-hover: #ffc75e;
|
--color-primary-hover: #ffc75e;
|
||||||
@@ -19,16 +11,17 @@
|
|||||||
|
|
||||||
--app-background-base: radial-gradient(
|
--app-background-base: radial-gradient(
|
||||||
circle at top,
|
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: #000000;
|
||||||
--color-text-muted: #000000;
|
--color-text-muted: #353535;
|
||||||
|
|
||||||
--font-size-base: 10px;
|
--font-size-base: 10px;
|
||||||
--font-size-sm: 1.2rem;
|
--font-size-sm: 1.2rem;
|
||||||
@@ -74,29 +67,100 @@ html {
|
|||||||
var(--app-background-image),
|
var(--app-background-image),
|
||||||
var(--app-background-base);
|
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:
|
background-size:
|
||||||
contain,
|
contain,
|
||||||
cover;
|
cover;
|
||||||
|
|
||||||
background-position:
|
background-position:
|
||||||
center,
|
|
||||||
center;
|
center;
|
||||||
|
|
||||||
background-repeat:
|
background-repeat:
|
||||||
no-repeat,
|
|
||||||
no-repeat;
|
no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 70%;
|
|
||||||
min-width: 800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
line-height: 1.5;
|
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
|
TYPOGRAPHY
|
||||||
============================================ */
|
============================================ */
|
||||||
@@ -105,30 +169,41 @@ body {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
left: 50%;
|
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;
|
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
|
MENU
|
||||||
@@ -148,10 +223,8 @@ body {
|
|||||||
|
|
||||||
.menu__item {
|
.menu__item {
|
||||||
background: var(--color-surface);
|
background: var(--color-surface);
|
||||||
color: var(--color-text);
|
|
||||||
border: 1px solid var(--color-surface-light);
|
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
border-color: #000;
|
border: 1px solid var(--color-surface-light);
|
||||||
padding: var(--spacing-sm) var(--spacing-md);
|
padding: var(--spacing-sm) var(--spacing-md);
|
||||||
font-size: var(--font-size-md);
|
font-size: var(--font-size-md);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -173,36 +246,19 @@ body {
|
|||||||
GAME
|
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 {
|
.game {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: var(--spacing-lg);
|
top: var(--spacing-lg);
|
||||||
right: 50px;
|
right: 50px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--spacing-lg);
|
|
||||||
|
|
||||||
z-index: var(--z-menu);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.game__item {
|
.game__item {
|
||||||
background: var(--color-surface);
|
background: var(--color-surface);
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
border: 1px solid var(--color-surface-light);
|
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
border-color: #000;
|
border: 1px solid var(--color-surface-light);
|
||||||
padding: var(--spacing-sm) var(--spacing-md);
|
padding: var(--spacing-sm) var(--spacing-md);
|
||||||
font-size: var(--font-size-md);
|
font-size: var(--font-size-md);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -220,6 +276,47 @@ body {
|
|||||||
border-color: var(--color-primary);
|
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
|
BUTTONS
|
||||||
============================================ */
|
============================================ */
|
||||||
@@ -409,6 +506,11 @@ body {
|
|||||||
============================================ */
|
============================================ */
|
||||||
.login {
|
.login {
|
||||||
width: 320px;
|
width: 320px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border-color: #aa1f1f;
|
||||||
|
border: 6px solid #faac37;
|
||||||
|
background: #ffffff;
|
||||||
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login__form {
|
.login__form {
|
||||||
@@ -620,30 +722,6 @@ body {
|
|||||||
padding: var(--spacing-sm) 0;
|
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
|
UTILITIES
|
||||||
============================================ */
|
============================================ */
|
||||||
@@ -689,7 +767,7 @@ body {
|
|||||||
.friends__tab {
|
.friends__tab {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: var(--spacing-sm);
|
padding: var(--spacing-sm);
|
||||||
background: var(--color-surface);
|
background: var(--color-surface-light);
|
||||||
border: 1px solid var(--color-surface-light);
|
border: 1px solid var(--color-surface-light);
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
+9
-5
@@ -9,8 +9,15 @@
|
|||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<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" />
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" />
|
||||||
</head>
|
</head>
|
||||||
|
<script type="module" src="app.js"></script>
|
||||||
<body>
|
<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">
|
<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="login" aria-label="Login">Login</button>
|
||||||
@@ -21,14 +28,11 @@
|
|||||||
|
|
||||||
<nav class="game" aria-label="Game">
|
<nav class="game" aria-label="Game">
|
||||||
<button class="game__item" data-action="Home page" aria-label="Home Page"
|
<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>
|
</nav>
|
||||||
|
|
||||||
<div class="page" aria-label="Page">
|
<div class="page" aria-label="Page">
|
||||||
<button class="page__item" data-action="gameroom" aria-label="Game Rooms">Game Rooms</button>
|
<button class="page__item" data-action="gameroom" aria-label="Game Rooms">Game Rooms</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<script type="module" src="../app.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -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) */
|
|
||||||
}
|
|
||||||
@@ -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();
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
File diff suppressed because it is too large
Load Diff
@@ -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>
|
|
||||||
+13
-54
@@ -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 {
|
export class GameRoomWindow extends Window {
|
||||||
constructor() {
|
constructor() {
|
||||||
@@ -34,7 +34,6 @@ export class GameRoomWindow extends Window {
|
|||||||
});
|
});
|
||||||
|
|
||||||
this.updateTabsAccess();
|
this.updateTabsAccess();
|
||||||
this.loadCurrentTab();
|
|
||||||
|
|
||||||
// Verifier si l'utilisateur est deja dans un salon au chargement
|
// Verifier si l'utilisateur est deja dans un salon au chargement
|
||||||
const token = localStorage.getItem(STORAGE_KEYS.AUTH_TOKEN);
|
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.gameInfo = this.createElement('div', 'gameroom__game-info');
|
||||||
this.currentDrawerInfo = this.createElement('div', 'gameroom__drawer-info', { text: '' });
|
this.currentDrawerInfo = this.createElement('div', 'gameroom__drawer-info', { text: '' });
|
||||||
this.scoresDisplay = this.createElement('div', 'gameroom__scores-display');
|
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é
|
// Affichage du mot caché
|
||||||
this.wordDisplay = this.createElement('div', 'gameroom__word-display');
|
this.wordDisplay = this.createElement('div', 'gameroom__word-display');
|
||||||
@@ -196,10 +194,7 @@ export class GameRoomWindow extends Window {
|
|||||||
players: [],
|
players: [],
|
||||||
currentPlayerIndex: 0,
|
currentPlayerIndex: 0,
|
||||||
guessedLetters: [],
|
guessedLetters: [],
|
||||||
scores: {},
|
scores: {}
|
||||||
counter: 0,
|
|
||||||
counterRound: 0,
|
|
||||||
timer: 0
|
|
||||||
};
|
};
|
||||||
|
|
||||||
this.initDrawing();
|
this.initDrawing();
|
||||||
@@ -379,11 +374,10 @@ export class GameRoomWindow extends Window {
|
|||||||
|
|
||||||
this.socket.on('game-player-left', (data) => {
|
this.socket.on('game-player-left', (data) => {
|
||||||
this.showMessage(`${data.username} a quitté le salon`, 'info');
|
this.showMessage(`${data.username} a quitté le salon`, 'info');
|
||||||
console.log(`${data.username} left the room`);
|
|
||||||
|
|
||||||
if (this.gameState.isPlaying)
|
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);
|
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 spectating, return to spectator list
|
||||||
if (this.isSpectating) {
|
if (this.isSpectating) {
|
||||||
this.resetGameUI();
|
this.resetGameUI();
|
||||||
// this.currentRoom = null;
|
this.currentRoom = null;
|
||||||
this.isSpectating = false;
|
this.isSpectating = false;
|
||||||
this.switchTab('spectator');
|
this.switchTab('spectator');
|
||||||
this.showMessage('La partie est terminée', 'info');
|
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.revealedWord = data.revealedWord || new Array(data.wordLength).fill('_');
|
||||||
this.gameState.players = data.players;
|
this.gameState.players = data.players;
|
||||||
this.gameState.scores = data.scores || {};
|
this.gameState.scores = data.scores || {};
|
||||||
this.gameState.timer = data.timer || 0;
|
|
||||||
this.updateTimerUI();
|
|
||||||
|
|
||||||
this.showGameUI();
|
this.showGameUI();
|
||||||
this.updateWordDisplay();
|
this.updateWordDisplay();
|
||||||
@@ -615,15 +607,6 @@ export class GameRoomWindow extends Window {
|
|||||||
// Setup UI for new round with new drawer
|
// Setup UI for new round with new drawer
|
||||||
this.setupRound();
|
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() {
|
disconnectGameSocket() {
|
||||||
@@ -734,7 +717,7 @@ export class GameRoomWindow extends Window {
|
|||||||
const altPort = window.GLOBAL_CHAT_ALT_PORT;
|
const altPort = window.GLOBAL_CHAT_ALT_PORT;
|
||||||
if (altPort) {
|
if (altPort) {
|
||||||
const host = location.hostname || 'localhost';
|
const host = location.hostname || 'localhost';
|
||||||
this.socket = io(`${location.protocol}//${host}:${altPort}`, ioConfig);
|
this.socket = io(`http://${host}:${altPort}`, ioConfig);
|
||||||
} else {
|
} else {
|
||||||
this.socket = io(ioConfig);
|
this.socket = io(ioConfig);
|
||||||
}
|
}
|
||||||
@@ -768,7 +751,8 @@ export class GameRoomWindow extends Window {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.renderRoomsList(data || []);
|
this.roomsList = data || [];
|
||||||
|
this.renderRoomsList(this.roomsList);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Load rooms error:', error);
|
console.error('Load rooms error:', error);
|
||||||
this.showMessage('Erreur de connexion', 'error');
|
this.showMessage('Erreur de connexion', 'error');
|
||||||
@@ -855,20 +839,17 @@ export class GameRoomWindow extends Window {
|
|||||||
const name = this.roomNameInput.value.trim();
|
const name = this.roomNameInput.value.trim();
|
||||||
if (!name) {
|
if (!name) {
|
||||||
this.showMessage('Entrez un nom pour le salon', 'error');
|
this.showMessage('Entrez un nom pour le salon', 'error');
|
||||||
this.showNotification('Entrez un nom pour le salon', 'red');
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const token = localStorage.getItem(STORAGE_KEYS.AUTH_TOKEN);
|
const token = localStorage.getItem(STORAGE_KEYS.AUTH_TOKEN);
|
||||||
if (!token) {
|
if (!token) {
|
||||||
this.showMessage('Connectez-vous pour creer un salon', 'info');
|
this.showMessage('Connectez-vous pour creer un salon', 'info');
|
||||||
this.showNotification('Connectez-vous pour créer un salon', 'red');
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.currentRoom) {
|
if (this.currentRoom) {
|
||||||
this.showMessage('Vous etes deja dans un salon. Quittez-le d\'abord.', 'error');
|
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;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -882,7 +863,6 @@ export class GameRoomWindow extends Window {
|
|||||||
this.currentRoom = currentData;
|
this.currentRoom = currentData;
|
||||||
this.enterLobby(currentData);
|
this.enterLobby(currentData);
|
||||||
this.showMessage('Vous etes deja dans un salon', 'error');
|
this.showMessage('Vous etes deja dans un salon', 'error');
|
||||||
this.showNotification('Vous êtes déjà dans un salon. Quittez-le d\'abord.', 'red');
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -903,7 +883,6 @@ export class GameRoomWindow extends Window {
|
|||||||
|
|
||||||
if (this.roomNameExists(name)) {
|
if (this.roomNameExists(name)) {
|
||||||
this.showMessage('Un salon avec ce nom existe deja', 'error');
|
this.showMessage('Un salon avec ce nom existe deja', 'error');
|
||||||
this.showNotification('Un salon avec ce nom existe deja', 'red');
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -925,7 +904,6 @@ export class GameRoomWindow extends Window {
|
|||||||
this.showMessage('Salon cree', 'success');
|
this.showMessage('Salon cree', 'success');
|
||||||
eventBus.emit(Events.ROOM_CREATED, data);
|
eventBus.emit(Events.ROOM_CREATED, data);
|
||||||
this.enterLobby(data);
|
this.enterLobby(data);
|
||||||
this.showNotification(`Vous avez créé le salon "${data.name}"`, 'green');
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Create room error:', error);
|
console.error('Create room error:', error);
|
||||||
this.showMessage('Erreur de connexion', 'error');
|
this.showMessage('Erreur de connexion', 'error');
|
||||||
@@ -1058,7 +1036,6 @@ export class GameRoomWindow extends Window {
|
|||||||
|
|
||||||
if (this.currentRoom) {
|
if (this.currentRoom) {
|
||||||
this.showMessage('Vous etes deja dans un salon. Quittez-le d\'abord.', 'error');
|
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;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1072,7 +1049,6 @@ export class GameRoomWindow extends Window {
|
|||||||
this.currentRoom = currentData;
|
this.currentRoom = currentData;
|
||||||
this.enterLobby(currentData);
|
this.enterLobby(currentData);
|
||||||
this.showMessage('Vous etes deja dans un salon', 'error');
|
this.showMessage('Vous etes deja dans un salon', 'error');
|
||||||
this.showNotification('Vous êtes déjà dans un salon. Quittez-le d\'abord.', 'red');
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1117,9 +1093,7 @@ export class GameRoomWindow extends Window {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async loadLobby() {
|
async loadLobby() {
|
||||||
console.log('Loading lobby for room:', this.currentRoom);
|
|
||||||
if (!this.currentRoom) return;
|
if (!this.currentRoom) return;
|
||||||
console.log('Managed to load lobby, current room:', this.currentRoom);
|
|
||||||
|
|
||||||
this.gameState.scores = {};
|
this.gameState.scores = {};
|
||||||
|
|
||||||
@@ -1258,12 +1232,6 @@ export class GameRoomWindow extends Window {
|
|||||||
}, 5000);
|
}, 5000);
|
||||||
}
|
}
|
||||||
|
|
||||||
updateTimerUI()
|
|
||||||
{
|
|
||||||
if (this.timerDisplay)
|
|
||||||
this.timerDisplay.textContent = `Temps restant : ${this.gameState.timer}s`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================
|
// ============================================
|
||||||
// LOGIQUE DU JEU
|
// LOGIQUE DU JEU
|
||||||
// ============================================
|
// ============================================
|
||||||
@@ -1318,9 +1286,6 @@ export class GameRoomWindow extends Window {
|
|||||||
this.isSpectating = false;
|
this.isSpectating = false;
|
||||||
|
|
||||||
this.gameState.scores = {};
|
this.gameState.scores = {};
|
||||||
this.gameState.counter = 0;
|
|
||||||
this.gameState.counterRound = 0;
|
|
||||||
this.gameState.timer = 0;
|
|
||||||
this.gameState.players = [];
|
this.gameState.players = [];
|
||||||
this.gameState.currentPlayerIndex = 0;
|
this.gameState.currentPlayerIndex = 0;
|
||||||
this.gameState.guessedLetters = [];
|
this.gameState.guessedLetters = [];
|
||||||
@@ -1544,7 +1509,7 @@ export class GameRoomWindow extends Window {
|
|||||||
const pointsText = points !== 0 ? ` (${points > 0 ? '+' : ''}${points} pts)` : '';
|
const pointsText = points !== 0 ? ` (${points > 0 ? '+' : ''}${points} pts)` : '';
|
||||||
|
|
||||||
if (success) {
|
if (success) {
|
||||||
item.textContent = `${username}: "${guess}" - Bon ${typeText}!${pointsText}`;
|
item.textContent = `${username}: "${guess}" - Bonne ${typeText}!${pointsText}`;
|
||||||
} else {
|
} else {
|
||||||
item.textContent = `${username}: "${guess}" - Mauvais ${typeText}${pointsText}`;
|
item.textContent = `${username}: "${guess}" - Mauvais ${typeText}${pointsText}`;
|
||||||
}
|
}
|
||||||
@@ -1594,10 +1559,7 @@ export class GameRoomWindow extends Window {
|
|||||||
this.wordDisplay.textContent = word.split('').join(' ');
|
this.wordDisplay.textContent = word.split('').join(' ');
|
||||||
|
|
||||||
// Auto next round after delay
|
// Auto next round after delay
|
||||||
this.gameState.counterRound++;
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (this.gameState.counterRound >= (this.gameState.players.length * 4))
|
|
||||||
this.endGame();
|
|
||||||
if (this.gameState.isPlaying) {
|
if (this.gameState.isPlaying) {
|
||||||
this.nextRound();
|
this.nextRound();
|
||||||
}
|
}
|
||||||
@@ -1606,11 +1568,8 @@ export class GameRoomWindow extends Window {
|
|||||||
|
|
||||||
nextRound() {
|
nextRound() {
|
||||||
// Move to next player
|
// 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) {
|
if (this.socket?.connected) {
|
||||||
this.socket.emit('game-next-round', { drawer: nextDrawer });
|
this.socket.emit('game-next-round', { drawer: nextDrawer });
|
||||||
+4
-4
@@ -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
|
* Global chat window
|
||||||
@@ -222,7 +222,7 @@ export class GlobalChat extends Window {
|
|||||||
const altPort = window.GLOBAL_CHAT_ALT_PORT;
|
const altPort = window.GLOBAL_CHAT_ALT_PORT;
|
||||||
if (altPort) {
|
if (altPort) {
|
||||||
const host = location.hostname || 'localhost';
|
const host = location.hostname || 'localhost';
|
||||||
this.socket = io(`${location.protocol}//${host}:${altPort}`, ioConfig);
|
this.socket = io(`http://${host}:${altPort}`, ioConfig);
|
||||||
} else {
|
} else {
|
||||||
this.socket = io(ioConfig);
|
this.socket = io(ioConfig);
|
||||||
}
|
}
|
||||||
@@ -1,157 +1,764 @@
|
|||||||
|
/* ============================================
|
||||||
|
TRANSCENDENCE - Main Stylesheet
|
||||||
|
Convention: BEM (Block__Element--Modifier)
|
||||||
|
============================================ */
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
/* ///////////////////////////////////////////////////////// */
|
CSS VARIABLES
|
||||||
|
============================================ */
|
||||||
:root {
|
: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(
|
--app-background-base: radial-gradient(
|
||||||
circle at top,
|
circle at top,
|
||||||
#000000,
|
#fff787,
|
||||||
#4d4d4d
|
#ff8080
|
||||||
);
|
);
|
||||||
|
|
||||||
--app-background-image: url("./assets/background.png");
|
--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 {
|
body {
|
||||||
|
|
||||||
line-height: 1.5; /* inherited */
|
|
||||||
word-spacing: 1.4px; /* inherited */
|
|
||||||
font-size: 20px;
|
|
||||||
font-family: 'Times New Roman', serif; /* inherited */
|
|
||||||
color: var(--black); /* inherited */
|
|
||||||
text-align: center;
|
|
||||||
color: #696969;
|
|
||||||
|
|
||||||
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
width: 70%;
|
||||||
background-color: var(--black);
|
min-width: 800px;
|
||||||
display: flex;
|
margin: 0 auto;
|
||||||
flex-direction: column;
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
justify-content: center;
|
color: var(--color-text);
|
||||||
align-items: center;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-1 {
|
/* ============================================
|
||||||
display: flex;
|
TYPOGRAPHY
|
||||||
justify-content: center;
|
============================================ */
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
width: 100%;
|
.title {
|
||||||
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;
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
width: 500px;
|
|
||||||
height: 200px;
|
|
||||||
|
|
||||||
/* TEXT */
|
|
||||||
font-family: "Roboto";
|
|
||||||
font-size: 62px;
|
|
||||||
letter-spacing: -10px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
|
||||||
/* Background */
|
font-size: var(--font-size-xl);
|
||||||
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;
|
|
||||||
/* padding: 20px; */
|
|
||||||
/* margin-top: 80px;
|
|
||||||
margin-bottom: 100px; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.ico_footer {
|
|
||||||
text-align: center;
|
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);
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,54 +1,31 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="./index.css" />
|
<meta charset="utf-8" />
|
||||||
<script type="module" src="./index.js"></script>
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Transcendence</title>
|
||||||
|
<link rel="stylesheet" href="index.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" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<h1 class="title">Transcendence</h1>
|
||||||
|
|
||||||
<div id="header-1" class="container-1"
|
<nav class="menu" aria-label="Menu principal">
|
||||||
style="">
|
<button class="menu__item" data-action="login" aria-label="Login">Login</button>
|
||||||
<div id="button-test" class="button-1 button-test multicolor" onclick="window.location.href = 'test/index.html';">TEST</div>
|
<button class="menu__item" data-action="chat" aria-label="Global chat">Global chat</button>
|
||||||
<div id="button-trans" class="button-trans multicolor">TRANSCENDENCE</div>
|
<button class="menu__item" data-action="avatar" aria-label="Avatar">Avatar</button>
|
||||||
</div>
|
<button class="menu__item" data-action="friends" aria-label="Amis">Amis</button>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<img id="wiskas" style="margin: auto; display: block;" src="webcat/web_cat_img/wiskas-the-third.jpg">
|
<nav class="game" aria-label="Game">
|
||||||
|
<button class="game__item" data-action="new_game" aria-label="Skkrrribl.io"
|
||||||
<section style="display: flex;
|
onclick="window.location.href='game.html'">Skkrrribl.io</button>
|
||||||
justify-content: center;
|
<button class="game__item" data-action="tetris" aria-label="Tetris"
|
||||||
width: 1000px;
|
onclick="window.location.href='tetris.html'">Tetris</button>
|
||||||
margin: 0 auto;">
|
</nav>
|
||||||
<p>I, am wiskas-the-third,
|
|
||||||
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>
|
|
||||||
We at CAT are the admin, creator, and workers of the internet
|
|
||||||
Everytime a human goes to sleep, a cat start its shift, 1 billion pair of whiskers that are always here for you
|
|
||||||
Why? because we are philantropists, dont question it. Our goals are beyond your understanding
|
|
||||||
the internet was created by us, for us, and you should be glad we allow you to use it.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section style="display: flex;">
|
|
||||||
<button style="margin-right: 50px;" class="button-1 multicolor" onclick="window.location.href = 'webcat/biblio.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>
|
|
||||||
|
|
||||||
|
<script type="module" src="app.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -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);
|
|
||||||
+4
-12
@@ -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
|
* Login and registration window
|
||||||
@@ -83,8 +83,7 @@ export class LoginWindow extends Window {
|
|||||||
bindEvents() {
|
bindEvents() {
|
||||||
this.loginBtn.addEventListener('click', () => this.handleLogin());
|
this.loginBtn.addEventListener('click', () => this.handleLogin());
|
||||||
this.registerBtn.addEventListener('click', () => this.handleRegister());
|
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
|
// Login with Enter
|
||||||
this.passwordInput.addEventListener('keypress', (e) => {
|
this.passwordInput.addEventListener('keypress', (e) => {
|
||||||
@@ -130,7 +129,6 @@ export class LoginWindow extends Window {
|
|||||||
if (response.ok && data.token) {
|
if (response.ok && data.token) {
|
||||||
localStorage.setItem(STORAGE_KEYS.AUTH_TOKEN, data.token);
|
localStorage.setItem(STORAGE_KEYS.AUTH_TOKEN, data.token);
|
||||||
this.showMessage('Login successful! Welcome.', 'success');
|
this.showMessage('Login successful! Welcome.', 'success');
|
||||||
this.showNotification('Login successful', 'green');
|
|
||||||
|
|
||||||
// Emit login event
|
// Emit login event
|
||||||
eventBus.emit(Events.USER_LOGGED_IN, { username, token: data.token });
|
eventBus.emit(Events.USER_LOGGED_IN, { username, token: data.token });
|
||||||
@@ -140,7 +138,6 @@ export class LoginWindow extends Window {
|
|||||||
} else {
|
} else {
|
||||||
const errorMsg = data?.message || 'Login failed';
|
const errorMsg = data?.message || 'Login failed';
|
||||||
this.showMessage(errorMsg, 'error');
|
this.showMessage(errorMsg, 'error');
|
||||||
this.showNotification(errorMsg, 'red');
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Login error:', error);
|
console.error('Login error:', error);
|
||||||
@@ -173,12 +170,10 @@ export class LoginWindow extends Window {
|
|||||||
|
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
this.showMessage('Registration successful! You can now sign in.', 'success');
|
this.showMessage('Registration successful! You can now sign in.', 'success');
|
||||||
this.showNotification('Registration successful', 'green');
|
|
||||||
eventBus.emit(Events.USER_REGISTERED, { username });
|
eventBus.emit(Events.USER_REGISTERED, { username });
|
||||||
} else {
|
} else {
|
||||||
const errorMsg = data?.message || 'Registration failed';
|
const errorMsg = data?.message || 'Registration failed';
|
||||||
this.showMessage(errorMsg, 'error');
|
this.showMessage(errorMsg, 'error');
|
||||||
this.showNotification(errorMsg, 'red');
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Registration error:', error);
|
console.error('Registration error:', error);
|
||||||
@@ -195,8 +190,6 @@ export class LoginWindow extends Window {
|
|||||||
const left = (screen.width - width) / 2;
|
const left = (screen.width - width) / 2;
|
||||||
const top = (screen.height - height) / 2;
|
const top = (screen.height - height) / 2;
|
||||||
|
|
||||||
console.log(API.AUTH.GITHUB);
|
|
||||||
|
|
||||||
const popup = window.open(
|
const popup = window.open(
|
||||||
API.AUTH.GITHUB,
|
API.AUTH.GITHUB,
|
||||||
'githubOAuth',
|
'githubOAuth',
|
||||||
@@ -207,7 +200,6 @@ export class LoginWindow extends Window {
|
|||||||
if (event.data?.token) {
|
if (event.data?.token) {
|
||||||
localStorage.setItem(STORAGE_KEYS.AUTH_TOKEN, event.data.token);
|
localStorage.setItem(STORAGE_KEYS.AUTH_TOKEN, event.data.token);
|
||||||
this.showMessage('GitHub login successful! Welcome.', 'success');
|
this.showMessage('GitHub login successful! Welcome.', 'success');
|
||||||
this.showNotification('GitHub login successful', 'green');
|
|
||||||
|
|
||||||
// Emit login event
|
// Emit login event
|
||||||
eventBus.emit(Events.USER_LOGGED_IN, {
|
eventBus.emit(Events.USER_LOGGED_IN, {
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
@@ -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
|
|
||||||
@@ -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);
|
||||||
|
}
|
||||||
+2
-2
@@ -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
|
* Stats window — displays Scribble + Tetris stats for any user
|
||||||
@@ -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}`);
|
|
||||||
});
|
|
||||||
@@ -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);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
@@ -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; }
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
@@ -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();
|
|
||||||
@@ -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
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -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 {
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -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
|
|
||||||
}
|
|
||||||
-64
@@ -445,37 +445,6 @@ button:disabled { opacity: 0.3; cursor: not-allowed; }
|
|||||||
letter-spacing: 0.05em;
|
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"] {
|
#settings-panel input[type="number"] {
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
@@ -651,36 +620,3 @@ button:disabled { opacity: 0.3; cursor: not-allowed; }
|
|||||||
}
|
}
|
||||||
|
|
||||||
body { overflow: hidden; }
|
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);
|
|
||||||
}
|
|
||||||
+74
-28
@@ -15,9 +15,10 @@
|
|||||||
|
|
||||||
<h1 data-text="TETRIS">TETRIS<span class="cursor">_</span></h1>
|
<h1 data-text="TETRIS">TETRIS<span class="cursor">_</span></h1>
|
||||||
|
|
||||||
|
<!-- Bouton home -->
|
||||||
<a id="btn-home" href="/">Home</a>
|
<a id="btn-home" href="/">Home</a>
|
||||||
|
|
||||||
<!-- Panneau duel -->
|
<!-- Panneau de connexion duel -->
|
||||||
<div id="duel-panel">
|
<div id="duel-panel">
|
||||||
<span class="settings-title">Duel</span>
|
<span class="settings-title">Duel</span>
|
||||||
<div class="duel-row">
|
<div class="duel-row">
|
||||||
@@ -39,7 +40,7 @@
|
|||||||
<div id="local-section">
|
<div id="local-section">
|
||||||
<div id="app">
|
<div id="app">
|
||||||
|
|
||||||
<!-- Colonne gauche : Hold + Score + Boutons + Paramètres -->
|
<!-- Colonne gauche : Hold + Score + Boutons + Settings -->
|
||||||
<div id="left-column">
|
<div id="left-column">
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel-title">Hold</div>
|
<div class="panel-title">Hold</div>
|
||||||
@@ -50,12 +51,6 @@
|
|||||||
<div class="score-value" id="score-display">0</div>
|
<div class="score-value" id="score-display">0</div>
|
||||||
</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">
|
<div class="btn-group">
|
||||||
<button id="btn-start">Start</button>
|
<button id="btn-start">Start</button>
|
||||||
<button id="btn-pause" disabled>Pause</button>
|
<button id="btn-pause" disabled>Pause</button>
|
||||||
@@ -63,18 +58,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Paramètres -->
|
<!-- Panneau de configuration -->
|
||||||
<div id="settings-panel">
|
<div id="settings-panel">
|
||||||
<div class="settings-title">Paramètres</div>
|
<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">
|
<div class="settings-row">
|
||||||
<label for="input-ttd">Vitesse initiale (ms)</label>
|
<label for="input-ttd">Vitesse initiale (ms)</label>
|
||||||
<input type="number" id="input-ttd" min="100" max="3000" step="50" value="1000">
|
<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>W</span> Rot. droite</div>
|
||||||
<div><span>Espace</span> Drop</div>
|
<div><span>Espace</span> Drop</div>
|
||||||
<div><span>C</span> Hold</div>
|
<div><span>C</span> Hold</div>
|
||||||
<div><span>E</span> Shield</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -126,7 +111,6 @@
|
|||||||
<div class="score-label">Score</div>
|
<div class="score-label">Score</div>
|
||||||
<div class="score-value" id="opponent-score">—</div>
|
<div class="score-value" id="opponent-score">—</div>
|
||||||
</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;">🛡 SHIELD ACTIF</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="opponent-wrapper">
|
<div id="opponent-wrapper">
|
||||||
@@ -150,22 +134,34 @@
|
|||||||
|
|
||||||
<div id="lb-scores" class="lb-content lb-content--active">
|
<div id="lb-scores" class="lb-content lb-content--active">
|
||||||
<table class="lb-table">
|
<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>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="lb-wins" class="lb-content">
|
<div id="lb-wins" class="lb-content">
|
||||||
<table class="lb-table">
|
<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>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="lb-history" class="lb-content">
|
<div id="lb-history" class="lb-content">
|
||||||
<table class="lb-table">
|
<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>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -177,9 +173,59 @@
|
|||||||
<script src="tetris.js"></script>
|
<script src="tetris.js"></script>
|
||||||
<script src="renderer.js"></script>
|
<script src="renderer.js"></script>
|
||||||
<script src="duel.js"></script>
|
<script src="duel.js"></script>
|
||||||
<script src="leaderboard.js"></script>
|
|
||||||
<script src="ui.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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user