Refresh UI

* Use Bulma
* Hide replay controls after the draft replay has ended.
* Fix key errors
* Make alerts optionally closable
* Optimize, consolidate an clean up images.
* Use `aria-label` for buttons with images
* Fix going back from drafts.
* Fix formatting

Author: lalitpatel

README.md

@@ -21,6 +21,12 @@ node build/server.js
 
 Visit `localhost:3000` then.
 
+### Run Tests / Update snapshots
+
+```bash
+npm test
+```
+
 ## Presets
 
 A preset defines the order and modes in which host and guest pick and ban 

alerts.json.template

@@ -1,22 +1,32 @@
 [
   {
-    "class": "white",
-    "title": "Configuration Needed",
-    "content": "<b>Oh boy!</b> This is an alert. You can edit <code>alerts.json</code> to change the alerts displayed here."
+    "class": "dark",
+    "title": "General",
+    "content": "<b>Oh boy!</b> This is a alert. You can edit <code>alerts.json</code> to change the alerts displayed here.<br/>Set <code>class</code> to <code>dark</code>",
+    "closable": false
+  },
+  {
+    "class": "success",
+    "title": "Success",
+    "content": "<b>Oh boy!</b> This is an alert. You can edit <code>alerts.json</code> to change the alerts displayed here.<br/>Set <code>class</code> to <code>success</code><br/>Set <code>closable</code> to <code>true</code> to make the alert closable.",
+    "closable": true
   },
   {
     "class": "info",
-    "title": "Configuration Needed",
-    "content": "<b>Oh boy!</b> This is an alert. You can edit <code>alerts.json</code> to change the alerts displayed here."
+    "title": null,
+    "content": "<b>Alert without a header!</b> This is an alert without header. If you set <code>title</code> to <code>null</code>, it renders this way.<br/>Set <code>class</code> to <code>info</code><br/>Set <code>closable</code> to <code>true</code> to make the alert closable.",
+    "closable": false
   },
   {
     "class": "warning",
-    "title": "Configuration Needed",
-    "content": "<b>Oh boy!</b> This is an alert. You can edit <code>alerts.json</code> to change the alerts displayed here."
+    "title": "Warning",
+    "content": "<b>Oh boy!</b> This is an alert. You can edit <code>alerts.json</code> to change the alerts displayed here.<br/>Set <code>class</code> to <code>warning</code>",
+    "closable": true
   },
   {
     "class": "danger",
-    "title": "Configuration Needed",
-    "content": "<b>Oh boy!</b> This is an alert. You can edit <code>alerts.json</code> to change the alerts displayed here."
+    "title": "Danger",
+    "content": "<b>Oh boy!</b> This is an alert. You can edit <code>alerts.json</code> to change the alerts displayed here.<br/>Set <code>class</code> to <code>danger</code>",
+    "closable": false
   }
 ]