Add idol results to the Splatfest history dialog

src/web/assets/css/main.scss

@@ -18,6 +18,10 @@ body.has-modal #main {
     filter: blur(4px);
 }
 
+.dropdown {
+    z-index: 100;
+}
+
 .level.is-mobile .level-item:last-child {
     margin-right: 0;
 }
@@ -543,11 +547,27 @@ body.has-modal #main {
 
     .splatfest-results-container {
         width: 325px;
+    }
 
+    .splatfest-results-container, .idol-results-container {
         .splatfest-results {
             position: relative;
         }
     }
+
+    .idol-results {
+        .has-idol {
+            align-self: flex-end;
+            z-index: 10;
+
+            &:first-child {
+                margin-right: -65px;
+            }
+            &:last-child {
+                margin-left: -65px;
+            }
+        }
+    }
 }
 
 .merchandise-box {

src/web/components/splatoon/IdolResultsBox.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="splatfest-results">
+        <div class="background"></div>
+
+        <div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header is-hidden-mobile">
+            {{ $t('splatfest.results.title') }}
+        </div>
+
+        <div class="columns is-marginless is-gapless is-mobile results-header is-hidden-tablet">
+            <div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header-text">
+                {{ $t('splatfest.results.title') }}
+            </div>
+
+            <div class="column">
+                <div class="image is-48x48">
+                    <img src="~@/web/assets/img/pearl.png" style="margin: auto; width: 29px; height: 48px;" />
+                </div>
+            </div>
+
+            <div class="column is-5">
+                <!-- Intentionally left blank since "Results" doesn't quite fit the horizontal space -->
+            </div>
+
+            <div class="column">
+                <div class="image is-48x48">
+                    <img src="~@/web/assets/img/marina.png" style="margin: auto; width: 24px; height: 48px;" />
+                </div>
+            </div>
+        </div>
+
+        <IdolResultsRow region="na" />
+        <IdolResultsRow region="eu" />
+        <IdolResultsRow region="jp" />
+    </div>
+</template>
+
+<script>
+import IdolResultsRow from './IdolResultsRow.vue';
+
+export default {
+    components: { IdolResultsRow },
+};
+</script>

src/web/components/splatoon/IdolResultsRow.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="columns is-mobile result">
+        <div class="column">
+            <div class="winner-mark-shadow" v-if="winner == 'alpha'"></div>
+            <div class="winner-mark" style="background: #f2327b" v-if="winner == 'alpha'"></div>
+            <div class="font-splatoon2 title is-4">
+                <div>{{ heroWins.alpha }}</div>
+            </div>
+        </div>
+
+        <div class="column is-5 has-text-centered font-splatoon2">
+            <div style="margin: 0 -100px">
+                {{ $t(`regions.${region}.name`) }}
+            </div>
+        </div>
+
+        <div class="column">
+            <div class="winner-mark-shadow" v-if="winner == 'bravo'"></div>
+            <div class="winner-mark" style="background: #10dc85" v-if="winner == 'bravo'"></div>
+            <div class="font-splatoon2 title is-4">
+                <div>{{ heroWins.bravo }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['region'],
+    computed: {
+        heroWins() {
+            return this.$store.getters[`splatoon/splatfests/${this.region}/heroWins`];
+        },
+        winner() {
+            if (this.heroWins.alpha > this.heroWins.bravo)
+                return 'alpha';
+            if (this.heroWins.bravo > this.heroWins.alpha)
+                return 'bravo';
+        },
+    },
+};
+</script>

src/web/components/splatoon/SplatfestHistoryDialog.vue

@@ -23,6 +23,21 @@
             </div>
 
             <div class="modal-card-body" ref="body">
+                <div class="columns idol-results" v-if="!region">
+                    <div class="column has-text-right is-hidden-mobile has-idol">
+                        <img src="~@/web/assets/img/pearl.png" width="173" height="290" />
+                    </div>
+                    <div class="column is-5">
+                        <div class="is-hidden-mobile" style="height: 85px"></div>
+                        <div class="idol-results-container">
+                            <IdolResultsBox />
+                        </div>
+                    </div>
+                    <div class="column has-text-left is-hidden-mobile has-idol">
+                        <img src="~@/web/assets/img/marina.png" width="172" height="339" />
+                    </div>
+                </div>
+
                 <div v-for="(festival, index) in festivals" class="splatfest-history-row" :key="festival.festival_id">
                     <div class="level">
                         <div class="level-item">
@@ -60,11 +75,12 @@ import { mapGetters } from 'vuex';
 import analytics from '@/web/support/analytics';
 import Modal from '@/web/components/Modal.vue';
 import DropdownBase from '@/web/components/DropdownBase.vue';
+import IdolResultsBox from './IdolResultsBox.vue';
 import SplatfestBox from './SplatfestBox.vue';
 import SplatfestResultsBox from './SplatfestResultsBox.vue';
 
 export default {
-    components: { Modal, DropdownBase, SplatfestBox, SplatfestResultsBox },
+    components: { Modal, DropdownBase, IdolResultsBox, SplatfestBox, SplatfestResultsBox },
     filters: {
         resultsIn(time) {
             return Vue.i18n.translate('splatfest.results_in', { time });

src/web/store/splatoon/splatfests.js

@@ -73,6 +73,14 @@ function generateModule(region) {
                     return getters.allSplatfests.find(s => s.times.result > cutoff);
                 }
             },
+            heroWins(state, getters) {
+                if (getters.allSplatfests) {
+                    return {
+                        alpha: getters.allSplatfests.reduce((sum, festival) => sum + (festival.results && festival.results.summary.total === 0), 0),
+                        bravo: getters.allSplatfests.reduce((sum, festival) => sum + (festival.results && festival.results.summary.total === 1), 0),
+                    }
+                }
+            },
         },
     };
 }