Implement alphabetical sorting

scripts/games/app.js

@@ -123,6 +123,13 @@ function processGame(game) {
       model.compatibility = recent.compatibility;
       model.testcase_date = recent.date;
     }
+
+    let section_id = `${model.title[0]}`.toLowerCase();
+    if (!section_id.match(/[a-z]+/)) {
+        section_id = "#";
+    }
+
+    model.section_id = section_id;
     // END SHORTCUTS BLOCK
 
     // SAVEFILE BLOCK

site/themes/citra-bs-theme/layouts/game/list.html

@@ -14,6 +14,17 @@
 
 	<div id="highchart-container" style="height: 100px; margin: 0 auto"></div>
 
+	<hr />
+
+	<div id="game-sections">
+		<div class="btn-group" role="group">
+			<a class="btn btn-secondary" href="##">#</a>
+			{{ range (seq 'a' 'z') }}
+			<a class="btn btn-secondary" href="#{{ printf "%c" . }}">{{ printf "%c" . }}</a>
+			{{ end }}
+		</div>
+	</div>
+
 	<table class="table table-responsive">
 		<thead>
 			<tr>
@@ -24,7 +35,14 @@
 			</tr>
 		</thead>
 		<tbody>
-			{{ range .Data.Pages }}
+		{{ range .Data.Pages.GroupByParam "section_id" }}
+			<tr>
+				<td id="game-section-header">
+					<h3 id="{{ .Key }}">{{ .Key }}</h3>
+				</td>
+			</tr>
+
+			{{ range .Pages }}
 			  {{- $rating := index .Site.Data.compatibility .Params.compatibility }}
 			  <tr>
 				<td style="width: 55px;"><img class="img-responsive game-icon-list" src="{{ .Site.BaseURL }}images/game/icons/{{ default (print .File.BaseFileName ".png") }}" /></td>
@@ -33,6 +51,7 @@
 				<td>{{ dateFormat "January 2, 2006" .Params.testcase_date }}</td>
 			  </tr>
 			{{ end }}
+		{{ end }}
 		</tbody>
 	</table>
 {{ end }}

site/themes/citra-bs-theme/layouts/game/list.json

@@ -5,7 +5,8 @@
     {{- $gameIndex := $index }}
     {{- $lenRegions := sub (len .Params.releases) 1 }}
     {{- range $regionIndex, $element := .Params.releases }}
-        "{{ $element.title }}": { "region": "{{ .region }}", "gameID": "{{ $game.File.BaseFileName }}", "gameName": "{{ $game.Title | plainify }}" }{{- if and (eq $gameIndex $lenGames) (eq $regionIndex $lenRegions) }}{{ else }},{{ end }}
+        "{{ $element.title }}": { "region": "{{ .region }}", "gameID": "{{ $game.File.BaseFileName }}",
+          "gameName": "{{ $game.Title | plainify }}" }{{- if and (eq $gameIndex $lenGames) (eq $regionIndex $lenRegions) }}{{ else }},{{ end }}
     {{- end }}
   {{- end }}
 }

site/themes/citra-bs-theme/static/css/style.css

@@ -323,3 +323,16 @@ a:hover, a:focus {
 
 /* Games Module */
 .game-icon-list { }
+
+#game-sections {
+  display: table;
+  margin: 0 auto;
+}
+
+#game-sections .btn {
+  padding: 6px 10px;
+}
+
+#game-section-header {
+  border: 0;
+}