🏰 Dungeon Game React

📖 Sobre o Projeto

Este é um jogo de dungeon básico desenvolvido em React com o objetivo de aprender e praticar os fundamentos do React. O projeto foi criado para explorar conceitos essenciais como:

• ⚛️ Componentes funcionais
• 🎣 React Hooks (useState, useEffect)
• 🎮 Gerenciamento de estado
• 🗺️ Navegação em mapa baseado em grid
• ✨ Sistema de magias e feitiços
• 📊 Gerenciamento de estatísticas do personagem

🎯 Funcionalidades

• 🚶‍♂️ Movimentação do jogador em um mapa em grid
• ⚔️ Sistema de combate com golems
• 🔮 Livro de feitiços interativo
• 📋 Log de missões (Questlog)
• 📈 Painel de estatísticas do personagem
• 🗺️ Mapa do mundo navegável

🚀 Como Rodar o Projeto

📋 Pré-requisitos

Antes de começar, certifique-se de ter instalado em sua máquina:

• Node.js (versão 14 ou superior) - Download aqui
• npm (geralmente vem com o Node.js)

📥 Clonando o Repositório

# Clone o repositório
git clone https://github.com/papitalos/dungeon-game-react.git

# Entre na pasta do projeto
cd dungeon-game-react

🔧 Instalação das Dependências

# Instale todas as dependências do projeto
npm install

▶️ Executando o Projeto

# Inicie o servidor de desenvolvimento
npm start

O projeto será aberto automaticamente no seu navegador em http://localhost:3000.

📜 Scripts Disponíveis

npm start

Executa o aplicativo no modo de desenvolvimento. A página será recarregada automaticamente quando você fizer alterações.

npm test

Inicia o executor de testes no modo interativo.

npm run build

Compila o aplicativo para produção na pasta build. Otimiza a compilação para melhor performance.

npm run eject

⚠️ Atenção: esta é uma operação irreversível! Remove a abstração do Create React App e expõe todas as configurações.

🛠️ Tecnologias Utilizadas

• React 18.2.0
• React Router DOM 6.21.2
• Axios 1.6.5
• Socket.io Client 4.7.4
• Create React App 5.0.1

📁 Estrutura do Projeto

src/
├── components/
│   ├── CharacterStats/    # Estatísticas do personagem
│   ├── Golem/            # Componente do golem
│   ├── Player/           # Componente do jogador
│   ├── Questlog/         # Log de missões
│   ├── SpellBook/        # Livro de feitiços
│   └── WorldMap/         # Mapa do mundo
├── assets/               # Imagens e recursos
├── App.js               # Componente principal
└── index.js             # Ponto de entrada

🎓 Conceitos React Praticados

Este projeto é ideal para quem está aprendendo React, pois aborda:

• 📦 Componentização: Divisão da aplicação em componentes reutilizáveis
• 🔄 Estado e Props: Gerenciamento de dados entre componentes
• 🎣 Hooks: useState para estado local, useEffect para efeitos colaterais
• 🎨 Estilização: CSS modules e estilização de componentes
• 🗂️ Organização: Estrutura de pastas e arquivos
• 🎮 Interatividade: Eventos e manipulação de DOM

Desenvolvido com ❤️ para aprender React!