bluesaxman/deckard-and-company
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added client side Connection handling and basic UI updating. NO CSS UPDATES YET

Browse Source
This commit is contained in:
bluesaxman 2020-09-11 12:12:08 -06:00
parent e124349ef6
commit 9a2d6309b7
2 changed files with 118 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
Server/server.pl
View File

@ -311,7 +311,7 @@ my $server = Net::WebSocket::Server->new(
$conn->send_utf8('{"info":"user success"}'); $conn->send_utf8('{"info":"user success"}');
} }
if (defined($messageData->{session})) { if (defined($messageData->{session})) {
unless(defined($conn->{user})) { $conn->send_utf8('{"error":200, "message":Could not join session, no user defined", "request":"user"}'); $conn->send_utf8('{"request":"session"}'); return 0; } unless(defined($conn->{user})) { $conn->send_utf8('{"error":200, "message":"Could not join session, no user defined", "request":"user"}'); $conn->send_utf8('{"request":"session"}'); return 0; }
$conn->{session} = $messageData->{session}; $conn->{session} = $messageData->{session};
$conn->send_utf8('{"info":"session success", "request":"join"}'); $conn->send_utf8('{"info":"session success", "request":"join"}');
} }
@ -346,7 +346,12 @@ my $server = Net::WebSocket::Server->new(
$current->send_utf8('{"pools":'.to_json(\%poolStats).'}'); $current->send_utf8('{"pools":'.to_json(\%poolStats).'}');
# Users Hands # Users Hands
my @hands = getHands($sessionID,$conn->{user}); my @hands = getHands($sessionID,$conn->{user});
$current->send_utf8('{"hands":'.to_json(\@hands).'}'); my %handStats = ();
for (@hands) {
$handStats{$_}{name} = $_;
$handStats{$_}{cards} = [];
}
$current->send_utf8('{"hands":'.to_json(\%handStats).'}');
# for each hand # for each hand
for (@hands) { for (@hands) {
my $handID = $_; my $handID = $_;

183
UI/index.html
View File

@ -11,101 +11,125 @@
window.server = "ws://localhost:8080/"; window.server = "ws://localhost:8080/";
window.gameState = {}; window.gameState = {};
window.gameState.deck = []; window.gameState.users = [];
window.gameState,pool = []; window.gameState.decks = [];
window.hand = []; window.gameState.pools = [];
window.gameState.hands = [];
function updateEvent() { function updateEvent() {
window.UI.deck.innerHTML = ""; window.UI.users.innerHTML = "<span>Users:</span>";
window.UI.hand.innerHTML = ""; window.UI.decks.innerHTML = "<span>Decks:</span>";
var theDeck = elementPlace("#deck","deckDisp","card","div"); window.UI.hands.innerHTML = "<span>Hands:</span>";
theDeck.innerHTML = "<div>"+window.gameState.deck.length+"</div>"; window.UI.pools.innerHTML = "<span>Pools:</span>";
window.hand.forEach(function (card,index) { window.gameState.users.forEach(function (user) {
if (index < 10) { window.UI.users[user] = elementPlace("#users","User_"+user,"username","li");
var currentCard = elementPlace("#hand",null,"card","li"); window.UI.users[user].innerText = user;
currentCard.innerHTML = card;
}
}); });
Object.keys(window.gameState.decks).forEach(function (deckID) {
var deck = window.gameState.decks[deckID];
window.UI.decks[deckID] = elementPlace("#decks","Deck_"+deck.name,"deck","li");
window.UI.decks[deckID].innerText = deck.name+":"+deck.size;
});
Object.keys(window.gameState.hands).forEach(function (handID) {
var hand = window.gameState.hands[handID];
window.UI.hands[handID] = elementPlace("#hands","Hand_"+hand.name,"hand","li");
window.UI.hands[handID].innerText = hand.name;
window.UI.hands[handID].cards = elementPlace("#Hand_"+hand.name,hand.name+"_cards",null,"ol");
hand.cards.forEach(function (card,index) {
window.UI.hands[handID].cards[index] = elementPlace("#"+hand.name+"_cards",null,"card","li");
window.UI.hands[handID].cards[index].innerHTML = card;
});
});
Object.keys(window.gameState.pools).forEach(function (poolID) {
var pool = window.gameState.pools[poolID];
window.UI.pools[poolID] = elementPlace("#pools","Pool_"+pool.name,"pool","li");
window.UI.pools[poolID].innerText = pool.name+":"+pool.top;
});
} }
function startGameSession() { function startGameSession() {
window.gameSession = new WebSocket(server); window.gameSession = new WebSocket(server);
gameSession.onmessage = function (event) { gameSession.onmessage = function (event) {
var message = JSON.parse(event.data); var message = JSON.parse(event.data);
if (message.state) { gameState = message.state; updateEvent(); }
if (message.userID) { window.userID = message.userID; } if (message.userID) { window.userID = message.userID; }
if (message.message) { console.log(message.message); } if (message.message) { console.log(message.message); }
if (message.command) { if (message.request) {
if ("requestState" == message.command) { if ("session" == message.request) { window.gameSession.send('{"session":'+window.gameState.session+'}'); }
sendGameState(); if ("user" == message.request) { window.gameSession.send('{"user":"'+window.gameState.user+'"}'); }
if ("join" == message.request) { window.gameSession.send('{"action":"join"}'); }
if ("update" == message.request) { window.gameSession.send('{"action":"update"}'); }
}
if (message.users) { window.gameState.users = message.users; updateEvent(); }
if (message.decks) { window.gameState.decks = message.decks; updateEvent(); }
if (message.pools) { window.gameState.pools = message.pools; updateEvent(); }
if (message.hands) { window.gameState.hands = message.hands; updateEvent(); }
if (message.action) {
if ("addCard" == message.action) {
window.gameState.hands[message.hand].cards.push(message.card);
updateEvent();
} }
} }
if (message.request) {
if ("session" == message.request) { mytest.send('{"session":'+window.gameState.session+'}'); }
if ("user" == message.request) { mytest.send('{"user":'+window.gameState.user+'}'); }
if ("join" == message.request) { mytest.send('{"action":"join"}'); }
if ("update" == message.request) { mytest.send('{"action":"update"}'); }
}
console.log(message); console.log(message);
}; };
gameSession.onconnect = function () { gameSession.onconnect = function () {};
gameSession.send('{"type":"update","command":"requestState"}');
};
gameSession.onclose = function (event) { gameSession.onclose = function (event) {
console.log(event); console.log(event);
}; };
} }
elementPlace("body","menu",null,"div"); //elementPlace("body","menu",null,"div");
buttonAdd("#menu","upload","Upload Deck", function () { //buttonAdd("#menu","upload","Upload Deck", function () {
popupDialog("deckLoader","Select Deck definition File",true,inputDialog,{"inputType":"file"},function (f) { // popupDialog("deckLoader","Select Deck definition File",true,inputDialog,{"inputType":"file"},function (f) {
var myFile = new FileReader(); // var myFile = new FileReader();
myFile.onload = function (file) { // myFile.onload = function (file) {
// Probably validate the file somehow befor eating it // // Probably validate the file somehow befor eating it
var ourFile = JSON.parse(file.target.result); // var ourFile = JSON.parse(file.target.result);
window.gameState.deck = []; // window.gameState.deck = [];
deckFromJSON(ourFile); // deckFromJSON(ourFile);
window.hand = []; // window.hand = [];
sendGameState(); // sendGameState();
} // }
myFile.readAsText(f[0]); // myFile.readAsText(f[0]);
}); // });
},null,"div"); //},null,"div");
buttonAdd("#menu","add","Add Deck", function () { //buttonAdd("#menu","add","Add Deck", function () {
popupDialog("deckLoader","Select Deck definition to add",true,inputDialog,{"inputType":"file"},function (f) { // popupDialog("deckLoader","Select Deck definition to add",true,inputDialog,{"inputType":"file"},function (f) {
var myFile = new FileReader(); // var myFile = new FileReader();
myFile.onload = function (file) { // myFile.onload = function (file) {
var ourFile = JSON.parse(file.target.result); // var ourFile = JSON.parse(file.target.result);
deckFromJSON(ourFile); // deckFromJSON(ourFile);
sendGameState(); // sendGameState();
} // }
myFile.readAsText(f[0]); // myFile.readAsText(f[0]);
}); //});
}, null, "div"); //}, null, "div");
buttonAdd("#menu","shuffle", "Shuffle Deck", function () { //buttonAdd("#menu","shuffle", "Shuffle Deck", function () {
shuffleDeck(window.gameState.deck); // shuffleDeck(window.gameState.deck);
sendGameState(); // sendGameState();
}, null, "div"); //}, null, "div");
buttonAdd("#menu","shuffleAll", "Shuffle Hand to Deck", function () { //buttonAdd("#menu","shuffleAll", "Shuffle Hand to Deck", function () {
window.gameState.deck = window.gameState.deck.concat(window.hand); // window.gameState.deck = window.gameState.deck.concat(window.hand);
window.hand = []; // window.hand = [];
shuffleDeck(window.gameState.deck); // shuffleDeck(window.gameState.deck);
sendGameState(); // sendGameState();
}, null, "div"); //}, null, "div");
buttonAdd("#menu","draw", "Draw Card", function () { //buttonAdd("#menu","draw", "Draw Card", function () {
if (window.gameState.deck.length > 0) { // if (window.gameState.deck.length > 0) {
window.hand.unshift(window.gameState.deck.shift()); // window.hand.unshift(window.gameState.deck.shift());
sendGameState(); // sendGameState();
} // }
}, null, "div"); //}, null, "div");
elementPlace("body","display",null,"div"); elementPlace("body","display",null,"div");
window.UI = {}; window.UI = {};
window.UI.deck = elementPlace("#display","deck",null,"div"); window.UI.users = elementPlace("#display","users",null,"ol");
window.UI.hand = elementPlace("#display","hand",null,"ol"); window.UI.decks = elementPlace("#display","decks",null,"ol");
window.UI.hands = elementPlace("#display","hands",null,"ol");
window.UI.pools = elementPlace("#display","pools",null,"ol");
var parms = new URLSearchParams(window.location.search); var parms = new URLSearchParams(window.location.search);
if (parms.get("s")) { if (!parms.get("s")) {
window.gameState.session = parms.get("s");
} else {
popupDialog("gettingStarted","Welcome to Deckard and company", false, inputDialog,{"content":"Please enter a game ID or leave blank to start a new game","inputType":"number"}, popupDialog("gettingStarted","Welcome to Deckard and company", false, inputDialog,{"content":"Please enter a game ID or leave blank to start a new game","inputType":"number"},
function (value) { function (value) {
if (Number.isInteger(Number.parseInt(value))) { if (Number.isInteger(Number.parseInt(value))) {
@ -113,7 +137,22 @@ if (parms.get("s")) {
} else { } else {
window.gameState.session = null; window.gameState.session = null;
} }
window.location.search = '?s='+window.gameState.session;
// window.location.reload();
}); });
} else {
window.gameState.session = parms.get("s");
if (!window.gameState.user) {
popupDialog("gettingStarted","Welcome to Deckard and company", false, inputDialog, {"content":"Please enter a username","inputType":"text"},
function (value) {
if ((null != value) && ("" != value)) {
window.gameState.user = value;
} else {
window.gameState.user = "Unknown"+(new Date()).getTime();
}
startGameSession();
});
} else { startGameSession(); }
} }
</script> </script>
</html> </html>