diff --git a/theme/basic.css b/theme/basic.css index 808af78..1ca2a37 100644 --- a/theme/basic.css +++ b/theme/basic.css @@ -94,6 +94,9 @@ nav ul, .category ul { nav li, .category li { display: inline; } +.category li.entitled { + flex-basis: 100%; +} .mothball { float: right; text-decoration: none; diff --git a/theme/config.json b/theme/config.json index ff6284c..8d4e3c4 100644 --- a/theme/config.json +++ b/theme/config.json @@ -1,5 +1,6 @@ { "TrackSolved": true, + "Titles": false, "Scoreboard": { "DisplayServerURLWhenEnabled": true, "ShowCategoryLeaders": true, diff --git a/theme/index.mjs b/theme/index.mjs index f3864e9..e9f80cc 100644 --- a/theme/index.mjs +++ b/theme/index.mjs @@ -155,6 +155,9 @@ class App { if (this.config.TrackSolved) { a.classList.toggle("solved", this.state.IsSolved(puzzle)) } + if (this.config.Titles) { + this.loadTitle(puzzle, i) + } } if (!this.state.ContainsUnsolved(cat)) { @@ -164,6 +167,28 @@ class App { element.appendChild(pdiv) } } + + /** + * Asynchronously loads a puzzle, in order to populate the title. + * + * Calling this for every open puzzle will generate a lot of load on the server. + * If we decide we want this for a multi-participant server, + * we should implement some sort of cache. + * + * @param {Puzzle} puzzle + * @param {Element} element + */ + async loadTitle(puzzle, element) { + await puzzle.Populate() + let title = puzzle.Extra.title + if (!title) { + return + } + element.classList.add("entitled") + for (let a of element.querySelectorAll("a")) { + a.textContent += `: ${title}` + } + } } function init() {