lots of changes to switch to vue

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,
+  },
+}