<html>
<head>
	<title>Hugougo</title>
	<style>
		a {text-decoration: none;}
		html, body { margin:0; }
	</style>
</head>
<body>

<script src="/socket.io/socket.io.js"></script>
<script>
document.body.style.backgroundColor = 'transparent';
document.body.style.opacity = '1';
let player = document.createElement('h1');
player.style = 'position:relative;top:5%;width:100%;text-align:center;color:white;font-size:30px; font-family:Calibri;';
player.innerHTML = 'Napisz !hugo aby zagrać';
let buttons = document.createElement('div');
buttons.style = 'position:relative;width:100%;margin:0;visibility:hidden;top:3%;';

const socket = io();

socket.on('button', (data) => {
	let b = document.createElement('div');
	b.innerHTML = data;
	b.style = 'position:relative;border: 2px solid #ffd700;text-align:center;border-radius: 50px;color:#ffd700;font-size:30px; font-family:Calibri;display: block; margin-left: auto; margin-right: auto;';
	b.style['margin-top'] = (window.innerHeight/30)+'px';
	b.style['margin-bottom'] = (window.innerHeight/30)+'px';
	buttons.prepend(b);
	b.style['height'] = (window.innerHeight/15)+'px';
	b.style['width'] = (window.innerWidth/12)+'px';
	b.style['line-height'] = ((b.style['height']+b.style['width'])/1.5)+'px';
});
socket.on('start', (data) => {
	if(data.flag == 1) {
		player.innerHTML = 'Teraz gra: ' + data.nickname;
		buttons.style['visibility'] = 'visible';
	} else {
		buttons.style['visibility'] = 'hidden';
		buttons.innerHTML = '';
		player.innerHTML = 'Napisz !hugo aby zagrać';
	}
});

document.body.append(player);
document.body.append(buttons);

this.hugoS = function (data) {
	if(data[0] == 1) {
		player.innerHTML = 'Teraz gra: ' + data[1];
		buttons.style['visibility'] = 'visible';
	} else {
		buttons.style['visibility'] = 'hidden';
		buttons.innerHTML = '';
		player.innerHTML = 'Napisz !hugo aby zagrać';
	}
}
this.hugoB = function (data) {
	let a = document.createElement('div');
	let b = document.createElement('div');
	b.innerHTML = data;
	a.style = 'display: block; margin-left: auto; margin-right: auto;height: 6%; background-color: rgb(244, 88, 10);border: 3px solid black;border-radius: 3px;margin-top:1%;margin-bottom:1%';
	if(window.innerWidth < 200)
		a.style['width'] = '20%';
	else if(window.innerWidth < 300)
		a.style['width'] = '15%';
	else if(window.innerWidth < 500)
		a.style['width'] = '10%';
	else if(window.innerWidth < 800)
		a.style['width'] = '7%';
	else
		a.style['width'] = '6%';
	b.style = 'display: block; margin-left: auto; margin-right: auto;top:50%; transform: translateY(-50%);position: relative; text-align: center; border-radius: 50px; background-color: rgb(40, 40, 40); font-size: 185%;line-height: -1%;font-family: Calibri;color:white;width:90%;height:90%;';

	a.append(b);
	buttons.prepend(a);
}

player.onmouseenter = function () {
	player.style['background-color'] = 'gray';
};
player.onmouseleave = function () {
	player.style['background-color'] = '';
};

buttons.onmouseenter = function() {
	buttons.style['background-color'] = 'gray';
}
buttons.onmouseleave = function() {
	buttons.style['background-color'] = '';
}

let bodyDance;
let r = Math.random()*1000;
let g = Math.random()*1000;
let b = Math.random()*1000;
document.body.onclick = function (e) {
	if(e.path.length < 5) {
		console.log('start bodyDance');
		let i=0;
		setInterval( function() {
			/*
			Math.abs(Math.sin(i*r/10))*60+15
			Math.abs(Math.sin(i*r/10))*165+180
			Math.abs(Math.sin(i*b/10))*60+15
			*/
			document.body.setAttribute('style','background-color: rgb('+ Math.abs(Math.sin(i*r/10))*60+15 +','+Math.abs(Math.sin(i*g/10))*165+180+','+Math.abs(Math.sin(i*b/10))*60+15+')');
			i++;
		}, 100);
	} else {
		let index = e.path.length - 5;
		/*if(e.path[index].tagName == 'DIV')
			// guziki
		else if (e.path[index].tagName == 'H1')
			// player
		*/
	}
};

/*
R: 15-90
G: 180-255
B: 15-90
*/

</script>

</body>
</html>