☰

Atcoder Perf Graph

レーティンググラフにパフォーマンスのグラフを重ねて表示します

As of 26/09/2023. See the latest version.

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