Skip to content

Instantly share code, notes, and snippets.

@JMIdeaMaker

JMIdeaMaker/app.js

Created October 10, 2019 19:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JMIdeaMaker/b9a0d4e2f1b47efff05012f6cc994374 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JMIdeaMaker/b9a0d4e2f1b47efff05012f6cc994374 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment