AtcoderDevotionGraph

Overlay your devoiting graph on your rating graph

Mint 2020.11.24.. Lásd a legutóbbi verzió

  1. // ==UserScript==
  2. // @name AtcoderDevotionGraph
  3. // @namespace http://atcoder.jp/
  4. // @version 0.3.1β
  5. // @description Overlay your devoiting graph on your rating graph
  6. // @author kemkemG0
  7. // @include *://atcoder.jp/users*
  8. // @exclude *://atcoder.jp/users/*?graph=rank
  9. // @exclude *://atcoder.jp/users/*/history*
  10. // @grant none
  11. // @require https://code.jquery.com/jquery-1.8.0.min.js
  12. //@run-at document-end
  13.  
  14. // ==/UserScript==
  15.  
  16. "use strict";
  17.  
  18. (async () => {
  19.  
  20. //##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##
  21.  
  22. let scriptsArray = $('script');//<script>タグのものを配列に突っ込む
  23. scriptsArray[14].remove(); // 対象のタグを消す記述 x[14]がグラフを読み込むjs
  24.  
  25. //なんでこれ必要?? -->>一度読み込んだscriptタグはDOMから消しても効果は残るからそれを消すため
  26. let copyPage = $("html").clone().html(); // 対象のタグが消えたページをコピー
  27. $("html").remove(); // ページをまるごと削除
  28. document.write(copyPage); // コピーしてあったページ内容をペースト
  29.  
  30. const element = document.getElementsByClassName('btn-text-group')[document.getElementsByClassName('btn-text-group').length - 1];
  31. const insertButton = Object.assign(document.createElement('button'), {
  32. className: '',
  33. id: 'shoujinButtonID',
  34. style: '\
  35. margin-left:50px;\
  36. appearance: none;\
  37. border: 0;\
  38. border-radius: 5px;\
  39. background: #20b2aa;\
  40. color: #fff;\
  41. padding: 8px 16px;\
  42. font-size: 16px;\
  43. '
  44. }
  45. );
  46. insertButton.textContent = "精進グラフの表示を切り替える"
  47. element.appendChild(insertButton)
  48. console.log(element)
  49.  
  50.  
  51. //##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##//##
  52.  
  53. // const
  54. const MARGIN_VAL_X = 86400 * 30;
  55. const MARGIN_VAL_Y_LOW = 100;//
  56. const MARGIN_VAL_Y_HIGH = 300;//自分の最高レート+表示する領域
  57. const OFFSET_X = 50;//グラフの位置?
  58. const OFFSET_Y = 5;
  59. const DEFAULT_WIDTH = 640;
  60. let canvas_status = document.getElementById("ratingStatus");
  61. // <canvas id="ratingStatus" width="1280" height="160"
  62. // style="max-width: 640px; max-height: 80px; height: 100%; width: 100%;"></canvas>
  63. const STATUS_WIDTH = canvas_status.width - OFFSET_X - 10;
  64. const STATUS_HEIGHT = canvas_status.height - OFFSET_Y - 5;
  65. let canvas_graph = document.getElementById("ratingGraph");
  66. // <canvas id="ratingGraph"
  67. // width="1280" height="720"
  68. // style="max-width: 640px; max-height: 360px; height: 100%; width: 100%;"></canvas>
  69. const PANEL_WIDTH = canvas_graph.width - OFFSET_X - 10;
  70. const PANEL_HEIGHT = canvas_graph.height - OFFSET_Y - 30;
  71. //HIGHEST:932 とかの吹き出しのサイズ
  72. const HIGHEST_WIDTH = 80;
  73. const HIGHEST_HEIGHT = 20;
  74. const LABEL_FONT = "12px Lato";
  75. const START_YEAR = 2010;
  76. const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  77. const YEAR_SEC = 86400 * 365;
  78. const STEP_SIZE = 400;//グラフのy軸のステップ数
  79. const COLORS = [
  80. [0, "#808080", 0.15],
  81. [400, "#804000", 0.15],
  82. [800, "#008000", 0.15],
  83. [1200, "#00C0C0", 0.2],
  84. [1600, "#0000FF", 0.1],
  85. [2000, "#C0C000", 0.25],
  86. [2400, "#FF8000", 0.2],
  87. [2800, "#FF0000", 0.1]
  88. ];
  89.  
  90. //??????????????????
  91. const STAR_MIN = 3200;
  92. const PARTICLE_MIN = 3;
  93. const PARTICLE_MAX = 20;
  94. const LIFE_MAX = 30;
  95. const EPS = 1e-9;
  96.  
  97. let cj = createjs;
  98. let stage_graph, stage_status;
  99.  
  100. // graph
  101. let panel_shape, border_shape;
  102. let chart_container, line_shape, vertex_shapes, highest_shape;
  103. let n, x_min, x_max, y_min, y_max;
  104.  
  105. //devoting graph
  106. let devoting_panel_shape, devoting_border_shape;
  107. let devoting_chart_container, devoting_line_shape, devoting_vertex_shapes, devoting_highest_shape;
  108. let devoting_n, devoting_x_min, devoting_x_max, devoting_y_min, devoting_y_max;
  109. let devoting_rating_history = []
  110.  
  111. // status
  112. let border_status_shape;
  113. let rating_text, place_text, diff_text, date_text, contest_name_text;
  114. let particles;
  115. let standings_url;
  116. const username = document.getElementsByClassName("username")[0].textContent;
  117. let allJson;
  118. try {
  119. const res = await fetch("https://kenkoooo.com/atcoder/atcoder-api/results?user=" + username);
  120. allJson = await res.json()
  121. } catch (reaseon) { console.log('try失敗') }
  122.  
  123. console.log(allJson.length)
  124. {
  125. let isExist={};
  126. for (let i = 0; i < allJson.length; i++) {//なぜか負のポイントがあったから追加
  127. if (allJson[i].result === 'AC' && 0<=allJson[i].point && allJson[i].point <= 3000 && isExist[allJson[i].problem_id]===undefined) {
  128. devoting_rating_history.push({ ...allJson[i] });
  129. isExist[allJson[i].problem_id]=0;
  130. }
  131. }
  132. }
  133. function compare(a, b) { return a.epoch_second - b.epoch_second; }//比較関数
  134. devoting_rating_history.sort(compare);//時間順にソート
  135.  
  136. for (let i = 0; i < devoting_rating_history.length - 1; i++) {//合計の累積和的な
  137. devoting_rating_history[i + 1].point += devoting_rating_history[i].point;
  138. devoting_rating_history[i].point /= 100;
  139. }
  140. devoting_rating_history[devoting_rating_history.length - 1].point /= 100;
  141. //今までの累積和/100 が高さ
  142.  
  143. console.log(222)
  144. console.log("before init()")
  145. console.log("This should be excuted after init()")
  146.  
  147. let shoujinButtonID = document.getElementById('shoujinButtonID');
  148. shoujinButtonID.addEventListener('click', function () {
  149. devoting_chart_container.visible = !devoting_chart_container.visible;
  150. stage_graph.update();
  151. });
  152.  
  153.  
  154. console.log(devoting_rating_history.length);
  155. //クリエイトjsとやらをつかっている
  156. console.log(333)
  157.  
  158.  
  159. //いい感じにキャンバスの大きさを設定してマウスオーバーもONにする
  160. function initStage(stage, canvas) {
  161. let width = canvas.getAttribute('width');// <canvas width="">を取得
  162. let height = canvas.getAttribute('height');
  163.  
  164.  
  165. //最悪、なくても画質悪くなったが動いた よくわからん
  166. if (window.devicePixelRatio) {//ピクセル比 によって解像度を変える 本来は2のときに1にしたらぼやけた
  167. //縦横の設定
  168. canvas.setAttribute('width', Math.round(width * window.devicePixelRatio));//Math.round()は四捨五入
  169. canvas.setAttribute('height', Math.round(height * window.devicePixelRatio));
  170. stage.scaleX = stage.scaleY = window.devicePixelRatio;
  171. }
  172. //最大のキャンパスサイズ=もとのキャンバスサイズにする
  173. canvas.style.maxWidth = width + "px";
  174. canvas.style.maxHeight = height + "px";
  175. canvas.style.width = canvas.style.height = "100%";
  176. stage.enableMouseOver();
  177. }
  178.  
  179. //parent===stageに図形を追加し、その図形をreturnで参照渡し
  180. function newShape(parent) {
  181. let s = new cj.Shape();
  182. parent.addChild(s);
  183. return s;
  184. }
  185. //上のテキストバージョン
  186. function newText(parent, x, y, font) {
  187. let t = new cj.Text("", font, "#000");
  188. t.x = x;
  189. t.y = y;
  190. t.textAlign = "center";
  191. t.textBaseline = "middle";
  192. parent.addChild(t);
  193. return t;
  194. }
  195.  
  196.  
  197.  
  198. //多分一番の大元
  199. function init() {
  200.  
  201. // window.alert('33333');
  202.  
  203. //rating_history はHTML内で取得してある
  204. //rating_history=[{"EndTime":時間(単位不明),"NewRating":11,"OldRating":0,"Place":5200,"ContestName":"コンテスト名","StandingsUrl":"/contests/m-solutions2020/standings?watching=kemkemG0"}];
  205. n = rating_history.length;
  206. devoting_n = devoting_rating_history.length;
  207. if (n == 0) return;
  208.  
  209. //console.log("initの中")
  210.  
  211. //土台のステージ これに図形とかを追加していくイメージ
  212. stage_graph = new cj.Stage("ratingGraph");// Stage("canvasのID");
  213. stage_status = new cj.Stage("ratingStatus");
  214. initStage(stage_graph, canvas_graph);
  215. initStage(stage_status, canvas_status);
  216.  
  217. //グラフのサイズ決定
  218. x_min = 100000000000;
  219. x_max = 0;
  220. y_min = 10000;
  221. y_max = 0;
  222. for (let i = 0; i < n; i++) {
  223. x_min = Math.min(x_min, rating_history[i].EndTime);
  224. x_max = Math.max(x_max, rating_history[i].EndTime);
  225. y_min = Math.min(y_min, rating_history[i].NewRating);
  226. y_max = Math.max(y_max, rating_history[i].NewRating);
  227. }
  228. x_min -= MARGIN_VAL_X;//最初にコンテストに参加した日ー1ヶ月
  229. x_max += MARGIN_VAL_X;//最後にコンテストに参加した日+1ヶ月
  230. y_min = Math.min(1500, Math.max(0, y_min - MARGIN_VAL_Y_LOW));//いい感じに高さも設定
  231. y_max += MARGIN_VAL_Y_HIGH;
  232.  
  233. //精進グラフのサイズ決定
  234. devoting_x_min = 100000000000;
  235. devoting_x_max = 0;
  236. devoting_y_min = 10000;
  237. devoting_y_max = 0;
  238. for (let i = 0; i < devoting_rating_history.length; i++) {
  239. devoting_x_min = Math.min(devoting_x_min, devoting_rating_history[i].epoch_second);
  240. devoting_x_max = Math.max(devoting_x_max, devoting_rating_history[i].epoch_second);
  241. devoting_y_min = Math.min(devoting_y_min, devoting_rating_history[i].point);
  242. devoting_y_max = Math.max(devoting_y_max, devoting_rating_history[i].point);
  243. }
  244. devoting_x_min -= MARGIN_VAL_X;//最初にコンテストに参加した日ー1ヶ月
  245. devoting_x_max += MARGIN_VAL_X;//最後にコンテストに参加した日+1ヶ月
  246. devoting_y_min = Math.min(1500, Math.max(0, devoting_y_min - MARGIN_VAL_Y_LOW));//いい感じに高さも設定
  247. devoting_y_max += MARGIN_VAL_Y_HIGH;
  248.  
  249. //形を決める
  250. y_min = Math.min(y_min, devoting_y_min);
  251. y_max = Math.max(y_max, devoting_y_max);
  252. x_min = Math.min(x_min, devoting_x_min);
  253. x_max = Math.max(x_max, devoting_x_max);
  254.  
  255. console.log("I'm in inside of init 111")
  256.  
  257. initBackground();//背景の描画
  258. initChart();//プロットと直線の描画
  259.  
  260. console.log("I'm in inside of init 222")
  261.  
  262. initDevotingChart()
  263.  
  264.  
  265.  
  266. stage_graph.update();
  267. console.log("I'm in inside of init 333")
  268.  
  269. initStatus();//グラフの上のコンテスト情報とかの描画
  270. stage_status.update();
  271.  
  272.  
  273.  
  274. //window.alert('44444'); アラート→描画の順番なのはなぜなのか
  275.  
  276.  
  277. //マウスオーバー時のほわほわの管理
  278. cj.Ticker.setFPS(60);
  279. cj.Ticker.addEventListener("tick", handleTick);
  280. function handleTick(event) {
  281. updateParticles();
  282. stage_status.update();
  283. }
  284. }
  285.  
  286. function getPer(x, l, r) {
  287. return (x - l) / (r - l);
  288. }
  289.  
  290. function getColor(x) {
  291. for (let i = COLORS.length - 1; i >= 0; i--) {
  292. if (x >= COLORS[i][0]) return COLORS[i];
  293. }
  294. return [-1, "#000000", 0.1];
  295. }
  296.  
  297. function initBackground() {
  298.  
  299. panel_shape = newShape(stage_graph);//stage_graphに図形を追加、また panel_shapeはstage_graphの内部とつながってる(オブジェクトは参照渡し)
  300. panel_shape.x = OFFSET_X;
  301. panel_shape.y = OFFSET_Y;
  302. panel_shape.alpha = 0.3;
  303.  
  304. border_shape = newShape(stage_graph);
  305. border_shape.x = OFFSET_X;
  306. border_shape.y = OFFSET_Y;
  307.  
  308. // testtest = newShape(stage_graph);
  309. // testtest.graphics.beginFill("DarkRed"); // 赤色で描画するように設定
  310. // testtest.graphics.drawCircle(0, 0, 10); //半径 100px の円を描画
  311. // testtest.x = OFFSET_X; //OFFSET_XとOFFSET_Yにしたらグラフの中の四角形の左端になった
  312. // testtest.y = OFFSET_Y;
  313.  
  314. //左の軸のレートの設定
  315. function newLabelY(s, y) {
  316. let t = new cj.Text(s, LABEL_FONT, "#000");
  317. t.x = OFFSET_X - 10;//理解
  318. t.y = OFFSET_Y + y;
  319. t.textAlign = "right";
  320. t.textBaseline = "middle";
  321. stage_graph.addChild(t);
  322. }
  323. //上と同様にX軸のラベルの設定
  324. function newLabelX(s, x, y) {
  325. let t = new cj.Text(s, LABEL_FONT, "#000");
  326. t.x = OFFSET_X + x;
  327. t.y = OFFSET_Y + PANEL_HEIGHT + 2 + y;
  328. t.textAlign = "center";
  329. t.textBaseline = "top";
  330. stage_graph.addChild(t);
  331. }
  332.  
  333. //https://createjs.com/docs/easeljs/classes/Graphics.html Graphics Classのドキュメント
  334. let y1 = 0;
  335.  
  336.  
  337.  
  338. // グラフの中の正方形のパネルを色を設定
  339. for (let i = COLORS.length - 1; i >= 0; i--) {
  340. let y2 = PANEL_HEIGHT - PANEL_HEIGHT * getPer(COLORS[i][0], y_min, y_max);
  341. if (y2 > 0 && y1 < PANEL_HEIGHT) {
  342. y1 = Math.max(y1, 0); //rect ( x, y, w , h )
  343. panel_shape.graphics.beginFill(COLORS[i][1]).rect(0, y1, PANEL_WIDTH, Math.min(y2, PANEL_HEIGHT) - y1);
  344. }
  345. y1 = y2;
  346. }
  347. console.log('after FOR')
  348.  
  349. //Y軸ラベルの設定
  350. for (let i = 0; i <= y_max; i += STEP_SIZE) {
  351. if (i >= y_min) {
  352. let y = PANEL_HEIGHT - PANEL_HEIGHT * getPer(i, y_min, y_max);
  353. newLabelY(String(i), y);
  354. border_shape.graphics.beginStroke("#FFF").setStrokeStyle(0.5);
  355. if (i == 2000) border_shape.graphics.beginStroke("#000");
  356. border_shape.graphics.moveTo(0, y).lineTo(PANEL_WIDTH, y);
  357. }
  358. }
  359. border_shape.graphics.beginStroke("#FFF").setStrokeStyle(0.5);
  360.  
  361. let month_step = 6;
  362. for (let i = 3; i >= 1; i--) {
  363. if (x_max - x_min <= YEAR_SEC * i + MARGIN_VAL_X * 2) month_step = i;//初めてすぐの人は短めに
  364. }
  365.  
  366. //X軸ラベルの設定
  367. let first_flag = true;
  368. for (let i = START_YEAR; i < 3000; i++) {
  369. let break_flag = false;
  370. for (let j = 0; j < 12; j += month_step) {
  371. let month = ('00' + (j + 1)).slice(-2);
  372. let unix = Date.parse(String(i) + "-" + month + "-01T00:00:00") / 1000;
  373. if (x_min < unix && unix < x_max) {
  374. let x = PANEL_WIDTH * getPer(unix, x_min, x_max);
  375. if (j == 0 || first_flag) {
  376. newLabelX(MONTH_NAMES[j], x, 0);
  377. newLabelX(String(i), x, 13);
  378. first_flag = false;
  379. } else {
  380. newLabelX(MONTH_NAMES[j], x, 0);
  381. }
  382. border_shape.graphics.mt(x, 0).lt(x, PANEL_HEIGHT)
  383. }
  384. if (unix > x_max) { break_flag = true; break; }
  385. }
  386. if (break_flag) break;
  387. }
  388. border_shape.graphics.s("#888").ss(1.5).rr(0, 0, PANEL_WIDTH, PANEL_HEIGHT, 2);
  389. }
  390.  
  391.  
  392. function initChart() {
  393. chart_container = new cj.Container();//コンテナでまとめると、同時に動かせたりして良い
  394. stage_graph.addChild(chart_container);
  395. chart_container.shadow = new cj.Shadow("rgba(0,0,0,0.3)", 1, 2, 3);//チャートの下に影
  396.  
  397. line_shape = newShape(chart_container);
  398. highest_shape = newShape(chart_container);
  399. vertex_shapes = new Array();
  400.  
  401. //マウスおいたら丸が大きくなるやつ
  402. function mouseoverVertex(e) {
  403. vertex_shapes[e.target.i].scaleX = vertex_shapes[e.target.i].scaleY = 1.2;
  404. stage_graph.update();
  405. setStatus(rating_history[e.target.i], true);
  406. };
  407. function mouseoutVertex(e) {
  408. vertex_shapes[e.target.i].scaleX = vertex_shapes[e.target.i].scaleY = 1;
  409. stage_graph.update();
  410. };
  411.  
  412. let highest_i = 0;
  413. for (let i = 0; i < n; i++) {
  414. if (rating_history[highest_i].NewRating < rating_history[i].NewRating) {
  415. highest_i = i;
  416. }
  417. }
  418. //historyの数だけ配列にpushしてイベントリスナーも設定
  419. for (let i = 0; i < n; i++) {
  420. vertex_shapes.push(newShape(chart_container));
  421. vertex_shapes[i].graphics.beginStroke("#FFF");
  422. if (i == highest_i) vertex_shapes[i].graphics.s("#000");//Highestなら外枠を黒に
  423. vertex_shapes[i].graphics.setStrokeStyle(0.5).beginFill(getColor(rating_history[i].NewRating)[1]).dc(0, 0, 3.5);
  424.  
  425. vertex_shapes[i].x = OFFSET_X + PANEL_WIDTH * getPer(rating_history[i].EndTime, x_min, x_max);
  426. vertex_shapes[i].y = OFFSET_Y + (PANEL_HEIGHT - PANEL_HEIGHT * getPer(rating_history[i].NewRating, y_min, y_max));
  427.  
  428. vertex_shapes[i].i = i;//なにこれ??
  429.  
  430. let hitArea = new cj.Shape();
  431. hitArea.graphics.f("#000").dc(1.5, 1.5, 6);
  432. vertex_shapes[i].hitArea = hitArea;
  433. vertex_shapes[i].addEventListener("mouseover", mouseoverVertex);
  434. vertex_shapes[i].addEventListener("mouseout", mouseoutVertex);
  435. }
  436.  
  437. {//highest 関連
  438. let dx = 80;
  439. if ((x_min + x_max) / 2 < rating_history[highest_i].EndTime) dx = -80;
  440. let x = vertex_shapes[highest_i].x + dx;
  441. let y = vertex_shapes[highest_i].y - 16;
  442. highest_shape.graphics.s("#FFF").mt(vertex_shapes[highest_i].x, vertex_shapes[highest_i].y).lt(x, y);
  443. highest_shape.graphics.s("#888").f("#FFF").rr(x - HIGHEST_WIDTH / 2, y - HIGHEST_HEIGHT / 2, HIGHEST_WIDTH, HIGHEST_HEIGHT, 2);
  444. highest_shape.i = highest_i;
  445. let highest_text = newText(stage_graph, x, y, "12px Lato");
  446. highest_text.text = "Highest: " + rating_history[highest_i].NewRating;
  447. highest_shape.addEventListener("mouseover", mouseoverVertex);
  448. highest_shape.addEventListener("mouseout", mouseoutVertex);
  449. }
  450.  
  451.  
  452. for (let j = 0; j < 2; j++) {
  453. if (j == 0) line_shape.graphics.s("#AAA").ss(2);
  454. else line_shape.graphics.s("#FFF").ss(0.5);//線の種類を変えてる? よくわからん
  455.  
  456. line_shape.graphics.mt(vertex_shapes[0].x, vertex_shapes[0].y);
  457. for (let i = 0; i < n; i++) {
  458. line_shape.graphics.lt(vertex_shapes[i].x, vertex_shapes[i].y);
  459. }
  460. }
  461. }
  462.  
  463.  
  464. function initDevotingChart() {
  465. devoting_chart_container = new cj.Container();//コンテナでまとめると、同時に動かせたりして良い
  466. stage_graph.addChild(devoting_chart_container);//これは devoting_じゃない
  467. devoting_chart_container.shadow = new cj.Shadow("rgba(0,0,0,0.3)", 1, 2, 3);//チャートの下に影
  468.  
  469. devoting_line_shape = newShape(devoting_chart_container);
  470. devoting_highest_shape = newShape(devoting_chart_container);
  471. devoting_vertex_shapes = new Array();
  472.  
  473. // //マウスおいたら丸が大きくなるやつ
  474. // function devoting_mouseoverVertex(e) {
  475. // devoting_vertex_shapes[e.target.i].scaleX = devoting_vertex_shapes[e.target.i].scaleY = 2;
  476. // stage_graph.update();
  477. // };
  478. // function devoting_mouseoutVertex(e) {
  479. // devoting_vertex_shapes[e.target.i].scaleX = devoting_vertex_shapes[e.target.i].scaleY = 1;
  480. // stage_graph.update();
  481. // };
  482.  
  483.  
  484. //historyの数だけ配列にpushしてイベントリスナーも設定
  485. for (let i = 0; i < devoting_n; i++) {
  486. devoting_vertex_shapes.push(newShape(devoting_chart_container));
  487. devoting_vertex_shapes[i].graphics.beginStroke("#FFF");
  488. if (i == devoting_n - 1) {
  489. devoting_vertex_shapes[i].graphics.s("#000");
  490. devoting_vertex_shapes[i].graphics.setStrokeStyle(1).beginFill(getColor(devoting_rating_history[i].point)[1]).dc(0, 0, 2.5);
  491. }
  492. else {
  493. devoting_vertex_shapes[i].graphics.setStrokeStyle(0.5).beginFill(getColor(devoting_rating_history[i].point)[1]).dc(0, 0, 2);
  494. }
  495. devoting_vertex_shapes[i].x = OFFSET_X + PANEL_WIDTH * getPer(devoting_rating_history[i].epoch_second, x_min, x_max);//devotingじゃないほうに合わせる?
  496. devoting_vertex_shapes[i].y = OFFSET_Y + (PANEL_HEIGHT - PANEL_HEIGHT * getPer(devoting_rating_history[i].point, y_min, y_max));
  497. devoting_vertex_shapes[i].i = i;
  498. let hitArea = new cj.Shape();
  499. hitArea.graphics.f("#000").dc(1.5, 1.5, 6);
  500. devoting_vertex_shapes[i].hitArea = hitArea;
  501. // devoting_vertex_shapes[i].addEventListener("mouseover", devoting_mouseoverVertex);
  502. // devoting_vertex_shapes[i].addEventListener("mouseout", devoting_mouseoutVertex);
  503. }
  504.  
  505. //チャートの線関連
  506. for (let index = 0; index < 2; index++) {
  507. if (index == 0) devoting_line_shape.graphics.s("#AAA").ss(2);
  508. else devoting_line_shape.graphics.s("#FFF").ss(0.5);
  509. devoting_line_shape.graphics.mt(devoting_vertex_shapes[0].x, devoting_vertex_shapes[0].y);
  510. for (let i = 0; i < devoting_rating_history.length; i++) {
  511. devoting_line_shape.graphics.lt(devoting_vertex_shapes[i].x, devoting_vertex_shapes[i].y);
  512. }
  513. }
  514.  
  515.  
  516. }
  517.  
  518. function initStatus() {
  519. border_status_shape = newShape(stage_status);
  520. rating_text = newText(stage_status, OFFSET_X + 75, OFFSET_Y + STATUS_HEIGHT / 2, "48px 'Squada One'");
  521. place_text = newText(stage_status, OFFSET_X + 160, OFFSET_Y + STATUS_HEIGHT / 2.7, "16px Lato");
  522. diff_text = newText(stage_status, OFFSET_X + 160, OFFSET_Y + STATUS_HEIGHT / 1.5, "11px Lato");
  523. diff_text.color = '#888';
  524. date_text = newText(stage_status, OFFSET_X + 200, OFFSET_Y + STATUS_HEIGHT / 4, "14px Lato");
  525. contest_name_text = newText(stage_status, OFFSET_X + 200, OFFSET_Y + STATUS_HEIGHT / 1.6, "20px Lato");
  526. date_text.textAlign = contest_name_text.textAlign = "left";
  527. contest_name_text.maxWidth = STATUS_WIDTH - 200 - 10;
  528. {
  529. let hitArea = new cj.Shape(); hitArea.graphics.f("#000").r(0, -12, contest_name_text.maxWidth, 24);
  530. contest_name_text.hitArea = hitArea;
  531. contest_name_text.cursor = "pointer";
  532. contest_name_text.addEventListener("click", function () {
  533. location.href = standings_url;
  534. });
  535. }
  536. particles = new Array();
  537. for (let i = 0; i < PARTICLE_MAX; i++) {
  538. particles.push(newText(stage_status, 0, 0, "64px Lato"));
  539. particles[i].visible = false;
  540. }
  541. setStatus(rating_history[rating_history.length - 1], false);
  542. }
  543.  
  544. function getRatingPer(x) {
  545. let pre = COLORS[COLORS.length - 1][0] + STEP_SIZE;
  546. for (let i = COLORS.length - 1; i >= 0; i--) {
  547. if (x >= COLORS[i][0]) return (x - COLORS[i][0]) / (pre - COLORS[i][0]);
  548. pre = COLORS[i][0];
  549. }
  550. return 0;
  551. }
  552.  
  553. //@#//@#//@#//@#//@#//@#//@#// 関係ない //@#//@#//@#//@#//@#//@#//@#//@#//@#//@#
  554. function getOrdinal(x) {
  555. let s = ["th", "st", "nd", "rd"], v = x % 100;
  556. return x + (s[(v - 20) % 10] || s[v] || s[0]);
  557. }
  558. function getDiff(x) {
  559. let sign = x == 0 ? 'ツア' : (x < 0 ? '-' : '+');
  560. return sign + Math.abs(x);
  561. }
  562. function setStatus(data, particle_flag) {
  563. let date = new Date(data.EndTime * 1000);
  564. let rating = data.NewRating, old_rating = data.OldRating;
  565. let place = data.Place;
  566. let contest_name = data.ContestName;
  567. let tmp = getColor(rating); let color = tmp[1], alpha = tmp[2];
  568. border_status_shape.graphics.c().s(color).ss(1).rr(OFFSET_X, OFFSET_Y, STATUS_WIDTH, STATUS_HEIGHT, 2);
  569. rating_text.text = rating;
  570. rating_text.color = color;
  571. place_text.text = getOrdinal(place);
  572. diff_text.text = getDiff(rating - old_rating);
  573. date_text.text = date.toLocaleDateString();
  574. contest_name_text.text = contest_name;
  575. if (particle_flag) {
  576. let particle_num = parseInt(Math.pow(getRatingPer(rating), 2) * (PARTICLE_MAX - PARTICLE_MIN) + PARTICLE_MIN);
  577. setParticles(particle_num, color, alpha, rating);
  578. }
  579. standings_url = data.StandingsUrl;
  580. }
  581. //Particle は マウスオーバー時のくるくるのやつw
  582. function setParticle(particle, x, y, color, alpha, star_flag) {
  583. particle.x = x;
  584. particle.y = y;
  585. let ang = Math.random() * Math.PI * 2;
  586. let speed = Math.random() * 4 + 4;
  587. particle.vx = Math.cos(ang) * speed;
  588. particle.vy = Math.sin(ang) * speed;
  589. particle.rot_speed = Math.random() * 20 + 10;
  590. particle.life = LIFE_MAX;
  591. particle.visible = true;
  592. particle.color = color;
  593. if (star_flag) {
  594. particle.text = "★";
  595. } else {
  596. particle.text = "@";
  597. }
  598. particle.alpha = alpha;
  599. }
  600. function setParticles(num, color, alpha, rating) {
  601. for (let i = 0; i < PARTICLE_MAX; i++) {
  602. if (i < num) {
  603. setParticle(particles[i], rating_text.x, rating_text.y, color, alpha, rating >= STAR_MIN);
  604. } else {
  605. particles[i].life = 0;
  606. particles[i].visible = false;
  607. }
  608. }
  609. }
  610. function updateParticle(particle) {
  611. if (particle.life <= 0) {
  612. particle.visible = false;
  613. return;
  614. }
  615. particle.x += particle.vx;
  616. particle.vx *= 0.9;
  617. particle.y += particle.vy;
  618. particle.vy *= 0.9;
  619. particle.life--;
  620. particle.scaleX = particle.scaleY = particle.life / LIFE_MAX;
  621. particle.rotation += particle.rot_speed;
  622. }
  623.  
  624. function updateParticles() {
  625. for (let i = 0; i < PARTICLE_MAX; i++) {
  626. if (particles[i].life > 0) {
  627. updateParticle(particles[i]);
  628. }
  629. }
  630. }
  631. //@#//@#//@#//@#//@#//@#//@#// 関係ない //@#//@#//@#//@#//@#//@#//@#//@#//@#//@#
  632.  
  633. init();
  634.  
  635.  
  636. })()