2020-06-09 13:48:19 -06:00
< html >
< head >
2020-09-02 11:48:56 -06:00
< title > Deckard + Company< / title >
2020-09-29 21:23:47 +00:00
< meta http-equiv = "Cache-Control" content = "no-cache, no-store, must-revalidate" / >
< meta http-equiv = "Pragma" content = "no-cache" / >
< meta http-equiv = "Expires" content = "0" / >
2020-06-09 13:48:19 -06:00
< link href = "css.css" rel = "stylesheet" >
< script src = "https://labs.murkfall.net/bluesaxman/blue.js/raw/master/libs/bluecore.js" > < / script >
< / head >
< body >
2020-09-02 11:48:56 -06:00
< h1 > Welcome to Deckard + Company< h1 >
2020-06-09 13:48:19 -06:00
< / body >
< script >
2020-09-28 14:19:20 +00:00
window . server = "wss://test.murkfall.net:42024/" ;
2020-09-02 11:48:56 -06:00
window . gameState = { } ;
2020-09-28 15:35:01 +00:00
window . gameState . log = "" ;
2020-09-11 12:12:08 -06:00
window . gameState . users = [ ] ;
window . gameState . decks = [ ] ;
window . gameState . pools = [ ] ;
window . gameState . hands = [ ] ;
2020-09-21 11:08:17 -06:00
window . gameState . active = { } ;
2020-06-09 13:48:19 -06:00
function updateEvent ( ) {
2020-09-14 13:58:06 -06:00
window . UI . display . innerHTML = "" ;
2020-09-21 11:08:17 -06:00
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 ] ; }
2020-09-14 13:58:06 -06:00
if ( window . UI . menu . decks . button . checked ) {
elementPlace ( "#display" , "decks" , null , "ol" ) ;
2020-09-17 14:23:12 -06:00
var myKeys = Object . keys ( window . gameState . decks ) ;
myKeys . sort ( ) ;
myKeys . forEach ( function ( deckID ) {
2020-09-14 13:58:06 -06:00
var deck = window . gameState . decks [ deckID ] ;
2020-09-21 11:08:17 -06:00
window . UI . display [ deckID ] = elementPlace ( "#decks" , "Deck_" + deck . name , "deck" + ( deck . name == window . gameState . active . deck ? " selected" : "" ) , "li" ) ;
2020-09-29 21:23:47 +00:00
window . UI . display [ deckID ] . innerHTML = '<div class="object_name">' + deck . name + "</div>" ;
2020-09-28 21:36:31 +00:00
window . UI . display [ deckID ] . controls = elementPlace ( "#Deck_" + deck . name , "Deck_controls_" + deck . name , "controls" , "div" ) ;
window . UI . display [ deckID ] . content = elementPlace ( "#Deck_" + deck . name , null , "content" , "div" ) ;
2020-09-29 21:23:47 +00:00
window . UI . display [ deckID ] . content . innerHTML = '<div class="deck_size">' + deck . size + '</div>' ;
2020-09-28 21:36:31 +00:00
buttonAdd ( "#Deck_controls_" + deck . name , null , "Add Cards" , function ( ) {
2020-09-17 12:16:16 -06:00
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 ;
2020-09-17 14:23:12 -06:00
message . ddf = file . target . result ;
2020-09-17 12:16:16 -06:00
window . gameSession . send ( JSON . stringify ( message ) ) ;
}
myFile . readAsText ( f [ 0 ] ) ;
} ) ;
} , "deck_button add_cards" , "div" ) ;
2020-09-28 21:36:31 +00:00
buttonAdd ( "#Deck_controls_" + deck . name , null , "Shuffle" , function ( ) {
2020-09-17 12:16:16 -06:00
window . gameSession . send ( '{"action":"shuffle", "deck":"' + deckID + '"}' ) ;
} , "deck_button shuffle" , "div" ) ;
2020-09-28 21:36:31 +00:00
buttonAdd ( "#Deck_controls_" + deck . name , null , "Draw" , function ( ) {
2020-09-21 11:08:17 -06:00
window . gameSession . send ( '{"action":"draw","deck":"' + deckID + '","hand":"' + window . gameState . active . hand + '"}' ) ; // Will need to be updated when I figure out selection
2020-09-17 12:16:16 -06:00
} , "deck_button draw" , "div" ) ;
2020-09-28 21:36:31 +00:00
buttonAdd ( "#Deck_controls_" + deck . name , null , "X" , function ( ) {
2020-09-18 08:56:06 -06:00
window . gameSession . send ( '{"action":"del","type":"deck","id":"' + deckID + '"}' ) ;
} , "deck_button delete" , "div" ) ;
2020-09-21 11:08:17 -06:00
window . UI . display [ deckID ] . onclick = function ( ) {
window . gameState . active . deck = deck . name ;
updateEvent ( ) ;
} ;
2020-09-11 12:12:08 -06:00
} ) ;
2020-09-17 14:23:12 -06:00
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" ) ;
2020-09-14 13:58:06 -06:00
}
if ( window . UI . menu . users . button . checked ) {
elementPlace ( "#display" , "users" , null , "ol" ) ;
2020-09-17 14:23:12 -06:00
window . gameState . users . sort ( ) ;
2020-09-14 13:58:06 -06:00
window . gameState . users . forEach ( function ( user ) {
2020-09-17 12:16:16 -06:00
window . UI . display [ user ] = elementPlace ( "#users" , "User_" + user , "username" , "li" ) ;
window . UI . display [ user ] . innerText = user ;
2020-09-14 13:58:06 -06:00
} ) ;
}
if ( window . UI . menu . hands . button . checked ) {
elementPlace ( "#display" , "hands" , null , "ol" ) ;
2020-09-17 14:23:12 -06:00
var myHands = Object . keys ( window . gameState . hands ) ;
myHands . sort ( ) ;
myHands . forEach ( function ( handID ) {
2020-09-14 13:58:06 -06:00
var hand = window . gameState . hands [ handID ] ;
2020-09-21 11:08:17 -06:00
window . UI . display [ handID ] = elementPlace ( "#hands" , "Hand_" + hand . name , "hand" + ( hand . name == window . gameState . active . hand ? " selected" : "" ) , "li" ) ;
2020-09-29 21:23:47 +00:00
window . UI . display [ handID ] . innerHTML = '<div class="object_name">' + hand . name + "</div>" ;
2020-09-22 15:29:04 -06:00
window . UI . display [ handID ] . controls = elementPlace ( "#Hand_" + hand . name , "Hand_controls_" + hand . name , "controls" , "div" ) ;
2020-09-29 21:23:47 +00:00
window . UI . display [ handID ] . content = elementPlace ( "#Hand_" + hand . name , "Hand_content_" + hand . name , "content" , "div" ) ;
2020-09-22 15:29:04 -06:00
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" ) ;
2020-09-29 21:23:47 +00:00
window . UI . display [ handID ] . cards = elementPlace ( "#Hand_content_" + hand . name , hand . name + "_cards" , null , "ol" ) ;
2020-09-14 13:58:06 -06:00
hand . cards . forEach ( function ( card , index ) {
2020-09-28 21:36:31 +00:00
window . UI . display [ handID ] . cards [ index ] = elementPlace ( "#" + hand . name + "_cards" , "card" + hand . name + index , "card" , "li" ) ;
window . UI . display [ handID ] . cards [ index ] . style . position = "relative" ;
window . UI . display [ handID ] . cards [ index ] . innerHTML = card ;
window . UI . display [ handID ] . cards [ index ] . controls = elementPlace ( "#card" + hand . name + index , "card" + hand . name + index + "_controls" , "controls" , "div" ) ;
2020-09-22 15:29:04 -06:00
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" ) ;
2020-09-14 13:58:06 -06:00
} ) ;
2020-09-21 11:08:17 -06:00
window . UI . display [ handID ] . onclick = function ( ) {
window . gameState . active . hand = hand . name ;
updateEvent ( ) ;
}
2020-09-14 13:58:06 -06:00
} ) ;
2020-09-21 13:49:09 -06:00
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" ) ;
2020-09-14 13:58:06 -06:00
}
if ( window . UI . menu . pools . button . checked ) {
elementPlace ( "#display" , "pools" , null , "ol" ) ;
2020-09-17 14:23:12 -06:00
var myPools = Object . keys ( window . gameState . pools ) ;
myPools . sort ( ) ;
myPools . forEach ( function ( poolID ) {
2020-09-14 13:58:06 -06:00
var pool = window . gameState . pools [ poolID ] ;
2020-09-21 11:08:17 -06:00
window . UI . display [ poolID ] = elementPlace ( "#pools" , "Pool_" + pool . name , "pool" + ( pool . name == window . gameState . active . pool ? " selected" : "" ) , "li" ) ;
2020-09-29 21:23:47 +00:00
window . UI . display [ poolID ] . innerHTML = '<div class="object_name">' + pool . name + "</div>" ;
2020-09-28 21:36:31 +00:00
window . UI . display [ poolID ] . controls = elementPlace ( "#Pool_" + pool . name , "Pool_controls_" + pool . name , "controls" , "div" ) ;
2020-09-29 21:23:47 +00:00
window . UI . display [ poolID ] . content = elementPlace ( "#Pool_" + pool . name , "Pool_content_" + pool . name , "content" , "div" ) ;
window . UI . display [ poolID ] . content . innerHTML += '<div class="card">' + pool . top + "</div>" ;
2020-09-28 21:36:31 +00:00
buttonAdd ( "#Pool_controls_" + pool . name , null , "X" , function ( ) {
2020-09-22 15:43:54 -06:00
window . gameSession . send ( '{"action":"del","type":"pool","id":"' + poolID + '","deck":"' + window . gameState . active . deck + '"}' ) ;
} , "pool_button delete" , "div" ) ;
2020-09-21 11:08:17 -06:00
window . UI . display [ poolID ] . onclick = function ( ) {
window . gameState . active . pool = pool . name ;
updateEvent ( ) ;
}
2020-09-14 13:58:06 -06:00
} ) ;
2020-09-21 13:49:09 -06:00
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" ) ;
2020-09-14 13:58:06 -06:00
}
2020-09-29 22:17:15 +00:00
if ( window . UI . menu . options . button . checked ) {
elementPlace ( "#display" , "options" , null , "div" ) ;
buttonAdd ( "#options" , null , "Invite" , function ( ) {
var invite = window . location . href ;
navigator . clipboard . writeText ( invite ) . then ( function ( ) {
window . alert ( "Invite link copied" ) } ) ;
} , null , "div" ) ;
buttonAdd ( "#options" , null , "Leave Game" , function ( ) {
window . gameSession . close ( 4001 , "User is leaving" ) ;
window . location . search = "" ;
} , null , "div" ) ;
}
2020-06-09 13:48:19 -06:00
}
2020-09-02 15:26:46 -06:00
function startGameSession ( ) {
2020-09-10 11:48:31 -06:00
window . gameSession = new WebSocket ( server ) ;
2020-09-02 15:26:46 -06:00
gameSession . onmessage = function ( event ) {
var message = JSON . parse ( event . data ) ;
if ( message . userID ) { window . userID = message . userID ; }
if ( message . message ) { console . log ( message . message ) ; }
2020-09-11 12:12:08 -06:00
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"}' ) ; }
}
2020-09-28 15:35:01 +00:00
if ( message . push ) {
window . gameSession . log += "<p>" + message . user + ": " + message . action + "</p>" ;
if ( "draw" == message . action ) { window . UI . menu . decks . button . checked = true ; }
if ( "play" == message . action ) { window . UI . menu . pools . button . checked = true ; }
if ( "muligan" == message . action ) { window . UI . menu . decks . button . checked = true ; }
if ( "clear" == message . action ) { window . UI . menu . decks . button . checked = true ; }
updateEvent ( ) ;
}
2020-09-11 12:12:08 -06:00
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 ( ) ;
2020-09-02 15:26:46 -06:00
}
}
2020-09-10 11:48:31 -06:00
console . log ( message ) ;
2020-09-11 12:12:08 -06:00
2020-09-02 15:26:46 -06:00
} ;
2020-09-11 12:12:08 -06:00
gameSession . onconnect = function ( ) { } ;
2020-09-02 15:26:46 -06:00
gameSession . onclose = function ( event ) {
console . log ( event ) ;
2020-09-30 17:28:35 +00:00
popupDialog ( "connection_error" , "Connection Error!!!" , false , "The server connection was closed!" , null , function ( ) {
2020-09-30 17:10:01 +00:00
window . location . search = "" ; //reload page
} ) ;
2020-09-02 15:26:46 -06:00
} ;
}
2020-09-17 12:16:16 -06:00
2020-09-14 13:58:06 -06:00
window . document . body . innerHTML = "" ;
2020-06-09 13:48:19 -06:00
window . UI = { } ;
2020-09-14 13:58:06 -06:00
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" ) ;
2020-09-11 12:12:08 -06:00
2020-09-10 11:48:31 -06:00
var parms = new URLSearchParams ( window . location . search ) ;
2020-09-11 12:12:08 -06:00
if ( ! parms . get ( "s" ) ) {
2020-09-10 11:48:31 -06:00
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 ;
}
2020-09-11 12:12:08 -06:00
window . location . search = '?s=' + window . gameState . session ;
// window.location.reload();
2020-09-10 11:48:31 -06:00
} ) ;
2020-09-11 12:12:08 -06:00
} 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 ( ) ; }
2020-09-10 11:48:31 -06:00
}
2020-06-09 13:48:19 -06:00
< / script >
< / html >
