not quite where I want it to be, but perhaps good enough to show the alpha testers ;)

author: arun <arun@nubati.net> 2006-11-28 10:49:07 +0000
committer: arun <arun> 2006-11-28 10:49:07 +0000
commit: 048d8cb807f4b76a0fb989d3945bda7ebb683803 (patch)
tree: 34beb73c49ba941db5635b90c03914a02d7214b6
parent: 01703346aa74f93edd32854c3e250907f3209cf3 (diff)
download: e-DoKo-048d8cb807f4b76a0fb989d3945bda7ebb683803.tar.gz
e-DoKo-048d8cb807f4b76a0fb989d3945bda7ebb683803.tar.bz2
e-DoKo-048d8cb807f4b76a0fb989d3945bda7ebb683803.zip
2 files changed, 155 insertions, 192 deletions
diff --git a/index.php b/index.php
index b8a7141..413b810 100644
--- a/index.php
+++ b/index.php
@@ -6,8 +6,32 @@
      <title>e-Doko</title>
      <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
      <link rel="stylesheet" type="text/css" href="standard.css" />	
+     <script type="text/javascript">
+       function hl(num) {
+         if(document.getElementById){
+	   var i;
+	   for(i=1;i<13;i++){
+	     if(document.getElementById("trick"+i))
+	       document.getElementById("trick"+i).style.display = 'none';
+	   }
+	   document.getElementById("trick"+num).style.display = 'block';
+	 }
+       }
+       function high_last(){
+	 if(document.getElementById){
+	   var i;
+	   for(i=12;i>0;i--) {
+	     if(document.getElementById("trick"+i))
+	       {
+		 hl(i);
+		 break;
+	       }
+	   }
+	 }
+       }
+     </script>
   </head>
-<body>
+<body onload="high_last();">
 <div class="header">
 <h1> Welcome to E-Doko </h1>
 <p>(please hit shift-reload:))</p>
@@ -19,7 +43,7 @@
 
 $host  = "http://doko.nubati.net/index.php";
 $wiki  = "http://wiki.nubati.net/index.php?title=EmailDoko";
-$debug = 0;
+$debug = 1;
 
 $last=-2;
 
@@ -401,8 +425,6 @@ function save_status()
 /*****************  M A I N **************************/
 
 echo "<p>If you find bugs, please list them in the <a href=\"".$wiki."\">wiki</a>.</p>\n";
-	
-echo "<p> Names that are underlined have a comment, which you can access by hovering over the name with your mouse ;)</p>\n";
 echo "</div>\n";
 
 /* end header */
@@ -840,15 +862,23 @@ else
 	       echo $player[$hash[$game["wedding"]]]["name"]." is playing a wedding!<br />\n";
 	     
 	     /* show history */
+	     /* old tricks as list */
+	     echo "<ul class=\"oldtrick\">\n";
+	     echo "  <li> History: </li>\n";
+	     $j=0;
 	     foreach($history as $play) 
 	       {
+		 $j++;
 		 $trick = explode(":",$play);
 		 
 		 /* found old trick, display it */
 		 if(sizeof($trick)==5)
-		   echo "<div class=\"oldtrick background".$play[0]."\"><div class=\"table\">\n";
+		   echo "  <li onclick=\"hl('$j');\">Trick $j\n    <div class=\"table\" id=\"trick".$j."\">\n      <img class=\"table\" src=\"pics/table".$play[0].".png\" alt=\"table\" />\n";
 		 else
-		   echo "<div class=\"trick back".$play[0]."\"><div class=\"table\">\n";
+		   {
+		     /* display current trick */
+		     echo "<li onclick=\"hl('$j');\">Current Trick\n  <div class=\"table\" id=\"trick".$j."\">\n      <img class=\"table\" src=\"pics/table".$play[0].".png\" alt=\"table\" />";
+		   }
 		 for($i=0;$i<sizeof($trick)-1;$i++)
 		   {
 		     $card = $trick[$i];
@@ -859,26 +889,28 @@ else
 		       {
 			 $tmp = explode("->",$card);
 
-		         echo "<div class=\"card".$tmp[0]."\">";
+		         echo "      <div class=\"card".$tmp[0]."\">\n";
 
 			 if(strlen($tmp[2])>0)
-			   echo "<span class=\"comment\">";
+			   echo "        <span class=\"comment\">";
 			 else
-			   echo " <span>";
+			   echo "        <span>";
 		         echo $player[$hash[$tmp[0]]]["name"];
 			 /* check for comment */
 			 if(strlen($tmp[2])>0)
-			   echo " <span>".$tmp[2]."</span>";
-			 echo " </span>\n  ";
+			   echo "<span>".$tmp[2]."</span>";
+			 echo "</span>\n        ";
 	
 			 display_card($tmp[1]);
 
 			 $last = $tmp[0];
-			 echo "</div>\n";
+			 echo "      </div>\n";
 		       }
 		   }
-		 echo "</div></div>\n";
+		 
+		 echo "    </div>\n  </li>\n";
 	       }
+	     echo "</ul>\n";
 
 	     /* figure out who needs to play next */
 	     $next = $last + 1;
@@ -1051,7 +1083,7 @@ else
 who won?
 <?php 
    for($i=0;$i<4;$i++)
-     echo $player[$hash[$i]]["name"]." <input type=\"radio\" name=\"win\" value=\"$i\" />";
+     echo $player[$hash[$i]]["name"]." <input type=\"radio\" name=\"win\" value=\"$i\" /><br />";
    echo "<input type=\"hidden\" name=\"me\" value=\"$me\" />";
 ?>
 <input type="submit" value="submit" />
diff --git a/standard.css b/standard.css
index 346e0e5..75eb567 100644
--- a/standard.css
+++ b/standard.css
@@ -1,220 +1,151 @@
-
-.header
-{
+.header {
+  background-color:white;
   text-align:center;
-  border-bottom: 3px solid gray;
-}
-
-
-.trick
-{
-  position:relative;
-//  border: 1px solid green;
-  height:500px;
-  width:500px;
-}
-
-img
-{
-  height:80px;
+  border-bottom:3px solid gray;
 }
 
-.oldtrick
-{
-  position:relative;
-  //border: 1px solid green;
-  height:280px;
-  width: 280px;
-  float:right;
-  clear:right;
-}
-
-.oldtrick img
-{ 
-  height:50px;
+ul.oldtrick {
+  list-style:none;
+  margin:0;
+  padding:0;
+  background-color:yellow;
 }
 
-.oldtrick div.table
-{
-  position:absolute;
-  height:180px;;
-  width:180px;
-  left:50px;
-  top:50px;
-  //border:1px solid black;
-}
-.trick div.table
-{
-  position:absolute;
-  
-  height:340px;;
-  width:340px;
-  left:80px;
-  top:80px;
- // border:1px solid black;
+ul.oldtrick li {
+  /*background-color:blue;*/
+  margin:0 0.5em;  
+  float:left;
 }
-
-div.card0>span
-{ 
-  position:absolute;
-  left:-70px;
-  //border:1px solid black;
+ul.oldtrick li:hover {
+  background-color: yellow;
 }
 
-div.card1>span
-{ 
+ul.oldtrick li div.table img.table {
   position:absolute;
-  top:-30px;
-  //border:1px solid black;
+  margin:0;
+  padding:0;
+  top: 3em;
+  left: 4em;
+  height:24em;
+  z-index:-2;
 }
 
-
-div.card2>span
-{ 
+ul.oldtrick li div.table {
   position:absolute;
-  left:40px;
- // border:1px solid black;
+  margin:0;
+  padding:0;
+  /*border: 5px solid green;*/
+  top: 14em;
+  left: 8em;
+  height:28em;
+  width:28em;
+  z-index:9;
+  display:none;
 }
 
-div.card3>span
-{ 
-  position:absolute;
-  bottom:-40px;
-  //border:1px solid black;
-}
+/*ul.oldtrick li:hover div.table{ display:block; }
+*/
 
-div.card0
-{
+ul.oldtrick li div div.card0 {
   position:absolute;
-  top:50px;
-  left: 0px;
-  //border:2px solid;
+  margin:0;
+  padding:0;
+  /*border: 1px solid red;*/
+  top: 14em;
+  right:25em;
 }
-div.card1
-{
+ul.oldtrick li div div.card1 {
   position:absolute;
-  top:0px;
-  left:70px
+  margin:0;
+  padding:0;
+  /*border: 1px solid red;*/
+  top: 0;
+  left:0em;
+  width:28em;
+  text-align:center;
 }
-div.card2
-{
+ul.oldtrick li div div.card2 {
   position:absolute;
-  top:50px;
-  right:0px;
-  text-align:right;
+  margin:0;
+  padding:0;
+  /*border: 1px solid red;*/
+  top: 14em;
+  right:0em;
 }
-div.card3
-{
+ul.oldtrick li div div.card3 {
   position:absolute;
-
-  bottom:0px;
-  left:70px;
+  margin:0;
+  padding:0;
+  /*border: 1px solid red;*/
+  top: 28em;
+  left:0;
+  width:28em;
+  text-align:center;
 }
 
-.trick div.card0
-{
-  position:absolute;
-  top:110px;
-  left: 0px;
-}
-.trick div.card1
-{
-  position:absolute;
-  top:0px;
-  left:140px
-}
-.trick div.card2
-{
-  position:absolute;
-  top:110px;
-  right:0px;
-  text-align:right;
-}
-.trick div.card3
-{
+ul.oldtrick li div div img {
   position:absolute;
-
-  bottom:0px;
-  left:140px;
-}
-
-.card2 span span
-{
-   position:relative;
-   left:-80px;
+  height:6em;
+  margin:0;
+  padding:0;
 }
 
-.card3 span span
-{ 
-  position:relative;
-  top:-40px;
+ul.oldtrick li div div.card0 img {
+  top: -2em;
+  left:5em;
 }
-
-span.comment
-{
-  text-decoration:underline;
+ul.oldtrick li div div.card1 img {
+  top: 3em;
+  left:12em;
 }
-
-.comment span span
-{
-  text-decoration:none;
+ul.oldtrick li div div.card2 img {
+  top: -2em;
+  left:-6em;
 }
-
-/* hide comments */
-.table div span span
-{
-  position: absolute;
-  width:    100px;
-  background-color: white;
-  border:1px solid black;
-  display:  none;
+ul.oldtrick li div div.card3 img {
+  top: -6em;
+  left:12em;
 }
 
-.table div
-{
-  float:left;
-  margin-bottom:10px;
-}
 
-.table div:hover span span
-{
- display:block;
+ul.oldtrick li div div span {
+  /*background-color:green;*/
 }
-
-
-/* background image for the table */
-.background0
-{
-   background:url(pics/stable0.png) no-repeat 60px 60px;
+ul.oldtrick li div div.card0 span {
+  text-align:right;
 }
-.background1
-{
-   background:url(pics/stable1.png) no-repeat 60px 60px;
+ul.oldtrick li div div.card1 span {
+  text-align:center;
 }
-.background2
-{
-   background:url(pics/stable2.png) no-repeat 60px 60px;
+ul.oldtrick li div div.card0 span {
+  text-align:left;
 }
-.background3
-{
-   background:url(pics/stable3.png) no-repeat 60px 60px;
+ul.oldtrick li div div.card0 span {
+  text-align:center;
 }
 
-div.back0
-{
-   background:url(pics/table0.png) no-repeat 100px 100px;
-}
-div.back1
-{
-   background:url(pics/table1.png) no-repeat 100px 100px;
-}
-div.back2
-{
-   background:url(pics/table2.png) no-repeat 100px 100px;
-}
-div.back3
-{
-   background:url(pics/table3.png) no-repeat 100px 100px;
+ul.oldtrick li div div span span {
+  position:absolute;
+  background-color:white;
+  margin:0;
+  padding:0;
+  border: 1px solid yellow;
+  top:1em;
+  z-index:11;
 }
 
+.mycards {
+  position:absolute;
+  margin:0;
+  padding:0;
+  right:0;
+  top:15em;
+  width:12em;
+  float:right;
+  border:1px solid red;
+  background-color:yellow;
+}
 
+.mycards img{
+  height:6em;
+}
+\ No newline at end of file
author	arun <arun@nubati.net>	2006-11-28 10:49:07 +0000
committer	arun <arun>	2006-11-28 10:49:07 +0000
commit	048d8cb807f4b76a0fb989d3945bda7ebb683803 (patch)
tree	34beb73c49ba941db5635b90c03914a02d7214b6
parent	01703346aa74f93edd32854c3e250907f3209cf3 (diff)
download	e-DoKo-048d8cb807f4b76a0fb989d3945bda7ebb683803.tar.gz e-DoKo-048d8cb807f4b76a0fb989d3945bda7ebb683803.tar.bz2 e-DoKo-048d8cb807f4b76a0fb989d3945bda7ebb683803.zip