diff options
author | Chris Xiong <chirs241097@gmail.com> | 2019-02-10 11:16:07 +0800 |
---|---|---|
committer | Chris Xiong <chirs241097@gmail.com> | 2019-02-10 11:16:07 +0800 |
commit | 9d3c8c0e6e1a7ba43bf3dc19350d1dca68b657a3 (patch) | |
tree | 339de0698c13e1763d3361d70fb1266621025c91 /codeforces-rating-cmp | |
download | web-9d3c8c0e6e1a7ba43bf3dc19350d1dca68b657a3.tar.xz |
Initial commit.
Diffstat (limited to 'codeforces-rating-cmp')
-rw-r--r-- | codeforces-rating-cmp/index.html | 80 | ||||
-rwxr-xr-x | codeforces-rating-cmp/main.js | 168 |
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; +} |