From a1c07dccbae02ae3663cb30bed875cfe904587a6 Mon Sep 17 00:00:00 2001 From: Arun Persaud Date: Tue, 15 Nov 2011 20:56:02 -0800 Subject: LAYOUT: redone layout of table and cards scales a lot better now and should be better for mobile devices --- css/standard.css | 211 +++++++++++++++++++++++------------------------- include/functions.php | 65 ++++++++++++--- include/game.php | 217 +++++++++++++++++++++++++++++--------------------- include/output.php | 2 +- 4 files changed, 280 insertions(+), 215 deletions(-) diff --git a/css/standard.css b/css/standard.css index 5e6ee35..5c2b9fa 100644 --- a/css/standard.css +++ b/css/standard.css @@ -60,7 +60,6 @@ footer .left { float:left; font-size:smaller;} /* sessions */ .session { - width: 100%; border-bottom: 1px solid #000; padding: 0.5em; text-align: center; @@ -134,8 +133,6 @@ footer .left { float:left; font-size:smaller;} text-align: center; z-index:22; } - - .total { top:11em; width: 14%; @@ -157,9 +154,6 @@ footer .left { float:left; font-size:smaller;} z-index:15; } -/* output possible rules for a new game */ -.rules { margin-top:24em;} - /* playing cards*/ .card { position:absolute; @@ -172,65 +166,88 @@ footer .left { float:left; font-size:smaller;} } .card img { width:8em; } +form { position: relative;} + /* display the table and the names */ div.table { - position:absolute; - width:100%; - height:37em; - margin:0; - left:0; - padding:0; -/* border: 3px solid blue; */ - top: 9.2em; + position:relative; text-align:center; + margin: 0; + padding:0; + border-bottom:1px solid #444; } -div.table img.table { +div.table div.table1 { + width:10.5%; + min-width: 10em; + text-align:center; + z-index:20; + margin: 0 auto; +} +div.middle { + position:relative; + min-height: 6em; +} +div.table div.table0 { position:absolute; - width:25%; + width:10.5%; + min-width: 10em; + min-height: 4em; top:20%; - height:22em; - left:37.5%; + right: 64.5%; + text-align:center; + z-index:20; +} +div.table img.table { + width:25%; z-index:5; + margin: 0 auto; + min-margin-left: 10xem; + min-margin-right: 10em; + min-height: 6em; display: block; - margin:0; - padding:0; + vertical-align:middle; } -div.table div { - /*background-color:green;*/ +div.table div.table2 { position:absolute; width:10.5%; + min-width: 10em; + min-height: 4em; + top:20%; + left:64.5%; text-align:center; z-index:20; } - -div.table div.table0 { - top:45%; - right:63.5%; +div.table div.table3 { + width:10.5%; + min-width: 10em; + text-align:center; + z-index:20; + margin: 0 auto; } -div.table div.table1 { - top:2%; - left:44.75%; + +img.gravatar { + width: 4em; + height: 4em; + border: 3px solid #aaa; } -div.table div.table2 { - top:45%; - left:63.5%; + +div img.button { + width: 2em; } -div.table div.table3 { - bottom:2%; - left: 44.75%; + +div span.numberoftricks { + text-align:center; } /* display the card tricks */ ul.tricks { - position:relative; - zoom:1; /* fixes an IE6 issue and hopefully doesn't mess up anything else */ + text-align:center; list-style:none; - margin:3px; - padding:0; + margin:0px; + padding:3px; padding-bottom:3px; - text-align:center; border-bottom:1px solid #444; } ul.tricks a { text-decoration:none; color:#000;} @@ -244,29 +261,31 @@ ul.tricks li.old { background-color:#fff; } ul.tricks li:hover { background-color: #bbb;} ul.tricks li.nohighlight:hover { background-color: #fff;} -ul.tricks li div.trick { - position:absolute; - width:100%; - height:35em; - top:2.2em; +div.tricks { + position: absolute; + top: 0; left: 0; - margin:0; - padding:0; -/* border: 2px solid red;*/ - display:block; + right:0; + bottom: 0; + text-align:center; + margin: 0; + padding:0 0; } -ul.tricks li div.trick { display:none;} -ul.tricks li div.trick img.arrow { - position:absolute; - margin:0; - padding:0; -/* border: 5px solid blue;*/ + +div.tricks div.trick { + position: absolute; + top: 0%; + left: 0; + right:0; + bottom: 0%; + display:none; +} +.tricks div.trick img.arrow { + position:relative; + display:inline; text-align:center; - width:16%; - height:16em; - left:42%; - right:42%; - top:10em; + height: 60%; + top: 20%; z-index:8; } @@ -274,20 +293,18 @@ ul.tricks li div.trick img.arrow { hr {clear:both;} -/*ul.tricks li:hover div.table{ display:block; }*/ - /* left player */ -ul.tricks li div div.card0 img, -ul.tricks li div div.card0 .score, +.tricks div div.card0 img, +.tricks div div.card0 .score, .vorbehalt0 { position:absolute; margin:0; padding:0; - /*border: 1px solid red;*/ - top: 40%; + /*border: 1px solid red;*/ + top: 30%; left:37.5%; right:56.5%; - width:6%; + height:40%; z-index:30; } @@ -297,7 +314,7 @@ ul.tricks li div div.card0 .score, width:10%; text-align:left; } -ul.tricks li div div.card0 span.comment{ +.tricks div div.card0 span.comment{ position:absolute; margin:0; padding:0; @@ -309,17 +326,17 @@ ul.tricks li div div.card0 span.comment{ } /* top player */ -ul.tricks li div div.card1 img, -ul.tricks li div div.card1 .score, +.tricks div div.card1 img, +.tricks div div.card1 .score, .vorbehalt1 { position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ - top: 22%; + top: 0%; left:47%; right:47%; - width:6%; + height:40%; text-align:center; z-index:30; } @@ -329,7 +346,7 @@ ul.tricks li div div.card1 .score, width:10%; z-index:30; } -ul.tricks li div div.card1 span.comment{ +.tricks div div.card1 span.comment{ position:absolute; margin:0; padding:0; @@ -342,17 +359,17 @@ ul.tricks li div div.card1 span.comment{ } /* right player */ -ul.tricks li div div.card2 img, -ul.tricks li div div.card2 .score, +.tricks div div.card2 img, +.tricks div div.card2 .score, .vorbehalt2{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ - top: 40%; + top: 30%; right:37.5%; left:56.5%; - width:6%; + height:40%; z-index:30; } .vorbehalt2{ @@ -361,7 +378,7 @@ ul.tricks li div div.card2 .score, width:10%; text-align:right; } -ul.tricks li div div.card2 span.comment{ +.tricks div div.card2 span.comment{ position:absolute; margin:0; padding:0; @@ -374,17 +391,17 @@ ul.tricks li div div.card2 span.comment{ } /* bottom player */ -ul.tricks li div div.card3 img, -ul.tricks li div div.card3 .score, +.tricks div div.card3 img, +.tricks div div.card3 .score, .vorbehalt3{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ - bottom: 20%; + bottom: 0%; left:47%; right:47%; - width:6%; + height: 40%; text-align:center; z-index:30; } @@ -394,7 +411,7 @@ ul.tricks li div div.card3 .score, width:10%; text-align:center; } -ul.tricks li div div.card3 span.comment{ +.tricks div div.card3 span.comment{ position:absolute; margin:0; padding:0; @@ -412,7 +429,7 @@ span.comment{ word-wrap: break-word; } -ul.tricks li div div span.comment span{ +.tricks div div span.comment span{ display:block; text-align:left; border-top:1px solid green; @@ -420,7 +437,6 @@ ul.tricks li div div span.comment span{ .mycards { margin:0; - margin-top:38.5em; padding:0; border-top: 2px solid gray; /* border-bottom: 2px solid green;*/ @@ -706,27 +722,6 @@ table.openid td, table.openid th{ background-color: #fc3; } -div.table div img.gravatar, img.gravatar { - width: 4em; - height: 4em; - border: 3px solid #aaa; -} -div.table div img.gravatar { - float:left; -} - - -div img.button { - float: right; - width: 2em; -} - -div span.numberoftricks { - text-align:center; - clear:both; - display:block; -} - .highcall { background-color: #fc3; } @@ -813,10 +808,6 @@ header, footer { .user { margin-left:5%;margin-right:5%; } -div.table img.table { - width:50%; -} - .message { position: relative; background-color: #fff; diff --git a/include/functions.php b/include/functions.php index fc46a61..0313bed 100644 --- a/include/functions.php +++ b/include/functions.php @@ -971,7 +971,7 @@ function can_call($what,$hash) return 0; } -function display_table () +function display_table_begin () { global $gameid, $GT, $debug,$INDEX,$defaulttimezone,$session; global $RULES,$GAME,$gametype; @@ -991,10 +991,57 @@ function display_table () "WHERE Hand.game_id='".$gameid."' ". "ORDER BY position ASC"); - echo "
\n". - " \"table\"\n"; - while($r = DB_fetch_array($result)) - { + $row0 = DB_fetch_array($result); + $row1 = DB_fetch_array($result); + $row2 = DB_fetch_array($result); + $row3 = DB_fetch_array($result); + + echo "
\n"; + display_single_user($row1); + echo "\n
\n"; + display_single_user($row0); + echo " \"table\"\n"; + display_single_user($row2); + + return; +} +function display_table_end () +{ + global $gameid, $GT, $debug,$INDEX,$defaulttimezone,$session; + global $RULES,$GAME,$gametype; + + $result = DB_query("SELECT User.fullname as name,". + " Hand.position as position, ". + " User.id, ". + " Hand.party as party, ". + " Hand.sickness as sickness, ". + " Hand.point_call, ". + " User.last_login, ". + " Hand.hash, ". + " User.timezone, ". + " User.email ". + "FROM Hand ". + "LEFT JOIN User ON User.id=Hand.user_id ". + "WHERE Hand.game_id='".$gameid."' ". + "ORDER BY position ASC"); + + $row0 = DB_fetch_array($result); + $row1 = DB_fetch_array($result); + $row2 = DB_fetch_array($result); + $row3 = DB_fetch_array($result); + + echo "
\n"; + display_single_user($row3); + echo "
\n"; + + return; +} + +function display_single_user($r) +{ + global $gameid, $GT, $debug,$INDEX,$defaulttimezone,$session; + global $RULES,$GAME,$gametype; + $name = $r[0]; $pos = $r[1]; $user = $r[2]; @@ -1139,7 +1186,7 @@ function display_table () "title=\"local time: ".date("Y-m-d H:i:s",$timenow). " ". "last login: ".date("Y-m-d H:i:s",$lastlogin)."\" />"; - echo " "; + echo "
"; /* show how many tricks the person made */ switch($wins) { @@ -1156,12 +1203,6 @@ function display_table () } echo "\n"; echo "
\n"; - - } - echo "\n"; /* end output table */ - - - return; } diff --git a/include/game.php b/include/game.php index c78482c..621b0b0 100644 --- a/include/game.php +++ b/include/game.php @@ -330,6 +330,103 @@ if($mystatus!='gameover') if(isset($_SESSION['id'])) DB_update_user_timestamp($_SESSION['id']); + +/****************************************************************************** + * Output menu for selecting tricks + ******************************************************************************/ + +switch($mystatus) + { + case 'start': + break; + case 'init': + case 'check': + /* output sickness of other playes, in case they already selected and are sitting in front of the current player */ + echo "\n\n"; /* end div trick, end li trick , end tricks*/ + /* end displaying sickness */ + break; + case 'poverty': + /* output pre-game trick in case user reloads, + * only needs to be done when a team has been formed */ + if($myparty=='re' || $myparty=='contra') + { + echo "\n\n\n"; /* end div trick, end li trick , end ul tricks */ + } + /* end output pre-game trick */ + break; + case 'play': + case 'gameover': + + echo "\n\n\n"; + + break; + default: + } + + /****************************************************************************** * Output tricks played, table, messages, and cards (depending on game status) ******************************************************************************/ @@ -338,7 +435,7 @@ if($mystatus!='gameover') echo "
\n"; /* display the table and the names */ -display_table(); +display_table_begin(); /* mystatus gets the player through the different stages of a game. * start: does the player want to play? @@ -361,6 +458,7 @@ $cards_status = CARDS_EMPTY; */ $messages = array(); + switch($mystatus) { case 'start': @@ -428,28 +526,6 @@ switch($mystatus) ***************************/ if(!myisset('solo','wedding','poverty','nines','lowtrump') ) { - /* output sickness of other playes, in case they already selected and are sitting in front of the current player */ - echo "\n\n"; /* end div trick, end li trick , end tricks*/ - /* end displaying sickness */ - $mycards = DB_get_hand($me); output_check_for_sickness($me,$mycards); @@ -546,28 +622,6 @@ switch($mystatus) * this can therefore only be handled once all players finished the last stage */ - /* output sickness of other playes, in case they already selected and are sitting in front of the current player */ - echo "\n\n"; /* end div trick, end li trick , end tricks*/ - /* end displaying sickness */ - $messages[] = _('Checking if someone else selected solo, nines, wedding or poverty.'); /* check if everyone has reached this stage */ @@ -879,24 +933,6 @@ switch($mystatus) }; } - /* output pre-game trick in case user reloads, - * only needs to be done when a team has been formed */ - if($myparty=='re' || $myparty=='contra') - { - echo "\n\n\n"; /* end div trick, end li trick , end ul tricks */ - } - /* end output pre-game trick */ - /* get hand */ $mycards = DB_get_hand($me); @@ -1270,7 +1306,7 @@ switch($mystatus) $pos = DB_get_startplayer_by_gameid($gameid)-1; $firstcard = ''; /* first card in a trick */ - echo "\n\n"; /* end ul tricks*/ + echo "\n"; /* end ul tricks*/ if($myturn && !myisset('card') && $mystatus=='play' ) { @@ -1987,6 +2017,9 @@ switch($mystatus) myerror("error in testing the status"); } /*end of output: tricks, table, messages, card */ +/* display the 2nd half of table and the names */ +display_table_end(); + /************** * show cards * **************/ diff --git a/include/output.php b/include/output.php index 325cf4a..823f193 100644 --- a/include/output.php +++ b/include/output.php @@ -378,7 +378,7 @@ function output_header() - + -- cgit v1.2.3-18-g5258