Skip to content

Commit

Permalink
feat(styles): UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@sebastianjnuwu
sebastianjnuwu committed Dec 30, 2024
1 parent 3b4f515 commit d87a30b
Show file tree
Hide file tree
Showing 4 changed files with 193 additions and 14 deletions.
89 changes: 78 additions & 11 deletions www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</head>

<body class="ui-cookie">
<!---

<audio id="splash" preload="auto" loop>
<source src="./src/audio/start.mp3" type="audio/mp3">
</audio>
Expand All @@ -29,11 +29,11 @@ <h1>Click...</h1>
<h1 class="title">
<i class="fas fa-cookie-bite"></i> Cookie
</h1>
<div class="menu-buttons">
<button id="play">
<div class="menu-buttons">
<button id="play" data-bs-toggle="modal" data-bs-target="#settings-game-start">
<i class="fas fa-gamepad"></i> Jogar
</button>
<button id="shop">
<!--- <button id="shop">
<i class="fas fa-store"></i> Loja
</button>
<button id="stats">
Expand All @@ -44,15 +44,82 @@ <h1 class="title">
</button>
<button id="help">
<i class="fas fa-question-circle"></i> Ajuda
</button>
</button>-->
</div>
</start-screen>
style="display: none !important;"
-->


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


<!-- Botão para abrir o modal -->
<button type="button" class="btn btn-primary position-fixed bottom-0 start-50 translate-middle-x mb-4" data-bs-toggle="modal" data-bs-target="#settingsModal">
Escolher Personagem
</button>

<!-- Modal -->
<div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="settingsModalLabel">
<i class="fas fa-cog"></i> Configurações</h5>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="nickname" class="form-label">Nickname:</label>
<input type="text" class="form-control" id="nickname" placeholder="Digite seu Nickname">
</div>

<div class="mb-3">
<label for="character" class="form-label">Escolha seu Personagem:</label>
<div id="characterSelect">
<div class="character-option" data-character="cookie1">
<img src="https://example.com/cookie1.png" alt="Biscoito 1">
<span>Biscoito 1</span>
</div>
<div class="character-option" data-character="cookie2">
<img src="https://example.com/cookie2.png" alt="Biscoito 2">
<span>Biscoito 2</span>
</div>
<div class="character-option" data-character="cookie3">
<img src="https://example.com/cookie3.png" alt="Biscoito 3">
<span>Biscoito 3</span>
</div>
<div class="character-option" data-character="cookie4">
<img src="https://example.com/cookie4.png" alt="Biscoito 4">
<span>Biscoito 4</span>
</div>
<div class="character-option" data-character="cookie5">
<img src="https://example.com/cookie5.png" alt="Biscoito 5">
<span>Biscoito 5</span>
</div>
<div class="character-option" data-character="cookie6">
<img src="https://example.com/cookie6.png" alt="Biscoito 6">
<span>Biscoito 6</span>
</div>
</div>
</div>

<!-- Novo campo para código da sala -->
<div class="mb-3">
<label for="roomCode" class="form-label">Código da Sala:</label>
<input type="text" class="form-control" id="roomCode" placeholder="Digite ou crie um código da sala (opcional)">
</div>

<div class="mb-3">
<label for="time" class="form-label">Tempo da Sala (em minutos):</label>
<input type="number" class="form-control" id="time" placeholder="Tempo em minutos" min="1" max="60">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary" id="startGameBtn">Iniciar Jogo</button>
</div>
</div>
</div>
</div>



<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
Empty file added www/src/js/cookie/start.js
View file
Empty file.
5 changes: 3 additions & 2 deletions www/src/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,9 @@ $(() => {
$("start-screen button").on("click", () => $("#click")[0].play());

$("#play").on("click", () => {
$("start-screen").remove();
$("ui").show();

// $("start-screen").remove();
// $("ui").show();
});

});
113 changes: 112 additions & 1 deletion www/src/styles/css/ui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,4 +272,115 @@ ui .statistic td .value {
transform: scale(1);
}
}
*/
*/

.modal-dialog {
max-width: 100%;
height: 100vh;
padding: 0;
margin: 0;
}

.modal-content {
height: 100%;
background-color: #f4a460;
color: #4b2e16;
font-family: "Minecraftia", cursive;
}

.modal-header {
background-color: #d2691e;
color: white;
padding: 1rem;
}

.modal-title {
font-size: 2rem;
font-weight: bold;
}

.modal-body {
background-color: #ffe4b5;
padding: 2rem;
overflow: auto;
height: calc(100% - 4rem);
}

#characterSelect {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 1rem;
gap: 15px;
scroll-snap-type: x mandatory;
}

.character-option {
background-color: #f4a460;
border-radius: 10px;
border: 1px solid #d2691e;
padding: 0.75rem;
cursor: pointer;
transition: transform 0.3s ease;
scroll-snap-align: start;
flex-shrink: 0;
width: 120px;
text-align: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.character-option:hover {
transform: scale(1.1);
background-color: #d2691e;
}

.character-option img {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid #4b2e16;
}

.character-option span {
margin-top: 10px;
font-weight: bold;
color: #4b2e16;
text-transform: uppercase;
font-size: 1rem;
}

.form-label {
font-weight: bold;
color: #4b2e16;
}

.form-control, .form-select {
background-color: #f4a460;
color: #4b2e16;
border: 1px solid #d2691e;
border-radius: 8px;
font-family: "Minecraftia", cursive;
padding: 0.75rem;
font-size: 1rem;
}

.modal-footer {
background-color: #d2691e;
padding: 1rem;
}

button.btn-primary {
background-color: #4b2e16;
border-color: #d2691e;
font-weight: bold;
}

button.btn-secondary {
background-color: #f4a460;
border-color: #d2691e;
font-weight: bold;
}

0 comments on commit d87a30b

Please sign in to comment.