From 7ec9c38b846cc5cbc401a1c77e5fc3fbd4a7daa9 Mon Sep 17 00:00:00 2001
From: Lordmau5 <mail@lordmau5.com>
Date: Fri, 25 May 2018 02:29:25 +0200
Subject: [PATCH] Add Game Compatibility page

---
 src/App.vue                       |   1 +
 src/components/Build.Net_Core.vue |   2 +-
 src/components/Compatibility.vue  | 120 ++++++++++++++++++++++++++++++
 src/components/Home.vue           |   2 +-
 src/router/index.js               |   6 ++
 5 files changed, 129 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Compatibility.vue

diff --git a/src/App.vue b/src/App.vue
index 840c676..824a30f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,6 +40,7 @@
 			<v-btn flat href="https://github.com/gdkchan/Ryujinx/wiki">Wiki</v-btn>
 			<v-btn flat exact :to="{ name: 'Build' }">Build</v-btn>
 			<v-btn flat exact :to="{ name: 'Contribute' }">Contribute</v-btn>
+			<v-btn flat exact :to="{ name: 'Compatibility' }">Compatibility</v-btn>
 
 			<v-btn flat color="green" href="https://github.com/gdkchan/Ryujinx"><v-icon left>fab fa-github</v-icon>GitHub</v-btn>
 			<v-btn flat color="blue" href="https://discord.gg/VkQYXAZ"><v-icon left>fab fa-discord</v-icon>Discord</v-btn>
diff --git a/src/components/Build.Net_Core.vue b/src/components/Build.Net_Core.vue
index 3ae2569..e9767a6 100644
--- a/src/components/Build.Net_Core.vue
+++ b/src/components/Build.Net_Core.vue
@@ -13,7 +13,7 @@
 							<div class="text-xs-center">
 								<p class="display-1">Building RyujiNX <small>(Windows only for now)</small>:</p>
 								<p class="headline"><em>
-									Support for OSX and Linux is limited and not really recommended for use as of late.</br>
+									Support for OSX and Linux is limited and not really recommended for use as of late.<br>
 									To get started; you will need the .NET Core 2.0 or greater runtime installed.
 								</em></p>
 								<span class="subheading">
diff --git a/src/components/Compatibility.vue b/src/components/Compatibility.vue
new file mode 100644
index 0000000..bcd831d
--- /dev/null
+++ b/src/components/Compatibility.vue
@@ -0,0 +1,120 @@
+<template>
+	<div>
+		<section>
+			 <v-card>
+				<v-card-title>
+					<v-card-title class="display-1">
+						Game Compatibility List
+					</v-card-title>
+					<v-spacer></v-spacer>
+					<v-text-field
+						v-model="search"
+						append-icon="search"
+						label="Search"
+						single-line
+						hide-details
+					></v-text-field>
+				</v-card-title>
+				<v-data-table
+					:headers="headers"
+					:items="games"
+					:loading="loading"
+					:search="search"
+					item-key="name"
+					must-sort
+					class="elevation-1"
+				>
+					<v-progress-linear slot="progress" color="blue" indeterminate></v-progress-linear>
+					<template slot="items" slot-scope="props">
+						<tr @click="props.expanded = !props.expanded">
+							<td>
+								<img :src="props.item.boxart_url" height="100px">
+							</td>
+							<td>{{ props.item.name }}</td>
+							<td>{{ props.item.title_id.join(', ') }}</td>
+							<td>{{ props.item.state }}</td>
+							<td>
+								<vue-markdown :source="props.item.comment"></vue-markdown>
+							</td>
+							<td>{{ props.item.state_last_date }}</td>
+						</tr>
+					</template>
+					<template slot="expand" slot-scope="props">
+						<v-layout row wrap align-start justify-center>
+							<v-flex xs12 md6>
+								<img
+									v-if="props.item.screen_url"
+									:src="props.item.screen_url"
+									class="px-5 py-5"
+									width="100%"
+								>
+							</v-flex>
+						</v-layout>
+					</template>
+					<template slot="no-data">
+						<div v-if="loading" class="text-xs-center">
+							Loading games, hang tight fam...
+						</div>
+					</template>
+				</v-data-table>
+			</v-card>
+		</section>
+	</div>
+</template>
+
+<script>
+import VueMarkdown from 'vue-markdown';
+
+export default {
+	components: {
+		VueMarkdown
+	},
+
+	data () {
+		return {
+			loading: true,
+			games: [],
+			search: '',
+			headers: [
+				{
+					text: 'Boxart',
+					value: 'boxart_url',
+					sortable: false
+				},
+				{
+					text: 'Name',
+					value: 'name'
+				},
+				{
+					text: 'Title IDs',
+					value: 'title_id'
+				},
+				{
+					text: 'State',
+					value: 'state'
+				},
+				{
+					text: 'Comment',
+					value: 'comment'
+				},
+				{
+					text: 'Last Test Date',
+					value: 'state_last_date'
+				}
+			]
+		};
+	},
+
+	methods: {
+		async fetchGames () {
+			let _fetch = await fetch('https://ryujinx.org/public/CompatibilityList.json');
+			this.games = await _fetch.json();
+			this.loading = false;
+		}
+	},
+
+	mounted () {
+		this.fetchGames();
+	}
+};
+</script>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index e6a6d69..8e1edf4 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -41,7 +41,7 @@
 									Please consider reporting it via our Discord server. 
 									</p>
 
-									<v-btn dark color="blue" target="_blank" href="https://github.com/gdkchan/Ryujinx/wiki/Games-Compatibility-List">
+									<v-btn dark color="blue" :to="{ name: 'Compatibility' }">
 										<v-icon left>fas fa-list</v-icon>
 										Game compatibility list
 									</v-btn>
diff --git a/src/router/index.js b/src/router/index.js
index 8efb51c..f58a57b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,7 @@ import News from '@/components/News';
 import Contribute from '@/components/Contribute';
 import Build from '@/components/Build';
 import BuildNetCore from '@/components/Build.Net_Core';
+import Compatibility from '@/components/Compatibility';
 
 Vue.use(Router);
 
@@ -34,6 +35,11 @@ export default new Router({
 			path: '/Build/NetCore',
 			name: 'BuildNetCore',
 			component: BuildNetCore
+		},
+		{
+			path: '/Compatibility',
+			name: 'Compatibility',
+			component: Compatibility
 		}
 	]
 });