Skip to content

Commit

Permalink
feat(socket): logic
Browse files Browse the repository at this point in the history
  • Loading branch information
@sebastianjnuwu
sebastianjnuwu committed Jan 2, 2025
1 parent 684f8e5 commit 3762d4d
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 148 deletions.
121 changes: 94 additions & 27 deletions www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,55 +4,54 @@
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Cookie</title>
<link rel="shortcut icon" href="https://raw.githubusercontent.com/sebastianjnuwu/app/refs/heads/android/android/app/src/main/res/drawable/splash_screen.png" type="image/x-icon">
<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://cdnjs.cloudflare.com/ajax/libs/socket.io/4.8.1/socket.io.min.js" integrity="sha512-8ExARjWWkIllMlNzVg7JKq9RKWPlJABQUNq6YvAjE/HobctjH/NA+bSiDMDvouBVjp4Wwnf1VP1OEv7Zgjtuxw==" crossorigin="anonymous" referrerpolicy="no-referrer"></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>
<script type="module" src="./main.ts"></script>
</head>

<body class="ui-cookie">
<!---
<body class="d-flex flex-column justify-content-center align-items-center vh-100">

<!--- background sound --->
<audio id="splash" preload="auto" loop>
<source src="./src/audio/start.mp3" type="audio/mp3">
<source src="https://github.com/sebastianjnuwu/sebastianjnuwu/raw/refs/heads/main/CDN/start.mp3">
</audio>

<!--- sound of button clicks --->
<audio id="click" preload="auto">
<source src="./src/audio/click.mp3" type="audio/mp3">
<source src="https://github.com/sebastianjnuwu/sebastianjnuwu/raw/refs/heads/main/CDN/start.mp3">
</audio>

<splash-screen class="d-flex flex-column justify-content-center align-items-center vh-100">
<img src="https://raw.githubusercontent.com/sebastianjnuwu/app/refs/heads/android/android/app/src/main/res/drawable/splash_screen.png" alt="splash-screen" class="icon mb-5">
<!--- (splash-screen) --->
<div id="splash-screen">
<img src="https://i.imgur.com/dGKQOJf.png" alt="splash-screen" class="icon mb-5">
<h1>Click...</h1>
</splash-screen>
</div>
<!--- (splash-screen) --->

<start-screen style="display: none !important;" class="d-flex flex-column justify-content-center align-items-center vh-100">
<!--- (start-screen) --->
<div id="start-screen" style="display: none;">
<h1 class="title">
<i class="fas fa-cookie-bite"></i> Cookie
</h1>
<div class="menu-buttons">
<button id="play" data-bs-toggle="modal" data-bs-target="#settings-game-start">
<div class="menu">
<button id="start-playing" data-bs-toggle="modal" data-bs-target="#gameModal">
<i class="fas fa-gamepad"></i> Jogar
</button>
<button id="shop">
<i class="fas fa-store"></i> Loja
</button>
<button id="stats">
<i class="fas fa-chart-line"></i> Estatísticas
<button id="game-settings">
<i class="fas fa-cog"></i> Configurações
</button>
<button id="settings" disabled>
<i class="fas fa-cog"></i> Configurações
<button id="exit-app">
<i class="fas fa-sign-out-alt"></i> Sair
</button>
<button id="help">
<i class="fas fa-question-circle"></i> Ajuda
</button>
</div>
</start-screen>
</div>
</div>
<!--- (splash-screen) --->

--->

<ui style="display: no !important;" class="d-flex flex-column justify-content-center align-items-center text-center vh-100">
<!---
<ui style="display: none !important;" class="d-flex flex-column justify-content-center align-items-center text-center vh-100">
<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 Down Expand Up @@ -95,6 +94,74 @@ <h1><i class="fas fa-cookie-bite"></i> Aguardando...</h1>
</cookie>
</ui>
-->


<div class="modal fade" id="gameModal" tabindex="-1" aria-labelledby="gameModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="gameModalLabel">
<i class="fas fa-gamepad"></i> Configurações
</h5>
</div>
<div class="modal-body">
<form id="gameSettingsForm">
<!-- Nickname -->
<div class="mb-3">
<label for="nickname" class="form-label">
<i class="fas fa-user"></i> Nickname
</label>
<input type="text" class="form-control" id="nickname" name="nickname" placeholder="Digite seu nickname" required>
</div>

<!-- Opções de jogo -->
<div class="mb-3">
<label class="form-label">
<i class="fas fa-list-ul"></i> Escolha uma opção:
</label>
<div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gameOption" 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">
<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">
<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">
</div>

<!-- Tempo de jogo -->
<div class="mb-3" id="gameTimeContainer">
<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">
</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>
</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
43 changes: 40 additions & 3 deletions www/src/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,52 @@
$(() => {
$("splash-screen").on("click", () => {

// splash-screen
$("#splash-screen").on("click", () => {
$("#splash")[0].volume = 0.1;
$("#splash")[0].play();
setTimeout(() => {
$("splash-screen").remove();
$("start-screen").show();
$("#splash-screen").hide();
$("#start-screen").show();
}, 1000);
});

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


$('input[name="gameOption"]').on('change', () => {
if ($('#joinRoom').is(':checked')) {
$('#roomCodeContainer').show();
$("#gameTimeContainer").hide();
} else {
$('#roomCodeContainer').hide();
$("#gameTimeContainer").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();
Expand Down
11 changes: 8 additions & 3 deletions www/src/js/socket.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const socket = io("http://192.168.1.106:3000", {
const socket = io("http://localhost:3000", {
transports: ["websocket", "polling"],
});

Expand All @@ -8,7 +8,7 @@ const code = $("#current_code");
const online = $("#online");

socket.emit("room", {
code: null,
code: "M7ZGS5",
nickname: "sebastianjnuwu",
});

Expand All @@ -17,8 +17,13 @@ socket.on("error", (err) => {
});

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

if (room.owner !== socket.id) {
$("#start-game").remove();
};

code.text(room.code);
online.text(room.players.length);
online.text(room.players.length)
});

$("#start-game").on("click", () => {
Expand Down
Loading

0 comments on commit 3762d4d

Please sign in to comment.