From ae963d20d1fa52b8899c27bd407b05876c2728d2 Mon Sep 17 00:00:00 2001 From: wgroeneveld Date: Fri, 8 Apr 2022 21:23:23 +0200 Subject: [PATCH] added sort capability to game grid list, fix for scoring in templates --- content/_index.md | 2 +- content/articles/ds-xtreme-cartridge.md | 1 - content/articles/gba-rpgs.md | 1 - content/games/jagged-alliance-2.md | 2 +- content/games/wonderland-dizzy.md | 1 + content/platforms/gb.md | 2 +- .../assets/sass/_codex.sass | 8 ++++ .../assets/sass/_grid.sass | 7 +++ .../layouts/partials/portfoliolite-block.html | 7 +-- .../layouts/partials/portfoliolite.html | 4 ++ .../layouts/partials/score.html | 6 +-- .../layouts/platforms/single.html | 4 ++ .../static/js/codex.js | 44 +++++++++++++++++++ 13 files changed, 77 insertions(+), 12 deletions(-) diff --git a/content/_index.md b/content/_index.md index ac26f31..a3bbdc1 100644 --- a/content/_index.md +++ b/content/_index.md @@ -21,7 +21,7 @@ That healthy cocktail left a lasting impression - and netted me the Codex (and g > Stay Awhile and Listen! -- **Looking for something** specific? Browse by [all games](/games) | [per platform](/platforms) | [the appendix](/tags). +- **Looking for something**? Browse by [all games](/games) | [per platform](/platforms) | [the appendix](/tags). - Want to stay up to date? **[Subscribe to the RSS feed](/index.xml)**. --- diff --git a/content/articles/ds-xtreme-cartridge.md b/content/articles/ds-xtreme-cartridge.md index 7feab64..8d621a9 100644 --- a/content/articles/ds-xtreme-cartridge.md +++ b/content/articles/ds-xtreme-cartridge.md @@ -2,7 +2,6 @@ title: "The DS X-Treme Cartridge: A First Look" date: 2006-11-22 image: /img/games/DS-Xtreme/dsx_box.jpg -game_platform: ds tags: - hardware --- diff --git a/content/articles/gba-rpgs.md b/content/articles/gba-rpgs.md index 8a5042c..f73a414 100644 --- a/content/articles/gba-rpgs.md +++ b/content/articles/gba-rpgs.md @@ -2,7 +2,6 @@ image: "/img/games/gbarpg.jpeg" date: "2006-11-15" title: "Impressive GBA RPGs" -game_platform: gba aliases: ['/articles/features/gba-rpgs'] tags: ['rpg concepts', 'Final Fantasy', 'Yggdra Union', 'Fire Emblem', 'Golden Sun', 'Tactics Ogre', 'jrpg', 'strategy', 'Final Fantasy Tactics', 'Riviera'] --- diff --git a/content/games/jagged-alliance-2.md b/content/games/jagged-alliance-2.md index 5eb07f5..73fc127 100644 --- a/content/games/jagged-alliance-2.md +++ b/content/games/jagged-alliance-2.md @@ -1,7 +1,7 @@ --- date: "2006-10-23" howlongtobeat_id: 15740 -howlongtobeat_hrs: 0 +howlongtobeat_hrs: 61 game_name: 'Jagged Alliance 2' game_platform: PC game_genre: 'TBS' diff --git a/content/games/wonderland-dizzy.md b/content/games/wonderland-dizzy.md index 34c3768..4a50a05 100644 --- a/content/games/wonderland-dizzy.md +++ b/content/games/wonderland-dizzy.md @@ -2,6 +2,7 @@ title: "Wonderland Dizzy: Better Left Undiscovered?" date: 2022-01-26 score: 2 +game_name: "Wonderland Dizzy" game_release_year: 2015 game_developer: 'The Oliver Twins' game_platform: 'NES' diff --git a/content/platforms/gb.md b/content/platforms/gb.md index 22e3a09..df81d83 100644 --- a/content/platforms/gb.md +++ b/content/platforms/gb.md @@ -4,4 +4,4 @@ platform: GB image: "/img/gb-cover.png" --- -The Grey Brick, my First Big Crush. What's there to say? This is an iconic piece of hardware that continues to be loved all over the world by nerds and collectors who know what's good for them. Released in 1989 in Japan, and only being beaten by its successor the [Game Boy Color](/platforms/gbc) nine full years later, the GB has a _massive_ collection of good and not so good games. \ No newline at end of file +The Grey Brick, my First Big Crush. What's there to say? This is an iconic piece of hardware that continues to be loved all over the world by nerds and collectors who know what's good for them. Released in 1989 in Japan, and only being beaten by its successor the [Game Boy Color](/platforms/gbc) nine full years later---and the more recent [Analogue Pocket](/articles/analogue-pocket)---the GB has a _massive_ collection of good and not so good games. \ No newline at end of file diff --git a/themes/jefklak-creative-portfolio/assets/sass/_codex.sass b/themes/jefklak-creative-portfolio/assets/sass/_codex.sass index 85cb785..fe20166 100644 --- a/themes/jefklak-creative-portfolio/assets/sass/_codex.sass +++ b/themes/jefklak-creative-portfolio/assets/sass/_codex.sass @@ -95,6 +95,14 @@ button color: white !important border-color: darkgrey !important +.sorted + box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.35) + + &-asc:before + content: "​ ▼ ​" + &-desc:before + content: "​ ▲ ​" + .small-navbar button position: fixed diff --git a/themes/jefklak-creative-portfolio/assets/sass/_grid.sass b/themes/jefklak-creative-portfolio/assets/sass/_grid.sass index 3701309..4df1e1f 100644 --- a/themes/jefklak-creative-portfolio/assets/sass/_grid.sass +++ b/themes/jefklak-creative-portfolio/assets/sass/_grid.sass @@ -17,3 +17,10 @@ p margin: 0 + + time + display: none + +.gamegridcontrols + background: scale-color($bglight, $lightness: -10%) + padding: 0.7rem diff --git a/themes/jefklak-creative-portfolio/layouts/partials/portfoliolite-block.html b/themes/jefklak-creative-portfolio/layouts/partials/portfoliolite-block.html index 84c7b7b..7f5dd22 100644 --- a/themes/jefklak-creative-portfolio/layouts/partials/portfoliolite-block.html +++ b/themes/jefklak-creative-portfolio/layouts/partials/portfoliolite-block.html @@ -21,12 +21,13 @@ {{ end }} thumbnail of {{ .Params.game_name }} -

{{ .Params.game_name }}

+

{{ .Params.game_name }}

+

- {{ .Params.game_developer }} ({{ .Params.game_release_year }})
+ {{ .Params.game_developer }} ({{ .Params.game_release_year }})
{{ with .Params.howlongtobeat_hrs }} - {{ . }} hr{{ if gt . 1}}s{{ end }}. + {{ . }} hr{{ if gt . 1}}s{{ end }}. {{ end }}

{{ .Scratch.Set "simplescore" 1 }} diff --git a/themes/jefklak-creative-portfolio/layouts/partials/portfoliolite.html b/themes/jefklak-creative-portfolio/layouts/partials/portfoliolite.html index 4676d48..f268bc9 100644 --- a/themes/jefklak-creative-portfolio/layouts/partials/portfoliolite.html +++ b/themes/jefklak-creative-portfolio/layouts/partials/portfoliolite.html @@ -11,6 +11,10 @@

Game Codex »

+
+ Sort by:        +
+
{{ range .Pages }} {{ partial "portfoliolite-block.html" . }} diff --git a/themes/jefklak-creative-portfolio/layouts/partials/score.html b/themes/jefklak-creative-portfolio/layouts/partials/score.html index c09ae15..2bc6f4a 100644 --- a/themes/jefklak-creative-portfolio/layouts/partials/score.html +++ b/themes/jefklak-creative-portfolio/layouts/partials/score.html @@ -2,8 +2,7 @@ {{ if isset $.Params "score" }}

{{ $score := $.Params.score }} - {{ if eq $simplescore 1 }} - {{ else }} + {{ if not $simplescore }} Verdict: {{ $score }}/5 {{ end }} {{ range after 0 (seq $score)}} @@ -13,8 +12,7 @@ {{ end }} - {{ if eq $simplescore 1 }} - {{ else }} + {{ if not $simplescore }} {{ if eq $score 5 }} It was amazing! {{ else if eq $score 4 }} diff --git a/themes/jefklak-creative-portfolio/layouts/platforms/single.html b/themes/jefklak-creative-portfolio/layouts/platforms/single.html index 293713c..9e89452 100644 --- a/themes/jefklak-creative-portfolio/layouts/platforms/single.html +++ b/themes/jefklak-creative-portfolio/layouts/platforms/single.html @@ -19,6 +19,10 @@

Games »

+
+ Sort by:        +
+
{{ $targetplatform := .Params.platform | lower }} {{ range sort (where .Site.Pages ".Section" "in" (slice "games" "articles")) ".Params.game_name" "asc" }} diff --git a/themes/jefklak-creative-portfolio/static/js/codex.js b/themes/jefklak-creative-portfolio/static/js/codex.js index 6c43532..b92f4e9 100644 --- a/themes/jefklak-creative-portfolio/static/js/codex.js +++ b/themes/jefklak-creative-portfolio/static/js/codex.js @@ -1,5 +1,49 @@ $(function() { + function sort(by, reverse) { + // by year, name, hours (see portfoliolite-block) + let articles = [...document.querySelectorAll('.gamegrid article')] + const grid = document.querySelector('.gamegrid') + const toI = (el, prop) => { + const propEl = el.querySelector(`.${prop}`) + return propEl ? parseInt(propEl.innerHTML) : 0 + } + var sorts = { + "year": (a, b) => { + return toI(a, 'year') > toI(b, 'year') + }, + "name": (a, b) => { + return a.innerHTML.localeCompare(b.innerHTML) + }, + "hours": (a, b) => { + return toI(a, 'hours') > toI(b, 'hours') + }, + "date": (a, b) => { + return a.querySelector('.date').dateTime.localeCompare(b.querySelector('.date').dateTime) + } + } + + articles.sort(sorts[by]) + if(reverse) articles.reverse() + grid.innerHTML = "" + grid.append(...articles) + } + function toggleSort() { + $('.sortbtn').click(function() { + const me = $(this) + $('button.sorted').removeClass('sorted') + $('button.sorted-asc').removeClass('sorted-asc') + $('button.sorted-desc').removeClass('sorted-desc') + me.addClass('sorted') + const rev = me.data('sorted') === 'asc' ? 'desc' : 'asc' + me.data('sorted', rev) + + sort(me.data('sort'), rev === 'desc') + me.addClass(`sorted-${rev}`) + }) + } + toggleSort(); + var disableResponsiveImagesForInlineLis = function() { $('li img.img-responsive').each(function() { $(this).removeClass('img-responsive');