Created
October 10, 2019 19:06
-
-
Save JMIdeaMaker/b9a0d4e2f1b47efff05012f6cc994374 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment