From 8a22193bda859554bf0ce6505c98e13811a301e8 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Sat, 3 Feb 2018 10:44:40 -0800
Subject: [PATCH] Add Splatfest history dialog

Closes #11.
---
 src/css/_boxes.scss                           | 19 ++--
 src/css/_modifiers.scss                       | 15 +++
 src/css/main.scss                             | 42 +++++++--
 src/js/components/App.vue                     | 15 ++-
 src/js/components/splatoon/SplatfestBox.vue   | 28 +++---
 .../splatoon/SplatfestHistoryDialog.vue       | 92 +++++++++++++++++++
 .../splatoon/SplatfestResultsBox.vue          |  9 +-
 .../splatoon/SplatfestWinnerBar.vue           | 28 ++++++
 src/js/components/splatoon/Stage.vue          | 10 +-
 src/locale/de.json                            |  3 +-
 src/locale/en.json                            |  3 +-
 src/locale/es-MX.json                         |  3 +-
 src/locale/es.json                            |  3 +-
 src/locale/fr-CA.json                         |  3 +-
 src/locale/fr.json                            |  3 +-
 src/locale/it.json                            |  3 +-
 src/locale/ja.json                            |  3 +-
 src/locale/nl.json                            |  3 +-
 src/locale/ru.json                            |  3 +-
 19 files changed, 236 insertions(+), 52 deletions(-)
 create mode 100644 src/js/components/splatoon/SplatfestHistoryDialog.vue
 create mode 100644 src/js/components/splatoon/SplatfestWinnerBar.vue

diff --git a/src/css/_boxes.scss b/src/css/_boxes.scss
index 06f9239..086f38f 100644
--- a/src/css/_boxes.scss
+++ b/src/css/_boxes.scss
@@ -5,19 +5,13 @@
     padding-top: 35px;
 }
 
-.modal-card-product-box {
+.modal-rounded-box {
     .modal-card-head {
-        @extend .bg-mask-product;
-        mask-size: 730px 1168px;
-        background-position-y: bottom;
-
         border: none;
 
         border-top-left-radius: 32px;
         border-top-right-radius: 32px;
 
-        padding-top: 45px;
-
         display: block; // Fixes issues with .level
     }
     .modal-card-body {
@@ -44,6 +38,17 @@
     }
 }
 
+.modal-card-product-box {
+    @extend .modal-rounded-box;
+
+    .modal-card-head {
+        @extend .bg-mask-product;
+        mask-size: 730px 1168px;
+        background-position-y: bottom;
+        padding-top: 45px;
+    }
+}
+
 .hook-box {
     border-radius: 32px;
     padding: 10px;
diff --git a/src/css/_modifiers.scss b/src/css/_modifiers.scss
index 641f517..0aefdce 100644
--- a/src/css/_modifiers.scss
+++ b/src/css/_modifiers.scss
@@ -184,3 +184,18 @@
         padding-right: 0.2rem;
     }
 }
+
+@include tablet {
+    .modal {
+        &.is-wide {
+            .modal-content, .modal-card {
+                width: 1000px;
+            }
+        }
+        &.is-xwide {
+            .modal-content, .modal-card {
+                width: 1200px;
+            }
+        }
+    }
+}
diff --git a/src/css/main.scss b/src/css/main.scss
index 14e7a6f..a98099b 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -290,18 +290,18 @@ body.has-modal #main {
             border-radius: 0;
         }
     }
+}
 
-    .festival-period-container {
-        margin-top: -5px;
-    }
+.festival-period-container {
+    margin-top: -5px;
+}
 
-    .festival-period {
-        @extend .bg-mask-banner;
-        @extend .bg-stripes;
-        display: inline-block;
-        background-size: 53px 53px;
-        padding: 4px 20px;
-    }
+.festival-period {
+    @extend .bg-mask-banner;
+    @extend .bg-stripes;
+    display: inline-block;
+    background-size: 53px 53px;
+    padding: 4px 20px;
 }
 
 .splatfest-results {
@@ -466,6 +466,28 @@ body.has-modal #main {
     padding: 15px;
 }
 
+.splatfest-history-dialog {
+    .modal-card-head, .modal-card-body {
+        background: rgba($grey-light, 0.25);
+    }
+
+    .splatfest-history-row:first-child {
+        margin-top: 25px;
+    }
+
+    .splatfest-history-row:not(:last-child) {
+        margin-bottom: 50px;
+    }
+
+    .splatfest-results-container {
+        width: 325px;
+
+        .splatfest-results {
+            position: relative;
+        }
+    }
+}
+
 .merchandise-box {
     @extend .product-box;
     @extend .bg-circles;
diff --git a/src/js/components/App.vue b/src/js/components/App.vue
index c389b89..640327c 100644
--- a/src/js/components/App.vue
+++ b/src/js/components/App.vue
@@ -141,6 +141,10 @@
                 <a href="#" @click.prevent="aboutOpen = true">{{ $t('ui.about') }}</a>
                 &ndash;
                 <a href="https://twitter.com/Splatoon2inkbot" target="_blank">Twitter</a>
+                <template v-if="splatnet.festivals">
+                    &ndash;
+                    <a href="#" @click.prevent="splatfestHistoryOpen = true">{{ $t('splatfest.previous') }}</a>
+                </template>
                 &ndash;
                 <Dropdown :options="languages" v-model="selectedLanguageKey" tag="a" class="is-right is-up" />
             </div>
@@ -153,6 +157,13 @@
             :now="now"
             @close="splatNetGearOpen = false"
             ></SplatNetGearDialog>
+        <SplatfestHistoryDialog
+            v-if="splatfestHistoryOpen"
+            :allFestivals="splatnet.festivals"
+            :now="now"
+            :initialRegion="selectedRegionKey"
+            @close="splatfestHistoryOpen = false"
+            />
     </div>
 </template>
 
@@ -175,11 +186,12 @@ import SplatfestBox from './splatoon/SplatfestBox.vue';
 import NewWeaponBox from './splatoon/NewWeaponBox.vue';
 import AboutDialog from './AboutDialog.vue';
 import SplatNetGearDialog from './splatoon/SplatNetGearDialog.vue';
+import SplatfestHistoryDialog from './splatoon/SplatfestHistoryDialog.vue';
 
 const localStorage = window.localStorage;
 
 export default {
-    components: { Dropdown, ScheduleBox, SalmonRunBox, SplatfestBox, NewWeaponBox, AboutDialog, SplatNetGearDialog },
+    components: { Dropdown, ScheduleBox, SalmonRunBox, SplatfestBox, NewWeaponBox, AboutDialog, SplatNetGearDialog, SplatfestHistoryDialog },
     data() {
         return {
             actualSelectedRegionKey: null,
@@ -194,6 +206,7 @@ export default {
             },
             aboutOpen: false,
             splatNetGearOpen: false,
+            splatfestHistoryOpen: false,
             language: null,
         };
     },
diff --git a/src/js/components/splatoon/SplatfestBox.vue b/src/js/components/splatoon/SplatfestBox.vue
index 13b3b7f..82f8495 100644
--- a/src/js/components/splatoon/SplatfestBox.vue
+++ b/src/js/components/splatoon/SplatfestBox.vue
@@ -32,7 +32,7 @@
             <div v-if="!results" class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }">
                 <template v-if="!screenshotMode">
                     <span class="nowrap">
-                        {{ festival.times.start | date({ weekday: 'short' }) }}
+                        {{ festival.times.start | date(dateOptions) }}
                         {{ festival.times.start | time }}
                     </span>
                     &ndash;
@@ -51,7 +51,11 @@
                 </template>
             </div>
 
-            <div v-else class="festival-period" style="background-color: #333" v-html="teamWins"></div>
+            <SplatfestWinnerBar
+                v-else
+                :festival="festival"
+                :results="results"
+                />
         </div>
 
         <div class="splatfest-content has-text-centered" v-if="!screenshotMode">
@@ -73,11 +77,11 @@
 <script>
 import Vue from 'vue';
 import SplatfestResultsBox from './SplatfestResultsBox.vue';
-import { getSplatfestWinner } from '@/js/splatoon';
+import SplatfestWinnerBar from './SplatfestWinnerBar.vue';
 
 export default {
-    components: { SplatfestResultsBox },
-    props: ['festival', 'results', 'now', 'screenshotMode'],
+    components: { SplatfestResultsBox, SplatfestWinnerBar },
+    props: ['festival', 'results', 'now', 'screenshotMode', 'historyMode'],
     filters: {
         resultsIn(time) {
             return Vue.i18n.translate('splatfest.results_in', { time });
@@ -91,6 +95,11 @@ export default {
                 return 'active';
             return 'past';
         },
+        dateOptions() {
+            if (this.historyMode)
+                return { year: 'numeric' };
+            return { weekday: 'short' };
+        },
         title() {
             if (this.state == 'upcoming')
                 return this.$t('splatfest.upcoming');
@@ -108,15 +117,6 @@ export default {
                 bravo: this.$t(`splatnet.festivals.${this.festival.festival_id}.names.bravo_short`, this.festival.names.bravo_short),
             };
         },
-        teamWins() {
-            if (!this.results)
-                return;
-
-            let winner = this.results.summary.total ? 'bravo' : 'alpha';
-
-            let team = `<span style="color: ${this.festival.colors[winner].css_rgb}">${this.teamNames[winner]}</span>`;
-            return this.$t('splatfest.team_name_wins', { team });
-        },
     },
 }
 </script>
diff --git a/src/js/components/splatoon/SplatfestHistoryDialog.vue b/src/js/components/splatoon/SplatfestHistoryDialog.vue
new file mode 100644
index 0000000..478d8ef
--- /dev/null
+++ b/src/js/components/splatoon/SplatfestHistoryDialog.vue
@@ -0,0 +1,92 @@
+<template>
+    <Modal @close="$emit('close')" class="is-wide splatfest-history-dialog modal-rounded-box">
+        <div class="modal-card">
+            <div class="modal-card-head">
+                <div class="level">
+                    <div class="level-left">
+                        <h3 class="title is-3 font-splatoon1 text-shadow">{{ $t('splatfest.previous') }}</h3>
+                    </div>
+
+                    <div class="level-right">
+                        <Dropdown
+                            :options="regions"
+                            v-model="region"
+                            style="margin: 0 -12px" class="font-splatoon2 is-right-tablet"
+                            />
+                    </div>
+                </div>
+            </div>
+
+            <div class="modal-card-body">
+                <div v-for="(info, index) in festivals" class="splatfest-history-row" :key="info.festival.festival_id">
+                    <div class="level">
+                        <div class="level-item">
+                            <div class="splatfest" :class="(index % 2 == 0) ? 'tilt-left' : 'tilt-right'">
+                                <div class="hook-box">
+                                    <SplatfestBox
+                                        :festival="info.festival"
+                                        :now="now"
+                                        :historyMode="true"
+                                        />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="level-item">
+                            <div class="splatfest-results-container">
+                                <SplatfestResultsBox
+                                    v-if="info.results"
+                                    :festival="info.festival"
+                                    :results="info.results"
+                                    :historyMode="true"
+                                    />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Modal>
+</template>
+
+<script>
+import analytics from '@/js/analytics';
+import regions from '@/js/regions';
+import Modal from '@/js/components/Modal.vue';
+import Dropdown from '@/js/components/Dropdown.vue';
+import SplatfestBox from './SplatfestBox.vue';
+import SplatfestResultsBox from './SplatfestResultsBox.vue';
+
+export default {
+    components: { Modal, Dropdown, SplatfestBox, SplatfestResultsBox },
+    props: ['allFestivals', 'now', 'initialRegion'],
+    data() {
+        return {
+            region: 'na',
+        };
+    },
+    computed: {
+        regions() {
+            return regions.splatoonRegions.filter(({ key }) => key).map(({ key }) => {
+                let name = (key) ? this.$t(`regions.${key}.name`) : this.$t('regions.global.name');
+                return { key, name };
+            });
+        },
+        festivals() {
+            let data = this.allFestivals[this.region];
+
+            return data.festivals.map(festival => {
+                let results = data.results.find(r => r.festival_id == festival.festival_id);
+                return { festival, results };
+            });
+        },
+    },
+    created() {
+        if (this.initialRegion)
+            this.region = this.initialRegion;
+    },
+    mounted() {
+        analytics.event('Splatfest History', 'Open');
+    },
+}
+</script>
diff --git a/src/js/components/splatoon/SplatfestResultsBox.vue b/src/js/components/splatoon/SplatfestResultsBox.vue
index 15c6f57..4b76bb1 100644
--- a/src/js/components/splatoon/SplatfestResultsBox.vue
+++ b/src/js/components/splatoon/SplatfestResultsBox.vue
@@ -27,14 +27,19 @@
         <SplatfestResultsRow :festival="festival" :results="results" type="vote" />
         <SplatfestResultsRow :festival="festival" :results="results" type="solo" />
         <SplatfestResultsRow :festival="festival" :results="results" type="team" />
+
+        <div class="has-text-centered is-size-5 title-color font-splatoon2" style="margin-top: 10px;" v-if="historyMode">
+            <SplatfestWinnerBar :festival="festival" :results="results" />
+        </div>
     </div>
 </template>
 
 <script>
 import SplatfestResultsRow from './SplatfestResultsRow.vue';
+import SplatfestWinnerBar from './SplatfestWinnerBar.vue';
 
 export default {
-    components: { SplatfestResultsRow },
-    props: ['festival', 'results'],
+    components: { SplatfestResultsRow, SplatfestWinnerBar },
+    props: ['festival', 'results', 'historyMode'],
 }
 </script>
diff --git a/src/js/components/splatoon/SplatfestWinnerBar.vue b/src/js/components/splatoon/SplatfestWinnerBar.vue
new file mode 100644
index 0000000..7ac403c
--- /dev/null
+++ b/src/js/components/splatoon/SplatfestWinnerBar.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="festival-period" style="background-color: #333" v-html="teamWins"></div>
+</template>
+
+<script>
+export default {
+    props: ['festival', 'results'],
+    computed: {
+        teamNames() {
+            return {
+                alpha: this.$t(`splatnet.festivals.${this.festival.festival_id}.names.alpha_short`, this.festival.names.alpha_short),
+                bravo: this.$t(`splatnet.festivals.${this.festival.festival_id}.names.bravo_short`, this.festival.names.bravo_short),
+            };
+        },
+        teamWins() {
+            if (!this.festival || !this.results)
+                return;
+
+                console.log(this.festival,this.results)
+
+            let winner = this.results.summary.total ? 'bravo' : 'alpha';
+
+            let team = `<span style="color: ${this.festival.colors[winner].css_rgb}">${this.teamNames[winner]}</span>`;
+            return this.$t('splatfest.team_name_wins', { team });
+        },
+    },
+}
+</script>
diff --git a/src/js/components/splatoon/Stage.vue b/src/js/components/splatoon/Stage.vue
index 7e93b5d..9e6cf75 100644
--- a/src/js/components/splatoon/Stage.vue
+++ b/src/js/components/splatoon/Stage.vue
@@ -3,8 +3,8 @@
         <figure class="image is-16by9"></figure>
         <span class="stage-title" v-if="showTitle">{{ name }}</span>
 
-        <Modal v-if="isOpen" @close="isOpen = false">
-            <div class="modal-content tilt-right-slight is-wide">
+        <Modal v-if="isOpen" @close="isOpen = false" class="is-xwide">
+            <div class="modal-content tilt-right-slight">
                 <p class="image is-16by9" @click="isOpen = false">
                     <img :src="largeImage" />
                 </p>
@@ -18,12 +18,6 @@
     </div>
 </template>
 
-<style>
-.modal-content.is-wide {
-    width: 1200px;
-}
-</style>
-
 <script>
 import Vue from 'vue';
 import Modal from '@/js/components/Modal.vue';
diff --git a/src/locale/de.json b/src/locale/de.json
index 9d548c6..d209be2 100644
--- a/src/locale/de.json
+++ b/src/locale/de.json
@@ -33,7 +33,8 @@
             "team": "Team",
             "%": " %"
         },
-        "team_name_wins": "Team {team} hat gewonnen!"
+        "team_name_wins": "Team {team} hat gewonnen!",
+        "previous": "Bisherige Splatfeste"
     },
     "splatnet_gear": {
         "button": "TentaWorld",
diff --git a/src/locale/en.json b/src/locale/en.json
index 79d1c73..e09afec 100644
--- a/src/locale/en.json
+++ b/src/locale/en.json
@@ -33,7 +33,8 @@
             "team": "Team",
             "%": "%"
         },
-        "team_name_wins": "Team {team} wins!"
+        "team_name_wins": "Team {team} wins!",
+        "previous": "Previous Splatfests"
     },
     "splatnet_gear": {
         "button": "SplatNet Gear",
diff --git a/src/locale/es-MX.json b/src/locale/es-MX.json
index 10ff6c4..2a30838 100644
--- a/src/locale/es-MX.json
+++ b/src/locale/es-MX.json
@@ -33,7 +33,8 @@
             "team": "En equipo",
             "%": " %"
         },
-        "team_name_wins": "¡Gana el Equipo {team}!"
+        "team_name_wins": "¡Gana el Equipo {team}!",
+        "previous": "Festivales"
     },
     "splatnet_gear": {
         "button": "Tienda SplatNet",
diff --git a/src/locale/es.json b/src/locale/es.json
index 1f4b810..f95bc4b 100644
--- a/src/locale/es.json
+++ b/src/locale/es.json
@@ -33,7 +33,8 @@
             "team": "En equipo",
             "%": " %"
         },
-        "team_name_wins": "¡Gana el equipo {team}!"
+        "team_name_wins": "¡Gana el equipo {team}!",
+        "previous": "Festivales anteriores"
     },
     "splatnet_gear": {
         "button": "Tentatienda",
diff --git a/src/locale/fr-CA.json b/src/locale/fr-CA.json
index 55d3a13..65646aa 100644
--- a/src/locale/fr-CA.json
+++ b/src/locale/fr-CA.json
@@ -33,7 +33,8 @@
             "team": "Équipes",
             "%": " %"
         },
-        "team_name_wins": "Victoire de l'équipe {team}!"
+        "team_name_wins": "Victoire de l'équipe {team}!",
+        "previous": "Festivals terminés"
     },
     "splatnet_gear": {
         "button": "Boutique SplatNet",
diff --git a/src/locale/fr.json b/src/locale/fr.json
index b9698cd..d11d3a8 100644
--- a/src/locale/fr.json
+++ b/src/locale/fr.json
@@ -33,7 +33,8 @@
             "team": "Équipes",
             "%": " %"
         },
-        "team_name_wins": "Victoire de l'équipe {team} !"
+        "team_name_wins": "Victoire de l'équipe {team} !",
+        "previous": "Festivals terminés"
     },
     "splatnet_gear": {
         "button": "Céphalochic",
diff --git a/src/locale/it.json b/src/locale/it.json
index ed7e7e0..44eb4a9 100644
--- a/src/locale/it.json
+++ b/src/locale/it.json
@@ -33,7 +33,8 @@
             "team": "In squadra",
             "%": "%"
         },
-        "team_name_wins": "Vince la squadra {team}!"
+        "team_name_wins": "Vince la squadra {team}!",
+        "previous": "Festival terminati"
     },
     "splatnet_gear": {
         "button": "Calama-zone",
diff --git a/src/locale/ja.json b/src/locale/ja.json
index e2adf26..9147224 100644
--- a/src/locale/ja.json
+++ b/src/locale/ja.json
@@ -33,7 +33,8 @@
             "team": "チーム",
             "%": "%"
         },
-        "team_name_wins": "{team}チームの勝利！"
+        "team_name_wins": "{team}チームの勝利！",
+        "previous": "これまでのフェス"
     },
     "splatnet_gear": {
         "button": "ゲソタウン",
diff --git a/src/locale/nl.json b/src/locale/nl.json
index e6d0272..4eaba31 100644
--- a/src/locale/nl.json
+++ b/src/locale/nl.json
@@ -33,7 +33,8 @@
             "team": "Team",
             "%": "%"
         },
-        "team_name_wins": "Overwinning voor team {team}!"
+        "team_name_wins": "Overwinning voor team {team}!",
+        "previous": "Vorige Splatfests"
     },
     "splatnet_gear": {
         "button": "Tentashop",
diff --git a/src/locale/ru.json b/src/locale/ru.json
index 259be0a..6942086 100644
--- a/src/locale/ru.json
+++ b/src/locale/ru.json
@@ -33,7 +33,8 @@
             "team": "«Команда»",
             "%": "%"
         },
-        "team_name_wins": "Победа — {team}!"
+        "team_name_wins": "Победа — {team}!",
+        "previous": "История"
     },
     "splatnet_gear": {
         "button": "«Щупозон»",