Minecraft Crafting Table Simulator

crafting_demo.webm

📑 Índice

1. Sobre o Projeto
2. Funcionalidades
3. Instalação e Execução
4. Branches
5. Desafio
6. Contribuição

🎮 Sobre o Projeto

O Minecraft Crafting Table Simulator recria a Crafting Table do Minecraft, permitindo a combinação de itens para criar novos objetos, seguindo a mecânica original do jogo. Desenvolvido para fins educativos, este projeto permite explorar conceitos fundamentais de programação front-end, tipagem em TypeScript, manipulação dinâmica de elementos e implementação de lógicas de interação similares às do jogo real.

🛠️ Tecnologias Utilizadas

⛏️ Como Jogar

Controles

• Clique Esquerdo: Pega todos os itens de um slot / Coloca todos os itens que você está carregando
• Clique Direito: Pega metade dos itens de um slot / Coloca apenas 1 item por clique

Fazendo Crafting

1. Pegue itens do inventário: Clique nos itens na parte inferior
2. Coloque na grade 3x3: Organize os materiais seguindo a receita desejada
3. Colete o resultado: Se a receita estiver correta, clique no slot de resultado (à direita) para pegar o item craftado
4. Materiais são consumidos: Os itens usados na receita são automaticamente removidos

Note

Projeto desenvolvido para fins educativos nas trilhas educacionais em celebração aos 50 anos da Microsoft disponíveis na plataforma da DIO.

✨ Funcionalidades

⛏️ Sistema de Crafting Completo

• Detecção Automática de Receitas: O sistema identifica automaticamente quando uma combinação válida de itens é colocada na grade de crafting 3x3
• Exibição de Resultados: Mostra instantaneamente o item resultante no slot de resultado quando uma receita correta é detectada
• Coleta de Itens: Permite clicar no slot de resultado para coletar o item craftado
• Consumo de Materiais: Remove automaticamente os materiais utilizados da grade após a coleta do item

🎮 Sistema de Interação com Itens

• Sistema de Cliques: Clique esquerdo para pegar/colocar todos os itens, clique direito para pegar metade/colocar um por um
• Empilhamento Inteligente: Itens do mesmo tipo se empilham automaticamente respeitando o limite máximo
• Troca de Itens: Permite trocar itens entre slots diferentes
• Feedback Visual: Item segue o cursor quando selecionado

📦 Sistema de Inventário

• Grade de Inventário: 36 slots de inventário organizados em 4 fileiras de 9 slots
• Itens Pré-carregados: Inventário inicializado com diversos materiais
• Contador de Quantidade: Exibe a quantidade de itens empilhados
• Gestão de Pilhas: Sistema completo para gerenciar pilhas de itens

📜 Sistema de Receitas

• Reconhecimento de Padrões: Detecta receitas independente da posição na grade
• Validação Precisa: Compara exatamente os padrões de receitas definidos

👩‍💻 Instalação e Execução

💻 Pré-requisitos

• Node.js
• NPM

⌨️ Passo a Passo

# 1. Clone o repositório
git clone https://github.com/elidianaandrade/minecraft-crafting-table.git

# 2. Entre no diretório do projeto
cd minecraft-crafting-table

# 3. Instale as dependências
npm install

# 4. Inicie o servidor de desenvolvimento local
npm run dev

Você pode usar a extensão Live Server no VS Code para abrir o arquivo index.html:

1. Instale a extensão "Live Server" no VS Code
2. Clique com o botão direito no arquivo index.html
3. Selecione "Open with Live Server"

🌿 Branches

• main: Versão completa do projeto com todas as funcionalidades do desafio implementadas.
• challenge: Contém o projeto base com a estrutura inicial do desafio.

🚀 Desafio

Sua missão: Complete a funcionalidade de crafting!
Implemente o sistema que identifica as combinações de itens, exibe o resultado correto, permite a coleta do item craftado e remove os materiais utilizados. Este desafio testa sua capacidade de implementar lógica interativa e manipulação dinâmica do DOM, simulando o comportamento original do Minecraft.

O sistema já possui a estrutura básica para manipular os itens na grade de crafting, mas você precisa implementar as seguintes funcionalidades:

• 1. Identificar quando o jogador colocou uma combinação válida de itens na grade de crafting
• 2. Mostrar o item resultante no slot de resultado quando uma receita correta for detectada
• 3. Permitir que o jogador clique para coletar o item que foi craftado
• 4. Remover os materiais utilizados da grade de crafting após o jogador coletar o item resultante
• Desafio Extra: ✨ Implementar o botão de receitas! Quando clicado, deve mostrar todas as combinações possíveis de crafting disponíveis no projeto em uma interface interativa.

Tip

Dicas para Resolver o Desafio:

1. Identificar combinações válidas:

   • Crie um sistema para mapear a posição dos itens na grade
   • Compare com as receitas predefinidas
   • Considere tanto a forma exata quanto padrões que ignoram posições vazias

2. Mostrar o item resultante:

   • Quando uma combinação válida for detectada, atualize o slot de resultado
   • Use os métodos existentes para criar elementos visuais do item resultante
   • Garanta que o item só apareça quando a receita estiver completa

3. Implementar a coleta do item:

   • Adicione um event listener ao slot de resultado
   • Ao clicar, o item deve ficar ativo para ser inserido no inventário ou no grid do crafting
   • Implemente feedback visual para confirmar a coleta
   • Lembre-se: não é possível inserir itens diretamente no slot de resultado, apenas coletar

4. Remover materiais usados:

   • Após a coleta, reduza a quantidade de cada item usado na receita
   • Remova completamente os itens que tiverem quantidade zero
   • Atualize a interface visual para refletir as mudanças no grid

Bom desenvolvimento e divirta-se com o projeto!

🤝 Contribuição

Quer contribuir com o projeto? Consulte o Guia de Contribuição para saber como participar!

Note

Toda contribuição é bem-vinda, mas lembre-se de que este é um projeto sem fins lucrativos e com propósito educacional. Minecraft é uma marca registrada da Mojang Studios, subsidiária da Microsoft.

---

Feito com 💙 por Eli.