Skip to content

Instantly share code, notes, and snippets.

@nabbynz

nabbynz/Tile_Swapper.user.js

Last active August 18, 2018 23:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nabbynz/cd086ebdc0ee3422ff1377753ef9a68c to your computer and use it in GitHub Desktop.
Save nabbynz/cd086ebdc0ee3422ff1377753ef9a68c to your computer and use it in GitHub Desktop.
Download ZIP
TagPro Tile Swapper
Raw
Tile_Swapper.user.js
// ==UserScript==
// @name Tile Swapper
// @description Use tiles from any texture pack
// @version 0.0.1
// @include http://tagpro-*.koalabeast.com:*
// @include http://tagpro-*.koalabeast.com/textures/
// @updateURL https://gist.github.com/nabbynz/cd086ebdc0ee3422ff1377753ef9a68c/raw/Tile_Swapper.user.js
// @downloadURL https://gist.github.com/nabbynz/cd086ebdc0ee3422ff1377753ef9a68c/raw/Tile_Swapper.user.js
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_deleteValue
// @grant GM_addStyle
// @author nabby
// ==/UserScript==
console.log('START: ' + GM_info.script.name + ' (v' + GM_info.script.version + ' by ' + GM_info.script.author + ')');
tagpro.ready(function() {
var defaultOptions = {
'2': { name:'', display:'Floor', saveto:'2', x:520, y:160, order:1, link:'' },
//'1': { name:'', display:'Walls', saveto:'1', x:0, y:0, order:2, link:'' },
'redball': { name:'', display:'Red Ball', saveto:'redball', x:560, y:0, order:2, link:'' },
'blueball': { name:'', display:'Blue Ball', saveto:'blueball', x:600, y:0, order:3, link:'' },
'11': { name:'', display:'TeamTile (Red)', saveto:'11', x:560, y:160, order:4, link:'' },
'12': { name:'', display:'TeamTile (Blue)', saveto:'12', x:600, y:160, order:5, link:'' },
'23': { name:'', display:'TeamTile (Yellow)', saveto:'23', x:520, y:200, order:6, link:'' },
'17': { name:'', display:'Endzone (Red)', saveto:'17', x:560, y:200, order:7, link:'' },
'18': { name:'', display:'Endzone (Blue)', saveto:'18', x:600, y:200, order:8, link:'' },
'9': { name:'', display:'Gate (Neutral)', saveto:'9', x:480, y:120, order:9, link:'' },
'9.1': { name:'', display:'Gate (Green)', saveto:'9.1', x:520, y:120, order:10, link:'' },
'9.2': { name:'', display:'Gate (Red)', saveto:'9.2', x:560, y:120, order:11, link:'' },
'9.3': { name:'', display:'Gate (Blue)', saveto:'9.3', x:600, y:120, order:12, link:'' },
'3': { name:'', display:'Flag (Red)', saveto:'3', x:560, y:40, order:13, link:'' },
'3.1': { name:'', display:'Red Flag Taken', saveto:'3.1', x:560, y:80, order:14, link:'3' },
'redflag': { name:'', display:'Red Flag Taken', saveto:'redflag', x:560, y:40, order:14, link:'3' },
'4': { name:'', display:'Flag (Blue)', saveto:'4', x:600, y:40, order:15, link:'' },
'4.1': { name:'', display:'Blue Flag Taken', saveto:'4.1', x:600, y:80, order:16, link:'4' },
'blueflag': { name:'', display:'Blue Flag Taken', saveto:'blueflag', x:600, y:40, order:16, link:'4' },
'16': { name:'', display:'Flag (Yellow)', saveto:'16', x:520, y:40, order:17, link:'' },
'16.1': { name:'', display:'Yellow Flag Taken', saveto:'16.1', x:520, y:80, order:18, link:'16' },
'yellowflag': { name:'', display:'Yellow Flag Taken', saveto:'yellowflag', x:520, y:40, order:18, link:'16' },
'7': { name:'', display:'Spike', saveto:'7', x:480, y:0, order:19, link:'' },
'10': { name:'', display:'Bomb', saveto:'10', x:480, y:40, order:20, link:'' },
'8': { name:'', display:'Button', saveto:'8', x:520, y:240, order:21, link:'' },
'10.1': { name:'', display:'Bomb (Inactive)', saveto:'10.1', x:480, y:80, order:22, link:'10' },
'6': { name:'', display:'Empty PUP', saveto:'6', x:480, y:320, order:23, link:'' },
'6.1': { name:'', display:'Juke Juice', saveto:'6.1', x:480, y:160, order:24, link:'' },
'6.11': { name:'', display:'Juke Juice - Respawn', saveto:'6.11', x:480, y:160, order:25, link:'6.1' },
'grip': { name:'', display:'Juke Juice - Icon', saveto:'grip', x:480, y:160, order:26, link:'6.1' },
'6.2': { name:'', display:'Rolling Bomb', saveto:'6.2', x:480, y:200, order:27, link:'' },
'6.21': { name:'', display:'Rolling Bomb - Respawn', saveto:'6.21', x:480, y:200, order:28, link:'6.2' },
'6.3': { name:'', display:'TagPro', saveto:'6.3', x:480, y:240, order:29, link:'' },
'6.31': { name:'', display:'TagPro - Respawn', saveto:'6.31', x:480, y:240, order:30, link:'6.3' },
'6.4': { name:'', display:'Max Speed', saveto:'6.4', x:480, y:280, order:31, link:'' },
'6.41': { name:'', display:'Max Speed - Respawn', saveto:'6.41', x:480, y:280, order:32, link:'6.4' },
};
var altTextures = {
electric88: { display:'88 Electric', author:'Rob Flagetti', url:'https://i.imgur.com/PzZ5u57.png' },
aperturelabs: { display:'Aperture Laboratories', author:'SuperSans', url:'https://i.imgur.com/Fg9GIN2.png' },
briochelight: { display:'Brioche Light', author:'Brioche', url:'https://i.imgur.com/47ulK1R.png' },
derezzed: { display:'Derezzed', author:'-salt-', url:'https://i.imgur.com/NC3NJUZ.png' },
doodle: { display:'Doodle', author:'turtlemansam', url:'https://i.imgur.com/EkvSMFd.png' },
glow: { display:'Glow', author:'MagicPigeon', url:'https://i.imgur.com/ciiB8Pw.png' },
halloween: { display:'Halloween', author:'TagPro\n', tiles:'https://i.imgur.com/DqpxNyk.png' },
kindergarten: { display:'Kindergarten', author:'Clydas', url:'http://i.imgur.com/Zr1881o.png' },
mario: { display:'Mario', author:'MagicPigeon', url:'https://i.imgur.com/0ErN4Be.png' },
nextclassic: { display:'Next Classic', author:'MagicPigeon', url:'https://i.imgur.com/ulQFpn7.png' },
nilla: { display:'Nilla', author:'Dotsarecool', url:'https://i.imgur.com/kuPdAXV.png' },
pixleated: { display:'Pixelated', author:'iso', url:'https://i.imgur.com/zcP5TjC.png' },
seaweedgb: { display:'Seaweed G/B', author:'Borgen', url:'https://i.imgur.com/Kh4jUfE.png' },
seaweedrb: { display:'Seaweed R/B', author:'Borgen', url:'https://i.imgur.com/RslLcen.png' },
starwars: { display:'Star Wars', author:'Moosen', url:'https://i.imgur.com/1GQnONe.png' },
tagproultra: { display:'TagPro Ultra', author:'MuscleCaps', url:'https://i.imgur.com/qTjavFh.png' },
tranquilitydark: { display:'Tranquility Dark', author:'R e t r o\n', url:'https://i.imgur.com/fb8ueHE.png' },
ultrasmooth: { display:'Ultra Smooth', author:'ProfessorTag', url:'https://i.imgur.com/Nw0EqWH.png' },
vanillapro: { display:'Vanilla Pro', author:'ProfessorTag', url:'https://i.imgur.com/ZKAwVRG.png' },
vortex: { display:'Vortex', author:'MagicPigeon', url:'https://i.imgur.com/CLgkyxU.png' },
yinyang: { display:'Yin-Yang', author:'Browncoat', url:'https://i.imgur.com/kTVchxk.png' },
};
//GM_deleteValue('options');
var options = $.extend(true, {}, defaultOptions);
let savedOptions = GM_getValue('options');
if (savedOptions) {
Object.keys(savedOptions).forEach(key => {
if (options.hasOwnProperty(key)) {
options[key].name = savedOptions[key].name;
} else {
delete savedOptions[key];
GM_setValue('options', savedOptions);
}
});
}
//console.log(options);
if (window.location.port) {
let tr = tagpro.renderer;
let tilesSwapped = false;
let texturePacks = GM_getValue('texturepacks');
if (!texturePacks) return; //nothing to do
texturePacks.forEach(key => {
altTextures[key.url] = { url:key.tiles };
});
tr.readyToDrawBackground = function() {
return tilesSwapped && tagpro.map && tagpro.tiles.image;
};
function makeTexture() {
//console.log('TS: makeTexture()::');
const loader = PIXI.loader;
Object.keys(options).forEach(key => {
if (options[key].name && options[key].name !== 'default' && altTextures.hasOwnProperty(options[key].name) && altTextures[options[key].name].url) altTextures[options[key].name].load = true;
});
Object.keys(altTextures).forEach(key => {
if (altTextures[key].load) {
loader.add(key, altTextures[key].url);
}
});
loader.load((loader, resources) => {
//console.log('loader.load:',resources);
Object.keys(options).forEach(key => {
let packName = options[key].name;
if (options[key].link) {
packName = options[options[key].link].name;
}
if (packName && packName !== 'default') {
if (!resources[packName].error) {
let tileCanvas = document.createElement('canvas');
tileCanvas.width = 40;
tileCanvas.height = 40;
let tileCtx = tileCanvas.getContext('2d');
tileCtx.drawImage(resources[packName].data, options[key].x, options[key].y, 40, 40, 0, 0, 40, 40);
let texture = PIXI.Texture.fromCanvas(tileCanvas, PIXI.SCALE_MODES.LINEAR);
if (PIXI.utils.TextureCache[key]) {
//console.log('changing cache to new texture...', key);
PIXI.utils.TextureCache[key] = texture;
} else {
//console.log('adding to cache...', key);
PIXI.utils.TextureCache[key] = texture;
//tagpro.tiles[key] = texture;
}
}
}
});
tilesSwapped = true;
});
loader.onProgress.add((e, r) => {
//console.log('Tile Swapper: Loader Progress', e);
//console.log('Tile Swapper: Loader Progress: ', r.name + ' |url:', r.url, e.progress + '%');
});
loader.onError.add((e) => { //one resource failed
//console.log('Tile Swapper: Loader Error', e);
tilesSwapped = true;
});
loader.onLoad.add((e, r) => {
//console.log('Tile Swapper: Loader Load: ' + r.name + ' "' + r.url + '" ' + e.progress + '%');
});
loader.onComplete.add((e, r) => { //all resources have loaded
//console.log('Tile Swapper: Loader Complete', e, r);
});
}
if (!tr.layers.backgroundDrawn) {
makeTexture();
}
} else {
//Create "Replacer" tab...
$('ul.tab-list').append('<li data-target="#TS_Container"><a>Tile Swapper</a></li>');
$('div.tab-content').append('<div id="TS_Container" class="tab-pane"></div>');
$('#TS_Container').append('<div id="TS_Header"><span id="TS_ClearAll">Clear All</span><span id="TS_TilesUsed"></span><span id="TS_ShowPreview">Preview</span></div><div id="TS_Elements"></div>');
//Saved options...
$('#TS_Container').append('<div id="TS_MySavedOptions"></div>');
$('#TS_MySavedOptions').append('<div id="TS_MySavedOptionsButtons" style="position:relative"></div>');
$('#TS_MySavedOptionsButtons').append('<div id="TS_SaveMyOptions" title="Save the current values">&#43;</div>');
var countImagesUsed = function() {
var usedTextures = [];
$('#TS_Elements').find('select').each(function(key, value) {
let saveto = value.dataset.saveto;
if (!saveto) return;
if (options[saveto].name && options[saveto].name !== 'default' && usedTextures.indexOf(options[saveto].name) === -1) usedTextures.push(options[saveto].name);
});
return usedTextures.length;
};
var createNewOptionsIcon = function(name) {
var myOptions = GM_getValue('myOptions', {});
var title = 'Load this saved custom options set';
var displayName = name;
$('#TS_MySavedOptions').append('<div class="TS_MySavedOptions" data-name="'+name+'" title="'+title+'">'+displayName+'<div class="TS_DeleteSavedOptions" title="Delete this saved custom options set">x</div></div>');
};
//Get the built-in texture pack data, sort and save it...
let texturePacks = JSON.parse($('#texture-pack-data').text());
texturePacks.sort(function(a, b) {
if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
return 0;
});
for (let i=0; i<texturePacks.length; i++) {
if (texturePacks[i].name === 'Classic') { //put this one at the start :)
texturePacks.splice(0, 0, texturePacks.splice(i, 1)[0]);
}
}
GM_setValue('texturepacks', texturePacks);
texturePacks.forEach(key => {
altTextures[key.url] = { builtin:true, display:key.name, author:key.author, url:key.tiles };
});
//Build the textures dropdown...
let packOptions = '<option value="default" title="Use the default tile from your selected texture pack"></option>';
let packOptionsBuiltIn = '<optgroup label="Default Packs...">';
let packOptionsExtra = '<optgroup label="Extra Packs...">';
Object.keys(altTextures).forEach(key => {
if (altTextures[key].builtin) {
packOptionsBuiltIn += '<option value="' + key + '" title="By ' + altTextures[key].author + '">' + altTextures[key].display + '</option>';
} else {
packOptionsExtra += '<option value="' + key + '" title="By ' + altTextures[key].author + '">' + altTextures[key].display + '</option>';
}
});
packOptions += packOptionsBuiltIn + '</optgroup>' + packOptionsExtra + '</optgroup>';
//Add a textures dropdown for each tile...
Object.keys(defaultOptions).forEach(key => {
if (!defaultOptions[key].link) {
$('#TS_Elements').append('<span class="TS_Element" data-sortby="' + defaultOptions[key].order + '"><div class="TS_ElementTitle">' + defaultOptions[key].display + ':</div><select class="TS_TextureSelect" style="" data-saveto="' + defaultOptions[key].saveto + '">' + packOptions + '</select><div class="TS_TilePreview" style="' + (options[key].name && altTextures.hasOwnProperty(options[key].name) ? 'background-image:url(' + altTextures[options[key].name].url + '); background-position:-' + options[key].x + 'px -' + options[key].y + 'px;' : '') + '"></div></span>');
}
});
//Sort...
$('#TS_Elements').find('span.TS_Element').sort(function(a, b) {
return ($(b).data('sortby') < $(a).data('sortby')) ? 1 : ($(b).data('sortby') > $(a).data('sortby')) ? -1 : 0;
}).appendTo( $('#TS_Elements') );
//Set our saved values...
var setDropdownsValues = function() {
$('#TS_Elements').find('select').each(function(key, value) {
let saveto = value.dataset.saveto;
if (!saveto) return;
let url = $('#tiles').val();
if (options[saveto].name && altTextures.hasOwnProperty(options[saveto].name)) url = altTextures[options[saveto].name].url;
$(this).val(options[saveto].name);
$(this).next('div.TS_TilePreview').css({
'background-image': 'url(' + url + ')', //'none',
'background-position': '-' + defaultOptions[saveto].x + 'px -' + defaultOptions[saveto].y + 'px'
});
});
};
var createMyOptions = function() {
let myOptions = GM_getValue('myOptions', {});
$.each(myOptions, function(key, value) {
createNewOptionsIcon(key);
});
};
setDropdownsValues();
$('#TS_TilesUsed').text('Additional images loaded: ' + countImagesUsed());
createMyOptions();
//Styles...
GM_addStyle('#TS_Container { margin-top:-30px; padding:10px; font-size:12px; }');
GM_addStyle('#TS_Header { display:flex; align-items:center; justify-content:space-around; margin:10px 0 -10px; text-align:center; font-size:14px; }');
GM_addStyle('#TS_ClearAll { border:1px outset #c99; border-radius:5px; background:#844; padding:2px 10px; cursor:pointer; }');
GM_addStyle('#TS_ClearAll:hover { border:1px inset #c99; }');
GM_addStyle('#TS_ShowPreview { border:1px outset #99c; border-radius:5px; background:#448; padding:2px 10px; cursor:default; }');
GM_addStyle('#TS_ShowPreview:hover { border:1px inset #99c; }');
GM_addStyle('#TS_Elements { display:flex; flex-flow:column wrap; align-items:center; justify-content:flex-start; margin:20px 0 0 0; width:100%; height:440px; padding:15px; background:#222; border:1px outset #555; border-radius:10px; box-shadow:1px 1px 2px #111; }');
GM_addStyle('.TS_TextureSelect { margin:0 3px 0 0; color:black; }');
GM_addStyle('.TS_TextureSelect optgroup { color:#d00; font-size:14px; font-weight:bold; }');
GM_addStyle('.TS_TextureSelect option { color:black; font-size:11px; }');
GM_addStyle('.TS_Element { display:flex; align-items:center; justify-content:flex-end; background:#444; width:320px; padding:3px; border-radius:5px; margin:2px; }');
GM_addStyle('.TS_ElementTitle { margin-right:3px; text-align:center; }');
GM_addStyle('.TS_TilePreview { display:inline-block; width:40px; height:40px; }');
GM_addStyle('#TS_MySavedOptions { display:flex; position:relative; margin:15px 20px 0; padding:2px 20px; flex-flow:row wrap; align-items:center; justify-content:center; background:#222; border:1px inset #555; border-radius:10px; }');
GM_addStyle('#TS_SaveMyOptions { display:flex; justify-content:center; align-items:center; margin:2px 13px; width:38px; height:38px; text-align:center; font-size:32px; color:white; background:#8BC34A; border:1px outset #ccc; border-radius:10px; cursor:pointer; }');
GM_addStyle('.TS_MySavedOptions { position:relative; color:white; background:#555; font-size:13px; border-radius:5px; cursor:pointer; border:1px outset #ccc; margin:5px; padding:1px 20px; }');
GM_addStyle('.TS_DeleteSavedOptions { display:none; position:absolute; width:8px; height:9px; top:0px; right:0px; color:white; background:red; opacity:0.4; font-size:7px; text-align:center; border-radius:30%; cursor:pointer; }');
//Some tiles won't load if the "Textures MAX" script is also running...
setTimeout(function() {
if ($('#TPE_Container').length) {
$('#TS_Elements').find('.TS_TextureSelect[data-saveto="2"]').prev('div').css({ 'color':'#222', 'text-decoration':'line-through' }); //Floor
$('#TS_Elements').find('.TS_TextureSelect[data-saveto="7"]').prev('div').css({ 'color':'#222', 'text-decoration':'line-through' }); //Spike
$('#TS_Elements').find('.TS_TextureSelect[data-saveto="8"]').prev('div').css({ 'color':'#222', 'text-decoration':'line-through' }); //Button
$('#TS_Elements').find('.TS_TextureSelect[data-saveto="11"]').prev('div').css({ 'color':'#222', 'text-decoration':'line-through' }); //TeamTiles
$('#TS_Elements').find('.TS_TextureSelect[data-saveto="12"]').prev('div').css({ 'color':'#222', 'text-decoration':'line-through' });
$('#TS_Elements').find('.TS_TextureSelect[data-saveto="23"]').prev('div').css({ 'color':'#222', 'text-decoration':'line-through' });
$('#TS_Elements').find('.TS_TextureSelect[data-saveto="17"]').prev('div').css({ 'color':'#222', 'text-decoration':'line-through' }); //Endzones
$('#TS_Elements').find('.TS_TextureSelect[data-saveto="18"]').prev('div').css({ 'color':'#222', 'text-decoration':'line-through' });
}
}, 1000);
//Listeners...
$('.tab-list li').on('click', function() {
$(this).parents('.tab-list').find('li').removeClass('active');
$(this).parents('.tab-list').parent().find('.tab-pane').removeClass('active');
$(this).addClass('active');
$( $(this).data('target') ).addClass('active');
});
$('#custom-textures-btn, .texture-choice').on('click', function() {
var currentTiles = $('#tiles').val();
var clearableCounter = 0;
var clearable = setInterval(function() {
clearableCounter+=50;
if (clearableCounter > 2000) {
clearInterval(clearable);
}
if ($('#tiles').val() !== currentTiles) {
clearInterval(clearable);
setDropdownsValues();
}
}, 50);
});
$('#TS_ClearAll').on('click', function() {
options = $.extend(true, {}, defaultOptions);
//GM_setValue('options', options);
$('#TS_Elements').find('select').each(function(key, value) {
$(this).val('');
$(this).next('div.TS_TilePreview').css({
'background-image': 'url(' + $('#tiles').val() + ')', //'none',
'background-position': '-' + defaultOptions[this.dataset.saveto].x + 'px -' + defaultOptions[this.dataset.saveto].y + 'px' //''
});
});
$('#TS_TilesUsed').text('Additional images loaded: ' + countImagesUsed());
});
$('.TS_TextureSelect').on('change', function() {
options[this.dataset.saveto].name = this.value;
GM_setValue('options', options);
if (options[this.dataset.saveto].name && altTextures.hasOwnProperty(options[this.dataset.saveto].name)) {
$(this).next('div.TS_TilePreview').css({
'background-image': 'url(' + altTextures[options[this.dataset.saveto].name].url + ')',
'background-position': '-' + defaultOptions[this.dataset.saveto].x + 'px -' + defaultOptions[this.dataset.saveto].y + 'px'
});
} else {
$(this).next('div.TS_TilePreview').css({
'background-image': 'url(' + $('#tiles').val() + ')', //'none',
'background-position': '-' + defaultOptions[this.dataset.saveto].x + 'px -' + defaultOptions[this.dataset.saveto].y + 'px' //''
});
}
$('#TS_TilesUsed').text('Additional images loaded: ' + countImagesUsed());
});
//Save stuff...
$('#TS_SaveMyOptions').on('click', function() {
var name = prompt('Save name:');
if (name) {
var myOptions = GM_getValue('myOptions', {});
var isNewOptions = true;
if (myOptions.hasOwnProperty(name)) {
if (!confirm('"'+name+'" already exists - OK to overwrite?\n\n')) return;
isNewOptions = false;
delete myOptions[name];
}
myOptions[name] = options;
GM_setValue('myOptions', myOptions);
if (isNewOptions) {
createNewOptionsIcon(name);
}
}
}).hover(function() {
$(this).css('border', '1px inset #ccc');
}, function() {
$(this).css('border', '1px outset #ccc');
});
$('#TS_MySavedOptions').on('click', '.TS_MySavedOptions', function() {
var myOptions = GM_getValue('myOptions', {});
var name = $(this).data('name');
if (myOptions.hasOwnProperty(name)) {
options = $.extend(true, {}, defaultOptions, myOptions[name]);
GM_setValue('options', options);
}
setDropdownsValues();
$('#TS_TilesUsed').text('Additional images loaded: ' + countImagesUsed());
});
$('#TS_MySavedOptions').on('mouseenter', '.TS_MySavedOptions', function() {
$(this).css('border', '1px inset #ccc');
$(this).find('.TS_DeleteSavedOptions').show();
}).on('mouseleave', '.TS_MySavedOptions', function() {
$(this).css('border', '1px outset #ccc');
$(this).find('.TS_DeleteSavedOptions').hide();
});
$('#TS_MySavedOptions').on('click', '.TS_DeleteSavedOptions', function(e) {
e.stopPropagation();
e.preventDefault();
var myOptions = GM_getValue('myOptions', {});
var name = $(this).parent().data('name');
if (name && myOptions.hasOwnProperty(name)) {
if (!confirm('Delete saved options "'+name+'?\n\n')) return;
delete myOptions[name];
GM_setValue('myOptions', myOptions);
var $this = $(this).parent();
$this.fadeOut(600, function() { $this.remove(); });
}
});
$('#TS_MySavedOptions').on('mouseenter', '.TS_DeleteSavedOptions', function() {
$(this).css('opacity', '1');
}).on('mouseleave', '.TS_DeleteSavedOptions', function() {
$(this).css('opacity', '0.5');
});
//Previewer stuff...
function loadAllTiles(callback) {
let expectedImages = countImagesUsed();
let doneCount = 0;
if (expectedImages === 0) {
return callback();
}
Object.keys(options).forEach(key => {
if (options[key].name && options[key].name !== 'default' && altTextures.hasOwnProperty(options[key].name) && altTextures[options[key].name].url && !altTextures[options[key].name].load) {
if (altTextures[options[key].name].image) {
doneCount++;
if (doneCount === expectedImages) callback();
} else {
altTextures[options[key].name].load = true;
let tilesImg = new Image();
tilesImg.onload = function() {
altTextures[options[key].name].image = tilesImg;
doneCount++;
if (doneCount === expectedImages) callback();
};
tilesImg.crossOrigin = "Anonymous";
tilesImg.src = altTextures[options[key].name].url;
}
}
});
}
$('#TS_ShowPreview').hoverIntent(function() {
var tilesImg = new Image();
var speedpadImg = new Image();
var portalImg = new Image();
Object.keys(options).forEach(key => {
if (options[key].name && altTextures.hasOwnProperty(options[key].name) && altTextures[options[key].name].load) {
altTextures[options[key].name].load = false;
}
});
$('#TS_ShowPreview').append('<div id="TS_Hover" style="position:absolute; display:inline-block; bottom:20px; right:-10px; width:660px; height:460px; margin:0 auto; padding:10px; background:#111; box-shadow:0px 0px 9px white; border:1px solid #666; border-radius:5px; z-index:9999;">Generating Preview...</div>');
$('#TS_Hover').data('url', $('#tiles').val());
loadAllTiles(function() {
tilesImg.onload = function() {
var canvas = document.createElement('canvas');
createCanvas(canvas, $('#TS_Hover'), function(that) {
$(that).append('<div id="TS_PreviewInner" style="text-align:center;"></div>');
$('#TS_PreviewInner').append(canvas);
$(canvas).attr('id', 'TS_PreviewInnerCanvas');
canvas = null;
let bg = $('#TS_PreviewInnerCanvas')[0].toDataURL('image/png');
$('#TS_Hover').text('').append('<canvas id="TS_Hover_Canvas" width="640" height="440" style="background-image: url(' + bg + ');"></canvas>');
$('#TS_ShowPreview').append('<img src="' + $('#tiles').val() + '" class="img-responsive TS_CanRemove" style="display:none">');
$('#TS_ShowPreview').append('<img src="' + $('#speedpad').val() + '" class="TS_SpeedPad TS_CanRemove" style="display:none">');
$('#TS_ShowPreview').append('<img src="' + $('#portal').val() + '" class="TS_Portal TS_CanRemove" style="display:none">');
window.requestAnimationFrame(animatePreview);
});
};
tilesImg.crossOrigin = "Anonymous";
tilesImg.src = $('#tiles').val();
});
speedpadImg.crossOrigin = 'Anonymous';
speedpadImg.src = $('#speedpad').val();
portalImg.crossOrigin = 'Anonymous';
portalImg.src = $('#portal').val();
}, function() {
$('#TS_Hover').remove();
$('.TS_CanRemove').remove();
});
function createCanvas(canvas, pack, callback) {
let map = {"info":{"width":16,"height":11},"data":{"0_5":{"id":9.1,"x":0,"y":5,"tx":520,"ty":120},"0_6":{"id":9.1,"x":0,"y":6,"tx":520,"ty":120},"1_1":{"id":2,"x":1,"y":1,"tx":520,"ty":160},"1_2":{"id":2,"x":1,"y":2,"tx":520,"ty":160},"1_3":{"id":2,"x":1,"y":3,"tx":520,"ty":160},"1_4":{"id":2,"x":1,"y":4,"tx":520,"ty":160},"1_5":{"id":2,"x":1,"y":5,"tx":520,"ty":160},"1_6":{"id":2,"x":1,"y":6,"tx":520,"ty":160},"1_7":{"id":2,"x":1,"y":7,"tx":520,"ty":160},"1_8":{"id":2,"x":1,"y":8,"tx":520,"ty":160},"1_9":{"id":2,"x":1,"y":9,"tx":520,"ty":160},"1_10":{"id":2,"x":1,"y":10,"tx":520,"ty":160},"2_1":{"id":2,"x":2,"y":1,"tx":520,"ty":160},"2.2":{"id":2,"x":2,"y":2,"tx":520,"ty":160},"2_3":{"id":2,"x":2,"y":3,"tx":520,"ty":160},"2_4":{"id":23,"x":2,"y":4,"tx":520,"ty":200},"2_5":{"id":23,"x":2,"y":5,"tx":520,"ty":200},"2_6":{"id":23,"x":2,"y":6,"tx":520,"ty":200},"2_7":{"id":23,"x":2,"y":7,"tx":520,"ty":200},"2_8":{"id":2,"x":2,"y":8,"tx":520,"ty":160},"2.9":{"id":2,"x":2,"y":9,"tx":520,"ty":160},"2_10":{"id":2,"x":2,"y":10,"tx":520,"ty":160},"3_0":{"id":9.2,"x":3,"y":0,"tx":560,"ty":120},"3_1":{"id":2,"x":3,"y":1,"tx":520,"ty":160},"3_2":{"id":2,"x":3,"y":2,"tx":520,"ty":160},"3_3":{"id":2,"x":3,"y":3,"tx":520,"ty":160},"3_4":{"id":2,"x":3,"y":4,"tx":520,"ty":160},"3_5":{"id":2,"x":3,"y":5,"tx":520,"ty":160},"3_6":{"id":2,"x":3,"y":6,"tx":520,"ty":160},"3_7":{"id":2,"x":3,"y":7,"tx":520,"ty":160},"3_8":{"id":2,"x":3,"y":8,"tx":520,"ty":160},"3_9":{"id":2,"x":3,"y":9,"tx":520,"ty":160},"3_10":{"id":2,"x":3,"y":10,"tx":520,"ty":160},"4_0":{"id":9.2,"x":4,"y":0,"tx":560,"ty":120},"4_1":{"id":2,"x":4,"y":1,"tx":520,"ty":160},"4_2":{"id":2,"x":4,"y":2,"tx":520,"ty":160},"4_3":{"id":2,"x":4,"y":3,"tx":520,"ty":160},"4_4":{"id":2,"x":4,"y":4,"tx":520,"ty":160},"4_5":{"id":2,"x":4,"y":5,"tx":520,"ty":160},"4_6":{"id":2,"x":4,"y":6,"tx":520,"ty":160},"4_7":{"id":2,"x":4,"y":7,"tx":520,"ty":160},"4_8":{"id":2,"x":4,"y":8,"tx":520,"ty":160},"4_9":{"id":2,"x":4,"y":9,"tx":520,"ty":160},"4_10":{"id":2,"x":4,"y":10,"tx":520,"ty":160},"5_1":{"id":2,"x":5,"y":1,"tx":520,"ty":160},"5_2":{"id":2,"x":5,"y":2,"tx":520,"ty":160},"5_3":{"id":2,"x":5,"y":3,"tx":520,"ty":160},"5_4":{"id":2,"x":5,"y":4,"tx":520,"ty":160},"5_5":{"id":2,"x":5,"y":5,"tx":520,"ty":160},"5_6":{"id":2,"x":5,"y":6,"tx":520,"ty":160},"5_7":{"id":2,"x":5,"y":7,"tx":520,"ty":160},"5_8":{"id":2,"x":5,"y":8,"tx":520,"ty":160},"5_9":{"id":2,"x":5,"y":9,"tx":520,"ty":160},"5_10":{"id":2,"x":5,"y":10,"tx":520,"ty":160},"6_1":{"id":2,"x":6,"y":1,"tx":520,"ty":160},"6_2":{"id":2,"x":6,"y":2,"tx":520,"ty":160},"6_3":{"id":2,"x":6,"y":3,"tx":520,"ty":160},"6_4":{"id":2,"x":6,"y":4,"tx":520,"ty":160},"6.5":{"id":2,"x":6,"y":5,"tx":520,"ty":160},"6_5":{"id":7,"x":6,"y":5,"tx":480,"ty":0},"6.6":{"id":2,"x":6,"y":6,"tx":520,"ty":160},"6_6":{"id":7,"x":6,"y":6,"tx":480,"ty":0},"6_7":{"id":2,"x":6,"y":7,"tx":520,"ty":160},"6_8":{"id":2,"x":6,"y":8,"tx":520,"ty":160},"6_9":{"id":2,"x":6,"y":9,"tx":520,"ty":160},"6_10":{"id":2,"x":6,"y":10,"tx":520,"ty":160},"7_0":{"id":2,"x":7,"y":0,"tx":520,"ty":160},"7_1":{"id":2,"x":7,"y":1,"tx":520,"ty":160},"7_2":{"id":2,"x":7,"y":2,"tx":520,"ty":160},"7.3":{"id":2,"x":7,"y":3,"tx":520,"ty":160},"7_3":{"id":8,"x":7,"y":3,"tx":520,"ty":240},"7_4":{"id":2,"x":7,"y":4,"tx":520,"ty":160},"7_6":{"id":11,"x":7,"y":6,"tx":560,"ty":160},"7_7":{"id":11,"x":7,"y":7,"tx":560,"ty":160},"7_8":{"id":2,"x":7,"y":8,"tx":520,"ty":160},"7_9":{"id":2,"x":7,"y":9,"tx":520,"ty":160},"7_10":{"id":2,"x":7,"y":10,"tx":520,"ty":160},"8_0":{"id":2,"x":8,"y":0,"tx":520,"ty":160},"8_1":{"id":2,"x":8,"y":1,"tx":520,"ty":160},"8_2":{"id":9,"x":8,"y":2,"tx":480,"ty":120},"8_3":{"id":9,"x":8,"y":3,"tx":480,"ty":120},"8_4":{"id":9,"x":8,"y":4,"tx":480,"ty":120},"8_6":{"id":11,"x":8,"y":6,"tx":560,"ty":160},"8_7":{"id":11,"x":8,"y":7,"tx":560,"ty":160},"8_8":{"id":11,"x":8,"y":8,"tx":560,"ty":160},"8_9":{"id":2,"x":8,"y":9,"tx":520,"ty":160},"8_10":{"id":2,"x":8,"y":10,"tx":520,"ty":160},"9_0":{"id":2,"x":9,"y":0,"tx":520,"ty":160},"9_1":{"id":2,"x":9,"y":1,"tx":520,"ty":160},"9_2":{"id":12,"x":9,"y":2,"tx":600,"ty":160},"9_3":{"id":9,"x":9,"y":3,"tx":480,"ty":120},"9_4":{"id":9,"x":9,"y":4,"tx":480,"ty":120},"9_6":{"id":18,"x":9,"y":6,"tx":600,"ty":200},"9_7":{"id":11,"x":9,"y":7,"tx":560,"ty":160},"9_8":{"id":11,"x":9,"y":8,"tx":560,"ty":160},"9_9":{"id":11,"x":9,"y":9,"tx":560,"ty":160},"9_10":{"id":2,"x":9,"y":10,"tx":520,"ty":160},"10_0":{"id":2,"x":10,"y":0,"tx":520,"ty":160},"10_1":{"id":2,"x":10,"y":1,"tx":520,"ty":160},"10_2":{"id":12,"x":10,"y":2,"tx":600,"ty":160},"10_3":{"id":12,"x":10,"y":3,"tx":600,"ty":160},"10_4":{"id":9,"x":10,"y":4,"tx":480,"ty":120},"10_6":{"id":18,"x":10,"y":6,"tx":600,"ty":200},"10_7":{"id":18,"x":10,"y":7,"tx":600,"ty":200},"10_8":{"id":11,"x":10,"y":8,"tx":560,"ty":160},"10_9":{"id":11,"x":10,"y":9,"tx":560,"ty":160},"10_10":{"id":11,"x":10,"y":10,"tx":560,"ty":160},"11_0":{"id":2,"x":11,"y":0,"tx":520,"ty":160},"11_1":{"id":2,"x":11,"y":1,"tx":520,"ty":160},"11_2":{"id":2,"x":11,"y":2,"tx":520,"ty":160},"11_3":{"id":12,"x":11,"y":3,"tx":600,"ty":160},"11_4":{"id":12,"x":11,"y":4,"tx":600,"ty":160},"11_7":{"id":18,"x":11,"y":7,"tx":600,"ty":200},"11_8":{"id":18,"x":11,"y":8,"tx":600,"ty":200},"11_9":{"id":11,"x":11,"y":9,"tx":560,"ty":160},"11_10":{"id":11,"x":11,"y":10,"tx":560,"ty":160},"12_0":{"id":2,"x":12,"y":0,"tx":520,"ty":160},"12_1":{"id":2,"x":12,"y":1,"tx":520,"ty":160},"12_2":{"id":2,"x":12,"y":2,"tx":520,"ty":160},"12_3":{"id":2,"x":12,"y":3,"tx":520,"ty":160},"12_4":{"id":2,"x":12,"y":4,"tx":520,"ty":160},"12.5":{"id":2,"x":12,"y":5,"tx":520,"ty":160},"12_5":{"id":10,"x":12,"y":5,"tx":480,"ty":40},"12_7":{"id":18,"x":12,"y":7,"tx":600,"ty":200},"12_8":{"id":18,"x":12,"y":8,"tx":600,"ty":200},"12_9":{"id":18,"x":12,"y":9,"tx":600,"ty":200},"12_10":{"id":18,"x":12,"y":10,"tx":600,"ty":200},"13_0":{"id":2,"x":13,"y":0,"tx":520,"ty":160},"13_1":{"id":2,"x":13,"y":1,"tx":520,"ty":160},"13_2":{"id":2,"x":13,"y":2,"tx":520,"ty":160},"13_3":{"id":2,"x":13,"y":3,"tx":520,"ty":160},"13_4":{"id":2,"x":13,"y":4,"tx":520,"ty":160},"13_5":{"id":2,"x":13,"y":5,"tx":520,"ty":160},"13.6":{"id":2,"x":13,"y":6,"tx":520,"ty":160},"13_6":{"id":10,"x":13,"y":6,"tx":480,"ty":40},"13_8":{"id":18,"x":13,"y":8,"tx":600,"ty":200},"13_9":{"id":18,"x":13,"y":9,"tx":600,"ty":200},"13_10":{"id":18,"x":13,"y":10,"tx":600,"ty":200},"14.0":{"id":2,"x":14,"y":0,"tx":520,"ty":160},"14_0":{"id":7,"x":14,"y":0,"tx":480,"ty":0},"14.1":{"id":2,"x":14,"y":1,"tx":520,"ty":160},"14_2":{"id":2,"x":14,"y":2,"tx":520,"ty":160},"14_3":{"id":2,"x":14,"y":3,"tx":520,"ty":160},"14_4":{"id":2,"x":14,"y":4,"tx":520,"ty":160},"14_5":{"id":2,"x":14,"y":5,"tx":520,"ty":160},"14_6":{"id":2,"x":14,"y":6,"tx":520,"ty":160},"14_8":{"id":9.3,"x":14,"y":8,"tx":600,"ty":120},"14_9":{"id":9.3,"x":14,"y":9,"tx":600,"ty":120},"14_10":{"id":9.3,"x":14,"y":10,"tx":600,"ty":120},"15.0":{"id":2,"x":15,"y":0,"tx":520,"ty":160},"15.1":{"id":2,"x":15,"y":1,"tx":520,"ty":160},"15_1":{"id":7,"x":15,"y":1,"tx":480,"ty":0},"15_2":{"id":2,"x":15,"y":2,"tx":520,"ty":160},"15_3":{"id":17,"x":15,"y":3,"tx":560,"ty":200},"15_4":{"id":17,"x":15,"y":4,"tx":560,"ty":200},"15_5":{"id":17,"x":15,"y":5,"tx":560,"ty":200},"15_6":{"id":2,"x":15,"y":6,"tx":520,"ty":160},"15_8":{"id":2,"x":15,"y":8,"tx":520,"ty":160},"15_9":{"id":2,"x":15,"y":9,"tx":520,"ty":160},"15_10":{"id":2,"x":15,"y":10,"tx":520,"ty":160}}};
let pups = {"jukejuice":{"id":6.1,"x":14,"y":1,"tx":480,"ty":160}, "rollingbomb":{"id":6.2,"x":2,"y":2,"tx":480,"ty":200}, "tagpro":{"id":6.3,"x":15,"y":0,"tx":480,"ty":240}, "placeholder":{"id":6,"x":2,"y":9,"tx":480,"ty":320} };
let walls = {"0":{"q":0,"x":0,"y":0,"tx":0,"ty":280},"1":{"q":1,"x":0,"y":0,"tx":220,"ty":200},"2":{"q":2,"x":0,"y":0,"tx":220,"ty":220},"3":{"q":3,"x":0,"y":0,"tx":0,"ty":220},"4":{"q":0,"x":0,"y":1,"tx":0,"ty":200},"5":{"q":1,"x":0,"y":1,"tx":220,"ty":240},"6":{"q":2,"x":0,"y":1,"tx":300,"ty":340},"7":{"q":3,"x":0,"y":1,"tx":0,"ty":220},"8":{"q":0,"x":0,"y":2,"tx":0,"ty":200},"9":{"q":1,"x":0,"y":2,"tx":300,"ty":360},"10":{"q":2,"x":0,"y":2,"tx":460,"ty":220},"11":{"q":3,"x":0,"y":2,"tx":0,"ty":220},"12":{"q":0,"x":0,"y":3,"tx":0,"ty":200},"13":{"q":1,"x":0,"y":3,"tx":460,"ty":200},"14":{"q":2,"x":0,"y":3,"tx":460,"ty":220},"15":{"q":3,"x":0,"y":3,"tx":0,"ty":220},"16":{"q":0,"x":0,"y":4,"tx":0,"ty":200},"17":{"q":1,"x":0,"y":4,"tx":460,"ty":200},"18":{"q":2,"x":0,"y":4,"tx":460,"ty":300},"19":{"q":3,"x":0,"y":4,"tx":0,"ty":300},"20":{"q":0,"x":0,"y":7,"tx":0,"ty":280},"21":{"q":1,"x":0,"y":7,"tx":460,"ty":280},"22":{"q":2,"x":0,"y":7,"tx":460,"ty":220},"23":{"q":3,"x":0,"y":7,"tx":0,"ty":220},"24":{"q":0,"x":0,"y":8,"tx":0,"ty":200},"25":{"q":1,"x":0,"y":8,"tx":460,"ty":200},"26":{"q":2,"x":0,"y":8,"tx":460,"ty":220},"27":{"q":3,"x":0,"y":8,"tx":0,"ty":220},"28":{"q":0,"x":0,"y":9,"tx":0,"ty":200},"29":{"q":1,"x":0,"y":9,"tx":460,"ty":200},"30":{"q":2,"x":0,"y":9,"tx":60,"ty":340},"31":{"q":3,"x":0,"y":9,"tx":0,"ty":220},"32":{"q":0,"x":0,"y":10,"tx":0,"ty":200},"33":{"q":1,"x":0,"y":10,"tx":60,"ty":360},"34":{"q":2,"x":0,"y":10,"tx":220,"ty":220},"35":{"q":3,"x":0,"y":10,"tx":0,"ty":220},"36":{"q":0,"x":0,"y":11,"tx":0,"ty":200},"37":{"q":1,"x":0,"y":11,"tx":220,"ty":240},"38":{"q":2,"x":0,"y":11,"tx":340,"ty":420},"39":{"q":3,"x":0,"y":11,"tx":0,"ty":300},"40":{"q":0,"x":1,"y":0,"tx":240,"ty":200},"41":{"q":1,"x":1,"y":0,"tx":220,"ty":200},"42":{"q":2,"x":1,"y":0,"tx":340,"ty":300},"43":{"q":3,"x":1,"y":0,"tx":240,"ty":220},"44":{"q":0,"x":1,"y":1,"tx":240,"ty":400},"45":{"q":1,"x":1,"y":1,"tx":340,"ty":320},"46":{"q":3,"x":1,"y":1,"tx":320,"ty":340},"47":{"q":0,"x":1,"y":10,"tx":80,"ty":360},"48":{"q":2,"x":1,"y":10,"tx":100,"ty":380},"49":{"q":3,"x":1,"y":10,"tx":240,"ty":340},"50":{"q":0,"x":1,"y":11,"tx":240,"ty":240},"51":{"q":1,"x":1,"y":11,"tx":100,"ty":400},"52":{"q":2,"x":1,"y":11,"tx":340,"ty":420},"53":{"q":3,"x":1,"y":11,"tx":360,"ty":420},"54":{"q":0,"x":2,"y":0,"tx":240,"ty":200},"55":{"q":1,"x":2,"y":0,"tx":460,"ty":280},"56":{"q":2,"x":2,"y":0,"tx":460,"ty":300},"57":{"q":3,"x":2,"y":0,"tx":360,"ty":300},"58":{"q":0,"x":2,"y":11,"tx":120,"ty":400},"59":{"q":1,"x":2,"y":11,"tx":220,"ty":200},"60":{"q":2,"x":2,"y":11,"tx":340,"ty":420},"61":{"q":3,"x":2,"y":11,"tx":360,"ty":420},"62":{"q":0,"x":3,"y":11,"tx":240,"ty":200},"63":{"q":1,"x":3,"y":11,"tx":220,"ty":200},"64":{"q":2,"x":3,"y":11,"tx":340,"ty":420},"65":{"q":3,"x":3,"y":11,"tx":360,"ty":420},"66":{"q":0,"x":4,"y":11,"tx":240,"ty":200},"67":{"q":1,"x":4,"y":11,"tx":220,"ty":200},"68":{"q":2,"x":4,"y":11,"tx":340,"ty":420},"69":{"q":3,"x":4,"y":11,"tx":360,"ty":420},"70":{"q":0,"x":5,"y":0,"tx":0,"ty":280},"71":{"q":1,"x":5,"y":0,"tx":220,"ty":200},"72":{"q":2,"x":5,"y":0,"tx":340,"ty":420},"73":{"q":3,"x":5,"y":0,"tx":0,"ty":300},"74":{"q":0,"x":5,"y":11,"tx":240,"ty":200},"75":{"q":1,"x":5,"y":11,"tx":220,"ty":200},"76":{"q":2,"x":5,"y":11,"tx":340,"ty":420},"77":{"q":3,"x":5,"y":11,"tx":360,"ty":420},"78":{"q":0,"x":6,"y":0,"tx":240,"ty":200},"79":{"q":1,"x":6,"y":0,"tx":220,"ty":200},"80":{"q":2,"x":6,"y":0,"tx":380,"ty":420},"81":{"q":3,"x":6,"y":0,"tx":360,"ty":420},"82":{"q":0,"x":6,"y":11,"tx":240,"ty":200},"83":{"q":1,"x":6,"y":11,"tx":220,"ty":200},"84":{"q":2,"x":6,"y":11,"tx":340,"ty":420},"85":{"q":3,"x":6,"y":11,"tx":360,"ty":420},"86":{"q":0,"x":7,"y":0,"tx":280,"ty":200},"87":{"q":1,"x":7,"y":0,"tx":300,"ty":200},"88":{"q":3,"x":7,"y":0,"tx":400,"ty":420},"89":{"q":0,"x":7,"y":5,"tx":0,"ty":280},"90":{"q":1,"x":7,"y":5,"tx":220,"ty":200},"91":{"q":2,"x":7,"y":5,"tx":340,"ty":300},"92":{"q":3,"x":7,"y":5,"tx":0,"ty":220},"93":{"q":0,"x":7,"y":6,"tx":0,"ty":240},"94":{"q":1,"x":7,"y":6,"tx":340,"ty":320},"95":{"q":3,"x":7,"y":6,"tx":200,"ty":300},"96":{"q":0,"x":7,"y":11,"tx":240,"ty":200},"97":{"q":1,"x":7,"y":11,"tx":220,"ty":200},"98":{"q":2,"x":7,"y":11,"tx":340,"ty":420},"99":{"q":3,"x":7,"y":11,"tx":360,"ty":420},"100":{"q":0,"x":8,"y":5,"tx":240,"ty":200},"101":{"q":1,"x":8,"y":5,"tx":220,"ty":200},"102":{"q":2,"x":8,"y":5,"tx":340,"ty":420},"103":{"q":3,"x":8,"y":5,"tx":360,"ty":300},"104":{"q":0,"x":8,"y":11,"tx":240,"ty":200},"105":{"q":1,"x":8,"y":11,"tx":220,"ty":200},"106":{"q":2,"x":8,"y":11,"tx":340,"ty":420},"107":{"q":3,"x":8,"y":11,"tx":360,"ty":420},"108":{"q":0,"x":9,"y":5,"tx":240,"ty":200},"109":{"q":1,"x":9,"y":5,"tx":220,"ty":200},"110":{"q":2,"x":9,"y":5,"tx":340,"ty":420},"111":{"q":3,"x":9,"y":5,"tx":360,"ty":420},"112":{"q":0,"x":9,"y":11,"tx":240,"ty":200},"113":{"q":1,"x":9,"y":11,"tx":220,"ty":200},"114":{"q":2,"x":9,"y":11,"tx":340,"ty":420},"115":{"q":3,"x":9,"y":11,"tx":360,"ty":420},"116":{"q":0,"x":10,"y":5,"tx":240,"ty":200},"117":{"q":1,"x":10,"y":5,"tx":220,"ty":200},"118":{"q":2,"x":10,"y":5,"tx":380,"ty":300},"119":{"q":3,"x":10,"y":5,"tx":360,"ty":420},"120":{"q":0,"x":10,"y":11,"tx":240,"ty":200},"121":{"q":1,"x":10,"y":11,"tx":220,"ty":200},"122":{"q":2,"x":10,"y":11,"tx":340,"ty":420},"123":{"q":3,"x":10,"y":11,"tx":360,"ty":420},"124":{"q":0,"x":11,"y":5,"tx":240,"ty":200},"125":{"q":1,"x":11,"y":5,"tx":460,"ty":280},"126":{"q":2,"x":11,"y":5,"tx":300,"ty":380},"127":{"q":3,"x":11,"y":5,"tx":400,"ty":300},"128":{"q":0,"x":11,"y":6,"tx":400,"ty":320},"129":{"q":1,"x":11,"y":6,"tx":300,"ty":400},"130":{"q":2,"x":11,"y":6,"tx":100,"ty":300},"131":{"q":3,"x":11,"y":6,"tx":0,"ty":300},"132":{"q":0,"x":11,"y":11,"tx":240,"ty":200},"133":{"q":1,"x":11,"y":11,"tx":220,"ty":200},"134":{"q":2,"x":11,"y":11,"tx":340,"ty":420},"135":{"q":3,"x":11,"y":11,"tx":360,"ty":420},"136":{"q":0,"x":12,"y":6,"tx":320,"ty":400},"137":{"q":1,"x":12,"y":6,"tx":460,"ty":280},"138":{"q":2,"x":12,"y":6,"tx":300,"ty":380},"139":{"q":3,"x":12,"y":6,"tx":120,"ty":300},"140":{"q":0,"x":12,"y":7,"tx":120,"ty":320},"141":{"q":1,"x":12,"y":7,"tx":380,"ty":160},"142":{"q":2,"x":12,"y":7,"tx":60,"ty":420},"143":{"q":0,"x":12,"y":11,"tx":240,"ty":200},"144":{"q":1,"x":12,"y":11,"tx":220,"ty":200},"145":{"q":2,"x":12,"y":11,"tx":340,"ty":420},"146":{"q":3,"x":12,"y":11,"tx":360,"ty":420},"147":{"q":0,"x":13,"y":7,"tx":320,"ty":400},"148":{"q":1,"x":13,"y":7,"tx":220,"ty":200},"149":{"q":2,"x":13,"y":7,"tx":340,"ty":420},"150":{"q":3,"x":13,"y":7,"tx":80,"ty":420},"151":{"q":0,"x":13,"y":11,"tx":240,"ty":200},"152":{"q":1,"x":13,"y":11,"tx":220,"ty":200},"153":{"q":2,"x":13,"y":11,"tx":340,"ty":420},"154":{"q":3,"x":13,"y":11,"tx":360,"ty":420},"155":{"q":0,"x":14,"y":7,"tx":240,"ty":200},"156":{"q":1,"x":14,"y":7,"tx":220,"ty":200},"157":{"q":2,"x":14,"y":7,"tx":340,"ty":420},"158":{"q":3,"x":14,"y":7,"tx":360,"ty":420},"159":{"q":0,"x":14,"y":11,"tx":240,"ty":200},"160":{"q":1,"x":14,"y":11,"tx":220,"ty":200},"161":{"q":2,"x":14,"y":11,"tx":340,"ty":420},"162":{"q":3,"x":14,"y":11,"tx":360,"ty":420},"163":{"q":0,"x":15,"y":7,"tx":240,"ty":200},"164":{"q":1,"x":15,"y":7,"tx":220,"ty":200},"165":{"q":2,"x":15,"y":7,"tx":380,"ty":300},"166":{"q":3,"x":15,"y":7,"tx":360,"ty":420},"167":{"q":0,"x":15,"y":11,"tx":240,"ty":200},"168":{"q":1,"x":15,"y":11,"tx":140,"ty":400},"169":{"q":2,"x":15,"y":11,"tx":340,"ty":420},"170":{"q":3,"x":15,"y":11,"tx":360,"ty":420},"171":{"q":0,"x":16,"y":7,"tx":240,"ty":200},"172":{"q":1,"x":16,"y":7,"tx":460,"ty":280},"173":{"q":2,"x":16,"y":7,"tx":460,"ty":220},"174":{"q":3,"x":16,"y":7,"tx":400,"ty":300},"175":{"q":0,"x":16,"y":8,"tx":400,"ty":320},"176":{"q":1,"x":16,"y":8,"tx":460,"ty":200},"177":{"q":2,"x":16,"y":8,"tx":460,"ty":220},"178":{"q":3,"x":16,"y":8,"tx":0,"ty":220},"179":{"q":0,"x":16,"y":9,"tx":0,"ty":200},"180":{"q":1,"x":16,"y":9,"tx":460,"ty":200},"181":{"q":2,"x":16,"y":9,"tx":460,"ty":220},"182":{"q":3,"x":16,"y":9,"tx":0,"ty":220},"183":{"q":0,"x":16,"y":10,"tx":0,"ty":200},"184":{"q":1,"x":16,"y":10,"tx":460,"ty":200},"185":{"q":2,"x":16,"y":10,"tx":460,"ty":220},"186":{"q":3,"x":16,"y":10,"tx":160,"ty":380},"187":{"q":0,"x":16,"y":11,"tx":160,"ty":400},"188":{"q":1,"x":16,"y":11,"tx":460,"ty":200},"189":{"q":2,"x":16,"y":11,"tx":460,"ty":300},"190":{"q":3,"x":16,"y":11,"tx":360,"ty":420}};
let tilesImageURL = $(pack).data('url');
let tileSize = 40;
let halfTile = tileSize / 2;
canvas.width = map.info.width * tileSize;
canvas.height = map.info.height * tileSize;
let ctx = canvas.getContext("2d");
let img = document.createElement('img');
img.onload = function() {
//floor, objects..
$.each(map.data, function(key, value) {
let texturePack = img;
if (options[value.id].name && altTextures.hasOwnProperty(options[value.id].name) && altTextures[options[value.id].name].image) texturePack = altTextures[options[value.id].name].image;
ctx.drawImage(texturePack, value.tx, value.ty, 40, 40, value.x*tileSize, value.y*tileSize, tileSize, tileSize);
});
//pups..
$.each(pups, function(key, value) {
let texturePack = img;
if (options[value.id].name && altTextures.hasOwnProperty(options[value.id].name) && altTextures[options[value.id].name].image) texturePack = altTextures[options[value.id].name].image;
ctx.drawImage(texturePack, value.tx, value.ty, 40, 40, value.x*tileSize, value.y*tileSize, tileSize, tileSize);
});
//walls...
$.each(walls, function(key, value) {
if (value.q >= 0) {
var xoffset = 0, yoffset = 0;
if ((value.q === 1) || (value.q === 2)) xoffset = halfTile;
if ((value.q === 0) || (value.q === 1)) yoffset = -halfTile;
ctx.drawImage(img, value.tx, value.ty, 20, 20, value.x*tileSize+xoffset, value.y*tileSize+yoffset+halfTile, halfTile, halfTile);
}
});
$(canvas).addClass('img-responsive');
$(canvas).css({ 'border':'5px ridge #bbb', 'border-radius':'8px', 'padding':'10px', 'background':'black' }); //'display':'inline-block',
img.onload = null;
img = null;
ctx = null;
callback(pack);
};
img.crossOrigin = 'Anonymous';
img.src = tilesImageURL;
}
}
function animatePreview() {
if ( !$('#TS_Hover_Canvas').length ) return;
var bgCanvas = $('#TS_Hover_Canvas');
var bgCtx = bgCanvas.get(0).getContext("2d");
var redBallImg = $('#TS_Hover').siblings('img.img-responsive')[0];
if (options['redball'].name && altTextures.hasOwnProperty(options['redball'].name) && altTextures[options['redball'].name].image) redBallImg = altTextures[options['redball'].name].image
var blueBallImg = $('#TS_Hover').siblings('img.img-responsive')[0];
if (options['blueball'].name && altTextures.hasOwnProperty(options['blueball'].name) && altTextures[options['blueball'].name].image) blueBallImg = altTextures[options['blueball'].name].image
var yellowFlagImg = $('#TS_Hover').siblings('img.img-responsive')[0];
if (options['16'].name && altTextures.hasOwnProperty(options['16'].name) && altTextures[options['16'].name].image) yellowFlagImg = altTextures[options['16'].name].image
var speedpadImg = $('#TS_Hover').siblings('img.TS_SpeedPad')[0];
var portalImg = $('#TS_Hover').siblings('img.TS_Portal')[0];
var drawPop = 0;
var popStartSize = 100;
var popStep = 10;
var extraAnimFramePos = 0;
var frameCount = 0;
var animObjects = {
rball: { p0:{x:840, y:-200}, p1:{x:40, y:40}, p2:{x:40, y:400}, p3:{x:540, y:390}, tx:560, ty:0, speed:0.003, t:0 },
bball: { p0:{x:680, y:-160}, p1:{x:-40, y:130}, p2:{x:0, y:540}, p3:{x:405, y:270}, tx:600, ty:0, speed:0.003, t:0 },
yflag: { p0:{x:120, y:94}, p1:{x:352, y:346}, p2:{x:352, y:346}, p3:{x:352, y:346}, tx:520, ty:40, speed:0.0015, t:0, offx:13, offy:-32 },
};
var animate = function() {
bgCtx.clearRect(0, 0, 640, 440);
bgCtx.fillStyle = 'rgba(255,128,0,0.1)';
for (var key in animObjects) {
let value = animObjects[key];
let draw = true;
var pt;
if (key === 'yflag') {
pt = { x:animObjects.bball.x + value.offx, y:animObjects.bball.y + value.offy };
if ((value.speed < 0 && value.t < 0.5) || (value.speed > 0 && value.t > 0.5)) draw = false;
if (draw && pt.x > 370 && pt.y > 230) draw = false;
} else {
pt = calcBezierPoint(value.t, value.p0, value.p1, value.p2, value.p3);
value.x = pt.x;
value.y = pt.y;
if (key === 'rball') {
if (value.speed < 0) draw = false;
if (drawPop === 0 && pt.x+39 > value.p3.x && pt.y > 230 && value.speed < 0) drawPop = popStartSize;
}
}
if (draw) {
if (key === 'rball') {
bgCtx.save();
bgCtx.translate(pt.x, pt.y);
bgCtx.rotate(200+(50*value.t));
bgCtx.drawImage(redBallImg, value.tx,value.ty,40,40, -20,-20,40,40);
bgCtx.translate(-pt.x, -pt.y);
bgCtx.restore();
} else if (key === 'bball') {
bgCtx.drawImage(blueBallImg, value.tx,value.ty,40,40, pt.x,pt.y,40,40);
} else if (key === 'yflag') {
bgCtx.drawImage(yellowFlagImg, value.tx,value.ty,40,40, pt.x,pt.y,40,40);
}
}
value.t += value.speed;
if (value.t > 1 || value.t < 0) value.speed *= -1;
}
if (drawPop > 0) {
bgCtx.beginPath();
bgCtx.arc(540, 390, popStartSize-drawPop, 0, Math.PI*2, false);
bgCtx.fill();
drawPop-=popStep;
} else {
drawPop = 0;
}
if (speedpadImg) {
bgCtx.drawImage(speedpadImg, extraAnimFramePos,0,40,40, 440,80,40,40);
}
if (portalImg) {
bgCtx.drawImage(portalImg, extraAnimFramePos,0,40,40, 600,320,40,40);
bgCtx.drawImage(portalImg, extraAnimFramePos,0,40,40, 600,360,40,40);
bgCtx.drawImage(portalImg, extraAnimFramePos,0,40,40, 600,400,40,40);
}
if (frameCount % 8 === 0) extraAnimFramePos += 40;
if (extraAnimFramePos >= 160) extraAnimFramePos = 0;
frameCount++;
if ($('#TS_Hover_Canvas').length) window.requestAnimationFrame(animate);
};
if ($('#TS_Hover_Canvas').length) window.requestAnimationFrame(animate);
}
function calcBezierPoint(t, p0, p1, p2, p3) {
var data = [p0, p1, p2, p3];
var at = 1 - t;
for (var i = 1; i < data.length; i++) {
for (var k = 0; k < data.length - i; k++) {
data[k] = {
x: data[k].x * at + data[k + 1].x * t,
y: data[k].y * at + data[k + 1].y * t
};
}
}
return data[0];
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment