35 |
41 | );
42 | }
43 | }
44 |
45 | export default class Controll extends React.Component {
46 | constructor(props){
47 | super(props);
48 | }
49 |
50 | render(){
51 | let ret = (
52 | {
36 | let newSettings = Object.assign(new AppSettings(), this.props.settings);
37 | newSettings["filterByFriends"] = !this.props.settings.filterByFriends;
38 | this.props.settingsUpdateFunc( newSettings );
39 | } }>{button}
40 |
53 |
93 | );
94 |
95 | return ret;
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/src/css.js:
--------------------------------------------------------------------------------
1 | export default function injectCustomCSS(){
2 | let css = `
3 | /* Rules for sizing the icon. */
4 | .material-icons.md-18 { font-size: 18px; }
5 | .material-icons.md-24 { font-size: 24px; }
6 | .material-icons.md-36 { font-size: 36px; }
7 | .material-icons.md-48 { font-size: 48px; }
8 |
9 | /* Rules for using icons as black on a light background. */
10 | .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
11 | .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
12 |
13 | /* Rules for using icons as white on a dark background. */
14 | .material-icons.md-light { color: rgba(255, 255, 255, 1); }
15 | .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
16 |
17 | /* Controller Button */
18 | .atcoder-custom-standings.controller-button {
19 | }
20 | .atcoder-custom-standings.controller-button:hover {
21 | background-color: rgba(220,220,220,0.1);
22 | box-shadow:2px 4px 8px 0px grey;
23 | cursor:pointer;
24 | text-decoration: underline;
25 | }
26 |
27 | /* Modal */
28 | .atcoder-custom-standings.modal-filter{
29 | position : fixed;
30 | top : 0;
31 | left : 0;
32 | width : 100%;
33 | height : 100%;
34 | padding-top : 50px;
35 | background-color : rgba(0,0,0,0.5);
36 | }
37 | .atcoder-custom-standings.modal-content{
38 | position: fixed;
39 | top :50%;
40 | left: 50%;
41 | z-index:1050;
42 | overflow:auto;
43 | background-color:white;
44 | box-shadow:0 3px 8px 3px rgba(0,0,0,0.3);
45 | width : 850px;
46 | height : 600px;
47 | max-height : 600px;
48 | margin : -300px 0 0 -425px;
49 | padding: 25px;
50 | }
51 |
52 | /* Check Box */
53 | .material-icons.md-checked { color : rgba(0, 122, 20, 0.9); }
54 |
55 | /* Reloading On Off*/
56 | .atcoder-custom-standings.reloading-enabled { color: rgb(230, 128, 63); }
57 | .atcoder-custom-standings.reloading-disabled { color: grey; }
58 |
59 | /* Sorting On Off*/
60 | .atcoder-custom-standings.sorting-enabled { color: rgb(230, 128, 63); }
61 | .atcoder-custom-standings.sorting-disabled { color: grey; }
62 |
63 | /* Filter On Off*/
64 | .atcoder-custom-standings.filtering-enabled { color: rgb(230, 128, 63); }
65 | .atcoder-custom-standings.filtering-disabled { color: grey; }
66 |
67 | /* Settings Item */
68 | .atcoder-custom-standings.settings-item {
69 | padding: 4px;
70 | display: block;
71 | }
72 |
73 | /* Standings table */
74 | .atcoder-custom-standings.timestamp { color:grey; display: block; }
75 |
76 | /* Other */
77 | .atcoder-custom-standings.cursor-link:hover{
78 | cursor: pointer;
79 | text-decoration: underline;
80 | }
81 |
82 | /* Standings pop down menu */
83 | .atcoder-custom-standings.user-dropdown-menu-box {
84 | position:absolute;
85 | padding-top:8px;
86 | padding-bottom:8px;
87 | background-color:white;
88 | box-shadow:4px 4px 8px 4px grey;
89 | border-radius:0px 0px 6px 0px;
90 | cursor: auto;
91 | }
92 | .atcoder-custom-standings.user-dropdown-menu {
93 | display : block;
94 | line-height: 2em;
95 | padding-left : 8px;
96 | padding-right : 8px;
97 | }
98 | .atcoder-custom-standings.user-dropdown-menu:hover {
99 | background : lightblue;
100 | }
101 |
102 | /* modify original */
103 | a.user-red {
104 | color:#FF0000;
105 | }
106 |
107 | .standings-friend td {background-color : rgba(0, 150, 100, 0.09) !important;}
108 | .standings-friend:hover td {background-color: rgba(0, 200, 150, 0.09) !important;}
109 |
110 | .standings-friend > td.standings-frozen {background-color : rgba(0, 82, 255, 0.27) !important;}
111 | .standings-friend > td.standings-frozen:hover {background-color: rgba(0, 82, 255, 0.27) !important;}
112 |
113 |
114 | .table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {background-color: #fefefe;}
115 | .table tbody tr:hover td, .table tbody tr:hover th {background-color: #fefefe;}
116 |
117 | td.standings-username:hover {
118 | cursor: pointer;
119 | text-decoration: underline;
120 | }
121 |
122 | .table-sort th{
123 | background-image: none !important;
124 | }
125 |
126 | .pagination .me a {
127 | background-color: rgba(252, 0, 0, 0.09);
128 | color : rgb(114,0,0);
129 | }
130 |
131 | .pagination .active-me a {
132 | background-color: #f5f5f5;
133 | color : rgb(200,0,0);
134 | }
135 | `;
136 |
137 | $('head').append(``);
138 | }
--------------------------------------------------------------------------------
/src/filter.js:
--------------------------------------------------------------------------------
1 | import {countries, rating} from './util.js';
2 | import AppSettings from './appSettings.js';
3 |
4 | class FilterContent extends React.Component {
5 | constructor(props){
6 | super(props);
7 |
8 | this.byFriendsList.bind(this);
9 | this.byCountry.bind(this);
10 | this.byRating.bind(this);
11 | this.byName.bind(this);
12 | this.update.bind(this);
13 | }
14 |
15 | update( option ){
16 | let newSettings = Object.assign(new AppSettings(), this.props.settings);
17 | for(let param in option){
18 | newSettings[param] = option[param];
19 | }
20 | this.props.settingsUpdateFunc( newSettings );
21 | }
22 |
23 | byFriendsList(){
24 | return (
25 |
54 |
58 |
59 |
64 |
65 |
71 |
72 |
78 |
79 |
84 |
85 |
92 | this.update( {"filterByFriends": !this.props.settings.filterByFriends} )}>
28 |
32 | );
33 | }
34 |
35 | byCountry(){
36 | const form = this.props.getActiveCountries().map( (country) => {
37 | const val = countries[country];
38 | return ();
39 | });
40 | return (
41 |
29 | Friends
30 |
31 |
42 |
55 | );
56 | }
57 |
58 | byRating(){
59 | let buttons = rating.lb.map( (lb, idx) => {
60 | if(idx === 0) return "";
61 | if( this.props.settings.filterRating.has(idx) === true ){
62 | return (
63 | {
64 | let obj = new Set( this.props.settings.filterRating );
65 | obj.delete( idx );
66 | this.update( {"filterByRating":true, "filterRating": obj} );
67 | }} title={`${lb} - `} key={`rating-filter-rating-${lb}`}>
68 | check_box
69 |
70 | );
71 | }else{
72 | return (
73 | {
74 | let obj = new Set( this.props.settings.filterRating );
75 | obj.add( idx );
76 | this.update( {"filterByRating":true, "filterRating": obj} );
77 | }} title={`${lb} - `} key={`rating-filter-rating-${lb}`}>
78 | check_box_outline_blank
79 |
80 | );
81 | }
82 | });
83 |
84 | let tool = (()=>{
85 | return(
86 |
87 | {
88 | let obj = new Set([1,2,3,4]);
89 | this.update( {"filterByRating":true, "filterRating": obj} );
90 | }} title="0-1199">{"ABC"}
91 |
92 | {
93 | let obj = new Set([1,2,3,4,5,6,7,8]);
94 | this.update( {"filterByRating":true, "filterRating": obj} );
95 | }} title="0-2799">{"ARC"}
96 |
97 | {
98 | let obj = new Set();
99 | this.update( {"filterByRating":true, "filterRating": obj} );
100 | }}>{"None"}
101 |
102 | {
103 | let obj = new Set([1,2,3,4,5,6,7,8,9]);
104 | this.update( {"filterByRating":true, "filterRating": obj} );
105 | }}>{"All"}
106 |
107 | );
108 | })();
109 |
110 | return (
111 | this.update( {"filterByCountry": !this.props.settings.filterByCountry} )}
45 | >
46 | Country
47 |
48 |
49 |
53 |
54 |
112 |
123 | );
124 | }
125 |
126 | byName(){
127 | return (
128 | this.update( {"filterByRating": !this.props.settings.filterByRating} )}
115 | >
116 | Rating
117 |
118 |
119 |
122 | {buttons}
120 |{tool}
121 |
129 |
141 | );
142 | }
143 |
144 | render(){
145 | const byFriend = this.byFriendsList();
146 | const byRating = this.byCountry();
147 | const byCountry = this.byRating();
148 | const byName = this.byName();
149 | return (
150 | this.update( {"filterByName": !this.props.settings.filterByName} )}
132 | >
133 | Name
134 |
135 |
136 | {
137 | this.update( {"filterName": e.target.value, "filterByName": true} )
138 | } } />
139 |
140 | e.stopPropagation()}>
160 |
167 | );
168 | }
169 |
170 | }
171 |
172 | export default class Filter extends React.Component {
173 | constructor(props){
174 | super(props);
175 |
176 | this.state = {
177 | show : false,
178 | posX : 0,
179 | posY : 0
180 | };
181 | }
182 |
183 | render(){
184 | const button = (
185 |
187 | filter_list
188 | Filter
189 |
190 | );
191 |
192 | if( this.state.show === false ){
193 | return (
194 |
161 | {byFriend}
162 | {byRating}
163 | {byCountry}
164 | {byName}
165 |
166 |
195 |
200 | );
201 | }else{
202 | return(
203 | {
196 | let rect = e.target.getBoundingClientRect();
197 | this.setState( {show : !this.state.show, posX:rect.left, posY:rect.top }) ;
198 | } }>{button}
199 |
204 |
214 | );
215 | }
216 | }
217 | }
--------------------------------------------------------------------------------
/src/friendsList.js:
--------------------------------------------------------------------------------
1 | export default class FriendsList{
2 | constructor( load ){
3 | this.friends = new Set();
4 | if(load === true) this.load();
5 |
6 | //this.add("camypaper");
7 | }
8 |
9 | load(){
10 | //load
11 | //friend list object (old version)
12 | let friendsOld = JSON.parse( GM_getValue('GM_friend_list', 'null') );
13 | if(friendsOld !== null){
14 | this.friends = new Set( Object.keys(friendsOld) );
15 | GM_deleteValue( 'GM_friend_list' );
16 | this.save();
17 | }
18 |
19 | //friend list array (new version)
20 | this.friends = new Set(JSON.parse( GM_getValue('friendsList', '[]') ));
21 |
22 | console.log("loaded : friends list");
23 | console.log(this.friends);
24 | }
25 |
26 | save(){
27 | let str = JSON.stringify([...this.friends]);
28 | //save
29 | GM_setValue('friendsList', str);
30 |
31 | console.log("saved : friends list");
32 | console.log(str);
33 | }
34 |
35 | //[names...]
36 | add(handle){
37 | handle.forEach( (name) => this.friends.add(name) );
38 | this.save();
39 | }
40 |
41 | remove(handle){
42 | handle.forEach( (name) => this.friends.delete(name) );
43 | this.save();
44 | }
45 |
46 |
47 | isFriend(handle){
48 | return this.friends.has( handle );
49 | }
50 |
51 | getList(){
52 | return [...this.friends];
53 | }
54 | }
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | //import React from 'react';
2 | //import ReactDOM from 'react-dom';
3 | import AtCoderCutomStandings from './app.js'
4 | import injectCustomCSS from './css.js'
5 |
6 | $('div.table-responsive').hide();
7 | $('#pagination-standings').hide();
8 | $('#standings-csv-link').after('');
9 | //$('head').append('');
10 | injectCustomCSS();
11 |
12 | try{
13 | ReactDOM.render(
14 | this.setState( {show : !this.state.show }) }>{button}
205 | this.setState({show:false})}>
207 |
212 |
213 |
8 |
9 |
11 | );
12 |
13 | return (
14 | {this.props.title}
clear
10 |
15 | {head}
16 | {this.props.children}
17 |
18 | );
19 | }
20 | }
21 |
22 | export default class Modal extends React.Component{
23 |
24 | constructor(props){
25 | super(props);
26 | this.state = {show: false};
27 | }
28 |
29 | render(){
30 | let button = (
31 | {this.setState( {show: true} ); } }
32 | className="atcoder-custom-standings controller-button">
33 | {this.props.button}
34 |
35 | );
36 |
37 | if( this.state.show === true ){
38 | return(
39 |
40 | {button}
41 |
49 | );
50 | }else{
51 | return(
52 | { this.setState({ show: false}) } }>
42 |
48 | {e.stopPropagation(); return false;} }>
43 | { this.setState({ show: false}) } } title={this.props.title}>
44 | {this.props.children}
45 |
46 |
47 |
53 | {button}
54 |
55 | );
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/pager.js:
--------------------------------------------------------------------------------
1 | class PageButton extends React.Component{
2 | constructor(props){
3 | super();
4 | }
5 |
6 | shouldComponentUpdate( nextProps ){
7 | if( this.props.current !== nextProps.current ) return true;
8 | if( this.props.me !== nextProps.me ) return true;
9 | return false;
10 | }
11 |
12 | render(){
13 | const p = this.props.page;
14 |
15 | if( this.props.current === p ){
16 | return (- {res}
9 |
);
35 | }
36 | }
--------------------------------------------------------------------------------
/src/settings.js:
--------------------------------------------------------------------------------
1 | import Modal from './modal.js'
2 | import AppSettings from './appSettings.js'
3 | class SettingsContent extends React.Component{
4 | constructor(props){
5 | super(props);
6 | this.update.bind(this);
7 | this.generateForm.bind(this);
8 | this.generateFriendsListForm.bind(this);
9 | }
10 |
11 | update( option ){
12 | let newSettings = Object.assign(new AppSettings(), this.props.settings);
13 | for(let param in option){
14 | newSettings[param] = option[param];
15 | }
16 | console.log( option );
17 | this.props.settingsUpdateFunc( newSettings );
18 | }
19 |
20 | generateForm( optionName, label ){
21 | return (
22 | this.props.updateFunc() }>
11 |
12 | refreshUpdate
13 |
14 |
15 | {
17 | if(!this.state.autoUpdate){
18 | this.timerReloading = setInterval( this.props.updateFunc, 60*1000 );
19 | console.log( "create timer ", this.timerReloading);
20 | }else{
21 | try{
22 | clearInterval( this.timerReloading );
23 | console.log( "erase timer ", this.timerReloading);
24 | }catch(e){
25 |
26 | }
27 | }
28 | this.setState( {autoUpdate:!this.state.autoUpdate})
29 | } }>
30 |
31 | updateAuto (1min)
32 |
33 |
34 |
23 |
28 |
29 | );
30 | }
31 |
32 | generateFriendsListForm(){
33 | const friends = this.props.friends.getList().map( (name) => {
34 | return ();
35 | });
36 | return(
37 |
38 |
71 | );
72 | }
73 |
74 | render(){
75 | const pageSize = (()=>{
76 | const list = [10,20,50,100,200,300,400,500,1000,5000,10000].map( (val)=>{
77 | return
78 | });
79 | return (
80 | Friends List
39 |
40 | {
42 | if( e.key !== 'Enter' ) return;
43 | const element = this.refs.addFriendForm;
44 | if( element.value !== "" ) this.props.friendsUpdateFunc( element.value.split(" "), true );
45 | element.value = "";
46 | this.forceUpdate();
47 | }}/>
48 |
56 |
57 |
58 |
61 |
69 |
70 |
81 | Page Size
82 |
86 |
87 | );
88 | })();
89 |
90 | const displayNameStyle = (
91 |
92 | Display Name Style
93 |
100 |
101 | );
102 |
103 |
104 | return (
105 |
106 | {pageSize}
107 | {displayNameStyle}
108 | {this.generateForm( "disableRatingColor", "Disable Rating Color")}
109 | {this.generateForm( "highlightFriends", "Highlight Friends")}
110 | {this.generateForm( "showNationalFlag", "Show National Flag")}
111 | {this.generateForm( "saveFilteringState", "Save Filtering State (if this option is checked, your filtering state will be restored when you open standings page)")}
112 |
113 | {this.generateFriendsListForm()} 114 |
115 | );
116 | }
117 | }
118 |
119 | export default class Settings extends React.Component {
120 | constructor(props){
121 | super(props);
122 | }
123 |
124 | shouldComponentUpdate( nextProps ){
125 | if( JSON.stringify( Object.assign({}, this.props.settings) ) !== JSON.stringify( Object.assign({}, nextProps.settings) )) return true;
126 | // if( JSON.stringify( this.props.friends.getList() ) !== JSON.stringify( nextProps.friends.getList() ) ) return true;
127 | return true;
128 | }
129 |
130 | render(){
131 | let button = (
132 |
133 | settings
134 | Settings
135 |
136 | );
137 |
138 | return(
139 | 113 | {this.generateFriendsListForm()} 114 |
e.stopPropagation()} >
88 |
96 | );
97 | }
98 | }
99 |
100 | export default class Sorting extends React.Component{
101 | constructor(props){
102 | super(props);
103 | this.state = {
104 | show : false,
105 | posX : 0,
106 | posY : 0
107 | };
108 |
109 | }
110 | render(){
111 | let button = (
112 |
113 | sort
114 | Sort
115 |
116 | );
117 |
118 | if( this.state.show === false ){
119 | return (
120 |
89 |
95 | {onOff}
90 | Key :
91 | {keys}
{keysTasks}
92 | {keysTasks}
Order :
93 | {order}
94 |
121 |
128 | );
129 | }else{
130 | return (
131 | {
122 | let rect = e.target.getBoundingClientRect();
123 | this.setState( {show : !this.state.show, posX:rect.left, posY:rect.top }) ;
124 | } }>
125 | {button}
126 |
127 |
132 |
142 | );
143 | }
144 | }
145 | }
--------------------------------------------------------------------------------
/src/standings.js:
--------------------------------------------------------------------------------
1 | import {rating,countries} from './util.js'
2 | import Me from './userinfo.js';
3 |
4 | class UserDetails extends React.Component{
5 | constructor(props){
6 | super(props);
7 | }
8 |
9 | componentDidMount(){
10 | document.getElementById(`user-dropdown-menu-${this.props.row.user_name}`).addEventListener('click', (e)=>{
11 | e.stopPropagation();
12 | });
13 | document.getElementById(`user-dropdown-menu-${this.props.row.user_name}-friend`).addEventListener('click', (e)=>{
14 | this.props.friendsUpdateFunc( [this.props.row.user_screen_name], !this.props.isFriend);
15 | });
16 | document.getElementsByTagName('body')[0].addEventListener('click', this.props.closeFunc, {once:true});
17 | }
18 |
19 | render(){
20 | const link = `https://atcoder.jp/user/${this.props.row.user_screen_name}`;
21 | const submissions = (
22 |
23 | search
24 | Submissions
25 |
26 | );
27 | const ratingColor = rating.getColorOriginal(this.props.row.rating);
28 |
29 | const friend = (
30 |
31 | {this.props.isFriend ? "person_outline" : "person_add"}
32 | {this.props.isFriend ? "Remove from Friends List" : "Add to Friends List"}
33 |
34 | );
35 | const twitter = this.props.row.twitter_id == "" ? "" : (
36 | this.setState({show:!this.state.show})} >{button}
133 | this.setState({show:false})}>
135 |
140 |
141 |
37 | TwitterID :
38 |
39 | {this.props.row.twitter_id}
40 |
41 |
);
42 |
43 | return (
44 |
46 |
51 |
71 | );
72 | }
73 | }
74 |
75 |
76 | class Name extends React.Component{
77 | constructor(props){
78 | super(props);
79 | this.state = {
80 | show : false
81 | };
82 | }
83 |
84 | shouldComponentUpdate( nextProps, nextState ){
85 | if( this.props.settings.displayNameStyle !== nextProps.settings.displayNameStyle ) return true;
86 | if( this.props.settings.disableRatingColor !== nextProps.settings.disableRatingColor ) return true;
87 | if( this.props.settings.showNationalFlag !== nextProps.settings.showNationalFlag ) return true;
88 | if( this.state.show !== nextState.show ) return true;
89 | if( this.props.isFriend !== nextProps.isFriend ) return true;
90 | return false;
91 | }
92 |
93 | render(){
94 | const row = this.props.row;
95 | const color = this.props.settings.disableRatingColor ? "" : rating.userColor[ rating.getLevel(row.rating) ];
96 |
97 | const displayName = (()=>{
98 | return {
99 | user_screen_name : row.user_screen_name,
100 | user_name : row.user_name,
101 | user_screen_name_user_name : `${row.user_screen_name} / ${row.user_name}`,
102 | user_name_user_screen_name : `${row.user_name} / ${row.user_screen_name}`
103 | }[this.props.settings.displayNameStyle];
104 | })();
105 |
106 | const countryFlag = this.props.settings.showNationalFlag ? (
52 | {submissions}
53 |
54 |
55 | Rating : {this.props.row.rating}
56 |
57 |
58 | Competitions : {this.props.row.competitions}
59 |
60 |
61 | Country : 
62 | {countries[this.props.row.country]}
63 |
64 | {twitter}
65 |
70 |
62 | {countries[this.props.row.country]}
63 | 
) : "";
107 |
108 | const nameOnclick = (e) => {
109 | this.setState({
110 | show : !this.state.show
111 | });
112 | };
113 |
114 | if( this.state.show === false ){
115 | return (
116 | 
: null}
120 | {row.rating >= 3200 ? " " : null}
121 | {displayName}
122 | : null}
130 | {row.rating >= 3200 ? " " : null}
131 | {displayName}
132 | -
46 |
51 | );
52 | }
53 | }
54 |
55 | export default class Stats extends React.Component {
56 | /**
57 | * @param props.standings
58 | * @param props.contest
59 | */
60 | constructor(props){
61 | super(props);
62 | }
63 |
64 | render(){
65 | let button = (
66 | assessment Statistics
67 | );
68 |
69 | return (
70 | -
47 | {tab}
48 |
14 |
15 |
16 | );
17 | }
18 | componentDidMount(){
19 | let ctx = document.getElementById(this.props.canvasId);
20 | // console.log(ctx);
21 | this.chart = new Chart(ctx, this.props.dataset);
22 | // console.log(this.chart);
23 | }
24 | componentWillUnmount(){
25 | this.chart.destroy();
26 | }
27 | componentDidUpdate(){
28 | this.chart.destroy();
29 | let ctx = document.getElementById(this.props.canvasId);
30 | // console.log(ctx);
31 | this.chart = new Chart(ctx, this.props.dataset);
32 | // console.log(this.chart);
33 | }
34 | }
--------------------------------------------------------------------------------
/src/stats/summary.js:
--------------------------------------------------------------------------------
1 | import {rating,countries} from '../util.js'
2 | import ChartComponent from './chartComponent.js'
3 |
4 | class TopOfColors extends React.Component{
5 | constructor(props){
6 | super(props);
7 | }
8 | render(){
9 | let data = new Array(rating.lb.length);
10 | data.fill(undefined);
11 |
12 | this.props.standings.forEach( (s)=>{
13 | if(s.elapsed_time === "0") {
14 | let participating = false;
15 | s.tasks.forEach( (t)=>{
16 | if(t.score !== undefined) participating = true;
17 | } );
18 | if( participating === false ) return;
19 | }
20 |
21 | const level = rating.getLevel( s.rating );
22 | if( data[level] === undefined ){
23 | data[level] = {
24 | name : s.user_screen_name,
25 | rating : s.rating,
26 | rank : s.rank,
27 | score : Number(s.score) / 100,
28 | time : Number(s.elapsed_time),
29 | penalty : Number(s.penalty),
30 | failure : Number(s.failure)
31 | };
32 | }
33 | });
34 |
35 | // console.log(data);
36 |
37 | data = data.slice(1);
38 |
39 | let comp = data.map( (d, idx) => {
40 | if( d === undefined ){
41 | return (
42 |
67 |
69 |
70 |
82 |
83 | );
84 | }
85 |
86 | }
87 |
88 | class TopOfCountries extends React.Component{
89 | constructor(props){
90 | super(props);
91 | this.state = {
92 | sortingKey : "rank",
93 | ascending : true
94 | };
95 | }
96 |
97 | render(){
98 | let data = {};
99 |
100 | this.props.standings.forEach( (s)=>{
101 | if(s.elapsed_time === "0") {
102 | let participating = false;
103 | s.tasks.forEach( (t)=>{
104 | if(t.score !== undefined) participating = true;
105 | } );
106 | if( participating === false ) return;
107 | }
108 |
109 | const country = s.country;
110 |
111 | if( data[country] === undefined ){
112 | data[country] = {
113 | name : s.user_screen_name,
114 | country : s.country,
115 | rating : s.rating,
116 | rank : s.rank,
117 | score : Number(s.score) / 100,
118 | time : Number(s.elapsed_time),
119 | penalty : Number(s.penalty),
120 | failure : Number(s.failure),
121 | scoreTime : Number(s.score) * 1000000000 - Number(s.penalty)
122 | };
123 | }
124 | });
125 |
126 | data = Object.keys(data).map( (c) => {
127 | return data[c];
128 | } );
129 |
130 | data.sort( (x,y) => {
131 | let res = x[this.state.sortingKey] < y[this.state.sortingKey];
132 | res = this.state.ascending?res:!res;
133 | return res ? -1 : 1;
134 | } );
135 |
136 | let comp = data.map( (d, idx) => {
137 | return(
138 | Top of Colors
68 || Rating | 72 |Top | 73 |Rank | 74 |Score (Penalty) | 75 |Time (Penalty) | 76 |
|---|
{countries[d.country]}
150 |
152 |
153 |
180 |
181 | );
182 | }
183 |
184 | }
185 |
186 | class NumberOfColorContestants extends React.Component{
187 | constructor(props){
188 | super(props);
189 | this.state = {
190 | sortingKey : "rating",
191 | ascending : false
192 | };
193 | }
194 |
195 | render(){
196 | let data = new Array( rating.lb.length );
197 | for(let i=0; iTop of Countries
151 || { 155 | if( this.state.sortingKey == "rank" ) this.setState ({ sortingKey : "rank", ascending : !this.state.ascending }); 156 | else this.setState ({ sortingKey : "rank", ascending : true }); 157 | }}>Rank | 158 |{ 159 | if( this.state.sortingKey == "country" ) this.setState ({ sortingKey : "country", ascending : !this.state.ascending }); 160 | else this.setState ({ sortingKey : "country", ascending : true }); 161 | }}>Country | 162 |{ 163 | if( this.state.sortingKey == "name" ) this.setState ({ sortingKey : "name", ascending : !this.state.ascending }); 164 | else this.setState ({ sortingKey : "name", ascending : true }); 165 | }}>Top | 166 |{ 167 | if( this.state.sortingKey == "scoreTime" ) this.setState ({ sortingKey : "scoreTime", ascending : !this.state.ascending }); 168 | else this.setState ({ sortingKey : "scoreTime", ascending : false }); 169 | }}>Score (Penalty) | 170 |{ 171 | if( this.state.sortingKey == "scoreTime" ) this.setState ({ sortingKey : "scoreTime", ascending : !this.state.ascending }); 172 | else this.setState ({ sortingKey : "scoreTime", ascending : true }); 173 | }}>Time (Penalty) | 174 |
|---|
234 |
236 |
237 |
252 |
253 | );
254 | }
255 |
256 | }
257 |
258 | class NumberOfCountryContestants extends React.Component{
259 | constructor(props){
260 | super(props);
261 | this.state = {
262 | sortingKey : "contestants",
263 | ascending : false
264 | };
265 | }
266 |
267 | render(){
268 | let data = {};
269 |
270 | this.props.standings.forEach( (s)=>{
271 | if(s.elapsed_time === "0") {
272 | let participating = false;
273 | s.tasks.forEach( (t)=>{
274 | if(t.score !== undefined) participating = true;
275 | } );
276 | if( participating === false ) return;
277 | }
278 |
279 | const country = s.country;
280 |
281 | if( data[country] === undefined ){
282 | data[country] = {
283 | country : country,
284 | contestants : 1
285 | };
286 | }else{
287 | data[country].contestants += 1;
288 | }
289 | });
290 |
291 | data = Object.keys(data).map( (c) => {
292 | return data[c];
293 | } );
294 |
295 | data.sort( (x,y) => {
296 | let res = x[this.state.sortingKey] < y[this.state.sortingKey];
297 | res = this.state.ascending?res:!res;
298 | return res ? -1 : 1;
299 | } );
300 |
301 | let comp = data.map( (d, idx) => {
302 | return(
303 | Number of Contestants (Color)
235 || { 239 | if( this.state.sortingKey == "rating" ) this.setState ({ sortingKey : "rating", ascending : !this.state.ascending }); 240 | else this.setState ({ sortingKey : "rating", ascending : false }); 241 | }}>Rating | 242 |{ 243 | if( this.state.sortingKey == "contestants" ) this.setState ({ sortingKey : "contestants", ascending : !this.state.ascending }); 244 | else this.setState ({ sortingKey : "contestants", ascending : false }); 245 | }}>Contestants | 246 |
|---|
{countries[d.country]}
312 |
314 |
315 |
330 |
331 | );
332 | }
333 |
334 | }
335 |
336 |
337 |
338 |
339 | export default class StatsSummary extends React.Component{
340 | constructor(props){
341 | super(props);
342 | this.genDataset.bind(this);
343 | }
344 |
345 | genDataset(){
346 | const labels = rating.lb.slice(1).map( (r) => String(r) + " -" );
347 | const color = rating.color.slice(1);
348 | let count = rating.color.map( () => (new Map()) );
349 | let scoreDistribution = new Set();
350 | this.props.standings.forEach( (r) => {
351 | if( r.tasks.map( (t)=>t.elapsed_time !== undefined ? 1 : 0 ).reduce( (a,b)=>a+b ) !== 0 ){
352 | const level = rating.getLevel( r.rating );
353 | const score = r.score/100;
354 | scoreDistribution.add(score);
355 | count[level].set( score, count[level].has(score) ? count[level].get(score) + 1 : 1 );
356 | }
357 | });
358 | let scores = [...scoreDistribution].sort( (a,b) => { return a (new Array(scores.length)).fill(0) );
360 | count.forEach( (c, level) => {
361 | c.forEach( (cnt, score ) => {
362 | data[level][ scores.indexOf(score) ] = cnt;
363 | });
364 | });
365 |
366 | const dataset = {
367 | type : 'bar',
368 | data: {
369 | labels: scores,
370 | datasets: data.slice(1).map( (d, i) => {
371 | return {
372 | label: labels[i],
373 | data: d,
374 | backgroundColor: color[i]
375 | };
376 | })
377 | },
378 | options: {
379 | maintainAspectRatio : false,
380 | scales: {
381 | xAxes: [{
382 | display:true,
383 | scaleLabel:{
384 | display:true,
385 | labelString: "Score"
386 | },
387 | ticks: {
388 | beginAtZero:true
389 | }
390 | }],
391 | yAxes: [{
392 | display:true,
393 | scaleLabel:{
394 | display:true,
395 | labelString: "People"
396 | },
397 | ticks: {
398 | beginAtZero:true
399 | },
400 | stacked: true
401 | }]
402 | },
403 | animation : {
404 | animate: false,
405 | animateScale : false
406 | }
407 | }
408 | };
409 | return dataset;
410 | }
411 |
412 | render(){
413 |
414 | return (
415 | Number of Contestants (Country)
313 || { 317 | if( this.state.sortingKey == "country" ) this.setState ({ sortingKey : "country", ascending : !this.state.ascending }); 318 | else this.setState ({ sortingKey : "country", ascending : true }); 319 | }}>Country | 320 |{ 321 | if( this.state.sortingKey == "contestants" ) this.setState ({ sortingKey : "contestants", ascending : !this.state.ascending }); 322 | else this.setState ({ sortingKey : "contestants", ascending : false }); 323 | }}>Contestants | 324 |
|---|
416 |
424 |
425 |
426 |
427 |
428 | );
429 | }
430 | }
--------------------------------------------------------------------------------
/src/stats/task.js:
--------------------------------------------------------------------------------
1 | import {rating} from '../util.js'
2 | import ChartComponent from './chartComponent.js'
3 |
4 | export default class StatsTask extends React.Component{
5 | /**
6 | * task
7 | * standings
8 | */
9 | constructor(props){
10 | super(props);
11 | this.timeStep = 5 * 60;
12 |
13 |
14 | this.getMaxScore.bind(this);
15 | this.getStatsValues.bind(this);
16 | this.generateDataset.bind(this);
17 | }
18 |
19 | getMaxScore(){
20 | let maxScore = 0;
21 | this.props.standings.forEach( (data) => {
22 | const d = data.tasks[ this.props.task.id ];
23 | if( d.score === undefined ) return;
24 | maxScore = Math.max(maxScore, Number(d.score));
25 | });
26 | return maxScore;
27 | }
28 |
29 | getStatsValues(standings){
30 | let res = {}
31 | try{
32 | res.numAC = 0;
33 | res.numWA = 0;
34 | res.numPeopleTried = 0;
35 | res.numSubmissions = 0;
36 | res.firstAcceptedTime = 0;
37 | res.firstAcceptedPerson = [];
38 |
39 | let timeSum = 0;
40 |
41 | res.numContestants = 0;
42 |
43 | //set FA
44 | standings.forEach( (data) => {
45 | const d = data.tasks[ this.props.task.id ];
46 | if( d.score === undefined ) return;
47 |
48 | if( this.maxScore == 0 || d.score != this.maxScore){
49 | return;
50 | }
51 |
52 | if( res.firstAcceptedTime == 0 ) res.firstAcceptedTime = Number(d.elapsed_time);
53 | else res.firstAcceptedTime = Math.min(res.firstAcceptedTime, Number(d.elapsed_time) );
54 | });
55 |
56 | //set other params
57 | standings.forEach( (data) => {
58 | //contestant made at least one submission
59 | if( data.tasks.map( (t)=>t.elapsed_time !== undefined ? 1 : 0 ).reduce( (a,b)=>a+b ) !== 0 ) res.numContestants++;
60 |
61 | const d = data.tasks[ this.props.task.id ];
62 | if( d.score === undefined ) return;
63 |
64 | res.numPeopleTried += 1;
65 | res.numSubmissions += d.failure;
66 | if( d.score != 0 ) res.numSubmissions += 1;
67 |
68 | if( this.maxScore == 0 || d.score != this.maxScore){
69 | return;
70 | }
71 |
72 | res.numAC += 1;
73 | res.numWA += d.failure;
74 | timeSum += d.elapsed_time;
75 |
76 | if( res.firstAcceptedTime == d.elapsed_time ){
77 | res.firstAcceptedPerson.push( rating.generateColoredName( data.user_screen_name, data.rating ) );
78 | res.firstAcceptedPerson.push( " " );
79 | }
80 |
81 | });
82 |
83 | if( res.numAC == 0 ){
84 | res.averageTime = 0;
85 | }else{
86 | res.averageTime = Math.round(timeSum / res.numAC);
87 | }
88 |
89 |
90 | }catch(e){
91 | console.log( "failed to generate stats" );
92 | console.log( e );
93 | }
94 |
95 | return res;
96 | }
97 |
98 | generateDataset(){
99 | const labels = rating.lb.slice(1).map( (r) => String(r) + "-" );
100 | const color = rating.color.slice(1);
101 | const contestDuration = (this.props.contest.endTime.getTime() - this.props.contest.startTime.getTime())/1000;
102 |
103 | // set solved histogram
104 | let data = rating.lb.map( () => (new Array( Math.floor( (contestDuration+this.timeStep-1) / this.timeStep ) )).fill(0) );
105 | this.props.standings.forEach( (r) => {
106 | const t = r.tasks[ this.props.task.id ];
107 | if( t.score !== 0 && t.score === this.maxScore ){
108 | data[ rating.getLevel( r.rating ) ][ Math.floor(t.elapsed_time / this.timeStep) ] += 1;
109 | }
110 | });
111 | // dataset for the chart
112 | const dataset = {
113 | type : 'bar',
114 | data: {
115 | labels : (()=>{
116 | let arr = new Array( Math.floor( (contestDuration+this.timeStep-1) / this.timeStep ) );
117 | for(let i=0; i417 | {this.props.contest.contestEnded ? This stats is unofficial. You can check the official stats here.: null} 418 |
419 |
420 |
423 | Score Distribution
421 |179 | {`${Math.floor( dataAll.firstAcceptedTime/60 )} min ${dataAll.firstAcceptedTime%60} sec`} 180 |
204 | {`${Math.floor( data.firstAcceptedTime/60 )} min ${data.firstAcceptedTime%60} sec`} 205 |
215 |
218 |
219 |
236 |
264 | );
265 | return res;
266 | }catch(e){
267 | console.log(e);
268 | }
269 | }
270 | }
271 |
--------------------------------------------------------------------------------
/src/userinfo.js:
--------------------------------------------------------------------------------
1 | class UserInfo{
2 | constructor(){
3 | let cookie = {};
4 | document.cookie.split(/;\s/).forEach( (s) => {
5 | //"_user_screen_name=koyumeishi; __privilege=contestant; _user_id=11408; _user_name=koyumeishi".split(/;\s/).forEach( (s) => {
6 | let [key, value] = s.split(/=/);
7 | cookie[key] = value;
8 | });
9 |
10 | this.contestant = false;
11 | if( "__privilege" in cookie && cookie.__privilege === "contestant"){
12 | this.contestant = true;
13 | this.user_screen_name = cookie._user_screen_name;
14 | this.user_id = Number( cookie._user_id );
15 | }
16 | console.log(this);
17 | }
18 | }
19 |
20 | const me = new UserInfo();
21 |
22 | export default me;
23 |
--------------------------------------------------------------------------------
/src/util.js:
--------------------------------------------------------------------------------
1 | function getStandings( callback, initialize ){
2 | const reg = /\s*data:\s(\[.*\]),/;
3 |
4 | if(initialize){
5 | const scriptText = $("html").find('script[type="text/JavaScript"]').text().split("\n");
6 |
7 | scriptText.forEach( (txt) => {
8 | const res = reg.exec(txt);
9 | if(res !== null){
10 | const newStandings = JSON.parse(res[1]);
11 | callback( newStandings );
12 | }
13 | });
14 | }else{
15 | $.ajax( {url: "./standings"} ).done( (html) => {
16 | const scriptText = $(html).find('script[type="text/JavaScript"]').text().split("\n");
17 | scriptText.forEach( (txt) => {
18 | const res = reg.exec(txt);
19 | if(res !== null){
20 | console.log( "successfully got new standings : ", res[1] );
21 | const newStandings = JSON.parse(res[1]);
22 | callback( newStandings );
23 | }
24 | });
25 | });
26 | }
27 | }
28 |
29 | function getSortingFunction( key ){
30 | // task{i}
31 | if( key.slice(0,4) == "task" ){
32 | let id = Number( key.slice(4) );
33 | return (l,r) => {
34 | if( l.tasks[id].score === undefined && r.tasks[id].score === undefined ) return 0;
35 | if( l.tasks[id].score === undefined ) return -1;
36 | if( r.tasks[id].score === undefined ) return 1;
37 | if( l.tasks[id].score !== r.tasks[id].score ){
38 | return Number(l.tasks[id].score) < Number(r.tasks[id].score) ? -1 : 1;
39 | }else{
40 | if( l.tasks[id].penalty !== r.tasks[id].penalty ){
41 | return Number(l.tasks[id].penalty) > Number(r.tasks[id].penalty) ? -1 : 1;
42 | }else{
43 | return 0;
44 | }
45 | }
46 | };
47 | }
48 | if( key == "user_screen_name" ){
49 | return (l,r) =>{
50 | if( l[key].toLowerCase() !== r[key].toLowerCase() ){
51 | return l[key].toLowerCase() < r[key].toLowerCase() ? -1 : 1;
52 | }else{
53 | return 0;
54 | }
55 | };
56 | }
57 |
58 | if( key == "time" ){
59 | return (l,r) =>{
60 | if( l.score !== r.score ) return Number(l.score) > Number(r.score) ? -1 : 1;
61 | else if(l.elapsed_time !== r.elapsed_time) return Number(l.elapsed_time) < Number(r.elapsed_time) ? -1 : 1;
62 | return 0;
63 | };
64 | }
65 |
66 | return (l,r) => {
67 | if( l[key] !== r[key] ){
68 | return (l[key]) < (r[key]) ? -1 : 1;
69 | }else{
70 | return 0;
71 | }
72 | };
73 | }
74 |
75 | class Rating{
76 | constructor(){
77 | //[lb, ub)
78 | this.lb = [
79 | -1, 0, 1, 400, 800, 1200, 1600, 2000, 2400, 2800
80 | ];
81 | this.ub = [
82 | 0, 1, 400, 800, 1200, 1600, 2000, 2400, 2800, 5000
83 | ];
84 |
85 | this.color = [
86 | "rgba(192,0,192, 0.5)", // "#C000C0",
87 | "rgba(0,0,0, 0.5)", // "#000000",
88 | "rgba(128,128,128, 0.5)", // "#808080",
89 | "rgba(128,64,0, 0.5)", // "#804000",
90 | "rgba(0,128,0, 0.5)", // "#008000",
91 | "rgba(0,192,192, 0.5)", // "#00C0C0",
92 | "rgba(0,0,255, 0.5)", // "#0000FF",
93 | "rgba(192,192,0, 0.5)", // "#C0C000",
94 | "rgba(255,128,0, 0.5)", // "#FF8000",
95 | "rgba(255,0,0, 0.5)" // "#FF0000"
96 | ];
97 |
98 | this.colorOriginal = [
99 | "#C000C0",
100 | "#000000",
101 | "#808080",
102 | "#804000",
103 | "#008000",
104 | "#00C0C0",
105 | "#0000FF",
106 | "#C0C000",
107 | "#FF8000",
108 | "#FF0000"
109 | ];
110 |
111 | this.userColor = [
112 | "user-admin", // "#C000C0",
113 | "user-unrated", // "#000000",
114 | "user-gray", // "#808080",
115 | "user-brown", // "#804000",
116 | "user-green", // "#008000",
117 | "user-cyan", // "#00C0C0",
118 | "user-blue", // "#0000FF",
119 | "user-yellow", // "#C0C000",
120 | "user-orange", // "#FF8000",
121 | "user-red" // "#FF0000"
122 | ];
123 | }
124 |
125 | getLevel(rating){
126 | for(let level=0; level{'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[this.props.task.id]} : {this.props.task.name}
216 |Max Score : {this.maxScore / 100}
217 || Rating | 221 |AC | 222 |Attempted | 223 |Submissions | 224 | {/*AC / Submissions | */} 225 |AC / Attempted | 226 |AC / Contestants | 227 |Fastest | 228 |Average Time | 229 |Average WA | 230 |
|---|
237 |
241 | AC Time Distribution
238 |
242 |
244 |
245 |
262 |
263 | Color Stats
243 || Rating | 247 |AC | 248 |Attempted | 249 |Submissions | 250 | {/*AC / Submissions | */} 251 |AC / Attempted | 252 |AC / Contestants | 253 |Fastest | 254 |Average Time | 255 |Average WA | 256 |
|---|