app.js

Game = {
	canvas: null,
	ctx : null,
	games: [],
	is_first_go_round: true,
	current_game_object : {
		current_player_name: null,
		id: null,
		game_name_and_id : null,
		spectators : [],
		level: null,
		operation: null,
		creator_problem_array : [],
		opponent_problem_array: [],
		current_player_type : null,
		creator_username: null,
		opponent_username: null,
		
	},
	render: function(){
		$('#loadingModal').modal('show');

		Game.canvas = document.getElementById('game');
		Game.canvas.width = 1056;
		Game.canvas.height = 508;
		Game.ctx = Game.canvas.getContext('2d');

		Game.events.keyups();

		$('#bigtab1button').click();
		$('#gamesbutton').click();

		Game.ctx.save();

		
		for(var i = 0; i <= Game.canvas.width; i+=30){
			
			Game.ctx.beginPath();
			Game.ctx.strokeStyle = "rgba(255,255,255, 0.15)";
			Game.ctx.moveTo(i, 0);
			Game.ctx.lineTo(i, Game.canvas.height);
			Game.ctx.moveTo(0, i);
			Game.ctx.lineTo(Game.canvas.width, i);
			Game.ctx.stroke();
			Game.ctx.closePath();
			Game.ctx.restore();
		}
		
	},
	events : {
		keyups: function() {
			$('#answer-element').on('keydown', function(event){
				if (event.keyCode == 13){
					answer = $('#answer-element').val();
					if (Data.player_name == Game.creator.username){
						Game.send_answer(Game.creator, answer);
					}else{
						Game.send_answer(Game.opponent, answer);
					}
					
				}
			})
		},
	},
	ready_or_unready : function(){
		if ($('#ready_text_el').text() == 'Ready?'){
			Game.ready_current_player(true)
		}else if($('#ready_text_el').text() == 'Unready'){
			Game.ready_current_player(false)
		}
	},
	reset_ready_icon: function(){

		//only vanilla js works for this
		var $ready_el = document.getElementById('ready');
		$ready_el_icon = $('#ready_el_icon');
		$ready_el_icon.removeClass('fa-minus').addClass('fa-thumbs-up');
		$ready_text_el = $('#ready_text_el');
		$('#ready_text_el').text('Ready?');
		
	},
	ready_current_player: function(is_ready){
		if(is_ready){
			var $ready_el = $('#ready');
			$ready_el_icon = $('#ready_el_icon');
			$ready_el_icon.removeClass('fa-thumbs-up').addClass('fa-minus');
			$ready_text_el = $('#ready_text_el');
			$('#ready_text_el').text('Unready');
		}else{
			Game.reset_ready_icon();
		}
		current_player = Game.current_game_object.current_player_name;
		current_player_is_creator = ($('#p1').text() == Data.player_name);
		if(current_player_is_creator){
			Game.current_game_object.current_player_type = 'creator';
			Websocket.pregame_lobby_socket.send(JSON.stringify({
				signal: 'creator_ready_or_unready',
				creator_ready: is_ready,
				username: Data.player_name,
			}));
			console.log('sending signal creator_ready in pregame');
		}else{
			Game.current_game_object.current_player_type = 'opponent';
			Websocket.pregame_lobby_socket.send(JSON.stringify({
				signal: 'opponent_ready_or_unready',
				opponent_ready: is_ready,
				username: Data.player_name,
			}));
			console.log('sending signal opponent_ready in pregame');
		}
	},
	refresh_players_list : function(players_list){
		$('.playerlist').html('');
		$(players_list).each(function(i,item){
			$('.playerlist').append(
				$('<div/>', {
					class: 'pl-item',
					text: item,
				})
			)
		});
		$('.pl-item').click(function(e){
			$this = $(this);
			if($this.text() !== Data.player_name){
				$('.cmname').text($this.text())
				$('#challengeModal').modal('show');
				$('#create-game-c').data('playertochallenge', $this.text())
			}else{
				$('#playertab').click();
			}
		});
	},
	refresh_games : function(games_list){
		$('#the-list').html('');

		if(games_list.length == 0){
			$('#the-list').html('<br><br>&nbsp;No active games at the moment! Maybe you should create one!');
			return
		}
		$(games_list).each(function(i,item){
					
			if (item.operation == 'ADS'){
				operation = 'Addition and Subtraction';
			}else if(item.operation == 'MUD'){
				operation = 'Multiplication and Division';
			}
			$('#the-list').append(
				$('<div/>',{
					class: 'listobj col-md-12',
					onclick: 'Game.start_room_pregame("'+item.game_name+'",'+item.id+',"'+item.level+'","'+item.game_type+'","'+item.operation+', '+item.create_time+'")',
				}).append([
					$('<div/>',{
						class: 'lo-title col-md-12',
						text: item.game_name
					}),
					$('<div/>',{
						class: 'lo-info col-md-12',
						text: 'Created by ' + item.creator + ' at ' + item.create_time,
					}),
					$('<div/>',{
						class: 'lo-info2 col-md-12',
						text: 'Level: ' + item.level + ', Operation: ' + operation,
					}),
				])
			);
		});
	},
	back_to_initial : function(is_from_pregame){

		//default_value
		if (is_from_pregame === undefined){
			is_from_pregame=true
		}

		if(is_from_pregame){
			Game.pregame_lobby_to_lobby();	
		}else{
			Game.game_to_lobby();
		}
	},
	start_room_pregame : function(game_name, item_id, level, game_type, operation, create_time){
		$('.modal').modal('hide');
		game_name_and_id = game_name + '-' + item_id
		Game.current_game_object.current_player_name = Data.player_name;
		Game.current_game_object.id = item_id;
		Game.current_game_object.game_name_and_id = game_name_and_id;
		Game.current_game_object.level = level;
		Game.current_game_object.operation = operation;
		Game.current_game_object.create_time = create_time;
		Game.lobby_to_pregame_lobby(game_name_and_id, game_name, level, operation);
		Game.reset_canvas();
	},
	start_game: function(){

		$('#creator').text(Game.creator.username);
		$('#opponent').text(Game.opponent.username);

		Websocket.pregame_lobby_socket.send(
			JSON.stringify({
				signal: 'start_game',
				username: Data.player_name,
			})
		)
		Game.pregame_lobby_to_game(Game.current_game_object.game_name_and_id);
	},
	create_game : function(is_challenge, player_challenged){

		//default_value
		if(is_challenge === undefined){
			is_challenge=false
			player_challenged=null
		}

		if(is_challenge){
			game_name = $('#game-name-c').val()
			game_level = $('#game-level-c').val()
			game_operation = $('#game-operation-c').val()
			$create_game = $('#create-game-c')
		}else{
			game_name = $('#game-name').val()
			game_level = $('#game-level').val()
			game_operation = $('#game-operation').val()
			$create_game = $('#create-game')
		}

		$create_game.prop('disabled','true');

		check_for_spaces_only_game_name = game_name.replace(/\s/g, '');
		if(check_for_spaces_only_game_name == ''){
			alert('Please fill out game name!');
			$create_game.prop('disabled',false);
			return false;
		}

		if(game_name.length >= 16){
			alert('Game name can only be 15 chars or less!');
			$create_game.prop('disabled',false);
			return false;
		}

		if(/^[a-zA-Z0-9- _]*$/.test(game_name) == false) {
		    alert('Sorry, your game name cannot contain special characters.');
		    $create_game.prop('disabled',false);
			return false;
		}

		Websocket.lobby_socket.send(JSON.stringify({
			signal: 'create_game',
			game_name: game_name,
			operation: game_operation,
			level: game_level,
			username : Data.player_name,
			is_challenge : is_challenge,
			player_challenged: player_challenged,
		}));

		Data.game_name = game_name;
		Data.game_operation = game_operation;
		Data.game_level = game_level;
		Data.is_challenge = is_challenge;
		Data.player_challenged = player_challenged;

		console.log('Sending create_game signal');
	},
	end_game : function(circumstance){
		if (circumstance == 'game_end'){

		}else if (circumstance == 'creator_left'){
			Websocket.game_socket.close()
			alert('Game ended because creator left. You win!')
		}else if (circumstance == 'opponent_left'){
			alert('Game ended because opponent left. You win!')
		}
		
	},	
	generate_first_4_problems : function(){
		Websocket.game_socket.send(JSON.stringify({
			'signal': 'generate_first_4_problems_game',
			'username': Data.player_name,
			'level' : Game.current_game_object.level,
			'operation': Game.current_game_object.operation,
		}));
	},	
	generate_new_problem : function(){
		Websocket.game_socket.send(JSON.stringify({
			'signal': 'generate_problem_game',
			'username': Data.player_name,
			'level' : Game.current_game_object.level,
			'operation': Game.current_game_object.operation,
		}))
	},
	start_countdown : function(){
		num = 5
		function countdown(){
			$('#countdown').text(num);
			num -= 1;
			if (num > -1){
				setTimeout(countdown,1000)
			}else{
				$('#countdown').css({'display': 'none'})
				Cycle.main()
				if(Game.current_game_object.current_player_type == 'creator'){
					Websocket.game_socket.send(JSON.stringify({
						'signal': 'game_start',
						'username': Data.player_name,
					}))
				}
			}
		}
		countdown();
	},
	creator : {
	    type: 'creator',
	    width: 4,
	    height: 4,
	    color: 'goldenrod',
	    history: [],
	    current_direction: null,
	    username: null,
	    turn_history: [],
	},
	opponent : {
	    type: 'opponent',
	    width: 4,
	    height: 4,
	    color: 'blue',
	    history: [],
	    current_direction: null,
	    username: null,
	    turn_history: [],
	},
	over: false,
	start: function() {
	    Cycle.resetCreator();
	    Cycle.resetOpponent();
	    Game.over = false;
	    Game.creator.current_direction = "left";
	    Game.reset_canvas();
	},

	stop: function(cycle) {
	    Game.over = true;
	    clearInterval(Game.interval);
	    if(cycle.type == 'creator'){
	    	winner_type = 'opponent'
	    }else{
	    	winner_type = 'creator'
	    }
	    winner = Game[winner_type].username;
	    $('#optionModal').modal('show');
	    $('#winner').text(winner + ' has won this game.');
	    if(winner !== Data.player_name){
	    	Websocket.game_socket.send(JSON.stringify({
		    	'signal': 'game_over',
		    	'winner': winner,
		    	'username': Data.player_name,
	    	}));
		}
	},

	show_lobby_modal: function(){
		$('#loadingModal').modal('show');
		$('#connecting-to').text('Connecting to Lobby');
		$('.actions').text('Connecting to Lobby...');
	},

	show_pregame_lobby_modal: function(){
		$('#loadingModal').modal('show');
		$('#connecting-to').text('Connecting to Pregame Lobby');
		$('.actions').text('Connecting to Pregame Lobby...');
	},

	show_game_modal: function(){
		$('#loadingModal').modal('show');
		$('#connecting-to').text('Connecting to Game Server');
		$('.actions').text('Connecting to Game Server...');
	},

	lobby_to_pregame_lobby : function(game_name_and_id, game_name, level, operation){

		$('#bigtab2button').click();
		$('#pregame-game-name').text(game_name);
		$('#pregame-level').text(level);
		//$('#pregame-game-type').text(game_type);
		var parsed_op = (operation == 'ADS') ? 'Addition and Subtraction' : 'Multiplication and Division';
		$('#pregame-game-operation').text(parsed_op);

		Websocket.lobby_socket.close();
		Websocket.setup_ws_pregame_lobby(game_name_and_id);
		
		Game.show_pregame_lobby_modal();
	},

	pregame_lobby_to_lobby : function(){

		Game.show_lobby_modal()
		$('#create-game').prop('disabled',false);
		$('#bigtab1button').click();

		Websocket.pregame_lobby_socket.send(JSON.stringify({
			signal: 'make_game_inactive_or_leave_pregame',
			game_id: Game.current_game_object.id,
			username: Data.player_name,
		}));
		
		Websocket.pregame_lobby_socket.close();
		Websocket.setup_ws_lobby();
		Game.reset_ready_icon();
		
	},

	pregame_lobby_to_game : function(game_name_and_id){
		Websocket.pregame_lobby_socket.close();
		Websocket.setup_ws_game(game_name_and_id);
		Game.show_game_modal();
		$('#answer-element').focus();
		$('#back-btn').hide();
	},

	game_to_lobby : function(){

		$('#bigtab1button').click();
		$('#create-game').prop('disabled',false);
		Game.show_lobby_modal();
		Websocket.game_socket.close();
		Websocket.setup_ws_lobby();
	},

	game_to_pregame_lobby : function(){
		Websocket.game_socket.close();
		Websocket.setup_ws_lobby(true); //we go here first to create a new game
		Game.is_first_go_round = false;
	},
  
  	reset_canvas: function() {
    	Game.ctx.clearRect(0, 0, Game.canvas.width, Game.canvas.height);
    	for(var i = 0; i <= Game.canvas.width; i+=30){
			
			Game.ctx.beginPath();
			Game.ctx.strokeStyle = "rgba(255,255,255, 0.15)";
			Game.ctx.moveTo(i, 0);
			Game.ctx.lineTo(i, Game.canvas.height);
			Game.ctx.moveTo(0, i);
			Game.ctx.lineTo(Game.canvas.width, i);
			Game.ctx.stroke();
			Game.ctx.closePath();
			Game.ctx.restore();
		}
  	},
  	send_answer : function(cycle, answer){
  		console.log('sending answer '+answer+' as player '+Data.player_name)
		Websocket.game_socket.send(
			JSON.stringify({
				'signal': 'send_answer', 
				'answer': answer,
				'username': Data.player_name,
				'current_position': cycle.x + ',' + cycle.y,
				'current_direction': cycle.current_direction,
			})
		);
		$('#answer-element').val('');

		return false;
	},
	reset_pregame_elements : function(){
		$('#p1').text('none');
		$('#p2').text('none');
		$('#p1ready').text('');
		$('#p2ready').text('');
		Game.ready_current_player(false);
		Game.reset_ready_icon();
		Game.reset_canvas();
	},
	inverseDirection : function(direction) {
	    switch(direction) {
		    case 'up':
		      	return 'down';
		      	break;
		    case 'down':
		      	return 'up';
		      	break;
		    case 'right':
		      	return 'left';
		      	break;
		    case 'left':
		      	return 'right';
		      	break;
	  	}
	},
	current_player_wants_replay : function(){
		Websocket.game_socket.send(JSON.stringify({
			'signal' : 'current_player_wants_replay',
			'username' : Data.player_name,
		}));
	},
	current_player_wants_to_leave : function(){
		Websocket.game_socket.send(JSON.stringify({
			'signal' : 'current_player_wants_to_leave',
			'username' : Data.player_name,
		}));
	},
}	

Cycle = {

	resetCreator: function() {
	    Game.creator.x = Game.canvas.width - (Game.canvas.width / (Game.creator.width) + 2);
	    Game.creator.y = (Game.canvas.height / 2) + (Game.creator.height);
	    Game.creator.color = 'goldenrod';
	    Game.creator.history = [];    
	    Game.creator.current_direction = "left";
	},
	resetOpponent: function() {
	    Game.opponent.x = (Game.canvas.width / (Game.opponent.width) - 2);
	    Game.opponent.y = (Game.canvas.height / 2) + (Game.opponent.height);
	    Game.opponent.color = 'blue';
	    Game.opponent.history = [];
	    Game.opponent.current_direction = "right";
	},
	isCollision: function(x,y) {
    	coords = x + ',' + y;
	    if (x < (Game.opponent.width / 2) || 
	        x > Game.canvas.width - (Game.opponent.width / 2) || 
	        y < (Game.opponent.height / 2) || 
	        y > Game.canvas.height - (Game.opponent.height / 2) || 
	        Game.opponent.history.indexOf(coords) >= 0 || 
	        Game.creator.history.indexOf(coords) >= 0) {
	      return true;
	    }    
	},  
	checkCollision: function(cycle, opponent) {
	    if ((cycle.x < (cycle.width / 2)) || 
	        (cycle.x > Game.canvas.width - (cycle.width / 2)) || 
	        (cycle.y < (cycle.height / 2)) || 
	        (cycle.y > Game.canvas.height - (cycle.height / 2)) || 
	        (cycle.history.indexOf(this.generateCoords(cycle)) >= 0) || 
	        (opponent.history.indexOf(this.generateCoords(cycle)) >= 0)) {
	        return true;
	    }
	},
	move: function(cycle, opponent) {
	    switch(cycle.current_direction) {
	      case 'up':
	        cycle.y -= cycle.height;
	        break;
	      case 'down':
	        cycle.y += cycle.height;
	        break;
	      case 'right':
	        cycle.x += cycle.width;
	        break;
	      case 'left':
	        cycle.x -= cycle.width;
	        break;
	    }
	    if (this.checkCollision(cycle, opponent)) {
	      Game.stop(cycle);
	    }
	    coords = this.generateCoords(cycle);	    
	    cycle.history.push(coords);
  	},
  	unmove: function(cycle, position){
  		rm_index = cycle.history.indexOf(position);
  		cycle.history.splice(rm_index, 1);
  	},
	generateCoords: function(cycle) {
	   	return cycle.x + "," + cycle.y;
	}, 
	draw: function(cycle) {
	    Game.ctx.fillStyle = cycle.color;
	    Game.ctx.beginPath();
	    Game.ctx.moveTo(cycle.x - (cycle.width / 2), cycle.y - (cycle.height / 2));
	    Game.ctx.lineTo(cycle.x + (cycle.width / 2), cycle.y - (cycle.height / 2));
	    Game.ctx.lineTo(cycle.x + (cycle.width / 2), cycle.y + (cycle.height / 2));
	    Game.ctx.lineTo(cycle.x - (cycle.width / 2), cycle.y + (cycle.height / 2));
	    Game.ctx.closePath();
	    Game.ctx.fill();

	},
	//afl: account for lag
	afl_draw : function(cycle,positions){
		$(positions).each(function(i, item){

	    		
    		item_split = item.split(',');
    		item_x = parseInt(item_split[0]);
    		item_y = parseInt(item_split[1]);

    		console.log('drawing ' + item_x + ', ' + item_y);

    		Game.ctx.fillStyle = cycle.color;
		    Game.ctx.beginPath();
		    Game.ctx.moveTo(item_x - (cycle.width / 2), item_y - (cycle.height / 2));
		    
		    Game.ctx.lineTo(item_x + (cycle.width / 2), item_y - (cycle.height / 2));

		    Game.ctx.lineTo(item_x + (cycle.width / 2), item_y + (cycle.height / 2));
		    Game.ctx.lineTo(item_x - (cycle.width / 2), item_y + (cycle.height / 2));
		    
		    Game.ctx.closePath();
		    Game.ctx.fill();	

		    if(cycle.type == 'creator'){
		    	Cycle.move(Game.creator, Game.opponent)
		    }else if(cycle.type == 'opponent'){
		    	Cycle.move(Game.opponent, Game.creator)
		    }
    	});
	},
	undraw : function(cycle, positions){
		$(positions).each(function(i, item){
			item_split = item.split(',')
			item_x = parseInt(item_split[0]);
			item_y = parseInt(item_split[1]);
			Game.ctx.clearRect(item_x - 4, item_y -4 , 8, 8);
			Cycle.unmove(cycle, item);
			console.log('undrawing '+item_x+','+item_y)
		});
	},
	loop : function() {
  		if (Game.over === false) {
  			$('#countdown').css({'display' : 'none'})
    		Cycle.move(Game.creator, Game.opponent);
    		Cycle.draw(Game.creator);
    		Cycle.move(Game.opponent, Game.creator);
    		Cycle.draw(Game.opponent);
  		}
	},
	main : function() {
  		Game.start();
  		Game.interval = setInterval(this.loop, 100);  
	},
}

Websocket = {
	ws_scheme: window.location.protocol == "https:" ? "wss" : "ws", // When we're using HTTPS, use WSS too.
	lobby_socket: null,
	pregame_lobby_socket: null,
	game_socket : null,
	setup_ws_lobby : function(to_pregame){

		Websocket.lobby_socket = new ReconnectingWebSocket(Websocket.ws_scheme + '://' + window.location.host + '/lobby');

		Websocket.lobby_socket.onopen = function () {
            console.log("Connected to lobby socket");

            $('.modal').modal('hide');

            Websocket.lobby_socket.send(JSON.stringify({
            	signal: 'get_games_and_players',
            	username: Data.player_name,
            }));

            if(to_pregame){

            	if(Data.player_name == Game.creator.username){
            		Websocket.lobby_socket.send(JSON.stringify({
						signal: 'create_game',
						game_name: Data.game_name,
						operation: Data.game_operation,
						level: Data.game_level,
						username : Data.player_name,
						is_challenge : Data.is_challenge,
						player_challenged: Data.player_challenged,
						is_auto: true, //if create_game is an automatically created game from Play Again
					}));
            	}
            }
        };

		Websocket.lobby_socket.onmessage = function(message) {
			data = JSON.parse(message.data);
			console.log(data);

			if (data.cont_game_connect_opponent){
				//continued game, connect opponent to automatically created game
				if (Data.player_name == Game.opponent.username){
					Game.start_room_pregame(
						data.gc_game_name,
						data.gc_item_id,
						data.gc_level,
						data.gc_game_type,
						data.gc_operation,
						data.gc_create_time,
					)
				}
			}
			if (data.is_game_create){
				console.log('game create');
				if (data.current_player_name == Data.player_name){
					
					Game.start_room_pregame(
						data.gc_game_name,
						data.gc_item_id,
						data.gc_level,
						data.gc_game_type,
						data.gc_operation,
						data.gc_create_time,
					)
				}
			}
			if (data.games_list){
				Game.refresh_games(data.games_list);
				Game.refresh_players_list(data.players_list);
			}

			if(data.player_challenged && data.pc_vars){
				var item = data.pc_vars;
				if(data.player_challenged == Data.player_name){
					$('.bottombottom').append(
						$('<p/>', {
							'text': item.creator + ' has challenged you to a game (name: ' + item.name + ', level: ' + item.level + ', operation: ' + item.operation + ', at '+ item.create_time+')',
							'onclick':'Game.start_room_pregame("'+item.name+'",'+item.gid+',"'+item.level+'","RNK","'+item.operation+', '+item.create_time +'")',
							'class': 'bb-item',
							'id': item.gid,
						})
					)	
				}
			}

			
		};

		Websocket.lobby_socket.onclose = function (){
			
			Websocket.lobby_socket.send(JSON.stringify({
				'signal': 'player_leave_lobby',
				'username': Data.player_name
			}));
			console.log('lobby socket closed');
		}

	},
	setup_ws_pregame_lobby : function(game_name_and_id){
		Websocket.pregame_lobby_socket = new ReconnectingWebSocket(Websocket.ws_scheme + '://' + window.location.host + '/pregame/' + game_name_and_id);
	
		Game.current_game_object.game_name_and_id = game_name_and_id;
		Websocket.pregame_lobby_socket.onopen = function () {
            console.log("Connected to pregame socket");
            
            Game.reset_pregame_elements();
            $('.modal').modal('hide');
            Websocket.pregame_lobby_socket.send(JSON.stringify({
            	signal: 'get_pregame_info',
            	username: Data.player_name,
            }));
            console.log('sending get_creators signal in pregame');
        };

        Websocket.pregame_lobby_socket.onmessage = function(message) {
			data = JSON.parse(message.data)

			if(data.creator){
				console.log('creator ' + data.creator);
				$('#p1').text(data.creator);
				Game.creator.username = data.creator;
				$('#creator').text(data.creator);
			}
			

			if(data.opponent){
				$('#p2').text(data.opponent);
				Game.opponent.username = data.opponent;
				$('#opponent').text(data.opponent);

				if(Game.creator.username == Data.player_name){
					if(Game.is_first_go_round){
						audio = new Audio('/static/assets/newplayer.mp3');
						audio.play()
					}
				}
				
			}

			if(data.opponent_left){
				$('#p2').text('none');
				Game.opponent.username = null;
				$('#opponent').text('none');

				if(Game.creator.username == Data.player_name){
					audio = new Audio('/static/assets/playerleft.mp3');
					audio.play()
				}
			}

			if(data.level && data.operation){
				Game.current_game_object.level = data.level;
				Game.current_game_object.operation = data.operation;
			}

			if (data.creator_ready){
				$('#p1ready').text('READY');
			}else if (data.creator_ready == false){
				$('#p1ready').text('')
			}
			if (data.opponent_ready){
				$('#p2ready').text('READY');
			}else if (data.opponent_ready == false){
				$('#p2ready').text('')
			}

			if(data.game_started){
				Websocket.pregame_lobby_socket.close();
				Websocket.setup_ws_game(Game.current_game_object.game_name_and_id);
				$('#loadingModal').modal('show');
				$('#connecting-to').text('Connecting to Game Server');
				$('.actions').text('Connecting to Game Server...'); 
			}

			if (data.game_made_inactive){

				Websocket.pregame_lobby_socket.close();
				Websocket.setup_ws_lobby();

				alert('The creator of the game you were in ended up cancelling the game!')
				//unready current creator

				$('#loadingModal').modal('show');
				$('#connecting-to').text('Connecting to Lobby Server');
				$('.actions').text('Connecting to Lobby Server...');
			}

			if ($('#p1ready').text() == 'READY' && $('#p2ready').text() == 'READY' && $('#p1').text() == Data.player_name){
				$('#start-game').css({'display':'block'});
			}else if($('#p1ready').text() == 'READY' && $('#p2ready').text() == 'READY' && $('#p2').text() == Data.player_name){
				if(document.getElementById('waiting') == null){
					$('#info').append(
						$('<p/>', { 
							class: 'fs10',
							text: 'Waiting for ' + $('#p1').text() + ' to start the game.',
							id: 'waiting'
						})
					)
				}
			}else if ($('#p1ready').text() !== 'READY' || $('#p2ready').text() !== 'READY'){
				$('#start-game').css({'display':'none'});
				if(document.getElementById('waiting') !== null){
					$('#waiting').remove();
				}
			}

			
		};

        Websocket.pregame_lobby_socket.onclose = function () {
            console.log("Disconnected from pregame socket");
        }
	},
	setup_ws_game: function(game_name_and_id){
		Websocket.game_socket = new ReconnectingWebSocket(Websocket.ws_scheme + '://' + window.location.host + '/game/'+ Game.current_game_object.game_name_and_id);


		Websocket.game_socket.onopen = function () {
			//audio = new Audio('/static/assets/prepsim.mp3');
			//audio.play();
            console.log("Connected to game socket");
            $('.modal').modal('hide');
            $('#game-tab').css({'display':'block'});
            $('#pregame-info').css({'display':'none'});
            $('#ready').hide();
            $('#start-game').hide();
            $('#go-back').hide();
            $('#waiting').remove();
            Game.generate_first_4_problems()
            Game.start_countdown()
        };

		Websocket.game_socket.onmessage = function(message) {


			var data = JSON.parse(message.data)

			if(data.game_over_finished){
				//Websocket.game_socket.close();
				//Websocket.setup_ws_lobby();
			}	

			if(data.creator_problem_list){
				Game.current_game_object.creator_problem_array = data.creator_problem_list;
				
				Game.current_game_object.player_problem_array = data.creator_problem_list;
				if(Game.current_game_object.current_player_type == 'creator'){
					$(Game.current_game_object.creator_problem_array).each(function(i,item){
						$('#direction' + (i+1)).text(item);
					});
				}
				
			}else if(data.opponent_problem_list){
				Game.current_game_object.opponent_problem_array = data.opponent_problem_list;
				Game.current_game_object.player_problem_array = data.opponent_problem_list;
				if(Game.current_game_object.current_player_type == 'opponent'){
					$(Game.current_game_object.opponent_problem_array).each(function(i,item){
						$('#direction' + (i+1)).text(item);
					});
				}
			}

			if (data.creator_left_game){
				Game.end_game()
			}else if (data.opponent_left_game){
				Game.end_game()
			}

			if (data.cdp){
				var positions = data.cdp;
				var lpu = data.p1_last_pos_update;

				console.log('lpu: '+ lpu)
				Cycle.afl_draw(Game.creator, positions);
				var lpu_index = Game.creator.history.indexOf(lpu)
				var salient_history = Game.creator.history.slice(lpu_index)
				var undraw_positions = []

				console.log('lpu: ' , lpu);
				console.log('salient_history[salient_history.length-1]: ' , salient_history[salient_history.length-1])
				console.log('positions: ' , positions);
				console.log('Game.creator.history: ' , Game.creator.history);
				console.log('salient history: ', salient_history);
				console.log('positions[0]: ', positions[0])
				console.log('positions[positions.length-1]: ' , positions[positions.length-1])

				$(salient_history).each(function(i,item){
					if(positions.indexOf(item) == -1){
						undraw_positions.push(item)
					}
				});

				Cycle.undraw(Game.creator, undraw_positions);
			}

			if (data.odp){
				var positions = data.odp;
				var lpu = data.p2_last_pos_update;
				Cycle.afl_draw(Game.opponent, positions);
				var lpu_index = Game.opponent.history.indexOf(lpu)
				var salient_history = Game.opponent.history.slice(lpu_index)

				console.log('line start location: ' + lpu);
				console.log('turn location (js): ' + salient_history[salient_history.length-1])
				console.log('end location (server): ' + positions[positions.length-1])
				
				var undraw_positions = []
				$(salient_history).each(function(i,item){
					if(positions.indexOf(item) == -1){
						undraw_positions.push(item)
					}
				});
				Cycle.undraw(Game.opponent, undraw_positions);
			}

			if(data.move_direction){
				if (data.move_direction.indexOf('1') > -1){
					new_direction = data.move_direction.split('1')[1]
					player_type = 'creator';
				} else if (data.move_direction.indexOf('2') > -1){
					new_direction = data.move_direction.split('2')[1]
					player_type = 'opponent';
				}

				var current_player_of_interest = Game[player_type];
				if (new_direction !== Game.inverseDirection(current_player_of_interest.current_direction)){
					switch(data.move_direction){

						case 'p1up':
							Game.creator.current_direction = 'up';
							break;
						case 'p1right': 
							Game.creator.current_direction = 'right';
							break;
						case 'p1down':
							Game.creator.current_direction = 'down';
							break;
						case 'p1left': 
							Game.creator.current_direction = 'left';
							break;
						case 'p2up':
							Game.opponent.current_direction = 'up';
							break;
						case 'p2right': 
							Game.opponent.current_direction = 'right';
							break;
						case 'p2down':
							Game.opponent.current_direction = 'down';
							break;
						case 'p2left': 
							Game.opponent.current_direction = 'left';
							break;
					}
				}
			}

			if (data.new_problem){
				new_problem = data.new_problem[1]
				if (data.new_problem[0][1] == '1'){
					if(Game.current_game_object.current_player_type == 'creator'){
						switch (data.new_problem[0]){
							case 'p1up':
								$('#direction1').text(new_problem);
								break;
							case 'p1right':
								$('#direction2').text(new_problem);
								break;
							case 'p1down':
								$('#direction3').text(new_problem)
								break;
							case 'p1left':
								$('#direction4').text(new_problem);
								break;
						}
					}
				}else if(data.new_problem[0][1] == '2'){
					if(Game.current_game_object.current_player_type == 'opponent'){
						switch (data.new_problem[0]){
							case 'p2up':
								$('#direction1').text(new_problem);
								break;
							case 'p2right':
								$('#direction2').text(new_problem);
								break;
							case 'p2down':
								$('#direction3').text(new_problem)
								break;
							case 'p2left':
								$('#direction4').text(new_problem);
								break;
						}
					}
				}
			}

			if(data.creator_wants_replay){
				Data.creator_wants_replay = true;
				if(Data.opponent_wants_replay == true){
					Game.game_to_pregame_lobby()
					//reset
					Data.creator_wants_replay = undefined;
					Data.opponent_wants_replay = undefined;
				}else if(Data.opponent_wants_replay === undefined){
					if(Game.current_game_object.current_player_type == 'creator'){
						$('#replayinfo').text('Waiting for '+Game.opponent.username+' to respond.');
					}else{
						$('#replayinfo').text('Creator has chosen to play again');
					}
					
				}
			}
			if(data.creator_wants_to_leave){
				Data.creator_wants_replay = false;
				Game.game_to_lobby();
				//reset
				Data.creator_wants_replay = undefined;
				Data.opponent_wants_replay = undefined;
				if(Game.current_game_object.current_player_type == 'opponent'){
					alert(Game.creator.username + ' doesn\'t want to play again.');
				}
			}
			if(data.opponent_wants_replay){
				Data.opponent_wants_replay = true;
				if(Data.creator_wants_replay){
					Game.game_to_pregame_lobby()
					//reset
					Data.creator_wants_replay = undefined;
					Data.opponent_wants_replay = undefined;

				}else if(Data.creator_wants_replay === undefined){
					if(Game.current_game_object.current_player_type == 'opponent'){
						$('#replayinfo').text('Waiting for '+Game.creator.username+' to respond.');
					}else{
						$('#replayinfo').text(Game.opponent.username+' has chosen to play again');
					}
					
				}
			}
			if(data.opponent_wants_to_leave){
				Data.opponent_wants_replay = false;
				Game.game_to_lobby();
				//reset
				Data.creator_wants_replay = undefined;
				Data.opponent_wants_replay = undefined;
				if(Game.current_game_object.current_player_type == 'creator'){
					alert(Game.opponent.username + ' doesn\'t want to play again.');
				}
			}
		};

		Websocket.game_socket.onclose = function () {
            console.log("Disconnected from game socket");
            $('#game-tab').css({'display':'none'});
            $('#pregame-info').css({'display':'block'})
            $('#ready').show();
            $('#go-back').show();
        }
	},
}


App = {
	start : function(){
		Game.render();
		Websocket.setup_ws_lobby();
	}
}

App.start();

//when either creator or opponent refreshes page after game, redirect remaining player to lobby
//show error messages on make an account page
//data.cont_game_connect_opponent firefox debug