lots of changes to switch to vue

public/components/GameTeaser.vue.js

@@ -2,23 +2,23 @@
 
 import Time from './../../common/Time.js'
 
-const GameTeaser = {
+export default {
   name: 'game-teaser',
   props: {
     game: Object,
   },
   template: `
   <div class="game-teaser" :style="style">
-    <a class="game-info" :href="'/g/' + game.id">
+    <router-link class="game-info" :to="{ name: 'game', params: { id: 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="false && game.hasReplay" class="game-replay" :href="'/replay/' + game.id">
+    </router-link>
+    <router-link v-if="false && game.hasReplay" class="game-replay" :to="{ name: 'replay', params: { id: game.id } }">
       ↪️ Watch replay
-    </a>
+    </router-link>
   </div>`,
   computed: {
     style() {
@@ -38,5 +38,3 @@ const GameTeaser = {
     },
   },
 }
-
-export default GameTeaser

public/components/HelpOverlay.vue.js

@@ -0,0 +1,26 @@
+"use strict"
+
+// ingame component
+// shows the help (key bindings)
+
+export default {
+  name: 'help-overlay',
+  template: `<div class="overlay transparent" @click="$emit('bgclick')">
+    <table class="help" @click.stop="">
+      <tr><td>⬆️ Move up:</td><td><div><kbd>W</kbd>/<kbd>↑</kbd>/🖱️</div></td></tr>
+      <tr><td>⬇️ Move down:</td><td><div><kbd>S</kbd>/<kbd>↓</kbd>/🖱️</div></td></tr>
+      <tr><td>⬅️ Move left:</td><td><div><kbd>A</kbd>/<kbd>←</kbd>/🖱️</div></td></tr>
+      <tr><td>➡️ Move right:</td><td><div><kbd>D</kbd>/<kbd>→</kbd>/🖱️</div></td></tr>
+      <tr><td></td><td><div>Move faster by holding <kbd>Shift</kbd></div></td></tr>
+
+      <tr><td>🔍+ Zoom in:</td><td><div><kbd>E</kbd>/🖱️-Wheel</div></td></tr>
+      <tr><td>🔍- Zoom out:</td><td><div><kbd>Q</kbd>/🖱️-Wheel</div></td></tr>
+      <tr><td>🖼️ Toggle preview:</td><td><div><kbd>Space</kbd></div></td></tr>
+      <tr><td>🧩✔️ Toggle fixed pieces:</td><td><div><kbd>F</kbd></div></td></tr>
+      <tr><td>🧩❓ Toggle loose pieces:</td><td><div><kbd>G</kbd></div></td></tr>
+    </table>
+  </div>`,
+  emits: {
+    bgclick: null,
+  },
+}

public/components/ImageTeaser.vue.js

@@ -1,6 +1,6 @@
 "use strict"
 
-const ImageTeaser = {
+export default {
   name: 'image-teaser',
   props: {
     image: Object
@@ -20,5 +20,3 @@ const ImageTeaser = {
     },
   },
 }
-
-export default ImageTeaser

public/components/PreviewOverlay.vue.js

@@ -0,0 +1,27 @@
+"use strict"
+
+// ingame component
+// shows the preview image
+
+export default {
+  name: 'preview-overlay',
+  template: `
+    <div class="overlay" @click="$emit('bgclick')">
+      <div class="preview">
+        <div class="img" :style="previewStyle"></div>
+      </div>
+    </div>`,
+  props: {
+    img: String,
+  },
+  emits: {
+    bgclick: null,
+  },
+  computed: {
+    previewStyle () {
+      return {
+        backgroundImage: `url('${this.img}')`,
+      }
+    },
+  },
+}

public/components/PuzzleStatus.vue.js

@@ -0,0 +1,36 @@
+"use strict"
+
+import Time from './../../common/Time.js'
+
+// ingame component
+// shows timer, tiles left, etc..
+// maybe split it up later
+
+export default {
+  name: 'puzzle-status',
+  template: `
+    <div class="timer">
+      <div>
+        🧩 {{piecesDone}}/{{piecesTotal}}
+      </div>
+      <div>
+        {{icon}} {{durationStr}}
+      </div>
+      <slot />
+    </div>
+  `,
+  props: {
+    finished: Boolean,
+    duration: Number,
+    piecesDone: Number,
+    piecesTotal: Number,
+  },
+  computed: {
+    icon () {
+      return this.finished ? '🏁' : '⏳'
+    },
+    durationStr () {
+      return Time.durationStr(this.duration)
+    },
+  }
+}

public/components/Scores.vue.js

@@ -0,0 +1,41 @@
+"use strict"
+
+// ingame component
+// shows player scores
+
+export default {
+  name: "scores",
+  template: `
+  <div class="scores">
+    <div>Scores</div>
+    <table>
+      <tr v-for="(p, idx) in actives" :key="idx" :style="{color: p.color}">
+        <td>⚡</td>
+        <td>{{p.name}}</td>
+        <td>{{p.points}}</td>
+      </tr>
+      <tr v-for="(p, idx) in idles" :key="idx" :style="{color: p.color}">
+        <td>💤</td>
+        <td>{{p.name}}</td>
+        <td>{{p.points}}</td>
+      </tr>
+    </table>
+  </div>
+  `,
+  computed: {
+    actives () {
+      // TODO: dont sort in place
+      this.activePlayers.sort((a, b) => b.points - a.points)
+      return this.activePlayers
+    },
+    idles () {
+      // TODO: dont sort in place
+      this.idlePlayers.sort((a, b) => b.points - a.points)
+      return this.idlePlayers
+    },
+  },
+  props: {
+    activePlayers: Array,
+    idlePlayers: Array,
+  },
+}

public/components/SettingsOverlay.vue.js

@@ -0,0 +1,38 @@
+"use strict"
+
+// ingame component
+// allows to change (player) settings
+
+export default {
+  name: 'settings-overlay',
+  template: `
+    <div class="overlay transparent" @click="$emit('bgclick')">
+      <table class="settings" @click.stop="">
+        <tr>
+          <td><label>Background: </label></td>
+          <td><input type="color" v-model="modelValue.background" /></td>
+        </tr>
+        <tr>
+          <td><label>Color: </label></td>
+          <td><input type="color" v-model="modelValue.color" /></td>
+        </tr>
+        <tr>
+          <td><label>Name: </label></td>
+          <td><input type="text" maxLength="16" v-model="modelValue.name" /></td>
+        </tr>
+      </table>
+    </div>
+  `,
+  emits: {
+    bgclick: null,
+    'update:modelValue': null,
+  },
+  props: {
+    modelValue: Object,
+  },
+  created () {
+    this.$watch('modelValue', val => {
+      this.$emit('update:modelValue', val)
+    }, { deep: true })
+  },
+}

public/components/Upload.vue.js

@@ -1,6 +1,6 @@
 "use strict"
 
-const Upload = {
+export default {
   name: 'upload',
   props: {
     accept: String,
@@ -27,5 +27,3 @@ const Upload = {
     },
   }
 }
-
-export default Upload