From 1fa619f07e0b5d63eafa822014a850e783140235 Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Tue, 25 Aug 2020 16:38:06 -0700
Subject: [PATCH] custom game toast

---
 src/components/GameCards/GameCardSearch.vue | 40 +++++++++++++++++++--
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/components/GameCards/GameCardSearch.vue b/src/components/GameCards/GameCardSearch.vue
index db1f574a..b74184b0 100644
--- a/src/components/GameCards/GameCardSearch.vue
+++ b/src/components/GameCards/GameCardSearch.vue
@@ -55,9 +55,45 @@ export default {
           this.$bvToast.toast(`There was an error adding ${this.game.name}`, { title: list.name, variant: 'danger' });
         });
 
-      // TODO: CUSTOMIZE TO SHOW GAME COVER
-      this.$bvToast.toast(`${this.game.name} added`, { title: list.name, variant: 'success' });
+      this.showGameToast();
+    },
+
+    showGameToast() {
+      const h = this.$createElement;
+
+      const vNodesMsg = h(
+        'div', { class: 'image-toast' }, [
+          h('b-card-img', {
+            class: 'toast-image',
+            props: {
+              src: this.coverUrl,
+              alt: this.game.name,
+              width: 80,
+            },
+          }),
+          h('p', `${this.game.name} added`),
+        ],
+      );
+      // Pass the VNodes as an array for message and title
+      this.$bvToast.toast([vNodesMsg], {
+        title: this.list.name,
+        solid: true,
+        variant: 'info',
+      });
     },
   },
 };
 </script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.image-toast {
+  display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: 80px auto;
+}
+
+.toast-image {
+  width: 80px !important;
+}
+</style>
+