Incorporar uma calculadora no fórum

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Incorporar uma calculadora no fórum

Mensagem por trashscoria 04.11.22 14:52

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
trashscoria

trashscoria
Novo Membro

Masculino
Membro desde : 19/10/2022
Mensagens : 9
Pontos : 14

Ver perfil do usuário https://bleachlasnoches.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Incorporar uma calculadora no fórum

Mensagem por pedxz 04.11.22 22:13

Olá @trashscoria,

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


(Aguardo uma resposta sua)
Atenciosamente,
pedxz.
pedxz

pedxz
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7254
Pontos : 8513

Ver perfil do usuário

Ir para o topo Ir para baixo

Tópico resolvido Re: Incorporar uma calculadora no fórum

Mensagem por Connor R. 04.11.22 22:47

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.
Connor R.

Connor R.
Super Membro

Masculino
Membro desde : 06/08/2012
Mensagens : 1245
Pontos : 2005

Ver perfil do usuário http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Incorporar uma calculadora no fórum

Mensagem por trashscoria 05.11.22 21:46

pedxz escreveu: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.
trashscoria

trashscoria
Novo Membro

Masculino
Membro desde : 19/10/2022
Mensagens : 9
Pontos : 14

Ver perfil do usuário https://bleachlasnoches.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Incorporar uma calculadora no fórum

Mensagem por Connor R. 06.11.22 17:39

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/
Connor R.

Connor R.
Super Membro

Masculino
Membro desde : 06/08/2012
Mensagens : 1245
Pontos : 2005

Ver perfil do usuário http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Incorporar uma calculadora no fórum

Mensagem por trashscoria 07.11.22 13:16

Connor R. escreveu: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!
trashscoria

trashscoria
Novo Membro

Masculino
Membro desde : 19/10/2022
Mensagens : 9
Pontos : 14

Ver perfil do usuário https://bleachlasnoches.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Incorporar uma calculadora no fórum

Mensagem por pedxz 08.11.22 16:58

@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
Incorporar uma calculadora no fórum  Image70
pedxz

pedxz
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7254
Pontos : 8513

Ver perfil do usuário

Ir para o topo Ir para baixo

Tópico resolvido Re: Incorporar uma calculadora no fórum

Mensagem por trashscoria 09.11.22 13:24

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
trashscoria

trashscoria
Novo Membro

Masculino
Membro desde : 19/10/2022
Mensagens : 9
Pontos : 14

Ver perfil do usuário https://bleachlasnoches.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Incorporar uma calculadora no fórum

Mensagem por pedxz 09.11.22 14:59

trashscoria escreveu: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;
}
pedxz

pedxz
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7254
Pontos : 8513

Ver perfil do usuário

Ir para o topo Ir para baixo

Tópico resolvido Re: Incorporar uma calculadora no fórum

Mensagem por trashscoria 09.11.22 15:50

pedxz escreveu:
trashscoria escreveu: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;
trashscoria

trashscoria
Novo Membro

Masculino
Membro desde : 19/10/2022
Mensagens : 9
Pontos : 14

Ver perfil do usuário https://bleachlasnoches.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Incorporar uma calculadora no fórum

Mensagem por Connor R. 09.11.22 23:12

Bastaria adicionar na sua folha css o seguinte:

Código:

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

Connor R.
Super Membro

Masculino
Membro desde : 06/08/2012
Mensagens : 1245
Pontos : 2005

Ver perfil do usuário http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Incorporar uma calculadora no fórum

Mensagem por pedxz 11.11.22 10:30

@Connor R.: Obrigado Positivo Venerar


Tópico resolvido


Movido para "Questões resolvidas".
pedxz

pedxz
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7254
Pontos : 8513

Ver perfil do usuário

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos