API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 1st, 2021
124
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 14.40 KB | None | 0 0
raw download clone embed print report
  1.  
  2. (function() {
  3.   var $closeBtn, $heading, $loadBtn, $loading, $players, $playersAway, $playersHome, $stage, $subHeading, $switchBtn, $switcher, $team, $teamListHome, $terrain, $world, ASSET_URL, anim, data, dom, events, init, pos, scenes, state;
  4.  
  5.   ASSET_URL = 'https://pesdb.net/pes2021/images/players/';
  6.  
  7.   $stage = null;
  8.  
  9.   $world = null;
  10.  
  11.   $terrain = null;
  12.  
  13.   $team = null;
  14.  
  15.   $teamListHome = null;
  16.  
  17.   $players = null;
  18.  
  19.   $playersHome = null; // Subset of $players
  20.  
  21.   $playersAway = null; // Subset of $players
  22.  
  23.   $switchBtn = null;
  24.  
  25.   $loadBtn = null;
  26.  
  27.   $closeBtn = null;
  28.  
  29.   $heading = null;
  30.  
  31.   $subHeading = null;
  32.  
  33.   $loading = null;
  34.  
  35.   $switcher = null;
  36.  
  37.   data = {
  38.     players: {
  39.       home: [
  40.         {
  41.           name: 'T. WEAH',
  42.           asset: '117835.png',
  43.           origin: 'America',
  44.           ov: '71',
  45.           shirt: '9',
  46.           role: 'P',
  47.           dob: '21',
  48.           stipendio:'2.000.00',
  49.           goals: 10,
  50.           games: 16,
  51.           x: 0,
  52.           y: -190
  53.         },
  54.         {
  55.           name: 'W.GEUBBLES',
  56.           asset: '118687.png',
  57.           origin: 'Peru',
  58.           ov: '72',
  59.           shirt: '14',
  60.           role: 'EDA',
  61.           dob: '36',
  62.           goals: 1,
  63.           games: 16,
  64.           x: 210,
  65.           y: -190
  66.         },
  67.         {
  68.           name: 'D.GARCIA',
  69.           asset: '110254.png',
  70.           origin: 'Holland',
  71.           ov: '74',
  72.           shirt: '10',
  73.           role: 'ESA',
  74.           dob: '32',
  75.           goals: 19,
  76.           games: 30,
  77.           x: -210,
  78.           y: -190
  79.         },
  80.         {
  81.           name: 'M. CAMARA',
  82.           asset: '119877.png',
  83.           origin: 'France',
  84.           ov: '75',
  85.           shirt: '7',
  86.           role: 'CC',
  87.           dob: '32',
  88.           goals: 9,
  89.           games: 22,
  90.           x: 150,
  91.           y: 50
  92.         },
  93.         {
  94.           name: 'THIAGO MAIA',
  95.           asset: '107778.png',
  96.           origin: 'Germany',
  97.           ov: '75',
  98.           shirt: '24',
  99.           role: 'MED',
  100.           dob: '31',
  101.           goals: 21,
  102.           games: 3,
  103.           x: 0,
  104.           y: 100
  105.         },
  106.         {
  107.           name: 'A. AOUCHICHE',
  108.           asset: '132560.png',
  109.           origin: 'Spain',
  110.           ov: '74',
  111.           shirt: '8',
  112.           role: 'TRQ',
  113.           dob: '28',
  114.           goals: 0,
  115.           games: 2,
  116.           x: -150,
  117.           y: 50
  118.         },
  119.         {
  120.           name: 'G. PEZZELLA',
  121.           asset: '109907.png',
  122.           origin: 'Austria',
  123.           ov: '76',
  124.           shirt: '27',
  125.           role: 'TS',
  126.           dob: '24',
  127.           goals: 5,
  128.           games: 27,
  129.           x: -200,
  130.           y: 250
  131.         },
  132.         {
  133.              name: 'LUCAS VERISSIMO',
  134.           asset: '110681.png',
  135.           origin: 'Germany',
  136.           ov: '76',
  137.           shirt: '21',
  138.           role: 'Defence',
  139.           dob: '32',
  140.           goals: 2,
  141.           games: 25,
  142.           x: -80,
  143.           y: 300
  144.          
  145.         },
  146.         {
  147.           name: 'A. CISTANA',
  148.           asset: '110735.png',
  149.           origin: 'France',
  150.           ov: '75',
  151.           shirt: '5',
  152.           role: 'DC',
  153.           dob: '31',
  154.           goals: 21,
  155.           games: 1,
  156.           x: 80,
  157.           y: 300
  158.         },
  159.         {
  160.          name: 'K. SARDELLA',
  161.           asset: '132966.png',
  162.           origin: 'Brazil',
  163.           ov: '70',
  164.           shirt: '4',
  165.           role: 'TD',
  166.           dob: '32',
  167.           goals: 0,
  168.           games: 34,
  169.           x: 200,
  170.           y: 250
  171.          
  172.         },
  173.         {
  174.           name: 'P. GAZZANIGA',
  175.           asset: '47237.png',
  176.           origin: 'Germany',
  177.           ov: '75',
  178.           shirt: '1',
  179.           role: 'PT',
  180.           dob: '29',
  181.           goals: 0,
  182.           games: 48,
  183.           x: 0,
  184.           y: 410
  185.         }
  186.       ],
  187.      
  188.     }
  189.   };
  190.  
  191.   state = {
  192.     home: true,
  193.     disabHover: false,
  194.     swapSides: function() {
  195.       if (this.home) {
  196.         return this.home = false;
  197.       } else {
  198.         return this.home = true;
  199.       }
  200.     },
  201.     curSide: function() {
  202.       if (this.home) {
  203.         return 'home';
  204.       } else {
  205.         return 'away';
  206.       }
  207.     }
  208.   };
  209.  
  210.   pos = {
  211.     world: {
  212.       baseX: 0,
  213.       baseY: 0,
  214.       baseZ: -200
  215.     },
  216.     def: {
  217.       goalie: [0, -50]
  218.     }
  219.   };
  220.  
  221.   dom = {
  222.     addPlayers: function(side) {
  223.       var $el, key, ref, val;
  224.       ref = data.players[side];
  225.       for (key in ref) {
  226.         val = ref[key];
  227.         val.side = side;
  228.         $el = this.addPlayer(val);
  229.         $team.append($el);
  230.       }
  231.       $players = $('.js-player');
  232.       $playersHome = $('.js-player[data-side="home"]');
  233.       return $playersAway = $('.js-player[data-side="away"]');
  234.     },
  235.     addPlayer: function(data) {
  236.       var $el;
  237.       $el = $('<div class="js-player player" data-name="' + data.name + '" data-side="' + data.side + '" data-x="' + data.x + '" data-y="' + data.y + '"></div>');
  238.       $el.append('<div class="player__label"><span>' + data.name + '</span></div>');
  239.       $el.append('<div class="player__img"><img src= ' + ASSET_URL + data.asset + '></div>');
  240.       $el.prepend('<div class="player__card"> </div>');
  241.       $el.prepend('<div class="player__placeholder"></div>');
  242.       this.populateCard($el.find('.player__card'), data);
  243.       return $el;
  244.     },
  245.     preloadImages: function(preload) {
  246.       var i, promises;
  247.       promises = [];
  248.       i = 0;
  249.       while (i < preload.length) {
  250.         (function(url, promise) {
  251.           var img;
  252.           img = new Image();
  253.           img.onload = function() {
  254.             return promise.resolve();
  255.           };
  256.           return img.src = url;
  257.         })(preload[i], promises[i] = $.Deferred());
  258.         i++;
  259.       }
  260.       return $.when.apply($, promises).done(function() {
  261.         scenes.endLoading();
  262.         return scenes.loadIn(1600);
  263.       });
  264.     },
  265.     populateCard: function($el, data) {
  266.       return $el.append('<h3>' + data.name + '</h3>' + '<ul class="player__card__list"><li><span>POS</span><br/>' + data.role + ' </li><li><span>Età</span><br/>' + data.dob + '</li><li><span>OV</span><br/>' + data.ov + '</li><li><span>Stipendio</span><br/>' + data.stipendio + '</li></ul>' + '<ul class="player__card__list player__card__list--last"><li><span>Games</span><br/>' + data.games + '</li><li><span>Goals</span><br/>' + data.goals + '</li></ul>');
  267.     },
  268.     displayNone: function($el) {
  269.       return $el.css('display', 'none');
  270.     }
  271.   };
  272.  
  273.   events = {
  274.     attachAll: function() {
  275.       $switchBtn.on('click', function(e) {
  276.         var $el;
  277.         e.preventDefault();
  278.         $el = $(this);
  279.         if ($el.hasClass('disabled')) {
  280.           return;
  281.         }
  282.         scenes.switchSides();
  283.         $switchBtn.removeClass('disabled');
  284.         return $el.addClass('disabled');
  285.       });
  286.       $loadBtn.on('click', function(e) {
  287.         e.preventDefault();
  288.         return scenes.loadIn();
  289.       });
  290.       return $players.on('click', function(e) {
  291.         var $el;
  292.         e.preventDefault();
  293.         $el = $(this);
  294.         if ($('.active').length) {
  295.           return false;
  296.         }
  297.         $el.addClass('active');
  298.         scenes.focusPlayer($el);
  299.         return setTimeout((function() {
  300.           return events.attachClose();
  301.         }), 1);
  302.       });
  303.     },
  304.     attachClose: function() {
  305.       return $stage.one('click', function(e) {
  306.         e.preventDefault();
  307.         return scenes.unfocusPlayer();
  308.       });
  309.     }
  310.   };
  311.  
  312.   scenes = {
  313.     preLoad: function() {
  314.       $teamListHome.velocity({
  315.         opacity: 0
  316.       }, 0);
  317.       $players.velocity({
  318.         opacity: 0
  319.       }, 0);
  320.       $loadBtn.velocity({
  321.         opacity: 0
  322.       }, 0);
  323.       $switcher.velocity({
  324.         opacity: 0
  325.       }, 0);
  326.       $heading.velocity({
  327.         opacity: 0
  328.       }, 0);
  329.       $subHeading.velocity({
  330.         opacity: 0
  331.       }, 0);
  332.       $playersAway.css('display', 'none');
  333.       $world.velocity({
  334.         opacity: 0,
  335.         translateZ: -200,
  336.         translateY: -60
  337.       }, 0);
  338.       return $('main').velocity({
  339.         opacity: 1
  340.       }, 0);
  341.     },
  342.     loadIn: function(delay = 0) {
  343.       var delayInc;
  344.       $world.velocity({
  345.         opacity: 1,
  346.         translateY: 0,
  347.         translateZ: -200
  348.       }, {
  349.         duration: 1000,
  350.         delay: delay,
  351.         easing: 'spring'
  352.       });
  353.       anim.fadeInDir($heading, 300, delay + 600, 0, 30);
  354.       anim.fadeInDir($subHeading, 300, delay + 800, 0, 30);
  355.       anim.fadeInDir($teamListHome, 300, delay + 800, 0, 30);
  356.       anim.fadeInDir($switcher, 300, delay + 900, 0, 30);
  357.       delay += 1200;
  358.       delayInc = 30;
  359.       return anim.dropPlayers($playersHome, delay, delayInc);
  360.     },
  361.     startLoading: function() {
  362.       var images, key, ref, val;
  363.       anim.fadeInDir($loading, 300, 0, 0, -20);
  364.       images = [];
  365.       ref = data.players.home && data.players.away;
  366.       for (key in ref) {
  367.         val = ref[key];
  368.         images.push(ASSET_URL + val.asset);
  369.       }
  370.       return dom.preloadImages(images);
  371.     },
  372.     endLoading: function() {
  373.       return anim.fadeOutDir($loading, 300, 1000, 0, -20);
  374.     },
  375.     arrangePlayers: function() {
  376.       return $players.each(function() {
  377.         var $el;
  378.         $el = $(this);
  379.         return $el.velocity({
  380.           translateX: parseInt($el.attr('data-x')),
  381.           translateZ: parseInt($el.attr('data-y')) // Z is the Y axis on the field
  382.         });
  383.       });
  384.     },
  385.     focusPlayer: function($el) {
  386.       var shiftY;
  387.       data = $el.data();
  388.       shiftY = data.y;
  389.       if (shiftY > 0) {
  390.         shiftY = data.y / 2;
  391.       }
  392.       $('.js-player[data-side="' + state.curSide() + '"]').not('.active').each(function() {
  393.         var $unfocus;
  394.         $unfocus = $(this);
  395.         return anim.fadeOutDir($unfocus, 300, 0, 0, 0, 0, null, 0.2);
  396.       });
  397.       $world.velocity({
  398.         translateX: pos.world.baseX - data.x,
  399.         translateY: pos.world.baseY,
  400.         translateZ: pos.world.baseZ - shiftY // Z is the Y axis on the field
  401.       }, 600);
  402.       $terrain.velocity({
  403.         opacity: 0.66
  404.       }, 600);
  405.       return this.showPlayerCard($el, 600, 600);
  406.     },
  407.     unfocusPlayer: function() {
  408.       var $el;
  409.       $el = $('.js-player.active');
  410.       data = $el.data();
  411.       anim.fadeInDir($('.js-player[data-side="' + state.curSide() + '"]').not('.active'), 300, 300, 0, 0, 0, null, 0.2);
  412.       $el.removeClass('active');
  413.       $world.velocity({
  414.         translateX: pos.world.baseX,
  415.         translateY: pos.world.baseY,
  416.         translateZ: pos.world.baseZ // Z is the Y axis on the field
  417.       }, 600);
  418.       $terrain.velocity({
  419.         opacity: 1
  420.       }, 600);
  421.       return this.hidePlayerCard($el, 600, 600);
  422.     },
  423.     hidePlayerCard: function($el, dur, delay) {
  424.       var $card, $image;
  425.       $card = $el.find('.player__card');
  426.       $image = $el.find('.player__img');
  427.       $image.velocity({
  428.         translateY: 0
  429.       }, 300);
  430.       anim.fadeInDir($el.find('.player__label', 200, delay));
  431.       return anim.fadeOutDir($card, 300, 0, 0, -100);
  432.     },
  433.     showPlayerCard: function($el, dur, delay) {
  434.       var $card, $image;
  435.       $card = $el.find('.player__card');
  436.       $image = $el.find('.player__img');
  437.       $image.velocity({
  438.         translateY: '-=150px'
  439.       }, 300);
  440.       anim.fadeOutDir($el.find('.player__label', 200, delay));
  441.       return anim.fadeInDir($card, 300, 200, 0, 100);
  442.     },
  443.     switchSides: function() {
  444.       var $new, $old, delay, delayInc;
  445.       delay = 0;
  446.       delayInc = 20;
  447.       $old = $playersHome;
  448.       $new = $playersAway;
  449.       if (!state.home) {
  450.         $old = $playersAway;
  451.         $new = $playersHome;
  452.       }
  453.       state.swapSides();
  454.       $old.each(function() {
  455.         var $el;
  456.         $el = $(this);
  457.         anim.fadeOutDir($el, 200, delay, 0, -60, 0);
  458.         anim.fadeOutDir($el.find('.player__label'), 200, delay + 700);
  459.         return delay += delayInc;
  460.       });
  461.       $terrain.velocity({
  462.         rotateY: '+=180deg'
  463.       }, {
  464.         delay: 150,
  465.         duration: 1200
  466.       });
  467.       return anim.dropPlayers($new, 1500, 30);
  468.     }
  469.   };
  470.  
  471.   anim = {
  472.     fadeInDir: function($el, dur, delay, deltaX = 0, deltaY = 0, deltaZ = 0, easing = null, opacity = 0) {
  473.       $el.css('display', 'block');
  474.       $el.velocity({
  475.         translateX: '-=' + deltaX,
  476.         translateY: '-=' + deltaY,
  477.         translateZ: '-=' + deltaZ
  478.       }, 0);
  479.       return $el.velocity({
  480.         opacity: 1,
  481.         translateX: '+=' + deltaX,
  482.         translateY: '+=' + deltaY,
  483.         translateZ: '+=' + deltaZ
  484.       }, {
  485.         easing: easing,
  486.         delay: delay,
  487.         duration: dur
  488.       });
  489.     },
  490.     fadeOutDir: function($el, dur, delay, deltaX = 0, deltaY = 0, deltaZ = 0, easing = null, opacity = 0) {
  491.       var display;
  492.       if (!opacity) {
  493.         display = 'none';
  494.       } else {
  495.         display = 'block';
  496.       }
  497.       return $el.velocity({
  498.         opacity: opacity,
  499.         translateX: '+=' + deltaX,
  500.         translateY: '+=' + deltaY,
  501.         translateZ: '+=' + deltaZ
  502.       }, {
  503.         easing: easing,
  504.         delay: delay,
  505.         duration: dur
  506.       }).velocity({
  507.         opacity: opacity,
  508.         translateX: '-=' + deltaX,
  509.         translateY: '-=' + deltaY,
  510.         translateZ: '-=' + deltaZ
  511.       }, {
  512.         duration: 0,
  513.         display: display
  514.       });
  515.     },
  516.     dropPlayers: function($els, delay, delayInc) {
  517.       return $els.each(function() {
  518.         var $el;
  519.         $el = $(this);
  520.         $el.css({
  521.           display: 'block',
  522.           opacity: 0
  523.         });
  524.         anim.fadeInDir($el, 800, delay, 0, 50, 0, 'spring');
  525.         anim.fadeInDir($el.find('.player__label'), 200, delay + 250);
  526.         return delay += delayInc;
  527.       });
  528.     }
  529.   };
  530.  
  531.   init = function() {
  532.     $stage = $('.js-stage');
  533.     $world = $('.js-world');
  534.     $switchBtn = $('.js-switch');
  535.     $loadBtn = $('.js-load');
  536.     $heading = $('.js-heading');
  537.     $switcher = $('.js-switcher');
  538.     $closeBtn = $('.js-close');
  539.     $subHeading = $('.js-subheading');
  540.     $terrain = $('.js-terrain');
  541.     $team = $('.js-team');
  542.     $teamListHome = $('.js-team-home');
  543.     $loading = $('.js-loading');
  544.     dom.addPlayers('home');
  545.     dom.addPlayers('away');
  546.     scenes.preLoad();
  547.     scenes.arrangePlayers();
  548.     events.attachAll();
  549.     return scenes.startLoading();
  550.   };
  551.  
  552.   $(document).ready(function() {
  553.     return init();
  554.   });
  555.  
  556. }).call(this);
  557.  
  558.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!