Search the Community

Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar? JS // Jogador 1 const fillplace1 = document.querySelector('#fillplace1'); const fillplace2 = document.querySelector('#fillplace2'); const fillplace3 = document.querySelector('#fillplace3'); var fill; const empties = document.querySelectorAll('.empty'); fillplace1.addEventListener('dragstart', enterstart); fillplace2.addEventListener('dragstart', enterstart); fillplace3.addEventListener('dragstart', enterstart); for (const empty of empties) { empty.addEventListener('dragover', dragOver); empty.addEventListener('dragenter', dragEnter); empty.addEventListener('dragleave', dragLeave); empty.addEventListener('drop', dragDrop); } function enterstart(){ fill = this; } function dragOver(e) { e.preventDefault(); } function dragEnter(e) { e.preventDefault(); this.className += ' hovered'; } function dragLeave() { this.className = 'empty'; } function dragDrop(id) { this.className = 'empty'; this.append(fill); } HTML <link rel="stylesheet" href="../css/jogar.css" /> <div id="barraGeneral"> <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" /> </div> <div id="persona"> <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" /> </div> <button id="btpassar" onclick="cont();">Passar Rodada</button> <H1 id="campomana">1</H1> <!-- Mesa das cartas jogador 1--> <div class="empty" id="emptyplace1"> </div> <div class="empty" id="emptyplace2"> </div> <div class="empty" id="emptyplace3"> </div> <div class="empty" id="emptyplace4"> </div> <div class="empty" id="emptyplace5"> </div> <!-- Mão do jogador 1 --> <div class="emptyhand1"> <div class="fill" draggable="true" id="fillplace1"> <img src='../imagens/Sorteio/aa.png' draggable='true'> </div> </div> <div class="emptyhand2"> <div class="fill" draggable="true" id="fillplace2"> <img src='../imagens/Sorteio/aa2.png' draggable='true'> </div> </div> <div class="emptyhand3"> <div class="fill" draggable="true" id="fillplace3"> <img src='../imagens/Sorteio/aa2.png' draggable='true'> </div> </div>

Opa beleza pessoal? É o seguinte criei uma aplicação javascript aqui, para upload de arquivos(imagens) que mostra uma previa da mesma antes de salvar. Fiz o testes em alguns navegadores e em 3 não funcionou como esperado. IE e Edge como era de se esperar por serem péssimos navegadores a coisa não funcionou. Porém meu descontamento foi com o mozilla firefox (atualizado) cujo o monitoramento do progresso não funciona corretamente. Assim sendo a medida que o navegador vai lendo o arquivo enviado ele alterar a largura em porcentagem de um elemento html que é a barra de progresso exibindo assim o status do envio. E ai que entra o problema, pois ás vezes no "mozilla" a barra fica entre 1 e 12% independente do tamanho de bits da imagem como se o monitoramento não chegasse ao final, já no chrome, opera e safari o monitoramento se completa. Se quiserem dar uma olhada e testar para confirmar que é realmente um bug de um navegador específico ficaria grato. Ou mesmo se saber o que está causando essa anomalia. Obs.: O intuito disso é que depois de criada e prévia vou fazer uma função para cortar e redimensionar o tamanho, pós então criar a função que irá enviar a imagem para o servidor ou mesmo salvar-la como base64 para gravar em banco de dados (ainda não decidir o que realmente vou fazer). O javascript está bem genérico e simples pois ainda é um embrião do realmente vai ser. Nota: Fiz o teste no mozilla enviando arquivos "que não são imagem com a função liberada para esses tipos de arquivos sem usar previa" o monitoramento funcionou corretamente como estimado, tipos de arquivo TXT, DOCX, videos, BIN, EXE etc... o problema só são imagens mesmo. HTML + CSS Javascript