Colourise Raikogram in HTML as well as BBcode.

diff --git a/lib/raikogram.php b/lib/raikogram.php
index afb5b1f..2c02d47 100644 (file)
--- a/lib/raikogram.php
+++ b/lib/raikogram.php
@@ -17,11 +17,16 @@
     return 'black';
   }
 
-  function raikogram_header($name, $bgcolor, $fgcolor, $width) {
-    echo "[td=\"class: grid, bgcolor: $bgcolor, width: $width%, align: center\"]";
-    echo "[color=$fgcolor]";
-    echo "[b]" . $name . "[/b]";
-    echo "[/color][/td]\n";
+  function raikogram_header($type, $name, $bgcolor, $fgcolor, $width) {
+    if ($type == 'html') {
+      echo "<th style=\"color: $fgcolor; background-color: $bgcolor; width: $width%\">$name</th>\n";
+    }
+    else {
+      echo "[td=\"class: grid, bgcolor: $bgcolor, width: $width%, align: center\"]";
+      echo "[color=$fgcolor]";
+      echo "[b]" . $name . "[/b]";
+      echo "[/color][/td]\n";
+    }
   }
 
   function edit_raikogram($race_id, $readonly = false) {
@@ -76,7 +81,7 @@
         echo "<table>\n";
         echo "<tr>\n";
         echo "<th></th>\n";
-        foreach ($systems as $name_x => $id_x) echo "<th>$name_x</th>\n";
+        foreach ($systems as $name_x => $id_x) raikogram_header($type, $name_x, raikogram_bgcolor($row, $column), raikogram_fgcolor($row, $column++), $width);
         echo "</tr>\n";
       }
       else {
@@ -94,17 +99,17 @@
         $fgcolor = raikogram_fgcolor($row, $column);
         if ($type == 'html') {
           echo "<tr>\n";
-          echo "<th>$name_y</th>\n";
+          raikogram_header($type, $name_y, $bgcolor, $fgcolor, $width);
         }
         else {
           echo "[tr=\"bgcolor: white\"]\n";
-          raikogram_header($name_y, $bgcolor, $fgcolor, $width);
+          raikogram_header($type, $name_y, $bgcolor, $fgcolor, $width);
         }
         foreach ($systems as $name_x => $id_x) {
           $column++;
           $bgcolor = raikogram_bgcolor($row, $column);
           $fgcolor = raikogram_fgcolor($row, $column);
-          if ($type == 'html') echo "<td>\n";
+          if ($type == 'html') echo "<td style=\"color: $fgcolor; background-color: $bgcolor\">\n";
           if ($id_x == $id_y) {
             if ($type == 'html') echo "</td>\n";
             else echo "[td=\"class: grid\"][/td]\n";

diff --git a/style.css b/style.css
index b0d1b59..758ed02 100644 (file)
--- a/style.css
+++ b/style.css
@@ -22,7 +22,14 @@ table.entries a { color: inherit; text-decoration-style: dotted; }
 table.entries a:hover { text-decoration-style: solid; }
 table.entries a:active { text-decoration-style: double; }
 table.entries th, table.entries td { text-align: center; }
+.raikogram table { border-spacing: 0; }
+.raikogram table tr:first-child th:not(:first-child) { border: 1px solid black; }
+.raikogram table tr:first-child th:not(:nth-child(2)) { border-left-width: 0; }
+.raikogram table tr:not(:first-child) th:first-child { border: 1px solid black; }
+.raikogram table tr:not(:nth-child(2)) th:first-child { border-top-width: 0; }
+.raikogram table td { border-style: solid; border-color: black black; border-left-width: 0; border-right-width: 1px; border-top-width: 0; border-bottom-width: 1px; }
 .raikogram table tr:first-child th { padding-left: 1em; padding-right: 1em; }
+.raikogram table tr:not(:first-child) th:first-child { padding-left: 1em; padding-right: 1em; }
 .bbcode { display: none; background-color: rgba(0, 0, 0, 0.1); }
 #systems { overflow-x: auto; }
 #stations { overflow-x: auto; }