Various changes

package.json

@@ -11,6 +11,7 @@
 		"build": "node build/build.js"
 	},
 	"dependencies": {
+		"moment": "^2.22.2",
 		"vue": "^2.5.2",
 		"vue-router": "^3.0.1",
 		"vuetify": "^1.0.0"

src/App.vue

@@ -30,6 +30,7 @@
 				<v-icon>fas fa-gamepad</v-icon>
 			</v-btn>
 
+			<v-btn flat color="red" href="https://patreon.com/Ryujinx"><v-icon>fab fa-patreon</v-icon></v-btn>
 			<v-btn flat color="green" href="https://github.com/Ryujinx/Ryujinx"><v-icon>fab fa-github</v-icon></v-btn>
 			<v-btn flat color="red" href="https://yt.ryujinx.org/"><v-icon>fab fa-youtube</v-icon></v-btn>
 			<v-btn flat color="blue" href="https://discord.gg/VkQYXAZ"><v-icon>fab fa-discord</v-icon></v-btn>
@@ -42,6 +43,7 @@
 			<v-btn flat exact :to="{ name: 'Contribute' }">Contribute</v-btn>
 			<v-btn flat exact :to="{ name: 'Compatibility' }">Compatibility</v-btn>
 
+			<v-btn flat color="red" href="https://patreon.com/Ryujinx"><v-icon>fab fa-patreon</v-icon></v-btn>
 			<v-btn flat color="green" href="https://github.com/Ryujinx/Ryujinx"><v-icon>fab fa-github</v-icon></v-btn>
 			<v-btn flat color="red" href="https://yt.ryujinx.org/"><v-icon>fab fa-youtube</v-icon></v-btn>
 			<v-btn flat color="blue" href="https://discord.gg/VkQYXAZ"><v-icon>fab fa-discord</v-icon></v-btn>
@@ -105,6 +107,14 @@
 
         <v-divider></v-divider>
 
+		<!-- Patreon -->
+        <v-list-tile color="red" href="https://patreon.com/Ryujinx">
+          <v-list-tile-action>
+            <v-icon color="red">fab fa-patreon</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-title>Patreon</v-list-tile-title>
+        </v-list-tile>
+
         <!-- GitHub -->
         <v-list-tile color="green" href="https://github.com/Ryujinx/Ryujinx">
           <v-list-tile-action>

src/components/Compatibility.vue

@@ -39,7 +39,7 @@
 								<vue-markdown :source="props.item.comment"></vue-markdown>
 								<div v-if="props.item.screen_url"><em>Click for more information</em></div>
 							</td>
-							<td>{{ props.item.state_last_date }}</td>
+							<td>{{ props.item.state_last_date_fmt }} ({{ props.item.state_last_date }})</td>
 						</tr>
 					</template>
 					<template slot="expand" slot-scope="props">
@@ -67,6 +67,7 @@
 
 <script>
 import VueMarkdown from 'vue-markdown';
+import moment from 'moment';
 
 export default {
 	components: {
@@ -110,7 +111,7 @@ export default {
 				},
 				{
 					text: 'Last Test Date',
-					value: 'state_last_date'
+					value: 'state_last_date_ts'
 				}
 			]
 		};
@@ -118,8 +119,31 @@ export default {
 
 	methods: {
 		async fetchGames () {
+			this.games.length = 0;
+
 			let _fetch = await fetch('https://ryujinx.org/public/CompatibilityList.json');
-			this.games = await _fetch.json();
+
+			const json = await _fetch.json();
+			for (const game of json) {
+				// this.games.push(game);
+				this.games.push({
+					boxart_url: game.boxart_url,
+					comment: game.comment,
+					name: game.name,
+					nickname: game.nickname,
+					screen_url: game.screen_url,
+					state: game.state,
+					state_emu_version: game.state_emu_version,
+					state_last_date: game.state_last_date,
+					state_last_date_fmt: moment(game.state_last_date, 'DD/MM/YYYY').fromNow(),
+					state_last_date_ts: moment(game.state_last_date, 'DD/MM/YYYY').valueOf(),
+					title_id: game.title_id
+				});
+				console.log(game.state_last_date);
+			}
+
+			console.log(this.games);
+
 			this.loading = false;
 		}
 	},

src/components/Contribute.vue

@@ -13,19 +13,47 @@
 							<div class="text-xs-center">
 								<p class="display-1">How may I contribute?</p>
 								<span class="subheading">
-									<p class="mt-4">You may contribute if you have experience in C#, Switch Homebrew, image design, Discord management, etc.
+									<v-layout row wrap align-start justify-center>
-									It doesn't matter what you're good at. If you have any skills that you think would be useful in the development,
+										<v-flex xs12 md6>
-									please do contact us through our Discord.</p>
+											<p class="headline mt-4">Helping With Development</p>
-									<v-btn
+											<p class="mt-2">
-										href="https://discord.gg/VkQYXAZ"
+												You may contribute if you have experience in C#, Switch Homebrew, image design, Discord management, etc.
-										target="_blank"
+												It doesn't matter what you're good at. If you have any skills that you think would be useful in the development,
-										dark
+												please do contact us through our Discord.
-										color="blue"
+											</p>
-										class="my-0"
+
-									>
+											<v-btn
-										<v-icon left>fab fa-discord</v-icon>
+												href="https://discord.gg/VkQYXAZ"
-										Join our Discord!
+												target="_blank"
-									</v-btn>
+												dark
+												color="blue"
+												class="my-0"
+											>
+												<v-icon left>fab fa-discord</v-icon>
+												Join our Discord!
+											</v-btn>
+										</v-flex>
+										<v-flex xs12 md6>
+											<p class="headline mt-4">Helping With Donations</p>
+											<p class="mt-2">
+												If you can't help out with development experience, there's other ways to support.
+												Whilst monetary donations are by no means required, we do appreciate them.
+												They'll go towards necessary equipment and the likes.
+												In return, there's some rewards that you as a supporter will get (for example access to a patreon-only text channel on our Discord).
+											</p>
+
+											<v-btn
+												href="https://patreon.com/Ryujinx"
+												target="_blank"
+												dark
+												color="red"
+												class="my-0"
+											>
+												<v-icon left>fab fa-patreon</v-icon>
+												Become a patron!
+											</v-btn>
+										</v-flex>
+									</v-layout>
 
 									<div fluid>
 										<iframe class="mt-4" align="center" src="https://discordapp.com/widget?id=410208534861447168&theme=dark" width="100%" height="400" allowtransparency="true" frameborder="0"></iframe>