From 0b76094029422de09cd2708ee13862440a0487fe Mon Sep 17 00:00:00 2001 From: sebastianjnuwu Date: Tue, 31 Dec 2024 20:02:50 -0300 Subject: [PATCH] feat(socket): add socket --- www/index.html | 95 ++++++++------------------------------- www/src/js/socket.js | 36 +++++++++++++++ www/src/styles/css/ui.css | 54 ++++++++++++++++++++++ 3 files changed, 109 insertions(+), 76 deletions(-) create mode 100644 www/src/js/socket.js diff --git a/www/index.html b/www/index.html index 8d7b8f6..7083422 100644 --- a/www/index.html +++ b/www/index.html @@ -6,12 +6,14 @@ Cookie + + - + + +---> - - - - - - - - - +

Código da Sala:

-

ABCD1234

+

+ +

+
+

Aguardando...

+

+ 1/1 +

+ +
- + + diff --git a/www/src/js/socket.js b/www/src/js/socket.js new file mode 100644 index 0000000..0dd5bad --- /dev/null +++ b/www/src/js/socket.js @@ -0,0 +1,36 @@ +const socket = io('http://localhost:3000', { + transports: ['websocket', 'polling'] +}); + +const code = $("#current_code"); +const online = $("#online"); + +console.log(code.text()); +socket.emit("room", { + code: null, + nickname: "sebastianjnuwu", +}); + +socket.on("error", (err) => { + console.log(err.message); +}); + +socket.on('update_room', (room) => { + code.text(room.code); + online.text(room.players.length); +}); + +$("#start-game").on("click", () => { + socket.emit("start_game", { + code: code.text(), + }) +}); + +socket.on("count_down", ({ countdown }) => { + console.log(countdown > 0 ? countdown : "GO!"); +}); + +socket.on("started_game", (oi) => { + console.log(oi); +}); + diff --git a/www/src/styles/css/ui.css b/www/src/styles/css/ui.css index 7db31c6..db6bc2a 100644 --- a/www/src/styles/css/ui.css +++ b/www/src/styles/css/ui.css @@ -212,6 +212,60 @@ ui .statistic td .value { } } +.waiting-room { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + font-family: 'minecraftia', sans-serif; +} + +.waiting-room h1 { + font-size: 2rem; + color: #8b4513; + margin-bottom: 10px; + text-shadow: 1px 1px 2px #d2691e; +} + +.waiting-room p { + font-size: 1rem; + color: #8b4513; + margin-bottom: 20px; + font-weight: bold; +} + +#start-game { + background-color: #d2691e; + color: #fff; + font-size: 1.2rem; + font-weight: bold; + padding: 10px 20px; + border: none; + border-radius: 25px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); + cursor: pointer; + transition: all 0.3s ease-in-out; + display: flex; + align-items: center; + gap: 10px; +} + +#start-game i { + font-size: 1.2rem; +} + +#start-game:hover { + background-color: #8b4513; + transform: scale(1.1); +} + +#start-game:active { + transform: scale(1); + background-color: #bf4f20; +} + + /* #ranking { width: 100%;