championsStat.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583
  1. (function () {
  2. if (!window.console) {
  3. window.console = {};
  4. }
  5. // union of Chrome, FF, IE, and Safari console methods
  6. var m = [
  7. "log", "info", "warn", "error", "debug", "trace", "dir", "group",
  8. "groupCollapsed", "groupEnd", "time", "timeEnd", "profile", "profileEnd",
  9. "dirxml", "assert", "count", "markTimeline", "timeStamp", "clear"
  10. ];
  11. // define undefined methods as noops to prevent errors
  12. for (var i = 0; i < m.length; i++) {
  13. if (!window.console[m[i]]) {
  14. window.console[m[i]] = function () {
  15. };
  16. }
  17. }
  18. })();
  19. if (typeof String.prototype.startsWith != 'function') {
  20. // see below for better implementation!
  21. String.prototype.startsWith = function (str) {
  22. return this.indexOf(str) == 0;
  23. };
  24. }
  25. if (!Array.prototype.indexOf) {
  26. Array.prototype.indexOf = function (elt /*, from*/) {
  27. var len = this.length >>> 0;
  28. var from = Number(arguments[1]) || 0;
  29. from = (from < 0)
  30. ? Math.ceil(from)
  31. : Math.floor(from);
  32. if (from < 0)
  33. from += len;
  34. for (; from < len; from++) {
  35. if (from in this &&
  36. this[from] === elt)
  37. return from;
  38. }
  39. return -1;
  40. };
  41. }
  42. /*
  43. Reference
  44. - http://stackoverflow.com/questions/979256/sorting-an-array-of-javascript-objects
  45. */
  46. var sort_by = function (field, reverse, primer) {
  47. var key = primer ?
  48. function (x) {
  49. return primer(x[field])
  50. } :
  51. function (x) {
  52. return x[field]
  53. };
  54. reverse = [-1, 1][+!!reverse];
  55. return function (a, b) {
  56. return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
  57. }
  58. };
  59. var gFieldNameList = [
  60. 'times',
  61. 'win_rate',
  62. 'kda_score',
  63. 'k',
  64. 'ddpm',
  65. 'gpm',
  66. 'mk10m'
  67. ];
  68. var gChampionsStatRecords = null; // keep origin for filtering
  69. var gLastOrderFieldName = gFieldNameList[0];
  70. var gLastOrderBy = 'asc'; // 从大到小
  71. var serverName = encodeURIComponent(getURLParam("serverName"));
  72. var playerName = encodeURIComponent(getURLParam("playerName"));
  73. var userId = getURLParam("userId");
  74. var gameZone = getURLParam("gameZone");
  75. var baseUrl = "http://lolbox.duowan.com/new/api/index.php";
  76. var snFull;
  77. function switchOrderBy(orderBy) {
  78. return (orderBy === 'asc') ? 'desc' : 'asc';
  79. }
  80. function getURLParam(name) {
  81. var value = location.search.match(new RegExp("[?&]" + name + "=([^&]*)(&?)", "i"));
  82. return value ? decodeURIComponent(value[1]) : value;
  83. }
  84. function getCookie(cookieName) {
  85. var cookieString = document.cookie;
  86. var start = cookieString.indexOf(cookieName + '=');
  87. // 加上等号的原因是避免在某些 Cookie 的值里有
  88. // 与 cookieName 一样的字符串。
  89. if (start == -1) // 找不到
  90. return null;
  91. start += cookieName.length + 1;
  92. var end = cookieString.indexOf(';', start);
  93. if (end == -1)
  94. return cookieString.substring(start);
  95. return cookieString.substring(start, end);
  96. }
  97. function formatKDA(data) {
  98. return data.averageKDA[0] + '/' + data.averageKDA[1] + '/' + data.averageKDA[2];
  99. }
  100. function formatEarn(data) {
  101. var averageEarn = parseInt(data.averageEarn[0]);
  102. if (averageEarn > 1000) {
  103. averageEarn = (averageEarn / 1000.0).toFixed(1) + 'k';
  104. } else {
  105. averageEarn = averageEarn.toString();
  106. }
  107. return averageEarn;
  108. }
  109. function composeURLChampionImgByName(name) {
  110. return 'http://static.lolbox.duowan.com/images/champions/' + name + '_40x40.jpg'
  111. }
  112. function contains(haystack, needle) {
  113. return haystack.indexOf(needle) >= 0;
  114. }
  115. function resetOrderStyle() {
  116. $('th span')
  117. .removeClass('u-sort--desc')
  118. .removeClass('u-sort--asc')
  119. .removeClass('u-sort--normal')
  120. .addClass('u-sort--normal');
  121. }
  122. function parseArrayAsFloat(obj) {
  123. return parseFloat(obj[0]);
  124. }
  125. function updateTableDataOrderByFieldName(fieldName) {
  126. if (!gChampionsStatRecords) {
  127. return;
  128. }
  129. if (!contains(gFieldNameList, fieldName)) {
  130. return;
  131. }
  132. resetOrderStyle();
  133. if (gLastOrderFieldName === fieldName) {
  134. gLastOrderBy = switchOrderBy(gLastOrderBy);
  135. }
  136. gLastOrderFieldName = fieldName;
  137. if (gLastOrderBy === 'desc') {
  138. $('th[data-field-name="' + fieldName + '"] span')
  139. .removeClass('u-sort--normal')
  140. .addClass('u-sort--desc');
  141. } else {
  142. $('th[data-field-name="' + fieldName + '"] span')
  143. .removeClass('u-sort--normal')
  144. .addClass('u-sort--asc');
  145. }
  146. var reverse;
  147. if (gLastOrderBy === 'desc') {
  148. reverse = false;
  149. } else {
  150. reverse = true;
  151. }
  152. var parseFunc;
  153. if (contains(['averageKDA', 'averageDamage', 'averageEarn'], fieldName)) {
  154. parseFunc = parseArrayAsFloat;
  155. } else {
  156. parseFunc = parseFloat;
  157. }
  158. gChampionsStatRecords.sort(sort_by(fieldName, reverse, parseFunc));
  159. var output = '<thead>' +
  160. '<tr>' +
  161. '<th class="col1"></th>' +
  162. '<th class="col2"></th>' +
  163. '<th class="col3"></th>' +
  164. '<th class="col4"></th>' +
  165. '<th class="col5"></th>' +
  166. '<th class="col6"></th>' +
  167. '<th class="col7"></th>' +
  168. '<th class="col8"></th>' +
  169. '</tr>' +
  170. '</thead>';
  171. for (var i = 0; i < gChampionsStatRecords.length; i++) {
  172. var championStat = gChampionsStatRecords[i],
  173. champion = championStat.champion;
  174. // var championPoints = championStat.championPoints, level = championPoints.level ? championPoints.level : 0,levelMsg = level == 0 ? '无' : '';
  175. output += '<tr>' +
  176. '<td class=col1><span class="avatar"><img data-id='+ i +' champion-name="' + champion.display_name + '" src="' + composeURLChampionImgByName(champion.name) + '" alt="' + champion.display_name + '" title="' + champion.display_name + '" /></span></td>' +
  177. '<td class=col2>' + championStat.times + '</td>' +
  178. '<td class=col3>' + championStat.win_rate + '%' + '</td>' +
  179. '<td class=col4>' + championStat.kda_score + '</td>' +
  180. '<td class=col5>' + championStat.k.toFixed(1) + '/' + championStat.d.toFixed(1) + '/' + championStat.a.toFixed(1) + '</td>' +
  181. '<td class=col6>' + championStat.ddpm + '</td>' +
  182. '<td class=col7>' + championStat.gpm + '</td>' +
  183. '<td class=col8>' + championStat.mk10m + '</td>' +
  184. // '<td class="more-hero-level"><span>-</span></td>' +
  185. '</tr>';
  186. //(英雄成先用-代替)//'<td class="more-hero-level"><span class="ch_level level_'+level+'">'+levelMsg+'</span></td>' +
  187. }
  188. if (document.getElementById('m-myhero-table-data')) {
  189. $('#m-myhero-table-data').html(output);
  190. }
  191. fixedFieldDataAverageMinionsKilled();
  192. }
  193. /*
  194. 部分玩家 "场均10分钟补兵" 暂缺数据,需要替换 "0" 为 "-"
  195. */
  196. function fixedFieldDataAverageMinionsKilled() {
  197. $('#m-myhero-table-data td:last-child').each(function () {
  198. var old = $(this).text();
  199. if (old === '0') {
  200. $(this).text('-');
  201. }
  202. });
  203. }
  204. function loadData() {
  205. var url = "http://api.lolbox.duowan.com/api/v3/player/"+gameZone+"/" + userId + '/champions/';
  206. var href = "generalRecord.html?serverName="+serverName+"&playerName="+playerName + '&userId='+userId+'&gameZone='+gameZone;
  207. $("#player").attr("href", href).text(getURLParam("playerName"));
  208. if (gChampionsStatRecords) {
  209. updateTableDataOrderByFieldName('times');
  210. return;
  211. }
  212. $.ajax(
  213. {
  214. url: url,
  215. type:"GET",
  216. dataType: 'jsonp'
  217. })
  218. .done(function (resp) {
  219. var list = resp && resp.champion_performance_list;
  220. if (resp && list) {
  221. if(list.length == 0) {
  222. $(".m-myhero-table--nodata").show();
  223. return;
  224. } else {
  225. // snFull = resp.snFull;
  226. $("#countHeros").html(list.length);
  227. gChampionsStatRecords = list;
  228. updateTableDataOrderByFieldName('times');
  229. }
  230. } else {
  231. $('#m-myhero-table').html('<p style="margin-top:145px;text-align:center;">暂无数据,请稍后重试</p>');
  232. return;
  233. }
  234. })
  235. .fail(function (data) {
  236. $('#m-myhero-table').html('<p>获取数据失败,请稍后重试!</p>');
  237. });
  238. }
  239. function setupInteractiveSorting() {
  240. $('.u-sort').click(function () {
  241. var fieldName = $(this).parent().attr('data-field-name');
  242. updateTableDataOrderByFieldName(fieldName)
  243. })
  244. }
  245. function setupVirtualScrollBar() {
  246. // 显示虚拟滚动条
  247. $("#m-myhero-table").niceScroll({cursorcolor: "#D9D9D9", cursorwidth: "8", cursoropacitymin: 1, cursorborder: 'none'});
  248. }
  249. function updateTipsWinData(data, tagAttachTo) {
  250. $(tagAttachTo).find('img').attr('title', '');
  251. var KDARating = parseFloat(data.averageKDARating);
  252. var averageDamage = data.averageDamage[0];
  253. var averageDamageRating;
  254. if (data.averageDamage[1]) {
  255. averageDamageRating = data.averageDamage[1];
  256. } else {
  257. averageDamageRating = 1;
  258. }
  259. var averageEarn = parseInt(data.averageEarn[0]);
  260. if (averageEarn > 1000) {
  261. averageEarn = (averageEarn / 1000.0).toFixed(1) + 'k';
  262. }
  263. var averageEarnRating;
  264. if (data.averageEarn[1]) {
  265. averageEarnRating = parseInt(data.averageEarn[1]);
  266. } else {
  267. averageEarnRating = 1;
  268. }
  269. var averageMinionsKilled = parseInt(data.averageMinionsKilled);
  270. $('#heropage-hero-sharetips .avatar img').attr('src', data.urlImg);
  271. $('#heropage-hero-sharetips .name').text(data.championNameCN);
  272. $('.data-winRate').text(data.winRate + '%');
  273. $('.data-winRate').removeClass('bold');
  274. if (data.winRate >= 80) {
  275. $('.data-winRate').addClass('bold');
  276. }
  277. $('.data-matchStat').text(data.matchStat);
  278. $('.data-averageKDA-rating').text(KDARating);
  279. var averageKDA = data.averageKDA[0] + '/' + data.averageKDA[1] + '/' + data.averageKDA[2]
  280. $('.data-averageKDA').text(averageKDA);
  281. $('.data-averageDamage').text(averageDamage);
  282. $('.data-averageDamage-rating').text("超越" + averageDamageRating + "%玩家");
  283. // reset CSS class
  284. $('.data-averageDamage').removeClass('color-red');
  285. $('.data-averageDamage-rating').removeClass('color-red');
  286. if (averageDamageRating >= 80) {
  287. $('.data-averageDamage').addClass('color-red');
  288. $('.data-averageDamage-rating').addClass('color-red')
  289. }
  290. $('.data-averageEarn').text(averageEarn);
  291. $('.data-averageEarn-rating').text("超越" + averageEarnRating + "%玩家");
  292. // reset CSS class
  293. $('.data-averageEarn').removeClass('color-red');
  294. $('.data-averageEarn-rating').removeClass('color-red');
  295. if (averageEarnRating >= 80) {
  296. $('.data-averageEarn').addClass('color-red');
  297. $('.data-averageEarn-rating').addClass('color-red');
  298. }
  299. $('.data-averageMinionsKilled').removeClass('color-red');
  300. if (averageMinionsKilled >= 70) {
  301. $('.data-averageMinionsKilled').addClass('color-red');
  302. }
  303. // 异常数据
  304. if (averageMinionsKilled == 0) {
  305. $('.data-averageMinionsKilled').text('-');
  306. } else {
  307. $('.data-averageMinionsKilled').text(averageMinionsKilled);
  308. }
  309. $('.share-link').attr('champion-name', data.championName);
  310. $('.screenshot').attr('champion-name', data.championName);
  311. // "草莓丶(艾欧尼亚) 刀锋意志 75%胜/28场 KDA:11/23/11 分钟输出:100 分钟经济:100 10分补兵:80  来自L O L盒子"
  312. var text = [
  313. playerName,
  314. '(' + snFull + ') ',
  315. data.championNameCN,
  316. ' ' + data.winRate + '%胜/' + data.matchStat + '场',
  317. ' KDA:' + averageKDA,
  318. ' 分钟输出:' + averageDamage + '(>' + averageDamageRating + '%玩家)',
  319. ' 分钟经济:' + averageEarn + '(>' + averageEarnRating + '%玩家)',
  320. ' 十分钟补兵:' + averageMinionsKilled,
  321. ' 来自L O L盒子'
  322. ].join('');
  323. $('#achievementInTextPlain').text(text)
  324. }
  325. function isMySelf() {
  326. var pn = decodeURI(playerName);
  327. var boxPn = decodeURI(getCookie('boxPlayerName'));
  328. return (boxPn && pn && boxPn == pn);
  329. }
  330. function allowShareUserHerselfDataOnly() {
  331. if (isMySelf()) {
  332. $('.share-link').show();
  333. } else {
  334. $('.share-link').hide();
  335. }
  336. }
  337. function toolTipChangeHasData(hasData) {
  338. allowShareUserHerselfDataOnly();
  339. if (hasData) {
  340. $(".heropage-hero-tooltips__wrap").show();
  341. $(".heropage-hero-tooltips--empty").hide();
  342. } else {
  343. $(".heropage-hero-tooltips__wrap").hide();
  344. $(".heropage-hero-tooltips--empty").show();
  345. }
  346. }
  347. /* 常用英雄 tips 窗口 */
  348. function setupInteractiveTipsWin() {
  349. var enterTimeout, leaveTimeout, canBeClosed;
  350. $("#m-myhero-table").on('mouseenter', '.avatar', function (e) {
  351. var $el = $(this).find('img');
  352. var pos_left = $el.offset().left + $el.outerWidth() + 6;
  353. var pos_top = $el.offset().top + ($el.outerHeight() / 2) - 80;
  354. var name = $el.attr('champion-name');
  355. //为了防止hover层出底边界,对pos_top做特殊处理
  356. if(pos_top > 261) {
  357. pos_top = 272;
  358. }
  359. renderHeroHover(name).done(function(tdata) {
  360. clearTimeout(enterTimeout);
  361. clearTimeout(leaveTimeout);
  362. canBeClosed = true;
  363. if($(".hover-content")) $(".hover-content").remove();
  364. var $hContent = $("<div class='hover-content'></div>");
  365. if(tdata.status == 10402) {
  366. tdata.noData = true;
  367. tdata.tipMsg = "因长时间没有游戏,数据无法采集";
  368. $hContent.addClass("blank-content");
  369. }
  370. //截图url
  371. var shotUrl = "http://lolbox.duowan.com/playerDetail/championsStatShareShot.php?serverName=" + self.serverName + "&playerName=" + self.playerName + "&ch=" + name + "&openmode=default";
  372. tdata.shotUrl = shotUrl;
  373. var template = _.template($("#heroHoverTemp").html());
  374. $hContent.html(template({
  375. data: tdata
  376. })).css({
  377. left: pos_left,
  378. top: pos_top
  379. });
  380. enterTimeout = setTimeout(function(){
  381. $('body').append($hContent);
  382. if (SnsShare) SnsShare.init();
  383. }, 100);
  384. }, function(msg){});
  385. });
  386. $("#m-myhero-table").on('mouseleave', '.avatar', function (e) {
  387. e.preventDefault();
  388. clearTimeout(enterTimeout);
  389. clearTimeout(leaveTimeout);
  390. leaveTimeout = setTimeout(function(){
  391. if(canBeClosed) $(".hover-content").remove();
  392. }, 150);
  393. $(".hover-content").on('mouseenter', function(e) {
  394. canBeClosed = false;
  395. }).on('mouseleave',function(e) {
  396. clearTimeout(leaveTimeout);
  397. leaveTimeout = setTimeout(function(){
  398. $(".hover-content").remove();
  399. }, 150);
  400. });
  401. });
  402. }
  403. function renderHeroHover(name) {
  404. //英雄浮窗数据获取url
  405. var b_url = baseUrl + "?_do=personal/mostusedchampion&serverName=" + serverName + "&playerName=" + playerName;
  406. var url = b_url + "&zhName=" + name + "&playerId=" + playerId;
  407. return $.ajax({
  408. url: url,
  409. type: 'GET',
  410. dataType: 'jsonp'
  411. });
  412. }
  413. function setupInteractiveAchievementCopy() {
  414. $('#heropage-hero-sharetips .copy').click(function () {
  415. if (window.clipboardData && window.clipboardData.setData !== undefined) {
  416. var achievement = $('#achievementInTextPlain').text();
  417. window.clipboardData.setData('Text', achievement);
  418. alert('复制成功');
  419. }
  420. event.preventDefault();
  421. });
  422. }
  423. function setupInteractiveScreenShot() {
  424. $('#heropage-hero-sharetips .screenshot').click(function () {
  425. var qs = $.param({
  426. serverName: serverName,
  427. playerName: playerName,
  428. ch: $(this).attr('champion-name')
  429. });
  430. var newURL = 'http://lolbox.duowan.com/playerDetail/championsStatShareShot.php?' + qs + '&openmode=default';
  431. window.open(newURL);
  432. event.preventDefault();
  433. });
  434. }
  435. function getShareButtonName(classNameList) {
  436. for (var i = 0; i < classNameList.length; i++) {
  437. var name = classNameList[i];
  438. if (!name.startsWith('item')) {
  439. return name;
  440. }
  441. }
  442. }
  443. function setupInteractiveShare() {
  444. $('.share-link a').click(function () {
  445. var classNameList = $(this).attr('class').split(' ');
  446. var btnName = getShareButtonName(classNameList);
  447. var qs = $.param({
  448. serverName: serverName,
  449. playerName: playerName,
  450. ch: $(this).parent().attr('champion-name'),
  451. shareVia: btnName
  452. });
  453. var newURL = '/playerDetail/championsStatShare.php?' + qs + '&openmode=default';
  454. window.open(newURL);
  455. event.preventDefault();
  456. });
  457. }
  458. $(document).ready(function () {
  459. setupVirtualScrollBar();
  460. setupInteractiveSorting();
  461. // setupInteractiveTipsWin();
  462. setupInteractiveAchievementCopy();
  463. setupInteractiveScreenShot();
  464. setupInteractiveShare();
  465. //分享
  466. jiathis_config = {
  467. title: "#无盒子 不开撸# 我是" + playerName+",我在使用LOL盒子。来看看我的战斗力有多少吧!",
  468. appkey: {
  469. "tsina": "3629014272",
  470. "tqq": "801220649",
  471. "qzone": "100302822"
  472. },
  473. summary: " ",
  474. ralateuid: {
  475. "tsina": "2909042820"
  476. }
  477. };
  478. if (playerMostUsedHero)
  479. jiathis_config.pic = 'http://lolbox.duowan.com/images/champions/' + playerMostUsedHero + '_120x120.png';
  480. if (SnsShare) SnsShare.init();
  481. loadData();
  482. });