<commit_before>import React from 'react';
import Api from './api'
import {connect} from 'react-redux';
import {UPDATE_TEAMINFO, UPDATE_SERVEREVENT, UPDATE_CTFCONF, UPDATE_COUNTDOWN, EE} from './store'
import Router from 'react-router';
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;

class Main extends React.Component {
	constructor(props) {
		super(props);
		this.state = {url: "", breakingnews: true, playOnce: false, error: null};
		this.watchServerEvent();
		this.getCTFConfigurations();
	}
	static willTransitionTo(transition) {
		//TODO: check logon status
		var logon = true;
		if (!logon){
			transition.redirect('/login');
		}
	}
	updateTeaminfo() {
		Api.team(this.props.userinfo.team, (json) => {
			this.props.updateTeaminfo(json);
		}, (mes) => {
			this.setState({
				error: mes
			});
		})
	}
	getCTFConfigurations() {
		Api.configurations((json) => {
			this.props.updateCTFConfigurations(json);
		}, (mes) => {
			this.setState({
				error: mes
			});
		})
	}
	watchServerEvent() {
		var socket = require('socket.io-client');
		var io = socket('https://score.sakura.tductf.org/', {
				secure: true,
				transports: ["websocket"]
				});
		io.on('connect', () => {
			console.log("Socket.io connected!")
		});
		io.on('event', (data) => {
			switch (data.type) {
				case "update":
					this.props.onReceiveServerEvent(data);
					switch (data.model) {
						case "notice":
							setTimeout(function() {
								Api.announcement(data.id, (json) => {
									var n = new Notification('TDUCTF 2015 - Announcements', {
										body: json.title
									});
									n.onclick = () => {
										this.context.router.transitionTo("announcements");
									};
								}, (mes) => {
									var n = new Notification('TDUCTF 2015 - Announcements', {
										body: 'New 1 announcement'
									});
									n.onclick = () => {
										this.context.router.transitionTo("announcements");
									};
								})
							}, ~~(Math.random() * 1000));
							break;
						case "question":
							var n = new Notification('TDUCTF 2015 - Problems', {
								body: 'New 1 problem update'
							});
							n.onclick = () => {
								this.context.router.transitionTo("problems");
							};
							break;
					}
					break;
				case "answer":
					if (data.team === this.props.userinfo.team) {
						this.updateTeaminfo();
					}
					break;
				case "youtube":
					this.setState({url: "http://www.youtube.com/embed/" + data["video_id"] + "?autoplay=1"});
					if (!this.state.breakingnews) {
						var n = new Notification('TDUCTF 2015', {
							body: 'Breaking news!'
						});
						n.onclick = () => {
							this.setState({playOnce: true});
						};
					}
					break;
				default:
					console.log(JSON.stringify(data));
			}
			this.setState({
				render: new Date()
			});
		}.bind(this));
		io.on('disconnect', () => {
			console.warn("Socket.io disconnected.");
		});
	}
	componentWillMount() {
		document.body.style.backgroundColor = "#1abc9c";
		setInterval(() => {
			if (!!this.props.start && !!this.props.end) {
				const now = new Date();
				const diff = new Date(this.props.end - now);
				const h = Math.round(diff.getTime() / 1000 / 3600);
				const time = diff.toUTCString().replace(/^.*\d\d:(\d\d:\d\d).*$/,'$1');
				const m = time.replace(/^(\d\d):\d\d$/,'$1');
				const s = time.replace(/^\d\d:(\d\d)$/,'$1');
				this.props.updateCountdown(h, m, s);
			}
		}.bind(this), 1000);
		Api.setCriticalAction((() => {this.context.router.transitionTo("login", {}, {message: "You need to re-login."})}.bind(this)));
	}
	componentWillUnmount() {
		document.body.style.backgroundColor = null;
	}
	unsetBreakingnews() {
		this.setState({url: null, breakingnews: false})
	}
	closeBreakingnewsModal() {
		this.setState({url: null, playOnce: false})
	}
	closeEEModal() {
		this.props.resetEE();
	}
	clearError() {
		this.setState({
			error: null
		});
	}
	render() {
		var mainStyle = {
			height: "100%",
			padding: "20px",
			paddingLeft: "220px",
		};
		var maxSize = {
			maxHeight: "100%",
			maxWidth: "100%",
		};
		var fullSize = {
			height: "100%",
			width: "100%",
		};
		var centeredModal = {
			height: "70%",
			marginTop: "-20%",
		}
		const {point, solved, events, countdown} = this.props;
		var modal;
		if (this.state.url && (this.state.breakingnews || this.state.playOnce)) {
			modal = (
					<div className="ui dimmer modals page transition visible active">
						<div className="ui small basic test modal transition visible active" style={centeredModal}>
							<i className="icon close" onClick={this.closeBreakingnewsModal.bind(this)}></i>
							<iframe src={this.state.url} frameBorder="0" style={fullSize}/>
							<div className="ui container">
								<div className="ui checkbox" onClick={this.unsetBreakingnews.bind(this)}>
									<div className="ui grey tiny header">I'll not watch BREAKING NEWS any more.</div>
								</div>
							</div>
						</div>
					</div>
					);
		} else if (this.props.ee) {
			modal = (
					<div className="ui dimmer modals page transition visible active" onClick={this.closeEEModal.bind(this)}>
						<div className="ui small basic test modal transition visible active" style={centeredModal} onClick={this.closeEEModal.bind(this)}>
							<img src="./res/alternative-icon.png" style={maxSize} alt="alternative-icon" onClick={this.closeEEModal.bind(this)} />
						</div>
					</div>
					);
		}<commit_msg>Fix BREAKING NEWS iframe layout<commit_after>import React from 'react';
import Api from './api'
import {connect} from 'react-redux';
import {UPDATE_TEAMINFO, UPDATE_SERVEREVENT, UPDATE_CTFCONF, UPDATE_COUNTDOWN, EE} from './store'
import Router from 'react-router';
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;

class Main extends React.Component {
	constructor(props) {
		super(props);
		this.state = {url: "", breakingnews: true, playOnce: false, error: null};
		this.watchServerEvent();
		this.getCTFConfigurations();
	}
	static willTransitionTo(transition) {
		//TODO: check logon status
		var logon = true;
		if (!logon){
			transition.redirect('/login');
		}
	}
	updateTeaminfo() {
		Api.team(this.props.userinfo.team, (json) => {
			this.props.updateTeaminfo(json);
		}, (mes) => {
			this.setState({
				error: mes
			});
		})
	}
	getCTFConfigurations() {
		Api.configurations((json) => {
			this.props.updateCTFConfigurations(json);
		}, (mes) => {
			this.setState({
				error: mes
			});
		})
	}
	watchServerEvent() {
		var socket = require('socket.io-client');
		var io = socket('https://score.sakura.tductf.org/', {
				secure: true,
				transports: ["websocket"]
				});
		io.on('connect', () => {
			console.log("Socket.io connected!")
		});
		io.on('event', (data) => {
			switch (data.type) {
				case "update":
					this.props.onReceiveServerEvent(data);
					switch (data.model) {
						case "notice":
							setTimeout(function() {
								Api.announcement(data.id, (json) => {
									var n = new Notification('TDUCTF 2015 - Announcements', {
										body: json.title
									});
									n.onclick = () => {
										this.context.router.transitionTo("announcements");
									};
								}, (mes) => {
									var n = new Notification('TDUCTF 2015 - Announcements', {
										body: 'New 1 announcement'
									});
									n.onclick = () => {
										this.context.router.transitionTo("announcements");
									};
								})
							}, ~~(Math.random() * 1000));
							break;
						case "question":
							var n = new Notification('TDUCTF 2015 - Problems', {
								body: 'New 1 problem update'
							});
							n.onclick = () => {
								this.context.router.transitionTo("problems");
							};
							break;
					}
					break;
				case "answer":
					if (data.team === this.props.userinfo.team) {
						this.updateTeaminfo();
					}
					break;
				case "youtube":
					this.setState({url: "http://www.youtube.com/embed/" + data["video_id"] + "?autoplay=1"});
					if (!this.state.breakingnews) {
						var n = new Notification('TDUCTF 2015', {
							body: 'Breaking news!'
						});
						n.onclick = () => {
							this.setState({playOnce: true});
						};
					}
					break;
				default:
					console.log(JSON.stringify(data));
			}
			this.setState({
				render: new Date()
			});
		}.bind(this));
		io.on('disconnect', () => {
			console.warn("Socket.io disconnected.");
		});
	}
	componentWillMount() {
		document.body.style.backgroundColor = "#1abc9c";
		setInterval(() => {
			if (!!this.props.start && !!this.props.end) {
				const now = new Date();
				const diff = new Date(this.props.end - now);
				const h = Math.round(diff.getTime() / 1000 / 3600);
				const time = diff.toUTCString().replace(/^.*\d\d:(\d\d:\d\d).*$/,'$1');
				const m = time.replace(/^(\d\d):\d\d$/,'$1');
				const s = time.replace(/^\d\d:(\d\d)$/,'$1');
				this.props.updateCountdown(h, m, s);
			}
		}.bind(this), 1000);
		Api.setCriticalAction((() => {this.context.router.transitionTo("login", {}, {message: "You need to re-login."})}.bind(this)));
	}
	componentWillUnmount() {
		document.body.style.backgroundColor = null;
	}
	unsetBreakingnews() {
		this.setState({url: null, breakingnews: false})
	}
	closeBreakingnewsModal() {
		this.setState({url: null, playOnce: false})
	}
	closeEEModal() {
		this.props.resetEE();
	}
	clearError() {
		this.setState({
			error: null
		});
	}
	render() {
		var mainStyle = {
			height: "100%",
			padding: "20px",
			paddingLeft: "220px",
		};
		var maxSize = {
			maxHeight: "100%",
			maxWidth: "100%",
		};
		var centeredModal = {
			height: "70%",
			marginTop: "-20%",
		}
		const {point, solved, events, countdown} = this.props;
		var modal;
		if (this.state.url && (this.state.breakingnews || this.state.playOnce)) {
			modal = (
					<div className="ui dimmer modals page transition visible active">
						<div className="ui small basic test modal transition visible active" style={centeredModal}>
							<i className="icon close" onClick={this.closeBreakingnewsModal.bind(this)}></i>
							<iframe src={this.state.url} frameBorder="0" style={maxSize} width="960" height="540" />
							<div className="ui container">
								<div className="ui checkbox" onClick={this.unsetBreakingnews.bind(this)}>
									<div className="ui grey tiny header">I'll not watch BREAKING NEWS any more.</div>
								</div>
							</div>
						</div>
					</div>
					);
		} else if (this.props.ee) {
			modal = (
					<div className="ui dimmer modals page transition visible active" onClick={this.closeEEModal.bind(this)}>
						<div className="ui small basic test modal transition visible active" style={centeredModal} onClick={this.closeEEModal.bind(this)}>
							<img src="./res/alternative-icon.png" style={maxSize} alt="alternative-icon" onClick={this.closeEEModal.bind(this)} />
						</div>
					</div>
					);
		}
{'fraction_non_alphanumeric': 0.1762235208181154, 'fraction_numerical': 0.011869978086194303, 'mean_word_length': 2.890941385435169, 'pattern_counts': {'":': 10, '<': 39, '<?xml version=': 0, '>': 69, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '859001', 'n_tokens_mistral': 4801, 'n_tokens_neox': 3638, 'n_words': 734}