From 90aef2ee47e206811829ab16dfd0e62619d15501 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Thu, 30 Aug 2018 16:37:53 -0700
Subject: [PATCH] Add flag icons to the Splatfest region indicators

---
 src/web/assets/css/main.scss                 | 10 +++++++---
 src/web/assets/img/region-eu.svg             |  1 +
 src/web/assets/img/region-jp.svg             |  1 +
 src/web/assets/img/region-na.svg             |  1 +
 src/web/components/AboutDialog.vue           |  4 ++++
 src/web/components/splatoon/SplatfestBox.vue |  8 +++++++-
 6 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 src/web/assets/img/region-eu.svg
 create mode 100644 src/web/assets/img/region-jp.svg
 create mode 100644 src/web/assets/img/region-na.svg

diff --git a/src/web/assets/css/main.scss b/src/web/assets/css/main.scss
index 648eb28..1075b29 100644
--- a/src/web/assets/css/main.scss
+++ b/src/web/assets/css/main.scss
@@ -269,12 +269,16 @@ body.has-modal #main {
             transition: opacity 0.15s ease;
 
             .region {
-                background: rgba($grey-dark, 0.9);
-                border: rgba($grey, 0.9);
+                background: rgba($grey, 0.6);
                 color: $grey-lighter;
                 border-radius: 100px;
-                padding: 0.2rem 0.35rem;
+                padding: 0.15rem 0.45rem 0.2rem;
                 margin-left: 0.2rem;
+
+                .icon {
+                    vertical-align: bottom;
+                    margin-right: 0.25rem;
+                }
             }
         }
 
diff --git a/src/web/assets/img/region-eu.svg b/src/web/assets/img/region-eu.svg
new file mode 100644
index 0000000..045024a
--- /dev/null
+++ b/src/web/assets/img/region-eu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#039" d="M32 5H4C1.791 5 0 6.791 0 9v18c0 2.209 1.791 4 4 4h28c2.209 0 4-1.791 4-4V9c0-2.209-1.791-4-4-4z"/><path d="M18.539 9.705l.849-.617h-1.049l-.325-.998-.324.998h-1.049l.849.617-.325.998.849-.617.849.617zm0 17.333l.849-.617h-1.049l-.325-.998-.324.998h-1.049l.849.617-.325.998.849-.617.849.617zm-8.666-8.667l.849-.617h-1.05l-.324-.998-.325.998H7.974l.849.617-.324.998.849-.617.849.617zm1.107-4.285l.849-.617h-1.05l-.324-.998-.324.998h-1.05l.849.617-.324.998.849-.617.849.617zm0 8.619l.849-.617h-1.05l-.324-.998-.324.998h-1.05l.849.617-.324.998.849-.617.849.617zm3.226-11.839l.849-.617h-1.05l-.324-.998-.324.998h-1.05l.849.617-.324.998.849-.617.849.617zm0 15.067l.849-.617h-1.05l-.324-.998-.324.998h-1.05l.849.617-.324.998.849-.616.849.616zm11.921-7.562l-.849-.617h1.05l.324-.998.325.998h1.049l-.849.617.324.998-.849-.617-.849.617zm-1.107-4.285l-.849-.617h1.05l.324-.998.324.998h1.05l-.849.617.324.998-.849-.617-.849.617zm0 8.619l-.849-.617h1.05l.324-.998.324.998h1.05l-.849.617.324.998-.849-.617-.849.617zm-3.226-11.839l-.849-.617h1.05l.324-.998.324.998h1.05l-.849.617.324.998-.849-.617-.849.617zm0 15.067l-.849-.617h1.05l.324-.998.324.998h1.05l-.849.617.324.998-.849-.616-.849.616z" fill="#FC0"/></svg>
\ No newline at end of file
diff --git a/src/web/assets/img/region-jp.svg b/src/web/assets/img/region-jp.svg
new file mode 100644
index 0000000..3a724e9
--- /dev/null
+++ b/src/web/assets/img/region-jp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#EEE" d="M36 27c0 2.209-1.791 4-4 4H4c-2.209 0-4-1.791-4-4V9c0-2.209 1.791-4 4-4h28c2.209 0 4 1.791 4 4v18z"/><circle fill="#ED1B2F" cx="18" cy="18" r="7"/></svg>
\ No newline at end of file
diff --git a/src/web/assets/img/region-na.svg b/src/web/assets/img/region-na.svg
new file mode 100644
index 0000000..d51f600
--- /dev/null
+++ b/src/web/assets/img/region-na.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#B22334" d="M35.445 7C34.752 5.809 33.477 5 32 5H18v2h17.445zM0 25h36v2H0zm18-8h18v2H18zm0-4h18v2H18zM0 21h36v2H0zm4 10h28c1.477 0 2.752-.809 3.445-2H.555c.693 1.191 1.968 2 3.445 2zM18 9h18v2H18z"/><path fill="#EEE" d="M.068 27.679c.017.093.036.186.059.277.026.101.058.198.092.296.089.259.197.509.333.743L.555 29h34.89l.002-.004c.135-.233.243-.483.332-.741.034-.099.067-.198.093-.301.023-.09.042-.182.059-.275.041-.22.069-.446.069-.679H0c0 .233.028.458.068.679zM0 23h36v2H0zm0-4v2h36v-2H18zm18-4h18v2H18zm0-4h18v2H18zM0 9c0-.233.03-.457.068-.679C.028 8.542 0 8.767 0 9zm.555-2l-.003.005L.555 7zM.128 8.044c.025-.102.06-.199.092-.297-.034.098-.066.196-.092.297zM18 9h18c0-.233-.028-.459-.069-.68-.017-.092-.035-.184-.059-.274-.027-.103-.059-.203-.094-.302-.089-.258-.197-.507-.332-.74.001-.001 0-.003-.001-.004H18v2z"/><path fill="#3C3B6E" d="M18 5H4C1.791 5 0 6.791 0 9v10h18V5z"/><path fill="#FFF" d="M2.001 7.726l.618.449-.236.725L3 8.452l.618.448-.236-.725L4 7.726h-.764L3 7l-.235.726zm2 2l.618.449-.236.725.617-.448.618.448-.236-.725L6 9.726h-.764L5 9l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L9 9l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L13 9l-.235.726zm-8 4l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L5 13l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L9 13l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L13 13l-.235.726zm-6-6l.618.449-.236.725L7 8.452l.618.448-.236-.725L8 7.726h-.764L7 7l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L11 7l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L15 7l-.235.726zm-12 4l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L3 11l-.235.726zM6.383 12.9L7 12.452l.618.448-.236-.725.618-.449h-.764L7 11l-.235.726h-.764l.618.449zm3.618-1.174l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L11 11l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L15 11l-.235.726zm-12 4l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L3 15l-.235.726zM6.383 16.9L7 16.452l.618.448-.236-.725.618-.449h-.764L7 15l-.235.726h-.764l.618.449zm3.618-1.174l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L11 15l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L15 15l-.235.726z"/></svg>
\ No newline at end of file
diff --git a/src/web/components/AboutDialog.vue b/src/web/components/AboutDialog.vue
index a1368da..7f51b42 100644
--- a/src/web/components/AboutDialog.vue
+++ b/src/web/components/AboutDialog.vue
@@ -24,6 +24,10 @@
                                 Original SplatNet gear ability/price data comes from
                                 <a href="https://splatoonwiki.org/wiki/Gear#In_Splatoon_2" target="_blank">Inkipedia</a>.
                             </p>
+                            <p>
+                                Regional flag icons are from
+                                <a href="https://twemoji.twitter.com/" target="_blank">Twemoji</a>.
+                            </p>
                             <p>
                                 Source code for this site is available on
                                 <a href="https://github.com/misenhower/splatoon2.ink" target="_blank">GitHub</a>.
diff --git a/src/web/components/splatoon/SplatfestBox.vue b/src/web/components/splatoon/SplatfestBox.vue
index 33e257f..8b94cb4 100644
--- a/src/web/components/splatoon/SplatfestBox.vue
+++ b/src/web/components/splatoon/SplatfestBox.vue
@@ -12,7 +12,13 @@
             </div>
 
             <div class="regions">
-                <span class="region" v-for="region in festival.regions" :key="region">{{ region | upperCase }}</span>
+                <span class="region" v-for="region in festival.regions" :key="region">
+                    <span class="icon is-small">
+                        <img :src="require(`@/web/assets/img/region-${region}.svg`)" />
+                    </span>
+                    <span>{{ region | upperCase }}</span>
+
+                </span>
             </div>
 
             <div class="columns is-gapless labels is-hidden-mobile">