Formatting of badges in roster better

roster.html

@@ -5,27 +5,25 @@
 <script src="config.js"></script>
 <script src="roster.js"></script>
 <style>
-.brag td {
-  font: 9pt Helvetica, sans-serif;
-  background-color: #ddddff;
-  padding: 5px;
-}
 
 .brag {
   display: inline;
+  background-color: #ddddff;
+  margin: 5px;
+  border: solid 2px #ccccee;
+}
+.brag td {
+  font: 9pt Helvetica, sans-serif;
+  vertical-align: top; 
 }
-
 div.rc {
-  font-size: 8pt;
+  font-size: 9pt;
 }
 
 div.bs {
   font-size: 7pt;
 }
 
-button.x {
-  color: red;
-}
 body {
   text-align: center;
 }
@@ -39,8 +37,15 @@ body {
 #newc {
   text-align: center;
 }
-a, a:visited {
+.brag a, .brag a:visited {
   color: blue;
+  text-decoration: none;
+}
+a.icon {
+  font-size: 3em;
+}
+a.x {
+  font-size: 12pt;
 }
 </style>
 </head>
@@ -65,16 +70,23 @@ a, a:visited {
 <button id=test>Test</button>
 <button id=clear>Clear</button>
 </body>
-</html>
 
 
-<script id="bumble" type="text/html">
+<script id="badge" type="text/html">
-  <table class="brag"><tr><td>
+  <table class="brag">
+    <tr>
+      <td><a class="icon go">&#x2694;</a></td>
+      <td>
         <div>
-          <a><b>$Traits.Name</b></a> of Localrealm ($Plots.last) 
+          <a class="go"><b>$Traits.Name</b></a> the $Traits.Race ($Plots.last) 
-          <button class="x">X</button>
         </div>
-        <div class="rc">Level $Traits.Level $Traits.Race $Traits.Class</div>
+        <div class="rc">Level $Traits.Level $Traits.Class</div>
         <div class="bs">$Equips.best / $Spells.best / $Stats.best</div>
-  </td></tr></table>
+      </td>
+      <td><a class="x" href="#">&#x2620</a></td>
+    </tr>    
+  </table>
 </script>
+
+
+</html>

roster.js

@@ -16,9 +16,9 @@ $(document).ready(function () {
 
       var br = brag(c);
       roster.append(br);
-      br.find("a").attr("href", "main.html#" + name);
+      br.find("a.go").attr("href", "main.html#" + name);
 
-      br.find("button").click(function () {
+      br.find("a.x").click(function () {
         if (confirm("Terminate " + Pick(["faithful","noble","loyal","brave"])+ 
                     " " + name + "?")) {
           delete games[name];
@@ -46,7 +46,7 @@ $(document).ready(function () {
     games[n] = {Traits: {Level: -10,Name:n,Race:GenerateName(),
                          Class:GenerateName()},
                 Stats: {best: "STR 99"},
-                Plot: {last: "Act VII"},
+                Plots: {last: "Act VII"},
                 Spells: {best: "Bad Schwarma XIV"},
                 Equips: {best: "Cottonwood Sollerets"}};
     storeRoster(games);
@@ -54,7 +54,7 @@ $(document).ready(function () {
   });
   
   function brag(sheet) {
-    var tmpl = $("#bumble").html();
+    var tmpl = $("#badge").html();
     var brag = tmpl.replace(/\$([A-Za-z.]+)/g, function (str, p1) {
       var dict = sheet;
       $.each(p1.split("."), function (i,v) {