Avançado
Text-based MMORPG com JavaScript
Entenda o processo de criação de um jogo MMORPG web com JavaScript
Finalizando interface principal
Bom para não tomar muito tempo e como esse não é um curso de CSS, finalizei a interface principal do jogo, o código todo ficou assim:
Clique aqui para ver o código do index.tsx
import Image from "next/image";
import { useState } from "react";
export default function Home() {
const [collapsedSkills, setCollapsedSkills] = useState(true);
const characters = [
{
name: "Rouge",
emoji: "🏹",
level: 99,
image: "/rouge.png",
},
{
name: "Druid",
emoji: "🐻",
level: 99,
image: "/druid.png",
},
{
name: "Mage",
emoji: "🧙♂️",
level: 89,
image: "/mage.png",
},
{
name: "Warrior",
emoji: "🛡️",
level: 99,
image: "/warrior.png",
},
];
return (
<main className="flex h-full w-full gap-2 bg-[#152724]">
<div className="flex h-full w-full gap-2 bg-[#152724] ">
<div className="golden-gradient p-2 hidden w-fit sm:block">
<Image
src="/rouge.png"
alt="Logo"
width={0}
height={0}
sizes="100vw"
className="w-full h-full object-cover"
/>
</div>
<div className="flex w-full flex-col justify-between bg-[#1D2F2C]">
<div className="golden-gradient w-full rounded-sm p-1">
<div className="bg-[#2C534B]">
<h1 className="text-2xl font-bold text-white p-2 medieval-font" onClick={() => setCollapsedSkills(!collapsedSkills)}>Personagens</h1>
<ul className={`medieval-menu w-full overflow-y-auto ${collapsedSkills ? '' : 'hidden'}`}>
<li>
<a>Novo Jogo</a>
</li>
{characters.map((character, index) => (
<li key={index}>
<a>
{character.emoji} {character.name} Lv: {character.level}
</a>
</li>
))}
</ul>
</div>
</div>
<div className="golden-gradient p-1 w-full bg-[#2C534B]">
<div className="bg-[#2C534B]">
<h1 className="text-2xl font-bold text-white p-2 medieval-font">Ações</h1>
<ul className="medieval-menu w-full overflow-y-auto">
<li>
<a>
Personagem
</a>
</li>
<li>
<a>
Inventario
</a>
</li>
<li>
<a>
<div className="medieval-menu__item__content">Caçar</div>
</a>
</li>
<li>
<a>
<div className="medieval-menu__item__content">Atacar</div>
</a>
</li>
<li>
<a>
<div className="medieval-menu__item__content">Viajar</div>
</a>
</li>
</ul>
</div>
</div>
<div className="golden-gradient p-1 w-full bg-[#2C534B]">
<div className="bg-[#2C534B]">
<h1 className="text-2xl font-bold text-white p-2 medieval-font" onClick={() => setCollapsedSkills(!collapsedSkills)}>Skills</h1>
<ul className={`medieval-menu w-full overflow-y-auto ${collapsedSkills ? 'hidden' : ''}`}>
<li>
<a>Apunhalhar 🗡️ [1] </a>
</li>
<li>
<a>
Saraivada de flechas 🏹 [2]
</a>
</li>
<li>
<a>
Punhal venenoso 🗡️ [3]
</a>
</li>
<li>
<a>
Furtividade 🗡️ [4]
</a>
</li>
</ul>
</div>
</div>
<div className="w-full bg-[#152724] grow flex flex-col gap-1 justify-end pb-4">
<h1 className="text-2xl font-bold text-white p-2 bg-[#2C534B] medieval-font">Dados</h1>
<div className="bg-red-600 text-white text-md rounded-md text-center medieval-font">100/100</div>
<div className="bg-blue-600 text-white text-md rounded-md text-center medieval-font">100/100</div>
<div className="bg-orange-300 text-white text-md rounded-md text-center medieval-font">100/100</div>
</div>
</div>
</div>
<div className="flex w-full flex-col gap-2 bg-[#152724]">
<div className="w-full golden-gradient rounded-lg">
<Image
src="/Valdheim.png"
alt="Logo"
width={0}
height={0}
sizes="100vw"
className="w-full h-full object-cover p-2 rounded-xl"
/>
</div>
<div className="w-full h-full rounded-lg flex flex-row">
<div className="w-full h-full border-r-2 border-[#af9567]">
<h2 className="text-2xl text-[#af9567] p-2 medieval-font">História</h2>
<ul className="medieval-menu w-full overflow-y-auto">
<li>
<a>
<div className="flex justify-around w-full h-full">
<Image src="/coin.png" alt="Logo" width={0} height={0} sizes="100vw" className="w-10 h-10 object-cover" />
<div className="m-auto">Encontre o Lobo cinzento [4h]</div>
</div>
</a>
</li>
</ul>
</div>
<div className="w-full h-full">
<h2 className="text-2xl text-[#af9567] p-2 medieval-font">Caçada</h2>
<ul className="medieval-menu w-full overflow-y-auto">
<li>
<a>
<div className="flex justify-around w-full h-full">
<Image src="/coin-1.png" alt="Logo" width={0} height={0} sizes="100vw" className="w-10 h-10 object-cover" />
<div className="m-auto">Mate 20 gremilins</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</main>
);
}
Clique aqui para expandir
Clique aqui para ver o código do globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Poor+Story&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
body > div {
height: 100vh;
}
@layer utilities {
.medieval-font {
font-family: 'Poor Story', system-ui;
}
.golden-gradient {
background: radial-gradient(
ellipse farthest-corner at right bottom,
#fedb37 0%,
#fdb931 8%,
#9f7928 30%,
#8a6e2f 40%,
transparent 80%
),
radial-gradient(
ellipse farthest-corner at left top,
#ffffff 0%,
#ffffac 8%,
#d1b464 25%,
#5d4a1f 62.5%,
#5d4a1f 100%
);
}
.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);
}
.medieval-menu {
background-color: #162825;
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: 'Poor Story', system-ui;
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;
}
}
Clique aqui para expandir
Com essa interface podemos finalmente começar a integrar as funcionalidades do jogo, mas isso é assunto para o próximo capítulo.