Implement alphabetical sorting
This commit is contained in:
		| @@ -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 | ||||
|   | ||||
| @@ -3,38 +3,57 @@ | ||||
| 	<p>The Citra Emulator compatibility list contains all the games we tested, sorted by how well they work on the emulator.</p> | ||||
| 	<table class="table table-striped table-bordered"> | ||||
| 		<tbody> | ||||
|       {{ range .Site.Data.compatibility }} | ||||
| 		{{ range .Site.Data.compatibility }} | ||||
|         <tr> | ||||
|   				<td style="width: 120px;"><div class="square-icon" style="background-color: {{ .color }}"></div> {{ .name }}</td> | ||||
|   				<td class="row-compat-desc">{{ .description }}</td> | ||||
|   			</tr> | ||||
|       {{ end }} | ||||
| 			<td style="width: 120px;"><div class="square-icon" style="background-color: {{ .color }}"></div> {{ .name }}</td> | ||||
| 			<td class="row-compat-desc">{{ .description }}</td> | ||||
| 		</tr> | ||||
| 		{{ end }} | ||||
| 		</tbody> | ||||
| 	</table> | ||||
|  | ||||
| 	<div id="highchart-container" style="height: 100px; margin: 0 auto"></div> | ||||
|  | ||||
|   <table class="table table-responsive"> | ||||
|     <thead> | ||||
|       <tr> | ||||
|         <th></th> | ||||
|         <th>Title</th> | ||||
|         <th>Compatibility</th> | ||||
|         <th>Date Tested</th> | ||||
|       </tr> | ||||
|     </thead> | ||||
|     <tbody> | ||||
| 			{{ range .Data.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> | ||||
| 	        <td><a href="{{ .Permalink }}">{{ .Params.title }}</a></td> | ||||
| 					<td class="compatibility-row"><div class="square-icon" style="background-color: {{ $rating.color }}"></div> {{ $rating.name }}</td> | ||||
| 	        <td>{{ dateFormat "January 2, 2006" .Params.testcase_date }}</td> | ||||
| 	      </tr> | ||||
| 	<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 }} | ||||
|     </tbody> | ||||
|   </table> | ||||
| 		</div> | ||||
| 	</div> | ||||
|  | ||||
| 	<table class="table table-responsive"> | ||||
| 		<thead> | ||||
| 			<tr> | ||||
| 				<th></th> | ||||
| 				<th>Title</th> | ||||
| 				<th>Compatibility</th> | ||||
| 				<th>Date Tested</th> | ||||
| 			</tr> | ||||
| 		</thead> | ||||
| 		<tbody> | ||||
| 		{{ 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> | ||||
| 				<td><a href="{{ .Permalink }}">{{ .Params.title }}</a></td> | ||||
| 						<td class="compatibility-row"><div class="square-icon" style="background-color: {{ $rating.color }}"></div> {{ $rating.name }}</td> | ||||
| 				<td>{{ dateFormat "January 2, 2006" .Params.testcase_date }}</td> | ||||
| 			  </tr> | ||||
| 			{{ end }} | ||||
| 		{{ end }} | ||||
| 		</tbody> | ||||
| 	</table> | ||||
| {{ end }} | ||||
|  | ||||
| {{ define "scripts" }} | ||||
|   | ||||
| @@ -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 }} | ||||
| } | ||||
|   | ||||
| @@ -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; | ||||
| } | ||||
|   | ||||
		Reference in New Issue
	
	Block a user