From 4a711aa6866f390ee018e355a8694c5dca049915 Mon Sep 17 00:00:00 2001
From: chris062689 <chris062689@gmail.com>
Date: Sun, 4 Jun 2017 19:54:35 -0400
Subject: [PATCH] Added colors next to compatibility

---
 site/data/compatibility.json                        | 12 ++++++------
 site/themes/citra-bs-theme/layouts/game/list.html   |  4 ++--
 site/themes/citra-bs-theme/layouts/game/single.html |  2 +-
 site/themes/citra-bs-theme/static/css/style.css     |  9 +++++++++
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/site/data/compatibility.json b/site/data/compatibility.json
index 6f8a492..3c867e9 100644
--- a/site/data/compatibility.json
+++ b/site/data/compatibility.json
@@ -1,8 +1,8 @@
 {
-  "0": { "name": "Perfect", "description": "Game functions flawless with no audio or graphical glitches, all tested functionality works as intended without any workarounds needed." },
-  "1": { "name": "Great", "description": "Game functions with minor graphical or audio glitches and is playable from start to finish. May require some workarounds." },
-  "2": { "name": "Okay", "description": "Game functions with major graphical or audio glitches, but game is playable from start to finish with workarounds." },
-  "3": { "name": "Bad", "description": "Game functions, but with major graphical or audio glitches. Unable to progress in specific areas due to glitches even with workarounds." },
-  "4": { "name": "Intro/Menu", "description": "Game is completely unplayable due to major graphical or audio glitches. Unable to progress past the Start Screen." },
-  "5": { "name": "Won't Boot", "description": "The game crashes when attempting to startup." }
+  "0": { "name": "Perfect", "color": "green", "description": "Game functions flawless with no audio or graphical glitches, all tested functionality works as intended without any workarounds needed." },
+  "1": { "name": "Great", "color": "green", "description": "Game functions with minor graphical or audio glitches and is playable from start to finish. May require some workarounds." },
+  "2": { "name": "Okay", "color": "yellow", "description": "Game functions with major graphical or audio glitches, but game is playable from start to finish with workarounds." },
+  "3": { "name": "Bad", "color": "yellow", "description": "Game functions, but with major graphical or audio glitches. Unable to progress in specific areas due to glitches even with workarounds." },
+  "4": { "name": "Intro/Menu", "color": "red", "description": "Game is completely unplayable due to major graphical or audio glitches. Unable to progress past the Start Screen." },
+  "5": { "name": "Won't Boot", "color": "red", "description": "The game crashes when attempting to startup." }
 }
diff --git a/site/themes/citra-bs-theme/layouts/game/list.html b/site/themes/citra-bs-theme/layouts/game/list.html
index 6ec0001..67aed47 100644
--- a/site/themes/citra-bs-theme/layouts/game/list.html
+++ b/site/themes/citra-bs-theme/layouts/game/list.html
@@ -6,7 +6,7 @@
 		<tbody>
       {{ range .Site.Data.compatibility }}
         <tr>
-  				<td>{{ .name }}</td>
+  				<td style="width: 128px;"><div class="square-icon" style="background-color: {{ .color }}"></div> {{ .name }}</td>
   				<td>{{ .description }}</td>
   			</tr>
       {{ end }}
@@ -29,7 +29,7 @@
         <tr>
           <td><img class="img-responsive" src="{{ .Site.BaseURL }}images/game/icons/{{ default (print .File.BaseFileName ".png") }}" /></td>
           <td><a href="{{ .Permalink }}">{{ .Params.title }}</a></td>
-          <td>{{ $rating.name }}</td>
+          <td><div class="square-icon" style="background-color: {{ $rating.color }}"></div> {{ $rating.name }}</td>
           <td>{{ dateFormat "January 2, 2006" .Params.tested_date }}</td>
         </tr>
       {{ end }}
diff --git a/site/themes/citra-bs-theme/layouts/game/single.html b/site/themes/citra-bs-theme/layouts/game/single.html
index cbe1070..c14c524 100644
--- a/site/themes/citra-bs-theme/layouts/game/single.html
+++ b/site/themes/citra-bs-theme/layouts/game/single.html
@@ -37,7 +37,7 @@
         <tbody>
           <tr>
             <td style="width: 100px;">Status</td>
-            <td><b>{{ $rating.name }}</b><br />{{ $rating.description }}</td>
+            <td><b><div class="square-icon" style="background-color: {{ $rating.color }}"></div> {{ $rating.name }}</b><br />{{ $rating.description }}</td>
           </tr>
           <tr>
             <td>Game Icon</td>
diff --git a/site/themes/citra-bs-theme/static/css/style.css b/site/themes/citra-bs-theme/static/css/style.css
index 64708a2..b1d73ae 100644
--- a/site/themes/citra-bs-theme/static/css/style.css
+++ b/site/themes/citra-bs-theme/static/css/style.css
@@ -317,3 +317,12 @@ a:hover, a:focus {
 .entry-comments {
   padding-top: 16px;
 }
+
+/* Used for square boxes color coded */
+.square-icon { float: left; margin-top: 2px; margin-right: 4px; width: 16px; height: 16px; background-color: black; }
+.compat-0 { background-color: green; }
+.compat-1 { }
+.compat-2 { }
+.compat-3 { }
+.compat-4 { }
+.compat-5 { }