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.
This commit is contained in:
parent
2b613de769
commit
d5296995de
10 changed files with 206 additions and 45 deletions
100
assets/css/099_nethack.css
Normal file
100
assets/css/099_nethack.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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++) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
28
layouts/nethack/single.html
Normal file
28
layouts/nethack/single.html
Normal 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 }}
|
||||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue