stannehill/blogpost-socketio-frontend

## blogpost-socketio-frontend
<!DOCTYPE html>
<html>
<head>
    <title>socket.io Test</title>
    <style>
        html {
            background: url('http://166.78.51.174/woodfloor.png') no-repeat 0 0 scroll;
            background-color: #0C0C0C;
            background-size: 100% 100%;
            height: 100%;
            width: 100%;
        }

        #target {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #4a90b8;
            border: 1px solid #666;
            box-shadow: 0px 10px 10px #333;
            margin: 0 auto;
            top: 60%;
            left: 46%;
            position: absolute;
        }

        h1 {
            font-family: Century Gothic, sans-serif;
            font-size: 200px;
            text-align: center;
            color: transparent;
            text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.15);
        }
    </style>
    <script src="/socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        var socket = io.connect('http://localhost:4000');
        socket.on('connect', function () {

            socket.on('return', function (data) {
                $('#target').animate({top: '500', opacity: 1}, 3000);
            });

            socket.on('player', function(data){
                if(data.player !== 0){
                    $('#target').css({"top": '-220px',"opacity": "0.1"});
                }
            });
        });
    </script>
    <script>
        $(function () {
            $('#target').click(function () {
                $('#target').animate({top: '-200', opacity: 0.1}, 3000, function () {
                    socket.emit('volley', {'text': 'Shot made to server...'});
                });
            });
        });
    </script>
</head>
<body>
<h1>Litmusbox</h1>

<div id="target"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>socket.io Test</title>
	<style>
	html {
	background: url('http://166.78.51.174/woodfloor.png') no-repeat 0 0 scroll;
	background-color: #0C0C0C;
	background-size: 100% 100%;
	height: 100%;
	width: 100%;
	}

	#target {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: #4a90b8;
	border: 1px solid #666;
	box-shadow: 0px 10px 10px #333;
	margin: 0 auto;
	top: 60%;
	left: 46%;
	position: absolute;
	}

	h1 {
	font-family: Century Gothic, sans-serif;
	font-size: 200px;
	text-align: center;
	color: transparent;
	text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.15);
	}
	</style>
	<script src="/socket.io/socket.io.js"></script>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script>
	var socket = io.connect('http://localhost:4000');
	socket.on('connect', function () {

	socket.on('return', function (data) {
	$('#target').animate({top: '500', opacity: 1}, 3000);
	});

	socket.on('player', function(data){
	if(data.player !== 0){
	$('#target').css({"top": '-220px',"opacity": "0.1"});
	}
	});
	});
	</script>
	<script>
	$(function () {
	$('#target').click(function () {
	$('#target').animate({top: '-200', opacity: 0.1}, 3000, function () {
	socket.emit('volley', {'text': 'Shot made to server...'});
	});
	});
	});
	</script>
	</head>
	<body>
	<h1>Litmusbox</h1>

	<div id="target"></div>
	</body>
	</html>