From d6a8bac147b196118d3e2ed56bd67522bc4c5da6 Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Sat, 2 Jun 2018 14:07:03 +0200
Subject: Convert images to jpg

---
 src/HeroImage.vue           |  2 +-
 src/InstallNotification.vue | 42 ++++++++++++++++++++++++++++++++++++++++++
 src/ModeTab.vue             |  6 +++++-
 src/TalentImage.vue         |  2 +-
 4 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 src/InstallNotification.vue

(limited to 'src')

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>
-- 
cgit v1.3.1