Add basic room functionality
parent
80ea4eaaf9
commit
3c8bc448d8
@ -1 +1,173 @@
|
||||
var socket = io();
|
||||
const socket = io({autoConnect: false});
|
||||
const canvas = document.getElementById('canvas');;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
const cardWidth = 240;
|
||||
const cardHeight = 360;
|
||||
|
||||
const cards = new Image();
|
||||
const back = new Image();
|
||||
|
||||
let room;
|
||||
let hand = [];
|
||||
let turn;
|
||||
let playerName;
|
||||
|
||||
// Canvas Initialisation
|
||||
init();
|
||||
function init() {
|
||||
console.log('init');
|
||||
|
||||
ctx.font = "12px Arial";
|
||||
canvas.style.backgroundColor = 'rgb(143 153 150)';
|
||||
cards.src = 'images/deck.svg';
|
||||
back.src = 'images/uno.svg';
|
||||
|
||||
document.addEventListener('touchstart', onclick, false);
|
||||
document.addEventListener('click', onclick, false);
|
||||
playerName = getCookie('playerName');
|
||||
|
||||
if (playerName == null) {
|
||||
playerName = prompt('Enter your name: ', 'Guest');
|
||||
|
||||
if (playerName == null || playerName == "") {
|
||||
playerName = 'Guest';
|
||||
}
|
||||
|
||||
setCookie('playerName', playerName, 24 * 3600);
|
||||
}
|
||||
|
||||
console.log('>> socket.connect()');
|
||||
socket.connect();
|
||||
}
|
||||
|
||||
|
||||
// Cookies are temp, will need logins, etc.
|
||||
function setCookie(name, value, seconds) {
|
||||
let date = new Date();
|
||||
date.setTime(date.getTime() + (seconds * 1000));
|
||||
let expires = "expires=" + date.toUTCString();
|
||||
document.cookie = name + "=" + value + ";" + expires + ";path=/";
|
||||
}
|
||||
|
||||
function getCookie(name) {
|
||||
name += "=";
|
||||
let cookies = document.cookie.split(';');
|
||||
|
||||
for(let i = 0; i < cookies.length; i++) {
|
||||
let cookie = cookies[i];
|
||||
while (cookie.charAt(0) == ' ') {
|
||||
cookie = cookie.substring(1);
|
||||
}
|
||||
if (cookie.indexOf(name) == 0) {
|
||||
return cookie.substring(name.length, cookie.length);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
// Connect
|
||||
socket.on('connect', connect);
|
||||
function connect(){
|
||||
console.log('+ Frontend Connect');
|
||||
}
|
||||
|
||||
// getRooms
|
||||
function requestRooms(filter = 'all'){
|
||||
console.log('>> requestRooms:'+filter);
|
||||
socket.emit('requestRooms', filter);
|
||||
}
|
||||
function clearRoomList(){
|
||||
// Create a list of Rooms
|
||||
let list = document.getElementById('joinRoomButtons');
|
||||
// Empty the ul, as to not dupe room buttons, or have rooms that's don't exist
|
||||
list.innerHTML = "";
|
||||
}
|
||||
function returnRooms(data){
|
||||
clearRoomList();
|
||||
|
||||
// Create a list of Rooms
|
||||
let list = document.getElementById('joinRoomButtons');
|
||||
|
||||
let roomCount = Object.keys(data['roomData']).length;
|
||||
if(roomCount < 1){
|
||||
alert('No Rooms');
|
||||
return 0;
|
||||
}
|
||||
|
||||
let rooms = data['roomData'];
|
||||
// Loops the returned rooms, and add to the list (to be joinable)
|
||||
for (let room in rooms) {
|
||||
//console.log(rooms[room].name);
|
||||
|
||||
// Making something akin to this:
|
||||
//<li><button onclick="requestRoom(1)">Room 1</button></li>
|
||||
let button = document.createElement('button');
|
||||
button.appendChild(document.createTextNode(rooms[room].name));
|
||||
button.setAttribute("onclick","requestJoinRoom("+rooms[room].id+");");
|
||||
let li = document.createElement('li');
|
||||
li.appendChild(button);
|
||||
|
||||
list.appendChild(li);
|
||||
}
|
||||
|
||||
}
|
||||
socket.on('returnRooms', function (data) {
|
||||
console.log('<< returnRooms');
|
||||
returnRooms(data);
|
||||
});
|
||||
|
||||
|
||||
// createRoom
|
||||
function requestCreateRoom(){
|
||||
console.log('+ requestCreateRoom');
|
||||
socket.emit('requestCreateRoom', playerName);
|
||||
}
|
||||
function returnCreateRoom(data){
|
||||
|
||||
}
|
||||
socket.on('returnCreateRoom', function (data) {
|
||||
console.log('<< returnCreateRoom');
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
|
||||
// joinRoom
|
||||
function requestJoinRoom(roomId) {
|
||||
console.log('+ requestJoinRoom '.roomId);
|
||||
socket.emit('requestJoinRoom', playerName, roomId);
|
||||
room = 0;
|
||||
hand = [];
|
||||
turn = false;
|
||||
console.log('>> Room Request');
|
||||
}
|
||||
|
||||
socket.on('responseJoinRoom', function (name) {
|
||||
if (name != 'error') {
|
||||
room = name;
|
||||
console.log('<< Room Response: ' + name);
|
||||
|
||||
// Room Name
|
||||
ctx.fillText(name, 0, 10);
|
||||
|
||||
// Deck
|
||||
deck = new Rectangle({
|
||||
name: 'deck',
|
||||
x: canvas.width-cardWidth/2-40,
|
||||
y: canvas.height-cardHeight/2-60,
|
||||
width: cardWidth/2,
|
||||
height: cardHeight/2,
|
||||
fillStyle: "#FF0000"
|
||||
});
|
||||
deck.draw();
|
||||
//ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2);
|
||||
|
||||
// Player Name
|
||||
ctx.fillText(playerName, 100, 390);
|
||||
} else {
|
||||
socket.disconnect();
|
||||
alert('Rooms are full! Try again later');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
// https://stackoverflow.com/a/29676404
|
||||
|
||||
context = document.getElementById("canvas").getContext("2d");
|
||||
defaultFillStyle = '#000';
|
||||
|
||||
function Rectangle(params) {
|
||||
this.name = params.name;
|
||||
this.x = params.x || 0;
|
||||
this.y = params.y || 0;
|
||||
this.width = params.width || 0;
|
||||
this.height = params.height || 0;
|
||||
this.fillStyle = params.fillStyle || "#FFFFFF";
|
||||
this.strokeStyle = params.strokeStyle || "#000000";
|
||||
this.lineWidth = params.lineWidth || 0;
|
||||
}
|
||||
|
||||
Rectangle.prototype.draw = function () {
|
||||
if (this.fillStyle) {
|
||||
console.log('X: '+this.x+' Y: '+this.y);
|
||||
console.log('W: '+this.width+' H: '+this.height);
|
||||
}
|
||||
if (this.fillStyle) {
|
||||
context.fillStyle = this.fillStyle;
|
||||
context.fillRect(this.x, this.y, this.width, this.height);
|
||||
context.fillStyle = defaultFillStyle; // Reset back to default
|
||||
}
|
||||
if (this.strokeStyle && this.lineWidth) {
|
||||
context.strokeStyle = this.strokeStyle;
|
||||
context.lineWidth = this.lineWidth;
|
||||
context.strokeRect(this.x, this.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue