Add continents to the game

src/routes/_layout.svelte

@@ -1,5 +1,5 @@
 <script context="module">
-	import { api, site, countries, locations, currentLocation } from '../store'
+	import { api, site, continents, countries, locations, currentLocation } from '../store'
 
 	export async function preload (page, segment) {
 		const res = await this.fetch(api.graphql, {
@@ -14,19 +14,38 @@
 						instagram
 					}
 				}
+				continents {
+					data {
+						id
+						name
+					}
+				}
 				countries {
 					data {
+						id
 						name
 						slug
-						flag { metadata }
+						continent { id name }
+						flag {
+							full_url
+							title
+						}
 					}
 				}
 				locations (filter: { status_eq: "published" }) {
 					data {
+						id
 						name
 						slug
 						region
-						country { name slug }
+						country {
+							name slug
+							flag {
+								full_url
+								title
+							}
+							continent { id name }
+						}
 						description
 					}
 				}
@@ -35,6 +54,7 @@
 		const data = await res.json()
 
 		// Set data into store
+		continents.set(data.data.continents.data)
 		countries.set(data.data.countries.data)
 		locations.set(data.data.locations.data)
 		site.set(data.data.site.data[0])
@@ -48,6 +68,15 @@
 
 	// Components
 	import Footer from '../parts/Footer.svelte'
+
+	// Manipulate continents data
+	$countries.forEach(country => {
+		const continent = $continents.find(c => c.id === country.continent.id)
+		continent.countries = []
+		if (!continent.countries.includes(country)) {
+			continent.countries.push(country)
+		}
+	})
 </script>
 
 <svelte:head>

src/store.js

@@ -14,5 +14,6 @@ export let loaded = writable(false)
 
 // Data
 export let site = writable()
+export let continents = writable()
 export let countries = writable()
 export let locations = writable()