Wallpaper upload component

src/App.vue

@@ -1,5 +1,9 @@
 <template>
-    <div id="app" :class="{ dark: darkModeEnabled }">
+    <div
+        id="app"
+        :class="{ dark: darkModeEnabled }"
+        :style="style"
+    >
         <nav-header />
 
         <main class="content" v-if="user || isPublic">
@@ -22,10 +26,11 @@ import NavHeader from '@/components/NavHeader/NavHeader';
 import Toast from '@/components/Toast/Toast';
 import CopyrightFooter from '@/components/CopyrightFooter/CopyrightFooter';
 import firebase from 'firebase/app';
+import { mapState, mapGetters } from 'vuex';
 import { debounce } from 'lodash';
 import 'firebase/auth';
 import 'firebase/firestore';
-import { mapState, mapGetters } from 'vuex';
+import 'firebase/storage';
 
 firebase.initializeApp({
     apiKey: 'AIzaSyA6MsmnLtqT4b11r-j15wwreRypO3AodcA',
@@ -36,6 +41,7 @@ firebase.initializeApp({
     messagingSenderId: '324529217902',
 });
 
+const storage = firebase.storage().ref();
 const db = firebase.firestore();
 
 export default {
@@ -48,12 +54,34 @@ export default {
     },
 
     computed: {
-        ...mapState(['user', 'platform']),
+        ...mapState(['user', 'platform', 'wallpaperUrl', 'settings']),
         ...mapGetters(['darkModeEnabled']),
 
         isPublic() {
             return this.$route.name === 'share-list';
         },
+
+        style() {
+            return this.$route.name === 'game-board' && this.wallpaperUrl
+                ? `background-image: url('${this.wallpaperUrl}')`
+                : null;
+        },
+
+        customWallpaper() {
+            return this.settings.wallpapers && this.settings.wallpapers[this.platform.code]
+                ? this.settings.wallpapers[this.platform.code].url
+                : '';
+        },
+    },
+
+    watch: {
+        customWallpaper(value) {
+            if (value) {
+                this.loadWallpaper();
+            } else {
+                this.$store.commit('SET_WALLPAPER_URL', '');
+            }
+        },
     },
 
     mounted() {
@@ -69,6 +97,10 @@ export default {
             return;
         }
 
+        if (this.customWallpaper) {
+            this.loadWallpaper();
+        }
+
         firebase.auth().getRedirectResult().then(({ additionalUserInfo, user }) => {
             if (additionalUserInfo && additionalUserInfo.isNewUser) {
                 this.$store.dispatch('SEND_WELCOME_EMAIL', additionalUserInfo);
@@ -96,6 +128,15 @@ export default {
     },
 
     methods: {
+        loadWallpaper() {
+            const wallpaperRef = this.customWallpaper;
+            this.$store.commit('SET_WALLPAPER_URL', '');
+
+            storage.child(wallpaperRef).getDownloadURL().then((url) => {
+                this.$store.commit('SET_WALLPAPER_URL', url);
+            });
+        },
+
         saveSettings: debounce(
             // eslint-disable-next-line
             function(settings) {
@@ -230,6 +271,7 @@ export default {
 
     #app {
         background-color: $color-gray;
+        background-size: cover;
 
         &.dark {
             background-color: $color-darkest-gray;

src/components/Lists/ListActions.vue

@@ -26,6 +26,22 @@
                 <tags slot="content" />
             </modal>
 
+            <modal
+                title="Custom wallpaper"
+                ref="wallpapers"
+                message="Upload your own wallpaper to customize your game board!"
+                padded
+            >
+                <button
+                    class="small info"
+                    title="Upload wallpaper"
+                >
+                    <i class="far fa-image" />
+                </button>
+
+                <wallpaper-upload slot="content" />
+            </modal>
+
             <modal
                 :action-text="`Delete forever`"
                 :message="`Your ${platform.name} collection will be deleted forever.`"
@@ -53,11 +69,13 @@ import Modal from '@/components/Modal/Modal';
 import Tags from '@/components/Tags/Tags';
 import ShareList from '@/components/ShareList/ShareList';
 import ListAdd from '@/components/Lists/ListAdd';
+import WallpaperUpload from '@/components/WallpaperUpload/WallpaperUpload';
 
 export default {
     components: {
         Modal,
         Tags,
+        WallpaperUpload,
         ShareList,
         ListAdd,
     },

src/components/WallpaperUpload/WallpaperUpload.vue

@@ -0,0 +1,130 @@
+<template>
+    <div class="wallpaper-upload">
+        <div class="loading" v-if="loading">
+            <i class="fas fa-sync-alt fa-2x fast-spin" />
+        </div>
+
+        <div v-else>
+            Upload wallpaper
+            <input
+                type="file"
+                accept='image/*'
+                @change="handleUpload"
+            />
+
+            <div v-if="wallpaperUrl">
+                Current wallpaper
+                <img
+                    :src="wallpaperUrl"
+                    alt="Uploaded wallpaper"
+                />
+
+                <button class="error small" @click="clearWallpaper">
+                    <i class="fas fa-trash" />
+                    Remove wallpaper
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import firebase from 'firebase/app';
+import 'firebase/firestore';
+import { mapState } from 'vuex';
+
+export default {
+    data() {
+        return {
+            progressUpload: 0,
+            file: File,
+            uploadTask: '',
+            wallpapers: {},
+            loading: false,
+        };
+    },
+
+    computed: {
+        ...mapState(['user', 'settings', 'platform', 'wallpaperUrl']),
+    },
+
+    mounted() {
+        this.wallpapers = this.settings && this.settings.wallpapers
+            ? JSON.parse(JSON.stringify(this.settings.wallpapers))
+            : {};
+    },
+
+    methods: {
+        clearWallpaper() {
+            delete this.wallpapers[this.platform.code];
+
+            this.$bus.$emit('SAVE_SETTINGS', {
+                ...this.settings,
+                wallpapers: this.wallpapers,
+            });
+        },
+
+        handleUpload(e) {
+            this.loading = true;
+            const file = e.target.files[0];
+            const extenstion = file.name.split('.')[1];
+
+            firebase.storage().ref(`${this.user.uid}/wallpapers/${this.platform.code}.${extenstion}`).put(file)
+                .then(({ state, metadata }) => {
+                    if (state === 'success') {
+                        if (!this.wallpapers[this.platform.code]) {
+                            this.wallpapers[this.platform.code] = {};
+                        }
+
+                        this.wallpapers[this.platform.code].url = metadata.fullPath;
+
+                        this.$bus.$emit('SAVE_SETTINGS', {
+                            ...this.settings,
+                            wallpapers: this.wallpapers,
+                        });
+
+                        this.loading = false;
+                    }
+                });
+        },
+    },
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+    @import "~styles/styles.scss";
+
+    .wallpaper-upload {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    img {
+        width: 100%;
+        max-height: 300px;
+        height: auto;
+        border: 1px solid $color-gray;
+        padding: $gp / 2;
+        border-radius: $border-radius;
+    }
+
+    input {
+        width: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: $gp / 2;
+        height: auto;
+        width: 100%;
+        border: 1px solid $color-green;
+    }
+
+    .loading {
+        height: 200px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+    }
+</style>

src/store/mutations.js

@@ -18,6 +18,10 @@ export default {
         state.gameLists = lists;
     },
 
+    SET_WALLPAPER_URL(state, url) {
+        state.wallpaperUrl = url;
+    },
+
     SET_RELEASES(state, releases) {
         state.releases = releases;
     },

src/store/state.js

@@ -13,4 +13,5 @@ export default {
     publicGameData: {},
     game: null,
     isTouchDevice: false,
+    wallpaperUrl: null,
 };