1

Gerador de Tokens de Magic:The Gathering

#Node.js #Express
Davi Junior
Davi Junior

Boa noite, senhoras e senhores, antes de tudo FELIZ DIA DA MULHER. Eu nunca vou entender o tamanho da dificuldade de vocês, mas pelas mulheres com quem eu convivo eu posso perceber o quanto vocês são guerreiras, parabéns por tudo.




Agora, começando o artigo, gostaria de mostrar pra vocês um projeto meu que eu tinha até esquecido aqui.


Eu jogo Magic:The Gathering desde muito novo. Pra quem não conhece, Magic é um jogo de cartas colecionáveis onde cada um dos jogadores faz o papel de um "viajante de planos de existência" e que usa seu baralho como fonte de magia e invocação de criaturas pra vencer o jogo. Eu tinha montado um baralho que usava uma mecânica de criar fichas de criaturas, essas fichas são colecionáveis também então também são vendidas. A questão é que eu não queria as que eu tinha e nem as que eu encontrava a venda, eu queria criar as minhas próprias fichas! Foi aí que eu, estudando express, decidi criar como parte dos meus estudos um gerador de fichas! Eu não sabia como, mas sabia que era possível afinal, javascript sempre combinou bem com isso de criar imagens.

Então criei um form simples que recebe as informações que eu queria mostrar nas fichas e a imagem que eu queria mostrar. A questão era: Como montar a imagem da ficha?

Até então, eu não tinha trabalhado com canva e svg, resolvi então mostrar com html e css mesmo!

Então a ideia foi, primeiro eu fazia o upload da imagem, utilizei o multer js como middleware para isso. Depois disso eu verificava se o campo de regra especial para a ficha vinha vazio ou não, isso modifica um pouco o layout da ficha pois quando não tem esse texto o campo de escrita fica menor, então eu formulei as duas divs para a condicional anterior (texto vazio ou não) e guardava em uma variável.

Na hora do retorno da requisição da rota eu passei o html da página com a variável que leva o código da div repetindo elas quantas vezes fossem necessárias, segundo o campo do form. Além de um botão onclick="window.print();" para imprimir.

Aí veio mais um momento de aprendizado. Eu não sabia como sumir com o botão na página de impressão, o botão era imprimido junto e eu não queria isso. Em 30s de pesquisa descobri que a mesma propriedade @media do css que usamos para definir estilos diferentes segundo a responsividade, também pode ser usado para a página de impressão! Então foi só criar um @media print{} e colocar a regra para o botão sumir.


Mexendo no github hoje encontrei o código lá e achei legal fazer esse relato pra vocês, principalmente pra quem ta começando e pra quem joga MTG também! Espero que consiga ajudar em alguma coisa a quem precisar.

Exemplo de ficha criada.

0
26

Comentários (0)

Desenvolvedor de ideias.

Brasil