You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
269 lines
7.9 KiB
269 lines
7.9 KiB
'use strict';
|
|
|
|
let playerName;
|
|
function nameTyped(dom){
|
|
playerName = $(dom).val();
|
|
let disabled = isValid(playerName, 1, 20) ? false : 'disabled';
|
|
$('#main > button').attr('disabled', disabled);
|
|
}
|
|
function roomTyped(dom){
|
|
let roomName = $(dom).val();
|
|
let disabled = isValid(roomName, 1, 30) ? false : 'disabled';
|
|
$('#create_room').attr('disabled', disabled);
|
|
}
|
|
function isValid(name, min, max){
|
|
let regExp = /^\w+(?:[' _-]\w+)*$/;
|
|
return name.length >= min && name.length <= max && regExp.test(name);
|
|
}
|
|
|
|
let menuesFadeTime = 200;
|
|
let connecting = false;
|
|
function socketConnect(project, name = playerName){
|
|
if (connecting)
|
|
return;
|
|
connecting = true;
|
|
|
|
let urlQueries = '?game=' + project.name + '&name=' + name;
|
|
let url = 'https://' + location.hostname + urlQueries;
|
|
|
|
socket = io.connect(url, {
|
|
path: "/chainreact/"
|
|
});
|
|
socket.on('connect', () => {
|
|
console.log('Connected to ', url);
|
|
$('#start_feedback, #give_feedback').attr('disabled', false);
|
|
socket.on('disconnect', () => {
|
|
connecting = false;
|
|
console.log('Disconnected from ' + url);
|
|
$('#lobby, #room, #game_room').filter(':visible').fadeOut(menuesFadeTime, () => {
|
|
$('#main').fadeIn(menuesFadeTime);
|
|
$('#start_feedback, #give_feedback').attr('disabled', 'disabled');
|
|
});
|
|
});
|
|
socket.emit('room-list');
|
|
socket.on('room-list', (roomList) => {
|
|
roomList = roomList.filter(r => r.game === project.name);
|
|
console.log('Received room list: ', roomList);
|
|
$('#room_listings').html('');
|
|
for (let room of roomList){
|
|
let button = $('<button></button>');
|
|
button.html(room.name);
|
|
button.addClass('room_listing');
|
|
button.on('click', () => socket.emit('join-lobby', room.id));
|
|
$('#room_listings').append(button);
|
|
}
|
|
});
|
|
$('#main').fadeOut(menuesFadeTime, () => {
|
|
$('#lobby > h1').html('Welcome, ' + name + '!');
|
|
$('#lobby > input').val(name + "'s room");
|
|
$('#lobby').fadeIn(menuesFadeTime);
|
|
roomTyped($('#lobby > input'));
|
|
});
|
|
socket.on('created-lobby', (room) => {
|
|
console.log('You successfully created a room!');
|
|
$('#create_room').attr('disabled', false);
|
|
$('#lobby').fadeOut(menuesFadeTime, () => {
|
|
roomSetup(room);
|
|
});
|
|
});
|
|
socket.on('client-list', (room, clients) => {
|
|
console.log('Received client list: ', clients);
|
|
|
|
let players = clients.filter(c => c.isPlayer);
|
|
let spectators = clients.filter(c => c.isSpectator);
|
|
let leader = players[0];
|
|
|
|
if (game)
|
|
game.players = players;
|
|
|
|
setInterfacePlayers(players);
|
|
setInterfaceSpectators(spectators);
|
|
|
|
function setInterfacePlayers(players){
|
|
$('#player_listings').html('');
|
|
for (let c of players){
|
|
let div = $('<div></div>');
|
|
let span = $('<span></span>');
|
|
let ready = $('<button></button>');
|
|
div.addClass('player_listing');
|
|
ready.addClass('player_ready');
|
|
ready.on('click', () => {
|
|
if (c.id !== socket.id)
|
|
return;
|
|
let isReady = $(ready).data('isReady');
|
|
$(ready).data('isReady', !isReady);
|
|
socket.emit('set-ready', !isReady);
|
|
});
|
|
span.html(c.name);
|
|
ready.css('background-color', c.isReady ? 'green' : 'transparent');
|
|
ready.data('isReady', c.isReady);
|
|
div.append(span, ready);
|
|
$('#player_listings').append(div);
|
|
}
|
|
|
|
let allReady = players.find(c => !c.isReady) == null;
|
|
let startClickable = allReady && players.length <= 4 && (players.length > 1 || productionMode);
|
|
if (startClickable && players[0])
|
|
startClickable = players[0].id === socket.id;
|
|
$('#start_button').attr('disabled', startClickable ? false : 'disabled');
|
|
|
|
if (players.find(p => p.id === socket.id)){
|
|
$('#player_list .join_type').hide();
|
|
} else {
|
|
$('#player_list .join_type').show();
|
|
}
|
|
|
|
refreshGamePlayers(players);
|
|
}
|
|
|
|
function setInterfaceSpectators(spectators){
|
|
$('.spectator_listings').html('');
|
|
spectators.forEach(s => {
|
|
let div = $('<div></div>');
|
|
div.addClass('spectator_listing');
|
|
div.html(s.name);
|
|
|
|
$('.spectator_listings').append(div);
|
|
});
|
|
if (spectators.find(p => p.id === socket.id)){
|
|
$('.spectator_list .join_type').hide();
|
|
} else {
|
|
$('.spectator_list .join_type').show();
|
|
}
|
|
}
|
|
|
|
if (leader){
|
|
if (leader.id === socket.id)
|
|
readGameSettings();
|
|
else
|
|
disableSettings();
|
|
} else
|
|
disableSettings();
|
|
|
|
function disableSettings(){
|
|
$('.setting').attr('disabled', 'disabled');
|
|
}
|
|
});
|
|
socket.on('member-joined', (room, joinedId, joinedName) => {
|
|
if (joinedId === socket.id){
|
|
console.log('You joined a room!');
|
|
$('#lobby').fadeOut(menuesFadeTime, () => {
|
|
if (room.hasStarted){
|
|
$('#game_room').fadeIn(menuesFadeTime);
|
|
} else {
|
|
roomSetup(room);
|
|
}
|
|
});
|
|
}
|
|
else
|
|
console.log('A player joined your room: ' + joinedName + ' (' + joinedId + ')');
|
|
});
|
|
socket.on('member-left', (room, leftId, leftName) => {
|
|
console.log('A player left your room: ' + leftName + ' (' + leftId + ')');
|
|
if (game)
|
|
game.onPlayerLeft(leftId);
|
|
});
|
|
socket.on('start-game', (room, seed) => startGame(room, seed));
|
|
socket.on('start-spectate', (room, data, hues, turnId) => spectateGame(room, data, hues, turnId));
|
|
socket.on('game-settings', (room, settings) => applySettings(settings));
|
|
socket.on('left-lobby', () => {
|
|
console.log('You left a room!');
|
|
$('#leave_room').get(0).disabled = false;
|
|
game = null;
|
|
socket.removeAllListeners('player-colors');
|
|
socket.removeAllListeners('current-turn');
|
|
socket.removeAllListeners('set-slot');
|
|
$('#room, #game_room').filter(':visible').fadeOut(menuesFadeTime, () => {
|
|
$('#lobby').fadeIn(menuesFadeTime);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function applySettings(settings){
|
|
for (let key in settings)
|
|
gameSettings[key] = settings[key];
|
|
|
|
console.log('Applied game settings: ', gameSettings);
|
|
|
|
$('#fieldsize_select').val(gameSettings.fieldSize);
|
|
$('#turntime_select').val(gameSettings.turnTime);
|
|
$('#mixed_check').prop('checked', gameSettings.mixed);
|
|
$('#silent_check').prop('checked', gameSettings.silent);
|
|
}
|
|
|
|
function roomSetup(room){
|
|
$('#room > h1').html(room.name);
|
|
$('#room').fadeIn(menuesFadeTime);
|
|
}
|
|
|
|
function createRoom(dom){
|
|
dom.disabled = true;
|
|
let name = $('#lobby > input').val();
|
|
if (name === '' || name.length > 30)
|
|
dom.disabled = false;
|
|
else
|
|
socket.emit('create-lobby', localSettings, name);
|
|
}
|
|
|
|
function leaveRoom(dom){
|
|
dom.disabled = true;
|
|
socket.emit('leave-lobby');
|
|
}
|
|
|
|
function serverStartGame(dom){
|
|
socket.emit('start-game');
|
|
}
|
|
|
|
function startGame(room, seed){
|
|
p.randomSeed(seed);
|
|
buildGame(room);
|
|
console.log('Game started');
|
|
socket.emit('ready-for-turn');
|
|
}
|
|
|
|
function spectateGame(room, data, hues, turnId){
|
|
let players = room.clients.filter(c => c.isPlayer);
|
|
buildGame(room);
|
|
if (data)
|
|
game.setAllSlots(data);
|
|
if (hues)
|
|
game.setPlayerHues(hues);
|
|
if (turnId)
|
|
game.setTurnPlayer(players, turnId);
|
|
refreshGamePlayers(players);
|
|
console.log('Started spectating');
|
|
}
|
|
|
|
function buildGame(room){
|
|
$('#room').filter(':visible').fadeOut(menuesFadeTime, () => {
|
|
$('#game_room').fadeIn(menuesFadeTime);
|
|
$('#play_again').hide();
|
|
});
|
|
game = new Game(room.clients.filter(c => c.isPlayer));
|
|
}
|
|
|
|
function refreshGamePlayers(players){
|
|
$('#game_players').html('');
|
|
for (let c of players){
|
|
let div = $('<div></div>');
|
|
div.addClass('game_player');
|
|
div.html(c.name);
|
|
let color = 'hsl(0, 0%, 50%)';
|
|
if (game){
|
|
if (game.turn === c.id){
|
|
color = 'hsl(' + game.playerHues[c.id] + ', 100%, 50%)';
|
|
} else {
|
|
color = 'hsl(' + game.playerHues[c.id] + ', 10%, 50%)';
|
|
}
|
|
if (game.winId === c.id){
|
|
div.effect('pulsate', 5000, () => {
|
|
div.css('background-color', color);
|
|
});
|
|
}
|
|
}
|
|
div.css('background-color', color);
|
|
|
|
$('#game_players').append(div);
|
|
}
|
|
} |