bit improved index page

game/index.js

@@ -28,30 +28,50 @@ const Upload = {
   }
 }
 
+const GameTeaser = {
+  name: 'gameteaser',
+  props: {
+    game: Object,
+  },
+  template: `
+  <div class="game-teaser" :style="'background-image: url('+game.imageUrl+')'">
+    <a class="game-info" :href="'/g/' + game.id">
+      <span class="game-info-text">
+        🧩 {{game.tilesFinished}}/{{game.tilesTotal}}<br />
+        👥 {{game.players}}<br />
+        {{time(game.started, game.finished)}}<br />
+      </span>
+    </a>
+    <a v-if="game.hasReplay" class="game-replay" :href="'/replay/' + game.id">
+      ↪️ Watch replay
+    </a>
+  </div>`,
+  methods: {
+    time(start, end) {
+      const icon = end ? '🏁' : '⏳'
+      const from = start;
+      const to = end || Time.timestamp()
+      const timeDiffStr = Time.timeDiffStr(from, to)
+      return `${icon} ${timeDiffStr}`
+    },
+  },
+}
+
 export default {
   components: {
     Upload,
+    GameTeaser,
   },
   props: {
-    games: Array,
+    gamesRunning: Array,
+    gamesFinished: Array,
     images: Array,
   },
   template: `
 <div id="app">
   <h1>Running games</h1>
-  <div class="game-teaser-wrap" v-for="g in games">
+  <div class="game-teaser-wrap" v-for="g in gamesRunning">
-    <div class="game-teaser" :style="'background-image: url('+g.imageUrl+')'">
+    <game-teaser :game="g" />
-      <a class="game-info" :href="'/g/' + g.id">
-        <span class="game-info-text">
-          🧩 {{g.tilesFinished}}/{{g.tilesTotal}}<br />
-          👥 {{g.players}}<br />
-          {{time(g.started, g.finished)}}<br />
-        </span>
-      </a>
-      <a v-if="g.hasReplay" class="game-replay" :href="'/replay/' + g.id">
-        ↪️ Watch replay
-      </a>
-    </div>
   </div>
 
   <h1>New game</h1>
@@ -75,12 +95,16 @@ export default {
 
   <h1>Image lib</h1>
   <div>
-    <img
+    <div
       v-for="i in images"
-      :src="i.url"
       @click="image = i"
-      style="width: 150px; display: inline-block; margin: 5px;"
+      class="imageteaser"
-      />
+      :style="{'background-image': 'url(' + i.url + ')'}"></div>
+  </div>
+
+  <h1>Finished games</h1>
+  <div class="game-teaser-wrap" v-for="g in gamesFinished">
+    <game-teaser :game="g" />
   </div>
 </div>`,
   data() {

game/style.css

@@ -202,3 +202,15 @@ input:focus {
   top: 0;
   right: 0;
 }
+
+
+.imageteaser {
+  width: 150px;
+  height: 100px;
+  display: inline-block;
+  margin: 5px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: #222;
+}

game/templates/index.html.twig

@@ -12,7 +12,8 @@
     el: '#app',
     render: (h) => h(Page, {
       props: {
-        games: {{ games|json_encode|raw }},
+        gamesRunning: {{ gamesRunning|json_encode|raw }},
+        gamesFinished: {{ gamesFinished|json_encode|raw }},
         images: {{ images|json_encode|raw }},
       },
     }),

server/index.js

@@ -113,7 +113,8 @@ app.use('/', async (req, res, next) => {
     ]
 
     res.send(await render('index.html.twig', {
-      games,
+      gamesRunning: games.filter(g => !g.finished),
+      gamesFinished: games.filter(g => !!g.finished),
       images: allImages(),
     }))
   } else {