2019-03-06 12:11:43 +01:00
var style = getComputedStyle ( document . body ) ;
var n = style . getPropertyValue ( "--tictactoe_n" ) ;
var tilesize = style . getPropertyValue ( "--tile-size" ) ;
var default _opacity = style . getPropertyValue ( "--opacity" ) ;
var ground _color = style . getPropertyValue ( "--ground-color" ) ;
2019-03-21 12:13:46 +01:00
var main _container = document . getElementById ( "main-container" ) ;
2019-03-06 12:11:43 +01:00
2019-03-07 10:38:08 +01:00
2019-03-21 12:13:46 +01:00
var main _menu = new Infobar ( main _container ) ;
var grid = new Grid ( n , main _container , tilesize , tilesize , ground _color ) ;
var sub _menu = new Infobar ( main _container ) ;
// fill containers with buttons and containers:
// empty dummy container on top (to force other containers to be at the bottom)
dummy _main = main _menu . create _infocontainer ( ) ;
dummy _sub = sub _menu . create _infocontainer ( ) ;
// start container:
create _game _container = main _menu . create _infocontainer ( ) ;
create _game _container . create _label ( "Start Local Game" ) ;
b _local _game = create _game _container . create _button ( "Local Game" ) ;
2019-03-24 16:43:29 +01:00
2019-03-21 12:13:46 +01:00
// register container:
register _container = main _menu . create _infocontainer ( ) ;
2019-03-23 16:32:55 +01:00
register _container . create _label ( "Login to play online" ) ;
2019-03-21 12:13:46 +01:00
i _register _username = register _container . create _input ( "username" ) ;
i _register _pw = register _container . create _input ( "password" , true ) ;
b _register = register _container . create _button ( "register/login" ) ;
2019-03-24 16:43:29 +01:00
//register_container.create_label("(creates new account for a new username)");
2019-03-21 12:13:46 +01:00
// logout:
2019-03-24 16:43:29 +01:00
logout _container = main _menu . create _infocontainer ( ) ;
2019-03-21 12:13:46 +01:00
l _username = logout _container . create _label ( "logged in as: " ) ;
b _logout = logout _container . create _button ( "logout" ) ;
// fill subcontainer:
match _slot _container = sub _menu . create _infocontainer ( ) ;
2019-03-22 22:05:30 +01:00
match _slot _container . create _label ( "Running Matches<br>(click to open)" ) ;
2019-03-21 12:13:46 +01:00
2019-03-24 16:43:29 +01:00
// local match control:
match _control = sub _menu . create _infocontainer ( ) ;
b _end _game = match _control . create _button ( "Close Match" ) ;
2019-03-21 12:13:46 +01:00
// search match:
2019-03-24 16:43:29 +01:00
search _match _container = sub _menu . create _infocontainer ( ) ;
2019-03-21 12:13:46 +01:00
search _match _container . create _label ( "Create Online Match" ) ;
b _match _search = search _match _container . create _button ( "random match" ) ;
l _match _op = search _match _container . create _input ( "player name" ) ;
b _match _invite = search _match _container . create _button ( "invite player" ) ;
2019-03-24 16:43:29 +01:00
search _match _container . create _label ( "Invite friends:" )
2019-03-21 12:13:46 +01:00
//status:
status _container = main _menu . create _infocontainer ( ) ;
2019-03-21 17:30:24 +01:00
l _status _head = status _container . create _label ( "Status:" ) ;
2019-03-21 20:03:34 +01:00
l _status = status _container . create _label ( "select gamemode. click <br> <a href=https://en.wikipedia.org/wiki/Ultimate_tic-tac-toe#Rules>[here]</a> for the rules!" ) ;
2019-03-21 12:13:46 +01:00
2019-03-22 22:05:30 +01:00
2019-03-21 12:13:46 +01:00
// global vars:
game _manager = null ;
logged _in = false ;
// connection stuff:
var connection = null ;
2019-03-21 15:41:38 +01:00
var session _id = null ;
// cookies:
function get _cookie ( cname ) {
var name = cname + "=" ;
var ca = document . cookie . split ( ';' ) ;
for ( var i = 0 ; i < ca . length ; i ++ ) {
var c = ca [ i ] ;
while ( c . charAt ( 0 ) == ' ' ) {
c = c . substring ( 1 ) ;
}
if ( c . indexOf ( name ) == 0 ) {
return c . substring ( name . length , c . length ) ;
}
}
return "" ;
}
function set _cookie ( cname , cvalue , exdays ) {
var d = new Date ( ) ;
d . setTime ( d . getTime ( ) + ( exdays * 24 * 60 * 60 * 1000 ) ) ;
var expires = "expires=" + d . toUTCString ( ) ;
document . cookie = cname + "=" + cvalue + ";" + expires + ";path=/" ;
}
function check _cookie ( cname ) {
var tmp = get _cookie ( cname ) ;
if ( tmp != "" ) {
return true ;
}
return false ;
}
2019-03-21 12:13:46 +01:00
// global funcs:
disable _all _containers = function ( )
{
create _game _container . hide ( ) ;
register _container . hide ( ) ;
logout _container . hide ( ) ;
match _slot _container . hide ( ) ;
search _match _container . hide ( ) ;
match _control . hide ( ) ;
status _container . hide ( ) ;
dummy _main . hide ( ) ;
dummy _sub . hide ( ) ;
}
end _local _game = function ( )
{
disable _all _containers ( ) ;
create _game _container . show ( ) ;
status _container . show ( ) ;
if ( logged _in )
{
logout _container . show ( ) ;
search _match _container . show ( ) ;
match _slot _container . show ( ) ;
}
else
{
register _container . show ( ) ;
}
game _manager = null ;
}
on _close _click = function ( ) {
if ( game _manager != null )
{
game _manager . end _game ( ) ;
end _local _game ( ) ;
}
else if ( connection != null )
{
connection . on _close _click ( ) ;
2019-03-21 14:15:00 +01:00
match _control . hide ( ) ;
2019-03-21 12:13:46 +01:00
}
}
start _local _game = function ( )
{
console . log ( "clicked" ) ;
disable _all _containers ( ) ;
match _control . show ( ) ;
dummy _main . show ( ) ;
dummy _sub . show ( ) ;
status _container . show ( ) ;
game _manager = new LocalMatchManager ( grid , l _status , match _control , end _local _game ) ;
}
// connection stuff:
login _callback = function ( )
{
logged _in = true ;
if ( game _manager != null )
{
game _manager . end _game ( ) ;
}
end _local _game ( ) ;
l _username . innerHTML = "logged in as: " + connection . player . get _name ( ) ;
2019-03-21 15:41:38 +01:00
set _cookie ( "sessionid" , connection . session _id , 30 ) ;
2019-03-21 12:13:46 +01:00
}
logout = function ( )
{
logged _in = false ;
if ( connection != null )
{
connection . close ( ) ;
2019-03-21 15:41:38 +01:00
if ( check _cookie ( "sessionid" ) )
{
// delete session:
session _id = get _cookie ( "sessionid" ) ;
set _cookie ( "sessionid" , session _id , - 100 ) ;
2019-03-21 17:17:42 +01:00
session _id = null ;
2019-03-21 15:41:38 +01:00
}
2019-03-21 12:13:46 +01:00
}
connection = null ;
grid . unblock _all ( ) ;
grid . deactivate _all ( ) ;
grid . block _all ( ) ;
end _local _game ( ) ;
}
2019-03-21 15:41:38 +01:00
reconnect = function ( )
{
if ( check _cookie ( "sessionid" ) )
{
session _id = get _cookie ( "sessionid" ) ;
if ( connection != null )
{
connection . close ( ) ;
}
2019-03-24 16:43:29 +01:00
connection = new WebsocketConnection ( server _url , server _port , grid , l _status , match _slot _container , match _control , search _match _container , login _callback , on _connection _error ) ;
2019-03-21 15:41:38 +01:00
connection . reconnect ( session _id ) ;
}
}
on _connection _error = function ( )
{
connection = null ;
logout ( ) ;
}
login = function ( ) {
if ( connection != null )
{
connection . close ( ) ;
}
2019-03-24 16:43:29 +01:00
connection = new WebsocketConnection ( server _url , server _port , grid , l _status , match _slot _container , match _control , search _match _container , login _callback , on _connection _error ) ;
2019-03-23 16:32:55 +01:00
connection . connect ( i _register _username . value . toLowerCase ( ) , i _register _pw . value ) ;
2019-03-21 15:41:38 +01:00
}
2019-03-21 12:13:46 +01:00
search _match = function ( )
{
if ( connection != null )
{
connection . send _match _request ( null ) ;
}
}
invite _player = function ( )
{
if ( connection != null )
{
if ( l _match _op . value == "" )
{
l _status . innerHTML = "choose your opponent first!" ;
}
else
{
connection . send _match _request ( l _match _op . value ) ;
}
}
}
2019-03-24 16:43:29 +01:00
2019-03-21 12:13:46 +01:00
// initiate stuff and connect events:
end _local _game ( ) ;
b _local _game . addEventListener ( "click" , start _local _game ) ;
b _end _game . addEventListener ( "click" , on _close _click ) ;
b _register . addEventListener ( "click" , login ) ;
b _logout . addEventListener ( "click" , logout ) ;
b _match _search . addEventListener ( "click" , search _match ) ;
b _match _invite . addEventListener ( "click" , invite _player ) ;
2019-03-21 15:41:38 +01:00
reconnect ( ) ;
2019-03-21 12:13:46 +01:00
// register resize event:
2019-03-06 12:11:43 +01:00
window . addEventListener ( "resize" , function ( ) {
var tilesize = getComputedStyle ( document . body ) . getPropertyValue ( "--tile-size" ) ;
grid . on _screen _orientation _change ( tilesize , tilesize ) ;
2019-03-21 17:17:42 +01:00
} ) ;
window . onload = function ( ) {
window . onfocus = function ( ) {
if ( session _id != null && connection == null )
{
reconnect ( ) ;
}
} ;
} ;