Skip to content

Instantly share code, notes, and snippets.

@nabbynz

nabbynz/TagPro_Texture_Packs_Better_Tiles_Previewer.user.js

Last active February 11, 2024 00:27
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/05e47c03f1412f13727010d808b0b261 to your computer and use it in GitHub Desktop.
Save nabbynz/05e47c03f1412f13727010d808b0b261 to your computer and use it in GitHub Desktop.
Download ZIP
TagPro Texture Packs Better Tiles Previewer
Raw
TagPro_Texture_Packs_Better_Tiles_Previewer.user.js
// ==UserScript==
// @name TagPro Texture Packs Better Tiles Previewer
// @description Changes the previews. Adds option to save custom packs.
// @version 0.1.1
// @match https://tagpro.koalabeast.com/textures/
// @updateURL https://gist.github.com/nabbynz/05e47c03f1412f13727010d808b0b261/raw/TagPro_Texture_Packs_Better_Tiles_Previewer.user.js
// @downloadURL https://gist.github.com/nabbynz/05e47c03f1412f13727010d808b0b261/raw/TagPro_Texture_Packs_Better_Tiles_Previewer.user.js
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @author nabby
// ==/UserScript==
'use strict';
console.log('START: ' + GM_info.script.name + ' (v' + GM_info.script.version + ' by ' + GM_info.script.author + '). Loaded: ' + new Date().toLocaleTimeString());
/* eslint-env jquery */
/* globals tagpro, tagproConfig */
/* eslint-disable no-multi-spaces */
/* eslint-disable dot-notation */
let texturePacks = JSON.parse($('#texture-pack-data').text());
let loggedIn = $('#site-nav').find('a[href^="/profile/"]').attr('href').length;
let currentTextures = JSON.parse($("#current-pack").text());
$('#TP_ShowPreviewAll').remove(); //remove the built-in "Preview All"
$('#custom').find('.TP_ShowPreview').remove(); //remove the built-in link previews
$('#custom').find('input').parent('div').prepend('<span class="BTP_ShowPreview" style="margin:4px 5px 0 0; padding:2px 5px; font-size:12px; color:white; background:#444; border:1px dashed #aaa; border-radius:5px; float:right; cursor:default;">Preview</span>');
$('#custom-textures-btn').before('<span id="BTP_ShowPreviewAll" style="position:absolute; right:0; margin:15px 16px 0 0; padding:2px 5px; font-size:16px; color:white; background:#444; border:1px dashed #aaa; border-radius:5px; cursor:default;">Preview All</span>');
$('#custom-textures-btn').before('<span id="BTP_OutputLinks" style="position:absolute; right:0; margin:52px 16px 0 0; padding:2px 5px; font-size:10px; color:white; background:#333; border:1px outset #555; border-radius:5px; cursor:pointer;" title="Output Links to Console (F12 or Ctrl-Shift-J)">Output Links</span>');
$('#custom-textures-btn').after('<div id="BTP_MySavedPacks" style="position:relative; display:flex; margin:15px 5px 0; flex-flow:row wrap; align-items:center; justify-content:center; background:#333; border:1px solid #444; border-radius:5px;"></div>');
$('#BTP_MySavedPacks').append('<div id="BTP_SaveMyPack" title="Save the current texture links as a new pack" style="margin:2px 13px; padding:6px 0; width:38px; height:38px; opacity:0.6; text-align:center; font-size:18px; color:white; background:limegreen; border: 1px dashed white; border-radius:10px; cursor:pointer">+</div>');
$('.texture-packs .texture-choice hr').hide();
$('.explanation-bubble').append('<div style="margin:5px 0 -5px; font-size:16px; text-align:right;"><span style="vertical-align:top; display:inline-block; width:40px; text-align:center;">Size</span> <input type="range" id="BTP_PreviewSize" min="6" max="50" value="25" style="width:120px; display:inline-block;"> <span id="BTP_PreviewSizeValue" style="vertical-align:top; display:inline-block; width:40px; text-align:center;"></span></div>');
$('#BTP_PreviewSize').parent().append('<div><label><input type="checkbox" id="BTP_PreviewShowImages"' + (GM_getValue('shownewimages', false) ? ' checked' : '') + '>Images</label><span id="BTP_Redraw_Previews"><i class="fa-solid fa-rotate-right" style="color:#6bd916; rotate:225deg;" title="Redraw Previews"></i></span></div>');
if (GM_getValue('shownewimages', true)) {
$('.texture-image').hide();
}
let createCanvas = function(width, height, forceDOM = false) {
if (!forceDOM && typeof OffscreenCanvas !== 'undefined' && !window.navigator.userAgent.includes('Gecko')) { // Firefox Support is bad as at 2023-03-01.
return new OffscreenCanvas(width, height); // An 'OffscreenCanvas' is smaller and faster than a normal canvas.
} else {
let canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
return canvas;
}
};
let addStyles = function() {
GM_addStyle('#texture-list { display:flex; flex-flow:row wrap; justify-content:center; align-items:flex-start; width:100%; }');
GM_addStyle('.texture-packs .texture-choice { position:relative; margin-bottom:15px; padding:6px 6px 26px 6px; }');
GM_addStyle('.texture-packs .texture-choice:hover { border:1px solid #eee; }');
GM_addStyle('.BTP_MySavedPack { position:relative; margin:5px; padding:5px; color:black; background:#fff; opacity:0.7; font-size:15px; font-weight:bold; border-radius:5px; cursor:pointer; }'); //border:1px solid #777; margin:5px; padding:0 12px 0 3px;
GM_addStyle('.BTP_DeleteSavedPack { display:none; position:absolute; width:12px; height:12px; top:0px; right:0px; color:white; background:red; opacity:0.7; font-size:9px; text-align:center; border-radius:50%; cursor:pointer; }');
GM_addStyle('.BTP_MySavedPackLabel { min-width:40px; padding:0 8px; font:11px Arial; text-align:center; }');
GM_addStyle('.BTP_SavedSubItem { opacity:0.7; margin:3px 0px; }'); //width:20px;
GM_addStyle('.BTP_PreviewCanvas { display:none; margin:5px 0 0; padding:5px 5px 0; text-align:center; border:1px outset #aaa; border-radius:5px; }');
GM_addStyle('#BTP_Default_Preview { position:absolute; display:none; left:-150px; margin-top:-148px; width:662px; padding:10px; font-size:12px; color:#aaa; background:#222; border:1px outset #777; border-radius:10px; box-shadow:3px 3px 6px black; white-space:nowrap; z-index:1; }');
GM_addStyle('.BTP_Preview_Footer { display:flex; position:relative; top:-24px; margin:0 15px; justify-content:space-between; width:100%; font-size:11px; }');
GM_addStyle('.BTP_Preview_Footer_Set { margin:4px 4px -4px; border:1px solid #8bc34a; padding:1px 7px; border-radius:2px; opacity:0.65; cursor:pointer; }');
GM_addStyle('.BTP_Preview_Footer_Set:hover { background:#3b3; opacity:1; }');
GM_addStyle('.BTP_Preview_Footer_Item { margin:4px 4px -4px; border:1px dashed #797; padding:1px 7px; border-radius:2px; opacity:0.65; cursor:default; }');
GM_addStyle('.BTP_Preview_Footer_Item:hover { opacity:1; }');
GM_addStyle('.BTP_PreventDefaultClickOverlay { position:absolute; display:flex; align-items:flex-end; top:0; left:0; width:100%; height:100%; }');
GM_addStyle('& .texture-image { margin:5px 0 0; border:none !important; }');
GM_addStyle('.texture-choice .name { text-shadow:1px 1px 1px #333; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }');
GM_addStyle('.texture-choice .author { text-shadow:1px 1px 1px #333; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }');
GM_addStyle('.texture-choice .texture-popularity { text-shadow:1px 1px 1px #333; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }');
GM_addStyle('.texture-choice-new { border:1px outset #666; padding: 5px 5px 8px; margin:5px 0; border-radius:5px; }');
GM_addStyle('#BTP_Redraw_Previews { margin-left:10px; cursor:pointer; opacity:0.6; }');
GM_addStyle('#BTP_Redraw_Previews:hover { opacity:1; }');
};
let loadCustomValues = function() {
let extraPacks = {};
let myPacks = GM_getValue('myPacks', {});
//default packs...
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]);
}
}
//some extra packs... // Blank Splats: MoZUrDl
extraPacks['8-Bit (Ball-E)'] = { author:'Ball-E', tiles:'Us9EihM', speedpad:'qq3FYd9', speedpadRed:'p2N1BaD', speedpadBlue:'kJifGmd', portal:'XqCCcZ9', portalRed:'VSGSRms', portalBlue:'eYUM571', splats:'MoZUrDl' };
extraPacks['8-Bit (Flaccid Trip)'] = { author:'Flaccid Trip', tiles:'Piophnq', speedpad:'nTPOt5C', speedpadRed:'ded8r1T', speedpadBlue:'OFEYTgy', portal:'3SYCwY5', portalRed:'qAJ8wPL', portalBlue:'vggOmNp', splats:'MoZUrDl' };
extraPacks['88 Electric'] = { author:'Rob Flagetti', tiles:'PzZ5u57', speedpad:'5i2b07D', speedpadRed:'WwQ70DK', speedpadBlue:'fIeILub', portal:'fwk0y5k', portalRed:'xw79cgq', portalBlue:'RkCaSxM', splats:'dSGptD4' };
extraPacks['Aperture Laboratories'] = { author:'SuperSans', tiles:'Fg9GIN2', speedpad:'CPoMTrR', speedpadRed:'Az9vhYO', speedpadBlue:'nMVO8KV', portal:'kPfnBgD', portalRed:'QlVbJo7', portalBlue:'vuXZz1G', splats:'HSufen1' };
extraPacks['Brioche Light Diagonal'] = { author:'Brioche', tiles:'GCVOxf0', speedpad:'HCTWYrI', speedpadRed:'PnFxbGc', speedpadBlue:'BxhPCj6', portal:'8hUe7G0', portalRed:'Ctl7dY9', portalBlue:'x1msjSu', splats:'kbkOC6x' };
extraPacks['Brioche Light Square'] = { author:'Brioche', tiles:'h29Pa4P', speedpad:'HCTWYrI', speedpadRed:'PnFxbGc', speedpadBlue:'BxhPCj6', portal:'8hUe7G0', portalRed:'Ctl7dY9', portalBlue:'x1msjSu', splats:'kbkOC6x' };
extraPacks['Brioche Light None'] = { author:'Brioche', tiles:'Z7aauqp', speedpad:'HCTWYrI', speedpadRed:'PnFxbGc', speedpadBlue:'BxhPCj6', portal:'8hUe7G0', portalRed:'Ctl7dY9', portalBlue:'x1msjSu', splats:'kbkOC6x' };
extraPacks['Catalyst'] = { author:'Catalyst', tiles:'Jpx6FP1', speedpad:'5Z5KC2x', speedpadRed:'kwn7wLk', speedpadBlue:'Z8YlL8e', portal:'0n54Ry0', portalRed:'nZO1eHK', portalBlue:'QC83yFF', splats:'mGxI0zl' };
extraPacks['Coral Cyan/Magenta'] = { author:'MagicPigeon', tiles:'6wXnmG3', speedpad:'Z1RYO0d', speedpadRed:'kTam7fJ', speedpadBlue:'mm2UwXr', portal:'DMhSf0E', portalRed:'UBipnn4', portalBlue:'bxdDrNk', splats:'kbkOC6x' };
extraPacks['Derezzed'] = { author:'-salt-', tiles:'NC3NJUZ', speedpad:'BXtUHQG', speedpadRed:'G92Af0J', speedpadBlue:'R9FAvpp', portal:'hwkuTta', portalRed:'t7JnO6c', portalBlue:'y7KLGtW', splats:'WXHAA3I' };
extraPacks['Doodle'] = { author:'turtlemansam', tiles:'W0anL7u', speedpad:'aLs3qyH', speedpadRed:'uObyeQ2', speedpadBlue:'Ko9Rea2', portal:'bFYUxzA', portalRed:'XIc9dTm', portalBlue:'gtx1GXV', splats:'KillvgL' };
//extraPacks['Doodle Dark'] = { author:'turtlemansam (e:nabby)', tiles:'UeAOeLb', speedpad:'22t8hoV', speedpadRed:'EfQFr4G', speedpadBlue:'hPMDhD5', portal:'bFYUxzA', portalRed:'XIc9dTm', portalBlue:'gtx1GXV', splats:'KillvgL' };
extraPacks['Dude'] = { author:'Nabby', tiles:'2kXJtmv', speedpad:'IJDyrQu', speedpadRed:'p3FYyPR', speedpadBlue:'YHR5gjx', portal:'6hhILt4', portalRed:'yapL8cx', portalBlue:'CAkWcsh', splats:'8RyWj73' };
extraPacks['Dyslexia'] = { author:'MagicPigeon', tiles:'jNljvPn', speedpad:'nUakHFN', speedpadRed:'3I745gq', speedpadBlue:'LEB9Wfw', portal:'5Z5Yrhu', portalRed:'X1ppRfg', portalBlue:'rBvIQEn', splats:'u5kzgws' };
extraPacks['El mirador Flat'] = { author:'deafened', tiles:'1UmJkmN', speedpad:'3wCMF4t', speedpadRed:'J7Bvjrb', speedpadBlue:'ydWYHl2', portal:'gVdHsvD', portalRed:'HCrCoAY', portalBlue:'tGUeltq', splats:'F799BFp' };
extraPacks['Glow'] = { author:'MagicPigeon', tiles:'ciiB8Pw', speedpad:'IB95nd5', speedpadRed:'8RgHd1Y', speedpadBlue:'E3gqIdZ', portal:'H1e5f5X', portalRed:'QKzxfS7', portalBlue:'cm14IOy', splats:'yMbLHLT' };
extraPacks['Halloween'] = { author:'TagPro', tiles:'DqpxNyk', speedpad:'/images/events/halloween/speedpad.png', speedpadRed:'/images/events/halloween/speedpadred.png', speedpadBlue:'/images/events/halloween/speedpadblue.png', portal:'/images/events/halloween/portal.png', portalRed:'rdQCqqP', portalBlue:'jJu5sgg', splats:'/images/events/halloween/splats.png' };
extraPacks['Jar Jar Pinks'] = { author:'Borgen', tiles:'OMvtZnn', speedpad:'0Iggo3y', speedpadRed:'3o3adrL', speedpadBlue:'4tdvTla', portal:'NIyYaL4', portalRed:'kEiyDse', portalBlue:'2B4uWwm', splats:'wxJ2ImS' };
extraPacks['Jar Jar R/B'] = { author:'Borgen (e:nabby)', tiles:'auGwfdD', speedpad:'22t8hoV', speedpadRed:'EfQFr4G', speedpadBlue:'hPMDhD5', portal:'HVYEdPu', portalRed:'S2is5pn', portalBlue:'svRcwXi', splats:'/textures/sparkle/splats.png' };
extraPacks['Kindergarten'] = { author:'Clydas', tiles:'Zr1881o', speedpad:'UEpX1wb', speedpadRed:'tUC9CMG', speedpadBlue:'5yA3IOx', portal:'6Lbd9Aw', portalRed:'jjzx96q', portalBlue:'7G3Iete', splats:'ZGSTp2s' };
extraPacks['Mario'] = { author:'MagicPigeon', tiles:'0ErN4Be', speedpad:'zImnW1i', speedpadRed:'AXEDaAv', speedpadBlue:'mH8Qww0', portal:'BLIVace', portalRed:'V7MgidB', portalBlue:'zdxJIsh', splats:'9dAtpMy' };
extraPacks['Minima'] = { author:'Canvas', tiles:'KAk9TN9', speedpad:'pJEZKnh', speedpadRed:'OlDPpdM', speedpadBlue:'HgmJ9yg', portal:'DeevRGe', portalRed:'qIr4I3Q', portalBlue:'ivH0IGP', splats:'ytIIuQS' };
extraPacks['Next Classic'] = { author:'TagPro (e:MagicPigeon)', tiles:'ulQFpn7', speedpad:'w7pW8SC', speedpadRed:'FHjSv04', speedpadBlue:'SSK4Hno', portal:'0n54Ry0', portalRed:'CwAswnO', portalBlue:'Nc3z5R0', splats:'GObCQoT' };
extraPacks['Nilla'] = { author:'Dotsarecool', tiles:'kuPdAXV', speedpad:'39zXNPL', speedpadRed:'bo4m727', speedpadBlue:'EFk5IgL', portal:'KdEHGtf', portalRed:'oGVju5k', portalBlue:'GYkkAbP', splats:'kHUlTwP' };
extraPacks['Pixelated'] = { author:'iso', tiles:'vmnTlEK', speedpad:'ZfS3vb1', speedpadRed:'Ao8vGcn', speedpadBlue:'MW7K5PV', portal:'JXTmmen', portalRed:'2lmwRmQ', portalBlue:'nGjufPG', splats:'LFoPM44' };
extraPacks['Precision Light'] = { author:'Peach Fuzz', tiles:'Am6Qyti', speedpad:'7c319hy', speedpadRed:'iVNsHxj', speedpadBlue:'7VLvFMa', portal:'g02XoVB', portalRed:'OsgRBja', portalBlue:'wJ6sB0R', splats:'MoZUrDl' };
extraPacks['Seaweed G/B'] = { author:'Borgen', tiles:'Kh4jUfE', speedpad:'ONxlcFL', speedpadRed:'y3MZi7c', speedpadBlue:'DpJS96w', portal:'44fPSBq', portalRed:'cjc5yCI', portalBlue:'TudqQxp', splats:'ipV54ze' };
extraPacks['Seaweed R/B'] = { author:'Borgen', tiles:'RslLcen', speedpad:'A6cNVb3', speedpadRed:'DwUHM2I', speedpadBlue:'DpJS96w', portal:'44fPSBq', portalRed:'UPtbjUf', portalBlue:'TudqQxp', splats:'ZrimG2x' };
extraPacks['Starlight R/B'] = { author:'MagicPigeon (e:nabby)', tiles:'j0el5Tn', speedpad:'22t8hoV', speedpadRed:'EfQFr4G', speedpadBlue:'hPMDhD5', portal:'rGEEQ2s', portalRed:'ArRiWHP', portalBlue:'o4KzG9S', splats:'IIFG2nS' };
extraPacks['Star Wars'] = { author:'Moosen', tiles:'1GQnONe', speedpad:'WgeuDEz', speedpadRed:'cqY1LTe', speedpadBlue:'bCUoqXq', portal:'FtLHfuz', portalRed:'F1UN69x', portalBlue:'yfUoLSG', splats:'XIndyGS' };
extraPacks['TagPro Ultra'] = { author:'MuscleCups', tiles:'qTjavFh', speedpad:'dLPehvN', speedpadRed:'U9eQnIa', speedpadBlue:'CtRmTaF', portal:'yiLdTR9', portalRed:'cLWhG0s', portalBlue:'fvWzla4', splats:'TTuhrS5' };
extraPacks['Tranquility Dark'] = { author:'R e t r o', tiles:'fb8ueHE', speedpad:'tZE7l6b', speedpadRed:'AGMgt6S', speedpadBlue:'nokGBIr', portal:'gFC1dUu', portalRed:'FqYGMuW', portalBlue:'iKUiEnZ', splats:'tDsbgPv' };
extraPacks['Ultra Smooth'] = { author:'ProfessorTag', tiles:'Nw0EqWH', speedpad:'zxubWbQ', speedpadRed:'yJGhLPt', speedpadBlue:'K02G9jE', portal:'hffUZ2J', portalRed:'4Joo3sG', portalBlue:'8VvNidX', splats:'xMMkRce' };
extraPacks['Vanilla Pro'] = { author:'ProfessorTag', tiles:'ZKAwVRG', speedpad:'6h2Fna8', speedpadRed:'pF4l9SO', speedpadBlue:'NlepAuW', portal:'qpg0wCt', portalRed:'yILzRv7', portalBlue:'fxkDM5R', splats:'ABTYq4t' };
extraPacks['Vortex'] = { author:'MagicPigeon', tiles:'CLgkyxU', speedpad:'hL1YlFu', speedpadRed:'gxQeYTw', speedpadBlue:'pbXh4b1', portal:'H1cHH5w', portalRed:'9LWbFDt', portalBlue:'ruAfiuz', splats:'36fUJG2' };
//extraPacks['Whix Grey'] = { author:'Nabby', tiles:'E9Qjdw6', speedpad:'22t8hoV', speedpadRed:'EfQFr4G', speedpadBlue:'hPMDhD5', portal:'lfczV8G', splats:'F799BFp' };
extraPacks['Whix Light'] = { author:'Nabby', tiles:'Z05ydSW', speedpad:'22t8hoV', speedpadRed:'EfQFr4G', speedpadBlue:'hPMDhD5', portal:'lfczV8G', portalRed:'XqtoFrL', portalBlue:'gctQiqp', splats:'F799BFp' };
//extraPacks['Whix Dark'] = { author:'Nabby', tiles:'xw3lN2o', speedpad:'22t8hoV', speedpadRed:'EfQFr4G', speedpadBlue:'hPMDhD5', portal:'lfczV8G', splats:'F799BFp' };
extraPacks['Yin-Yang'] = { author:'Browncoat', tiles:'kTVchxk', speedpad:'NVPIQ1y', speedpadRed:'e18kH49', speedpadBlue:'lv8pcWF', portal:'DZried3', portalRed:'5p8c12d', portalBlue:'u2cEpx8', splats:'0GTWyyW' };
//extraPacks['YYRB'] = { author:'Browncoat (e:nabby)', tiles:'nDW1Tip', speedpad:'sTqwM4n', speedpadRed:'7tZjFli', speedpadBlue:'pF3xUlZ', portal:'Qb4iyjY', splats:'TqJKyQR' };
extraPacks['Yin-Yang R/B'] = { author:'Browncoat (e:nabby)', tiles:'qkaeirQ', speedpad:'sTqwM4n', speedpadRed:'7tZjFli', speedpadBlue:'pF3xUlZ', portal:'DZried3', portalRed:'7OcViMr', portalBlue:'4jo81wm', splats:'TqJKyQR' };
//extraPacks['YYRB Dark'] = { author:'Browncoat (e:nabby)', tiles:'4RMaqMn', speedpad:'sTqwM4n', speedpadRed:'7tZjFli', speedpadBlue:'pF3xUlZ', portal:'Qb4iyjY', splats:'TqJKyQR' };
$.each($('#custom').find('input[type="text"]'), function() {
const type = this.id;
const name = $(this).siblings('label').text();
$(this).siblings('label').after('<select id="BTP_Packs_'+type+'" class="BTP_Packs" style="margin:0 0 0 5px; width:20px; color:black; font-size:12px; border-radius:5px;" title="Loads a SINGLE link for &quot;'+name+'&quot;"></select>');
$('#BTP_Packs_'+type).append('<optgroup label="Default Packs..." style="color:#e00; font-size:14px">');
$.each(texturePacks, function(key, value) {
$('#BTP_Packs_'+type).append('<option value="' + value[type] + '"' + (value.author ? ' title="Created by ' + value.author + '"' : '') + '>' + value.name + '</option>');
});
$('#BTP_Packs_'+type).append('</optgroup>');
$('#BTP_Packs_'+type).append('<optgroup label="Unofficial Packs..." style="color:#e00; font-size:14px">');
$.each(extraPacks, function(key, value) {
if (value.hasOwnProperty(type)) {
let url = value[type].startsWith('/') ? value[type] : 'https://i.imgur.com/' + value[type] + '.png';
$('#BTP_Packs_'+type).append('<option value="' + url + '"' + (value.author ? ' title="Created by ' + value.author + '"' : '') + '>' + key + '</option>');
}
});
$('#BTP_Packs_'+type).append('</optgroup>');
});
$.each(myPacks, function(key, value) {
createNewPackIcon(key);
});
$('#BTP_ShowPreviewAll').after('<div style="position:absolute; right:0; margin:-10px 12px 0 0; font-size:12px;" title="You also need to click &quot;Import Textures&quot; to save/use them in a game."<span>Load Complete Pack: </span><select id="BTP_ExtraPacks" style="width:20px; color:black; border-radius:4px;"></select></div>');
$('#BTP_ShowPreviewAll').after('<div id="BTP_ClickToSave" style="position:absolute; display:none; left:0; margin:15px 0 0px 220px; font-size:15px; color:chartreuse;">&#129188; Click to Save</div>');
$('#BTP_ExtraPacks').append('<optgroup label="Default Packs..." style="color:#e00; font-size:14px">');
$.each(texturePacks, function(key, value) {
$('#BTP_ExtraPacks').append('<option value="' + key + '"' + (value.author ? ' title="Created by ' + value.author + '"':'')+'>' + value.name + '</option>');
});
$('#BTP_ExtraPacks').append('<optgroup label="Extra Packs..." style="color:#e00; font-size:14px">');
$.each(extraPacks, function(key, value) {
$('#BTP_ExtraPacks').append('<option value="' + key + '"' + (value.author ? ' title="Created by ' + value.author + '"':'') + '>' + key + '</option>');
});
$('#BTP_ExtraPacks').on('change', function() {
let val = this.value;
$.each($('#custom').find('input[type="text"]'), function() {
if ($.isNumeric(val)) {
if (texturePacks[val].hasOwnProperty(this.id)) {
$('#'+this.id).val(texturePacks[val][this.id]);
} else {
$('#'+this.id).val('');
}
} else {
if (extraPacks[val].hasOwnProperty(this.id)) {
$('#'+this.id).val(extraPacks[val][this.id].startsWith('/') ? extraPacks[val][this.id] : 'https://i.imgur.com/' + extraPacks[val][this.id] + '.png');
} else {
$('#'+this.id).val('');
}
}
});
$('#BTP_ClickToSave').finish().fadeIn(200).delay(2500).fadeOut(200);
});
$('.BTP_Packs').on('change', function() {
$(this).siblings('input[type="text"]').val(this.value);
$('#BTP_ClickToSave').finish().fadeIn(200).delay(2500).fadeOut(200);
});
};
const 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.1,"x":13,"y":6,"tx":480,"ty":80},"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}}};
const 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} };
const 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}};
function updateSizes(size) {
$('#BTP_PreviewSize').val(size);
$('#BTP_PreviewSizeValue').text(size + '%');
$('.col-md-4').css('width', size + '%');
if (size <= 7) {
$('.texture-packs .texture-choice .name').css({ 'font-size':'9px' });
$('.texture-packs .texture-choice .author').hide();
$('.texture-packs .texture-choice .texture-popularity').hide();
$('.BTP_Preview_Footer_Item').hide();
} else if (size <= 9) {
$('.texture-packs .texture-choice .name').css({ 'font-size':'10px' });
$('.texture-packs .texture-choice .author').css({ 'font-size':'9px' }).hide();
$('.texture-packs .texture-choice .texture-popularity').css({ 'font-size':'9px' }).show();
$('.BTP_Preview_Footer_Item').hide();
} else if (size < 30) {
$('.texture-packs .texture-choice .name').css({ 'font-size':'13px' });
$('.texture-packs .texture-choice .author').css({ 'font-size':'11px' }).show();
$('.texture-packs .texture-choice .texture-popularity').css({ 'font-size':'11px' }).show();
$('.BTP_Preview_Footer_Item').show();
} else {
$('.texture-packs .texture-choice .name').css({ 'font-size':'15px' });
$('.texture-packs .texture-choice .author').css({ 'font-size':'13px' }).show();
$('.texture-packs .texture-choice .texture-popularity').css({ 'font-size':'11px' }).show();
$('.BTP_Preview_Footer_Item').show();
}
}
$('#BTP_PreviewSize').on('input', function() {
$('#BTP_PreviewSizeValue').text(this.value + '%');
});
$('#BTP_PreviewSize').on('change', function() {
GM_setValue('size', this.value);
updateSizes(this.value);
});
$('#BTP_PreviewShowImages').on('click', function() {
GM_setValue('shownewimages', this.checked);
if (this.checked) {
$('.texture-image').fadeOut(100, function() {
$('.BTP_PreviewCanvas').fadeIn(100);
});
} else {
$('.BTP_PreviewCanvas').fadeOut(100, function() {
$('.texture-image').fadeIn(100);
});
}
});
let getCurrentPack = function() {
let currentPack = {};
$.each($('#custom').find('input[type="text"]'), function() {
currentPack[this.id] = this.value;
});
return currentPack;
};
function createNewPackIcon(name) {
let myPacks = GM_getValue('myPacks', {});
$('#BTP_MySavedPacks').append('<div class="BTP_MySavedPack" data-name="'+name+'" data-tiles="'+myPacks[name].tiles+'" data-speedpad="'+myPacks[name].speedpad+'" data-portal="'+myPacks[name].portal+'" title="Load this saved custom textures pack"><div class="BTP_DeleteSavedPack" title="Delete this saved custom textures pack">x</div><div class="BTP_MySavedPackLabel">'+name+'</div></div>');
}
$('#BTP_SaveMyPack').on('click', function() {
let name = prompt('Texture pack name:');
if (name) {
let myPacks = GM_getValue('myPacks', {});
let currentPack = getCurrentPack();
let isNewPack = true;
if (myPacks.hasOwnProperty(name)) {
if (!confirm('"'+name+'" already exists - OK to overwrite?\n\n')) return;
$('#BTP_MySavedPacks').find('.BTP_MySavedPack[data-name="' + name + '"]').data('tiles', currentPack.tiles).data('speedpad', currentPack.speedpad).data('portal', currentPack.portal);
isNewPack = false;
delete myPacks[name];
}
myPacks[name] = currentPack;
GM_setValue('myPacks', myPacks);
if (isNewPack) {
createNewPackIcon(name);
}
$('#custom-textures-btn').trigger('click');
}
}).hover(function() {
$(this).css('opacity', '1');
}, function() {
$(this).css('opacity', '0.7');
});
$('#BTP_MySavedPacks').on('click', '.BTP_MySavedPack', function() {
let myPacks = GM_getValue('myPacks', {});
let name = $(this).data('name');
if (myPacks.hasOwnProperty(name)) {
$.each(myPacks[name], function(key, value) {
$('#'+key).val(value);
});
$('#custom-textures-btn').trigger('click');
}
});
$('#BTP_MySavedPacks').on('mouseenter', '.BTP_MySavedPack', function() {
$(this).css('opacity', '1');
$(this).find('.BTP_DeleteSavedPack').show();
}).on('mouseleave', '.BTP_MySavedPack', function() {
$(this).css('opacity', '0.7');
$(this).find('.BTP_DeleteSavedPack').hide();
});
function makePreview(target) {
let canvas = document.createElement('canvas');
createAnimatedCanvas(canvas, $('#BTP_Hover'), function(BTP_Hover) {
$(BTP_Hover).append('<div id="BTP_X" style="text-align:center;"></div>');
$('#BTP_X').append(canvas);
$(canvas).attr('id', 'BTP_Canvas_X');
canvas = null;
let bg = $('#BTP_Canvas_X')[0].toDataURL('image/png');
$(BTP_Hover).text('').append('<canvas id="BTP_Hover_Canvas" width="640" height="440" style="background-image: url('+bg+');"></canvas>');
$(target).append('<img src="'+$(BTP_Hover).data('tiles')+'" class="img-responsive BTP_CanRemove" style="display:none">');
$(target).append('<img src="'+$(BTP_Hover).data('speedpad')+'" class="BTP_SpeedPad BTP_CanRemove" style="display:none">');
$(target).append('<img src="'+$(BTP_Hover).data('portal')+'" class="BTP_Portal BTP_CanRemove" style="display:none">');
window.requestAnimationFrame(animatePreview);
});
}
const $BTP_LoadSubItems = $('<div id="BTP_LoadSubItems" style="position:absolute; display:flex; flex-flow:column; align-items:center; width:100px; top:-50px; right:-100px; padding:2px; font-size:10px; color:white; text-align:center; background:#111; border:1px solid #666; border-radius:5px; z-index:9;">' +
' <span class="BTP_SavedSubItem" data-target="tiles" title="Load Tiles">Tiles</span>' +
' <span class="BTP_SavedSubItem" data-target="speedpad" title="Load Speedpad (Yellow)">Speedpad</span>' +
' <span class="BTP_SavedSubItem" data-target="speedpadRed" title="Load Speedpad (Red)">Speedpad Red</span>' +
' <span class="BTP_SavedSubItem" data-target="speedpadBlue" title="Load Speedpad (Blue)">Speedpad Blue</span>' +
' <span class="BTP_SavedSubItem" data-target="portal" title="Load Portal">Portal</span><span class="BTP_SavedSubItem" data-target="portalRed" title="Load Red Portal">Portal Red</span>' +
' <span class="BTP_SavedSubItem" data-target="portalBlue" title="Load Blue Portal">Portal Blue</span><span class="BTP_SavedSubItem" data-target="splats" title="Load Splats">Splats</span>' +
'</div>');
$('#BTP_MySavedPacks').hoverIntent(function() {
let tilesImg = new Image();
//$('#BTP_MySavedPacks').append('<div id="BTP_Hover" style="position:absolute; display:inline-block; bottom:' + ($('#BTP_MySavedPacks').height() - 30) + 'px; right:-10px; padding:10px; background:#111; box-shadow:0px 0px 9px white; border:1px solid #666; border-radius:5px; z-index:9999;">Generating Preview...</div>');
$('#BTP_MySavedPacks').append('<div id="BTP_Hover" style="position:absolute; display:inline-block; top:-470px; right:-10px; padding:10px; background:#111; box-shadow:0px 0px 9px white; border:1px solid #666; border-radius:5px; z-index:1;">Generating Preview...</div>');
$('#BTP_Hover').data('tiles', $(this).data('tiles'));
$('#BTP_Hover').data('speedpad', $(this).data('speedpad'));
$('#BTP_Hover').data('portal', $(this).data('portal'));
tilesImg.onload = function() {
makePreview($('#BTP_MySavedPacks'));
};
tilesImg.crossOrigin = "Anonymous";
tilesImg.src = $(this).data('tiles');
//$(this).append('<div id="BTP_LoadSubItems" style="position:absolute; display:flex; flex-flow:column; align-items:center; width:100px; top:-50px; right:-100px; padding:2px; font-size:10px; color:white; text-align:center; background:#111; border:1px solid #666; border-radius:5px; z-index:9;"><span class="BTP_SavedSubItem" data-target="tiles" title="Load Tiles">Tiles</span><span class="BTP_SavedSubItem" data-target="speedpad" title="Load Speedpad (Yellow)">Speedpad</span><span class="BTP_SavedSubItem" data-target="speedpadRed" title="Load Speedpad (Red)">Speedpad Red</span><span class="BTP_SavedSubItem" data-target="speedpadBlue" title="Load Speedpad (Blue)">Speedpad Blue</span><span class="BTP_SavedSubItem" data-target="portal" title="Load Portal">Portal</span><span class="BTP_SavedSubItem" data-target="splats" title="Load Splats">Splats</span></div>');
$(this).append($BTP_LoadSubItems);
$('#BTP_LoadSubItems').show();
}, function() {
$('#BTP_Hover').remove();
$('#BTP_LoadSubItems').hide();
$('.BTP_CanRemove').remove();
}, '.BTP_MySavedPack');
$('#BTP_MySavedPacks').on('click', '.BTP_DeleteSavedPack', function(e) {
e.stopPropagation();
e.preventDefault();
let myPacks = GM_getValue('myPacks', {});
let name = $(this).parent().data('name');
if (name && myPacks.hasOwnProperty(name)) {
if (!confirm('Delete saved pack "'+name+'?\n\n')) return;
delete myPacks[name];
GM_setValue('myPacks', myPacks);
let $this = $(this).parent();
//$BTP_LoadSubItems.appendTo( $('#BTP_MySavedPacks') );
$this.fadeOut(600, function() { $this.remove(); });
$('#custom').find('select').find('option[data-name="'+name+'"]').remove();
}
});
$('#BTP_MySavedPacks').on('mouseenter', '.BTP_DeleteSavedPack', function() {
$(this).css('opacity', '1');
}).on('mouseleave', '.BTP_DeleteSavedPack', function() {
$(this).css('opacity', '0.7');
});
$('#BTP_MySavedPacks').on('click', '.BTP_SavedSubItem', function(e) {
e.stopPropagation();
e.preventDefault();
let myPacks = GM_getValue('myPacks', {});
let name = $(this).parent().parent().data('name');
if (name && myPacks.hasOwnProperty(name)) {
$('#' + this.dataset.target).val( myPacks[name][this.dataset.target] );
$(this).fadeOut(40, function() {
$(this).fadeIn(40);
});
}
});
$('#BTP_MySavedPacks').on('mouseenter', '.BTP_SavedSubItem', function() {
$(this).css('opacity', '1');
}).on('mouseleave', '.BTP_SavedSubItem', function() {
$(this).css('opacity', '0.7');
});
$('.BTP_Packs').on('change', function() {
$(this).siblings('input[type="text"]').val($(this).val());
});
//Add previews to the "Import Custom" tab...
$('#custom').append('<div id="BTP_PreviewerSingle" style="position:absolute; display:none; background:#000 url(\'/textures/classic/tiles.png\') center / contain no-repeat; width:640px; height:440px; top:64px; right:0px; box-shadow:0px 0px 9px white; border-radius:5px; z-index:9998;"></div>');
$('#custom').hoverIntent(function() {
let id = $(this).siblings('input').attr('id');
let value = $(this).siblings('input').val();
let width = '640px';
let height = '40px';
if (!value || (!value.startsWith('http') && !value.startsWith('/')) || !value.endsWith('.png')) value = '/textures/classic/'+id+'.png';
if (id === 'tiles') height = '440px';
else if (id === 'splats') height = '240px';
$('#BTP_Previewer').show();
$(this).before( $('#BTP_PreviewerSingle') );
$('#BTP_PreviewerSingle').css({ 'background':'url(\''+value+'\') center / contain no-repeat, url(\'https://i.imgur.com/dMJWIkH.png\') repeat', 'width':width, 'height':height }); //nlYzk7P, u2XaIY6, TM1EGPY
$('#BTP_PreviewerSingle').fadeIn(50);
}, function() {
$('#BTP_PreviewerSingle').fadeOut(50);
}, '.BTP_ShowPreview');
$('#BTP_ShowPreviewAll').hoverIntent(function() {
let tilesImg = new Image();
$('#BTP_ShowPreviewAll').append('<div id="BTP_Hover" style="position:absolute; display:inline-block; bottom:20px; right:-10px; padding:10px; background:#111; box-shadow:0px 0px 9px white; border:1px solid #666; border-radius:5px; z-index:1;">Generating Preview...</div>');
$('#BTP_Hover').data('tiles', $('#tiles').val());
$('#BTP_Hover').data('speedpad', $('#speedpad').val());
$('#BTP_Hover').data('portal', $('#portal').val());
tilesImg.onload = function() {
makePreview($('#BTP_ShowPreviewAll'));
};
tilesImg.crossOrigin = "Anonymous";
tilesImg.src = $('#tiles').val();
}, function() {
$('#BTP_Hover').remove();
$('.BTP_CanRemove').remove();
});
$('#BTP_OutputLinks').on('click', function() {
console.log('\n' +
'Tiles: ' + $('#tiles').val() + '\n' +
'Speedpad: ' + $('#speedpad').val() + '\n' +
'Speedpad (Red): ' + $('#speedpadRed').val() + '\n' +
'Speedpad (Blue): ' + $('#speedpadBlue').val() + '\n' +
'Portal: ' + $('#portal').val() + '\n' +
'Portal (Red): ' + $('#portalRed').val() + '\n' +
'Portal (Blue): ' + $('#portalBlue').val() + '\n' +
'Splats: ' + $('#splats').val() + '\n' +
($('#gravityWell').val() ? 'Gravity Well: ' + $('#gravityWell').val() : '') + '\n');
});
$('#texture-list').on('click', '.BTP_PreventDefaultClickOverlay', function() {
const name = this.dataset.name;
const src = $('.texture-image[id="' + name + '"]').attr('src');
$('#BTP_Default_Preview').empty();
$('#BTP_Default_Preview').attr('data-name', name);
$(this).parent().append( $('#BTP_Default_Preview') );
$('#BTP_Default_Preview').append('<img class="img-responsive" src="' + src + '" \>');
$('#BTP_Default_Preview').fadeIn(100);
});
$('#texture-list').on('click', '.BTP_Preview_Footer_Item', function(e) {
e.stopPropagation();
const name = this.dataset.name;
const src = $('.texture-image[id="' + name + '"]').attr('src');
const url = src.slice(0, src.lastIndexOf('/') + 1);
const key = src.replace(url, '').replace('.png', '')
$('#BTP_Default_Preview').empty();
$('#BTP_Default_Preview').attr('data-name', name);
$(this).parent().append( $('#BTP_Default_Preview') );
$('#BTP_Default_Preview').append('<img class="img-responsive" src="/textures/' + key + '/tiles.png" style="background:url(\'https://i.imgur.com/dMJWIkH.png\') repeat;" \>');
$('#BTP_Default_Preview').fadeIn(100);
});
$('#texture-list').on('click', '#BTP_Default_Preview', function(e) {
e.stopPropagation();
$('#BTP_Default_Preview').fadeOut(50, function() {
$('#BTP_Default_Preview').empty();
$('#texture-list').append( $('#BTP_Default_Preview') );
});
});
$('#BTP_Redraw_Previews').on('click', function() {
$('.BTP_PreviewCanvas').empty();
createNewPreviews(false);
});
// this is just the built-in TagPro code for saving a Texture Pack...
function setCustom(key, value) {
$("#" + key).val(value || "");
}
function setCustomPackValues(pack) {
$(".texture-url").val("");
for (let k in pack) {
if (k === "name") {
continue;
}
setCustom(k, pack[k]);
}
}
function setActivePack(pack) {
$(".texture-choice").removeClass("active-pack");
$(".texture-choice[data-name='" + pack.name + "']").addClass("active-pack");
setCustomPackValues(pack);
}
if (!currentTextures) {
try {
currentTextures = JSON.parse($.cookie("textures"));
} catch (e) {
currentTextures = {};
}
}
$('#texture-list').on('click', '.BTP_Preview_Footer_Set', function(e) {
e.stopPropagation();
let choice = $(this);
let name = choice.data("name");
let selected = {name: "custom"};
for (let i = 0; i < texturePacks.length; i++) {
let pack = texturePacks[i];
if (pack.name === name) {
selected = pack;
break;
}
}
if (loggedIn) {
$.post("/textures", selected).then(function() {
setActivePack(selected);
}).fail(function () {
if ($(".js-connection-error").length) {
return;
}
let message = "We are having connection issues. Please try again in 10 minutes.";
let $error = tagpro.helpers.displayError(message);
$error.find(".msg").addClass("js-connection-error");
});
} else {
setActivePack(selected);
}
$.cookie("textures", JSON.stringify(selected), {
expires: 36500,
path: "/",
domain: tagproConfig.cookieHost
});
});
/*************************/
//Create the new static previews for the default packs on the "Available Packs" tab...
$('#texture-list').append('<div id="BTP_Default_Preview"></div>');
let makePreviewCSS = function(BTP_Hover) {
return {
'background': 'radial-gradient(circle at calc(100% - 64px) 50%, ' + $(BTP_Hover).data('color-redball') + ' 9px, transparent 10px), radial-gradient(circle at calc(100% - 44px) 50%, ' + $(BTP_Hover).data('color-blueball') + ' 9px, transparent 10px) ' + $(BTP_Hover).data('color-floor')
};
};
let createNewPreviews = function(createElements = true) {
const randomGate1 = getRandomInt(0, 3);
const randomGate2 = getRandomInt(0, 2);
const randomPup1 = getRandomInt(0, 3);
const randomPup2 = getRandomInt(0, 2);
const randomFlag = getRandomInt(0, 2);
const randomFlags = [[80, 160], [600, 40], [320, 0]]; // R, B, Y
$('.texture-choice').each(function(index, element) {
let previewImage = $(element).find('img')[0];
if (!previewImage) {
return;
}
let tempCanvas = createCanvas(320, 160);
let tempCtx = tempCanvas.getContext('2d');
let randomGates = [[320, 80], [160, 0], [0, 200], [560, 400]]; // N, R, G, B
let randomPups = [[560, 40], [80, 80], [600, 0], [80, 360]]; // JJ, RB, TP, Empty
let packName = this.dataset.name;
if (createElements) {
$(this).after('<div class="BTP_PreventDefaultClickOverlay" data-name="' + packName + '"></div>'); // this is to prevent clicking anywhere on the pack to set it
$(this).append('<div class="BTP_PreviewCanvas" data-name="' + packName + '"></div>');
$('.BTP_PreventDefaultClickOverlay[data-name="' + packName + '"]').append('<div class="BTP_Preview_Footer">' +
' <span class="BTP_Preview_Footer_Set" data-name="' + packName + '" title="Set &quot;' + packName + '&quot; as my Texture Pack">Set</span>' +
' <span class="BTP_Preview_Footer_Item" data-name="' + packName + '" data-type="tiles" title="Preview the tiles.png for &quot;' + packName + '&quot;">Tiles</span>' +
'</div>');
}
tempCtx.drawImage(previewImage, 0, 0, 320, 120, 0, 0, 320, 120); // partial preview
tempCtx.drawImage(previewImage, 240, 80, 40, 40, 160, 80, 40, 40); // red ball
tempCtx.drawImage(previewImage, 160, 120, 40, 40, 200, 80, 40, 40); // blue ball
// Random Gates...
tempCtx.drawImage(previewImage, randomGates[randomGate1][0], randomGates[randomGate1][1], 40, 40, 120, 0, 40, 40);
randomGates.splice(randomGate1, 1);
tempCtx.drawImage(previewImage, randomGates[randomGate2][0], randomGates[randomGate2][1], 40, 40, 160, 0, 40, 40);
//Random Pups...
tempCtx.drawImage(previewImage, randomPups[randomPup1][0], randomPups[randomPup1][1], 40, 40, 80, 40, 40, 40);
randomPups.splice(randomPup1, 1);
tempCtx.drawImage(previewImage, randomPups[randomPup2][0], randomPups[randomPup2][1], 40, 40, 80, 120, 40, 40);
// Random Flag...
tempCtx.drawImage(previewImage, randomFlags[randomFlag][0], randomFlags[randomFlag][1], 40, 40, 280, 80, 40, 40);
tempCtx.drawImage(previewImage, 560, 0, 40, 40, 280, 0, 40, 40); // spike
tempCtx.drawImage(previewImage, 480, 200, 80, 40, 40, 80, 80, 40); // bomb & yellow boost
tempCtx.drawImage(previewImage, 0, 400, 80, 40, 0, 120, 80, 40); // wall x2
tempCtx.drawImage(previewImage, 120, 360, 40, 40, 240, 80, 40, 40); // floor
tempCtx.drawImage(previewImage, 120, 360, 200, 40, 120, 120, 200, 40); // floor
$(this).find('.BTP_PreviewCanvas').append(tempCanvas);
$(this).find('.BTP_PreviewCanvas canvas').css({'max-width': '320px', 'width': '-webkit-fill-available' });
if (GM_getValue('shownewimages', true)) {
$('.BTP_PreviewCanvas').show();
}
});
updateSizes(GM_getValue('size', '25'));
document.removeEventListener('visibilitychange', createNewPreviews);
}
addStyles();
loadCustomValues();
if (document.visibilityState === 'hidden') { // the new previews won't all generate if the tab isn't visible
document.addEventListener('visibilitychange', createNewPreviews);
} else {
setTimeout(createNewPreviews, 500); // need to wait for something to be ready here, but not sure what. Images not loaded yet?
}
function createAnimatedCanvas(canvas, pack, callback) {
let tilesImageURL = $(pack).data('tiles');
let tileSize = 40;
let halfTile = tileSize / 2;
canvas.width = map.info.width * tileSize;
canvas.height = map.info.height * tileSize;
let ctx = canvas.getContext("2d", { willReadFrequently: true }); //canvas.getContext("2d");
let img = document.createElement('img');
img.onload = function() {
let tempCanvas = document.createElement('canvas');
tempCanvas.width = 640;
tempCanvas.height = 440;
let tempCtx = tempCanvas.getContext("2d", { willReadFrequently: true }); //tempCanvas.getContext("2d");
//floor, objects..
$.each(map.data, function(key, value) {
ctx.drawImage(img, value.tx, value.ty, 40, 40, value.x*tileSize, value.y*tileSize, tileSize, tileSize);
});
//pups..
$.each(pups, function(key, value) {
ctx.drawImage(img, 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',
tempCtx.drawImage(img, 0, 0);
let pixelData;
pixelData = tempCtx.getImageData(525, 165, 10, 10).data; //floor
$(pack).data('floor', getAverageColor(pixelData, true, false));
pixelData = tempCtx.getImageData(0, 0, 1, 1).data; //wall outer
$(pack).data('wallouter', getAverageColor(pixelData, true, false));
pixelData = tempCtx.getImageData(479, 10, 1, 1).data; //wall outer 2
$(pack).data('wallouter2', getAverageColor(pixelData, true, false));
pixelData = tempCtx.getImageData(165, 125, 20, 20).data; //wall inner
$(pack).data('wallinner', getAverageColor(pixelData, true, false));
pixelData = tempCtx.getImageData(565, 5, 30, 30).data; //redball
$(pack).data('redball', getAverageColor(pixelData, true, false));
pixelData = tempCtx.getImageData(605, 5, 30, 30).data; //blueball
$(pack).data('blueball', getAverageColor(pixelData, true, false));
img.onload = null;
img = null;
ctx = null;
tempCanvas = null;
callback(pack);
};
img.crossOrigin = 'Anonymous';
img.src = tilesImageURL;
}
function animatePreview() {
if (!$('#BTP_Hover_Canvas').length) return;
let bgCanvas = $('#BTP_Hover_Canvas');
let bgCtx = bgCanvas.get(0).getContext("2d", { willReadFrequently: true }); //bgCanvas.get(0).getContext("2d");
let tilesImg = $('#BTP_Hover').siblings('img.img-responsive')[0];
let speedpadImg = $('#BTP_Hover').siblings('img.BTP_SpeedPad')[0];
let portalImg = $('#BTP_Hover').siblings('img.BTP_Portal')[0];
let drawPop = 0;
let popStartSize = 100;
let popStep = 10;
let extraAnimFramePos = 0; //for speedpad, portal
let frameCount = 0;
let 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 },
};
const fps = 60;
const interval = 1000 / fps;
let now;
let then = Date.now();
let delta;
let animate = function() {
if (!$('#BTP_Hover_Canvas').length) return;
requestAnimationFrame(animate);
now = Date.now();
delta = now - then;
if (delta > interval) {
then = now - (delta % interval);
bgCtx.clearRect(0, 0, 640, 440);
bgCtx.fillStyle = 'rgba(255,128,0,0.1)'; //for ball pop
for (const key in animObjects) {
let value = animObjects[key];
let draw = true;
let 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(tilesImg, value.tx,value.ty,40,40, -20,-20,40,40);
bgCtx.translate(-pt.x, -pt.y);
bgCtx.restore();
} else {
bgCtx.drawImage(tilesImg, 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 ($('#BTP_Hover_Canvas').length) requestAnimationFrame(animate);
}
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
function getAverageColor(data, asHex=false, ignoreGrey=false, pixelInterval=1) {
let rgb = { r:null, g:null, b:null };
let length = data.length;
let count = 0;
let i = -4;
while ((i += pixelInterval * 4) < length) {
//let b = data[i] * 0.299 + data[i+1] * 0.587 + data[i+2] * 0.114;
let isGrey = ignoreGrey && (Math.abs(data[i] - data[i+1]) + Math.abs(data[i+1] - data[i+2]) < 10);
if (!isGrey && data[i+3]) {
rgb.r += data[i];
rgb.g += data[i+1];
rgb.b += data[i+2];
count++;
}
}
if (count === 0) {
return null; //transparent (or mono if ignoreGrey is true)
}
rgb.r = Math.floor(rgb.r / count);
rgb.g = Math.floor(rgb.g / count);
rgb.b = Math.floor(rgb.b / count);
if (asHex) {
return rgbToHex(rgb.r, rgb.g, rgb.b).slice(0, 7);
} else {
return rgb;
}
}
function calcBezierPoint(t, p0, p1, p2, p3) {
let data = [p0, p1, p2, p3];
let at = 1 - t;
for (let i = 1; i < data.length; i++) {
for (let 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];
}
function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment