bugfix: names and table show up all the time now;

12 files changed, 407 insertions, 98 deletions

diff --git a/css/standard.css b/css/standard.css
index 368bd52..1e18e61 100644
--- a/css/standard.css
+++ b/css/standard.css
@@ -15,8 +15,52 @@
 }
 .card img { width:8em; }
 
+/* display the table and the names */
+div.table {
+  position:absolute;
+  margin:0;
+  padding:0;
+/*  border: 5px solid blue;*/
+  top: 14em;
+  left: 20em;
+}
+
+div.table img { 
+  height:20em;
+  width:20em;
+  z-index:9;
+}
+div.table span {
+/*  background-color:green;*/
+  position:absolute;
+}
+div.table span.table0 {
+  top:10em;
+  left:-5em;
+  text-align:right;
+}
+div.table span.table1 {
+  top:-2em;
+  left: 0em;
+  width:20em;
+  text-align:center;
+}
+div.table span.table2 {
+  top:10em;
+  left:21em;
+  text-align:left;
+  vertical-align:center;
+}
+div.table span.table3 {
+  top:23em;
+  left: 0em;
+  width:20em;
+  text-align:center;
+}
+
+
 
-ul.oldtrick {
+ul.tricks {
   position:relative;
   list-style:none;
   margin:3px;
@@ -26,123 +70,108 @@ ul.oldtrick {
 
 }
 
-ul.oldtrick a { text-decoration:none; color:#000;}
+ul.tricks a { text-decoration:none; color:#000;}
 
-ul.oldtrick li {
+ul.tricks li {
   /*background-color:blue;*/
   margin:0.2em 0.5em;  
   display:inline;
 }
-ul.oldtrick li:hover {
+ul.tricks li:hover {
   background-color: yellow;
 }
 
-ul.oldtrick li div.table img.table {
+
+ul.tricks li div.trick {
   position:absolute;
   margin:0;
   padding:0;
-  top: 4em;
-  left: 4em;
-  height:22em;
-  z-index:-2;
+/*  border: 5px solid green;*/
+  top: 8em;
+  left: 20em;
+  height:20em;
+  width:20em;
+  z-index:9;
+  display:none;
 }
 
-ul.oldtrick li div.table {
+ul.tricks li div.trick img.arrow {
   position:absolute;
   margin:0;
   padding:0;
-  /*border: 5px solid green;*/
-  top: 5em;
-  left: 18em;
-  height:28em;
-  width:28em;
-  z-index:9;
-  display:none;
+  top: 4em;
+  left: 3em;
+  height:14em;
+  z-index:-2;
 }
 
 hr {clear:both;}
 
-/*ul.oldtrick li:hover div.table{ display:block; }*/
+/*ul.tricks li:hover div.table{ display:block; }*/
 
-ul.oldtrick li div div.card0 {
+ul.tricks li div div.card0 {
   position:absolute;
   margin:0;
   padding:0;
   /*border: 1px solid red;*/
-  top: 14em;
-  right:26em;
+  top: 9em;
+  right:27em;
 }
-ul.oldtrick li div div.card1 {
+ul.tricks li div div.card1 {
   position:absolute;
   margin:0;
   padding:0;
   /*border: 1px solid red;*/
-  top: 0;
-  left:0em;
+  top: -3em;
+  left:-3em;
   width:28em;
   text-align:center;
 }
-ul.oldtrick li div div.card2 {
+ul.tricks li div div.card2 {
   position:absolute;
   margin:0;
   padding:0;
   /*border: 1px solid red;*/
-  top: 14em;
-  right:-1em;
+  top: 9em;
+  right:-2em;
 }
-ul.oldtrick li div div.card3 {
+ul.tricks li div div.card3 {
   position:absolute;
   margin:0;
   padding:0;
   /*border: 1px solid red;*/
-  top: 29em;
-  left:0;
+  top: 20em;
+  left:-3em;
   width:28em;
   text-align:center;
 }
 
-ul.oldtrick li div div img {
+ul.tricks li div div img {
   position:absolute;
   height:6em;
   margin:0;
   padding:0;
 }
 
-ul.oldtrick li div div.card0 img {
+ul.tricks li div div.card0 img {
   top: -2em;
   left:5em;
 }
-ul.oldtrick li div div.card1 img {
+ul.tricks li div div.card1 img {
   top: 3em;
-  left:12em;
+  left:10em;
 }
-ul.oldtrick li div div.card2 img {
+ul.tricks li div div.card2 img {
   top: -2em;
   left:-6em;
 }
-ul.oldtrick li div div.card3 img {
+ul.tricks li div div.card3 img {
   top: -6em;
-  left:12em;
+  left:10em;
 }
 
 
-ul.oldtrick li div div span {
-  /*background-color:green;*/
-}
-ul.oldtrick li div div.card0 span {
-  text-align:right;
-}
-ul.oldtrick li div div.card1 span {
-  text-align:center;
-}
-ul.oldtrick li div div.card0 span {
-  text-align:left;
-}
-ul.oldtrick li div div.card0 span {
-  text-align:center;
-}
-
-ul.oldtrick li div div span span {
+ul.tricks li div div span {
   position:absolute;
   background-color:white;
   margin:0;
@@ -151,22 +180,22 @@ ul.oldtrick li div div span span {
   border: 1px solid yellow;
   z-index:11;
 }
-ul.oldtrick li div div.card0 span span{
+ul.tricks li div div.card0 span{
   top:1em;
-  left:-14em;
+  left:-10em;
   border: 3px solid green;
 }
-ul.oldtrick li div div.card1 span span{
-  top:-2em;
+ul.tricks li div div.card1 span{
+  top:0em;
   left:1em;
   border: 3px solid green;
 }
-ul.oldtrick li div div.card2 span span{
+ul.tricks li div div.card2 span{
   top:-2em;
-  left:3em;
+  left:0em;
   border: 3px solid green;
 }
-ul.oldtrick li div div.card3 span span{
+ul.tricks li div div.card3 span{
   top:1em;
   left:3em;
   border: 3px solid green;
diff --git a/functions.php b/functions.php
index c4305b5..a6ee160 100644
--- a/functions.php
+++ b/functions.php
@@ -17,7 +17,7 @@ function mymail($To,$Subject,$message)
 function myisset()
 {
   /* returns 1 if all names passed as args are defined by a GET or POST statement,
-   * else it returns 0
+   * else return 0
    */
 
   $ok   = 1;
@@ -32,6 +32,23 @@ function myisset()
   return $ok;
 }
 
+function pos_array($c,$arr)
+{
+  $ret = 0;
+
+  $i   = 0;
+  foreach($arr as $a)
+    {
+      $i++;
+      if($a == $c)
+	{
+	  $ret = $i;
+	  break;
+	}
+    }
+  return $ret;
+}
+
 function is_trump($c,$game) 
 { 
   switch($game)
@@ -111,22 +128,49 @@ function compare_cards($a,$b,$game)
     case "jack":
       break;
     case "queen":
-      if(is_trump($a,$game) && $a<=$b)
+      if(is_trump($a,$game) && is_trump($b,$game) && $a<=$b)
 	return 1;
-      else if(is_trump($a,$game))
+      else if(is_trump($a,$game) && is_trump($b,$game) )
 	return 0;
       else 
 	{ /*$a is not a trump */
 	  if(is_trump($b,$game))
 	    return 0;
 	  else
-	    {
-	      if(is_same_suite($a,$b,$game))
-		if($a<=$b)
+	    { /* both no trump */
+	      /* both clubs? */
+	      $posA = pos_array($a,array('27','28','29','30','31','32','11','12','33','34'));
+	      $posB = pos_array($b,array('27','28','29','30','31','32','11','12','33','34'));
+	      if($posA && $posB)
+		if($posA <= $posB)
 		  return 1;
 		else
 		  return 0;
-	      
+	      /* both spades? */
+	      $posA = pos_array($a,array('35','36','37','38','39','40','13','14','41','42'));
+	      $posB = pos_array($b,array('35','36','37','38','39','40','13','14','41','42'));
+	      if($posA && $posB)
+		if($posA <= $posB)
+		  return 1;
+		else
+		  return 0;
+	      /* both hearts? */
+	      $posA = pos_array($a,array('43','44','15','16','45','46', '1', '2','47','48'));
+	      $posB = pos_array($b,array('43','44','15','16','45','46', '1', '2','47','48'));
+	      if($posA && $posB)
+		if($posA <= $posB)
+		  return 1;
+		else
+		  return 0;
+	      /* both diamonds? */
+	      $posA = pos_array($a,array('19','20','21','22','23','24','17','18','25','26'));
+	      $posB = pos_array($b,array('19','20','21','22','23','24','17','18','25','26'));
+	      if($posA && $posB)
+		if($posA <= $posB)
+		  return 1;
+		else
+		  return 0;
+
 	      /* not the same suit and no trump: a wins */
 	      return 1;
 	    }	  
diff --git a/index.php b/index.php
index 29b3eb1..550144f 100644
--- a/index.php
+++ b/index.php
@@ -234,8 +234,11 @@ else if(myisset("me"))
 	    $ok=0;
 
 	if($ok)
-	  DB_set_game_status_by_gameid($gameid,'play');
-
+	  {
+	    /* TODO: check what kind of game we are playing */
+	    DB_set_game_status_by_gameid($gameid,'play');
+	  }
+	
 	break;
       case 'play':
       case 'gameover': 
@@ -280,19 +283,35 @@ else if(myisset("me"))
 		    * only  play a card after everyone is ready to play */
 	  }
 	
+	/* display the table and the names */
+	$result = mysql_query("SELECT  User.fullname as name,".
+			      "        Hand.position as position ".
+			      "FROM Hand ".
+			      "LEFT JOIN User ON User.id=Hand.user_id ".
+			      "WHERE Hand.game_id='".$gameid."' ".
+			      "ORDER BY position ASC");
+	
+	echo "<div class=\"table\">\n".
+	  "  <img src=\"pics/table.png\" alt=\"table\" />\n";
+	while($r = mysql_fetch_array($result,MYSQL_NUM))
+	  {
+	    $name = $r[0];
+	    $pos  = $r[1];
+	    
+	    echo " <span class=\"table".($pos-1)."\">$name</span>\n";
+	  }
+	echo  "</div>\n";
+	
 	/* get everything relevant to display the tricks */
 	$result = mysql_query("SELECT Hand_Card.card_id as card,".
-			      "       User.fullname as name,".
 			      "       Hand.position as position,".
 			      "       Play.sequence as sequence, ".
-			      "       Hand.hash     as hash,     ".
 			      "       Trick.id, ".
 			      "       Comment.comment ".
 			      "FROM Trick ".
 			      "LEFT JOIN Play ON Trick.id=Play.trick_id ".
 			      "LEFT JOIN Hand_Card ON Play.hand_card_id=Hand_Card.id ".
 			      "LEFT JOIN Hand ON Hand_Card.hand_id=Hand.id ".
-			      "LEFT JOIN User ON User.id=Hand.user_id ".
 			      "LEFT JOIN Comment ON Play.id=Comment.play_id ".
 			      "WHERE Trick.game_id='".$gameid."' ".
 			      "ORDER BY Trick.id,sequence ASC");
@@ -306,49 +325,42 @@ else if(myisset("me"))
 	$seq  = 1;          
 	$pos  = 0;
 	
-	echo "\n<ul class=\"oldtrick\">\n";
+	echo "\n<ul class=\"tricks\">\n";
 	echo "  <li> Hello $myname!   History: </li>\n";
 	
 	while($r = mysql_fetch_array($result,MYSQL_NUM))
 	  {
-	    $seq     = $r[3];
-	    $pos     = $r[2];
-	    $trick   = $r[5];
-	    $comment = $r[6];
+	    $pos     = $r[1];
+	    $seq     = $r[2];
+	    $trick   = $r[3];
+	    $comment = $r[4];
+
+	    /* save card to be able to find the winner of the trick later */
+	    $play[$pos] = $r[0]; 
 	    
 	    if($trick!=$lasttrick && $seq==1)
 	      {
 		/* start of an old trick? */
 		echo "  <li onclick=\"hl('$trickNR');\"><a href=\"#\">Trick $trickNR</a>\n".
-		  "    <div class=\"table\" id=\"trick".$trickNR."\">\n".
-		  "      <img class=\"table\" src=\"pics/table".($pos-1).".png\" alt=\"table\" />\n";
+		  "    <div class=\"trick\" id=\"trick".$trickNR."\">\n".
+		  "      <img class=\"arrow\" src=\"pics/arrow".($pos-1).".png\" alt=\"table\" />\n";
 	      }
 	    else if($trick==$lasttrick && $seq==1)
 	      {
 		/* start of a last trick? */
 		echo "  <li onclick=\"hl('$trickNR');\"><a href=\"#\">Current Trick</a>\n".
-		  "    <div class=\"table\" id=\"trick".$trickNR."\">\n".
-		  "      <img class=\"table\" src=\"pics/table".($pos-1).".png\" alt=\"table\" />\n";
+		  "    <div class=\"trick\" id=\"trick".$trickNR."\">\n".
+		  "      <img class=\"arrow\" src=\"pics/arrow".($pos-1).".png\" alt=\"table\" />\n";
 	      }
 	    
 	    /* display card */
 	    echo "      <div class=\"card".($pos-1)."\">\n";
 	    
-	    $play[$pos]=$r[0];
-	    
-	    if($comment!="")
-	      echo "        <span class=\"comment\">";
-	    else
-	      echo "        <span>";
-	    
-	    /* print name */
-	    echo $r[1];
-	    
-	    /* check for comment */
+	    /* display comments */
 	    if($comment!="")
-	      echo "<span>".$comment."</span>";
-	    echo "</span>\n        ";
+	      echo "        <span class=\"comment\">".$comment."</span>\n";
 	    
+	    echo "        ";
 	    display_card($r[0]);
 	    
 	    echo "      </div>\n"; /* end div card */
@@ -375,8 +387,8 @@ else if(myisset("me"))
 	else
 	  {
 	    $next = $pos+1;
+	    if($next==5) $next=1;
 	  }
-	if($next==5) $next=1;
 	
 	/* my turn?, display cards as links, ask for comments*/
 	if(DB_get_pos_by_hash($me) == $next)
@@ -468,12 +480,12 @@ else if(myisset("me"))
 	      }
 	    else
 	      {
-		echo "couldn't find card <br />\n";
+		echo "can't find that card?! <br />\n";
 	      }
 	  }
 	else if(myisset("card") && !$myturn )
 	  {
-	    echo "please wait until it is your turn! <br />\n";
+	    echo "please wait until it's your turn! <br />\n";
 	  }
 	
 	$mycards = DB_get_hand($me);
diff --git a/pics/arrow.svg b/pics/arrow.svg
new file mode 100644
index 0000000..7a132d9
--- /dev/null
+++ b/pics/arrow.svg
@@ -0,0 +1,224 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.0"
+   width="300"
+   height="300"
+   id="svg2"
+   sodipodi:version="0.32"
+   inkscape:version="0.44.1"
+   sodipodi:docname="arrow.svg"
+   sodipodi:docbase="/Users/arun/Sites/emaildoko/trunk/pics">
+  <metadata
+     id="metadata2033">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:window-height="606"
+     inkscape:window-width="838"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     guidetolerance="10.0"
+     gridtolerance="10.0"
+     objecttolerance="10.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base"
+     inkscape:zoom="1.3666667"
+     inkscape:cx="150"
+     inkscape:cy="150"
+     inkscape:window-x="60"
+     inkscape:window-y="82"
+     inkscape:current-layer="svg2" />
+  <defs
+     id="defs4">
+    <linearGradient
+       id="linearGradient2895">
+      <stop
+         style="stop-color:#fb0708;stop-opacity:1;"
+         offset="0"
+         id="stop2897" />
+      <stop
+         style="stop-color:#728071;stop-opacity:1;"
+         offset="1"
+         id="stop2899" />
+    </linearGradient>
+    <marker
+       refX="0"
+       refY="0"
+       orient="auto"
+       style="overflow:visible"
+       id="Tail">
+      <g
+         transform="scale(-1.2,-1.2)"
+         id="g5217">
+        <path
+           d="M -3.8048674,-3.9585227 L 0.54352094,0"
+           style="fill:none;fill-rule:evenodd;stroke:black;stroke-width:0.80000001;stroke-linecap:round;marker-start:none;marker-end:none"
+           id="path5219" />
+        <path
+           d="M -1.2866832,-3.9585227 L 3.0617053,0"
+           style="fill:none;fill-rule:evenodd;stroke:black;stroke-width:0.80000001;stroke-linecap:round;marker-start:none;marker-end:none"
+           id="path5221" />
+        <path
+           d="M 1.3053582,-3.9585227 L 5.6537466,0"
+           style="fill:none;fill-rule:evenodd;stroke:black;stroke-width:0.80000001;stroke-linecap:round;marker-start:none;marker-end:none"
+           id="path5223" />
+        <path
+           d="M -3.8048674,4.1775838 L 0.54352094,0.21974226"
+           style="fill:none;fill-rule:evenodd;stroke:black;stroke-width:0.80000001;stroke-linecap:round;marker-start:none;marker-end:none"
+           id="path5225" />
+        <path
+           d="M -1.2866832,4.1775838 L 3.0617053,0.21974226"
+           style="fill:none;fill-rule:evenodd;stroke:black;stroke-width:0.80000001;stroke-linecap:round;marker-start:none;marker-end:none"
+           id="path5227" />
+        <path
+           d="M 1.3053582,4.1775838 L 5.6537466,0.21974226"
+           style="fill:none;fill-rule:evenodd;stroke:black;stroke-width:0.80000001;stroke-linecap:round;marker-start:none;marker-end:none"
+           id="path5229" />
+      </g>
+    </marker>
+    <marker
+       refX="0"
+       refY="0"
+       orient="auto"
+       style="overflow:visible"
+       id="Arrow2Mend">
+      <path
+         d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.97309,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+         transform="scale(-0.6,-0.6)"
+         style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
+         id="path5238" />
+    </marker>
+    <marker
+       refX="0"
+       refY="0"
+       orient="auto"
+       style="overflow:visible"
+       id="Arrow2Lend">
+      <path
+         d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.97309,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+         transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
+         style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
+         id="path5244" />
+    </marker>
+    <linearGradient
+       x1="173.42859"
+       y1="432.79074"
+       x2="477.42859"
+       y2="437.79074"
+       id="linearGradient2909"
+       xlink:href="#linearGradient2895"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       x1="231.91167"
+       y1="373.93323"
+       x2="276.77444"
+       y2="373.93323"
+       id="linearGradient2921"
+       xlink:href="#linearGradient2895"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       x1="242.40404"
+       y1="496.72348"
+       x2="280.42841"
+       y2="496.72348"
+       id="linearGradient2929"
+       xlink:href="#linearGradient2895"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       x1="369.31415"
+       y1="494.80939"
+       x2="414.17691"
+       y2="494.80939"
+       id="linearGradient2937"
+       xlink:href="#linearGradient2895"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       x1="231.91167"
+       y1="373.93323"
+       x2="276.77444"
+       y2="373.93323"
+       id="linearGradient2001"
+       xlink:href="#linearGradient2895"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       x1="242.40404"
+       y1="496.72348"
+       x2="280.42841"
+       y2="496.72348"
+       id="linearGradient2003"
+       xlink:href="#linearGradient2895"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       x1="369.31415"
+       y1="494.80939"
+       x2="414.17691"
+       y2="494.80939"
+       id="linearGradient2005"
+       xlink:href="#linearGradient2895"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2895"
+       id="linearGradient2050"
+       gradientUnits="userSpaceOnUse"
+       x1="369.31415"
+       y1="494.80939"
+       x2="414.17691"
+       y2="494.80939"
+       gradientTransform="matrix(-1,0,0,-1,474.4786,582.7911)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2895"
+       id="linearGradient2053"
+       gradientUnits="userSpaceOnUse"
+       x1="242.40404"
+       y1="496.72348"
+       x2="280.42841"
+       y2="496.72348"
+       gradientTransform="matrix(-1,0,0,-1,474.4786,582.7911)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2895"
+       id="linearGradient2056"
+       gradientUnits="userSpaceOnUse"
+       x1="231.91167"
+       y1="373.93323"
+       x2="276.77444"
+       y2="373.93323"
+       gradientTransform="matrix(-1,0,0,-1,474.4786,582.7911)" />
+  </defs>
+  <path
+     d="M 57.533095,150.00026 C 57.533095,99.466183 98.499043,58.500221 149.0331,58.500221 C 199.56716,58.500221 240.53311,99.466183 240.53311,150.00026 C 240.53311,200.53434 199.56716,241.5003 149.0331,241.5003"
+     style="color:black;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#4d4d4d;stroke-width:2.0999999;stroke-linecap:butt;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"
+     id="path2164" />
+  <path
+     d="M 198.64742,227.37006 C 194.85219,219.60319 216.73106,203.01329 214.80351,190.34568 L 221.19864,206.16519 L 242.06693,204.31397 C 242.06693,204.31397 226.24742,226.3603 198.64742,227.37006 z "
+     style="fill:url(#linearGradient2056);fill-opacity:1;fill-rule:evenodd;stroke:black;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     id="path5282" />
+  <path
+     d="M 231.57457,107.55576 C 223.8077,111.35099 207.2178,89.47212 194.55019,91.39967 L 210.3697,85.00454 L 208.51848,64.13625 C 208.51848,64.13625 230.56481,79.95576 231.57457,107.55576 z "
+     style="fill:url(#linearGradient2053);fill-opacity:1;fill-rule:evenodd;stroke:black;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     id="path5284" />
+  <path
+     d="M 104.22121,69.46952 C 108.01644,77.23639 86.13757,93.82629 88.06512,106.4939 L 81.66999,90.67439 L 60.8017,92.52561 C 60.8017,92.52561 76.62121,70.47928 104.22121,69.46952 z "
+     style="fill:url(#linearGradient2050);fill-opacity:1;fill-rule:evenodd;stroke:black;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     id="path5286" />
+</svg>
diff --git a/pics/arrow0.png b/pics/arrow0.png
new file mode 100644
index 0000000..e43ac8e
--- /dev/null
+++ b/pics/arrow0.png
diff --git a/pics/arrow1.png b/pics/arrow1.png
new file mode 100644
index 0000000..b261a19
--- /dev/null
+++ b/pics/arrow1.png
diff --git a/pics/arrow2.png b/pics/arrow2.png
new file mode 100644
index 0000000..9cc76b3
--- /dev/null
+++ b/pics/arrow2.png
diff --git a/pics/arrow3.png b/pics/arrow3.png
new file mode 100644
index 0000000..6a14195
--- /dev/null
+++ b/pics/arrow3.png
diff --git a/pics/table0.png b/pics/table0.png
deleted file mode 100644
index cac4132..0000000
--- a/pics/table0.png
+++ /dev/null
diff --git a/pics/table1.png b/pics/table1.png
deleted file mode 100644
index 80ca43f..0000000
--- a/pics/table1.png
+++ /dev/null
diff --git a/pics/table2.png b/pics/table2.png
deleted file mode 100644
index 3c7a176..0000000
--- a/pics/table2.png
+++ /dev/null
diff --git a/pics/table3.png b/pics/table3.png
deleted file mode 100644
index e7c21ae..0000000
--- a/pics/table3.png
+++ /dev/null