JS六度空间理论（社交关系）计算演示

six degree是一个社交关系网（人脉）理论，你和任何一个陌生人之间所间隔的人不会超过六个，也就是说，最多通过六个人你就能够认识任何一个陌生人。

js, social

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1376
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

/**
 * Minimal wrapper class for Nate Wiley's cpv2api (http://cpv2api.com/).
 * It's super specific to this app and pretty fragile, I wouldn't recommend using it elsewhere.
 */

var CPV2 = function() {
    function CPV2() {
        _classCallCheck(this, CPV2);

this.apiURL = "https://cpv2api.herokuapp.com/";
        this.throttler = new AjaxThrottler();
    }

/**
     * Gets a user's profile
     * @param {string} user - username of user to be retrieved
     * @param {function} callback
     */

CPV2.prototype.getUser = function getUser(user, callback) {
        this.throttler.addRequest({
            url: this.apiURL + "profile/" + user,
            success: function success(r) {
                callback(r);
            }
        });
    };

/**
     * Gets a follow count (whether following or followers) for a user.
     * @param {string} user - username of user to be checked
     * @param {strong} key - key of data to be returned ('following' or 'followers')
     * @param {function} callback - uses the found count as arg
     */

CPV2.prototype.getCount = function getCount(user, key, callback) {
        this.getUser(user, function(r) {
            if (r.success) {
                callback(parseInt(r.data[key]));
            }

// User not found. Mostly (only?) happens with teams, which would need
            // to be handled seperately. Currently, teams aren't supported by cpv2api
            else {
                callback(0);
            }
        });
    };

/**
     * Recursively loops through a grid and returns all pages of data
     * @param {set} [data = new Set()] - holds all data retrieved
     * @param {number} [page = 1] - current page of grid
     * @param {string} - endpoint of grid to be looked up
     * @param {function} eachPage - fired after each page has been retrieved
     * @param {function} onComplete - fired once all pages have been retrieved
     */

CPV2.prototype.getAllPages = function getAllPages(_ref) {
        var _this = this;

var _ref$data = _ref.data;
        var data = _ref$data === undefined ? new Set() : _ref$data;
        var _ref$page = _ref.page;
        var page = _ref$page === undefined ? 1 : _ref$page;
        var endpoint = _ref.endpoint;
        var eachPage = _ref.eachPage;
        var onComplete = _ref.onComplete;

return CPV2;
}();

/**
 * Just in case there's some situation where hundreds of requests
 * are trying to fire at once, this ensures that only a somewhat
 * sane amount are actually going off at the same time.
 *
 * In extreme situations the browser can actually just crash without this.
 */

var AjaxThrottler = function() {
    function AjaxThrottler() {
        _classCallCheck(this, AjaxThrottler);

this.requestsBeforeThrottle = 10; // number of allowed requests before throttling kicks in
        this.pendingRequests = []; // current number of pending requests
        this.queuedRequests = []; // current number of queued requests
    }

/**
     * Adds a request to the queue
     * @param {object} requestSettings - The settings to be used for the ajax request (uses $.ajax)
     */

AjaxThrottler.prototype.addRequest = function addRequest(requestSettings) {
        var _this2 = this;

requestSettings.beforeSend = function(jqXHR) {
            _this2.pendingRequests.push(jqXHR);
        };

requestSettings.complete = function(jqXHR) {
            var index = _this2.pendingRequests.indexOf(jqXHR);
            _this2.pendingRequests.splice(index, 1);
            _this2.processNext();
        };

if (this.pendingRequests.length < this.requestsBeforeThrottle) {
            $.ajax(requestSettings);
        } else {
            this.queuedRequests.push(requestSettings);
        }
    };

AjaxThrottler.prototype.processNext = function processNext() {
        var request = this.queuedRequests.shift();
        if (request) {
            $.ajax(request);
        }
    };

return AjaxThrottler;
}();

/**
 * Loops over a set of items calls asynchronous functions.
 * Once those functions have all completed, executes a callback.
 * @param {function} loopFunc - the fuction to be executed. All items queued will be passed as an argument.
 * @param {funciton} killFunc - function executed after the queue has been terminated manually
 * @param {function} callback - executed once *all* items have been processed
 *
 * This whole mess needs to be refactored 'cause right now you need to pass in
 * random functions that should really be contained in the class.
 */

var AsyncQueue = function() {
    function AsyncQueue(_ref2) {
        var loopFunc = _ref2.loopFunc;
        var callback = _ref2.callback;
        var killFunc = _ref2.killFunc;

_classCallCheck(this, AsyncQueue);

this.items = new Set();
        this.loopFunc = loopFunc;
        this.callback = callback;
        this.killFunc = killFunc;
    }

/**
     * Adds an item to the queue
     * @param {*} item - item to be added to the queue. Will be passed as an argument to loopFunc
     */

AsyncQueue.prototype.addItem = function addItem(item) {
        this.items.add(item);
    };

/**
     * Removes an item from the queue. If no items remain, fires the queue's callback.
     * @param {*} item - item to be removed from the queue
     */

AsyncQueue.prototype.removeItem = function removeItem(item) {
        this.items.delete(item);
        if (this.items.size === 0) {
            this.callback();
        }
    };

/**
     * Removes everything from the queue and executes the kill function
     */

AsyncQueue.prototype.kill = function kill() {
        var _this3 = this;

this.items.forEach(function(item) {
            _this3.removeItem(item);
        });
        this.removeItem = function() {
            return;
        };
        this.killFunc();
    };

// Loops through all items currently in the queue.

AsyncQueue.prototype.process = function process() {
        var _this4 = this;

this.items.forEach(function(item) {
            _this4.loopFunc(item);
        });
    };

return AsyncQueue;
}();

/**
 * Basically just a tree node. But calling them nodes feels so impersonal :(
 */

var User = function User(_ref3) {
    var username = _ref3.username;
    var nicename = _ref3.nicename;
    var avatar = _ref3.avatar;
    var _ref3$parent = _ref3.parent;
    var parent = _ref3$parent === undefined ? null : _ref3$parent;

_classCallCheck(this, User);

this.username = username;
    this.nicename = nicename;
    this.avatar = avatar;
    this.parent = parent;
    this.link = $("<a target=\"_blank\">");
    this.link.text("@" + this.username);
    this.link.attr("href", "http://codepen.io/" + this.username);
};

/**
 * Stores users. Keeps track of all current usernames
 * in a set for super fast searching, as well as keeping
 * an array of User instances that represents what level
 * of the tree each user came from.
 */

var UserStore = function() {
    function UserStore() {
        _classCallCheck(this, UserStore);

this.userSet = new Set();
        this.levels = [];
        this.addLevel();
    }

/**
     * @param {User} user - the user to store
     */

UserStore.prototype.addUser = function addUser(user) {
        if (this.userSet.has(user.username)) {
            return;
        }
        this.userSet.add(user.username);
        this.currentLevel.push(user);
    };

/**
     * Creates an empty array and inserts it into the array of levels
     */

UserStore.prototype.addLevel = function addLevel() {
        this.currentLevel = [];
        this.levels.push(this.currentLevel);
    };

return UserStore;
}();

var Counter = function() {
    function Counter(el) {
        _classCallCheck(this, Counter);

this.el = el;
        this.queue = 0;
        this.totalCount = 0;
        this.animating = false;
    }

Counter.prototype.add = function add() {
        var _this5 = this;

this.queue++;
        if (!this.animating) {
            this.animating = true;
            this.raf = requestAnimationFrame(function() {
                _this5.animate();
            });
        }
    };

Counter.prototype.animate = function animate() {
        var _this6 = this;

if (this.queue > 0) {
            var diff = Math.ceil(this.queue / 10);
            this.queue -= diff;
            this.totalCount += diff;
            this.el.text(this.totalCount);
            this.raf = requestAnimationFrame(function() {
                _this6.animate();
            });
        } else {
            cancelAnimationFrame(this.raf);
            this.animating = false;
        }
    };

return Counter;
}();

/**
 * Overall tree of users. Does all the user stuff. users.
 * @param {string} username - the parent of this tree
 * @param {string} endpoint - the endpoint this string will use to add new levels ('followers' or 'following')
 */

var UserTree = function() {
    function UserTree(user, endpoint, counter) {
        _classCallCheck(this, UserTree);

this.endpoint = endpoint;
        this.userStore = new UserStore();
        this.userStore.addUser(user);
        this.counter = counter;
    }

/**
     * Adds a new level to the tree
     * @param {function} callback
     * @param {function} [killEarlyTest] - checks if the loop should bail early
     */

UserTree.prototype.addLevel = function addLevel(callback, killEarlyTest) {
        var _this7 = this;

// Sets up a new queue that will loop through *all* users in the current level,
        // and add *their* followers/followees (depending on the tree's endpoint)
        // to a new level
        var queue = new AsyncQueue({
            loopFunc: function loopFunc(user) {
                cpv2.getAllPages({
                    endpoint: _this7.endpoint + "/" + user.username,
                    eachPage: function eachPage(response, data) {
                        data.forEach(function(newUser) {
                            _this7.counter.add();
                            _this7.userStore.addUser(new User({
                                username: newUser.username,
                                nicename: newUser.nicename,
                                avatar: newUser.avatar,
                                parent: user
                            }));
                        });
                        if (killEarlyTest()) {
                            queue.kill();
                        }
                    },
                    onComplete: function onComplete() {
                        queue.removeItem(user);
                    }
                });
            },
            killFunc: function killFunc() {
                cpv2.bailEarly = true;
            },
            callback: callback
        });

this.userStore.currentLevel.forEach(function(user) {
            queue.addItem(user);
        });

this.userStore.addLevel();
        queue.process();
    };

/**
     * Gets the number of users in the next level without actually traversing it.
     * This is useful because there is huge time saving potential -- often times
     * checking ~50 users can save us from having to loop through hundreds if not thousands.
     * @param {function} callback - will be called with the found amount as arg
     */

UserTree.prototype.getAmountInNextLevel = function getAmountInNextLevel(_callback) {
        var _this8 = this;

var level = this.userStore.currentLevel;
        // If we've already looped through this level we don't
        // need to waste time doing so again
        if (this.cachedLevel && this.cachedLevel.level == level) {
            _callback(this.cachedLevel.count);
            return;
        }
        // Okay this is dumb as hell but basically we're just gonna skip this
        // step if the number of users we'd have to loop through is too high.
        // If we don't we'll waste a ton of time counting everything and frankly
        // if there's this large of a level it's gonna take a while anyways.
        //
        // Choosing 60 is totally arbitrary. The right way to do this is probably
        // to set up some sorta timeout but if everything else wasn't evidence
        // enough, I'm clearly on a mission to do things the most painful way possible.
        if (level.length > 60) {
            _callback(99999);
            return;
        }

// Otherwise if there's a sane amount of users to loop through
        // we'll go ahead and do it.
        var count = 0;
        var queue = new AsyncQueue({
            loopFunc: function loopFunc(user) {
                cpv2.getCount(user, _this8.endpoint, function(currentCount) {
                    count += currentCount;
                    queue.removeItem(user);
                    _this8.counter.add();
                });
            },
            callback: function callback() {

// caches level for easy reference later
                _this8.cachedLevel = {
                    level: level,
                    count: count
                };
                _callback(count);
            }
        });

level.forEach(function(user) {
            queue.addItem(user.username);
        });
        queue.process();
    };

return UserTree;
}();

/**
 * Handles all of the logic between comparing two users and is ultimately
 * responsible for finding a match if one exists.
 * @param {string} followee - username of the tree that will be built of followees
 * @param {string} follower - username of the tree that will be built of followers
 */

var TreeComparer = function() {
    function TreeComparer(_ref4) {
        var follower = _ref4.follower;
        var followee = _ref4.followee;
        var success = _ref4.success;
        var failure = _ref4.failure;
        var counter = _ref4.counter;

_classCallCheck(this, TreeComparer);

this.followerTreeParent = this.follower;
        this.followingTreeParent = this.followee;
        this.success = success;
        this.failure = failure;
        this.followerTree = new UserTree(followee, "followers", counter);
        this.followingTree = new UserTree(follower, "following", counter);
        this.loop();
    }

/**
     * Main comparison loop. If a match is found or a tree is dead, stops the loop.
     * Otherwise keeps this party goin'
     */

TreeComparer.prototype.loop = function loop() {
        var match = this.checkForMatches();
        if (match) {
            this.buildMatchChain(match);
        } else if (this.followerTree.userStore.currentLevel.length === 0 || this.followingTree.userStore.currentLevel.length === 0) {
            this.giveUp();
        } else {
            this.advanceTreeWithShorterLevel();
        }
    };

TreeComparer.prototype.giveUp = function giveUp() {
        this.failure();
    };

/**
     * Looks at each tree to determine the size of the *next* level, and then adds
     * a level to the smaller of the two. Calls loop() when it's done.
     *
     * Basically this allows us to make as few requests as possible.
     * For example, if I want to look up if Chris Coyier, who's following an astounding 1467 people,
     * is following me (only 94 followers), it makes a lot more sense to check *my followers* rather
     * than the people that *Chris is following*.
     *
     * Over time this can save us *hundreds* of requests. Slow networks everywhere rejoice.
     */

TreeComparer.prototype.advanceTreeWithShorterLevel = function advanceTreeWithShorterLevel() {
        var _this9 = this;

this.followingTree.getAmountInNextLevel(function(followingCount) {
            _this9.followerTree.getAmountInNextLevel(function(followerCount) {
                var treeToAdvance = undefined;
                if (followingCount < followerCount) {
                    treeToAdvance = _this9.followingTree;
                } else {
                    treeToAdvance = _this9.followerTree;
                }
                treeToAdvance.addLevel(function() {
                    _this9.loop();
                }, function() {
                    return _this9.checkForMatches();
                });
            });
        });
    };

/**
     * Looks for matches across the two trees
     * @returns {User|Boolean} match - returns the matched user if found, otherwise returns false
     */

TreeComparer.prototype.checkForMatches = function checkForMatches() {
        return this.checkForDirectMatch() || this.checkForIndirectMatch() || false;
    };

/**
     * Checks whether the opposing user set contains the target username
     * (if it does, we found them directly and don't need to loop through arrays looking for an indirect match)
     * @returns {User|Boolean} match - returns the matched user if found, otherwise returns false
     */

TreeComparer.prototype.checkForDirectMatch = function checkForDirectMatch() {
        // Bail early if we can 'cause this is faster to calculate than looping through arrays
        if (!this.followingTree.userStore.userSet.has(this.followerTreeParent) && !this.followerTree.userStore.userSet.has(this.followingTreeParent)) {
            return false;
        }

// Once we know we have a match we still need to go and find it. Not sure
        // if it's faster to search the smaller level first or vice versa,
        // might be worth benchmarking at some point.
        var followingTreeCurrent = this.followingTree.userStore.currentLevel;
        for (var i = 0; i < followingTreeCurrent.length; i++) {
            if (followingTreeCurrent[i].username == this.followerTreeParent) {
                return {
                    followingMatch: followingTreeCurrent[i]
                };
            }
        }

/**
     * Checks for overlap across the most recent levels of each tree
     * @returns {User|Boolean} match - returns the matched user if found, otherwise returns false
     */

TreeComparer.prototype.checkForIndirectMatch = function checkForIndirectMatch() {
        var followingTreeCurrent = this.followingTree.userStore.currentLevel;
        var followerTreeCurrent = this.followerTree.userStore.currentLevel;
        for (var i = 0; i < followingTreeCurrent.length; i++) {
            for (var j = 0; j < followerTreeCurrent.length; j++) {
                if (followingTreeCurrent[i].username == followerTreeCurrent[j].username) {
                    return {
                        followingMatch: followingTreeCurrent[i],
                        followerMatch: followerTreeCurrent[j]
                    };
                }
            }
        }
    };

/**
     * Constructs an ordered array from follower to followee.
     * @param {User} [followingMatch] - found match on the following side
     * @param {user} [followerMatch] - found match on the followee side
     */

TreeComparer.prototype.buildMatchChain = function buildMatchChain(_ref5) {
        var _ref5$followingMatch = _ref5.followingMatch;
        var followingMatch = _ref5$followingMatch === undefined ? null : _ref5$followingMatch;
        var _ref5$followerMatch = _ref5.followerMatch;
        var followerMatch = _ref5$followerMatch === undefined ? null : _ref5$followerMatch;

var matchArray = [];
        if (followingMatch) {
            while (followingMatch.parent) {
                matchArray.unshift(followingMatch);
                followingMatch = followingMatch.parent;
            }
            matchArray.unshift(followingMatch);
        }
        if (followerMatch) {

// if the array is empty (ie no following match) this won't do anything,
            // if it's not empty it'll trim the inevitable duplicate
            matchArray.splice(-1, 1);
            while (followerMatch.parent) {
                matchArray.push(followerMatch);
                followerMatch = followerMatch.parent;
            }
            matchArray.push(followerMatch);
        }
        this.success(matchArray);
    };

return TreeComparer;
}();

/**
 * Handles the initial selection of a user
 * @param {string} type - whether the user is a follower or followee
 */

var UserUI = function() {
    function UserUI(type) {
        _classCallCheck(this, UserUI);

this.type = type;
        this.template = $("#usercard-template").find(".usercard").clone();
        this.id = this.type.toLowerCase();
        this.template.attr("id", this.id);
        this.setupElements();
        this.bindEvents();
        this.ready = false;
        $(".usercards-wrap").append(this.template);
        // thx Jake http://codepen.io/jakealbaugh/pen/vOVVqG/ (who got it from Nate Wiley I guess? either way xoxo)
        this.randomUserList = ["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", "desandro", "the_ruther4d", "sdras", "DonKarlssonSan", "carpenumidium", "ettrics", "pmk", "jakob-e", "lonekorean", "pouretrebelle", "jshawl", "wontem", "tystrong", "ScottMarshall", "akwright", "laviperchik", "sol0mka", "Pesca", "mariusbalaj", "chriscoyier", "scottkellum", "donovanh", "GreenSock", "code_dependant", "zerospree", "grgrdvrt", "markmurray", "Thibaut", "unmeshpro", "davatron5000", "jorgeatgu", "trhino", "Dreamdealer", "maggiben", "soulwire", "32bitkid", "waddington", "rickyeckhardt", "yukulele", "egrucza", "Francext", "winkerVSbecks", "nicolazj", "schoenwaldnils", "pcameron", "indyplanets", "mariemosley", "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", "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", "frxnz", "Lewitje", "amcharts", "yy", "Aldlevine", "jxnblk", "icebob", "PageOnline", "terrymun", "icutpeople", "prowebix", "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", "quezo", "souporserious", "Guilh", "alexzaworski"];
    }

UserUI.prototype.reset = function reset() {
        this.ready = false;
        this.template.after(this.templateBackup);
        this.template.remove();
        this.template = this.templateBackup;
        this.templateBackup = this.template.clone();
        this.setupElements();
        this.bindEvents();
    };

UserUI.prototype.setupElements = function setupElements() {
        this.templateBackup = this.template.clone(true);
        this.form = this.template.find(".usercard__form");
        this.avatar = this.template.find(".usercard__avatar");
        this.heading = this.template.find(".usercard__name");
        this.subhead = this.template.find(".usercard__username");
        this.heading.text(this.type);
        this.subhead.text("@" + this.id);
        this.input = this.template.find(".usercard__input");
        this.inputRow = this.template.find(".usercard__input-wrap");
        this.stats = this.template.find(".usercard__userstats");
        this.back = this.template.find(".usercard__back");
        this.random = this.template.find(".usercard__random");
        this.followingStat = this.template.find(".js-following-stat");
        this.followerStat = this.template.find(".js-follower-stat");
        this.inputRow.jrumble({
            x: 3,
            y: 0,
            rotation: 0
        });
    };

UserUI.prototype.bindEvents = function bindEvents() {
        var _this10 = this;

this.form.on("submit", function(e) {
            _this10.handleFormSubmit(e);
        });
        this.back.click(function() {
            _this10.reset();
        });
        this.random.click(function() {
            var index = Math.floor(Math.random() * _this10.randomUserList.length);
            _this10.input.val(_this10.randomUserList[index]);
            _this10.input.trigger("input");
        });
    };

UserUI.prototype.handleFormSubmit = function handleFormSubmit(e) {
        var _this11 = this;

e.preventDefault();
        NProgress.configure({
            parent: "#" + this.id
        });
        NProgress.start();
        cpv2.getUser(this.input.val(), function(r) {
            if (r.success && r.data.username) {
                _this11.handleUser(r.data);
            } else {
                _this11.handleInvalidUser();
            }
        });
    };

UserUI.prototype.handleInvalidUser = function handleInvalidUser() {
        var _this12 = this;

this.input.addClass("invalid");
        this.inputRow.trigger("startRumble");
        setTimeout(function() {
            _this12.inputRow.trigger("stopRumble");
        }, 400);
        this.input.off("input");
        this.input.one("input", function() {
            _this12.input.removeClass("invalid");
        });
        NProgress.done();
    };

UserUI.prototype.handleUser = function handleUser(userData) {
        var _this13 = this;

this.user = new User({
            username: userData.username,
            nicename: userData.nicename,
            avatar: userData.avatar
        });

// grab the image first since that's the only thing that
        // actually has to download
        this.avatar.attr("src", userData.avatar);
        this.avatar.one("load error", function() {
            NProgress.done();
            _this13.subhead.html(_this13.user.link);
            _this13.heading.text(_this13.user.nicename);
            _this13.followerStat.text(userData.followers);
            _this13.followingStat.text(userData.following);
            _this13.prepUser();
            _this13.ready = true;
        });
    };

UserUI.prototype.prepUser = function prepUser() {
        this.stats.addClass("prepped");
        this.heading.addClass("prepped");
        this.avatar.addClass("prepped");
        this.subhead.addClass("prepped");
        this.revealUser();
    };

UserUI.prototype.revealUser = function revealUser() {
        var _this14 = this;

this.form.addClass("hidden");

// just kinda feels right if it's delayed a bit
        setTimeout(function() {
            _this14.back.addClass("active");
        }, 100);

// forces repaint so animations all fire
        this.template.find(".prepped").hide().show(0).addClass("active");
    };

UserUI.prototype.isReady = function isReady() {
        if (!this.ready) {
            this.handleInvalidUser();
            return false;
        }
        return true;
    };

return UserUI;
}();

/**
 * ... This is what happens when you don't use a framework.
 * ...
 * ... Use a framework.
 */

var App = function() {
    function App() {
        _classCallCheck(this, App);

this.cache();
        this.init();
    }

App.prototype.cache = function cache() {
        this.cache = $("body").clone();
    };

App.prototype.init = function init() {
        this.follower = new UserUI("Follower");
        this.followee = new UserUI("Followee");
        this.startButton = $(".start");
        this.startScreen = $("#start-screen");
        this.resultScreen = $("#result-screen");
        this.successScreen = $("#success-screen");
        this.resultWrap = $("#result-wrapper");
        this.counter = $("#counter");
        this.failScreen = $("#fail-screen");
        this.resetButton = $(".js-reset");
        this.bindEvents();
    };

App.prototype.restoreCache = function restoreCache() {
        $("body").replaceWith(this.cache.clone());
        this.init();
    };

// I am the undisputed champion of
    // semantic naming conventions

App.prototype.hideOffscreenThingo = function hideOffscreenThingo(thingo, callback) {
        thingo.addClass("hiding");
        thingo.one("transitionend", function() {
            thingo.addClass("hidden down").removeClass("hiding");
            if (callback) {
                callback();
            }
        });
    };

App.prototype.showOffscreenThingo = function showOffscreenThingo(thingo, callback) {
        thingo.removeClass("hidden");
        thingo.hide().show(0).removeClass("down");
        if (callback) {
            callback();
        }
    };

App.prototype.swapOffscreenThingos = function swapOffscreenThingos(currentThingo, newThingo, callback) {
        var _this15 = this;

this.hideOffscreenThingo(currentThingo, function() {
            _this15.showOffscreenThingo(newThingo, function() {
                if (callback) {
                    callback();
                }
            });
        });
    };

App.prototype.getHiddenThingoHeight = function getHiddenThingoHeight(thingo) {
        thingo.removeClass("hidden");
        var height = thingo.outerHeight(true);
        thingo.addClass("hidden");
        return height;
    };

App.prototype.prepResultScreen = function prepResultScreen() {
        NProgress.configure({
            parent: "#" + this.resultScreen.attr("id"),
            trickleSpeed: 800
        });
        NProgress.start();
        $("#head-to-head__follower-avatar").attr("src", this.follower.user.avatar);
        $("#head-to-head__follower-username").html(this.follower.user.link.clone());
        $("#head-to-head__follower-nicename").text(this.follower.user.nicename);
        $("#head-to-head__followee-avatar").attr("src", this.followee.user.avatar);
        $("#head-to-head__followee-username").html(this.followee.user.link.clone());
        $("#head-to-head__followee-nicename").text(this.followee.user.nicename);
    };

App.prototype.bindEvents = function bindEvents() {
        var _this16 = this;

this.resetButton.click(function() {
            _this16.restoreCache();
        });
        this.startButton.click(function() {
            if (_this16.follower.isReady() && _this16.followee.isReady()) {
                _this16.swapOffscreenThingos(_this16.startScreen, _this16.resultScreen, function() {
                    _this16.prepResultScreen();
                    var treeComparer = new TreeComparer({
                        follower: _this16.follower.user,
                        followee: _this16.followee.user,
                        counter: new Counter($(".counter__number")),
                        success: function success(matchArray) {
                            NProgress.done();
                            _this16.handleMatch(matchArray);
                        },
                        failure: function failure() {
                            NProgress.done();
                            _this16.handleNoMatch();
                        }
                    });
                });
            }
        });
    };

App.prototype.handleMatch = function handleMatch(matchArray) {
        var wrap = $("#pair-wrap");
        var template = $("#profile-pair").find(".profile-pair");

// ... lol
        if (matchArray.length == 1) {
            matchArray.push(matchArray[0]);
            template.find(".follows-text").text("is literally");
        }

for (var i = 0; i < matchArray.length - 1; i++) {
            var pair = template.clone();
            var follower = pair.find(".profile-pair__follower");
            var followee = pair.find(".profile-pair__followee");
            follower.find(".profile-pair__avatar").attr("src", matchArray[i].avatar);
            follower.find(".profile-pair__details__name").text(matchArray[i].nicename);
            follower.find(".profile-pair__details__username").html(matchArray[i].link.clone());
            followee.find(".profile-pair__avatar").attr("src", matchArray[i + 1].avatar);
            followee.find(".profile-pair__details__name").text(matchArray[i + 1].nicename);
            followee.find(".profile-pair__details__username").html(matchArray[i + 1].link.clone());
            wrap.append(pair);
        }
        this.displayResults(this.successScreen);
    };

App.prototype.handleNoMatch = function handleNoMatch() {
        this.displayResults(this.failScreen);
    };

App.prototype.displayResults = function displayResults(resultScreen) {
        var _this17 = this;

// ... I don't know why this needs 8 added pls help
        this.resultWrap.height(this.resultWrap.outerHeight(true) + 8);

this.resultWrap.height(this.getHiddenThingoHeight(resultScreen));
        this.hideOffscreenThingo(this.counter, function() {
            _this17.showOffscreenThingo(resultScreen);
        });
    };

return App;
}();

NProgress.configure({
    speed: 140
});
if (!!window.location.pathname.match(/fullcpgrid/)) {
    $("footer").hide();
}
var cpv2 = new CPV2();
var app = new App();

编译

CSS

html {
    box-sizing: border-box;
}
*,
*:after,
*:before {
    box-sizing: inherit;
}
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100vh;
    font-family: "Open Sans", sans-serif;
    color: #9492d5;
    background: #1E202F;
    padding: 16px;
}
a {
    color: #3F92DE;
    text-decoration: none;
}
a:hover {
    color: #5da3e3;
}
p {
    margin-bottom: 16px;
}
.intro {
    font-size: .85rem;
    margin-bottom: 32px;
    line-height: 1.6;
}
.lead {
    margin-top: 0;
    font-size: 1.2em;
    color: #cac9ea;
}
.page-wrap {
    margin: auto;
    width: 540px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.usercards-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 24px;
}
.card {
    -webkit-transition: height 0.25s cubic-bezier(.4, 0, 0, 1);
    transition: height 0.25s cubic-bezier(.4, 0, 0, 1);
    background: -webkit-linear-gradient(#323151, #282741);
    background: linear-gradient(#323151, #282741);
    padding: 24px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    overflow: hidden;
}
.card .card {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: -webkit-linear-gradient(#38365b, #323151);
    background: linear-gradient(#38365b, #323151);
}
.usercard {
    margin: auto;
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    position: relative;
}
.usercard:first-of-type {
    margin-right: 24px;
}
.usercard__avatar-wrap {
    width: 130px;
    height: 130px;
    background-size: cover;
    display: block;
    border-radius: 50%;
    margin: 0 auto;
    margin-bottom: 16px;
    background-image: url("/assets/coolboy.jpg");
    position: relative;
}
.usercard__avatar {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    -webkit-transition: -webkit-transform 0.145s cubic-bezier(.4, 0, 0, 1.425);
    transition: -webkit-transform 0.145s cubic-bezier(.4, 0, 0, 1.425);
    transition: transform 0.145s cubic-bezier(.4, 0, 0, 1.425);
    transition: transform 0.145s cubic-bezier(.4, 0, 0, 1.425), -webkit-transform 0.145s cubic-bezier(.4, 0, 0, 1.425);
    ;
}
.usercard__avatar.active {
    background-color: white;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}
.usercard__back {
    background: none;
    display: none;
    position: absolute;
    top: 24px;
    left: 24px;
    padding: 0;
    border: 0;
    stroke: #9492d5;
    opacity: .35;
    cursor: pointer;
}
.usercard__back.active {
    display: block;
}
.usercard__back:hover {
    opacity: .75;
}
.usercard__back:focus {
    opacity: 1;
    outline: none;
    stroke: #3F92DE;
}
.usercard__back:active {
    stroke: #9492d5;
}
.usercard__username {
    font-size: .9rem;
    text-align: center;
    margin-bottom: 16px;
}
.usercard__name {
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 4px;
    text-align: center;
    color: white;
}
.usercard__name.prepped,
.usercard__username.prepped {
    -webkit-transform: translateY(160px);
    transform: translateY(160px);
    opacity: 0;
}
.usercard__name.active,
.usercard__username.active {
    opacity: 1;
    -webkit-transition: all 0.1s cubic-bezier(0, 0, .2, 1);
    transition: all 0.1s cubic-bezier(0, 0, .2, 1);
    ;
    -webkit-transform: translateY(0);
    ;
    transform: translateY(0);
}
.usercard__form.hidden {
    display: none;
}
.usercard__input-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 32px;
    margin-bottom: 16px;
    position: relative;
}
.usercard__random {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 28px;
    height: calc(100% - 4px);
    padding: 4px;
    padding-right: 2px;
    background: #DBE6EC;
    border: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    fill: #282741;
}
.usercard__random svg {
    margin: auto;
    height: 100%;
    width: auto;
}
.usercard__random:focus {
    outline: none;
    fill: #3F92DE;
}
.usercard__random:hover {
    fill: #9492d5;
}
.usercard__random:active {
    fill: #282741;
}
.offscreen-thingo {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all 0.25s cubic-bezier(0, 0, .2, 1);
    transition: all 0.25s cubic-bezier(0, 0, .2, 1);
    ;
}
.offscreen-thingo:not(.hiding) {
    -webkit-transition-delay: .25s;
    transition-delay: .25s;
}
.offscreen-thingo.down {
    opacity: 0;
    -webkit-transform: translateY(80px);
    transform: translateY(80px);
}
.offscreen-thingo.hiding {
    opacity: 0;
}
.offscreen-thingo.hidden {
    display: none;
}
.usercard__input {
    font-size: .9rem;
    width: 100%;
    padding: 4px;
    background: #F0F5F8;
    border: 2px solid #DBE6EC;
    border-radius: 2px;
    color: inherit;
    color: #282741;
}
.usercard__input:focus {
    outline: none;
    border-color: #3F92DE;
}
.usercard__input::-webkit-input-placeholder {
    color: #b8b7e3;
}
.usercard__input::-moz-placeholder {
    color: #b8b7e3;
}
.usercard__input:-ms-input-placeholder {
    color: #b8b7e3;
}
.usercard__input::placeholder {
    color: #b8b7e3;
}
.usercard__input.invalid {
    border-color: #F73D63;
}
.templates {
    display: none;
}
.usercard__submit {
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    padding: 4px;
    height: 32px;
    font-size: .9rem;
    display: block;
    border: 1px solid #1f6bb2;
    color: #fff;
    letter-spacing: .02em;
    font-weight: bold;
    border-radius: 2px;
    width: 100%;
    background: #3F92DE;
}
.usercard__submit:focus {
    outline-width: 2px;
    outline-color: #62a6e4;
}
.usercard__submit:hover:not(:active) {
    background: #509fe7;
}
.usercard__userstats {
    display: none;
    -webkit-transform: translateY(160px);
    transform: translateY(160px);
    opacity: 0;
    -webkit-transition: all 0.1s cubic-bezier(0, 0, .2, 1);
    transition: all 0.1s cubic-bezier(0, 0, .2, 1);
    ;
}
.usercard__userstats.prepped {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.usercard__userstats.active {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.heading {
    font-size: .75rem;
    letter-spacing: .02em;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.important-heading {
    margin-bottom: 24px;
    margin-top: 16px;
    color: white;
}
.pseudo-underline:after {
    content: "";
    display: block;
    margin: 0 auto;
    height: 2px;
    margin-top: 8px;
    width: 32px;
    background: #3F92DE;
}
.pseudo-underline--huge:after {
    margin-top: 26px;
    width: 80px;
}
.pseudo-overline:before {
    content: "";
    display: block;
    margin: 0 auto;
    height: 2px;
    margin-bottom: 8px;
    width: 32px;
    background: #3F92DE;
}
.userstats__divider {
    text-align: center;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.userstats__stat {
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
}
#nprogress .bar {
    background: #9492d5;
}
#nprogress .spinner-icon {
    border-top-color: #9492d5;
    border-left-color: #9492d5;
}
.start {
    display: block;
    border: 1px solid #3dab3d;
    color: #fff;
    letter-spacing: .02em;
    font-weight: bold;
    border-radius: 2px;
    width: 100%;
    background: #6aca6a;
    padding: 8px;
    width: 66%;
    margin: 0 auto;
}
.start:focus {
    outline-width: 2px;
    outline-color: #88d588;
}
.start:hover:not(:active) {
    background: #78d578;
}
.head-to-head {
    background: #38365b;
    margin: -24px;
    margin-bottom: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.head-to-head__user {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    padding: 16px 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.head-to-head__user:nth-of-type(2) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.head-to-head__avatar {
    display: block;
    height: 56px;
    width: 56px;
    border-radius: 50%;
}
.head-to-head__text-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: right;
    margin: 0 16px;
}
.head-to-head__user:nth-of-type(2) .head-to-head__text-wrap {
    text-align: left;
}
.head-to-head__name {
    color: white;
    font-weight: bold;
    font-size: .8rem;
    margin: 0;
}
.head-to-head__username {
    font-size: .8rem;
}
.counter {
    text-align: center;
}
.counter__number {
    font-size: 4rem;
    font-weight: bold;
    margin: 16px 0;
    line-height: 1.15;
    color: white;
}
.profile-pair {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 16px;
    font-size: .85rem;
}
.profile-pair__follows {
    margin: auto 8px;
    font-size: .65rem;
}
.profile-pair__profile {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 0;
}
.profile-pair__arrow {
    height: 10px;
    width: auto;
    stroke: #9492d5;
    display: block;
    margin: 8px auto 4px auto;
}
.profile-pair__avatar {
    float: left;
    height: 48px;
    width: 48px;
    display: block;
    border-radius: 50%;
    margin-right: 8px;
}
.profile-pair__details {
    text-align: left;
    margin: auto 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
}
.profile-pair__details__name {
    font-weight: bold;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-pair__details__username {
    overflow: hidden;
    text-overflow: ellipsis;
}
.result-wrapper {
    -webkit-transition: height 0.35s cubic-bezier(.4, 0, 0, 1);
    transition: height 0.35s cubic-bezier(.4, 0, 0, 1);
    text-align: center;
}
footer {
    position: fixed;
    font-size: .85rem;
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    padding: 16px;
    bottom: 0;
    right: 0;
    opacity: .5;
    text-align: right;
    -webkit-transition: all 0.25s cubic-bezier(.4, 0, 0, 1);
    transition: all 0.25s cubic-bezier(.4, 0, 0, 1);
}
footer:hover {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

HTML

<div class="templates">
    <div id="usercard-template">
        <div class="card usercard">
            <button class="usercard__back">
                <svg xmlns="https://www.w3.org/2000/svg" width="18.5" height="18.2" viewBox="0 0 18.5 18.2">
                    <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M9.5 17.2L1.4 9.1 9.5 1M1.5 9.1h16" />
                </svg>
            </button>
            <div class="usercard__avatar-wrap">
                <img class="usercard__avatar" src="/assets/coolboy.jpg" alt="avatar" />
            </div>
            <h2 class="usercard__name"></h2>
            <div class="usercard__username"></div>
            <div class="usercard__userstats">
                <div class="userstats__divider">
                    <h3 class="heading pseudo-underline">Followers</h3>
                    <div class="userstats__stat js-follower-stat"></div>
                </div>
                <div class="userstats__divider">
                    <h3 class="heading pseudo-underline">Following</h3>
                    <div class="userstats__stat js-following-stat"></div>
                </div>
            </div>
            <form class="usercard__form">
                <div class="usercard__input-wrap">
                    <input required class="usercard__input" type="text" placeholder="username" autocomplete="off" />
                    <button type="button" class="usercard__random">
                        <svg xmlns="https://www.w3.org/2000/svg" width="285.1" height="262.5" viewBox="0 0 285.1 262.5">
                            <path d="M114.9 81.2c10.4-6 14.7-16 10.2-23.8-4.5-7.8-15.3-9.1-25.8-3.1-10.4 6-14.7 16-10.2 23.8 4.5 7.8 15.4 9.1 25.8 3.1zM64.7 148.5c-3.3-2-6.8-3.1-10.1-3.4-5.3-.4-10 1.7-12.4 5.7-2.4 4-2.1 9.1.8 13.6 1.8 2.8 4.5 5.3 7.8 7.3s6.8 3.1 10.1 3.4c3 .2 5.8-.4 8.1-1.6 1.8-1 3.2-2.4 4.3-4.1 4-6.7.4-15.5-8.6-20.9zM111 176.5c-3.3-2-6.8-3.1-10.1-3.4-5.3-.4-10 1.7-12.4 5.7s-2.1 9.1.8 13.6c1.8 2.8 4.5 5.3 7.8 7.3s6.8 3.1 10.1 3.4c3 .2 5.8-.4 8.1-1.6 1.8-1 3.2-2.4 4.3-4.1 4-6.8.4-15.6-8.6-20.9zM157.2 204.4c-3.3-2-6.8-3.1-10.1-3.4-5.3-.4-9.9 1.7-12.4 5.7-2.4 4-2.1 9.1.8 13.6 1.8 2.8 4.5 5.3 7.8 7.3s6.8 3.1 10.1 3.4c3 .2 5.8-.4 8.1-1.6 1.8-1 3.2-2.4 4.3-4.1 4-6.8.4-15.5-8.6-20.9z"
                            />
                            <path d="M279.4 107.7c-11.7-20.2-35.7-61.6-50-86.5C221.3 7.3 205.8-1 189.9 0L94.5 5.8c-14.3.9-27 8.2-34.8 20.1L7.1 105.4c-8.9 13.5-9.5 30.7-1.4 44.8 14 24.1 37.7 65.1 50 86.5 7.3 12.6 20.4 20.6 35 21.2l101.1 4.6h1.9c16.7 0 32.3-9.4 40.1-24.3l46.5-89.6c6.7-12.9 6.4-28.2-.9-40.9zM74.7 35.8c4.7-7.2 12.4-11.6 20.9-12.1l95.3-5.7h1.5c.6 0 1.2 0 1.8.1l-59.7 97-114.1 3.1c.5-1 1-1.9 1.6-2.8l52.7-79.6zm117.9 208.7l-101.1-4.6c-8.5-.4-16-4.9-20.2-12.2-12.3-21.4-36-62.4-50-86.5-.9-1.6-1.6-3.3-2.1-5l115.4-3.1L198.7 244c-2 .4-4 .6-6.1.5zm71.7-104.2l-46.5 89.6c-1 1.8-2.1 3.5-3.4 5.1l-64.2-110.9L210.6 26c1.2 1.3 2.3 2.7 3.2 4.3 14.3 24.9 38.3 66.3 50 86.5 4.2 7.2 4.4 16.1.5 23.5z"
                            />
                            <path d="M213.4 155.1c-4.7.1-8.8 3-11.2 7.8-1.4 3-2.2 6.6-2.1 10.4.2 10.5 6 18 13.9 17.9 2 0 4-.6 5.7-1.6 2.2-1.3 4.1-3.4 5.4-6.2 1.4-3 2.2-6.6 2.1-10.4-.1-3.8-.9-7.4-2.4-10.4-2.5-4.7-6.7-7.5-11.4-7.5zM213.2 90.9c2 0 4-.6 5.7-1.6 2.2-1.3 4.1-3.4 5.4-6.2 1.4-3 2.2-6.6 2.1-10.4-.1-3.8-.9-7.4-2.4-10.4-2.5-4.7-6.7-7.5-11.4-7.5-4.7.1-8.8 3-11.2 7.8-1.4 3-2.2 6.6-2.1 10.4.2 10.5 6 18 13.9 17.9z"
                            />
                        </svg>
                    </button>
                </div>
                <input type="submit" value="Load" class="usercard__submit" />
            </form>
        </div>
    </div>
    <div id="profile-pair">
        <div class="profile-pair">
            <div class="card profile-pair__profile profile-pair__follower">
                <img class="profile-pair__avatar" src="/assets/coolboy.jpg" alt="avatar" />
                <div class="profile-pair__details">
                    <div class="profile-pair__details__name">Name</div>
                    <div class="profile-pair__details__username">@username</div>
                </div>
            </div>
            <div class="profile-pair__follows heading">
                <span class="follows-text">Follows</span>
                <svg class="profile-pair__arrow" xmlns="https://www.w3.org/2000/svg" width="14.7" height="14.5" viewBox="0 0 14.7 14.5">
                    <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" class="st0" d="M7.2.8l6.4 6.4-6.4 6.4m6.3-6.4H.8" />
                </svg>
            </div>
            <div class="card profile-pair__profile profile-pair__followee">
                <img class="profile-pair__avatar" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/186499/default-avatar.png" alt="avatar" />
                <div class="profile-pair__details">
                    <div class="profile-pair__details__name">Name</div>
                    <div class="profile-pair__details__username">@username</div>
                </div>
            </div>
        </div>
    </div>
</div>

six degree是一个社交关系网（人脉）理论，你和任何一个陌生人之间所间隔的人不会超过六个，也就是说，最多通过六个人你就能够认识任何一个陌生人。

js, social

编辑器支持Emmet

快捷键

six degree是一个社交关系网（人脉）理论，你和任何一个陌生人之间所间隔的人不会超过六个，也就是说，最多通过六个人你就能够认识任何一个陌生人。

js, social

日期时间安排表（以时间槽的形式展示占用空闲状态）

three.js添加场景背景和天空盒（skybox）代码示例3

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：