added sort capability to game grid list, fix for scoring in templates

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)**.
 
 ---

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

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']
 ---

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'

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'

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. 
+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. 

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

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

themes/jefklak-creative-portfolio/layouts/partials/portfoliolite-block.html

@@ -21,12 +21,13 @@
     {{ end }} 
       <img loading="lazy" src="{{ $thumb }}" alt="thumbnail of {{ .Params.game_name }}" class="img-responsive img-inactive screenshot">
     </a>
-    <h4><a href="{{ .Permalink }}">{{ .Params.game_name }}</a></h4>
+    <h4><a href="{{ .Permalink }}" class="name">{{ .Params.game_name }}</a></h4>
     <div>
+      <time datetime='{{ .Date.Format "2006-01-02" }}' class="date" title="Created Date">{{ .Date.Format "2006-01-02" }}</time>
       <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 }}
-          <code>{{ . }}</code> hr{{ if gt . 1}}s{{ end }}.
+          <code class="hours">{{ . }}</code> hr{{ if gt . 1}}s{{ end }}.
         {{ end }}
       </p>
       {{ .Scratch.Set "simplescore" 1 }}

themes/jefklak-creative-portfolio/layouts/partials/portfoliolite.html

@@ -11,6 +11,10 @@
 
           <h2>Game Codex &raquo;</h2>
 
+          <div class="gamegridcontrols">
+          Sort by: <button class="sortbtn sorted sorted-asc" data-sort="date">Date added</button>&nbsp;&nbsp;<button class="sortbtn" data-sort="name">Title</button>&nbsp;&nbsp;<button class="sortbtn" data-sort="year">Release year</button>&nbsp;&nbsp;<button class="sortbtn" data-sort="hours">How long to beat</button>
+          </div>
+
           <div class="gamegrid">
           {{ range .Pages }}
               {{ partial "portfoliolite-block.html" . }}

themes/jefklak-creative-portfolio/layouts/partials/score.html

@@ -2,8 +2,7 @@
 {{ if isset $.Params "score" }}
   <p>
   {{ $score := $.Params.score }}
-  {{ if eq $simplescore 1 }}
+  {{ if not $simplescore }}
-  {{ else }}
     <strong>Verdict</strong>: {{ $score }}/5
   {{ end }}
   {{ range after 0 (seq $score)}}
@@ -13,8 +12,7 @@
     <img src="/img/random/4.gif" class="score score-off" title="Score: {{ $score }}/5" />
   {{ end }}
 
-  {{ if eq $simplescore 1 }}
+  {{ if not $simplescore }}
-  {{ else }}
     {{ if eq $score 5 }}
     It was amazing!
     {{ else if eq $score 4 }}

themes/jefklak-creative-portfolio/layouts/platforms/single.html

@@ -19,6 +19,10 @@
 
         <h2>Games &raquo;</h2>
 
+        <div class="gamegridcontrols">
+          Sort by: <button class="sortbtn sorted sorted-asc" data-sort="date">Date added</button>&nbsp;&nbsp;<button class="sortbtn" data-sort="name">Title</button>&nbsp;&nbsp;<button class="sortbtn" data-sort="year">Release year</button>&nbsp;&nbsp;<button class="sortbtn" data-sort="hours">How long to beat</button>
+        </div>
+
         <div class="gamegrid">
           {{ $targetplatform := .Params.platform | lower }}
           {{ range sort (where .Site.Pages ".Section" "in" (slice  "games" "articles")) ".Params.game_name" "asc" }}

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');