JSFiddle - React, Tailwind, and code Playground

by hbsto

HTML

<link rel="stylesheet" href="http://kr.battle.net/d3/static/css/tool/gear-calculator/hero-slots.css">
<link rel="stylesheet" href="http://kr.battle.net/d3/static/local-common/css/common.css">
<link rel="stylesheet" href="http://kr.battle.net/d3/static/css/profile/hero.css">
<link rel="stylesheet" href="http://kr.battle.net/d3/static/css/tooltips.css">
<link rel="stylesheet" href="http://kr.battle.net/d3/static/css/profile/shared.css">
<link rel="stylesheet" href="http://kr.battle.net/d3/static/local-common/css/locale/ko-kr.css">
<link rel="stylesheet" href="http://kr.battle.net/d3/static/css/locale/ko-kr.css">
<link rel="stylesheet" href="http://kr.battle.net/d3/static/css/profile/career.css">

CSS

/* tooltips */
.ui-tooltip { background: #1d180e; padding: 1px; border: 1px solid #322a20; opacity: 0.9; max-width: 355px; border-radius: 2px; box-shadow: 0 0 10px #000; }
.ui-tooltip .tooltip-content { background: black; padding: 10px; color: #CFB991; font-size: 12px; }
.ui-tooltip-d3 { opacity: 1; }
.ui-tooltip-d3 .tooltip-content { padding: 0; }
.ui-tooltip .subheader { font-size: 18px; color: #F3E6D0; font-weight: normal; margin-bottom: 4px; } 

INPUT[type=text] { background: white; color: black; padding: 5px; }
BUTTON { color: yellow; }

JavaScript

var corsProxy  = 'http://www.corsproxy.com/',
    profileUrl = 'kr.battle.net/d3/ko/profile/#battleTag#/',
    fragUrl    = 'hero/#id#.frag',
    tooltipUrl = 'kr.battle.net/d3/ko/tooltip/';

var slotDesc = {
    bracers: '손목',
    feet: '장화',
    hands: '장갑',
    head: '투구',
    leftFinger: '왼쪽 반지',
    legs: '바지',
    mainHand: '주 무기',
    neck: '목걸이',
    offHand: '보조 무기',
    rightFinger: '오른쪽 반지',
    shulders: '어깨',
    torso: '갑옷',
    waist: '허리띠'
};

init();

function init(){
    
    var tooltip     = makeTooltip(),
        characters  = [],    
        i_battleTag = $('<input type="text"/>').val('퀘이커#3264').appendTo( tooltip.body ).width('90%'),
        b_ok        = $('<button type="button"/>')
            .click( fn_getCharacters )
            .text('OK')
            .appendTo( tooltip.body )
            .css({
                width: 200,
                height: 30,
                margin: 10
            });
    
    tooltip.title.text('배틀태그를 입력 하셈 :)');
    
    function fn_getCharacters(){
        var bt = parseBattleTag( i_battleTag.val() );
        ajax( profileUrl.replace('#battleTag#', bt), function( profile ){
            
            var m = profile.match(/Profile\.heroes \= ([^;]+);/);
            
            if( !m ) return alert('케릭터 정보를 못찾음 >_<;;; ㅈㅅ');
                        
            eval('characters = '+m[1]+' || [];');
            
            fn_drawCharacters( bt );
            
        });
    }
    
    function fn_drawCharacters( battleTag ){
        
        if( !characters.length ) return;
        
        tooltip.title.text('케릭터를 선택 하셈 :)');
        tooltip.body.empty();        
        characters.forEach(function( char, idx ){
            char.battleTag = battleTag;
            $('<a hre="#" class="d3-color-yellow">'+char.name+' ('+char.level+' '+char.class+
              ')</span><br/>')
                .appendTo( tooltip.body )
                .click(char, function( e ){
                    tooltip.out_con.remove();
  ...