summaryrefslogtreecommitdiff
path: root/codeforces-rating-cmp
diff options
context:
space:
mode:
authorGravatar Chris Xiong <chirs241097@gmail.com> 2019-02-10 11:16:07 +0800
committerGravatar Chris Xiong <chirs241097@gmail.com> 2019-02-10 11:16:07 +0800
commit9d3c8c0e6e1a7ba43bf3dc19350d1dca68b657a3 (patch)
tree339de0698c13e1763d3361d70fb1266621025c91 /codeforces-rating-cmp
downloadweb-9d3c8c0e6e1a7ba43bf3dc19350d1dca68b657a3.tar.xz
Initial commit.
Diffstat (limited to 'codeforces-rating-cmp')
-rw-r--r--codeforces-rating-cmp/index.html80
-rwxr-xr-xcodeforces-rating-cmp/main.js168
2 files changed, 248 insertions, 0 deletions
diff --git a/codeforces-rating-cmp/index.html b/codeforces-rating-cmp/index.html
new file mode 100644
index 0000000..b13de8f
--- /dev/null
+++ b/codeforces-rating-cmp/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<title>Chrisoft::CodeForces Rating Comparator</title>
+<link rel="icon" href="/favicon.png">
+<link rel="stylesheet" type="text/css" href="/common.css">
+<script type="text/javascript" src="main.js"></script>
+<style>
+.s{
+ font-family: 'FreeMono', 'Courier New', Courier, monospace;
+ padding: 10px;
+ box-sizing: border-box;
+ border: 2px solid rgba(0,0,0,0);
+}
+.s:hover{border:2px solid black;}
+.selected{border:2px solid red !important;}
+button
+{
+ border:none;
+ color:white;
+ padding:0.25em 2em;
+ text-align:center;
+ background-color:#44AA44;
+ -webkit-transition-duration: 0.4s;
+ transition-duration: 0.4s;
+}
+button:hover
+{
+ background-color:#66CC66;
+}
+</style>
+</head>
+<body onload="init();">
+<script type="text/javascript" language="javascript">
+function changeImage(img){
+ document.getElementById('aqt').src=img;
+}
+link = document.createElement("link");
+var thm=document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)thm\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1");
+switch(thm)
+{
+ case "day":
+ link.href="colors-day.css";
+ break;
+ case "night":
+ link.href="colors-night.css";
+ break;
+ case "auto":
+ default:
+ var c=new Date();
+ if(c.getHours()>=6&&c.getHours()<18)
+ link.href = "colors-day.css";
+ else
+ link.href = "colors-night.css";
+ break;
+}
+link.type="text/css";
+link.rel="stylesheet";
+document.getElementsByTagName("head")[0].appendChild(link);
+</script>
+<table border="0" style="margin:auto;width:66%;">
+<tr>
+ <td class="CTitle">
+ <span style="font-size:2em;"><a href="../">Chrisoft</a>::CodeForces Rating Comparator</span>
+ </td>
+</tr>
+</table>
+<canvas id="cvs" width="800" height="450" style="position:absolute;top:4em;left:50%;transform:translate(-50%,0%);-webkit-transform:translate(-50%,0%);z-index:-1;"></canvas>
+<div style="float:right;width:20%;">
+ <div id="users" style="width:100%;overflow-y:auto;"></div>
+ <input type="text" id="name" class="TText" style="border:none;border-bottom:2px solid #4A4;outline:none !important;background-color:rgba(0,0,0,0) !important;"></input>
+ <button id="add" onclick="add();">+</button>
+ <button id="remove" onclick="remove();">-</button>
+</div>
+<div class="floatingl">
+<img src="../koishi_norm.png" alt="" width="320em" id="aqt" onmouseover="changeImage('../koishi_hovr.png')" onmouseout="changeImage('../koishi_norm.png')" onclick="this.remove();">
+</div>
+</body>
+</html>
diff --git a/codeforces-rating-cmp/main.js b/codeforces-rating-cmp/main.js
new file mode 100755
index 0000000..fe3bd5d
--- /dev/null
+++ b/codeforces-rating-cmp/main.js
@@ -0,0 +1,168 @@
+var users=new Array;
+var animating=false;
+var curTsL=0,curTsR=0;
+var tarTsL=4294967296,tarTsR=0;
+var curRtL=0,curRtR=0;
+var tarRtL=9999,tarRtR=0;
+var ctx;
+var w,h;
+var ratings=[0,1200,1400,1600,1900,2200,2300,2400,2600,2900,9999];
+var ratingbg=["rgba(128,128,128,0.6)","rgba(0,255,0,0.6)","rgba(3,168,158,0.6)","rgba(0,0,255,0.6)","rgba(160,0,160,0.6)","rgba(255,140,0,0.6)","rgba(255,140,0,0.6)","rgba(255,0,0,0.6)","rgba(224,0,0,0.6)","rgba(204,0,0,0.6)"];
+function init()
+{
+ ctx=document.getElementById("cvs").getContext("2d");
+ w=document.getElementById("cvs").width;
+ h=document.getElementById("cvs").height;
+}
+function min(a,b){return a<b?a:b;}
+function max(a,b){return a>b?a:b;}
+function randomColor(a)
+{
+ var h=Math.floor(Math.random()*30)*12;
+ return "hsla("+h+",90%,45%,"+a+")";
+}
+function add()
+{
+ if(animating)return;
+ var req=new XMLHttpRequest();
+ req.onload=function(){
+ var r=JSON.parse(req.responseText);
+ if(r.status!=="OK")return;
+ if(!Array.isArray(r.result)||r.result.length==0)return;
+ r.maxr=0;r.minr=9999;r.maxt=0;r.mint=4294967296;r.selected=false;
+ r.color=randomColor(0.8);r.pendingremove=false;r.bold=false;
+ if(tarTsL==0)tarTsL=4294967296;
+ for(var i=0;i<r.result.length;++i)
+ {
+ r.result[i].drawRating=0;
+ r.maxr=max(r.maxr,r.result[i].newRating+200);
+ r.minr=min(r.minr,r.result[i].newRating-200);
+ r.maxt=max(r.maxt,r.result[i].ratingUpdateTimeSeconds);
+ r.mint=min(r.mint,r.result[i].ratingUpdateTimeSeconds);
+ }
+ tarRtL=min(tarRtL,r.minr);tarRtR=max(tarRtR,r.maxr);
+ tarTsL=min(tarTsL,r.mint);tarTsR=max(tarTsR,r.maxt);
+ users.push(r);
+ var o=document.createElement("div");
+ o.userid=users.length-1;
+ o.textContent=document.getElementById("name").value;
+ o.classList.add("s");
+ o.style.backgroundColor=r.color;
+ o.onclick=function(){this.classList.toggle("selected");}
+ o.onmouseenter=function(){highlight(this.userid,true);}
+ o.onmouseleave=function(){highlight(this.userid,false);}
+ document.getElementById("users").appendChild(o);
+ animating=true;
+ window.requestAnimationFrame(update);
+ }
+ req.open("GET","http://codeforces.com/api/user.rating?handle="+document.getElementById("name").value);
+ req.send();
+}
+function remove()
+{
+ if(animating)return;
+ for(var i=0;i<document.getElementById("users").childNodes.length;++i)
+ if(document.getElementById("users").childNodes[i].classList.contains("selected"))
+ users[i].pendingremove=true;
+ for(var i=0;i<document.getElementById("users").childNodes.length;++i)
+ if(document.getElementById("users").childNodes[i].classList.contains("selected"))
+ {document.getElementById("users").removeChild(document.getElementById("users").childNodes[i]);--i;}
+ tarRtL=9999,tarRtR=0;
+ tarTsL=4294967296,tarTsR=0;
+ for(var i=0;i<users.length;++i)
+ {
+ if(users[i].pendingremove)continue;
+ tarRtL=min(tarRtL,users[i].minr);tarRtR=max(tarRtR,users[i].maxr);
+ tarTsL=min(tarTsL,users[i].mint);tarTsR=max(tarTsR,users[i].maxt);
+ }
+ if(tarRtL>tarRtR)tarRtR=1900,tarRtL=1000;
+ if(tarTsL>tarTsR)tarTsL=tarTsR=0;
+ animating=true;
+ window.requestAnimationFrame(update);
+}
+function morph(a,b,s)
+{
+ var ret=a;if(Math.abs(a-b)>s)
+ ret+=s*(b-a)/Math.abs(a-b);
+ else ret=b;return ret;
+}
+function interpolate(a,b,c,d,x)
+{
+ var A=(d-c)/(b-a),B=c-a*A;
+ return A*x+B;
+}
+function highlight(n,s)
+{
+ users[n].bold=s;window.requestAnimationFrame(update);
+}
+function update()
+{
+ var f=false;
+ if(curTsL===0&&curTsR===0)
+ {curTsL=tarTsL;curTsR=tarTsR;f=(tarTsL||tarTsR);}
+ else
+ {
+ f|=Math.abs(curTsL-tarTsL)>432000;
+ f|=Math.abs(curTsR-tarTsR)>432000;
+ curTsL=morph(curTsL,tarTsL,max(Math.abs(curTsL-tarTsL)/5,432000));
+ curTsR=morph(curTsR,tarTsR,max(Math.abs(curTsR-tarTsR)/5,432000));
+ }
+ if(curRtL===0&&curRtR===0)
+ {curRtL=tarRtL;curRtR=tarRtR;f=true;}
+ else
+ {
+ f|=Math.abs(curRtL-tarRtL)>10;
+ f|=Math.abs(curRtR-tarRtR)>10;
+ curRtL=morph(curRtL,tarRtL,max(Math.abs(curRtL-tarRtL)/5,10));
+ curRtR=morph(curRtR,tarRtR,max(Math.abs(curRtR-tarRtR)/5,10));
+ }
+ ctx.clearRect(0,0,w,h);
+ for(var i=0;i<ratings.length-1;++i)
+ {
+ ctx.fillStyle=ratingbg[i];
+ ctx.fillRect(0,interpolate(curRtL,curRtR,h,0,ratings[i+1]),w,interpolate(curRtL,curRtR,h,0,ratings[i])-interpolate(curRtL,curRtR,h,0,ratings[i+1]));
+ }
+ for(var i=0;i<users.length;++i)
+ {
+ if(users[i].pendingremove)
+ {
+ var j;
+ for(j=users[i].result.length-1;j>=0;--j)
+ {
+ if(users[i].result[j].drawRating<tarRtL){users[i].result[j].drawRating=0;f=true;}
+ else if(users[i].result[j].drawRating-(max(tarRtR,users[i].result[j].newRating)-tarRtL)/20>tarRtL){users[i].result[j].drawRating-=(max(tarRtR,users[i].result[j].newRating)-tarRtL)/20;f=true;}
+ else{users[i].result[j].drawRating=0;}
+ if(users[i].result[j].drawRating>users[i].result[j].newRating*0.8)break;
+ }
+ if(j==-1){users.splice(i,1);--i;continue;}
+ for(j=users[i].result.length-1;j>=0;--j)
+ if(users[i].result[j].ratingUpdateTimeSeconds<tarTsL&&users[i].result[j].drawRating===0){users.splice(i,1);--i;j=-2;break;}
+ if(j==-2)continue;
+ }
+ else for(var j=0;j<users[i].result.length;++j)
+ {
+ if(users[i].result[j].drawRating<tarRtL){users[i].result[j].drawRating=tarRtL;f=true;break;}
+ else if(users[i].result[j].drawRating+(tarRtR-tarRtL)/30<users[i].result[j].newRating){users[i].result[j].drawRating+=(tarRtR-tarRtL)/30;f=true;
+ if(users[i].result[j].drawRating<users[i].result[j].newRating*0.6)break;}
+ else users[i].result[j].drawRating=users[i].result[j].newRating;
+ }
+ ctx.strokeStyle=users[i].color;
+ ctx.lineWidth=users[i].bold?4:2;
+ ctx.beginPath();
+ ctx.moveTo(interpolate(curTsL,curTsR,0,w,users[i].result[0].ratingUpdateTimeSeconds),
+ min(interpolate(curRtL,curRtR,h,0,users[i].result[0].drawRating),h+10));
+ for(var j=1;j<users[i].result.length;++j)
+ ctx.lineTo(interpolate(curTsL,curTsR,0,w,users[i].result[j].ratingUpdateTimeSeconds),
+ min(interpolate(curRtL,curRtR,h,0,users[i].result[j].drawRating),h+10));
+ ctx.stroke();
+ ctx.fillStyle=users[i].color;
+ for(var j=0;j<users[i].result.length;++j)
+ {
+ ctx.beginPath();
+ ctx.arc(interpolate(curTsL,curTsR,0,w,users[i].result[j].ratingUpdateTimeSeconds),
+ min(interpolate(curRtL,curRtR,h,0,users[i].result[j].drawRating),h+10),users[i].bold?5:3,0,2*Math.PI);
+ ctx.fill();
+ }
+ }
+ if(f)window.requestAnimationFrame(update);else animating=false;
+}