Text-based MMORPG com JavaScript
Entenda o processo de criação de um jogo MMORPG web com JavaScript
Adicionando menu estilo medieval
Uma das principais associações que fazemos com jogos MMORPG é a estética medieval, usando a paleta de cores que temos vamos agora adicionar algumas classes no nosso global.css para deixar nosso jogo com uma cara mais medieval.
Primeiro um botão, essa classe vai ser usada para botões de confirmação e cancelamento, entre outros botões das interface.
Nossa utilização primaria desse botão vai ser nos modais pop-up.
// ... codigo já existente no global.css
.medieval-button {
padding: 10px 20px;
background-color: #795649;
color: #f4e5c3;
border: 2px solid #c0a080;
font-family: "Goudy Bookletter 1911", serif;
font-size: 18px;
text-shadow: 1px 1px 0px #a67c52;
box-shadow: 2px 2px 0px #a67c52;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
.medieval-button:hover {
background-color: #8a6e2f;
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3);
}
.medieval-button:active {
box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 0.5);
transform: translateY(2px);
}
O código fica assim quando renderizado:
Agora vamos adicionar o css para o menu, esse vai ser mais utilizado na parte de sistemas, como o menu de inventário, menu de habilidades, menu de quests, etc.
.medieval-menu {
background-color: #162825;
padding: 20px;
list-style: none;
}
.medieval-menu li {
margin-bottom: 10px;
border-radius: 4px;
transition: background-color 0.3s ease, box-shadow 0.2s ease;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}
.medieval-menu a {
text-decoration: none;
color: #af9567;
display: block;
padding: 10px 20px;
transition: color 0.3s ease;
font-family: "Goudy Bookletter 1911", serif;
font-size: 16px;
}
.medieval-menu li:hover {
background-color: #4f4334;
}
.medieval-menu li:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
}
.medieval-menu li:hover a {
color: #af9567;
}
Ele renderizado fica assim:
Eu confesso que não sou um grande fã de css global, mas como nosso projeto é um jogo para evitar de ter que repetir estilos entre os componentes essa estrtatégia de concentrar essas classes utilitarias em um unico ponto facilita muito a nossa vida no futuro.
Bom, vamos voltar agora para o nosso código e vamos substituir <h1 className="text-4xl font-bold text-white">Menu 1</h1> pelo nosso menu medieval.
// ... codigo já existente
<ul className="medieval-menu w-full h-full">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
// ... resto do código
Vou aproveitar que estamos mexendo nessa sessão e vou adicionar uma borda gradiente dourada em volta no nosso menu, basta adiconar um padding na div pai do nosso menu e vou adicionar a nossa classe golden-gradient e um rounded-sm para deixar as bordas arredondadas.
<div className="w-full golden-gradient p-1 rounded-sm">
<ul class="medieval-menu w-full h-full">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</div>
