Show a list of regions for each Splatfest

src/web/assets/css/main.scss

@@ -257,6 +257,27 @@ body.has-modal #main {
     .panel-container {
         position: relative;
 
+        .regions {
+            @extend .title-color;
+            @extend .is-size-7;
+
+            position: absolute;
+            top: 0.45rem;
+            right: 0.25rem;
+
+            opacity: 0;
+            transition: opacity 0.15s ease;
+
+            .region {
+                background: rgba($grey-dark, 0.9);
+                border: rgba($grey, 0.9);
+                color: $grey-lighter;
+                border-radius: 100px;
+                padding: 0.2rem 0.35rem;
+                margin-left: 0.2rem;
+            }
+        }
+
         .labels {
             @extend .font-splatoon1;
             @extend .title-color;
@@ -389,6 +410,12 @@ body.has-modal #main {
     }
 }
 
+.splatfest.show-regions, .splatfest:hover {
+    .regions {
+        opacity: 1;
+    }
+}
+
 .about-box {
     position: relative;
     margin-top: 50px;

src/web/components/splatoon/SplatfestBox.vue

@@ -11,6 +11,10 @@
                 <img :src="image" />
             </div>
 
+            <div class="regions">
+                <span class="region" v-for="region in festival.regions" :key="region">{{ region | upperCase }}</span>
+            </div>
+
             <div class="columns is-gapless labels is-hidden-mobile">
                 <div class="column" v-text="teamNames.long.alpha"></div>
                 <div class="column has-text-right" v-text="teamNames.long.bravo"></div>

src/web/components/splatoon/SplatfestHistoryDialog.vue

@@ -26,9 +26,9 @@
                 <div v-for="(festival, index) in festivals" class="splatfest-history-row" :key="festival.festival_id">
                     <div class="level">
                         <div class="level-item">
-                            <div class="splatfest" :class="(index % 2 == 0) ? 'tilt-left' : 'tilt-right'">
+                            <div class="splatfest show-regions" :class="(index % 2 == 0) ? 'tilt-left' : 'tilt-right'">
                                 <div class="hook-box">
-                                    <SplatfestBox :festival="festival" history-mode />
+                                    <SplatfestBox :festival="festival" history-mode show-regions />
                                 </div>
                             </div>
                         </div>

src/web/support/filters.js

@@ -86,3 +86,8 @@ Vue.filter('time.in', function(time) {
 Vue.filter('time.remaining', function (time) {
     return $t('time.remaining', { time });
 });
+
+Vue.filter('upperCase', function (value) {
+    if (value && value.toUpperCase)
+        return value.toUpperCase();
+});