Skip to content

Commit

Permalink
feat(socket): add script 1/3
Browse files Browse the repository at this point in the history
  • Loading branch information
@sebastianjnuwu
sebastianjnuwu committed Jan 4, 2025
1 parent 3762d4d commit 252c64c
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 82 deletions.
44 changes: 24 additions & 20 deletions www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<title>Cookie</title>
<link rel="shortcut icon" href="https://i.imgur.com/dGKQOJf.png" type="image/png">
<link rel="stylesheet" href="./src/styles/css/ui.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.8.1/socket.io.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="module" src="./src/js/socket.js"></script>
Expand Down Expand Up @@ -50,8 +51,7 @@ <h1 class="title">
</div>
<!--- (splash-screen) --->

<!---
<ui style="display: none !important;" class="d-flex flex-column justify-content-center align-items-center text-center vh-100">
<ui style="display: none;">

<div class="room-code position-fixed top-0 start-50 translate-middle-x mt-4">
<h3><i class="fas fa-key"></i> Código da Sala:</h3>
Expand All @@ -70,12 +70,20 @@ <h1><i class="fas fa-cookie-bite"></i> Aguardando...</h1>
<p>
<i class="fas fa-users"></i> <x id="online">1</x>/1
</p>
<button id="start-game"><i class="fas fa-play"></i> Começar</button>
<div class="d-flex flex-column justify-content-center align-items-center gap-2">
<button id="start_game" class="btn btn-primary">
<i class="fas fa-play"></i> Começar
</button>
<button id="leave_room" class="btn btn-secondary">
<i class="fas fa-sign-out-alt"></i> Sair
</button>
</div>

</div>


<div style="display: none !important;" class="text-center game">
<table class="statistic">
<div style="display: none;" class="game">
<table class="statistic position-relative">
<tbody>
<tr>
<th><i class="fas fa-cookie-bite"></i> Cookies</th>
Expand All @@ -89,14 +97,12 @@ <h1><i class="fas fa-cookie-bite"></i> Aguardando...</h1>
</table>
</div>

<cookie style="display: none !important;" class="cookie position-relative game">
<cookie style="display: none;" class="cookie position-relative game">
<img src="https://raw.githubusercontent.com/sebastianjnuwu/sebastianjnuwu/refs/heads/main/website/7_Sem_Titulo_20241227172134.png" alt="cookie" class="icon mb-4">
</cookie>

</ui>
-->


<div class="modal fade" id="gameModal" tabindex="-1" aria-labelledby="gameModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
Expand All @@ -106,7 +112,7 @@ <h5 class="modal-title" id="gameModalLabel">
</h5>
</div>
<div class="modal-body">
<form id="gameSettingsForm">
<form id="form_room">
<!-- Nickname -->
<div class="mb-3">
<label for="nickname" class="form-label">
Expand All @@ -122,46 +128,44 @@ <h5 class="modal-title" id="gameModalLabel">
</label>
<div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gameOption" id="createRoom" value="create" checked>
<input class="form-check-input" type="radio" name="option_game" id="createRoom" value="create" checked>
<label class="form-check-label" for="createRoom">
<i class="fas fa-plus-circle"></i> Criar uma sala
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gameOption" id="joinRoom" value="join">
<label class="form-check-label" for="joinRoom">
<input class="form-check-input" type="radio" name="option_game" id="room_join" value="join">
<label class="form-check-label" for="room_join">
<i class="fas fa-sign-in-alt"></i> Entrar em uma sala
</label>
</div>
</div>
</div>

<!-- Código da sala -->
<div class="mb-3" id="roomCodeContainer" style="display: none;">
<label for="roomCode" class="form-label">
<div class="mb-3" id="code_container" style="display: none;">
<label for="room_code" class="form-label">
<i class="fas fa-key"></i> Código da Sala
</label>
<input type="text" class="form-control" id="roomCode" name="roomCode" placeholder="Digite o código da sala">
<input type="text" class="form-control" id="room_code" name="room_code" placeholder="Digite o código da sala">
</div>

<!-- Tempo de jogo -->
<div class="mb-3" id="gameTimeContainer">
<div class="mb-3" id="game_container">
<label for="gameTime" class="form-label">
<i class="fas fa-clock"></i> Tempo de Jogo (em minutos)
</label>
<input type="number" class="form-control" id="gameTime" name="gameTime" placeholder="Ex.: 10" min="1" max="120">
<input type="number" class="form-control" id="game_time" name="gameTime" placeholder="Ex.: 10" min="1" max="1">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button type="submit" form="gameSettingsForm" class="btn btn-primary">Confirmar</button>
<button type="submit" form="form_room" class="btn btn-primary">Confirmar</button>
</div>
</div>
</div>
</div>



<script type="module" src="./src/js/main.js" defer></script>
<script type="module" src="./src/js/cookie/game.js" defer></script>
Expand Down
45 changes: 9 additions & 36 deletions www/src/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,43 +12,16 @@ $(() => {

$("start-screen button").on("click", () => $("#click")[0].play());


$('input[name="gameOption"]').on('change', () => {
if ($('#joinRoom').is(':checked')) {
$('#roomCodeContainer').show();
$("#gameTimeContainer").hide();
$('input[name="option_game"]').on('change', () => {
if ($('#room_join').is(':checked')) {
$('#room_code').val("");
$('#code_container').show();
$("#game_container").hide();
} else {
$('#roomCodeContainer').hide();
$("#gameTimeContainer").show();
$('#room_code').val("");
$('#code_container').hide();
$("#game_container").show();
}
});

// Captura os dados do formulário
$('#gameSettingsForm').on('submit', function (e) {
e.preventDefault();

const nickname = $('#nickname').val();
const gameOption = $('input[name="gameOption"]:checked').val();
const roomCode = $('#roomCode').val();

if (gameOption === 'join' && !roomCode) {
alert('Por favor, insira o código da sala.');
return;
}

// Processar os dados (exemplo: enviar para o backend)
console.log({
nickname,
gameOption,
roomCode: gameOption === 'join' ? roomCode : null,
});

// Fechar o modal após a confirmação
$('#gameModal').modal('hide');
});

$("#play").on("click", () => {
// $("start-screen").remove();
// $("ui").show();
});
});
});
88 changes: 67 additions & 21 deletions www/src/js/socket.js
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,77 @@
const socket = io("http://localhost:3000", {
transports: ["websocket", "polling"],
});

const $countdown = $("#countdown-container");
const countdown_text = $("#countdown");
const code = $("#current_code");
const online = $("#online");
const socket = io("http://localhost:3000", {
transports: ["websocket", "polling"],
});

if (Cookies.get('nickname')) {
$('#nickname').val(Cookies.get('nickname'));
};

socket.on("connect", () => {
socket.emit("rejoin_room", {
room_player: Cookies.get('nickname'),
room_code: Cookies.get('code'),
});
});

// leave the room spontaneously!
$("#leave_room").on("click", () => {

socket.emit("leave_room", {
room_code: Cookies.get('code'),
room_player: Cookies.get('nickname')
});

$("ui").hide();
$("#start-screen").show();

});

$('#form_room').on('submit', (e) => {

e.preventDefault();

socket.emit("room", {
code: "M7ZGS5",
nickname: "sebastianjnuwu",
const $nickname = $('#nickname').val();
const $code = $('#room_code').val();
const $time = $('#game_time').val();

Cookies.set('nickname', $nickname);

socket.emit("room", {
room_code: $code,
room_time: $time || 3,
room_player: $nickname
});
});

socket.on("error", (err) => {
alert(err.message);
});

socket.on("update_room", (room) => {

if (room.owner !== socket.id) {
$("#start-game").remove();
socket.on("update_room", ({ room_player, room }) => {
if (room.owner !== Cookies.get('nickname')) {
$("#start_game").hide()
};

$("#splash-screen").hide();
$("#start-screen").hide();
$("ui").show();
$('#gameModal').modal('hide');

Cookies.set('code', room.code)
code.text(room.code);
online.text(room.players.length)
});

$("#start-game").on("click", () => {
socket.emit("start_game", {
code: code.text(),
});
online.text(room.players.length);

});

socket.on("count_down", ({ countdown }) => {
$(".waiting-room").remove();

$(".room-code").hide();
$(".waiting-room").hide();
$countdown.show();

if (countdown > 0) {
Expand All @@ -42,12 +80,20 @@ socket.on("count_down", ({ countdown }) => {
countdown_text.text("GO!");

setTimeout(() => {
$(".room-code").show();
$countdown.remove();
$(".game").show();
}, 1000);
}

});

socket.on("started_game", (oi) => {
console.log(oi);
// Botão "Começar" no cliente
$("#start_game").on("click", () => {

socket.emit("start_game", {
room_code: Cookies.get('code'),
});


});
9 changes: 4 additions & 5 deletions www/src/styles/css/ui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,6 @@ body {

/* START SCREEN - END */

/*
ui .cookie img {
width: 15rem;
transition: transform 0.02s ease-in-out;
Expand Down Expand Up @@ -274,7 +273,7 @@ ui .statistic td .value {
}
}

#start-game {
#start_game, #leave_room {
background-color: #d2691e;
color: #fff;
font-size: 1.2rem;
Expand All @@ -290,16 +289,16 @@ ui .statistic td .value {
gap: 10px;
}

#start-game i {
#start_game i, #leave_room i {
font-size: 1.2rem;
}

#start-game:hover {
#start_game:hover, #leave_room:hover {
background-color: #8b4513;
transform: scale(1.1);
}

#start-game:active {
#start_game:active, #leave_room:active {
transform: scale(1);
background-color: #bf4f20;
}
Expand Down

0 comments on commit 252c64c

Please sign in to comment.