From d69b0cef193d9708050c3ea90805aeaf7e1f0147 Mon Sep 17 00:00:00 2001
From: Zutatensuppe <oo.para@gmail.com>
Date: Wed, 21 Apr 2021 08:39:43 +0200
Subject: [PATCH] add image teaser component (to fix url problems)

---
 game/index.js | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/game/index.js b/game/index.js
index af335ab..0532ed9 100644
--- a/game/index.js
+++ b/game/index.js
@@ -29,7 +29,7 @@ const Upload = {
 }
 
 const GameTeaser = {
-  name: 'gameteaser',
+  name: 'game-teaser',
   props: {
     game: Object,
   },
@@ -57,10 +57,26 @@ const GameTeaser = {
   },
 }
 
+const ImageTeaser = {
+  name: 'image-teaser',
+  props: {
+    image: Object
+  },
+  template: `<div class="imageteaser" :style="style"></div>`,
+  computed: {
+    style() {
+      return {
+        'background-image': `url("${this.image.url}")`,
+      }
+    },
+  },
+}
+
 export default {
   components: {
     Upload,
     GameTeaser,
+    ImageTeaser,
   },
   props: {
     gamesRunning: Array,
@@ -95,11 +111,7 @@ export default {
 
   <h1>Image lib</h1>
   <div>
-    <div
-      v-for="i in images"
-      @click="image = i"
-      class="imageteaser"
-      :style="{'background-image': 'url(' + i.url + ')'}"></div>
+    <image-teaser v-for="i in images" :image="i" @click="image = i" />
   </div>
 
   <h1>Finished games</h1>