Incorporar uma calculadora no fórum

[trashscoria]

Detalhes da questão

Endereço do fórum: http://bleachlasnoches.forumeiros.com
Versão do fórum: phpBB3

Descrição

Opa, eu fiz uma calculadora de atributos para o fórum mas no quesito de passar o código para ele sou muito leigo ainda e tenho medo de bugar outras funções, existe uma forma de passar ela para o fórum? Segue o link da calculadora

https://codepen.io/cosmicbreaker1/pen/gOKMpZb?editors=1111

[tikky]

Olá @trashscoria,

Mas pretende por a calculadora onde?! Numa página HTML? Em um tópico? Widget?


(Aguardo uma resposta sua)
Atenciosamente,
pedxz.

[Don Corleone]

Acho a melhor opção criar uma página html, marcando a opção de utilizar no início e no final do fórum.

[trashscoria]

Olá @trashscoria,

Mas pretende por a calculadora onde?! Numa página HTML? Em um tópico? Widget?


(Aguardo uma resposta sua)
Atenciosamente,
pedxz.

Boa noite! Obrigado por responder, cara sinceramente eu só estava com a ideia de implementar numa página html, mas a ideia de criar um widget acessível independente da página que o usuário estiver não é ruim hein, se tiver como fazer algo do gênero gostaria de aprender como, mas, se por uma primeira instância quiser me auxiliar com algo menos complicado, eu aceitaria em um tópico ou página. Abraços.

[Don Corleone]

Notei ue o seu fórum possui os widgets na parte superior, mas seria melhor um widget com uma opção de abrir e fechar na lateral.

Seria bem simples de ser implementado.

Veja um exemplo: https://jsfiddle.net/m2dt13uq/

[trashscoria]

Notei ue o seu fórum possui os widgets na parte superior, mas seria melhor um widget com uma opção de abrir e fechar na lateral.

Seria bem simples de ser implementado.

Veja um exemplo: https://jsfiddle.net/m2dt13uq/

caraca, ficou daora mano! Pode me ajudar com essa questão? E sim, minha ideia também seria um na parte lateral!

[tikky]

@trashscoria: Adicione em um widget ou em um template o seguinte código

Código:

<script>jQuery(document).ready(function(){
  jQuery(".box-calc-btn-t").click(function(){
    jQuery(".box-calc").toggle();
  });
});

function calcular() {
  let forca = Number(document.getElementById("str").value);
  let agilidade = Number(document.getElementById("agi").value);
  let inteligencia = Number(document.getElementById("int").value);
  let resistencia = Number(document.getElementById("res").value);
  let velocidade = Number(document.getElementById("vel").value);
  let pesEspiritual = Number(document.getElementById("pes").value);
  let hakuda = Number(document.getElementById("hak").value);
  let zanjutsu = Number(document.getElementById("zan").value);
  let kidou = Number(document.getElementById("kid").value);

  let acertarSufocamento = (forca + agilidade) / 2;
  document.getElementById(
    "sufres"
  ).innerText = `Acertar Sufocamento: ${acertarSufocamento}`;

  let manterSufocamento = forca;
  document.getElementById(
    "manfres"
  ).innerText = `Manter Sufocamento: ${manterSufocamento}`;

  let acertarIntimidar = forca;
  document.getElementById(
    "intires"
  ).innerText = `Intimidar: ${acertarIntimidar}`;

  let arremessoArmas = (forca + agilidade) / 2;
  document.getElementById(
    "ararmasress"
  ).innerText = `Arremesso de Armas: ${arremessoArmas}`;

  let resistirFisicamente = (forca + resistencia) / 2;
  document.getElementById(
    "resires"
  ).innerText = `Resistir Fisicamente: ${resistirFisicamente}`;

  let esquiva = (agilidade + velocidade) / 2;
  document.getElementById("esqres").innerText = `Esquiva: ${esquiva}`;

  let ocultarPresença = agilidade;
  document.getElementById(
    "ocpes"
  ).innerText = `Ocultar Presença: ${ocultarPresença}`;

  let manipularObjetos = agilidade;
  document.getElementById(
    "manobres"
  ).innerText = `Manipular Objetos: ${manipularObjetos}`;

  let acertoMental = (inteligencia + pesEspiritual) / 2;
  document.getElementById(
    "mentalres"
  ).innerText = `Acerto Mental: ${acertoMental}`;

  let detectarPresença = inteligencia;
  document.getElementById(
    "detpres"
  ).innerText = `Detectar Presença: ${detectarPresença}`;

  let iniciativa = velocidade;
  document.getElementById("inires").innerText = `Iniciativa: ${iniciativa}`;

  let resistirVeneno = resistencia;
  document.getElementById(
    "resvenres"
  ).innerText = `Resister Veneno: ${resistirVeneno}`;

  let stamina = pesEspiritual + resistencia;
  document.getElementById("stamres").innerText = `Stamina: ${stamina}`;

  let acertoComTecnicas = (pesEspiritual + agilidade) / 2;
  document.getElementById(
    "pesacerres"
  ).innerText = `Acerto com Técnicas/Equipamentos: ${acertoComTecnicas}`;

  let intimidarComPes = pesEspiritual;
  document.getElementById(
    "inticpres"
  ).innerText = `Intimidar: ${intimidarComPes}`;

  let derrubar = (forca + hakuda) / 2;
  document.getElementById("derres").innerText = `Derrubar: ${derrubar}`;

  let desarmar = (agilidade + hakuda) / 2;
  document.getElementById("deres").innerText = `Desarmar: ${desarmar}`;

  let acertoHakuda = (hakuda + agilidade) / 2;
  document.getElementById(
    "hakres"
  ).innerText = `Acerto Corpo-a-Corpo: ${acertoHakuda}`;

  let acertoZanjutsu = (zanjutsu + agilidade) / 2;
  document.getElementById(
    "zanres"
  ).innerText = `Acerto com Zanjutsu: ${acertoZanjutsu}`;

  let acertoKidou = (kidou + inteligencia) / 2;
  document.getElementById(
    "kidres"
  ).innerText = `Acerto com Kidou: ${acertoKidou}`;

  let resistirDano = resistencia;
  if (resistencia <= 2) {
    resistirDano = resistencia * 10;
  } else if (resistencia >= 3) {
    resistirDano = resistencia * 20 - 20;
  }
  document.getElementById(
    "resisdanores"
  ).innerText = `Resistência de Dano: ${resistirDano}`;

  let fatorBonusFor = forca;
  if (forca <= 2) {
    fatorBonusFor = forca * 10;
  } else if (forca >= 3) {
    fatorBonusFor = forca * 20 - 20;
  }
  document.getElementById(
    "bonusdanores"
  ).innerText = `Fator Bônus: ${fatorBonusFor}`;

  let fatorBonusHak = forca;
  if (forca <= 2) {
    fatorBonusHak = forca * 10;
  } else if (forca >= 3) {
    fatorBonusHak = forca * 20 - 20;
  }
  document.getElementById(
    "bonushak"
  ).innerText = `Dano Físico: ${fatorBonusHak}`;

  let fatorBonusZan = forca;
  if (forca <= 2) {
    fatorBonusZan = forca * 10;
  } else if (forca >= 3) {
    fatorBonusZan = forca * 20 - 20;
  }
  document.getElementById(
    "bonuszan"
  ).innerText = `Dano Físico: ${fatorBonusZan}`;

  let fatorBonusPes = pesEspiritual;
  if (pesEspiritual <= 2) {
    fatorBonusPes = pesEspiritual * 10;
  } else if (pesEspiritual >= 3) {
    fatorBonusPes = pesEspiritual * 20 - 20;
  }
  document.getElementById(
    "bonuspes"
  ).innerText = `Dano Bônus: ${fatorBonusPes}`;

  let fatorBonusKid = pesEspiritual;
  if (pesEspiritual <= 2) {
    fatorBonusKid = pesEspiritual * 10;
  } else if (pesEspiritual >= 3) {
    fatorBonusKid = pesEspiritual * 20 - 20;
  }
  document.getElementById(
    "bonuskid"
  ).innerText = `Dano Bônus: ${fatorBonusKid}`;
 
 
}</script><style>.box-calc{
    background: #333;
    color: #ddd;
    display: none;
    position: fixed;
    bottom: 0;
    top: 0;
left: 0;
    height: 100vh;
width: 40%;
z-index: 999;
}

.box-calc-btn {
    overflow: visible;
    position: fixed;
    bottom: 30px;
    height: 350px;
    left: 0;
    z-index: 1000;
}

.attribute-container {
    height: 120vh;
    background: #242424;
    overflow: auto;
    padding: 0px 0px;
    justify-content: center;
}

.display-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: 150px;
}

.status-container {
  flex-direction: column;
  color: grey;
  font: 700 16px Roboto,serif;
  align-items: center;
  margin: 50px 50px 0 0;
}

.attribute-values {
  margin: 8px;
}

.attribute-values input {
  width: 100px;
  display: flex;
  flex-direction: row;
  height: 20px;
  border-radius: 5px;
  border: 1px solid #363636;
  outline: none;
  caret-color: grey;
  color: grey;
  background: #242424;
  margin-right: 12px;
  align-items: center;
}

.attribute-values span {
    font: 700 22px Roboto,serif;
    color: #fff;
    margin-right: 10px;
}

.data-container {
  display: flex;
  flex-direction: row;
  margin-right: 5px;
}</style>
<div class="box-calc">
                        
   <div class="attribute-container">
                           
      <div class="display-container">
                                
         <ul class="status-container">
                                     
            <div class="attribute-values">
                                 <span>Força</span>        <input onblur="calcular()" type="number" id="str" />               
            </div>
                                     
            <li class="data-container">
                                 <span id="sufres">Acertar Sufocamento:</span>               
            </li>
                                     
            <li class="data-container">
                                 <span id="manfres">Manter Sufocamento:</span>               
            </li>
                                     
            <li class="data-container">
                                 <span id="intires">Intimidar:</span>               
            </li>
                                     
            <li class="data-container">
                                 <span id="ararmasress">Arremesso de Armas:</span>               
            </li>
                                       
            <li class="data-container">
                                 <span id="derres">Derrubar:</span>               
            </li>
                                   
            <li class="data-container">
                                 <span id="bonusdanores">Fator Bônus:</span>               
            </li>
                                   
         </ul>
                                
         <ul class="status-container">
                                     
            <div class="attribute-values">
                                 <span>Agilidade</span>        <input onblur="calcular()" type="number" id="agi" />               
            </div>
                                     
            <li class="data-container">
                                 <span id="esqres">Esquiva:</span>               
            </li>
                                     
            <li class="data-container">
                                 <span id="ocpes">Ocultar Presença: </span>               
            </li>
                                     
            <li class="data-container">
                                 <span id="manobres">Manipular Objetos: </span>               
            </li>
                                     
            <li class="data-container">
                                 <span id="deres">Desarmar:</span>               
            </li>
                                         
         </ul>
                                
         <ul class="status-container">
                                     
            <div class="attribute-values">
                                 <span>Inteligência</span>        <input onblur="calcular()" type="number" id="int" />               
            </div>
                                     
            <li class="data-container">
                                 <span id="mentalres">Acerto Mental:</span>               
            </li>
                                     
            <li class="data-container">
                                 <span id="detpres">Detectar Presença:</span>               
            </li>
                                   
         </ul>
                                
         <ul class="status-container">
                                     
            <div class="attribute-values">
                                 <span>Velocidade</span>        <input onblur="calcular()" type="number" id="vel" />               
            </div>
                                     
            <li class="data-container">
                                 <span id="inires">Iniciativa:</span>               
            </li>
                                   
         </ul>
                                
         <ul class="status-container">
                                     
            <div class="attribute-values">
                                 <span>Resistência</span>        <input onblur="calcular()" type="number" id="res" />               
            </div>
                                     
            <li class="data-container">
                                 <span id="resires">Resistir Fisicamente:</span>               
            </li>
                                     
            <li class="data-container">
                                 <span id="resvenres">Resistir Veneno:</span>               
            </li>
                                     
            <li class="data-container">
                                 <span id="resisdanores">Resistência de Dano:</span>               
            </li>
                                     
            <li class="data-container">
                                 <span id="stamres">Stamina:</span>               
            </li>
                                 
         </ul>
                              
         <ul class="status-container">
                                     
            <div class="attribute-values">
                                 <span>Pressão Espiritual</span>        <input onblur="calcular()" type="number" id="pes" />               
            </div>
                                     
            <li class="data-container">
                                 <span id="pesacerres">Acerto com Técnicas/Equipamentos:</span>               
            </li>
                                     
            <li class="data-container">
                                 <span id="inticpres">Intimidar:</span>               
            </li>
                                   
            <li class="data-container">
                                 <span id="bonuspes">Dano Bônus:</span>               
            </li>
                                 
         </ul>
                              
         <ul class="status-container">
                                     
            <div class="attribute-values">
                                 <span>Hakuda</span>        <input onblur="calcular()" type="number" id="hak" />               
            </div>
                                     
            <li class="data-container">
                                 <span id="hakres">Acerto Corpo-a-Corpo:</span>                 
            </li>
                                   
            <li class="data-container">
                                 <span id="bonushak">Dano Físico:</span>             
            </li>
                                 
         </ul>
                              
         <ul class="status-container">
                                     
            <div class="attribute-values">
                                 <span>Zanjutsu</span>        <input onblur="calcular()" type="number" id="zan" />               
            </div>
                                     
            <li class="data-container">
                                 <span id="zanres">Acerto com Zanjutsu:</span>             
            </li>
                                   
            <li class="data-container">
                                 <span id="bonuszan">Dano Físico:</span>             
            </li>
                                 
         </ul>
                              
         <ul class="status-container">
                                     
            <div class="attribute-values">
                                 <span>Kidou</span>        <input onblur="calcular()" type="number" id="kid" />               
            </div>
                                     
            <li class="data-container">
                                 <span id="kidres">Acerto com Kidou:</span>             
            </li>
                                   
            <li class="data-container">
                                 <span id="bonuskid">Dano Bônus:</span>               
            </li>
                                 
         </ul>
                              
      </div>
                       
   </div>
</div>
 
<div class="box-calc-btn">
              
   <button class="box-calc-btn-t">
                <img loading="lazy" src="https://i.servimg.com/u/f15/19/28/44/36/calcul10.png" />
   </button>
</div>

Demonstração

[trashscoria]

Opa, eu arrumei o problema da calculadora adicionando todo o javascript no campo de javascript do fórum, mas tem um detalhe me incomodando bastante e deve ser algo bem de boas, as respostas estão vindo sem espaçamento no HTML e eu sou bem fraco no css, não estou conseguindo resolver kk. Na real, nenhuma classe CSS está afetando diretamente o resultado, deve ser alguma coisa que devo fazer no código raiz de javascript, bom não é um GRANDE problema, mas incomoda um pouco não conseguir colocar um único espaço nas respostas dos calculos

https://imgur.com/a/llB9IHM

[tikky]

Opa, eu arrumei o problema da calculadora adicionando todo o javascript no campo de javascript do fórum, mas tem um detalhe me incomodando bastante e deve ser algo bem de boas, as respostas estão vindo sem espaçamento no HTML e eu sou bem fraco no css, não estou conseguindo resolver kk. Na real, nenhuma classe CSS está afetando diretamente o resultado, deve ser alguma coisa que devo fazer no código raiz de javascript, bom não é um GRANDE problema, mas incomoda um pouco não conseguir colocar um único espaço nas respostas dos calculos

https://imgur.com/a/llB9IHM

Adicione na folha de estilo (CSS)

Código:

.data-container > span {
    line-height: 1.75rem !important;
}

[trashscoria]

Opa, eu arrumei o problema da calculadora adicionando todo o javascript no campo de javascript do fórum, mas tem um detalhe me incomodando bastante e deve ser algo bem de boas, as respostas estão vindo sem espaçamento no HTML e eu sou bem fraco no css, não estou conseguindo resolver kk. Na real, nenhuma classe CSS está afetando diretamente o resultado, deve ser alguma coisa que devo fazer no código raiz de javascript, bom não é um GRANDE problema, mas incomoda um pouco não conseguir colocar um único espaço nas respostas dos calculos

https://imgur.com/a/llB9IHM

Adicione na folha de estilo (CSS)

Código:

.data-container > span {
    line-height: 1.75rem !important;
}

Obrigado por responder! O espaço permanece, essa linha de código deu espaço de um span para o outro e não do resultado do calculo, segue a imagem:


https://imgur.com/a/yJXnIVX

Tentei aumentar também pra ver, uma tag que eu vi que funcionou foi letter-spacing mas ai pega todo o conteudo do span e fica bugado kk, desculpa sou realmente muito leigo com css ainda.

Edit:

Cara eu resolvi o problema tirando o literal strings da raiz do javascript, bom, deixa o código ''feio'' mas funciona! Obrigado pela ajuda, pode fechar.

Exemplo da mudança:

Código:

let acertarSufocamento = (forca + agilidade) / 2;
  document.getElementById(
    "sufres"
  ).innerText = "Acertar Sufocamento: " + acertarSufocamento;

[Don Corleone]

Bastaria adicionar na sua folha css o seguinte:

Código:


li.data-container {
    margin: 5px;
}


[tikky]

@Connor R.: Obrigado

Tópico resolvido Movido para "Questões resolvidas".