Store colors on disk & more

src/common.h

@@ -1,7 +1,7 @@
 #ifndef __COMMON_H__
 #define __COMMON_H__
 
-#define teamdir "/var/lib/ctf/teams"
+#define teamdir "/var/lib/ctf/teams/names"
 #define pointsdir "/var/lib/ctf/points/new"
 
 int team_exists(char *teamhash);

src/register

@@ -8,6 +8,38 @@ fi
 # Don't overwrite files
 set -C
 
+# Assign a color.  I spent two days selecting this color pallette for
+# people with protanopia.  Please don't change these colors.
+nteams=$(ls /var/lib/ctf/teams/names/ | wc -l)
+case $(expr $nteams % 15) in
+    0) color=8c7a69 ;;
+    1) color=7f7062 ;;
+    2) color=79614b ;;
+    3) color=a59281 ;;
+    4) color=a59485 ;;
+    5) color=4a4f5e ;;
+    6) color=454955 ;;
+    7) color=343c52 ;;
+    8) color=696f82 ;;
+    9) color=6b7182 ;;
+    10) color=516b55 ;;
+    11) color=4b614f ;;
+    12) color=395d3f ;;
+    13) color=6d8c72 ;;
+    14) color=708c75 ;;
+    *)
+        echo 'ERROR ERROR' 1>&2
+        echo 'DOES NOT COMPUTE' 1>&2
+        exit 69
+        ;;
+esac
+
+# Compute hash of team name; they'll use this for everything in the
+# contest instead of their team name, which makes stuff much easier on
+# me since all team hashes are in the set /[0-9a-f]{8}/.
 hash=$(echo "$1" | md5sum | cut -b 1-8)
-echo "$1" > /var/lib/ctf/teams/$hash
+
+echo "$1" > /var/lib/ctf/teams/names/$hash
+echo "$color" > /var/lib/ctf/teams/colors/$hash
+
 echo "Registered with hash $hash"

src/scoreboard

@@ -30,7 +30,7 @@ function escape(s) {
 }
 
 function print_bar(cat, team, n, d) {
-    printf("<div class=\"b%s score\""               \
+    printf("<div class=\"t%s score\""               \
            "     style=\"height: %.2f%%;\""         \
            "     onmouseover=\"highlight('%s')\""   \
            "     onmouseout=\"restore('%s')\">\n"   \
@@ -63,19 +63,6 @@ function output(    t, c) {
 }
 
 BEGIN {
-    # It took me like 7 hours to find a color palette that worked for
-    # people with protanopia.  Don't change these colors.
-    colors[0] = "33cc33"
-    colors[1] = "863a3a"
-    colors[2] = "5c5ce6"
-    colors[3] = "bfbf4d"
-    colors[4] = "408080"
-    colors[5] = "b336b2"
-    colors[6] = "ffa500"
-    colors[7] = "00bfff"
-    colors[8] = "8db6cd"
-    ncolors = 9
-
     # Only display two decimal places
     CONVFMT = "%.2f"
     
@@ -112,7 +99,7 @@ BEGIN {
         getline colors_by_team[team] < fn
         close(fn)
 
-        fn = "/var/lib/ctf/teams/" team
+        fn = "/var/lib/ctf/teams/names/" team
         getline names_by_team[team] < fn
         close(fn)
     }
@@ -165,7 +152,7 @@ BEGIN {
     print "      body { width: 100%; }"
     print "      .score { overflow: hidden; color: black; }"
     for (team in teams) {
-        printf("      .b%s { background-color: #%s; }\n",
+        printf("      .t%s { background-color: #%s; }\n",
                team, colors_by_team[team])
     }
     print "    </style>"
@@ -235,7 +222,7 @@ BEGIN {
     print "      </tr>"
 
     print "    </table>"
-    print "    <canvas id=\"chart\" width=\"800\" height=\"200\"></canvas>"
+    print "    <canvas id=\"chart\" width=\"800\" height=\"400\"></canvas>"
     print "  </body>"
     print "</html>"
 }

www/ctf.css

@@ -1,13 +1,14 @@
+/* green phosphor: #2a4 */
+
 /**** document ****/
 
 html {
-    background: #222 url(grunge.png) repeat-x;
+    background: #112 url(grunge.png) repeat-x;
 }
 
 body {
     font-family: sans-serif;
-    color: #fff;
+    color: #ddc;
-    margin: 50px 0 0 110px;
     padding: 10px;
     max-width: 700px;
 }
@@ -17,67 +18,16 @@ body {
 h1:first-child {
     text-transform: lowercase;
     font-size: 1.6em;
-/*     background-color: #222; */
-/*     opacity: 0.9; */
     padding: 3px;
-    color: #2a2;
     margin: 0 0 1em 70px;
 }
 
 h1:first-child:before {
-   color: #fff;
+    color: #ddc;
-   letter-spacing: -0.1em;
+    letter-spacing: -0.1em;
-   content: "Capture The Flag: ";
+    content: "Capture The Flag: ";
 }
 
-/*** left side bar ***/
-
-#navigation {
-  position: absolute;
-  background: #222;
-  opacity: 0.9;
-  top: 80px;
-  left: 0px;
-  padding: 0;
-}
-
-#navigation h3 {
-  font-size: 100%;
-  border-bottom: 2px solid #444;
-}
-
-#navigation ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-#navigation li a {
-  display: block;
-  height: 25px;
-  width: 90px;
-  padding: 5px;
-  margin: 5px;
-  background: inherit;
-  border-right: 4px solid #444;
-  color: #999;
-  text-transform: lowercase;
-  font-size: 0.9em;
-}
-
-#navigation li a:hover {
-  color: #f4f4f4;
-  background: #333;
-  border-right: 4px solid #2a2;
-}
-
-#navigation li .active {
-  color: #999;
-  background: #333;
-  border-right: 4px solid #444;
-}
-
-
 /**** body ****/
 
 a img {
@@ -86,32 +36,29 @@ a img {
 
 a {
     text-decoration: none;
-    color: #2a2;
+    color: #b71;
     font-weight: bold;
 }
 
 a:hover {
-    color: #fff;
+    background: #333;
-    background: #2a2;
     font-weight: bold;
 }
 
 
 h1, h2, h3 {
-    color: #999;
+    color: #b71;
     letter-spacing: -0.05em;
 }
 
 .readme {
-    color: #fff;
+    background-color: #333;
-    background-color: #555;
     margin: 1em;
 }
 
 pre {
-    color: #fff;
+    background-color: #333;
-    background-color: #222;
+    border: solid #ddc 2px;
-    border: solid #ccc 2px;
     padding: 0.25em;
 }
 
@@ -128,38 +75,81 @@ td {
 p {
     line-height: 1.4em;
     margin-bottom: 20px;
-    color: #f4f4f4;
 }
 
 hr {
-    border: 1px solid #444;
+    border: 1px solid #ddc;
 }
 
 dt {
     white-space: pre;
-    background-color: #333;
     padding: 5px;
-    border: 2px solid green;
+    border: 2px solid #b71;
     border-bottom: none;
     font-weight: bold;
 }
 
 dd {
-    border: 2px solid green;
+    border: 2px solid #b71;
     margin: 0px;
     padding: 5px;
-    background-color: #282828;
 }
 
 
+
+/*** left side bar ***/
+
+#navigation {
+  position: absolute;
+  background: HBG;
+  opacity: 0.9;
+  top: 80px;
+  left: 0px;
+  padding: 0;
+}
+
+#navigation h3 {
+  font-size: 100%;
+  border-bottom: 2px solid #333;
+}
+
+#navigation ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+#navigation li a {
+  display: block;
+  height: 25px;
+  width: 90px;
+  padding: 5px;
+  margin: 5px;
+  border-right: 4px solid #ddc;
+  text-transform: lowercase;
+  font-size: 0.9em;
+}
+
+#navigation li a:hover {
+  background: #333;
+  border-right-color: #b71;
+}
+
 /**** special cases ****/
 
 .wide {
     max-width: inherit;
 }
 
+.figure {
+    margin: 0.5em 1em;
+    float: right;
+    font-size: small;
+    text-align: center;
+}
+
 .scoreboard {
-    background: #222;
+    background: #112;
 }
 
 .scoreboard td {

www/scoreboard.js

@@ -4,11 +4,15 @@ function dbg(o) {
 }
 
 function torgba(color, alpha) {
-    var r = parseInt(color.substring(1,3), 16);
+    if (color.substring(0, 1) == "#") {
-    var g = parseInt(color.substring(3,5), 16);
+        var r = parseInt(color.substring(1,3), 16);
-    var b = parseInt(color.substring(5,7), 16);
+        var g = parseInt(color.substring(3,5), 16);
+        var b = parseInt(color.substring(5,7), 16);
 
-    return "rgba(" + r + "," + g + "," + b + "," + alpha + ")";
+        return "rgba(" + r + "," + g + "," + b + "," + alpha + ")";
+    } else {
+        return color;
+    }
 }
 
 function Chart(id, width, height, lines) {
@@ -30,7 +34,7 @@ function Chart(id, width, height, lines) {
     function draw(color, values) {
         var lasty = 0;
 
-        ctx.strokeStyle = torgba(color, 0.99);
+        ctx.strokeStyle = color;
         ctx.lineWidth = 4;
         ctx.beginPath();
         moveTo(values[0][0], 0);
@@ -81,8 +85,8 @@ function getElementsByClass( searchClass, domNode, tagName) {
 }
 
 function highlight(cls, color) {
-    if (! color) color = "#ffff00";
+    if (! color) color = "#ffffff";
-    elements = getElementsByClass("b" + cls);
+    elements = getElementsByClass("t" + cls);
     for (i in elements) {
         e = elements[i];
         e.style.borderColor = e.style.backgroundColor;
@@ -92,7 +96,7 @@ function highlight(cls, color) {
 }
 
 function restore(cls) {
-    elements = getElementsByClass("b" + cls);
+    elements = getElementsByClass("t" + cls);
     for (i in elements) {
         e = elements[i];
         e.style.backgroundColor = e.style.borderColor;