From 031b60a691de45dbc003af946f93f4431d8353ee Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Mon, 4 Dec 2017 19:01:08 -0800
Subject: [PATCH] Add a language selector to the footer

---
 src/css/main.scss              |  5 ++++
 src/js/components/App.vue      | 43 ++++++++++++++++++++++++++++++----
 src/js/components/Dropdown.vue | 18 ++++++++++----
 src/js/regions.js              | 22 ++++++++---------
 4 files changed, 69 insertions(+), 19 deletions(-)

diff --git a/src/css/main.scss b/src/css/main.scss
index 67bbdd3..b91cc84 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -673,3 +673,8 @@ body.has-modal #main {
         }
     }
 }
+
+.hero-foot .dropdown-trigger .icon {
+    margin-left: -5px;
+    line-height: 0.45rem;
+}
diff --git a/src/js/components/App.vue b/src/js/components/App.vue
index e58e401..96a039e 100644
--- a/src/js/components/App.vue
+++ b/src/js/components/App.vue
@@ -28,7 +28,7 @@
                     </div>
                     <div class="level-right">
                         <div class="level-item" v-if="showFestivalRegionDropdown">
-                            <Dropdown :options="regions" v-model="selectedRegionKey" style="margin: 0 -12px"></Dropdown>
+                            <Dropdown :options="regions" v-model="selectedRegionKey" style="margin: 0 -12px" class="font-splatoon2" />
                         </div>
 
 
@@ -138,9 +138,12 @@
             <div class="container is-fluid">
                 This website is not affiliated with Nintendo.
                 All product names, logos, and brands are property of their respective owners.
+                &ndash;
                 <a href="#" @click.prevent="aboutOpen = true">About</a>
                 &ndash;
                 <a href="https://twitter.com/Splatoon2inkbot" target="_blank">Twitter</a>
+                &ndash;
+                <Dropdown :options="languages" v-model="selectedLanguageKey" tag="a" class="is-up" />
             </div>
         </div>
 
@@ -181,6 +184,7 @@ export default {
     data() {
         return {
             actualSelectedRegionKey: null,
+            actualSelectedLanguageKey: null,
             now: null,
             splatnet: {
                 schedules: null,
@@ -194,6 +198,13 @@ export default {
             language: null,
         };
     },
+    watch: {
+        language(value) {
+            if (value)
+                this.loadLocale(value);
+            this.$i18n.set(value || 'en');
+        },
+    },
     computed: {
         loading() { return !this.splatnet.schedules; },
 
@@ -209,6 +220,22 @@ export default {
             set(value) { this.setRegion(value); },
         },
 
+        // Selected langauge
+        languages() {
+            return regions.languages
+                .reduce((languages, languageInfo) => {
+                    // Remove duplicates
+                    if (!languages.find(li => li.language == languageInfo.language))
+                        languages.push(languageInfo)
+                    return languages;
+                }, [])
+                .map(({ language, name }) => ({ key: language, name }));
+        },
+        selectedLanguageKey: {
+            get() { return this.language; },
+            set(value) { this.setLanguage(value); },
+        },
+
         // Normal battles
         regular() { return !this.loading && this.splatnet.schedules.regular.filter(this.filterEndTime) },
         ranked() { return !this.loading && this.splatnet.schedules.gachi.filter(this.filterEndTime) },
@@ -279,6 +306,7 @@ export default {
     created() {
         this.loadLanguage();
         this.loadRegion(true);
+        window.addEventListener('storage', this.loadLanguage);
         window.addEventListener('storage', this.loadRegion);
 
         this.updateNow();
@@ -293,14 +321,21 @@ export default {
     beforeDestroy() {
         clearInterval(this.updateNowTimer);
         clearInterval(this.updateDataTimer);
+        window.removeEventListener('storage', this.loadLanguage);
         window.removeEventListener('storage', this.loadRegion);
     },
     methods: {
         ...mapActions(['loadLocale']),
         loadLanguage() {
-            this.language = regions.detectSplatoonLanguage();
-            this.loadLocale(this.language);
-            this.$i18n.set(this.language || 'en');
+            let language = localStorage.getItem('selected-language');
+            let languageInfo = regions.languages.find(li => li.language === language);
+            if (!languageInfo)
+                language = regions.detectSplatoonLanguage();
+            this.language = language;
+        },
+        setLanguage(key) {
+            this.language = key;
+            localStorage.setItem('selected-language', key);
         },
         loadRegion(autoDetect = false) {
             // Get the previously-selected region from local storage
diff --git a/src/js/components/Dropdown.vue b/src/js/components/Dropdown.vue
index 9538599..bfe3119 100644
--- a/src/js/components/Dropdown.vue
+++ b/src/js/components/Dropdown.vue
@@ -1,15 +1,21 @@
 <template>
-    <div class="dropdown is-right font-splatoon2" :class="{ 'is-active': isOpen }">
+    <div class="dropdown is-right" :class="{ 'is-active': isOpen }">
         <div class="dropdown-trigger">
-            <button class="button is-clear font-splatoon2" @click="isOpen = !isOpen" v-click-outside="hide">
+            <button class="button is-clear font-splatoon2" @click="isOpen = !isOpen" v-click-outside="hide" v-if="tag == 'button'">
                 <span v-if="selectedOption">{{ selectedOption.name }}</span>
                 <span class="icon is-small">
                     <span class="chevron bottom"></span>
                 </span>
             </button>
+            <a @click="isOpen = !isOpen" v-click-outside="hide" v-if="tag == 'a'">
+                <span v-if="selectedOption">{{ selectedOption.name }}</span>
+                <span class="icon is-small">
+                    <span class="chevron top"></span>
+                </span>
+            </a>
         </div>
         <div class="dropdown-menu" role="menu">
-            <div class="dropdown-content">
+            <div class="dropdown-content font-splatoon2 has-text-left">
                 <a href="#" class="dropdown-item" v-for="option in options" :class="{ 'is-active': option.key == value }" @click.prevent="$emit('input', option.key)">
                     {{ option.name }}
                 </a>
@@ -20,7 +26,11 @@
 
 <script>
 export default {
-    props: ['options', 'value'],
+    props: {
+        options: {},
+        value: {},
+        tag: { default: 'button' },
+    },
     data() {
         return {
             isOpen: false,
diff --git a/src/js/regions.js b/src/js/regions.js
index 63706ee..92d28cf 100644
--- a/src/js/regions.js
+++ b/src/js/regions.js
@@ -6,17 +6,17 @@ const splatoonRegions = [
 ];
 
 const languages = [
-    { region: 'NA', language: 'en' },
-    { region: 'NA', language: 'es-MX' },
-    { region: 'NA', language: 'fr-CA' },
-    { region: 'EU', language: 'en' },
-    { region: 'EU', language: 'de' },
-    { region: 'EU', language: 'nl' },
-    { region: 'EU', language: 'fr' },
-    { region: 'EU', language: 'it' },
-    { region: 'EU', language: 'ru' },
-    { region: 'EU', language: 'es' },
-    { region: 'JP', language: 'ja' },
+    { region: 'NA', language: 'en',    name: 'English' },
+    { region: 'EU', language: 'en',    name: 'English (UK)' },
+    { region: 'EU', language: 'es',    name: 'Español' },
+    { region: 'NA', language: 'es-MX', name: 'Español (MX)' },
+    { region: 'EU', language: 'fr',    name: 'Français' },
+    { region: 'NA', language: 'fr-CA', name: 'Français (CA)' },
+    { region: 'EU', language: 'de',    name: 'Deutsch' },
+    { region: 'EU', language: 'nl',    name: 'Nederlands' },
+    { region: 'EU', language: 'it',    name: 'Italiano' },
+    { region: 'EU', language: 'ru',    name: 'Pусский' },
+    { region: 'JP', language: 'ja',    name: '日本語' },
 ];
 
 function getRegionByKey(key) {