Automatically detect the browser's language and download language files

src/js/components/App.vue

@@ -190,6 +190,7 @@ export default {
             },
             aboutOpen: false,
             splatNetGearOpen: false,
+            language: null,
         };
     },
     computed: {
@@ -269,6 +270,7 @@ export default {
         },
     },
     created() {
+        this.loadLanguage();
         this.loadRegion(true);
         window.addEventListener('storage', this.loadRegion);
 
@@ -287,6 +289,10 @@ export default {
         window.removeEventListener('storage', this.loadRegion);
     },
     methods: {
+        loadLanguage() {
+            this.language = regions.detectSplatoonLanguage();
+            this.$i18n.set(this.language || 'en');
+        },
         loadRegion(autoDetect = false) {
             // Get the previously-selected region from local storage
             let key = localStorage.getItem('selected-region');
@@ -326,6 +332,13 @@ export default {
             }, (date - new Date));
         },
         updateData() {
+            // Language data
+            if (this.language) {
+                axios.get(`/data/lang/${this.language}.json`)
+                    .then(response => this.$i18n.add(this.language, { splatnet: response.data }))
+                    .catch(e => console.error(e));
+            }
+
             // Main map schedules
             axios.get('/data/schedules.json')
                 .then(response => this.splatnet.schedules = response.data)

src/js/regions.js

@@ -23,6 +23,19 @@ function getRegionByKey(key) {
     return splatoonRegions.find(r => r.key == key);
 }
 
+function detectSplatoonLanguage() {
+    let browserLanguages = window.navigator.languages.map(l => l.toLowerCase());
+    let availableLanguages = languages.map(l => l.language.toLowerCase());
+
+    // Try to find a match based on the first part of the available languages (i.e., match "es" for "es-ES")
+    for (let language of browserLanguages) {
+        for (let availableLanguage of availableLanguages) {
+            if (language.startsWith(availableLanguage))
+                return availableLanguage;
+        }
+    }
+}
+
 function detectSplatoonRegion() {
     if (window.navigator && window.navigator.language)
         return detectSplatoonRegionFromLanguage(window.navigator.language);
@@ -80,5 +93,6 @@ module.exports = {
     splatoonRegions,
     languages,
     getRegionByKey,
+    detectSplatoonLanguage,
     detectSplatoonRegion,
 }