|
|
|
||||||||||||||||||||||||
MediaWiki:Outfitter.js: mudanças entre as edições
Ir para navegação
Ir para pesquisar
| Linha 1: | Linha 1: | ||
if (typeof mw !== 'undefined') { | |||
mw.loader.load('/index.php?title=MediaWiki:Outfitter.css&action=raw&ctype=text/css', 'text/css') | |||
mw.loader.load('/index.php?title=MediaWiki:OutfitterDados.js&action=raw&ctype=text/javascript') | |||
mw.loader.load('/index.php?title=MediaWiki:GIFEncoder.js&action=raw&ctype=text/javascript') | |||
$.ajax({ url: '/index.php?title=MediaWiki:Outfitter.html&action=raw', success: ready }) | |||
} | |||
function | function ready(res) { | ||
if ( | if (typeof dados !== 'undefined' && typeof GIFEncoder !== 'undefined' ) { | ||
$('#carregando_outfitter').hide() | |||
$('.outfitter').append(res.slice(5, -6)) | |||
outfitter() | |||
} | |||
else setTimeout(() => ready(res), 300) | |||
} | } | ||
const | function outfitter() { | ||
const | /* Elementos */ | ||
const $carregando = $('.carregando') | |||
const $tela = $('#tela') | |||
const $tela_cor = $('#tela_cor') | |||
const $montagem = $('#montagem') | |||
const $outfit_nome = $('.outfit_nome') | |||
const $montaria_nome = $('.montaria_nome') | |||
const $form_outfits = $('#form_outfits') | |||
const $form_montarias = $('#form_montarias') | |||
const $form_outros = $('#form_outros') | |||
const $link = $('.link') | |||
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 $quadros_area = $('.quadros') | |||
const $quadro = $('.quadro') | |||
const $tick = $('#tick') | |||
const | const c = $tela[0] | ||
const ctx = c.getContext('2d') | |||
const ccor = $tela_cor[0] | |||
const cctx = ccor.getContext('2d') | |||
const cm = $montagem[0] | |||
const mctx = cm.getContext('2d') | |||
const img_out = $(document.createElement('img'))[0] | |||
const img_out = $(document.createElement('img'))[0] | const img_mount = $(document.createElement('img'))[0] | ||
const img_mount = $(document.createElement('img'))[0] | const img_letras = $(document.createElement('img'))[0] | ||
let loop | |||
let imgs_carregando = -1 | |||
img_out.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 | |||
} | } | ||
const opc = { | |||
outfit: outfits.find(d => d.id === 128), | |||
montaria: montarias.find(d => d.id === 0), | |||
lado: 2, | |||
addon1: false, | |||
addon2: false, | |||
h: 78, | |||
quadros | p: 69, | ||
s: 58, | |||
d: 76, | |||
aa: false, | |||
animar: false, | |||
quadros: false, | |||
hp: false, | |||
nome: '', | |||
largura: 64, | |||
largura_nome: 0, | |||
} | } | ||
function | /* Init */ | ||
tabela_cor() | |||
artworks() | |||
janelas() | |||
obterParametros() | |||
atualizar() | |||
/* Funções */ | |||
function atualizar () { | |||
clearInterval(loop) | |||
$carregando.show() | |||
ctx.clearRect(0, 0, 128, 128) | |||
excecoes() | |||
preencherNomeSetas() | |||
buscarArquivo() | |||
gerarlink() | |||
} | } | ||
if ( | |||
function carregado () { | |||
imgs_carregando-- | |||
if (imgs_carregando <= 0) { | |||
$carregando.hide() | |||
dimensionar() | |||
montar() | |||
imprimir() | |||
quadros() | |||
} | |||
} | } | ||
if (opc.outfit.idle.length === 0) { | |||
function excecoes () { | |||
if (opc.outfit.addons === 0) { | |||
opc.addon1 = false | |||
opc.addon2 = false | |||
$addon_1.prop('checked', false) | |||
$addon_2.prop('checked', false) | |||
} | |||
if (opc.outfit.move.length === 0) { | |||
opc.animar = false | |||
$animar.prop('checked', false) | |||
} | |||
if (opc.outfit.idle.length === 0) { | |||
opc.animar = true | |||
$animar.prop('checked', true) | |||
} | |||
if (!opc.outfit.sits) { | |||
opc.montaria = montarias[0] | |||
} | |||
$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) | |||
} | } | ||
function preencherNomeSetas () { | function preencherNomeSetas () { | ||
$outfit_nome.text(opc.outfit.name) | |||
$montaria_nome.text(opc.montaria.name) | |||
const selected_out = $('input[value="' + opc.outfit.id + '"]') | |||
selected_out.prop('checked', true) | |||
const selected_mount = $('input[value="' + opc.montaria.id + '"]') | |||
selected_mount.prop('checked', true) | |||
} | } | ||
function buscarArquivo () { | 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_out.setAttribute('src', assetsBaseURL + 'Outfitter_' + opc.outfit.id + '.png') | |||
} | |||
img_letras.setAttribute('src', assetsBaseURL + 'Outfitter_Letras.png') | |||
} | } else carregado() | ||
} | |||
function mdc (a, b) { return a ? mdc(b % a, a) : b } | function mdc (a, b) { return a ? mdc(b % a, a) : b } | ||
function normalize (array, sum) { | 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) { | function round (array, value) { | ||
return array.map(i => Math.round(Math.round(i / value) * value)) | |||
} | } | ||
function sync_frames (out_frames, mount_frames) { | 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 () { | 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])] | |||
mctx.clearRect(0, 0, 2560, 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 ? 128 : 64), 64 * (jm + m * quadros_mount[0].length), 64, 64, 64 * j, m * 64, 64, 64) | |||
if (opc.montaria.colors) { | |||
cctx.globalCompositeOperation = 'copy' | |||
cctx.drawImage(img_mount, opc.lado * (opc.montaria.colors ? 128 : 64) + 64, 64 * jm, 64, 64, 0, 0, 64, 64) | |||
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 !== -1) { | |||
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_out, opc.lado * (opc.outfit.colors ? 128 : 64), 64 * yo, 64, 64, 64 * j, m * 64, 64, 64) | |||
if (opc.outfit.colors) { | |||
cctx.globalCompositeOperation = 'copy' | |||
cctx.drawImage(img_out, opc.lado * (opc.outfit.colors ? 128 : 64) + 64, 64 * yo, 64, 64, 0, 0, 64, 64) | |||
colorir(j, m) | |||
} | |||
if (opc.addon1) addon(opc.lado, 1, 0, yo, m, j) | |||
if (opc.addon2) addon(opc.lado, 2, 0, yo, m, j) | |||
} | } | ||
medir(j, m) | |||
} | } | ||
} | } | ||
} | } | ||
function colorir (j, m) { | function colorir (j, m) { | ||
const imgData = mctx.getImageData(64 * j, 64 * m, 64, 64) | |||
let corData = cctx.getImageData(0, 0, 64, 64) | |||
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, 64 * j, 64 * m, 0, 0, 64, 64) | |||
} | } | ||
function addon (lado, n, x, y, m, j) { | function addon (lado, n, x, y, m, j) { | ||
mctx.globalCompositeOperation = 'source-over' | |||
mctx.drawImage(img_out, lado * 128, 64 * y + 64 * n, 64, 64, 64 * j, 64 * m, 64, 64) | |||
cctx.drawImage(img_out, lado * 128 + 64, 64 * y + 64 * n, 64, 64, 0, 0, 64, 64) | |||
colorir(j, m) | |||
} | } | ||
function dimensionar () { | function dimensionar () { | ||
opc.largura = 64 | |||
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 | |||
} | |||
} | } | ||
$tela.attr('width', opc.largura * 2) | |||
} | } | ||
function medir (j, m) { | function medir (j, m) { | ||
const imgData = mctx.getImageData(64 * j, 64 * m, 64, 64) | |||
for (let i = 0; i < imgData.data.length; i += 4) { | |||
if (imgData.data[i + 3] !== 0) { | |||
const x = (i / 4) % 64 | |||
const y = Math.floor((i / 4) / 64) | |||
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(64, opc.box.h + (opc.nome ? 14 : (opc.hp ? 8 : 0)), 64) | |||
opc.box.cy = Math.ceil((64 - fullH) / 2) + fullH - opc.box.h | |||
} | } | ||
function imprimir () { | function imprimir () { | ||
ctx.globalCompositeOperation = 'destination-over' | |||
ctx.imageSmoothingEnabled = opc.aa | |||
ctx.mozImageSmoothingEnabled = opc.aa | |||
ctx.oImageSmoothingEnabled = opc.aa | |||
ctx.webkitImageSmoothingEnabled = opc.aa | |||
ctx.scale(2, 2) | |||
animar(opc.animar ? 1 : 0, 0) | |||
} | } | ||
function animar (m, f) { | function animar (m, f) { | ||
ctx.clearRect(0, 0, 128, 128) | |||
ctx.drawImage(cm, 64 * f + opc.box.min_x, m * 64 + opc.box.min_y, opc.box.w, opc.box.h, opc.box.cx, opc.box.cy, opc.box.w, opc.box.h) | |||
desenharNomeHP(ctx) | |||
if (f < opc.sync[m].frames - 1) f += 1 | |||
else f = 0 | |||
loop = setTimeout(() => animar(m, f), opc.sync[m].tick) | |||
} | } | ||
function desenharNomeHP (ctx) { | 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 - 27) / 2, j + 5, 27, 4) | |||
ctx.fillStyle = '#00B800' | |||
ctx.fillRect((opc.largura - 25) / 2, j + 6, 25, 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 quadros () { | |||
if (opc.quadros) { | |||
const | const m = opc.animar ? 1 : 0 | ||
$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') | |||
gerarQuadros(m,true) | |||
} else { | |||
$quadros_area.hide() | |||
} | } | ||
} | } | ||
function | function gerarQuadros(m, show) { | ||
for (let c = 0; c < opc.sync[m].frames; c++) { | for (let c = 0; c < opc.sync[m].frames; c++) { | ||
const q = $('#q' + c) | const q = $('#q' + c) | ||
const qtx = q[0].getContext('2d') | const qtx = q[0].getContext('2d') | ||
q.parent().show() | if (show) { | ||
q.parent().show() | |||
q.show() | |||
qtx. | q.attr('width', opc.largura) | ||
} | |||
qtx.fillStyle = '#FF00FF00' | |||
qtx.fillRect(0, 0, q[0].width, q[0].height) | |||
qtx.drawImage(cm, 64 * c + opc.box.min_x, m * 64 + opc.box.min_y, opc.box.w, opc.box.h, opc.box.cx, opc.box.cy, opc.box.w, opc.box.h) | qtx.drawImage(cm, 64 * c + opc.box.min_x, m * 64 + opc.box.min_y, opc.box.w, opc.box.h, opc.box.cx, opc.box.cy, opc.box.w, opc.box.h) | ||
desenharNomeHP(qtx) | desenharNomeHP(qtx) | ||
} | } | ||
} | } | ||
} | function gerarGif() { | ||
const m = opc.animar ? 1 : 0 | |||
gerarQuadros(m, false) | |||
const encoder = new GIFEncoder(opc.largura, 64) | |||
encoder.start(); | |||
encoder.setRepeat(0); | |||
encoder.setDelay(opc.sync[m].tick); | |||
encoder.setTransparent(0xFF00FF) | |||
encoder.setQuality(1) | |||
for (let c = 0; c < opc.sync[m].frames; c++) { | |||
encoder.addFrame($('#q' + c)[0].getContext('2d')) | |||
} | |||
encoder.finish(); | |||
encoder.download((opc.nome || 'outfit') + '.gif'); | |||
} | |||
function gerarlink () { | 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 += '1&' } | |||
if (opc.addon2) { link += '2&' } | |||
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)) | |||
} | |||
} | |||
function obterParametros () { | function obterParametros () { | ||
const params = new URLSearchParams(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('1')) { | |||
opc.addon1 = true | |||
$addon_1.prop('checked', true) | |||
} | |||
if (params.has('2')) { | |||
opc.addon2 = true | |||
$addon_2.prop('checked', 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 | |||
$aa.prop('checked', true) | |||
} | |||
if (params.has('an')) { | |||
opc.animar = true | |||
$animar.prop('checked', true) | |||
} | |||
if (params.has('q')) { | |||
opc.quadros = true | |||
$quadros.prop('checked', true) | |||
} | |||
if (params.has('hp')) { | |||
opc.hp = true | |||
$vida.prop('checked', true) | |||
$ | } | ||
if (params.has('n')) { | |||
opc.nome = decodeURI(params.get('n')) | |||
$nome_char.val(opc.nome) | |||
} | |||
} | } | ||
function janelas () { | function janelas () { | ||
$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 | 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 */ | /* Eventos */ | ||
$ | $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 () { | ||
gerarGif() | |||
}) | |||
}) | |||
$('#out_e').on('click', function () { | $('#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 () { | $('#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 () { | $('#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 () { | $('#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 tabela_cor () { | |||
let cont = 0 | |||
const $quadrado_cor = $('.tabela_cores').children('tbody').children('tr').children('td') | |||
function | $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 */ | /* Artworks */ | ||
function 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 | |||
} | |||
} | } | ||
} | } | ||
Edição das 02h27min de 28 de julho de 2022
if (typeof mw !== 'undefined') {
mw.loader.load('/index.php?title=MediaWiki:Outfitter.css&action=raw&ctype=text/css', 'text/css')
mw.loader.load('/index.php?title=MediaWiki:OutfitterDados.js&action=raw&ctype=text/javascript')
mw.loader.load('/index.php?title=MediaWiki:GIFEncoder.js&action=raw&ctype=text/javascript')
$.ajax({ url: '/index.php?title=MediaWiki:Outfitter.html&action=raw', success: ready })
}
function ready(res) {
if (typeof dados !== 'undefined' && typeof GIFEncoder !== 'undefined' ) {
$('#carregando_outfitter').hide()
$('.outfitter').append(res.slice(5, -6))
outfitter()
}
else setTimeout(() => ready(res), 300)
}
function outfitter() {
/* Elementos */
const $carregando = $('.carregando')
const $tela = $('#tela')
const $tela_cor = $('#tela_cor')
const $montagem = $('#montagem')
const $outfit_nome = $('.outfit_nome')
const $montaria_nome = $('.montaria_nome')
const $form_outfits = $('#form_outfits')
const $form_montarias = $('#form_montarias')
const $form_outros = $('#form_outros')
const $link = $('.link')
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 $quadros_area = $('.quadros')
const $quadro = $('.quadro')
const $tick = $('#tick')
const c = $tela[0]
const ctx = c.getContext('2d')
const ccor = $tela_cor[0]
const cctx = ccor.getContext('2d')
const cm = $montagem[0]
const mctx = cm.getContext('2d')
const img_out = $(document.createElement('img'))[0]
const img_mount = $(document.createElement('img'))[0]
const img_letras = $(document.createElement('img'))[0]
let loop
let imgs_carregando = -1
img_out.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
}
const opc = {
outfit: outfits.find(d => d.id === 128),
montaria: montarias.find(d => d.id === 0),
lado: 2,
addon1: false,
addon2: false,
h: 78,
p: 69,
s: 58,
d: 76,
aa: false,
animar: false,
quadros: false,
hp: false,
nome: '',
largura: 64,
largura_nome: 0,
}
/* Init */
tabela_cor()
artworks()
janelas()
obterParametros()
atualizar()
/* Funções */
function atualizar () {
clearInterval(loop)
$carregando.show()
ctx.clearRect(0, 0, 128, 128)
excecoes()
preencherNomeSetas()
buscarArquivo()
gerarlink()
}
function carregado () {
imgs_carregando--
if (imgs_carregando <= 0) {
$carregando.hide()
dimensionar()
montar()
imprimir()
quadros()
}
}
function excecoes () {
if (opc.outfit.addons === 0) {
opc.addon1 = false
opc.addon2 = false
$addon_1.prop('checked', false)
$addon_2.prop('checked', false)
}
if (opc.outfit.move.length === 0) {
opc.animar = false
$animar.prop('checked', false)
}
if (opc.outfit.idle.length === 0) {
opc.animar = true
$animar.prop('checked', true)
}
if (!opc.outfit.sits) {
opc.montaria = montarias[0]
}
$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)
}
function preencherNomeSetas () {
$outfit_nome.text(opc.outfit.name)
$montaria_nome.text(opc.montaria.name)
const selected_out = $('input[value="' + opc.outfit.id + '"]')
selected_out.prop('checked', true)
const selected_mount = $('input[value="' + opc.montaria.id + '"]')
selected_mount.prop('checked', true)
}
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_out.setAttribute('src', assetsBaseURL + 'Outfitter_' + opc.outfit.id + '.png')
}
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])]
mctx.clearRect(0, 0, 2560, 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 ? 128 : 64), 64 * (jm + m * quadros_mount[0].length), 64, 64, 64 * j, m * 64, 64, 64)
if (opc.montaria.colors) {
cctx.globalCompositeOperation = 'copy'
cctx.drawImage(img_mount, opc.lado * (opc.montaria.colors ? 128 : 64) + 64, 64 * jm, 64, 64, 0, 0, 64, 64)
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 !== -1) {
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_out, opc.lado * (opc.outfit.colors ? 128 : 64), 64 * yo, 64, 64, 64 * j, m * 64, 64, 64)
if (opc.outfit.colors) {
cctx.globalCompositeOperation = 'copy'
cctx.drawImage(img_out, opc.lado * (opc.outfit.colors ? 128 : 64) + 64, 64 * yo, 64, 64, 0, 0, 64, 64)
colorir(j, m)
}
if (opc.addon1) addon(opc.lado, 1, 0, yo, m, j)
if (opc.addon2) addon(opc.lado, 2, 0, yo, m, j)
}
medir(j, m)
}
}
}
function colorir (j, m) {
const imgData = mctx.getImageData(64 * j, 64 * m, 64, 64)
let corData = cctx.getImageData(0, 0, 64, 64)
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, 64 * j, 64 * m, 0, 0, 64, 64)
}
function addon (lado, n, x, y, m, j) {
mctx.globalCompositeOperation = 'source-over'
mctx.drawImage(img_out, lado * 128, 64 * y + 64 * n, 64, 64, 64 * j, 64 * m, 64, 64)
cctx.drawImage(img_out, lado * 128 + 64, 64 * y + 64 * n, 64, 64, 0, 0, 64, 64)
colorir(j, m)
}
function dimensionar () {
opc.largura = 64
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
}
}
$tela.attr('width', opc.largura * 2)
}
function medir (j, m) {
const imgData = mctx.getImageData(64 * j, 64 * m, 64, 64)
for (let i = 0; i < imgData.data.length; i += 4) {
if (imgData.data[i + 3] !== 0) {
const x = (i / 4) % 64
const y = Math.floor((i / 4) / 64)
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(64, opc.box.h + (opc.nome ? 14 : (opc.hp ? 8 : 0)), 64)
opc.box.cy = Math.ceil((64 - fullH) / 2) + fullH - opc.box.h
}
function imprimir () {
ctx.globalCompositeOperation = 'destination-over'
ctx.imageSmoothingEnabled = opc.aa
ctx.mozImageSmoothingEnabled = opc.aa
ctx.oImageSmoothingEnabled = opc.aa
ctx.webkitImageSmoothingEnabled = opc.aa
ctx.scale(2, 2)
animar(opc.animar ? 1 : 0, 0)
}
function animar (m, f) {
ctx.clearRect(0, 0, 128, 128)
ctx.drawImage(cm, 64 * f + opc.box.min_x, m * 64 + opc.box.min_y, opc.box.w, opc.box.h, opc.box.cx, opc.box.cy, opc.box.w, opc.box.h)
desenharNomeHP(ctx)
if (f < opc.sync[m].frames - 1) f += 1
else f = 0
loop = setTimeout(() => animar(m, f), opc.sync[m].tick)
}
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 - 27) / 2, j + 5, 27, 4)
ctx.fillStyle = '#00B800'
ctx.fillRect((opc.largura - 25) / 2, j + 6, 25, 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 quadros () {
if (opc.quadros) {
const m = opc.animar ? 1 : 0
$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')
gerarQuadros(m,true)
} else {
$quadros_area.hide()
}
}
function gerarQuadros(m, show) {
for (let c = 0; c < opc.sync[m].frames; c++) {
const q = $('#q' + c)
const qtx = q[0].getContext('2d')
if (show) {
q.parent().show()
q.show()
q.attr('width', opc.largura)
}
qtx.fillStyle = '#FF00FF00'
qtx.fillRect(0, 0, q[0].width, q[0].height)
qtx.drawImage(cm, 64 * c + opc.box.min_x, m * 64 + opc.box.min_y, opc.box.w, opc.box.h, opc.box.cx, opc.box.cy, opc.box.w, opc.box.h)
desenharNomeHP(qtx)
}
}
function gerarGif() {
const m = opc.animar ? 1 : 0
gerarQuadros(m, false)
const encoder = new GIFEncoder(opc.largura, 64)
encoder.start();
encoder.setRepeat(0);
encoder.setDelay(opc.sync[m].tick);
encoder.setTransparent(0xFF00FF)
encoder.setQuality(1)
for (let c = 0; c < opc.sync[m].frames; c++) {
encoder.addFrame($('#q' + c)[0].getContext('2d'))
}
encoder.finish();
encoder.download((opc.nome || 'outfit') + '.gif');
}
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 += '1&' }
if (opc.addon2) { link += '2&' }
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))
}
function obterParametros () {
const params = new URLSearchParams(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('1')) {
opc.addon1 = true
$addon_1.prop('checked', true)
}
if (params.has('2')) {
opc.addon2 = true
$addon_2.prop('checked', 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
$aa.prop('checked', true)
}
if (params.has('an')) {
opc.animar = true
$animar.prop('checked', true)
}
if (params.has('q')) {
opc.quadros = true
$quadros.prop('checked', true)
}
if (params.has('hp')) {
opc.hp = true
$vida.prop('checked', true)
}
if (params.has('n')) {
opc.nome = decodeURI(params.get('n'))
$nome_char.val(opc.nome)
}
}
function janelas () {
$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 */
$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 () {
gerarGif()
})
$('#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 tabela_cor () {
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
}
}
}