LAYOUT: fixed some typos, changed CSS a bit

the linebreak for displaying the tricks should be gone now.
Fixed also quite a few other small things at the same time.

4 files changed, 111 insertions, 91 deletions

diff --git a/css/standard.css b/css/standard.css
index ee2c4a2..d536394 100644
--- a/css/standard.css
+++ b/css/standard.css
@@ -24,8 +24,8 @@
   font-size:smaller;
   clear:both;
 }
-.footer .right{  float:right; }
-.footer .left{  float:left; }
+.footer .right { float:right; }
+.footer .left  { float:left; }
 
 .status {
   position:absolute;
@@ -37,28 +37,29 @@
 .joingame,.sickness,.poverty,.total,.message {
  position: absolute;
  width: 20%;
-
- top:20em;
+ top:22em;
  left:40%;
  right:40%;
  text-align: center;
+ z-index:22
 }
 
+
 .total .re {
  position: absolute;
  left: -4em;
  top:8em;
  background-color: #fff;
+ z-index:15;
 }
 .total .contra {
  position: absolute;
  right: -4em;
  top:8em;
  background-color: #fff;
+ z-index:15;
 }
 
-
-
 .poverty {
   top:32em;
   z-index:15;
@@ -84,53 +85,53 @@ margin-top:20em;
 /* display the table and the names */
 div.table {
   position:absolute;
-  left:25%;
-  right:25%;
+  width:99%;
+  height:35em;
   margin:0;
   padding:0;
-/*  border: 5px solid blue;*/
-  top: 16em;
+//  border: 3px solid blue;
+  top: 8.2em;
   text-align:center;
 }
 
-div.table img {
-  top:25%;
-  bottom:25%;
-  height:50%;
-  width:50%;
+div.table img.table {
+  position:absolute;
+  width:25%;
+  top:20%;
+  height:22em;
+  left:37.5%;
   z-index:9;
   display: block;
-  margin-left: auto;
-  margin-right: auto
+  margin:0;
+  padding:0;
 }
 div.table div {
   /*background-color:green;*/
   position:absolute;
-  width:25%;
-  height:25%;
+  width:12.5%;
   text-align:center;
+  z-index:20;
 }
 div.table div img{
   /*background-color:green;*/
-  width:25%;
-  height:25%;
+  width:20%;
 }
 
 div.table div.table0 {
-  top:37.5%;
-  left:0%;
+  top:45%;
+  right:62.5%;
 }
 div.table div.table1 {
-  top:-25%;
-  left:37.5%;
+  top:5%;
+  left:43.75%;
 }
 div.table div.table2 {
-  top:37.5%;
-  left:75%;
+  top:45%;
+  left:62.5%;
 }
 div.table div.table3 {
-  bottom:-25%;
-  left: 37.5%;
+  bottom:5%;
+  left: 43.75%;
 }
 
 ul.tricks {
@@ -145,7 +146,7 @@ ul.tricks {
 ul.tricks a { text-decoration:none; color:#000;}
 ul.tricks li {
   /*background-color:blue;*/
-  margin:0;
+  margin:0.1em;
   padding:0.2em 0.5em;
   display:inline;
 }
@@ -154,6 +155,16 @@ 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:1.2em;
+  margin:0;
+  padding:0;
+//  border: 2px solid red;
+  display:block;
+}
+ul.tricks li div.trick {
   display:none;
 }
 
@@ -164,9 +175,10 @@ ul.tricks li div.trick img.arrow {
 /*  border: 5px solid blue;*/
   text-align:center;
   width:16%;
+  height:16em;
   left:42%;
   right:42%;
-  top:12em;
+  top:9em;
   z-index:8;
 }
 
@@ -179,7 +191,7 @@ ul.tricks li div div.card0 img,ul.tricks li div div.card0 .score{
   margin:0;
   padding:0;
   /*border: 1px solid red;*/
-  top: 16em;
+  top: 40%;
   left:37.5%;
   right:56x.5%;
   width:6%;
@@ -190,7 +202,7 @@ ul.tricks li div div.card0 span.comment{
   margin:0;
   padding:0;
   /*border: 1px solid red;*/
-  top: 3em;
+  top: 5%;
   right:66.5%;
   left:17.5%;
   width:16%;
@@ -200,7 +212,7 @@ ul.tricks li div div.card1 img,ul.tricks li div div.card1 .score {
   margin:0;
   padding:0;
   /*border: 1px solid red;*/
-  top: 10em;
+  top: 20%;
   left:47%;
   right:47%;
   width:6%;
@@ -212,7 +224,7 @@ ul.tricks li div div.card1 span.comment{
   margin:0;
   padding:0;
   /*border: 1px solid red;*/
-  top: 3em;
+  top: 5%;
   left:66.5%;
   right:17.5%;
   width:16%;
@@ -223,7 +235,7 @@ ul.tricks li div div.card2 img,ul.tricks li div div.card2 .score{
   margin:0;
   padding:0;
   /*border: 1px solid red;*/
-  top: 16em;
+  top: 40%;
   right:37.5%;
   left:56x.5%;
   width:6%;
@@ -234,7 +246,7 @@ ul.tricks li div div.card2 span.comment{
   margin:0;
   padding:0;
   /*border: 1px solid red;*/
-  top: 24em;
+  top: 80%;
   left:66.5%;
   right:17.5%;
   width:16%;
@@ -245,7 +257,7 @@ ul.tricks li div div.card3 img,ul.tricks li div div.card3 .score{
   margin:0;
   padding:0;
   /*border: 1px solid red;*/
-  top: 22em;
+  bottom: 20%;
   left:47%;
   right:47%;
   width:6%;
@@ -257,7 +269,7 @@ ul.tricks li div div.card3 span.comment{
   margin:0;
   padding:0;
   /*border: 1px solid red;*/
-  top: 24em;
+  top: 80%;
   right:66.5%;
   left:17.5%;
   width:16%;
@@ -275,7 +287,7 @@ ul.tricks li div div span.comment span{
 
 .mycards {
   margin:0;
-  margin-top:33em;
+  margin-top:34.5em;
   padding:0;
   border:1px solid red;
   background-color:yellow;
@@ -403,4 +415,8 @@ div span img.button {
 table.score {
   width:10em;
   border-collapse:collapse;
+}
+
+.bigger {
+  font-size:larger;
 }
\ No newline at end of file
diff --git a/functions.php b/functions.php
index 1e80c31..a9ea34b 100644
--- a/functions.php
+++ b/functions.php
@@ -676,7 +676,7 @@ function display_table ()
 			"ORDER BY position ASC");
 
   echo "<div class=\"table\">\n".
-    "  <img src=\"pics/table.png\" alt=\"table\" />\n";
+    "  <img class=\"table\" src=\"pics/table.png\" alt=\"table\" />\n";
   while($r = mysql_fetch_array($result,MYSQL_NUM))
     {
       $name  = $r[0];
@@ -806,7 +806,7 @@ function display_user_menu()
 {
   global $wiki,$myid,$host;
   echo "<div class=\"usermenu\">\n".
-    "<a href=\"index.php\"> go to my user page </a>";
+    "<a href=\"index.php\"> Go to my user page </a>";
 
   $result = mysql_query("SELECT Hand.hash,Hand.game_id,Game.player from Hand".
 			" LEFT JOIN Game On Hand.game_id=Game.id".
@@ -821,7 +821,7 @@ function display_user_menu()
       echo "<a href=\"".$host."?me=".$r[0]."\">game ".DB_format_gameid($r[1])." </a><br />\n";
     }
 
-  echo "<hr /> <a href=\"".$host."?new\">start a new game</a>\n";
+  echo "<hr /> <a href=\"".$host."?new\">Start a new game</a>\n";
 
   echo "<hr /> <a href=\"".substr($host,0,-9)."stats.php\">Statistics</a>\n";
 
diff --git a/index.php b/index.php
index 312dc92..a0e2fb2 100644
--- a/index.php
+++ b/index.php
@@ -29,18 +29,22 @@ if(myisset("logout"))
     session_unset();
     session_destroy();
     $_SESSION = array();
-    echo "you are now logged out!";
+    echo "<div class=\"message\"><span class=\"bigger\">You are now logged out!</span><br />\n".
+      "(<a href=\"$host\">This will take you back to the home-page</a>)</div>";
   }
 else if(myisset("new"))
   {
     if( isset($_SESSION["name"]) )
       {
 	$names = DB_get_all_names();
+	echo "<div class=\"user\">\n";
 	output_form_for_new_game($names);
+	echo "</div>\n";
+	display_user_menu();
       }
     else
       {
-	echo "Please log in.";
+	echo "<div class=\"message\">Please <a href=\"$host\">log in</a>.</div>";
       }
   }
 /*check if everything is ready to set up a new game */
@@ -1401,13 +1405,13 @@ else if(myisset("me"))
 		    "      <img class=\"arrow\" src=\"pics/arrow".($pos-1).".png\" alt=\"table\" />\n";
 		}
 
-	      echo "<div class=\"card".($pos-1)."\">";
+	      echo "      <div class=\"card".($pos-1)."\">\n        ";
 
 	      /* display comments */
 	      display_card($card,$PREF["cardset"]);
 	      if($comment!="")
-		echo "  <span class=\"comment\"> ".$comment."</span>\n";
-	      echo "</div></div></li>\n";
+		echo "\n        <span class=\"comment\"> ".$comment."</span>\n";
+	      echo "      </div>\n";
 
 	      /*check if we still have cards left, else set status to gameover */
 	      if(sizeof(DB_get_hand($me))==0)
@@ -1686,7 +1690,7 @@ else if(myisset("me"))
 				" GROUP BY User.fullname" );
 	  while( $r = mysql_fetch_array($result,MYSQL_NUM))
 	    echo "      <div class=\"card".($r[3]-1)."\">\n".
-	         "        <span class=\"score\">".$r[2]."<br /> ".$r[1]."</span>\n".
+	         "        <div class=\"score\">".$r[2]."<br /> ".$r[1]."</div>\n".
 	         "      </div>\n";
 
 	  echo "    </div>\n  </li>\n";  /* end div trick, end li trick */
@@ -1759,7 +1763,7 @@ else if(myisset("me"))
       /* check if game is over, display results */
       if(DB_get_game_status_by_gameid($gameid)=='play')
 	{
-	  echo "the game is over for you.. other people still need to play though";
+	  echo "The game is over for you.. other people still need to play though";
 	}
       else
 	{
@@ -2123,7 +2127,7 @@ else if( myisset("email","password") || isset($_SESSION["name"]) )
 	 }
        else
 	 {
-	   echo "Sorry email and password don't match. Please <a href=\"$host\">try again</a>. <br />";
+	   echo "<div class=\"message\">Sorry email and password don't match. Please <a href=\"$host\">try again</a>. </div>";
 	 }
      };
      output_footer();
diff --git a/output.php b/output.php
index 39f67b0..8dc0c2e 100644
--- a/output.php
+++ b/output.php
@@ -8,19 +8,19 @@ function output_user_settings()
 
   echo "<div class=\"useroptions\">\n";
   echo "<h4> Settings </h4>\n";
-  echo "<a href=\"index.php?passwd=ask\">change password</a><br />";
+  echo "<a href=\"index.php?passwd=ask\">Change password</a><br />";
 
   echo "<h5> Card set </h5>\n";
   if( $PREF["cardset"] == "english" )
-    echo "<a href=\"index.php?setpref=germancards\">use german cards</a><br />";
+    echo "<a href=\"index.php?setpref=germancards\">Change to German cards</a><br />";
   else
-    echo "<a href=\"index.php?setpref=englishcards\">use english cards</a> <br />";
+    echo "<a href=\"index.php?setpref=englishcards\">Change to English cards</a> <br />";
 
   echo "<h5> Email </h5>\n";
   if( $PREF["email"] == "emailaddict" )
-    echo "<a href=\"index.php?setpref=emailnonaddict\">I'm not addicted (emails for each move)</a><br />";
+    echo "<a href=\"index.php?setpref=emailnonaddict\">Change to non-addicted mode (emails for each move)</a><br />";
   else
-    echo "<a href=\"index.php?setpref=emailaddict\">Addicted (minimal amount of emails)</a> <br />";
+    echo "<a href=\"index.php?setpref=emailaddict\">Change to addicted mode (minimal amount of emails)</a> <br />";
 
   echo "</div>\n";
 
@@ -58,58 +58,58 @@ function output_form_for_new_game($names)
     /* ask for player names */
     $i=0;
   foreach( array("PlayerA","PlayerB","PlayerC","PlayerD") as $player)
-  {
-    srand((float) microtime() * 10000000);
-    $randkey = array_rand($names);
-    $rand = $names[$randkey];
-    echo  "<span class=\"table".$i."\">";
-    $i++;
-    echo "    Name:  <select name=\"$player\" size=\"1\" />  \n";
-    foreach($names as $name)
     {
-      if($name==$rand)
+      srand((float) microtime() * 10000000);
+      $randkey = array_rand($names);
+      $rand = $names[$randkey];
+      echo  "<div class=\"table".$i."\">\n";
+      $i++;
+      echo "    Name:  \n  <select name=\"$player\" size=\"1\" />  \n";
+      foreach($names as $name)
 	{
-	  echo "     <option selected=\"selected\">$name</option>\n";
+	  if($name==$rand)
+	    {
+	      echo "     <option selected=\"selected\">$name</option>\n";
+	    }
+	  else
+	    echo "     <option>$name</option>\n";
 	}
-      else
-	echo "     <option>$name</option>\n";
+      echo "  </select>\n</div>\n";
     }
-    echo "  </select></span>\n";
-   }
-?>   
+?>
     </div>
-   <h2 class="rules"> Rules </h2> 
+   <h2 class="rules"> Rules </h2>
       <p> Some areas are grayed out which means that the rule is not implemented yet and therefore cannot be selected </p>
-      <p> ten of hearts: 
+      <p> Ten of hearts:
          <ul>
          <li> <input type="radio" name="dullen" value="none" /> just normal non-trump  </li>
          <li> <input type="radio" name="dullen" value="firstwins" /> first ten of hearts wins the trick </li>
          <li> <input type="radio" name="dullen" value="secondwins" checked="checked" /> second ten of hearts wins the trick </li>
          </ul>
       </p>
-      <p> schweinchen (both foxes), only in normal games or silent solos: 
+      <p> Schweinchen (both foxes), only in normal games or silent solos:
         <ul>
         <li> <input type="radio" name="schweinchen" value="none" checked="checked" /> none </li>
-        <li> <input type="radio" name="schweinchen" value="both" /> 
+        <li> <input type="radio" name="schweinchen" value="both" />
               both become highest trump (automatic call at beginning of the game)
         </li>
-        <li> <input type="radio" name="schweinchen" value="second" /> 
+        <li> <input type="radio" name="schweinchen" value="second" />
               first one normal, second one becomes highest (call during the game) </li>
-        <li> <input type="radio" name="schweinchen" value="secondaftercall"  disabled="disabled" /> 
+        <li> <input type="radio" name="schweinchen" value="secondaftercall"  disabled="disabled" />
       second one become highest only in case re/contra was announced (not working yet)
         </li>
         </ul>
       </p>
-      <p> Call Re/Contra, etc.: 
+      <p> Call Re/Contra, etc.:
         <ul>
            <li><input type="radio" name="call" value="1st-own-card" checked="checked" />
                 Can call re/contra on the first <strong>own</strong> card played, 90 on the second, etc.</li>
-           <li><input type="radio" name="call" value="5th-card" /> 
+           <li><input type="radio" name="call" value="5th-card" />
                 Can call re/contra until 5th card is played, 90 until 9th card is played, etc.</li>
-           <li><input type="radio" name="call" value="9-cards"  /> 
+           <li><input type="radio" name="call" value="9-cards"  />
                 Can call re/contra until 5th card is played, 90 if player still has 9 cards, etc.</li>
         </ul>
-      </p>      
+      </p>
    <input type="submit" value="start game" />
  </form>
 <?php
@@ -117,7 +117,7 @@ function output_form_for_new_game($names)
 
 function display_card($card,$dir="english")
 {
-  /* cards are only availabl for the odd values, e.g. 1.png, 3.png, ... 
+  /* cards are only availabl for the odd values, e.g. 1.png, 3.png, ...
    * convert even cards to the matching odd value */
 
   if( $card/2 - (int)($card/2) == 0.5)
@@ -142,7 +142,7 @@ function output_check_for_sickness($me,$mycards)
  ?>
   <div class="sickness"> Thanks for joining the game...<br />
 
-    do you want to play solo? 
+    do you want to play solo?
     <select name="solo" size="1">
       <option selected="selected">No</option>
       <option>trumpless</option>
@@ -152,11 +152,11 @@ function output_check_for_sickness($me,$mycards)
       <option>club</option>
       <option>spade</option>
       <option>heart</option>
-    </select>     
+    </select>
     <br />
 
- <?php   
-      
+ <?php
+
   echo "Wedding?";
   if(check_wedding($mycards))
      {
@@ -227,7 +227,7 @@ function output_check_want_to_play($me)
    Do you want to play a game of DoKo? <br />
    yes<input type="radio" name="in" value="yes" />
    no<input type="radio" name="in" value="no" /> <br />
-<?php   
+<?php
   echo "<input type=\"hidden\" name=\"me\" value=\"$me\" />\n";
   echo "\n";
   echo "<input type=\"submit\" value=\"submit\" />\n";
@@ -252,9 +252,9 @@ function output_home_page($pre,$game,$done,$avgtime)
 
     if($game==0)
       echo "zero games that are ongoing. ";
-    else if($game==1)	
+    else if($game==1)
       echo "one game that is ongoing. ";
-    else 
+    else
       echo "$game games that are ongoing. ";
 
     echo "<br />\n";
@@ -303,7 +303,7 @@ function output_header()
   <head>
      <title>e-Doko</title>
      <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
-     <link rel="stylesheet" type="text/css" href="css/standard.css" />	
+     <link rel="stylesheet" type="text/css" href="css/standard.css" />
      <script type="text/javascript">
        function hl(num) {
          if(document.getElementById){
@@ -382,7 +382,7 @@ function output_password_recovery($email,$password)
   echo "  <input type=\"hidden\" name=\"email\" value=\"".$email."\" />\n";
   echo "  <input type=\"hidden\" name=\"password\" value=\"".$password."\" />\n";
   echo "  <input type=\"hidden\" name=\"passwd\"  value=\"set\" />\n";
-?>    
+?>
      <fieldset>
        <legend>Password recovery</legend>
         <table>