40 |
57 | );
58 | });
59 | if (!contents) contents =
41 |
42 |
43 |
44 |
56 |
45 | {announcement["title"]}
46 |
50 |
47 | {new Date(announcement["updated_at"]).toTimeString()}
48 |
49 |
51 | {md2react(announcement["body"], {gfm: true, tables: true})}
52 |
53 |
54 |
55 | No announcement
60 | var errorMessage;
61 | if (this.state.error) {
62 | errorMessage = (
63 |
64 |
65 |
70 | );
71 | }
72 | return (
73 |
66 | Error
67 |
68 | {this.state.error[0]}
69 |
74 |
82 | );
83 | }
84 | };
85 |
86 | export default connect(
87 | (state) => ({
88 | announcements: state.announcements
89 | }),
90 | (dispatch) => ({
91 | updateAnnouncements: (data) => dispatch({type: UPDATE_ANNOUNCEMENTS, data: data}),
92 | resetEvents: () => dispatch({type: RESET_EVENTS, data: "announcements"})
93 | })
94 | )(Announcements);
95 |
--------------------------------------------------------------------------------
/src/pages/dashboard.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Api from '../api/api'
3 | import {connect} from 'react-redux';
4 | import {UPDATE_TEAMLIST} from '../data/store'
5 |
6 | class Dashboard extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | error: null
11 | };
12 | }
13 | componentWillMount() {
14 | // Tap tap API server
15 | Api.teamlist((json) => {
16 | this.props.updateTeamlist(json);
17 | }, (mes) => {
18 | this.setState({
19 | error: mes
20 | });
21 | })
22 | this.timer = setInterval(() => {
23 | this.setState({now: new Date()})
24 | }.bind(this), 1000);
25 | }
26 | componentWillUnmount() {
27 | clearInterval(this.timer);
28 | }
29 | clearError() {
30 | this.setState({
31 | error: null
32 | });
33 | }
34 | render() {
35 | const {point, solved, teamlist, ranking, countdown} = this.props;
36 | var errorMessage;
37 | if (this.state.error) {
38 | errorMessage = (
39 | Last updated: {this.state.updated}
75 |
76 | {contents}
77 |
78 |
79 |
80 | {errorMessage}
81 |
40 |
41 |
46 | );
47 | }
48 | return (
49 |
42 | Error
43 |
44 | {this.state.error[0]}
45 |
50 |
123 | );
124 | }
125 | };
126 |
127 | export default connect(
128 | (state) => ({
129 | solved: state.solved,
130 | point: state.point,
131 | teamlist: state.teamList,
132 | ranking: state.ranking,
133 | start: state.config.start,
134 | end: state.config.end,
135 | countdown: state.countdown
136 | }),
137 | (dispatch) => ({updateTeamlist: (data) => dispatch({type: UPDATE_TEAMLIST, data: data})})
138 | )(Dashboard);
139 |
--------------------------------------------------------------------------------
/src/pages/login.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Api from '../api/api'
3 | import {connect} from 'react-redux';
4 | import {UPDATE_USERINFO} from '../data/store'
5 |
6 | class Login extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | username: "",
11 | password: "",
12 | login_pending: false,
13 | signup_pending: false,
14 | error: false,
15 | message: "",
16 | success: false
17 | };
18 | }
19 | componentWillMount() {
20 | document.body.style.backgroundColor = "#f7c5d2";
21 | if (this.props && this.props.query && this.props.query.message) {
22 | this.setState({
23 | error: true,
24 | message: this.props.query.message
25 | });
26 | }
27 | }
28 | componentWillUnmount() {
29 | document.body.style.backgroundColor = null;
30 | }
31 | changeText(e) {
32 | var value = {}
33 | value[e.target.name] = e.target.value;
34 | this.setState(value);
35 | }
36 | tryLogin() {
37 | this.setState({
38 | login_pending: true,
39 | error: false,
40 | success: false
41 | });
42 |
43 | Api.login(this.state.username, this.state.password, (userinfo) => {
44 | this.props.saveUserinfo(userinfo);
45 | this.context.router.transitionTo("dashboard");
46 | }, (mes) => {
47 | this.setState({
48 | login_pending: false,
49 | error: true,
50 | message: mes[0]
51 | });
52 | })
53 | }
54 | signUp() {
55 | this.setState({
56 | signup_pending: true,
57 | error: false,
58 | success: false
59 | });
60 |
61 | Api.signup(this.state.username, this.state.password, (userinfo) => {
62 | this.setState({
63 | signup_pending: false,
64 | success: true
65 | });
66 | React.render(Countdown
51 |
52 |
79 |
53 |
78 |
54 |
61 |
55 | {countdown.h || 'n/a'}
56 |
57 |
58 | Hours
59 |
60 |
62 |
69 |
63 | {countdown.m || 'n/a'}
64 |
65 |
66 | Minutes
67 |
68 |
70 |
77 |
71 | {countdown.s || 'n/a'}
72 |
73 |
74 | Seconds
75 |
76 | Statistics
80 |
81 |
121 | {errorMessage}
122 |
82 |
94 |
83 |
93 |
84 |
92 | Ranking
85 |
86 | {ranking}
87 |
88 |
89 | of {teamlist.length}
90 |
91 |
95 |
107 |
96 |
106 |
97 |
105 | Score
98 |
99 | {point}
100 |
101 |
102 | points
103 |
104 |
108 |
120 |
109 |
119 |
110 |
118 | Flags
111 |
112 | {solved}
113 |
114 |
115 | captured
116 |
117 | New account created
Press "Login" to start CTF!
88 |
121 | );
122 | }
123 | };
124 | Login.contextTypes = {
125 | router: React.PropTypes.func.isRequired
126 | };
127 |
128 | export default connect(
129 | (state) => ({}),
130 | (dispatch) => ({saveUserinfo: (data) => dispatch({type: UPDATE_USERINFO, data: data})})
131 | )(Login);
132 |
--------------------------------------------------------------------------------
/src/pages/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Api from '../api/api'
3 | import {connect} from 'react-redux';
4 | import {UPDATE_TEAMINFO, UPDATE_SERVEREVENT, UPDATE_CTFCONF, UPDATE_COUNTDOWN, EE} from '../data/store'
5 | import Router from 'react-router';
6 | var DefaultRoute = Router.DefaultRoute;
7 | var Link = Router.Link;
8 | var Route = Router.Route;
9 | var RouteHandler = Router.RouteHandler;
10 |
11 | class Main extends React.Component {
12 | constructor(props) {
13 | super(props);
14 | this.state = {url: "", breakingnews: true, playOnce: false, error: null};
15 | this.watchServerEvent();
16 | this.getCTFConfigurations();
17 | }
18 | static willTransitionTo(transition) {
19 | //TODO: check logon status
20 | var logon = true;
21 | if (!logon){
22 | transition.redirect('/login');
23 | }
24 | }
25 | updateTeaminfo() {
26 | Api.team(this.props.userinfo.team, (json) => {
27 | this.props.updateTeaminfo(json);
28 | }, (mes) => {
29 | this.setState({
30 | error: mes
31 | });
32 | })
33 | }
34 | getCTFConfigurations() {
35 | Api.configurations((json) => {
36 | this.props.updateCTFConfigurations(json);
37 | }, (mes) => {
38 | this.setState({
39 | error: mes
40 | });
41 | })
42 | }
43 | watchServerEvent() {
44 | var socket = require('socket.io-client');
45 | var io = socket('SCORE_SERVER_URL', {
46 | secure: true,
47 | transports: ["websocket"]
48 | });
49 | io.on('connect', () => {
50 | console.log("Socket.io connected!")
51 | });
52 | io.on('event', (data) => {
53 | switch (data.type) {
54 | case "update":
55 | this.props.onReceiveServerEvent(data);
56 | switch (data.model) {
57 | case "notice":
58 | setTimeout(function() {
59 | Api.announcement(data.id, (json) => {
60 | var n = new Notification('Lepus-CTF - Announcements', {
61 | body: json.title
62 | });
63 | n.onclick = () => {
64 | this.context.router.transitionTo("announcements");
65 | }.bind(this);
66 | }.bind(this), (mes) => {
67 | var n = new Notification('Lepus-CTF - Announcements', {
68 | body: 'New 1 announcement'
69 | });
70 | n.onclick = () => {
71 | this.context.router.transitionTo("announcements");
72 | }.bind(this);
73 | }.bind(this))
74 | }.bind(this), ~~(Math.random() * 1000));
75 | break;
76 | case "question":
77 | console.log(JSON.stringify(data));
78 | setTimeout(function() {
79 | Api.problem(data.id, (json) => {
80 | var n = new Notification('Lepus-CTF - Problems', {
81 | body: json.title + ' updated'
82 | });
83 | n.onclick = () => {
84 | this.context.router.transitionTo("problems");
85 | }.bind(this);
86 | }.bind(this), (mes) => {
87 | var n = new Notification('Lepus-CTF - Problems', {
88 | body: 'New 1 problem update'
89 | });
90 | n.onclick = () => {
91 | this.context.router.transitionTo("problems");
92 | }.bind(this);
93 | }.bind(this))
94 | }.bind(this), ~~(Math.random() * 1000));
95 | break;
96 | }
97 | break;
98 | case "answer":
99 | if (data.team === this.props.userinfo.team) {
100 | this.updateTeaminfo();
101 | }
102 | break;
103 | case "youtube":
104 | this.setState({url: "https://www.youtube.com/embed/" + data["video_id"] + "?autoplay=1&controls=0&fs=0&showinfo=0&rel=0&disablekb=1&modestbranding=1"});
105 | if (!this.state.breakingnews) {
106 | var n = new Notification('Lepus-CTF', {
107 | body: 'Breaking news!'
108 | });
109 | n.onclick = () => {
110 | this.setState({playOnce: true});
111 | };
112 | }
113 | break;
114 | default:
115 | console.log(JSON.stringify(data));
116 | }
117 | this.setState({
118 | render: new Date()
119 | });
120 | }.bind(this));
121 | io.on('disconnect', () => {
122 | console.warn("Socket.io disconnected.");
123 | });
124 | }
125 | componentWillMount() {
126 | document.body.style.backgroundColor = "#1abc9c";
127 | setInterval(() => {
128 | if (!!this.props.start && !!this.props.end) {
129 | const now = new Date();
130 | if (now - this.props.start < 0) {
131 | return;
132 | } else if (this.props.end - now < 0) {
133 | this.props.updateCountdown(null, null, null);
134 | return;
135 | }
136 | const diff = new Date(this.props.end - now);
137 | const time = diff.toUTCString().replace(/^.*(\d\d:\d\d:\d\d).*$/,'$1');
138 | const h = time.replace(/^(\d\d):\d\d:\d\d$/,'$1');
139 | const m = time.replace(/^\d\d:(\d\d):\d\d$/,'$1');
140 | const s = time.replace(/^\d\d:\d\d:(\d\d)$/,'$1');
141 | this.props.updateCountdown(h, m, s);
142 | }
143 | }.bind(this), 1000);
144 | Api.setCriticalAction((() => {this.context.router.transitionTo("login", {}, {message: "You need to re-login."})}.bind(this)));
145 | }
146 | componentWillUnmount() {
147 | document.body.style.backgroundColor = null;
148 | }
149 | unsetBreakingnews() {
150 | this.setState({url: null, breakingnews: false})
151 | }
152 | closeBreakingnewsModal() {
153 | this.setState({url: null, playOnce: false})
154 | }
155 | closeEEModal() {
156 | this.props.resetEE();
157 | }
158 | clearError() {
159 | this.setState({
160 | error: null
161 | });
162 | }
163 | render() {
164 | var mainStyle = {
165 | height: "100%",
166 | padding: "20px",
167 | paddingLeft: "220px",
168 | };
169 | var maxSize = {
170 | maxHeight: "100%",
171 | maxWidth: "100%",
172 | };
173 | var centeredModal = {
174 | height: "70%",
175 | marginTop: "-20%",
176 | }
177 | const {point, solved, events, start, end, countdown} = this.props;
178 | var modal;
179 | if (this.state.url && (this.state.breakingnews || this.state.playOnce)) {
180 | modal = (
181 |
89 | 
90 |
91 |
95 |
119 |
120 |
90 |
91 |
92 | Welcome to Lepus-CTF
93 |
94 |
95 |
119 |
182 |
192 | );
193 | } else if (this.props.ee) {
194 | modal = (
195 |
183 |
184 |
185 |
191 |
186 |
190 |
187 |
189 | I'll not watch BREAKING NEWS any more.
188 |
196 |
200 | );
201 | }
202 | var count = "Countdown";
203 | const now = new Date();
204 | if (now - start < 0) {
205 | count = start.toString().replace(/^.*(\d\d:\d\d):\d\d.*$/,'$1') + " start."
206 | } else if (end - now < 0) {
207 | count = end.toString().replace(/^.*(\d\d:\d\d):\d\d.*$/,'$1') + " closed."
208 | } else if (countdown.h) {
209 | count = countdown.h + ':' + countdown.m + ':' + countdown.s;
210 | }
211 | var errorMessage;
212 | if (this.state.error) {
213 | errorMessage = (
214 |
197 | 
198 |
199 |
198 |
215 |
216 |
221 | );
222 | }
223 | return (
224 |
217 | Error
218 |
219 | {this.state.error[0]}
220 |
225 |
271 | );
272 | }
273 | };
274 | Main.contextTypes = {
275 | router: React.PropTypes.func.isRequired
276 | };
277 |
278 |
279 | export default connect(
280 | (state) => ({
281 | userinfo: state.userInfo,
282 | point: state.point,
283 | solved: state.solved,
284 | events: state.events,
285 | start: state.config.start,
286 | end: state.config.end,
287 | ee: state.easteregg,
288 | countdown: state.countdown
289 | }),
290 | (dispatch) => ({
291 | updateTeaminfo: (data) => dispatch({type: UPDATE_TEAMINFO, data: data}),
292 | onReceiveServerEvent: (data) => dispatch({type: UPDATE_SERVEREVENT, data: data}),
293 | updateCTFConfigurations: (data) => dispatch({type: UPDATE_CTFCONF, data: data}),
294 | updateCountdown: (h, m, s) => dispatch({type: UPDATE_COUNTDOWN, data: {h, m, s}}),
295 | resetEE: () => dispatch({type: EE, data: false}),
296 | })
297 | )(Main);
298 |
--------------------------------------------------------------------------------
/src/pages/problem.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Router from 'react-router';
3 | import Api from '../api/api'
4 | import {connect} from 'react-redux';
5 | import {UPDATE_A_PROBLEM, EE} from '../data/store'
6 | global.React = React;
7 | var md2react = require('md2react');
8 | var remote = require('remote');
9 | var dialog = remote.require('dialog');
10 | var clipboard = remote.require('clipboard');
11 | var fs = remote.require('fs');
12 | var Link = Router.Link;
13 |
14 | class Problem extends React.Component {
15 | constructor(props) {
16 | super(props);
17 | this.state = {
18 | copiedLink: "",
19 | flagText: "",
20 | downloading: {},
21 | pending: false,
22 | failed: false,
23 | correct: false,
24 | error: null,
25 | answerCount: 0
26 | };
27 | }
28 | componentWillMount() {
29 | // Tap tap API server
30 | Api.problem(this.props.params.id, (json) => {
31 | this.props.updateAProblem(json);
32 | }, (mes) => {
33 | this.setState({
34 | error: mes
35 | });
36 | })
37 | }
38 | changeText(e) {
39 | var value = {}
40 | value[e.target.name] = e.target.value;
41 | this.setState(value);
42 | }
43 | submitFlag() {
44 | this.setState({
45 | pending: true,
46 | failed: false
47 | });
48 |
49 | console.log(this.state.flagText);
50 | Api.submitFlag(this.props.params.id, this.state.flagText, () => {
51 | this.setState({
52 | correct: true
53 | });
54 | React.render(
227 |
268 | {modal}
269 | {errorMessage}
270 |
228 |
230 | Lepus-CTF
229 |
231 |
235 | 232 | {count} 233 |
234 |
236 |
255 | Dashboard
256 |
257 | {events.problems > 0 ?
237 |
254 |
238 |
245 |
239 | {point}
240 |
241 |
242 | Points
243 |
244 |
246 |
253 |
247 | {solved}
248 |
249 |
250 | Solved
251 |
252 | {events.problems}
: "" }
258 | Problems
259 |
260 |
261 | Ranking
262 |
263 |
264 | {events.announcements > 0 ? {events.announcements}
: "" }
265 | Announcements
266 |
267 | Congratulations
{this.state.flagText} is correct!!
Failed
{mes[0]}
Cannot find a problem.
);
120 | var problem_status = {};
121 | if (teaminfo && teaminfo.questions) {
122 | teaminfo.questions.forEach((t_state) => {
123 | if (problem.id == t_state.id) {
124 | problem_status = t_state;
125 | }
126 | }.bind(this))
127 | }
128 | var progress = Math.round(~~problem_status.points / problem["points"] * 100);
129 | var progressStyle = {
130 | width: progress + "%"
131 | };
132 | var attachments = problem["files"].map((file) => {
133 | var button;
134 | if (file["size"] > 5 * 1024 * 1024) { // 5MB
135 | button = (
136 |
137 |
141 |
142 | );
143 | } else {
144 | button = (
145 |
146 |
150 |
153 |
154 | );
155 | }
156 | return (
157 |
158 | {button}
159 |
161 | );
162 | }.bind(this));
163 | var errorMessage;
164 | if (this.state.error) {
165 | errorMessage = (
166 | {file["size"]} bytes
160 |
167 |
168 |
173 | );
174 | }
175 | return (
176 |
169 | Error
170 |
171 | {this.state.error[0]}
172 |
177 |
218 | );
219 | }
220 | };
221 |
222 | export default connect(
223 | (state) => ({
224 | teaminfo: state.teamInfo,
225 | problems: state.problems
226 | }),
227 | (dispatch) => ({
228 | updateAProblem: (data) => dispatch({type: UPDATE_A_PROBLEM, data: data}),
229 | tooManyWrongAnswer: () => dispatch({type: EE, data: true}),
230 | })
231 | )(Problem);
232 |
--------------------------------------------------------------------------------
/src/pages/problems.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Api from '../api/api'
3 | import {connect} from 'react-redux';
4 | import {UPDATE_PROBLEMS, RESET_EVENTS, SET_VISIBLE_CATEGORY, SET_VISIBLE_LEVEL, SET_HIDDEN_SOLVED} from '../data/store'
5 | import Router from 'react-router';
6 | var Link = Router.Link;
7 |
8 | class Problems extends React.Component {
9 | constructor(props) {
10 | super(props);
11 | this.state = {
12 | searchBoxFocused: false,
13 | error: null
14 | };
15 | }
16 | componentWillMount() {
17 | // Tap tap API server
18 | Api.problems((json) => {
19 | this.props.updateProblems(json);
20 | this.setState();
21 | }, (mes) => {
22 | this.setState({
23 | error: mes
24 | });
25 | })
26 | this.props.resetEvents();
27 | }
28 | toggleSolvedVisibleState(e) {
29 | this.props.hideSolved(e.target.checked);
30 | }
31 | onSearchBoxFocus(e) {
32 | this.setState({
33 | searchBoxFocused: true
34 | })
35 | }
36 | onCategoryClick(e) {
37 | this.props.setVisibleCategory(e.target.getAttribute("data-id"));
38 | this.setState({
39 | searchBoxFocused: false
40 | })
41 | }
42 | onLevelClick(e) {
43 | this.props.setVisibleLevel(e.target.getAttribute("data-id"));
44 | this.setState({
45 | searchBoxFocused: false
46 | })
47 | }
48 | clearCatrgory() {
49 | this.props.setVisibleCategory(-1);
50 | this.setState({
51 | searchBoxFocused: false
52 | })
53 | }
54 | clearError() {
55 | this.setState({
56 | error: null
57 | });
58 | }
59 | render() {
60 | const colors = ["red", "orange", "yellow", "olive", "green", "teal", "blue", "violet", "purple", "pink", "brown", "gray"];
61 | const {teaminfo, solvedTeams, problems, hiddenSolved, visibleCategory, visibleLevel} = this.props;
62 | var problem_status = {};
63 | if (teaminfo.questions) {
64 | teaminfo.questions.forEach((problem) => {
65 | problem_status[problem.id] = problem;
66 | })
67 | }
68 | var maxPoint = -1;
69 | var categories = {};
70 | var cards = [];
71 | for (var id in problems) {
72 | var problem = problems[id];
73 | var difficulty = [];
74 | for (var i = 0; i < problem["points"]; i+=100) {
75 | difficulty.push();
76 | }
77 | maxPoint = maxPoint > problem["points"] ? maxPoint : problem["points"];
78 |
79 | categories[problem["category"]["name"]] = problem["category"]["id"];
80 | if (visibleCategory >= 0 && visibleCategory != problem["category"]["id"]) {
81 | continue
82 | } else if (visibleLevel > 0 && ((visibleLevel * 100) < problem["points"] || ((visibleLevel - 1) * 100) >= problem["points"])) {
83 | continue
84 | }
85 | var solved;
86 | if (problem_status[problem["id"]]) {
87 | if (problem_status[problem["id"]].points == problem["points"]) {
88 | if (hiddenSolved) {
89 | continue
90 | }
91 | solved =
178 | Problems
179 |
180 | {problem["title"]}
181 |
182 |
183 |
201 |
214 |
184 |
200 |
185 | {problem["title"]}
186 |
199 |
187 | {problem["points"]} points
188 |
189 |
190 |
195 |
191 | {problem["category"]["name"]}
192 | {md2react(problem["sentence"], {gfm: true, tables: true})}
193 |
194 |
196 | {attachments}
197 |
198 |
215 |
216 | {errorMessage}
217 | Solved
92 | } else {
93 | solved = {Math.round(problem_status[problem["id"]].points / problem["points"] * 100)}% Solved
94 | }
95 | }
96 | cards.push(
97 |
98 |
123 | );
124 | }
125 | var searchInput = "";
126 | var categoryList = [
127 |
99 | {problem["title"]}
100 |
111 | {problem["category"]["name"]}
101 |
102 |
109 | {solved}
110 |
103 | {problem["points"]}
104 |
105 |
106 | Points
107 |
108 |
112 | Difficulty:
113 | {difficulty}
114 |
115 |
116 |
117 | {~~solvedTeams[problem.id]} teams solved
118 |
119 |
120 |
121 |
122 |
128 |
132 | ];
133 | for (var key in categories) {
134 | categoryList.push(
135 |
129 |
131 | All
130 |
136 |
140 | );
141 | if (visibleCategory == categories[key]) {
142 | searchInput = "Category: " + key;
143 | }
144 | }
145 | var levelList = [
146 |
137 |
139 | {key}
138 |
147 |
151 | ];
152 | for (var i = 100; i <= maxPoint; i += 100) {
153 | var difficulty = [];
154 | for (var j = 0; j < i; j += 100) {
155 | difficulty.push();
156 | }
157 | levelList.push(
158 |
148 |
150 | All
149 |
159 |
163 | );
164 | if (visibleLevel == ~~(i / 100)) {
165 | searchInput = "Difficulty: " + ~~(i / 100);
166 | }
167 | }
168 | var errorMessage;
169 | if (this.state.error) {
170 | errorMessage = (
171 |
160 |
162 | {difficulty}
161 |
172 |
173 |
178 | );
179 | }
180 | return (
181 |
174 | Error
175 |
176 | {this.state.error[0]}
177 |
182 |
217 | );
218 | }
219 | };
220 |
221 | export default connect(
222 | (state) => ({
223 | teaminfo: state.teamInfo,
224 | solvedTeams: state.solvedTeams,
225 | problems: state.problems,
226 | visibleCategory: state.visibleCategory,
227 | visibleLevel: state.visibleLevel,
228 | hiddenSolved: state.hiddenSolved
229 | }),
230 | (dispatch) => ({
231 | updateProblems: (data) => dispatch({type: UPDATE_PROBLEMS, data: data}),
232 | resetEvents: () => dispatch({type: RESET_EVENTS, data: "problems"}),
233 | setVisibleCategory: (data) => dispatch({type: SET_VISIBLE_CATEGORY, data: data}),
234 | setVisibleLevel: (data) => dispatch({type: SET_VISIBLE_LEVEL, data: data}),
235 | hideSolved: (data) => dispatch({type: SET_HIDDEN_SOLVED, data: data}),
236 | })
237 | )(Problems);
238 |
--------------------------------------------------------------------------------
/src/pages/ranking.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Api from '../api/api'
3 | import {connect} from 'react-redux';
4 | import {UPDATE_TEAMLIST} from '../data/store'
5 |
6 | class Ranking extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | updated: null,
11 | error: null
12 | };
13 | }
14 | componentWillMount() {
15 | // Tap tap API server
16 | Api.teamlist((json) => {
17 | this.props.updateTeamlist(json);
18 | this.setState({
19 | updated: Date()
20 | });
21 | }, (mes) => {
22 | this.setState({
23 | error: mes
24 | });
25 | })
26 | }
27 | clearError() {
28 | this.setState({
29 | error: null
30 | });
31 | }
32 | render() {
33 | const {teaminfo, teamlist} = this.props;
34 | var ranking = teamlist.map((team, index) => {
35 | return (
36 |
183 | Problems
184 |
185 |
186 |
210 |
187 |
192 |
188 |
189 |
190 |
191 |
193 |
209 |
194 |
195 |
196 |
197 |
198 |
199 |
208 |
200 |
203 | Category
201 | {categoryList}
202 |
204 |
207 | Level
205 | {levelList}
206 |
211 | {cards}
212 |
213 |
214 |
215 | {errorMessage}
216 |
47 |
48 |
53 | );
54 | }
55 | return (
56 |
49 | Error
50 |
51 | {this.state.error[0]}
52 |
57 |
59 |
60 |
70 |
74 | );
75 | }
76 | };
77 |
78 | export default connect(
79 | (state) => ({
80 | teaminfo: state.teamInfo,
81 | teamlist: state.teamList
82 | }),
83 | (dispatch) => ({updateTeamlist: (data) => dispatch({type: UPDATE_TEAMLIST, data: data})})
84 | )(Ranking);
85 |
--------------------------------------------------------------------------------
/src/pages/top.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Router from 'react-router';
3 | var RouteHandler = Router.RouteHandler;
4 |
5 | export class Top extends React.Component {
6 | render() {
7 | return (
8 | Last updated: {this.state.updated}
58 | | Rank | 62 |Team | 63 |Points | 64 |
|---|
71 |
72 | {errorMessage}
73 |