Módulo:Gb

A documentação para este módulo pode ser criada em Módulo:Gb/doc

local p = {}

function p.main(frame)
    local args = frame:getParent().args

    local normal_nivel     = args['normal_nivel']     or '140'
    local normal_equip     = args['normal_equip']     or 'Set +8'
    local hard_personagem  = args['hard_personagem']  or 'personagem 4 ou 5 estrelas (Diamante)'
    local hard_equip       = args['hard_equip']       or 'Set +16'

    local css = [[<style>
.gb-wrap{font-family:sans-serif;max-width:600px}
.gb-btns{display:flex;border-bottom:2px solid #a2a9b1;margin-bottom:0}
.gb-btn{padding:8px 22px;font-size:14px;font-weight:bold;color:#54595d;background:transparent;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;display:flex;align-items:center;gap:6px}
.gb-btn:hover{color:#202122}
.gb-btn.active{color:#202122;border-bottom-color:#3680b0}
.gb-badge{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:bold}
.badge-n{background:#ddeeff;color:#185FA5}
.badge-h{background:#fce8e8;color:#a32d2d}
.gb-panel{display:none;padding:14px 2px}
.gb-panel.active{display:block}
.gb-title{font-size:11px;font-weight:bold;color:#72777d;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.gb-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.gb-list li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:#202122;line-height:1.5}
.gb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px}
.dot-n{background:#3680b0}
.dot-h{background:#e24b4a}
@media(max-width:480px){.gb-btn{padding:8px 14px;font-size:13px}}
</style>]]

    local html = string.format([[
<div class="gb-wrap">
  <div class="gb-btns">
    <button class="gb-btn active" onclick="gbSwitch('n',this)">
      Normal <span class="gb-badge badge-n">Nível %s</span>
    </button>
    <button class="gb-btn" onclick="gbSwitch('h',this)">
      Hard <span class="gb-badge badge-h">%s</span>
    </button>
  </div>
  <div id="gbpanel-n" class="gb-panel active">
    <div class="gb-title">Requisitos — Normal</div>
    <ul class="gb-list">
      <li><span class="gb-dot dot-n"></span><span>Nível mínimo: <b>%s</b></span></li>
      <li><span class="gb-dot dot-n"></span><span>Equipamento recomendado: <b>%s</b></span></li>
    </ul>
  </div>
  <div id="gbpanel-h" class="gb-panel">
    <div class="gb-title">Requisitos — Hard</div>
    <ul class="gb-list">
      <li><span class="gb-dot dot-h"></span><span>Recomendado utilizar um <b>%s</b></span></li>
      <li><span class="gb-dot dot-h"></span><span>Equipamento recomendado: <b>%s</b></span></li>
    </ul>
  </div>
</div>
<script>
function gbSwitch(tab,btn){
  ['n','h'].forEach(function(t){
    document.getElementById('gbpanel-'+t).classList.remove('active');
  });
  document.querySelectorAll('.gb-btn').forEach(function(b){b.classList.remove('active');});
  document.getElementById('gbpanel-'+tab).classList.add('active');
  btn.classList.add('active');
}
</script>]],
        normal_nivel, hard_equip,
        normal_nivel, normal_equip,
        hard_personagem, hard_equip
    )

    return css .. html
end

return p