added sort capability to game grid list, fix for scoring in templates
This commit is contained in:
parent
a79c7ad180
commit
ae963d20d1
|
@ -21,7 +21,7 @@ That healthy cocktail left a lasting impression - and netted me the Codex (and g
|
||||||
|
|
||||||
> Stay Awhile and Listen!
|
> 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)**.
|
- Want to stay up to date? **[Subscribe to the RSS feed](/index.xml)**.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
title: "The DS X-Treme Cartridge: A First Look"
|
title: "The DS X-Treme Cartridge: A First Look"
|
||||||
date: 2006-11-22
|
date: 2006-11-22
|
||||||
image: /img/games/DS-Xtreme/dsx_box.jpg
|
image: /img/games/DS-Xtreme/dsx_box.jpg
|
||||||
game_platform: ds
|
|
||||||
tags:
|
tags:
|
||||||
- hardware
|
- hardware
|
||||||
---
|
---
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
image: "/img/games/gbarpg.jpeg"
|
image: "/img/games/gbarpg.jpeg"
|
||||||
date: "2006-11-15"
|
date: "2006-11-15"
|
||||||
title: "Impressive GBA RPGs"
|
title: "Impressive GBA RPGs"
|
||||||
game_platform: gba
|
|
||||||
aliases: ['/articles/features/gba-rpgs']
|
aliases: ['/articles/features/gba-rpgs']
|
||||||
tags: ['rpg concepts', 'Final Fantasy', 'Yggdra Union', 'Fire Emblem', 'Golden Sun', 'Tactics Ogre', 'jrpg', 'strategy', 'Final Fantasy Tactics', 'Riviera']
|
tags: ['rpg concepts', 'Final Fantasy', 'Yggdra Union', 'Fire Emblem', 'Golden Sun', 'Tactics Ogre', 'jrpg', 'strategy', 'Final Fantasy Tactics', 'Riviera']
|
||||||
---
|
---
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
date: "2006-10-23"
|
date: "2006-10-23"
|
||||||
howlongtobeat_id: 15740
|
howlongtobeat_id: 15740
|
||||||
howlongtobeat_hrs: 0
|
howlongtobeat_hrs: 61
|
||||||
game_name: 'Jagged Alliance 2'
|
game_name: 'Jagged Alliance 2'
|
||||||
game_platform: PC
|
game_platform: PC
|
||||||
game_genre: 'TBS'
|
game_genre: 'TBS'
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
title: "Wonderland Dizzy: Better Left Undiscovered?"
|
title: "Wonderland Dizzy: Better Left Undiscovered?"
|
||||||
date: 2022-01-26
|
date: 2022-01-26
|
||||||
score: 2
|
score: 2
|
||||||
|
game_name: "Wonderland Dizzy"
|
||||||
game_release_year: 2015
|
game_release_year: 2015
|
||||||
game_developer: 'The Oliver Twins'
|
game_developer: 'The Oliver Twins'
|
||||||
game_platform: 'NES'
|
game_platform: 'NES'
|
||||||
|
|
|
@ -4,4 +4,4 @@ platform: GB
|
||||||
image: "/img/gb-cover.png"
|
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.
|
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.
|
|
@ -95,6 +95,14 @@ button
|
||||||
color: white !important
|
color: white !important
|
||||||
border-color: darkgrey !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
|
.small-navbar button
|
||||||
position: fixed
|
position: fixed
|
||||||
|
|
|
@ -17,3 +17,10 @@
|
||||||
|
|
||||||
p
|
p
|
||||||
margin: 0
|
margin: 0
|
||||||
|
|
||||||
|
time
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.gamegridcontrols
|
||||||
|
background: scale-color($bglight, $lightness: -10%)
|
||||||
|
padding: 0.7rem
|
||||||
|
|
|
@ -21,12 +21,13 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<img loading="lazy" src="{{ $thumb }}" alt="thumbnail of {{ .Params.game_name }}" class="img-responsive img-inactive screenshot">
|
<img loading="lazy" src="{{ $thumb }}" alt="thumbnail of {{ .Params.game_name }}" class="img-responsive img-inactive screenshot">
|
||||||
</a>
|
</a>
|
||||||
<h4><a href="{{ .Permalink }}">{{ .Params.game_name }}</a></h4>
|
<h4><a href="{{ .Permalink }}" class="name">{{ .Params.game_name }}</a></h4>
|
||||||
<div>
|
<div>
|
||||||
|
<time datetime='{{ .Date.Format "2006-01-02" }}' class="date" title="Created Date">{{ .Date.Format "2006-01-02" }}</time>
|
||||||
<p>
|
<p>
|
||||||
{{ .Params.game_developer }} ({{ .Params.game_release_year }})<br/>
|
{{ .Params.game_developer }} (<span class="year">{{ .Params.game_release_year }}</span>)<br/>
|
||||||
{{ with .Params.howlongtobeat_hrs }}
|
{{ with .Params.howlongtobeat_hrs }}
|
||||||
<code>{{ . }}</code> hr{{ if gt . 1}}s{{ end }}.
|
<code class="hours">{{ . }}</code> hr{{ if gt . 1}}s{{ end }}.
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</p>
|
</p>
|
||||||
{{ .Scratch.Set "simplescore" 1 }}
|
{{ .Scratch.Set "simplescore" 1 }}
|
||||||
|
|
|
@ -11,6 +11,10 @@
|
||||||
|
|
||||||
<h2>Game Codex »</h2>
|
<h2>Game Codex »</h2>
|
||||||
|
|
||||||
|
<div class="gamegridcontrols">
|
||||||
|
Sort by: <button class="sortbtn sorted sorted-asc" data-sort="date">Date added</button> <button class="sortbtn" data-sort="name">Title</button> <button class="sortbtn" data-sort="year">Release year</button> <button class="sortbtn" data-sort="hours">How long to beat</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="gamegrid">
|
<div class="gamegrid">
|
||||||
{{ range .Pages }}
|
{{ range .Pages }}
|
||||||
{{ partial "portfoliolite-block.html" . }}
|
{{ partial "portfoliolite-block.html" . }}
|
||||||
|
|
|
@ -2,8 +2,7 @@
|
||||||
{{ if isset $.Params "score" }}
|
{{ if isset $.Params "score" }}
|
||||||
<p>
|
<p>
|
||||||
{{ $score := $.Params.score }}
|
{{ $score := $.Params.score }}
|
||||||
{{ if eq $simplescore 1 }}
|
{{ if not $simplescore }}
|
||||||
{{ else }}
|
|
||||||
<strong>Verdict</strong>: {{ $score }}/5
|
<strong>Verdict</strong>: {{ $score }}/5
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ range after 0 (seq $score)}}
|
{{ range after 0 (seq $score)}}
|
||||||
|
@ -13,8 +12,7 @@
|
||||||
<img src="/img/random/4.gif" class="score score-off" title="Score: {{ $score }}/5" />
|
<img src="/img/random/4.gif" class="score score-off" title="Score: {{ $score }}/5" />
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ if eq $simplescore 1 }}
|
{{ if not $simplescore }}
|
||||||
{{ else }}
|
|
||||||
{{ if eq $score 5 }}
|
{{ if eq $score 5 }}
|
||||||
It was amazing!
|
It was amazing!
|
||||||
{{ else if eq $score 4 }}
|
{{ else if eq $score 4 }}
|
||||||
|
|
|
@ -19,6 +19,10 @@
|
||||||
|
|
||||||
<h2>Games »</h2>
|
<h2>Games »</h2>
|
||||||
|
|
||||||
|
<div class="gamegridcontrols">
|
||||||
|
Sort by: <button class="sortbtn sorted sorted-asc" data-sort="date">Date added</button> <button class="sortbtn" data-sort="name">Title</button> <button class="sortbtn" data-sort="year">Release year</button> <button class="sortbtn" data-sort="hours">How long to beat</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="gamegrid">
|
<div class="gamegrid">
|
||||||
{{ $targetplatform := .Params.platform | lower }}
|
{{ $targetplatform := .Params.platform | lower }}
|
||||||
{{ range sort (where .Site.Pages ".Section" "in" (slice "games" "articles")) ".Params.game_name" "asc" }}
|
{{ range sort (where .Site.Pages ".Section" "in" (slice "games" "articles")) ".Params.game_name" "asc" }}
|
||||||
|
|
|
@ -1,5 +1,49 @@
|
||||||
$(function() {
|
$(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() {
|
var disableResponsiveImagesForInlineLis = function() {
|
||||||
$('li img.img-responsive').each(function() {
|
$('li img.img-responsive').each(function() {
|
||||||
$(this).removeClass('img-responsive');
|
$(this).removeClass('img-responsive');
|
||||||
|
|
Loading…
Reference in New Issue