Convert images to jpg

4 files changed, 49 insertions, 3 deletions

diff --git a/src/HeroImage.vue b/src/HeroImage.vue
index f72d0fc..e3d3163 100644
--- a/src/HeroImage.vue
+++ b/src/HeroImage.vue
@@ -1,6 +1,6 @@
 <template>
   <figure class="image">
-    <img :src="`/dist/assets/hero-icons/${hero.toLowerCase()}.png`"
+    <img :src="`/dist/assets/hero-icons/${hero.toLowerCase()}.jpg`"
          :style="round? 'border-radius: 50%' : ''"
          :alt="hero"
          :title="hero">
diff --git a/src/InstallNotification.vue b/src/InstallNotification.vue
new file mode 100644
index 0000000..b1a0349
--- /dev/null
+++ b/src/InstallNotification.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="notification is-primary" v-show="deferredPrompt != undefined">
+    <button class="delete" @click="deferredPrompt = undefined"></button>
+    <div class="has-text-centered">Add to your homescreen for fast and offline access?</div>
+    <div class="has-text-centered install-button">
+      <button class="button is-medium" @click="deferredPrompt.prompt()">
+        <span class="mdi mdi-download"></span>
+        <span>&nbsp;Install</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.install-button {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+</style>
+
+<script>
+import Vue from 'vue';
+
+export default Vue.component('install-notification', {
+  data: function() {
+    return {
+      deferredPrompt: undefined,
+    };
+  },
+  methods: {
+    promptInstall: function(p) {
+      this.deferredPrompt = p;
+    },
+  },
+  created: function() {
+    window.addEventListener('beforeinstallprompt', this.promptInstall);
+  },
+  destroyed: function() {
+    window.removeEventListener('beforeinstallprompt', this.promptInstall);
+  },
+});
+</script>
diff --git a/src/ModeTab.vue b/src/ModeTab.vue
index b93f1c7..a003712 100644
--- a/src/ModeTab.vue
+++ b/src/ModeTab.vue
@@ -2,6 +2,8 @@
   <div>
     <intro-box></intro-box>
 
+    <install-notification></install-notification>
+
     <div class="columns is-multiline">
       <div class="column" v-if="hasTalents">
         <h2 class="title is-2">Highlights</h2>
@@ -57,8 +59,9 @@ import TopTalentsBox from './TopTalentsBox.vue';
 import HeroDraftGrid from './HeroDraftGrid.vue';
 import HeroTalentTable from './HeroTalentTable.vue';
 import ReportTable from './ReportTable.vue';
-import RouterParamMixin from './RouterParamMixin';
 import IntroBox from './IntroBox.vue';
+import InstallNotification from './InstallNotification.vue';
+import RouterParamMixin from './RouterParamMixin';
 import * as maps from './maps/maps.js';
 
 export default Vue.component('mode-tab', {
@@ -80,6 +83,7 @@ export default Vue.component('mode-tab', {
     HeroTalentTable,
     ReportTable,
     IntroBox,
+    InstallNotification,
   },
 });
 </script>
diff --git a/src/TalentImage.vue b/src/TalentImage.vue
index 3857c9f..4dd2e95 100644
--- a/src/TalentImage.vue
+++ b/src/TalentImage.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="rarity != 'None'"
        class="talent-image"
-       :style="`background-image: url('/dist/assets/talent-icons-small/${hero}/${hero}_${rarity}.png'); width: ${size}px; height: ${size}px`"
+       :style="`background-image: url('/dist/assets/talent-icons-small/${hero}/${hero}_${rarity}.jpg'); width: ${size}px; height: ${size}px`"
        :alt="`${hero} ${rarity}`"
        :title="`${hero} ${rarity}`">
   </div>