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.

270 lines
10 KiB

2 years ago
'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;
2 years ago
$.get('data/settings/get_port.php', port => {
2 years ago
let url = 'https://' + location.hostname + ':' + port + urlQueries;
socket = io.connect(url);
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){
2 years ago
p.randomSeed(seed);
2 years ago
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);
}
}