eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Get the nethack page looking good again

Browse source 
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.
This commit is contained in:
Eryn Wells 2024-10-27 09:56:46 -06:00
parent 2b613de769
commit d5296995de
10 changed files with 206 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

28
layouts/nethack/single.html Normal file
View file

@ -0,0 +1,28 @@
{{ define "main" }}
<main class="main--single main--nethack">
{{ if .Title -}}
<header class="page-header">
{{ partial "page_header.html" (dict "page" .) }}
</header>
{{ end }}
{{- .Content -}}
<footer class="page-footer">
{{ partial "page/footer.html" . }}
</footer>
</main>
<div id="dungeon-background"></div>
{{ end }}
{{ define "after_js" }}
{{/* TODO: Get the dungon script working again. :( */}}
{{/*
{{ with resources.Get "scripts/lib/p5-1.5.0.js" }}
<script defer src="{{ .Permalink }}"></script>
{{ end }}
{{ with resources.Get "scripts/nethack/dungeon.js" }}
<script defer src="{{ .Permalink }}"></script>
{{ end }}
*/}}
{{ end }}

4
layouts/partials/nethack/log.html
View file

@ -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 }}

76
layouts/partials/nethack/logentry.html
View file

@ -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) -}}
<div>{{- if $didAscend -}}✨{{- else -}}🪦{{- end -}}</div>
<h4 class="date">{{ time.Format "January 2, 2006" .end_date }}</h4>
<div class="character-descriptor">{{ .character.abbreviated }}</div>
<p>
<div class="nethack-logentry__marker">{{- if $didAscend -}}✨{{- else -}}🪦{{- end -}}</div>
<h4 class="nethack-logentry__date">{{ time.Format "January 2, 2006" .end_date }}</h4>
{{ with .character.descriptor -}}
<p class="nethack-logentry__character-descriptor">{{ . }}</p>
{{ end }}
<p class="nethack-logentry__description">
{{- $name := .character.name -}}
{{- $descriptiveAlignment := .character.alignment.descriptive | lower -}}
{{- $descriptiveRace := .character.race.descriptive | lower -}}
@ -19,30 +21,52 @@
She was {{ .death.cause }}.
{{- end -}}
</p>
<table class="stats">
<table class="nethack-logentry__stats">
<thead>
<tr>
{{- $startDate := time.Format "January, 02 2006" .start_date -}}
{{- $startDatetime := time.Format "2006-01-02" .start_date -}}
<td class="began">Began <time class="nobreak" datetime="{{ $startDatetime }}">{{ $startDate }}</time></td>
<td class="score">{{ .score | lang.FormatNumber 0 }} points</td>
{{/*
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 }}
<td class="level">{{ .descriptive }}</td>
<td class="nethack-logentry__began">{{ i18n "nethackBegan" }}</td>
<td class="nethack-logentry__score">{{ i18n "nethackScore" }}</td>
<td class="nethack-logentry__level">
{{ if .dungeon.max_level }}
{{ i18n "nethackDungeonLevel" }}
{{ else }}
{{ with .character.max_level }}<td class="level">Level {{ . }}</td>{{ end }}
{{ i18n "nethackCharacterLevel" }}
{{ end }}
<td class="hp">
{{- $hp := float .character.hp.n -}}
{{- $hpMax := .character.hp.max -}}
{{- if gt $hp 0 }}{{ $hp }} / {{ $hpMax }}{{ else }}{{ $hp }}{{ end }} hp
</td>
</td>
<td class="nethack-logentry__hp">{{ i18n "nethackHP" }}</td>
</tr>
</thead>
<tbody>
<tr>
<td class="nethack-logentry__began">
{{- $startDate := time.Format "2006-01-02" .start_date -}}
{{- $startDatetime := time.Format "2006-01-02" .start_date -}}
<time class="nobreak" datetime="{{ $startDatetime }}">{{ $startDate }}</time>
</td>
<td class="nethack-logentry__score">
{{- .score | lang.FormatNumber 0 -}}
</td>
{{/*
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 -}}
<td class="nethack-logentry__level">{{ .n }}</td>
{{ else -}}
{{ with .character.max_level -}}
<td class="nethack-logentry__level">{{ . }}</td>
{{ end }}
{{ end }}
<td class="nethack-logentry__hp">
{{- $hp := float .character.hp.n -}}
{{- $hpMax := .character.hp.max -}}
{{- if gt $hp 0 }}{{ $hp }} / {{ $hpMax }}{{ else }}{{ $hp }}{{ end }}
</td>
</tr>
</tbody>
</table>

2
layouts/shortcodes/nethack/best_game.html
View file

@ -3,7 +3,7 @@
{{ range $nethack_data }}
{{ $logfile = $logfile | append .logfile }}
{{ end }}
<ol class="logfile">
<ol class="nethack-logfile">
<li>
{{ partial "nethack/logentry.html" (index (sort $logfile "score" "desc") 0) }}
</li>

13
layouts/shortcodes/nethack/logfile.html
View file

@ -1,10 +1,9 @@
{{- $logfile := partial "nethack/log.html" . -}}
<ol class="logfile">
{{ range sort $logfile "end_date" "desc" }}
{{ if ne .death.cause "quit" }}
<li>
{{ partial "nethack/logentry.html" .}}
</li>
{{ end }}
{{- $logfile = where $logfile "death.cause" "ne" "quit" -}}
<ol class="nethack-logfile">
{{ range sort $logfile "end_date" "desc" -}}
<li class="nethack-logfile__entry">
{{ partial "nethack/logentry.html" .}}
</li>
{{ end }}
</ol>

4
layouts/shortcodes/nethack/topn.html
View file

@ -1,7 +1,7 @@
{{- $n := .Get 0 -}}
{{- $logfile := partial "nethack/log.html" . -}}
<ol class="logfile topn">
<ol class="nethack-logfile nethack-topn">
{{ range first $n (sort $logfile "score" "desc") -}}
<li>{{ partial "nethack/logentry.html" . }}</li>
<li class="nethack-logentry">{{ partial "nethack/logentry.html" . }}</li>
{{- end }}
</ol>