diff options
| -rw-r--r-- | index.php | 60 | ||||
| -rw-r--r-- | standard.css | 287 |
2 files changed, 155 insertions, 192 deletions
@@ -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 |