Get the nethack page looking good again

Update all the CSS classes and fix the layout so it looks good in the new theme.
Convert a bunch of CSS classes to BEM style.

assets/css/099_nethack.css

@@ -0,0 +1,100 @@
+
+
+
+
+
+/******************
+ * NETHACK LOGFILE
+ ******************/
+
+#dungeon-background {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  filter: brightness(0.3);
+}
+
+.nethack-logfile {
+  margin-inline-start: 0;
+  padding-inline-start: 0;
+
+  .nethack-logentry {
+    align-items: first baseline;
+    display: grid;
+    grid-template-columns: min-content min-content auto min-content;
+    grid-template-areas:
+      "list-marker entry-marker entry-date        entry-character-descriptor"
+      ".           .            entry-description entry-description"
+      ".           .            entry-stats       entry-stats";
+    gap: var(--space-xs);
+    margin-inline-start: 0;
+  }
+}
+
+
+.nethack-logentry {
+  &:not(:last-child) {
+    margin-block-end: var(--space-l);
+  }
+
+  &::before {
+    grid-area: list-marker;
+  }
+
+  .nethack-logentry__marker {
+    grid-area: entry-marker;
+  }
+
+  .nethack-logentry__date {
+    grid-area: entry-date;
+    line-height: 1;
+    margin: 0;
+    padding: 0;
+  }
+
+  .nethack-logentry__character-descriptor {
+    font-family: var(--font-family-monospace);
+    font-size: var(--text-s);
+    grid-area: entry-character-descriptor;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  .nethack-logentry__description {
+    grid-area: entry-description;
+    margin: 0;
+  }
+
+  .nethack-logentry__stats {
+    border: 0;
+    color: var(--text-color-secondary);
+    font-family: var(--font-family-monospace);
+    font-size: var(--text-s);
+    grid-area: entry-stats;
+    margin-block: 0;
+    width: 100%;
+    -webkit-border-horizontal-spacing: 0;
+    -webkit-border-vertical-spacing: 0;
+  }
+
+  .nethack-logentry__stats {
+    padding: 0;
+    text-transform: uppercase;
+    vertical-align: bottom;
+    white-space: nowrap;
+
+    thead {
+      font-weight: bolder;
+    }
+
+    .nethack-logentry__score,
+    .nethack-logentry__hp,
+    .nethack-logentry__level {
+      width: 16rem;
+      text-align: right;
+    }
+  }
+}

assets/scripts/nethack/dungeon.js

@@ -402,11 +402,11 @@ class TunnelGenerator {
   }
 
   /**
-   * Dig a corridor from fromPoint to toPoint, assuming that both points are adjacent to valid locations for doors on
-   * the map.
+   * Dig a corridor from fromPoint to toPoint, assuming that both points are
+   * adjacent to valid locations for doors on the map.
    *
-   * This is as close a copy of dig_corridor in the Nethack source as I could muster. It's not exactly pretty. This
-   * method assumed
+   * This is as close a copy of dig_corridor in the Nethack source as I could
+   * muster. It's not exactly pretty. This method assumed
    */
   #digCorridorFromPointToPoint(p, fromPoint, toPoint) {
     const MAX_STEPS = 500;
@@ -711,6 +711,8 @@ new p5(p => {
 
   p.setup = () => {
     const container = document.querySelector('#dungeon-background');
+    console.assert(container, "Missing #dungeon-background element");
+
     canvasWidth = parseFloat(getComputedStyle(container).width);
     canvasHeight = parseFloat(getComputedStyle(container).height);
 
@@ -731,9 +733,11 @@ new p5(p => {
 
     grid = new Grid(gridBounds.size.width, gridBounds.size.height);
     grid.generate(p, NRandomRoomsGenerator, TunnelGenerator);
-  }
+  };
 
   p.draw = () => {
+    console.log("Drawing");
+
     p.textSize(CELL_HEIGHT);
 
     for (let y = 0; y < grid.height; y++) {