LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Stat Battles

{{users[0].error}}

vs

{{users[1].error}}

{{user.nicename}}
@{{user.nickname}}

{{user.points|number:0}} BP

pen #{{user.current_pen.id}}  

Close

{{detail_user.nicename}}
@{{detail_user.nickname}}

{{detail_user.points|number:0}} BP | {{detail_user.pens.length|number:0}} pens
{{detail_user.stats.followers}} Followers | {{detail_user.stats.following}} Following

Pen Loves Views Comments
#{{pen.id}} {{pen.loves | number: 0}} {{pen.views | number: 0}} {{pen.comments | number: 0}}

{{users[0].nicename}} wins with {{users[0].points|number:0}} Battle Points!

{{users[1].nicename}} wins with {{users[1].points|number:0}} Battle Points!

{{users[0].nicename}} and {{users[1].nicename}} tie with {{user[0].points || 0 | number:0}} Battle Points!

CSS
@import url(//fonts.googleapis.com/css?family=Quicksand:400);
.user {
  display: block;
  width: 50%;
  box-sizing: border-box;
  padding: 1rem;
}
.user:first-of-type {
  float: left;
}
.user:last-of-type {
  float: right;
}
.user .user-image-wrap {
  width: 40%;
  margin: 1rem auto;
  padding-bottom: 50%;
  position: relative;
}
.user .user-image {
  position: absolute;
  width: 0%;
  border-radius: 50%;
  -webkit-transition: width 150ms ease-in-out, box-shadow 500ms ease-in-out, -webkit-transform 500ms cubic-bezier(0.02, 1.48, 1, 1);
  transition: width 150ms ease-in-out, box-shadow 500ms ease-in-out, -webkit-transform 500ms cubic-bezier(0.02, 1.48, 1, 1);
  transition: width 150ms ease-in-out, box-shadow 500ms ease-in-out, transform 500ms cubic-bezier(0.02, 1.48, 1, 1);
  transition: width 150ms ease-in-out, box-shadow 500ms ease-in-out, transform 500ms cubic-bezier(0.02, 1.48, 1, 1), -webkit-transform 500ms cubic-bezier(0.02, 1.48, 1, 1);
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  box-shadow: 0px 0px 0px 0.1rem rgba(255, 255, 255, 0.1);
}
.user .user-image.won {
  -webkit-transform: translate(-50%, -50%) scale(1.2);
          transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0px 0px 0px 0.4rem #60AE24;
}
.user .user-image.lost {
  -webkit-transform: translate(-50%, -50%) scale(0.8);
          transform: translate(-50%, -50%) scale(0.8);
  box-shadow: 0px 0px 0px 0.4rem #C44928;
}

.points {
  display: block;
  text-align: center;
  background: #C44928;
  box-sizing: border-box;
  border-radius: 0.125rem;
  padding: 0.5rem;
  margin: 0 0.125rem;
  font-weight: 400;
  font-size: 1.25rem;
}
.winning .points {
  background: #60AE24;
}

.details {
  width: 100%;
  text-align: center;
  margin: 1rem 0;
}
.details button {
  padding: 0.5rem;
  font-size: 1rem;
}
.details button:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.details span {
  line-height: 38px;
}

.results {
  margin-bottom: 1rem;
}
.results::after {
  content: "";
  clear: both;
  display: table;
}

.bars:after {
  content: "";
  clear: both;
  display: table;
}
.bars .bar {
  display: block;
  width: 16.66%;
  float: left;
  font-size: 0.875rem;
  box-sizing: border-box;
  padding: 0.125rem;
  text-align: center;
}
.bars .bar > span {
  display: block;
  line-height: 1;
  margin: 0.5rem 0;
}
.bars .bar-track {
  position: relative;
  overflow: hidden;
  height: 120px;
}
.bars .bar-val {
  position: absolute;
  bottom: 0;
  top: 100%;
  left: 0;
  right: 0;
  -webkit-transition: top 250ms ease-in-out, background 500ms ease-in-out;
  transition: top 250ms ease-in-out, background 500ms ease-in-out;
  background: #C44928;
  box-sizing: border-box;
  border-radius: 0.125rem;
  padding: 0.25rem;
}
.bars .bar-val.winning {
  background: #60AE24;
}

[ng-controller] {
  max-width: 1000px;
  min-width: 600px;
  margin: 2rem auto;
}

[ng-cloak] {
  display: none;
}

.label {
  margin: 0.5em 0;
  font-size: 2rem;
}

.input-wrap {
  position: relative;
  width: 50%;
  min-width: 280px;
  margin: 0 auto;
}
.input-wrap input {
  width: 100%;
  display: block;
}
.input-wrap button {
  display: block;
  position: absolute;
  padding: 0.5rem;
  font-size: 1rem;
  top: 50%;
  right: 1rem;
  -webkit-transform: translateY(-50%) scale(1);
          transform: translateY(-50%) scale(1);
}
.input-wrap button:hover {
  -webkit-transform: translateY(-50%) scale(1.05);
          transform: translateY(-50%) scale(1.05);
}
.input-wrap .user-thumb {
  position: absolute;
  width: calc(60px - 1rem);
  height: calc(60px - 1rem);
  left: 1rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 50%;
  background: black;
  background-size: cover;
  background-position: center;
}
.input-wrap .user-thumb img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

.username-error {
  color: #C44928;
  text-align: center;
  margin-top: 1em;
}

input, button {
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  box-sizing: border-box;
  padding: 1rem 1rem;
  border-radius: 0.125rem;
  font-family: Quicksand;
  font-weight: 400;
  font-size: 1.5rem;
  text-align: center;
}

.button {
  display: block;
}

input {
  background: rgba(255, 255, 255, 0.2);
}
input:focus {
  background: rgba(255, 255, 255, 0.4);
}

button {
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: black;
  color: white;
}
button.pos {
  background: #60AE24;
}

.button {
  margin: 0 auto;
  width: 50%;
  min-width: 240px;
}
.button.fight {
  margin-top: 2rem;
  background-color: #FFBB00;
  -webkit-animation: glow 2s ease-in-out infinite;
          animation: glow 2s ease-in-out infinite;
}
.button.fight:hover {
  -webkit-animation: none;
          animation: none;
}
.button.fight:disabled {
  opacity: 0.5;
  -webkit-animation: none;
          animation: none;
}
.button:hover:not(:disabled) {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

@-webkit-keyframes glow {
  0%, 100% {
    box-shadow: 0px 0px 0px 0px #FFBB00;
  }
  50% {
    box-shadow: 0px 0px 20px 0px #FFBB00;
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0px 0px 0px 0px #FFBB00;
  }
  50% {
    box-shadow: 0px 0px 20px 0px #FFBB00;
  }
}
.user-detail-modal-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
}
.user-detail-modal-bg:hover {
  background: rgba(0, 0, 0, 0.3);
}

button.primary {
  background: #FFBB00;
}

.user-detail-modal {
  position: fixed;
  background: black;
  top: 10%;
  left: 50%;
  width: 600px;
  max-width: 90%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  padding: 2rem;
  box-sizing: border-box;
  border-radius: 0.125rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.user-detail-modal a {
  color: #FFBB00;
}
.user-detail-modal .user-detail-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
}
.user-detail-modal .user-detail-image {
  width: 100px;
  height: auto;
  border-radius: 50%;
  display: block;
  margin: 0 auto 1rem;
  box-shadow: 0px 0px 0px 0.1rem rgba(255, 255, 255, 0.1);
}
.user-detail-modal h1 {
  font-size: 40px;
  line-height: 40px;
  margin: 0rem 0 1rem;
}
.user-detail-modal table {
  width: 100%;
  background: #111;
}
.user-detail-modal table tbody {
  height: 300px;
  overflow-y: auto;
  display: block;
}
.user-detail-modal table tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.user-detail-modal table td, .user-detail-modal table th {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.user-detail-modal table th {
  background: #000;
  text-transform: uppercase;
  padding: 1em 0.5em;
}
.user-detail-modal table td {
  padding: 0.5em;
  font-family: monospace;
  text-align: center;
}
.user-detail-modal table tr:nth-child(even) {
  background: #222;
}

p {
  text-align: center;
}
p small {
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
}

h1, h2 {
  font-family: Quicksand;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  color: #FFF;
}

h1 {
  margin: 3rem 0 2rem;
  position: relative;
  font-size: 50px;
  line-height: 50px;
}
h1 img {
  vertical-align: middle;
  width: 60px;
  height: auto;
  margin-top: -10px;
  z-index: -1;
}

h2 {
  margin-top: 0px;
}

a {
  text-decoration: none;
  color: white;
}
a:hover {
  color: #FFBB00;
}

footer {
  margin-top: 1rem;
  text-align: center;
}
footer a {
  color: #FFBB00;
}

body {
  font-family: Quicksand;
  background: #111;
  background: -webkit-linear-gradient(bottom right, #111, #222);
  background: linear-gradient(bottom right, #111, #222);
  color: white;
}

html, body {
  min-height: 100%;
}
JS
// thanks for the api, @natewiley!
console.clear();
var app = angular.module('CodepenData', []);

app.service('CodepenDataService', [
  '$q',
  function($q) {
    return {
      getPens: function(who,which,page) {
        var request = '//cpv2api.com/pens/'+which+'/'+who+'/?page='+page;
        var deferred_data = $q.defer();
        $.ajax({
          dataType: 'json',
          url: request,
          success: function (res) { 
            if(res.data && res.data.length) {
              deferred_data.resolve(res.data); 
            } else {
              deferred_data.reject(res);
            }
          },
          error: function (err) { deferred_data.reject(err); }
        });
        return deferred_data.promise;
      },
      
      getUser: function(who) {
        var request = '//cpv2api.com/profile/'+who;
        var deferred_data = $q.defer();
        $.ajax({
          dataType: 'json',
          url: request,
          success: function (res) {
            if(res.data) {
              deferred_data.resolve(res.data); 
            } else {
              deferred_data.reject(res);
            }
          },
          error: function (err) { deferred_data.reject(err); }
        });
        return deferred_data.promise;
      }
    }
  }
]);


app.directive('bar', [
  function() {
    return {
      scope: {
        val: "=bar",
        comp: "=",
        label: "@"
      },
      template: '
'+ '
'+ ''+ '{{val|number}}'+ '
'+ '{{label}}' + '
', link: function(scope, $el, attrs) { scope.top = scope.val/scope.comp * 100 + "%"; } } } ]); app.controller('CodepenDataController', [ '$scope', '$http', '$timeout', 'CodepenDataService', function($scope, $http, $timeout, CodepenDataService) { $scope.edit = true; $scope.complete = false; $scope.userChange = function(user) { clearError(user); user.loaded = false; } $scope.loadUser = function(user) { if(!user.loading) { user.loading = true; if (user.nickname) getUser(user); } } var empty_user = function(username) { return { nickname: username || '', loaded: false, pens_loaded: false, pens: [], points: 0, winning: false, stats: { hearts: 0, views: 0, comments: 0 } }; }; var users_base = function() { return [ empty_user(), empty_user() ]; } var top_base = { pens: 0, hearts: 0, views: 0, comments: 0, followers: 0, following: 0 }; $scope.reset = function() { $scope.users = users_base(); $scope.top = top_base; $scope.complete = false; $scope.edit = true; checkForParams(); clearErrors(); } $scope.reset(); function checkForParams() { var username_1 = getParam('u1') || '', username_2 = getParam('u2') || ''; if(username_1) { $scope.users[0].nickname = username_1; getUser($scope.users[0]); } if(username_2) { $scope.users[1].nickname = username_2; getUser($scope.users[1]); } } function updateTops() { var u1 = $scope.users[0], u2 = $scope.users[1], top = { pens: Math.max(u1.pens.length, u2.pens.length), hearts: Math.max(u1.stats.hearts, u2.stats.hearts), views: Math.max(u1.stats.views, u2.stats.views), comments: Math.max(u1.stats.comments, u2.stats.comments), followers: Math.max(u1.stats.followers, u2.stats.followers), following: Math.max(u1.stats.following, u2.stats.following), points: Math.max(u1.points, u2.points), total_points: u1.points + u2.points } $scope.top = top; // who is winning? if(u1.points > u2.points) { u1.winning = true; u2.winning = false; } else { u1.winning = false; u2.winning = true; } } function updatePen(user, pen) { pen.loves = removeDelimiter(pen.loves); pen.views = removeDelimiter(pen.views); pen.comments = removeDelimiter(pen.comments); user.stats.hearts += pen.loves; user.stats.views += pen.views; user.stats.comments += pen.comments; user.pens.push(pen); } function removeDelimiter(string) { if(typeof string !== 'string') return string; return parseInt(string.replace(/,/g, '')); } function setCurrentPen(user, pens, i) { if(i < pens.length) { user.current_pen = pens[i]; $timeout(function() { setCurrentPen(user, pens, i + 1); }, 100); } } function updateUser(user, profile) { user.stats.followers = removeDelimiter(profile.followers); user.stats.following = removeDelimiter(profile.following); user.nicename = profile.nicename; user.image_src = profile.avatar; user.loaded = true; } function checkComplete() { if ($scope.edit) { $scope.complete = false; } else if($scope.users[0].pens_loaded && $scope.users[1].pens_loaded) { $scope.complete = true; } else { $scope.complete = false; } } function getPoints(user) { var points = 0; points += user.stats.views; points += user.stats.followers * 100; points += user.stats.following * 100; points += user.pens.length * 20; points += user.stats.hearts * 100; points += user.stats.comments * 50; user.points = points / 10000; } function setImages() { var ratio_1 = $scope.users[0].points / $scope.top.total_points; var ratio_2 = $scope.users[1].points / $scope.top.total_points; $scope.users[0].image_size = { width: ratio_1 * 100 + '%' }; $scope.users[1].image_size = { width: ratio_2 * 100 + '%' }; } function getUserPens(user, page) { var getPens = CodepenDataService.getPens(user.nickname, 'public', page); getPens.then(function(pens) { setCurrentPen(user, pens, 0); $.each(pens, function() { this.views = removeDelimiter(this.views || 0); this.loves = removeDelimiter(this.loves || 0); this.comments = removeDelimiter(this.comments || 0); updatePen(user,this); }); getPoints(user); updateTops(); setImages(); if(!$scope.edit) { $timeout(function() { getUserPens(user, page + 1); }, 600); } else { handleUserComplete(user, 'Cancelled'); } }, function(err) { handleUserComplete(user, err); }); } function handleUserComplete(user, message) { user.current_pen = null; if(!user.pens_loaded) user.pens_loaded = true; checkComplete(); } function getUser(user) { var getUser = CodepenDataService.getUser(user.nickname); getUser.then(function(profile) { user.loading = false; updateUser(user, profile); }, function(err) { user.loading = false; user.error = '"' + user.nickname + '" could not be found.'; console.warn(err); }); } $scope.setDetailUser = function(user) { $scope.detail_user = user; } $scope.resetDetailUser = function() { $scope.detail_user = false; } $scope.loadCodepenData = function() { $scope.edit = false; $.each($scope.users, function() { var user = this; var getting = true; getUserPens(user,1); }); }; $scope.randomUser = function(which) { $scope.users[which].nickname = randomUser(); getUser($scope.users[which]); } function clearError(user) { user.error = ""; } function clearErrors() { clearError($scope.users[0]); clearError($scope.users[1]); } function randomUser() { var users = usersList(); return users[Math.round(Math.random() * (users.length - 1))] } // top 300 users. thanks @natewiley! function usersList() { return [ "thebabydino","tmrDevelops","pixelass","WhiteWolfWizard","natewiley","oknoblich","bennettfeely","jackrugile","hugo","LukyVj","towc","yoksel","dudleystorey","lukerichardville","Hornebom","netsi1964","nakome","berdejitendra","kenjiSpecial","katydecorah","rlemon","abergin","chrisgannon","ge1doot","lbebber","loktar00","Sonick","FWeinb","juanbrujo","andreasstorm","zadvorsky","tholman","Mombasa","fixcl","judag","MyXoToD","EduardoLopes","Zeaklous","HugoGiraudel","suez","grayghostvisuals","satchmorun","rileyjshaw","dope","gbnikolov","jakealbaugh","hakimel","elrumordelaluz","Mamboleoo","rachsmith","chrisota","kevinjannis","Kseso","TimPietrusky","ImagineProgramming","enxaneta","SitePoint","joshnh","KyleDavidE","brbcoding","TimLamber","raurir","rafaelcastrocouto","joe-watkins","alexsafayan","leemark","samarkandiy","motorlatitude","desandro","the_ruther4d","antoniskamamis","sdras","DonKarlssonSan","carpenumidium","ettrics","pmk","jakob-e","lonekorean","pouretrebelle","jshawl","wontem","tystrong","ScottMarshall","akwright","laviperchik","sol0mka","Pesca","mariusbalaj","spookyscary","chriscoyier","scottkellum","donovanh","GreenSock","code_dependant","zerospree","grgrdvrt","markmurray","Thibaut","unmeshpro","davatron5000","jorgeatgu","trhino","Dreamdealer","maggiben","m412c0","soulwire","32bitkid","waddington","rickyeckhardt","yukulele","egrucza","Francext","winkerVSbecks","nicolazj","schoenwaldnils","pcameron","indyplanets","EightArmsHQ","dervondenbergen","fbrz","seanseansean","mikehobizal","joshbader","zachernuk","nicoptere","noahblon","daneden","cx20","codeandcam","roborich","gastonfig","simeydotme","vineethtr","gpyne","Ruddy","wenbin5243","shubhra","hynden","acarva1","martinwolf","SaschaSigl","kaliedarik","stefanjudis","Xanmia","noeldelgado","Michiel","simurai","timohausmann","GabbeV","boltaway","pixelthing","airnan","MichaelArestad","ykob","Metty","DeptofJeffAyer","atelierbram","jjmartucci","creme","soulrider911","designcouch","ZevanRosser","dehash","geoffyuen","davilious","msurguy","hans","dissimulate","edankwan","satcy","chinchang","trajektorijus","mladen___","johnie","kman","tjoen","chrisnager","AmeliaBR","yusufbkr","jonitrythall","rachelwong","beesandtrees","jpod","cchambers","auginator","frytyler","jessenwells","robertmesserle","Oka","naoyashiga","mariosmaselli","XDBoy018","larrygeams","BrianDGLS","moklick","andytran","CrocoDillon","zessx","msval","pankajparashar","jonigiuro","MarcMalignan","jeroens","ludviglindblom","sakri","keithclark","ajerez","mallendeo","alexdevero","jurbank","brownerd","jcoulterdesign","potatoDie","shakdaniel","marian-cojoc-ro","rachelnabors","uriuriuriu","virgilpana","zachacole","bronsrobin","daless14","Elbone","ZCKVNS","vsync","pirrera","matt-west","long-lazuli","awesomephant","frxnz","Lewitje","amcharts","yy","SaraSoueidan","Aldlevine","jxnblk","icebob","PageOnline","ElmahdiMahmoud","terrymun","icutpeople","prowebix","carmination","bali_balo","fusco","jaflo","boylett","adamjld","brandonbrule","chris-creditdesign","nickmoreton","mknadler","igcorreia","scrimothy","rss","run-time","jlong","macreart","achudars","ssh","cjgammon","ControlledChaos","monstersaurous","christian-fei","captainbrosset","Funsella","kevingimbel","onediv","s","rlacorne","Yakudoo","drew_mc","shshaw","michaellee","ThisIsJohnBrown","chrislaarman","jotavejv","tdevine33","ionic","pwsm50","shadeed","georgehastings","ademilter","keithwyland","khadkamhn","rikschennink","bphillips201","zitrusfrisch","jhamon","andersschmidt","Rplus","chrishutchinson","Zaku","jsbrown","kowlor","paintbycode","ashmind","souporserious","Guilh" ] } } ]); function getParam(name) { name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'), results = regex.exec(location.search); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); }

Description

Now using @natewiley's cpv2api
Term
Mon, 11/27/2017 - 21:24

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv