better game overview, start/finish time

game/game.js

@@ -76,10 +76,20 @@ function addMenuToDom(previewImageUrl) {
   )
 
   const settingsEl = document.createElement('table')
-  settingsEl.classList.add('layer', 'settings', 'closed')
+  settingsEl.classList.add('settings')
   settingsEl.appendChild(bgColorPickerRow)
   settingsEl.appendChild(playerColorPickerRow)
   settingsEl.appendChild(nameChangeRow)
+  settingsEl.addEventListener('click', (e) => {
+    e.stopPropagation()
+  })
+
+  const settingsOverlay = document.createElement('div')
+  settingsOverlay.classList.add('overlay', 'transparent', 'closed')
+  settingsOverlay.appendChild(settingsEl)
+  settingsOverlay.addEventListener('click', () => {
+    settingsOverlay.classList.toggle('closed')
+  })
 
   const previewEl = document.createElement('div')
   previewEl.classList.add('preview')
@@ -100,7 +110,7 @@ function addMenuToDom(previewImageUrl) {
   settingsOpenerEl.classList.add('opener')
   settingsOpenerEl.appendChild(document.createTextNode('🛠️ Settings'))
   settingsOpenerEl.addEventListener('click', () => {
-    settingsEl.classList.toggle('closed')
+    settingsOverlay.classList.toggle('closed')
   })
 
   const homeEl = document.createElement('a')
@@ -153,7 +163,7 @@ function addMenuToDom(previewImageUrl) {
   scoresEl.appendChild(scoresTitleEl)
   scoresEl.appendChild(scoresListEl)
 
-  document.body.appendChild(settingsEl)
+  document.body.appendChild(settingsOverlay)
   document.body.appendChild(previewOverlay)
   document.body.appendChild(menuEl)
   document.body.appendChild(scoresEl)
@@ -284,7 +294,7 @@ async function main() {
   bgColorPickerEl.addEventListener('change', () => {
     evts.addEvent(['bg_color', bgColorPickerEl.value])
   })
-  playerColorPickerEl.value = Game.getPlayerBgColor(gameId, CLIENT_ID)
+  playerColorPickerEl.value = Game.getPlayerColor(gameId, CLIENT_ID)
   playerColorPickerEl.addEventListener('change', () => {
     evts.addEvent(['player_color', playerColorPickerEl.value])
   })

game/index.js

@@ -26,6 +26,20 @@ const Upload = {
   }
 }
 
+
+export const timestamp = () => {
+  const d = new Date();
+  return Date.UTC(
+    d.getUTCFullYear(),
+    d.getUTCMonth(),
+    d.getUTCDate(),
+    d.getUTCHours(),
+    d.getUTCMinutes(),
+    d.getUTCSeconds(),
+    d.getUTCMilliseconds(),
+  )
+}
+
 export default {
   components: {
     Upload,
@@ -37,12 +51,16 @@ export default {
   template: `
 <div id="app">
   <h1>Running games</h1>
-  <div v-for="g in games">
-    <a :href="'/g/' + g.id">
-      <img :src="g.imageUrl" style="width: 150px; display: inline-block; margin: 5px;" />
-      <br />
-      {{g.tilesFinished}}/{{g.tilesTotal}} pieces, {{g.players}} players
-    </a>
+  <div class="game-teaser-wrap" v-for="g in games">
+    <div class="game-teaser" :style="'background-image: url('+g.imageUrl+')'">
+      <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>
+    </div>
   </div>
 
   <h1>New game</h1>
@@ -81,6 +99,32 @@ export default {
     }
   },
   methods: {
+    time(start, end) {
+      const icon = end ? '🏁' : '⏳'
+
+      const from = start;
+      const to = end || timestamp()
+
+      const MS = 1
+      const SEC = MS * 1000
+      const MIN = SEC * 60
+      const HOUR = MIN * 60
+      const DAY = HOUR * 24
+
+      let diff = to - from
+      const d = Math.floor(diff / DAY)
+      diff = diff % DAY
+
+      const h = Math.floor(diff / HOUR)
+      diff = diff % HOUR
+
+      const m = Math.floor(diff / MIN)
+      diff = diff % MIN
+
+      const s = Math.floor(diff / SEC)
+
+      return `${icon} ${d}d ${h}h ${m}m ${s}s`
+    },
     mediaImgUploaded(j) {
       this.image = j.image
     },

game/style.css

@@ -44,7 +44,21 @@ a:hover { color: var(--link-hover-color); }
   display: none;
 }
 
-.layer {
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  background: var(--bg-color);
+}
+
+.overlay.transparent {
+  background: transparent;
+}
+
+.settings {
   position: absolute;
   left: 50%;
   top: 50%;
@@ -56,16 +70,6 @@ a:hover { color: var(--link-hover-color); }
   z-index: 1;
 }
 
-.overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 10;
-  background: var(--bg-color);
-}
-
 .preview {
   position: absolute;
   top: 20px;
@@ -143,3 +147,38 @@ input:focus {
   box-shadow: 0 0 1px rgba(150,150,150,.4) inset;
   cursor: not-allowed;
 }
+
+.game-teaser-wrap {
+  display: inline-block;
+  width: 20%;
+  padding: 5px;
+  box-sizing: border-box;
+}
+
+.game-teaser {
+  display: block;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  position: relative;
+  padding-top: 56.25%;
+  width: 100%;
+  background-color: #222222;
+}
+
+.game-info {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.game-info-text {
+  position: absolute;
+  top: 0;
+  background: var(--bg-color);
+  padding: 5px;
+}