218 lines
9.4 KiB
HTML
218 lines
9.4 KiB
HTML
<html>
|
|
<head>
|
|
<title>Deckard + Company</title>
|
|
<link href="css.css" rel="stylesheet">
|
|
<script src="https://labs.murkfall.net/bluesaxman/blue.js/raw/master/libs/bluecore.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1>Welcome to Deckard + Company<h1>
|
|
</body>
|
|
<script>
|
|
|
|
window.server = "wss://test.murkfall.net:42024/";
|
|
window.gameState = {};
|
|
window.gameState.users = [];
|
|
window.gameState.decks = [];
|
|
window.gameState.pools = [];
|
|
window.gameState.hands = [];
|
|
window.gameState.active = {};
|
|
|
|
function updateEvent() {
|
|
window.UI.display.innerHTML = "";
|
|
if (Object.keys(window.gameState.decks).length < 2) { window.gameState.active.deck = Object.keys(window.gameState.decks)[0]; }
|
|
if (Object.keys(window.gameState.hands).length < 2) { window.gameState.active.hand = Object.keys(window.gameState.hands)[0]; }
|
|
if (Object.keys(window.gameState.pools).length < 2) { window.gameState.active.pool = Object.keys(window.gameState.pools)[0]; }
|
|
if (window.UI.menu.decks.button.checked) {
|
|
elementPlace("#display","decks",null,"ol");
|
|
var myKeys = Object.keys(window.gameState.decks);
|
|
myKeys.sort();
|
|
myKeys.forEach(function (deckID) {
|
|
var deck = window.gameState.decks[deckID];
|
|
window.UI.display[deckID] = elementPlace("#decks","Deck_"+deck.name,"deck"+(deck.name == window.gameState.active.deck ? " selected" : ""),"li");
|
|
window.UI.display[deckID].innerText = deck.name+":"+deck.size;
|
|
buttonAdd("#Deck_"+deck.name,null,"Add Cards", function () {
|
|
popupDialog("deckLoader","Select DDF (Deck Definition File)",true,inputDialog,{"inputType":"file"},function (f) {
|
|
var myFile = new FileReader();
|
|
myFile.onload = function (file) {
|
|
var message = {};
|
|
message.action = "ddf";
|
|
message.deck = deckID;
|
|
message.ddf = file.target.result;
|
|
window.gameSession.send(JSON.stringify(message));
|
|
}
|
|
myFile.readAsText(f[0]);
|
|
});
|
|
},"deck_button add_cards","div");
|
|
buttonAdd("#Deck_"+deck.name,null,"Shuffle", function () {
|
|
window.gameSession.send('{"action":"shuffle", "deck":"'+deckID+'"}');
|
|
}, "deck_button shuffle","div");
|
|
buttonAdd("#Deck_"+deck.name,null,"Draw", function () {
|
|
window.gameSession.send('{"action":"draw","deck":"'+deckID+'","hand":"'+window.gameState.active.hand+'"}'); // Will need to be updated when I figure out selection
|
|
}, "deck_button draw","div");
|
|
buttonAdd("#Deck_"+deck.name,null,"X", function () {
|
|
window.gameSession.send('{"action":"del","type":"deck","id":"'+deckID+'"}');
|
|
}, "deck_button delete", "div");
|
|
window.UI.display[deckID].onclick = function () {
|
|
window.gameState.active.deck = deck.name;
|
|
updateEvent();
|
|
};
|
|
});
|
|
buttonAdd("#decks",null,"+",function () {
|
|
popupDialog("addDeck","Please name new deck",true, inputDialog,{"inputType":"text"},function (newDeckName) {
|
|
window.gameSession.send('{"action":"add","type":"deck","id":"'+newDeckName+'"}');
|
|
});
|
|
}, "add_button","li");
|
|
}
|
|
if (window.UI.menu.users.button.checked) {
|
|
elementPlace("#display","users",null,"ol");
|
|
window.gameState.users.sort();
|
|
window.gameState.users.forEach(function (user) {
|
|
window.UI.display[user] = elementPlace("#users","User_"+user,"username","li");
|
|
window.UI.display[user].innerText = user;
|
|
});
|
|
}
|
|
if (window.UI.menu.hands.button.checked) {
|
|
elementPlace("#display","hands",null,"ol");
|
|
var myHands = Object.keys(window.gameState.hands);
|
|
myHands.sort();
|
|
myHands.forEach(function (handID) {
|
|
var hand = window.gameState.hands[handID];
|
|
window.UI.display[handID] = elementPlace("#hands","Hand_"+hand.name,"hand"+(hand.name == window.gameState.active.hand ? " selected" : ""),"li");
|
|
window.UI.display[handID].controls = elementPlace("#Hand_"+hand.name,"Hand_controls_"+hand.name,"controls","div");
|
|
window.UI.display[handID].controls.innerHTML = "<div>"+hand.name+"</div>";
|
|
buttonAdd("#Hand_controls_"+hand.name,null,"Muligan",function () {
|
|
window.gameSession.send('{"action":"muligan","hand":"'+handID+'","deck":"'+window.gameState.active.deck+'"}');
|
|
}, "hand_button muligan", "div");
|
|
buttonAdd("#Hand_controls_"+hand.name,null,"X",function () {
|
|
window.gameSession.send('{"action":"del","type":"hand","id":"'+handID+'"}');
|
|
}, "hand_button delete", "div");
|
|
window.UI.display[handID].cards = elementPlace("#Hand_"+hand.name,hand.name+"_cards",null,"ol");
|
|
hand.cards.forEach(function (card,index) {
|
|
window.UI.display[handID].cards[index] = elementPlace("#"+hand.name+"_cards",null,"card","li");
|
|
window.UI.display[handID].cards[index].innerHTML = card+'<div id="card'+handID+index+'_controls"></div>';
|
|
buttonAdd("#card"+handID+index+"_controls",null,"Play Card", function () {
|
|
window.gameSession.send('{"action":"play","hand":"'+handID+'","cardID":"'+index+'","pool":"'+window.gameState.active.pool+'"}');
|
|
}, "card_button play", "div");
|
|
});
|
|
window.UI.display[handID].onclick = function () {
|
|
window.gameState.active.hand = hand.name;
|
|
updateEvent();
|
|
}
|
|
});
|
|
buttonAdd("#hands",null,"+",function () {
|
|
popupDialog("addHand","Please name new hand",true, inputDialog,{"inputType":"text"},function (newHandName) {
|
|
window.gameSession.send('{"action":"add","type":"hand","id":"'+newHandName+'"}');
|
|
});
|
|
}, "add_button", "li");
|
|
}
|
|
if (window.UI.menu.pools.button.checked) {
|
|
elementPlace("#display","pools",null,"ol");
|
|
var myPools = Object.keys(window.gameState.pools);
|
|
myPools.sort();
|
|
myPools.forEach(function (poolID) {
|
|
var pool = window.gameState.pools[poolID];
|
|
window.UI.display[poolID] = elementPlace("#pools","Pool_"+pool.name,"pool"+(pool.name == window.gameState.active.pool ? " selected" : ""),"li");
|
|
window.UI.display[poolID].innerHTML = pool.name+":"+pool.top;
|
|
buttonAdd("#Pool_"+pool.name,null,"X",function () {
|
|
window.gameSession.send('{"action":"del","type":"pool","id":"'+poolID+'","deck":"'+window.gameState.active.deck+'"}');
|
|
},"pool_button delete","div");
|
|
window.UI.display[poolID].onclick = function () {
|
|
window.gameState.active.pool = pool.name;
|
|
updateEvent();
|
|
}
|
|
});
|
|
buttonAdd("#pools",null,"+",function () {
|
|
popupDialog("addHand","Please name new pool",true, inputDialog,{"inputType":"text"},function (newPoolName) {
|
|
window.gameSession.send('{"action":"add","type":"pool","id":"'+newPoolName+'"}');
|
|
});
|
|
}, "add_button", "li");
|
|
}
|
|
}
|
|
|
|
function startGameSession() {
|
|
window.gameSession = new WebSocket(server);
|
|
gameSession.onmessage = function (event) {
|
|
var message = JSON.parse(event.data);
|
|
if (message.userID) { window.userID = message.userID; }
|
|
if (message.message) { console.log(message.message); }
|
|
if (message.request) {
|
|
if ("session" == message.request) { window.gameSession.send('{"session":'+window.gameState.session+'}'); }
|
|
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();
|
|
}
|
|
}
|
|
console.log(message);
|
|
|
|
};
|
|
gameSession.onconnect = function () {};
|
|
gameSession.onclose = function (event) {
|
|
console.log(event);
|
|
};
|
|
}
|
|
|
|
|
|
|
|
window.document.body.innerHTML = "";
|
|
window.UI = {};
|
|
|
|
function menuButton(ParentID,name,group,checked) {
|
|
var button = elementPlace(ParentID,name+"_handle", "menu_button_input", "input");
|
|
var label = elementPlace(ParentID,null,"menu_button","label");
|
|
button.type = "radio";
|
|
button.name = group;
|
|
button.value = name;
|
|
button.checked = checked;
|
|
label.setAttribute("for", name+"_handle");
|
|
label.innerText = name;
|
|
button.onchange = updateEvent;
|
|
return {"label":label,"button":button};
|
|
}
|
|
|
|
window.UI.menu = elementPlace("body","menu",null,"div");
|
|
window.UI.menu.decks = menuButton("#menu","Decks","menu",true);
|
|
window.UI.menu.hands = menuButton("#menu","Hands","menu",false);
|
|
window.UI.menu.pools = menuButton("#menu","Pools","menu",false);
|
|
window.UI.menu.users = menuButton("#menu","Users","menu",false);
|
|
window.UI.menu.options = menuButton("#menu","Options","menu",false);
|
|
|
|
window.UI.display = elementPlace("body","display",null,"div");
|
|
|
|
var parms = new URLSearchParams(window.location.search);
|
|
if (!parms.get("s")) {
|
|
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) {
|
|
if (Number.isInteger(Number.parseInt(value))) {
|
|
window.gameState.session = Number.parseInt(value);
|
|
} else {
|
|
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>
|
|
</html>
|