MediaWiki:Outfitter.js: mudanças entre as edições

Edição atual tal como às 15h23min de 12 de março de 2024

if (typeof mw !== 'undefined') {
  mw.loader.load('/index.php?title=MediaWiki:OutfitterDados.js&action=raw&ctype=text/javascript')
  mw.loader.load('/index.php?title=MediaWiki:UPNG.js&action=raw&ctype=text/javascript')
  mw.loader.load('/index.php?title=MediaWiki:omggif.js&action=raw&ctype=text/javascript')

  if ($('.outfitter').length > 0) {
    mw.loader.load('/index.php?title=MediaWiki:Outfitter.css&action=raw&ctype=text/css', 'text/css')
    $.ajax({ url: '/index.php?title=MediaWiki:Outfitter.html&action=raw', success: ready })
  } else { ready() }
}

function ready(res) {
  if (typeof dados !== 'undefined' && typeof UPNG !== 'undefined' && typeof GifWriter !== 'undefined' ) {
    if (res) { $('.outfitter').html(res.slice(5, -6)) }
    const outputs = []
    $('.outfitter_output').each(function() {
      if ($(this).is('img')) { outputs.push($(this)) }
      else { outputs.push($(document.createElement('img')).attr('data-src', $(this).attr('data-src')).appendTo($(this))) }
    })
    outfitter(outputs)
  }
  else setTimeout(() => ready(res), 300)
}

function outfitter(outputs) {
  /* Elementos */
  const com_tela = $('.outfitter').length > 0
  const $form_outfits = $('#form_outfits')
  const $form_montarias = $('#form_montarias')
  const $form_outros = $('#form_outros')
  const $addon_1 = $('#addon_1')
  const $addon_2 = $('#addon_2')
  const $aa = $('#aa')
  const $animar = $('#animar')
  const $quadros = $('#quadros')
  const $vida = $('#vida')
  const $nome_char = $('.nome_char')
  const $tick = $('#tick')

  const ctx = document.createElement('canvas').getContext('2d')
  const cctx = document.createElement('canvas').getContext('2d')
  const mctx = document.createElement('canvas').getContext('2d')
  const gctx = document.createElement('canvas').getContext('2d')

  const img_outfit = $(document.createElement('img'))[0]
  const img_mount = $(document.createElement('img'))[0]
  const img_letras = $(document.createElement('img'))[0]

  let imgs_carregando = -1
  img_outfit.onload = carregado
  img_mount.onload = carregado
  img_letras.onload = carregado

  const outfits = [{ id: -1, name: 'Nenhum', idle: [0], move: [0], type: 'other', sits: true, colors: false }].concat(dados.filter(o => o.type !== 'mount').sort(sortFn))
  const montarias = [{ id: 0, name: 'Nenhuma', idle: [0], move: [0], type: 'mount', sits: false, colors: false }].concat(dados.filter(o => o.type === 'mount').sort(sortFn))
  function sortFn (a, b) {
    if (a.type !== b.type) return (a.type === 'outfit' ? -1 : 1)
    if (isNaN(a.name) && isNaN(b.name)) return a.name.localeCompare(b.name)
    if (!isNaN(a.name) && !isNaN(b.name)) return a.id - b.id
    if (!isNaN(a.name)) return 1
    return -1
  }

  let $output
  const opc = { }

  /* Init */

  if (com_tela) {
    if (typeof mw !== 'undefined' && mw.user?.getGroups) { mw.user.getGroups().then((user_groups) => $('#botao_up').toggle(user_groups.includes('bureaucrat') || user_groups.includes('sysop'))) }
    preencherListas()
    tabelaCores()
    artworks()
  }
  processar()

  /* Funções */

  function processar() {
    if (outputs.length > 0) {
      $output = outputs.pop()
      obterParametros()
      atualizar()
    }
  }

  function atualizar () {
    validarExcecoes()
    if (com_tela) {
      sincronizarTela()
      gerarLink()
    }
    $output.attr('src', '/wiki/Especial:Redirecionar/file/Outfiter_Carregando.gif')
    buscarArquivo()
  }

  function carregado () {
    imgs_carregando--
    if (imgs_carregando <= 0) {
      dimensionar()
      montar()
      imprimir()
      processar()
    }
  }

  function validarExcecoes () {
    if (opc.outfit.addons === 0) {
      opc.addon1 = false
      opc.addon2 = false
    }
    if (opc.outfit.move.length === 0) {
      opc.animar = false
    }
    if (opc.outfit.idle.length === 0) {
      opc.animar = true
    }
    if (!opc.outfit.sits) {
      opc.montaria = montarias[0]
    }
    if (opc.outfit.id === 9999) {
      opc.lado = 0

    }
  }

  function sincronizarTela () {
    $('.outfit_nome').text(opc.outfit.name)
    $('.montaria_nome').text(opc.montaria.name)

    $('input[value="' + opc.outfit.id + '"]').prop('checked', true)
    $('input[value="' + opc.montaria.id + '"]').prop('checked', true)

    $nome_char.val(opc.nome)
    $addon_1.prop('checked', opc.addon1)
    $addon_2.prop('checked', opc.addon2)
    $animar.prop('checked', opc.animar)
    $vida.prop('checked', opc.vida)
    $aa.prop('checked', opc.aa)
    $quadros.prop('checked', opc.quadros)

    $addon_1.prop('disabled', opc.outfit.addons === 0)
    $addon_2.prop('disabled', opc.outfit.addons === 0)
    $animar.prop('disabled', opc.outfit.idle.length === 0 || opc.outfit.move.length === 0)
    $('input[name="montaria"]').not('[id="m0"]').parent().toggle(opc.outfit.sits)
    $('#tabela_cores_container').toggle(opc.outfit.colors || opc.montaria.colors)
  }

  function buscarArquivo () {
    imgs_carregando = 1 + (opc.montaria.id > 0 ? 1 : 0) + (opc.outfit.id > 0 ? 1 : 0)
    if (imgs_carregando) {
      if (opc.montaria.id > 0) {
        img_mount.setAttribute('src', assetsBaseURL + 'Outfitter_' + opc.montaria.id + '.png')
      }
      if (opc.outfit.id > 0) {
        img_outfit.setAttribute('src', opc.outfit.id !== 9999 ? assetsBaseURL + 'Outfitter_' + opc.outfit.id + '.png' : gctx.canvas.toDataURL())
      }
      img_letras.setAttribute('src', assetsBaseURL + 'Outfitter_Letras.png')
    } else carregado()
  }

  function mdc (a, b) { return a ? mdc(b % a, a) : b }

  function normalize (array, sum) {
    if (array.length === 1 && array[0] === 0) return [0]
    let array_sum = array.reduce((s, a) => s + a, 0)
    return array.map(i => Math.round(i / array_sum * sum))
  }

  function round (array, value) {
    return array.map(i => Math.round(Math.round(i / value) * value))
  }

  function sync_frames (out_frames, mount_frames) {
    if (out_frames.length <= 1 && mount_frames.length <= 1) return { frames: 1, tick: 0 }

    let out_sum = out_frames.reduce((s, a) => s + a, 0)
    let mount_sum = mount_frames.reduce((s, a) => s + a, 0)
    const tick = out_frames.concat(mount_frames).filter(t => t !== 0).reduce(mdc)
    return { frames: Math.max(out_sum / tick, mount_sum / tick), tick }
  }

  function montar () {
    const quadros_outfit = [opc.outfit.idle, normalize(opc.outfit.move, 800)]
    const quadros_mount = [round(opc.montaria.idle, 100), normalize(opc.montaria.move, 800)]
    let add = (opc.outfit.sits ? 2 : 1) * (1 + opc.outfit.addons)
    let offset = (opc.montaria.id !== 0 ? 1 + opc.outfit.addons : 0)
    opc.box = { min_x: 32, min_y: 32, max_x: 32, max_y: 32 }
    opc.sync = [sync_frames(quadros_outfit[0], quadros_mount[0]), sync_frames(quadros_outfit[1], quadros_mount[1])]
    const mCanvasWidth = Math.max(opc.sync[0].frames, opc.sync[1].frames) * opc.sw
    $(mctx.canvas).attr('width', mCanvasWidth) .attr('height', 128)
    mctx.clearRect(0, 0, mCanvasWidth, 128)
    for (let m = 0; m <= 1; m++) {
      for (let j = 0, jm = 0, jo = 0, mount_timer = 0, out_timer = 0; j < opc.sync[m].frames; j++) {
        if (opc.montaria.id !== 0) {
          mctx.drawImage(img_mount, opc.lado * (opc.montaria.colors ? 2 : 1) * opc.sw, opc.sh * (jm + m * quadros_mount[0].length), opc.sw, opc.sh, opc.sw * j, m * opc.sh, opc.sw, opc.sh)
          if (opc.montaria.colors) {
            cctx.globalCompositeOperation = 'copy'
            cctx.drawImage(img_mount, opc.lado * (opc.montaria.colors ? 2 : 1) * opc.sw + opc.sw, opc.sh * (jm + m * quadros_mount[0].length), opc.sw, opc.sh, 0, 0, opc.sw, opc.sh)
            colorir(j, m)
          }
          mount_timer += opc.sync[m].tick
          if (mount_timer >= quadros_mount[m][jm]) {
            mount_timer -= quadros_mount[m][jm]
            jm++
            if (jm >= quadros_mount[m].length) jm = 0
          }
        }
        if (opc.outfit.id > 0) {
          const yo = (jo + m * quadros_outfit[0].length) * add + offset
          out_timer += opc.sync[m].tick
          if (out_timer >= quadros_outfit[m][jo]) {
            out_timer -= quadros_outfit[m][jo]
            jo++
            if (jo >= quadros_outfit[m].length) jo = 0
          }
          mctx.drawImage(img_outfit, opc.lado * (opc.outfit.colors ? 2 : 1) * opc.sw, opc.sh * yo, opc.sw, opc.sh, opc.sw * j, m * opc.sh, opc.sw, opc.sh)
          if (opc.outfit.colors) {
            cctx.globalCompositeOperation = 'copy'
            cctx.drawImage(img_outfit, opc.lado * (opc.outfit.colors ? 2 : 1) * opc.sw + opc.sw, opc.sh * yo, opc.sw, opc.sh, 0, 0, opc.sw, opc.sh)
            colorir(j, m)
          }
          const reverse = opc.outfit.reverse && opc.outfit.reverse[opc.lado]
          if (!reverse) {
            if (opc.addon1) addon(opc.lado, 1, 0, yo, m, j)
            if (opc.addon2) addon(opc.lado, 2, 0, yo, m, j)
          } else {
            if (opc.addon2) addon(opc.lado, 2, 0, yo, m, j)
            if (opc.addon1) addon(opc.lado, 1, 0, yo, m, j)
          }
        }
        if ((opc.animar && m === 1) || ( !opc.animar && m === 0)) medir(j, m)
      }
    }
  }

  function colorir (j, m) {
    const imgData = mctx.getImageData(opc.sw * j, opc.sh * m, opc.sw, opc.sh)
    let corData = cctx.getImageData(0, 0, opc.sw, opc.sh)
    for (let i = 0; i < corData.data.length; i += 4) {
      const r = corData.data[i]
      const g = corData.data[i + 1]
      const b = corData.data[i + 2]
      if ((r >= 240) && (g >= 240) && (b <= 15)) {
        corData.data[i] = cores[opc.h][0]
        corData.data[i + 1] = cores[opc.h][1]
        corData.data[i + 2] = cores[opc.h][2]
      } else if ((r >= 240) && (g <= 15) && (b <= 15)) {
        corData.data[i] = cores[opc.p][0]
        corData.data[i + 1] = cores[opc.p][1]
        corData.data[i + 2] = cores[opc.p][2]
      } else if ((r <= 15) && (g >= 240) && (b <= 15)) {
        corData.data[i] = cores[opc.s][0]
        corData.data[i + 1] = cores[opc.s][1]
        corData.data[i + 2] = cores[opc.s][2]
      } else if ((r <= 15) && (g <= 15) && (b >= 240)) {
        corData.data[i] = cores[opc.d][0]
        corData.data[i + 1] = cores[opc.d][1]
        corData.data[i + 2] = cores[opc.d][2]
      }
    }
    for (let i = 0; i < imgData.data.length; i += 4) {
      if (corData.data[i + 3] !== 0) {
        imgData.data[i] = imgData.data[i] * corData.data[i] / 255
        imgData.data[i + 1] = imgData.data[i + 1] * corData.data[i + 1] / 255
        imgData.data[i + 2] = imgData.data[i + 2] * corData.data[i + 2] / 255
      }
    }
    mctx.putImageData(imgData, opc.sw * j, opc.sh * m, 0, 0, opc.sw, opc.sh)
  }

  function addon (lado, n, x, y, m, j) {
    mctx.globalCompositeOperation = 'source-over'
    mctx.drawImage(img_outfit, lado * (opc.outfit.colors ? 2 : 1) * opc.sw, opc.sh * y + opc.sh * n, opc.sw, opc.sh, opc.sw * j, opc.sh * m, opc.sw, opc.sh)
    cctx.drawImage(img_outfit, lado * (opc.outfit.colors ? 2 : 1) * opc.sw + opc.sw, opc.sh * y + opc.sh * n, opc.sw, opc.sh, 0, 0, opc.sw, opc.sh)
    if (opc.outfit.colors) colorir(j, m)
  }

  function dimensionar () {
    opc.largura = Math.max(64, opc.sw)
    if (opc.nome !== '') {
      opc.largura_nome = 0
      for (let x = 0; x < opc.nome.length; x++) {
        const letra = letras[opc.nome.charCodeAt(x)]
        opc.largura_nome += letra ? letra[0] - (letra[1] || 0) - (letra[2] || 0) : 3
      }
      while (opc.largura_nome + (opc.largura_nome % 2 ? 4 : 3) > opc.largura) {
        opc.largura += 8
      }
    }
    $(ctx.canvas).attr('width', opc.largura)
  }

  function medir (j, m) {
    const imgData = mctx.getImageData(opc.sw * j, opc.sh * m, opc.sw, opc.sh)
    for (let i = 0; i < imgData.data.length; i += 4) {
      if (imgData.data[i + 3] !== 0) {
        const x = (i / 4) % opc.sw
        const y = Math.floor((i / 4) / opc.sw)
        if (x < opc.box.min_x) opc.box.min_x = x
        if (x > opc.box.max_x) opc.box.max_x = x
        if (y < opc.box.min_y) opc.box.min_y = y
        if (y > opc.box.max_y) opc.box.max_y = y
      }
    }
    opc.box.w = opc.box.max_x - opc.box.min_x + 1
    opc.box.h = opc.box.max_y - opc.box.min_y + 1
    opc.box.cx = Math.floor((opc.largura - opc.box.w) / 2)
    const fullH = Math.min(opc.altura, opc.box.h + (opc.nome ? 14 : (opc.hp ? 8 : 0)))
    opc.box.cy = Math.ceil((opc.altura - fullH) / 2) + fullH - opc.box.h
  }

  function desenharNomeHP (ctx) {
    ctx.globalCompositeOperation = 'source-over'
    let j = opc.box.cy - 6 - (opc.hp ? 4 : 0)
    if (j < 9) j = 9
    if (opc.hp) {
      ctx.fillStyle = '#000000'
      ctx.fillRect((opc.largura - 28) / 2, j + 5, 28, 4)
      ctx.fillStyle = '#00B800'
      ctx.fillRect((opc.largura - 26) / 2, j + 6, 26, 2)
    }
    if (opc.nome) {
      let w = Math.round((opc.largura - opc.largura_nome) / 2)
      for (let x = 0; x < opc.nome.length; x++) {
        const letra = opc.nome.charCodeAt(x)
        if (letra !== undefined) {
          ctx.drawImage(img_letras, 16 * ((letra - 32) % 16), 16 * Math.floor((letra - 32) / 16), letras[letra][0], 16, w - (letras[letra][2] || 0), j - 10, letras[letra][0], 16)
          w += letras[letra][0] - (letras[letra][1] || 0) - (letras[letra][2] || 0)
        } else {
          w += 3
        }
      }
    }
  }

  function imprimir () {
    const m = opc.animar ? 1 : 0

    if (com_tela) {
      const $quadro = $('.quadro')
      const $quadros_area = $('.quadros')
      if (opc.quadros) {
        $quadros_area.show()
        $quadro.hide()
        $quadro.parent().hide()
        $tick.toggle(opc.sync[m].tick > 0)
        $tick.text('Animar com intervalo de ' + opc.sync[m].tick + 'ms')
      } else {
        $quadros_area.hide()
      }
    }

    const buf = []
    let k = 0
    let transparentPixel = 0

    for (let c = 0; c < opc.sync[m].frames; c++) {
      ctx.clearRect(0, 0, opc.largura, opc.altura)
      ctx.drawImage(mctx.canvas, opc.sw * c + opc.box.min_x, m * opc.sh + opc.box.min_y, opc.box.w, opc.box.h, opc.box.cx, opc.box.cy, opc.box.w, opc.box.h)
      desenharNomeHP(ctx)

      const frame = ctx.getImageData(0, 0, opc.largura, opc.altura).data
      for (let p = 0; p < opc.largura * opc.altura * 4; p += 4) {
        buf[k++] = frame[p + 3] ? frame[p] : 0xFF
        buf[k++] = frame[p + 3] ? frame[p + 1] : 0x00
        buf[k++] = frame[p + 3] ? frame[p + 2] : 0xFF
        buf[k++] = 0xFF
        if (!transparentPixel && !frame[p + 3]) transparentPixel = ~~(p / 4)
      }

      if (opc.quadros && com_tela) {
        const q = $('#q' + c)
        const qtx = q[0].getContext('2d')
        q.parent().show()
        q.show()
        q.attr('width', opc.largura)
        qtx.drawImage(ctx.canvas, 0, 0, opc.largura, opc.altura, 0, 0, opc.largura, opc.altura)
      }
    }

    const quantize = UPNG.quantize(buf, 256)
    const palette = quantize.plte.map(p => ((p.est.rgba & 0x0000ff) << 16) + (p.est.rgba & 0x00ff00) + ((p.est.rgba & 0xff0000) >> 16))
    if (palette.length >= 256) { console.warn('GIF palette reached 256 colors. Potential loss of colors.') }
    while ((palette.length & palette.length - 1) !== 0) { palette.push(0) }
    const transparent = quantize.inds[transparentPixel]
    palette[transparent] = 0

    const gf = new GifWriter(buf, opc.largura, opc.altura, { loop: 0 })
    for (let f = 0; f < opc.sync[m].frames; f++) {
      gf.addFrame(0, 0, opc.largura, opc.altura, quantize.inds.slice(f * opc.largura * opc.altura, (f + 1) * opc.largura * opc.altura), { palette, transparent, delay: opc.sync[m].tick / 10, disposal: 2 })
    }

    $output.attr('src', 'data:image/gif;base64,' + btoa(String.fromCharCode.apply(null, buf.slice(0, gf.end())))).toggle(true)
    $output.css('image-rendering', opc.aa ? 'revert' : 'pixelated')
  }

  function salvarGif () {
    const templink = document.createElement('a')
    templink.download = (opc.nome || (opc.outfit.id > 0 ? opc.outfit.name : null) || (opc.montaria.id > 0 ? opc.montaria.name : null) || 'outfit') + '.gif'
    templink.href = $output.attr('src')
    templink.click()
  }

  function uploadGif () {
    const input = document.createElement('input');
    input.type = 'file';
    input.onchange = e => {
      const file = e.target.files[0];
      if (file && file.type === 'image/gif') {
        const reader = new FileReader()
        reader.readAsArrayBuffer(file);
        reader.onload = readerEvent => {
          const content = readerEvent.target.result
          const gf = new GifReader(new Uint8Array(content))
          $(gctx.canvas).attr('width', gf.width).attr('height', gf.numFrames() * gf.height)
          const delays = []
          for (let f = 0; f < gf.numFrames(); f++) {
            const frameInfo = gf.frameInfo(f)
            const imgData = gctx.getImageData(0, f * gf.height, gf.width, gf.height)
            gf.decodeAndBlitFrameRGBA(f, imgData.data)
            gctx.putImageData(imgData, 0, f * gf.height, 0, 0, frameInfo.width, frameInfo.height)
            gctx.drawImage(gctx.canvas, 0, f * gf.height, gf.width, gf.height, 0, (f + 1) * gf.height, gf.width, gf.height)
            if (frameInfo.disposal === 2) {
              gctx.clearRect(frameInfo.x,  frameInfo.y + (f + 1) * gf.height, frameInfo.width - frameInfo.x, frameInfo.height - frameInfo.y)
            }
            delays.push(frameInfo.delay * 10)
            img_outfit.src = gctx.canvas.toDataURL()
          }
          opc.outfit = {
            'id': 9999,
            'name': 'Objeto',
            'idle': delays,
            'move': [],
            'addons': 0,
            'colors': false,
            'sits': false,
            'reverse': null,
            'type': 'other',
          }
          opc.sw = gf.width
          opc.sh = gf.height
          atualizar()
        }
      } else {
        alert('Arquivo inválido. Somente .gif são aceitos atualmente!')
      }
    }
    input.click();
  }

  function gerarLink () {
    let link = 'https://www.tibiawiki.com.br/wiki/Outfitter?&'
    if (opc.outfit.id !== 128) { link += 'o=' + opc.outfit.id + '&' }
    if (opc.montaria.id !== 0) { link += 'm=' + opc.montaria.id + '&' }
    if (opc.lado !== 2) { link += 'l=' + opc.lado + '&' }
    if (opc.addon1) { link += 'a1&' }
    if (opc.addon2) { link += 'a2&' }
    if (opc.h !== 78) { link += 'h=' + opc.h + '&' }
    if (opc.p !== 69) { link += 'p=' + opc.p + '&' }
    if (opc.s !== 58) { link += 's=' + opc.s + '&' }
    if (opc.d !== 76) { link += 'd=' + opc.d + '&' }
    if (opc.animar) { link += 'an&' }
    if (opc.quadros) { link += 'q&' }
    if (opc.aa) { link += 'aa&' }
    if (opc.hp) { link += 'hp&' }
    if (opc.nome) { link += 'n=' + encodeURI(opc.nome) + '&' }
    $('.link').val(link.slice(0, -1))
    $('.link').parent().toggle(opc.outfit.id != 9999)
  }

  function resetParametros () {
    opc.outfit = outfits.find(d => d.id === 128)
    opc.montaria = montarias.find(d => d.id === 0)
    opc.lado = 2
    opc.addon1 = false
    opc.addon2 = false
    opc.h = 78
    opc.p = 69
    opc.s = 58
    opc.d = 76
    opc.aa = false
    opc.animar = false
    opc.quadros = false
    opc.hp = false
    opc.nome = ''
    opc.sw = 64
    opc.sh = 64
    opc.largura = 64
    opc.altura = 64
    opc.largura_nome = 0
  }

  function obterParametros () {
    resetParametros()
    const params = new URLSearchParams($output.attr('data-src') || window.location.href)
    if (params.has('o')) { opc.outfit = outfits.find(o => o.id.toString() === params.get('o')) }
    if (params.has('m')) { opc.montaria = montarias.find(m => m.id.toString() === params.get('m')) }
    if (params.has('a1')) { opc.addon1 = true }
    if (params.has('a2')) { opc.addon2 = true }
    if (params.has('l')) { opc.l = params.get('l') }
    if (params.has('h')) { opc.h = params.get('h') }
    if (params.has('p')) { opc.p = params.get('p') }
    if (params.has('s')) { opc.s = params.get('s') }
    if (params.has('d')) { opc.d = params.get('d') }
    if (params.has('aa')) { opc.aa = true }
    if (params.has('an')) { opc.animar = true }
    if (params.has('q')) { opc.quadros = true }
    if (params.has('hp')) { opc.hp = true }
    if (params.has('n')) { opc.nome = decodeURI(params.get('n')) }
  }

  function preencherListas () {
    $form_outfits.empty()
    let dif = true
    for (const outfit of outfits.filter(o => o.type === 'outfit')) {
      $form_outfits.append('<div class="janela_opcao_out' + (dif ? '_dif' : '') + '"><input id="o' + outfit.id + '" type="radio" name="outfit" value="' + outfit.id + '"><label for="o' + outfit.id + '">' + outfit.name + '</label></div>')
      dif = !dif
    }
    $form_outros.empty()
    dif = true
    for (const outfit of outfits.filter(o => o.type === 'other')) {
      $form_outros.append('<div class="janela_opcao_out' + (dif ? '_dif' : '') + '"><input id="o' + outfit.id + '" type="radio" name="outfit" value="' + outfit.id + '"><label for="o' + outfit.id + '">' + outfit.name + '</label></div>')
      dif = !dif
    }
    $form_montarias.empty()
    dif = true
    for (const montaria of montarias) {
      $form_montarias.append('<div class="janela_opcao_mount' + (dif ? '_dif' : '') + '"><input id="m' + montaria.id + '" type="radio" name="montaria" value="' + montaria.id + '"><label for="m' + montaria.id + '">' + montaria.name + '</label></div>')
      dif = !dif
    }
  }

  /* Eventos */

  if (!com_tela) return

  $form_outfits.on('change', function () {
    $form_outros.find('input[name=outfit]:checked').prop('checked', false)
    opc.outfit = outfits.find(o => o.id.toString() === $('input[name=outfit]:checked').val())
    atualizar()
  })

  $form_outros.on('change', function () {
    $form_outfits.find('input[name=outfit]:checked').prop('checked', false)
    opc.outfit = outfits.find(o => o.id.toString() === $('input[name=outfit]:checked').val())
    atualizar()
  })

  $form_montarias.on('change', function () {
    opc.montaria = montarias.find(m => m.id.toString() === $('input[name=montaria]:checked').val())
    atualizar()
  })

  $('#botao_gif').on('click', function () {
    salvarGif()
  })

  $('#botao_up').on('click', function () {
    uploadGif()
  })

  $('#out_e').on('click', function () {
    const idx = outfits.indexOf(opc.outfit)
    if (idx !== 0) opc.outfit = outfits.at(idx - 1)
    else opc.outfit = outfits[outfits.length - 1]
    $('input[value="' + opc.outfit.id + '"]').prop('checked', true)
    atualizar()
  })

  $('#out_d').on('click', function () {
    const idx = outfits.indexOf(opc.outfit)
    if (idx !== outfits.length - 1) opc.outfit = outfits.at(idx + 1)
    else opc.outfit = outfits[0]
    $('input[value="' + opc.outfit.id + '"]').prop('checked', true)
    atualizar()
  })

  $('#mount_e').on('click', function () {
    const idx = montarias.indexOf(opc.montaria)
    if (idx !== 0) opc.montaria = montarias.at(idx - 1)
    else opc.montaria = montarias[montarias.length - 1]
    $('input[value="' + opc.montaria.id + '"]').prop('checked', true)
    atualizar()
  })

  $('#mount_d').on('click', function () {
    const idx = montarias.indexOf(opc.montaria)
    if (idx !== montarias.length - 1) opc.montaria = montarias.at(idx + 1)
    else opc.montaria = montarias[0]
    $('input[value="' + opc.montaria.id + '"]').prop('checked', true)
    atualizar()
  })

  $('.seta_cima').on('click', function () {
    opc.lado = 0
    atualizar()
  })

  $('.seta_direita').on('click', function () {
    opc.lado = 1
    atualizar()
  })

  $('.seta_baixo').on('click', function () {
    opc.lado = 2
    atualizar()
  })

  $('.seta_esquerda').on('click', function () {
    opc.lado = 3
    atualizar()
  })

  $addon_1.on('click', function () {
    opc.addon1 = !opc.addon1
    atualizar()
  })

  $addon_2.on('click', function () {
    opc.addon2 = !opc.addon2
    atualizar()
  })

  $aa.on('click', function () {
    opc.aa = $aa.prop('checked')
    atualizar()
  })

  $animar.on('click', function () {
    opc.animar = $animar.prop('checked')
    atualizar()
  })

  $quadros.on('click', function () {
    opc.quadros = $quadros.prop('checked')
    atualizar()
  })

  $vida.on('click', function () {
    opc.hp = $vida.prop('checked')
    atualizar()
  })

  $nome_char.on('keyup', function () {
    opc.nome = $('.nome_char').val()
    atualizar()
  })

  /* Seleção de Cores */

  function tabelaCores () {
    let cont = 0
    const $quadrado_cor = $('.tabela_cores').children('tbody').children('tr').children('td')

    $quadrado_cor.each(function () {
      $(this).attr('id', 'c' + cont)
      $(this).css('background', 'rgb(' + cores[cont][0] + ', ' + cores[cont][1] + ', ' + cores[cont][2] + ')')
      cont++
    })

    $quadrado_cor.on('click', function () {
      $quadrado_cor.removeClass('cor_selecionada')
      $(this).addClass('cor_selecionada')
      opc[$('.selecionado').attr('id')[0]] = parseInt($(this).attr('id').substring(1))
      atualizar()
    })

    $('.seletores').on('click', function () {
      $('.selecionado').removeClass('selecionado')
      $(this).addClass('selecionado')
      $quadrado_cor.removeClass('cor_selecionada')
      $('#c' + opc[$(this).attr('id')[0]]).addClass('cor_selecionada')
    })

    $('#head').click()
  }

  /* Artworks */

  function artworks () {
    const $artwork_e = $('#artwork_e')
    const $artwork_d = $('#artwork_d')
    const artwork_A = [['BlackStag', 75, 0, 230], ['ConqueringLion', 85, 7, 280], ['Scorpion', 80, 0, 250], ['RiftRunner', 95, 0, 290]][RandomInt(0, 3)]
    const artwork_B = [['ArmoredWarhorse', 70, 0, 240], ['LadyBug', 70, -5, 240], ['Walker', 70, -5, 230]][RandomInt(0, 2)]
    const artwork_C = [['Dragonling', 85, 0, 300], ['Dragonling2', 90, 0, 300], ['Waccoon', 105, -15, 300]][RandomInt(0, 2)]
    const artwork_D = [['BatCat', 105, -20, 300], ['CreepingHand', 80, -5, 250], ['PanzerBird', 72, 0, 230], ['MantaRay', 105, -15, 300]][RandomInt(0, 3)]
    $artwork_e.append('<img class="artwork" id="artwork_A" alt="' + artwork_A[0] + '" style="width: ' + artwork_A[1] + '%; max-width: ' + artwork_A[3] + 'px;   top: ' + artwork_A[2] + 'px;" src="' + assetsBaseURL + 'Outfiter_Artwork_' + artwork_A[0] + '.png">')
    $artwork_d.append('<img class="artwork" id="artwork_B" alt="' + artwork_B[0] + '" style="width: ' + artwork_B[1] + '%; max-width: ' + artwork_B[3] + 'px;   top: ' + artwork_B[2] + 'px;" src="' + assetsBaseURL + 'Outfiter_Artwork_' + artwork_B[0] + '.png">')
    $artwork_e.append('<img class="artwork" id="artwork_C" alt="' + artwork_C[0] + '" style="width: ' + artwork_C[1] + '%; max-width: ' + artwork_C[3] + 'px; right: ' + artwork_C[2] + 'px;" src="' + assetsBaseURL + 'Outfiter_Artwork_' + artwork_C[0] + '.png">')
    $artwork_d.append('<img class="artwork" id="artwork_D" alt="' + artwork_D[0] + '" style="width: ' + artwork_D[1] + '%; max-width: ' + artwork_D[3] + 'px;  left: ' + artwork_D[2] + 'px;" src="' + assetsBaseURL + 'Outfiter_Artwork_' + artwork_D[0] + '.png">')

    function RandomInt (min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min
    }
  }
}
MediaWiki:Outfitter.js: mudanças entre as edições

Edição das 03h02min de 27 de julho de 2022 (ver código-fonte)

Edição atual tal como às 15h23min de 12 de março de 2024 (ver código-fonte)

Edição atual tal como às 15h23min de 12 de março de 2024

Menu de navegação

MediaWiki:Outfitter.js: mudanças entre as edições

Edição das 03h02min de 27 de julho de 2022 (ver código-fonte)

Edição atual tal como às 15h23min de 12 de março de 2024 (ver código-fonte)

Edição atual tal como às 15h23min de 12 de março de 2024

Menu de navegação

Pesquisa
