Last active
November 2, 2016 03:31
-
-
Save nabbynz/5e3047ff992f9f027b6641881bb98b5a to your computer and use it in GitHub Desktop.
TagPro Texture Page Enhancer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name TagPro Texture Page Enhancer | |
| // @description Add options for previews, spin, transparency, backgrounds. | |
| // @version 0.2.2 | |
| // - Added thumbnails for "My Saved Packs". | |
| // - Added "My Saved Packs" & removed the "Load/Save Custom Links" buttons. | |
| // - Added a "Clear All" button and fixed up some things. | |
| // @include http://tagpro-*.koalabeast.com/textures/ | |
| // @include http://tagpro-*.koalabeast.com:* | |
| // @updateURL https://gist.github.com/nabbynz/5e3047ff992f9f027b6641881bb98b5a/raw/TagPro_Texture_Page_Enhancer.user.js | |
| // @downloadURL https://gist.github.com/nabbynz/5e3047ff992f9f027b6641881bb98b5a/raw/TagPro_Texture_Page_Enhancer.user.js | |
| // @grant GM_getValue | |
| // @grant GM_setValue | |
| // @grant GM_deleteValue | |
| // @grant GM_addStyle | |
| // @author Dr.Holmes & ballparts & nabby | |
| // ==/UserScript== | |
| console.log('START: ' + GM_info.script.name + ' (v' + GM_info.script.version + ' by ' + GM_info.script.author + ')'); | |
| //GM_deleteValue('options') //for testing | |
| var defaultOptions = { | |
| spin: true, | |
| transparency: '0', | |
| fadingSplats: false, | |
| transparentBackground: true, | |
| modifyTP: false, | |
| modifyRB: false, | |
| modifyJJ: false, | |
| addSBPosLabels: false, | |
| wp_type: 'gradient', | |
| wp_imagedata: '', | |
| wp_stretch: true, | |
| wp_gradientType: 'circle', | |
| wp_gradient_red: true, | |
| wp_gradient_green: false, | |
| wp_gradient_blue: false, | |
| wp_gradient_orange: false, | |
| wp_gradient_light: false, | |
| wp_gradient_dark: false, | |
| wp_color: '#000040', | |
| wp_color1: '#554444', | |
| wp_color2: '#552222' | |
| }; | |
| var options = $.extend(true, {}, defaultOptions, GM_getValue('options', defaultOptions)); | |
| tagpro.ready(function() { | |
| if (window.location.port) { //we're in a game... | |
| var tr = tagpro.renderer; | |
| //Set the wallpaper... | |
| if (options.wp_type === 'image') { | |
| if (options.wp_imagedata) { | |
| $('html').css('background', '#000 url("'+options.wp_imagedata+'") center / ' + (options.wp_stretch ? 'cover' : 'contain') + ' no-repeat fixed'); | |
| } | |
| } else if (options.wp_type === 'color') { | |
| $('body.game-page').css('background', options.wp_color || '#000000'); | |
| } else if (options.wp_type === 'gradient') { | |
| if (options.wp_gradientType === 'circle') { | |
| $('html').css('background', 'radial-gradient(circle, ' + (options.wp_color1 || '#554444') + ', ' + (options.wp_color2 || '#552222') + ')'); | |
| } else if (options.wp_gradientType === 'ellipse') { | |
| $('html').css('background', 'radial-gradient(' + (options.wp_color1 || '#554444') + ', ' + (options.wp_color2 || '#552222') + ')'); | |
| } else if (options.wp_gradientType === 'horizontal') { | |
| $('html').css('background', 'linear-gradient(to right, ' + (options.wp_color1 || '#554444') + ', ' + (options.wp_color2 || '#552222') + ')'); | |
| } else if (options.wp_gradientType === 'vertical') { | |
| $('html').css('background', 'linear-gradient(' + (options.wp_color1 || '#554444') + ', ' + (options.wp_color2 || '#552222') + ')'); | |
| } | |
| } | |
| //Game Background Transparency... | |
| if (options.transparentBackground) { | |
| var oldCanvas = $(tr.canvas); | |
| var newCanvas = $('<canvas id="viewport" width="1280" height="800"></canvas>'); | |
| oldCanvas.after(newCanvas); | |
| oldCanvas.remove(); | |
| tr.canvas = newCanvas.get(0); | |
| tr.options.transparent = true; | |
| tr.renderer = tr.createRenderer(); | |
| tr.resizeAndCenterView(); | |
| newCanvas.show(); | |
| } | |
| //Faded Splats... | |
| if (options.fadingSplats) { | |
| tr.drawSplat = function (x, y, team, showDeath, fadeAway) { | |
| var startColor, stopColor; | |
| if (team === 1) { | |
| startColor = "ff0000"; | |
| } else { | |
| startColor = "0000ff"; | |
| } | |
| stopColor = "ffffff"; | |
| if (showDeath) { | |
| if (tr.options.disableParticles) { | |
| tr.drawBallPop(x + 19, y + 19, team); | |
| } else { | |
| tr.startDeathEmitter(startColor, stopColor, x + 19, y + 19); | |
| } | |
| } | |
| fadeAway = true; | |
| tr.addSplat(team, x, y, fadeAway); | |
| }; | |
| } | |
| //Ball Transparency... | |
| if (options.transparency) { | |
| tr.createBallSprite = function(player) { | |
| var texture = player.team == 1 ? "redball" : "blueball"; | |
| player.sprites.actualBall = tagpro.tiles.draw(player.sprites.ball, texture, {x: 0, y: 0}, null, null, 0.01); | |
| player.sprites.actualBall.tileId = texture; | |
| player.sprites.actualBall.alpha = ((100 - options.transparency) / 100); | |
| player.sprites.actualBall.anchor.x = 0.5; | |
| player.sprites.actualBall.anchor.y = 0.5; | |
| player.sprites.actualBall.x = 20; | |
| player.sprites.actualBall.y = 20; | |
| }; | |
| } | |
| //Spin... | |
| if (options.spin) { | |
| var uPSP = tr.updatePlayerSpritePosition; | |
| tr.updatePlayerSpritePosition = function(player) { | |
| player.sprites.actualBall.rotation = player.angle; | |
| uPSP(player); | |
| }; | |
| } | |
| //modify juke juice effect (makes the jj icon a small blue circle = no lag for live player position script!)... | |
| if (options.modifyJJ) { | |
| tr.updateGrip = function (player, context, drawPos) { | |
| if (player.grip) { | |
| if (!player.sprites.grip) { | |
| player.sprites.grip = new PIXI.Graphics(); | |
| player.sprites.grip.beginFill(0x40a8a5, 1).lineStyle(2, 0x235957).drawCircle(3, 37, 5); | |
| player.sprites.ball.addChild(player.sprites.grip); | |
| } | |
| } else { | |
| if (player.sprites.grip) { | |
| player.sprites.ball.removeChild(player.sprites.grip); | |
| player.sprites.grip = null; | |
| } | |
| } | |
| }; | |
| } | |
| //modify tagpro effect (2px wide, 1px smaller diameter)... | |
| if (options.modifyTP) { | |
| tr.updateTagpro = function(player) { | |
| if (player.tagpro) { | |
| if (!tr.options.disableParticles && !player.sprites.tagproSparks) { | |
| player.sprites.tagproSparks = new cloudkid.Emitter( | |
| player.sprites.ball, | |
| [tr.particleFireTexture], | |
| tagpro.particleDefinitions.tagproSparks); | |
| player.sprites.tagproSparks.player = player.id; | |
| tr.emitters.push(player.sprites.tagproSparks); | |
| } | |
| if (!player.sprites.tagproTint) { | |
| player.sprites.tagproTint = new PIXI.Graphics(); | |
| player.sprites.tagproTint.beginFill(0x00FF00, 0.1).lineStyle(2, 0x00FF00).drawCircle(20, 20, 19); | |
| player.sprites.ball.addChild(player.sprites.tagproTint); | |
| } | |
| } else { | |
| if (player.sprites.tagproTint) { | |
| player.sprites.ball.removeChild(player.sprites.tagproTint); | |
| player.sprites.tagproTint = null; | |
| } | |
| if (player.sprites.tagproSparks) { | |
| player.sprites.tagproSparks.emit = false; | |
| var sparksIndex = tr.emitters.indexOf(player.sprites.tagproSparks); | |
| tr.emitters.splice(sparksIndex, 1); | |
| player.sprites.tagproSparks.destroy(); | |
| player.sprites.tagproSparks = null; | |
| } | |
| } | |
| }; | |
| } | |
| //modify rolling bomb effect (faster flashing)... | |
| if (options.modifyRB) { | |
| tr.updateRollingBomb = function(player) { | |
| if (player.bomb) { | |
| if (!player.sprites.bomb) { | |
| if (!tr.options.disableParticles) { | |
| player.sprites.rollingBomb = new cloudkid.Emitter( | |
| player.sprites.ball, | |
| [tr.particleTexture], | |
| tagpro.particleDefinitions.rollingBomb); | |
| tr.emitters.push(player.sprites.rollingBomb); | |
| } | |
| var bomb = player.sprites.bomb = new PIXI.Graphics(); | |
| bomb.beginFill(0xFFCC00, 0.65).drawCircle(20, 20, 19); | |
| player.sprites.ball.addChild(bomb); | |
| } else { | |
| player.sprites.bomb.alpha = Math.abs(0.65 * Math.sin(performance.now() / 75)); | |
| } | |
| } else { | |
| if (player.sprites.bomb) { | |
| player.sprites.ball.removeChild(player.sprites.bomb); | |
| player.sprites.bomb = null; | |
| } | |
| if (player.sprites.rollingBomb) { | |
| if (player.sprites.rollingBomb instanceof cloudkid.Emitter) { | |
| player.sprites.rollingBomb.emit = false; | |
| tr.emitters.splice(tr.emitters.indexOf(player.sprites.rollingBomb), 1); | |
| player.sprites.rollingBomb.destroy(); | |
| } else { | |
| player.sprites.rollingBomb.visible = false; | |
| } | |
| player.sprites.rollingBomb = null; | |
| } | |
| } | |
| }; | |
| } | |
| //shows the current scoreboard position for each player on their ball (idea/code by Rattpack - this is a really cool idea - try it!)... | |
| if (options.addSBPosLabels) { | |
| tr.drawScoreboardPosition = function(playerId, position) { | |
| if (!tagpro.players.hasOwnProperty(playerId)) return; | |
| var player = tagpro.players[playerId]; | |
| if (player.sprites.SBL) player.sprites.info.removeChild(player.sprites.SBL); | |
| player.sprites.SBL = tr.veryPrettyText(position, '#ffd700'); | |
| player.sprites.info.addChild(player.sprites.SBL); | |
| player.sprites.SBL.alpha = 0.6; | |
| player.sprites.SBL.x = 17; | |
| player.sprites.SBL.y = 17; | |
| }; | |
| var getAllPlayers = function() { | |
| var players = []; | |
| for (var playerId in tagpro.players) { | |
| if (tagpro.players.hasOwnProperty(playerId)) { | |
| players.push( { id:playerId, score:tagpro.players[playerId].score } ); | |
| } | |
| } | |
| players.sort(function(a, b) { | |
| return (b.score - a.score ? b.score - a.score : a.id - b.id); | |
| }); | |
| $.each(players, function(key, value) { | |
| tr.drawScoreboardPosition(value.id, key+1); | |
| }); | |
| }; | |
| var clearableInterval = setInterval(function() { | |
| getAllPlayers(); | |
| }, 5000); | |
| } | |
| } else { | |
| /*-------------------------------------------------------------------------------*/ | |
| // Functions... | |
| /*-------------------------------------------------------------------------------*/ | |
| var handleDrop = function(e) { | |
| var data = e.originalEvent.dataTransfer; | |
| if (data.files[0]) { // Handle as a file... | |
| var file = data.files[0]; | |
| var reader = new FileReader(); | |
| reader.onload = function(f){ | |
| options.wp_imagedata = f.target.result; | |
| GM_setValue('options', options); | |
| setTimeout(function() { | |
| updatePreview('wallpaper'); | |
| }, 100); | |
| }; | |
| reader.readAsDataURL(file); | |
| } else { // Handle as a URL... | |
| data.items[0].getAsString(function(u) { | |
| if (u.indexOf('http') !== 0) u = 'http://' + u; | |
| options.wp_imagedata = u; | |
| GM_setValue('options', options); | |
| setTimeout(function() { | |
| updatePreview('wallpaper'); | |
| }, 100); | |
| }); | |
| } | |
| }; | |
| /*-------------------------------------------------------------------------------*/ | |
| var updatePreview = function(caller) { | |
| if ((caller === 'TPE_WP') && ($('#TPE_WP').val() === 'none')) { | |
| $('#TPE_DropZone').css({ 'background': 'none' }); | |
| $('.TPE_WPG_Color').hide(0); | |
| $('.TPE_WPG_Gradient').hide(0); | |
| $('.TPE_WPG_Image').hide(0); | |
| } else if ( (caller === 'TPE_WP_Color') || ((caller === 'TPE_WP') && ($('#TPE_WP').val() === 'color')) ) { | |
| $('#TPE_DropZone').css({ 'background': $('#TPE_WP_Color').val() }); | |
| $('#TPE_WP').val('color'); | |
| $('.TPE_WPG_Color').show(0); | |
| $('.TPE_WPG_Gradient').hide(0); | |
| $('.TPE_WPG_Image').hide(0); | |
| } else if ( (caller === 'TPE_GradientTypes') || (caller === 'TPE_GradientPresets') || (caller === 'TPE_WP_Color1') || (caller === 'TPE_WP_Color2') || ((caller === 'TPE_WP') && ($('#TPE_WP').val() === 'gradient')) ) { | |
| if (caller === 'TPE_GradientPresets') { | |
| var c1 = $('.TPE_WPG_Gradient').find('input[type="radio"]:checked').data('c1'); | |
| var c2 = $('.TPE_WPG_Gradient').find('input[type="radio"]:checked').data('c2'); | |
| options.wp_color1 = c1; | |
| options.wp_color2 = c2; | |
| GM_setValue('options', options); | |
| $('#TPE_WP_Color1').val( c1 ); | |
| $('#TPE_WP_Color2').val( c2 ); | |
| updatePreview('TPE_GradientTypes'); | |
| } | |
| if ($('#TPE_GradientTypes').val() === 'vertical') { | |
| $('#TPE_DropZone').css({ 'background': 'linear-gradient('+$('#TPE_WP_Color1').val()+', '+$('#TPE_WP_Color2').val()+')' }); | |
| } else if ($('#TPE_GradientTypes').val() === 'horizontal') { | |
| $('#TPE_DropZone').css({ 'background': 'linear-gradient(to right, '+$('#TPE_WP_Color1').val()+', '+$('#TPE_WP_Color2').val()+')' }); | |
| } else if ($('#TPE_GradientTypes').val() === 'circle') { | |
| $('#TPE_DropZone').css({ 'background': 'radial-gradient(circle, '+$('#TPE_WP_Color1').val()+', '+$('#TPE_WP_Color2').val()+')' }); | |
| } else if ($('#TPE_GradientTypes').val() === 'ellipse') { | |
| $('#TPE_DropZone').css({ 'background': 'radial-gradient('+$('#TPE_WP_Color1').val()+', '+$('#TPE_WP_Color2').val()+')' }); | |
| } | |
| $('#TPE_WP').val('gradient'); | |
| $('.TPE_WPG_Color').hide(0); | |
| $('.TPE_WPG_Gradient').show(0); | |
| $('.TPE_WPG_Image').hide(0); | |
| } else if ( (caller === 'wallpaper') || (caller === 'TPE_StretchWallpaper') || ((caller === 'TPE_WP') && ($('#TPE_WP').val() === 'image')) ) { | |
| $('#TPE_DropZone').css({ 'background': '#000 url("'+options.wp_imagedata+'") center / '+(options.wp_stretch ? 'cover' : 'contain')+' no-repeat' }); | |
| $('#TPE_WP').val('image'); | |
| $('#TPE_WPG_Image_Size').text((options.wp_imagedata.length/1024/1024).toFixed(2)+'MB'); | |
| $('.TPE_WPG_Color').hide(0); | |
| $('.TPE_WPG_Gradient').hide(0); | |
| $('.TPE_WPG_Image').show(0); | |
| } | |
| }; | |
| /*-------------------------------------------------------------------------------*/ | |
| var saveValues = function() { | |
| $('#TPE_Container').find('input, select').each(function(key, value) { | |
| var saveto = $(value).data('saveto'); | |
| var val = ( ((value.type === 'checkbox') || (value.type === 'radio')) ? value.checked : value.value); | |
| options[saveto] = val; | |
| }); | |
| GM_setValue('options', options); | |
| }; | |
| /*-------------------------------------------------------------------------------*/ | |
| var getCurrentPack = function() { | |
| var currentPack = {}; | |
| $.each($('#custom').find('input[type="text"]'), function() { | |
| currentPack[this.id] = this.value; | |
| }); | |
| return currentPack; | |
| }; | |
| /*-------------------------------------------------------------------------------*/ | |
| var createNewPackIcon = function(name) { | |
| var myPacks = GM_getValue('myPacks', {}); | |
| var thumbnail = createThumbnail(myPacks[name].tiles, myPacks[name].speedpad); | |
| if (thumbnail) { | |
| $('#TPE_MySavedPacks').append('<div class="TPE_MySavedPack" data-name="'+name+'" title="Load this saved pack">'+thumbnail+'<div class="TPE_DeleteSavedPack" title="Delete this saved pack">x</div><div class="TPE_MySavedPackLabel">'+name+'</div></div>'); | |
| } else { | |
| $('#TPE_MySavedPacks').append('<div class="TPE_MySavedPack" data-name="'+name+'" title="Load this saved pack">'+name+'<div class="TPE_DeleteSavedPack" title="Delete this saved pack">x</div></div>'); | |
| } | |
| }; | |
| /*-------------------------------------------------------------------------------*/ | |
| var loadOptionsValues = function() { | |
| $('#TPE_Container').find('input, select').each(function(key, value) { | |
| var loadFrom = $(value).data('saveto'); | |
| var val = options[loadFrom]; | |
| if ((loadFrom === 'wp_color') || (loadFrom === 'wp_color1') || (loadFrom === 'wp_color2') || (loadFrom === 'wp_type') || (loadFrom === 'wp_gradientType')) { | |
| $(this).val(val); | |
| } else if (loadFrom === 'transparency') { | |
| $(this).val(val); | |
| $('#TPE_TransparentBallValue').text(val); | |
| } else { | |
| $(this).prop('checked', val); | |
| } | |
| }); | |
| }; | |
| /*-------------------------------------------------------------------------------*/ | |
| var loadCustomValues = function() { | |
| var texturePacks = JSON.parse($('#texture-pack-data').text()); | |
| var extraPacks = {}; | |
| var 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... | |
| extraPacks['Brioche Light'] = { author:'Brioche\n(Note: this texture is not part of the official TagPro texture packs collection)', tiles:'http://i.imgur.com/WDLyCrr.png', speedpad:'http://i.imgur.com/wtpkZWw.png', speedpadRed:'http://i.imgur.com/l6OMel5.png', speedpadBlue:'http://i.imgur.com/IAAOkQz.png', portal:'http://i.imgur.com/CXgNNTs.png', splats:'http://i.imgur.com/kbkOC6x.png' }; | |
| extraPacks['Derezzed'] = { author:'-salt-\n(Note: this texture is not part of the official TagPro texture packs collection)', tiles:'http://i.imgur.com/H9qQUAW.png', speedpad:'http://i.imgur.com/BXtUHQG.png', speedpadRed:'http://i.imgur.com/G92Af0J.png', speedpadBlue:'http://i.imgur.com/R9FAvpp.png', portal:'http://i.imgur.com/vJDZam9.png', splats:'http://i.imgur.com/WXHAA3I.png' }; | |
| extraPacks['Halloween'] = { author:'TagPro\n(Note: this texture is not part of the official TagPro texture packs collection)', tiles:'/images/events/halloween/tiles.png', speedpad:'/images/events/halloween/speedpad.png', speedpadRed:'/images/events/halloween/speedpadred.png', speedpadBlue:'/images/events/halloween/speedpadblue.png', portal:'/images/events/halloween/portal.png', splats:'/images/events/halloween/splats.png' }; | |
| extraPacks['Kindergarten'] = { author:'Clydas\n(Note: this texture is not part of the official TagPro texture packs collection)', tiles:'http://i.imgur.com/y3tbmOS.png', speedpad:'http://i.imgur.com/UEpX1wb.png', speedpadRed:'http://i.imgur.com/tUC9CMG.png', speedpadBlue:'http://i.imgur.com/5yA3IOx.png', portal:'http://i.imgur.com/6Lbd9Aw.png', splats:'http://i.imgur.com/ZGSTp2s.png' }; | |
| extraPacks['Transparent Floor'] = { author:'Nabby\n(Note: this texture is not part of the official TagPro texture packs collection)', tiles:'http://i.imgur.com/yPEXArG.png', speedpad:'http://i.imgur.com/hhj8bD6.png', speedpadRed:'http://i.imgur.com/vNXuzIH.png', speedpadBlue:'http://i.imgur.com/CwASXxT.png', portal:'http://i.imgur.com/rGEEQ2s.png', splats:'http://i.imgur.com/GObCQoT.png' }; | |
| $.each($('#custom').find('input[type="text"]'), function() { | |
| var type = this.id; | |
| var name = $(this).siblings('label').text(); | |
| $(this).siblings('label').after('<select id="TPE_Packs_'+type+'" class="TPE_Packs" style="margin:0 0 0 5px; width:20px; color:black; font-size:12px; border-radius:5px;" title="Loads a SINGLE link for "'+name+'""></select>'); //<option value=""></option> | |
| $('#TPE_Packs_'+type).append('<optgroup label="Default Packs..." style="color:#e00; font-size:14px">'); | |
| $.each(texturePacks, function(key, value) { | |
| $('#TPE_Packs_'+type).append('<option value="'+value[type]+'"'+(value.author?' title="Created by '+value.author+'"':'')+'>'+value.name+'</option>'); | |
| }); | |
| $('#TPE_Packs_'+type).append('</optgroup>'); | |
| $('#TPE_Packs_'+type).append('<optgroup label="Extra Packs..." style="color:#e00; font-size:14px">'); | |
| $.each(extraPacks, function(key, value) { | |
| $('#TPE_Packs_'+type).append('<option value="'+value[type]+'"'+(value.author?' title="Created by '+value.author+'"':'')+'>'+key+'</option>'); | |
| }); | |
| $('#TPE_Packs_'+type).append('</optgroup>'); | |
| $('#TPE_Packs_'+type).append('<optgroup label="My Saved Packs..." style="color:#e00; font-size:14px">'); | |
| $.each(myPacks, function(key, value) { | |
| $('#TPE_Packs_'+type).append('<option value="'+value[type]+'" data-name="'+key+'">'+key+'</option>'); | |
| }); | |
| $('#TPE_Packs_'+type).append('</optgroup>'); | |
| }); | |
| $.each(myPacks, function(key, value) { | |
| createNewPackIcon(key); | |
| }); | |
| }; | |
| /*-------------------------------------------------------------------------------*/ | |
| var randomPup = Math.floor(Math.random()*3); | |
| var createThumbnail = function(tiles, speedpad) { | |
| if (!tiles) return false; | |
| var textureUrl = tiles; | |
| var boostTextureUrl = speedpad || tiles.replace('tiles.png', 'speedpad.png'); | |
| var preview = ''; | |
| var previewWidth = 160; | |
| var previewHeight = 160; | |
| var positions = { | |
| floor: { x:'-520px', y:'-160px', bottom:'0px', left:'0px' }, | |
| wall1: { x:'-280px', y:'-120px', bottom:'80px', left:'0px' }, | |
| wall2: { x:'-160px', y:'-320px', bottom:'40px', left:'0px' }, | |
| wall3: { x:'-360px', y:'-280px', bottom:'0px', left:'0px' }, | |
| wall4: { x:'-160px', y:'-0px', bottom:'0px', left:'40px' }, | |
| teamtile1: { x:'-560px', y:'-160px', bottom:'40px', left:'40px' }, | |
| teamtile2: { x:'-560px', y:'-160px', bottom:'0px', left:'80px' }, | |
| bomb: { x:'-480px', y:'-40px', bottom:'120px', left:'0px' }, | |
| spike: { x:'-480px', y:'0px', bottom:'80px', left:'120px' }, | |
| boost: { x:'0px', y:'0px', bottom:'0px', left:'120px' }, | |
| pup: { x:'-480px', y:(-160 - 40 * randomPup)+'px', bottom:'40px', left:'80px' }, | |
| ball: { x:'-560px', y:'-0px', bottom:'62px', left:'50px' }, | |
| flag: { x:'-600px', y:'-40px', bottom:'94px', left:'63px' }, | |
| }; | |
| for (let i=0; i<previewWidth; i+=40) { | |
| for (let j=0; j<previewHeight; j+=40) { | |
| preview += '<div style="position:absolute; width:40px; height:40px; background-image:url(\''+textureUrl+'\'); background-position:'+positions.floor.x+' '+positions.floor.y+'; top:'+j+'px; left:'+i+'px"></div>'; | |
| } | |
| } | |
| $.each(positions, function(key, value) { | |
| if (key === 'floor') return; | |
| var textureURL = textureUrl; | |
| if (key === 'boost') textureURL = boostTextureUrl; | |
| preview += ' <div style="position:absolute; width:40px; height:40px; background-image:url(\''+textureURL+'\'); background-position:'+value.x+' '+value.y+'; bottom:'+value.bottom+'; left:'+value.left+'"></div>'; | |
| }); | |
| return(preview); | |
| }; | |
| /*-------------------------------------------------------------------------------*/ | |
| // Create the new elements... | |
| /*-------------------------------------------------------------------------------*/ | |
| //Create "Options" tab... | |
| $('ul.tab-list').append('<li data-target="#TPE_Container"><a id="TPE_MenuButton">Options</a></li>'); | |
| $('div.tab-content').append('<div id="TPE_Container" class="tab-pane" style="display:flex; justify-content:flex-start; align-items:flex-start; padding:10px 30px; font-size:14px;"></div>'); | |
| //Ball Options... | |
| $('#TPE_Container').append('<div id="TPE_Options" style="display:flex; flex-flow:column wrap; align-items:flex-start; margin:20px; padding:10px; width:360px; border:1px solid #777; border-radius:10px;"></div>'); | |
| $('#TPE_Options').append('<label><input type="checkbox"'+(options.spin ? ' checked' : '')+' id="TPE_Spin" data-saveto="spin">Ball Spin</label>'); | |
| $('#TPE_Options').append('<label title="100% = completely invisible!" style="display:flex; justify-content:flex-start; align-items:center; white-space:nowrap;"><span>Ball Transparency: </span><span style="margin:0 10px"><input type="range" id="TPE_TransparentBall" value="'+(options.transparency)+'" min="0" max="100" data-saveto="transparency"></span><span id="TPE_TransparentBallValue">'+(options.transparency)+'</span>%</label>'); | |
| $('#TPE_Options').append('<label title="Splats will fade out in 5 seconds"><input type="checkbox"'+(options.fadingSplats ? ' checked' : '')+' id="TPE_FadingSplats" data-saveto="fadingSplats">Use Fading Splats</label>'); | |
| $('#TPE_Options').append('<label title="The black background behind the map will be transparent"><input type="checkbox"'+(options.transparentBackground ? ' checked' : '')+' id="TPE_TransparentBackground" data-saveto="transparentBackground">Transparent Game Background</label>'); | |
| $('#TPE_Options').append('<label title="Modify the "TagPro" powerup effect (2px wide, 1px smaller diameter)"><input type="checkbox"'+(options.modifyTP ? ' checked' : '')+' id="TPE_ModifyTP" data-saveto="modifyTP" >Modify TagPro</label>'); | |
| $('#TPE_Options').append('<label title="Modify the "Rolling Bomb" powerup effect (faster flashing)"><input type="checkbox"'+(options.modifyRB ? ' checked' : '')+' id="TPE_ModifyTP" data-saveto="modifyRB">Modify Rolling Bomb</label>'); | |
| $('#TPE_Options').append('<label title="Modify the "Juke Juice" powerup effect (replace the jj icon with circle - no lag with live player position script!)"><input type="checkbox"'+(options.modifyJJ ? ' checked' : '')+' id="TPE_ModifyJJ" data-saveto="modifyJJ">Modify Juke Juice</label>'); | |
| $('#TPE_Options').append('<label title="Shows the current scoreboard position for each player on their ball"><input type="checkbox"'+(options.addSBPosLabels ? ' checked' : '')+' id="TPE_AddSBPosLabels" data-saveto="addSBPosLabels">Add Scoreboard Position Labels</label>'); | |
| //Wallpaper Options... | |
| $('#TPE_Container').append('<div id="TPE_Wallpaper" style="display:flex; flex-flow:column wrap; align-items:center; margin:20px; padding:10px; width:360px; border:1px solid #777; border-radius:10px;"></div>'); | |
| $('#TPE_Wallpaper').append('<span>Game Background: <select id="TPE_WP" style="color:black" data-saveto="wp_type">' + | |
| ' <option value="none">None</option>' + | |
| ' <option value="color">Color</option>' + | |
| ' <option value="gradient">Gradient</option>' + | |
| ' <option value="image">Image</option>' + | |
| '</select></span>'); | |
| $('#TPE_Wallpaper').append('<div id="TPE_DropZone_Outer" style="display:flex; align-items:center; margin:10px; width:320px; height:240px; text-align:center; border:2px dotted silver;"><div id="TPE_DropZone" style="width:100%; height:100%"></div></div>'); | |
| $('#TPE_Wallpaper').append('<div class="TPE_WPG_Image" style="margin:-10px 0 5px; font-size:12px; font-style:italic">(Drag & Drop Backgrounds Here)</div>'); | |
| $('#TPE_Wallpaper').append('<div class="TPE_WPG_Image" style="margin:-10px 0 5px; font-size:12px;">Stored Image Size: <span id="TPE_WPG_Image_Size"></span></div>'); | |
| $('#TPE_Wallpaper').append('<label class="TPE_WPG_Image"><input type="checkbox"'+(options.wp_stretch ? ' checked' : '')+' id="TPE_StretchWallpaper" data-saveto="wp_stretch">Stretch Wallpaper to Fit</label>'); | |
| $('#TPE_Wallpaper').append('<span class="TPE_WPG_Color">Color: <input type="color" id="TPE_WP_Color" data-saveto="wp_color"></span>'); | |
| $('#TPE_Wallpaper').append('<div class="TPE_WPG_Gradient">' + | |
| ' <label><input type="radio" name="TPE_GradientPresets" data-saveto="wp_gradient_red" data-c1="#554444" data-c2="#552222">Red</label>' + | |
| ' <label><input type="radio" name="TPE_GradientPresets" data-saveto="wp_gradient_green" data-c1="#445544" data-c2="#225522">Green</label>' + | |
| ' <label><input type="radio" name="TPE_GradientPresets" data-saveto="wp_gradient_blue" data-c1="#444455" data-c2="#222255">Blue</label>' + | |
| ' <label><input type="radio" name="TPE_GradientPresets" data-saveto="wp_gradient_orange" data-c1="#665400" data-c2="#512400">Orange</label>' + | |
| ' <label><input type="radio" name="TPE_GradientPresets" data-saveto="wp_gradient_light" data-c1="#DDDDDD" data-c2="#777777">Light</label>' + | |
| ' <label><input type="radio" name="TPE_GradientPresets" data-saveto="wp_gradient_dark" data-c1="#222222" data-c2="#090909">Dark</label>' + | |
| '</div>'); | |
| $('#TPE_Wallpaper').append('<div class="TPE_WPG_Gradient"><span>Color 1: <input type="color" id="TPE_WP_Color1" data-saveto="wp_color1"></span><span style="margin-left:20px;">Color 2: <input type="color" id="TPE_WP_Color2" data-saveto="wp_color2"></span></div>'); | |
| $('#TPE_Wallpaper').append('<span class="TPE_WPG_Gradient" style="margin-top:5px;">Gradient Type: <select id="TPE_GradientTypes" style="color:black" data-saveto="wp_gradientType">' + | |
| ' <option value="horizontal">Horizontal</option>' + | |
| ' <option value="vertical">Vertical</option>' + | |
| ' <option value="circle">Circle</option>' + | |
| ' <option value="ellipse">Ellipse</option>' + | |
| '</select></span>'); | |
| $('#TPE_Container').hide(0); | |
| //Add new elements to the "Import Custom" tab... | |
| $('#custom-textures-btn').after('<div id="TPE_MySavedPacks" style="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>'); | |
| $('#TPE_MySavedPacks').append('<div id="TPE_SaveMyPack" title="Save the current links as a new pack" style="margin:2px 13px; padding:7px 0 0 2px; 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>'); | |
| $('#TPE_MySavedPacks').after('<div id="TPE_ClearAll" style="margin:5px 7px; padding:2px 5px; float:right; font-size:12px; color:red; background:#222; border:1px solid white; border-radius:5px; cursor:pointer;" title="Clears everything, except your custom saved links.">X</div>'); | |
| loadCustomValues(); | |
| loadOptionsValues(); | |
| GM_addStyle('#TPE_Container input[type="checkbox"] { margin:4px 3px 3px 0; }'); | |
| GM_addStyle('#TPE_Container input[type="radio"] { margin:2px 1px 2px 5px; }'); | |
| GM_addStyle('.TPE_MySavedPack { position:relative; color:black; background:#ccc; font-size:15px; font-weight:bold; border-radius:5px; cursor:pointer; width:160px; height:160px; transform:scale(0.8, 0.8); }'); //border:1px solid #777; margin:5px; padding:0 12px 0 3px; | |
| GM_addStyle('.TPE_DeleteSavedPack { display:none; position:absolute; width:15px; height:15px; top:0px; right:0px; color:white; background:red; opacity:0.7; font-size:11px; text-align:center; border-radius:50%; cursor:pointer; }'); | |
| GM_addStyle('.TPE_MySavedPackLabel { position:absolute; width:100%; bottom:-13px; font:11px Arial; color:white; text-align:center; }'); | |
| /*-------------------------------------------------------------------------------*/ | |
| // Bind events... | |
| /*-------------------------------------------------------------------------------*/ | |
| $('#TPE_SaveMyPack').on('click', function() { | |
| var name = prompt('Texture pack name:'); | |
| if (name) { | |
| var myPacks = GM_getValue('myPacks', {}); | |
| var currentPack = getCurrentPack(); | |
| var isNewPack = true; | |
| if (myPacks.hasOwnProperty(name)) { | |
| var response = confirm('"'+name+'" already exists - OK to overwrite?\n\n'); | |
| if (!response) return; | |
| isNewPack = false; | |
| } | |
| myPacks[name] = currentPack; | |
| GM_setValue('myPacks', myPacks); | |
| if (isNewPack) { | |
| createNewPackIcon(name); | |
| $.each($('#custom').find('input[type="text"]'), function() { | |
| $('#TPE_Packs_'+this.id).append('<option value="'+myPacks[name][this.id]+'" data-name="'+name+'">'+name+'</option>'); | |
| }); | |
| } | |
| $('#custom-textures-btn').trigger('click'); | |
| } | |
| }).hover(function() { | |
| $(this).css('opacity', '1'); | |
| }, function() { | |
| $(this).css('opacity', '0.7'); | |
| }); | |
| $('#TPE_MySavedPacks').on('click', '.TPE_MySavedPack', function() { | |
| var myPacks = GM_getValue('myPacks', {}); | |
| var name = $(this).data('name'); | |
| if (myPacks.hasOwnProperty(name)) { | |
| $.each(myPacks[name], function(key, value) { | |
| $('#'+key).val(value); | |
| }); | |
| $('#custom-textures-btn').trigger('click'); | |
| } | |
| }); | |
| $('#TPE_MySavedPacks').on('mouseenter', '.TPE_MySavedPack', function() { | |
| $(this).css('box-shadow', '0 0 15px #ccc'); | |
| $(this).find('.TPE_DeleteSavedPack').show(); | |
| }).on('mouseleave', '.TPE_MySavedPack', function() { | |
| $(this).css('box-shadow', 'none'); | |
| $(this).find('.TPE_DeleteSavedPack').hide(); | |
| }); | |
| $('#TPE_MySavedPacks').on('click', '.TPE_DeleteSavedPack', function(e) { | |
| e.stopPropagation(); | |
| e.preventDefault(); | |
| var myPacks = GM_getValue('myPacks', {}); | |
| var name = $(this).parent().data('name'); | |
| if (name && myPacks.hasOwnProperty(name)) { | |
| var response = confirm('Delete saved pack "'+name+'?\n\n'); | |
| if (response) { | |
| delete myPacks[name]; | |
| GM_setValue('myPacks', myPacks); | |
| var $this = $(this).parent(); | |
| $this.fadeOut(600, function() { $this.remove(); }); | |
| $('#custom').find('select').find('option[data-name="'+name+'"]').remove(); | |
| } | |
| } | |
| }); | |
| $('#TPE_MySavedPacks').on('mouseenter', '.TPE_DeleteSavedPack', function() { | |
| $(this).css('opacity', '1'); | |
| }).on('mouseleave', '.TPE_DeleteSavedPack', function() { | |
| $(this).css('opacity', '0.7'); | |
| }); | |
| $('.TPE_Packs').on('change', function() { | |
| $(this).siblings('input[type="text"]').val($(this).val()); | |
| }); | |
| $('#TPE_ClearAll').on('click', function() { | |
| var response = confirm('Everything will be cleared, except for your saved packs.\n\n OK to continue?\n\n'); | |
| if (response) { | |
| $('.texture-url').val(''); | |
| $('.TPE_Packs').val(''); | |
| $.removeCookie('textures', { path:'/', domain:tagpro.cookieHost } ); | |
| $('#custom-textures-btn').trigger('click'); | |
| } | |
| }).hover(function() { | |
| $(this).css( { 'background':'red', 'color':'white' } ); | |
| }, function() { | |
| $(this).css( { 'background':'#222', 'color':'red' } ); | |
| }); | |
| $('.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'); | |
| if ($(this).data('target') === '#TPE_Container') { | |
| $('#TPE_Container').show(0); | |
| updatePreview('TPE_WP'); | |
| } else { | |
| $('#TPE_Container').hide(0); | |
| } | |
| }); | |
| $('#TPE_Container').find('input, select').on('change', function() { | |
| saveValues(); | |
| }); | |
| $('#TPE_Wallpaper').find('input, select').on('change', function() { | |
| if (this.id) updatePreview(this.id); | |
| else updatePreview(this.name); | |
| }); | |
| $('#TPE_TransparentBall').on('input', function() { | |
| $('#TPE_TransparentBallValue').text(this.value); | |
| }); | |
| // Drag/Drop events... | |
| $(document).on('dragover', function(e) { | |
| e.stopPropagation(); | |
| e.preventDefault(); | |
| $('#TPE_DropZone_Outer').css({border:'2px dotted red'}); | |
| }).on('dragleave', function(e) { | |
| e.stopPropagation(); | |
| e.preventDefault(); | |
| $('#TPE_DropZone_Outer').css({border:'2px dotted silver'}); | |
| }); | |
| $('#TPE_DropZone_Outer').on('dragover', function(e) { | |
| e.stopPropagation(); | |
| e.preventDefault(); | |
| $(this).css({background:'green', opacity:0.3}); | |
| }).on('dragleave', function(e) { | |
| e.stopPropagation(); | |
| e.preventDefault(); | |
| $(this).css({background:'', opacity:1}); | |
| }).on('drop', function(e) { | |
| e.stopPropagation(); | |
| e.preventDefault(); | |
| $(this).css({border:'2px dotted silver', background:'', opacity:1}); | |
| handleDrop(e); | |
| }).on('dblclick', function(e) { | |
| e.stopPropagation(); | |
| e.preventDefault(); | |
| if ($('#TPE_WP').val() === 'image') { | |
| var confirmRemove = confirm('Remove Custom Wallpaper?'); | |
| if (confirmRemove) { | |
| options.wp_imagedata = ''; | |
| GM_setValue('options', options); | |
| $('#TPE_DropZone').css({ 'background': 'none' }); | |
| } | |
| } | |
| }); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment