From d5296995dec4ab5086a24012d13d5e0c63662d56 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 27 Oct 2024 09:56:46 -0600 Subject: [PATCH] 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 | 100 ++++++++++++++++++++++ assets/scripts/nethack/dungeon.js | 14 +-- content/nethack/index.md | 3 +- i18n/en.yaml | 7 ++ layouts/nethack/single.html | 28 ++++++ layouts/partials/nethack/log.html | 4 +- layouts/partials/nethack/logentry.html | 76 ++++++++++------ layouts/shortcodes/nethack/best_game.html | 2 +- layouts/shortcodes/nethack/logfile.html | 13 ++- layouts/shortcodes/nethack/topn.html | 4 +- 10 files changed, 206 insertions(+), 45 deletions(-) create mode 100644 assets/css/099_nethack.css create mode 100644 layouts/nethack/single.html diff --git a/assets/css/099_nethack.css b/assets/css/099_nethack.css new file mode 100644 index 0000000..3667e30 --- /dev/null +++ b/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; + } + } +} diff --git a/assets/scripts/nethack/dungeon.js b/assets/scripts/nethack/dungeon.js index 0c8eabb..6203f94 100644 --- a/assets/scripts/nethack/dungeon.js +++ b/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++) { diff --git a/content/nethack/index.md b/content/nethack/index.md index b6c9a5c..7ca6b9c 100644 --- a/content/nethack/index.md +++ b/content/nethack/index.md @@ -1,7 +1,6 @@ --- -title: "Nethack" +title: Nethack description: In which I play way too much of a silly command line Roguelike game. -date: 2022-04-13T08:43:46-07:00 type: nethack --- diff --git a/i18n/en.yaml b/i18n/en.yaml index 493a4a2..11d2838 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -4,3 +4,10 @@ blackLivesMatter: other: "Black lives matter." getVaccinated: other: "Get vaccinated." + + +nethackBegan: Began +nethackScore: Score +nethackDungeonLevel: Dungeon Level +nethackCharacterLevel: Character Level +nethackHP: HP diff --git a/layouts/nethack/single.html b/layouts/nethack/single.html new file mode 100644 index 0000000..ed694ff --- /dev/null +++ b/layouts/nethack/single.html @@ -0,0 +1,28 @@ +{{ define "main" }} +
+ {{ if .Title -}} +
+ {{ partial "page_header.html" (dict "page" .) }} +
+ {{ end }} + + {{- .Content -}} + +
+ {{ partial "page/footer.html" . }} +
+
+
+{{ end }} + +{{ define "after_js" }} + {{/* TODO: Get the dungon script working again. :( */}} + {{/* + {{ with resources.Get "scripts/lib/p5-1.5.0.js" }} + + {{ end }} + {{ with resources.Get "scripts/nethack/dungeon.js" }} + + {{ end }} + */}} +{{ end }} diff --git a/layouts/partials/nethack/log.html b/layouts/partials/nethack/log.html index fdb99b8..6220642 100644 --- a/layouts/partials/nethack/log.html +++ b/layouts/partials/nethack/log.html @@ -1,6 +1,6 @@ -{{ $nethack_data := $.Site.Data.nethack.logfile }} +{{ $nethackData := $.Site.Data.nethack.logfile }} {{ $logfile := slice }} -{{ range $nethack_data }} +{{ range $nethackData }} {{ $logfile = $logfile | append .logfile }} {{ end }} {{ return $logfile }} diff --git a/layouts/partials/nethack/logentry.html b/layouts/partials/nethack/logentry.html index bbc03ff..1de228d 100644 --- a/layouts/partials/nethack/logentry.html +++ b/layouts/partials/nethack/logentry.html @@ -1,10 +1,12 @@ {{- $cause := .death.cause -}} {{- $didAscend := eq $cause "ascended" -}} {{- $level := (cond (gt .dungeon.level.n 0) (.dungeon.level.descriptive | lower) .dungeon.level.descriptive) -}} -
{{- if $didAscend -}}✨{{- else -}}🪦{{- end -}}
-

{{ time.Format "January 2, 2006" .end_date }}

-
{{ .character.abbreviated }}
-

+

{{- if $didAscend -}}✨{{- else -}}🪦{{- end -}}
+

{{ time.Format "January 2, 2006" .end_date }}

+{{ with .character.descriptor -}} +

{{ . }}

+{{ end }} +

{{- $name := .character.name -}} {{- $descriptiveAlignment := .character.alignment.descriptive | lower -}} {{- $descriptiveRace := .character.race.descriptive | lower -}} @@ -19,30 +21,52 @@ She was {{ .death.cause }}. {{- end -}}

- +
+ - {{- $startDate := time.Format "January, 02 2006" .start_date -}} - {{- $startDatetime := time.Format "2006-01-02" .start_date -}} - - - {{/* - When I first wrote the importer script, I read about the log file - format on the Nethackwiki. It labeled a field as "maximum level", - which I interpreted as maximum character level. Turns out it's - actually maximum *dungeon* level. The script has been updated, but I - won't be able to update all the imported logfiles. - - https://nethackwiki.com/wiki/Logfile - */}} - {{ with .dungeon.max_level }} - + + + {{ end }} + {{ i18n "nethackCharacterLevel" }} {{ end }} - + + + + + + + + {{/* + When I first wrote the importer script, I read about the log file + format on the Nethackwiki. It labeled a field as "maximum level", + which I interpreted as maximum character level. Turns out it's + actually maximum *dungeon* level. The script has been updated, but I + won't be able to update all the imported logfiles. + + https://nethackwiki.com/wiki/Logfile + */}} + {{ with .dungeon.max_level -}} + + {{ else -}} + {{ with .character.max_level -}} + + {{ end }} + {{ end }} + + +
Began {{ .score | lang.FormatNumber 0 }} points{{ .descriptive }}{{ i18n "nethackBegan" }}{{ i18n "nethackScore" }} + {{ if .dungeon.max_level }} + {{ i18n "nethackDungeonLevel" }} {{ else }} - {{ with .character.max_level }}Level {{ . }} - {{- $hp := float .character.hp.n -}} - {{- $hpMax := .character.hp.max -}} - {{- if gt $hp 0 }}{{ $hp }} / {{ $hpMax }}{{ else }}{{ $hp }}{{ end }} hp - {{ i18n "nethackHP" }}
+ {{- $startDate := time.Format "2006-01-02" .start_date -}} + {{- $startDatetime := time.Format "2006-01-02" .start_date -}} + + + {{- .score | lang.FormatNumber 0 -}} + {{ .n }}{{ . }} + {{- $hp := float .character.hp.n -}} + {{- $hpMax := .character.hp.max -}} + {{- if gt $hp 0 }}{{ $hp }} / {{ $hpMax }}{{ else }}{{ $hp }}{{ end }} +
diff --git a/layouts/shortcodes/nethack/best_game.html b/layouts/shortcodes/nethack/best_game.html index e02457a..4fd882e 100644 --- a/layouts/shortcodes/nethack/best_game.html +++ b/layouts/shortcodes/nethack/best_game.html @@ -3,7 +3,7 @@ {{ range $nethack_data }} {{ $logfile = $logfile | append .logfile }} {{ end }} -
    +
    1. {{ partial "nethack/logentry.html" (index (sort $logfile "score" "desc") 0) }}
      2. diff --git a/layouts/shortcodes/nethack/logfile.html b/layouts/shortcodes/nethack/logfile.html index 73d0450..2ef72de 100644 --- a/layouts/shortcodes/nethack/logfile.html +++ b/layouts/shortcodes/nethack/logfile.html @@ -1,10 +1,9 @@ {{- $logfile := partial "nethack/log.html" . -}} -
        - {{ range sort $logfile "end_date" "desc" }} - {{ if ne .death.cause "quit" }} -
      1. - {{ partial "nethack/logentry.html" .}} -
        2. - {{ end }} +{{- $logfile = where $logfile "death.cause" "ne" "quit" -}} +
          + {{ range sort $logfile "end_date" "desc" -}} +
        1. + {{ partial "nethack/logentry.html" .}} +
          2. {{ end }}
        diff --git a/layouts/shortcodes/nethack/topn.html b/layouts/shortcodes/nethack/topn.html index 699c650..1af14e1 100644 --- a/layouts/shortcodes/nethack/topn.html +++ b/layouts/shortcodes/nethack/topn.html @@ -1,7 +1,7 @@ {{- $n := .Get 0 -}} {{- $logfile := partial "nethack/log.html" . -}} -
          +
            {{ range first $n (sort $logfile "score" "desc") -}} -
          1. {{ partial "nethack/logentry.html" . }}
            2. +
          2. {{ partial "nethack/logentry.html" . }}
            3. {{- end }}