v3.0.4

- Prettier URLs
- Dialog improvements
- Don't prevent board touch scrolling in 2D mode
- Branch navigation hotkeys and improvements
- Game selection hotkeys
- Ply evaluation hotkeys
- Fullscreen button hotkey
- Hotkey help filtering
- Share QR code
- Show version number in About docs
- Bug fixes and various minor improvements

quasar.conf.js

@@ -96,7 +96,7 @@ module.exports = function(ctx) {
 
     build: {
       scopeHoisting: true,
-      // vueRouterMode: 'history',
+      vueRouterMode: process.env.NODE_ENV !== 'production' ? 'hash' : 'history',
       // vueCompiler: true,
       // gzip: true,
       // analyze: true,

src/PTN/Game/base.js

@@ -9,7 +9,7 @@ import Tag from "../Tag";
 
 import GameState from "./state";
 
-import { each, flatten, map, uniq } from "lodash";
+import { defaults, each, flatten, map, uniq } from "lodash";
 import memoize from "./memoize";
 
 export const pieceCounts = {
@@ -21,6 +21,52 @@ export const pieceCounts = {
   8: { flat: 50, cap: 2 }
 };
 
+export const sample = tags => {
+  return defaults(
+    {
+      5: {
+        tps:
+          "x2,21S,x2/x,2S,21S,1S,x/12S,12S,x,12S,12S/x,1S,21S,2S,x/x2,21S,x2 1 15",
+        caps: 2,
+        flats: 10
+      },
+      6: {
+        tps:
+          "21S,1S,x2,2S,12S/1S,21S,1S,2S,12S,2S/x,1S,21S,12S,2S,x/x,2S,12S,21S,1S,x/2S,12S,2S,1S,21S,1S/12S,2S,x2,1S,21S 1 27",
+        caps: 2,
+        flats: 20
+      },
+      7: {
+        tps:
+          "21S,1S,x3,2S,12S/1S,21S,1S,x,2S,12S,2S/x,1S,21S,21S,12S,2S,x/x2,12S,x,12S,x2/x,2S,12S,21S,21S,1S,x/2S,12S,2S,x,1S,21S,1S/12S,2S,x3,1S,21S 1 33",
+        caps1: 2,
+        caps2: 3,
+        flats1: 25,
+        flats2: 24
+      },
+      8: {
+        tps:
+          "21S,1S,x4,2S,12S/1S,21S,1S,x2,2S,12S,2S/x,1S,21S,1S,2S,12S,2S,x/x2,1S,21S,12S,2S,x2/x2,2S,12S,21S,1S,x2/x,2S,12S,2S,1S,21S,1S,x/2S,12S,2S,x2,1S,21S,1S/12S,2S,x4,1S,21S 1 37",
+        caps: 4,
+        flats: 28
+      }
+    }[tags.size] || {},
+    {
+      caps: "",
+      flats: "",
+      caps1: "",
+      caps2: "",
+      flats1: "",
+      flats2: "",
+      tps: ""
+    }
+  );
+};
+
+export const isSample = tags => {
+  return tags.tps && tags.tps === sample(tags).tps;
+};
+
 export const generateName = (tags = {}, game) => {
   const tag = key =>
     (key in tags ? tags[key] : game ? game.tag(key) : "") || "";
@@ -35,6 +81,7 @@ export const generateName = (tags = {}, game) => {
     " vs " +
     player2 +
     ` ${size}x${size}` +
+    (isSample(tags) ? " SMASH" : "") +
     (result ? " " + result : "") +
     (date ? " " + date : "") +
     (time ? (date ? "-" : " ") + time : "")
@@ -309,6 +356,14 @@ export default class GameBase {
     return this.state.min;
   }
 
+  get isSample() {
+    return isSample(this.JSONTags);
+  }
+
+  get sample() {
+    return sample(this.JSONTags);
+  }
+
   plySort(a, b) {
     return a.index - b.index || a.id - b.id;
   }

src/components/board/Board.vue

@@ -2,7 +2,7 @@
   <div
     class="board-wrapper flex flex-center"
     :class="{ 'board-3D': board3D }"
-    v-touch-pan.prevent.mouse="rotateBoard"
+    v-touch-pan.prevent.mouse="board3D ? rotateBoard : null"
     @click.right.self.prevent="resetBoardRotation"
     ref="wrapper"
   >

src/components/controls/GameInfo.vue

@@ -43,7 +43,7 @@
 
       <q-input
         ref="tps"
-        v-show="tags.tps || (game && !game.plies.length)"
+        v-show="tags.tps || (!game || !game.plies.length)"
         class="col-grow"
         v-model="tags.tps"
         name="tps"
@@ -580,7 +580,7 @@
 import { formats } from "../../PTN/Tag";
 import TPS from "../../PTN/TPS";
 import ResultTag from "../../PTN/Result";
-import { generateName, pieceCounts } from "../../PTN/Game/base";
+import { generateName, pieceCounts, sample } from "../../PTN/Game/base";
 
 import Result from "../PTN/Result";
 
@@ -702,26 +702,8 @@ export default {
       this.$store.dispatch("SET_UI", ["isEditingTPS", true]);
     },
     fillTPS() {
-      switch (1 * this.tags.size) {
-        case 5:
-          this.tags.tps =
-            "x2,21S,x2/x,2S,21S,1S,x/12S,12S,x,12S,12S/x,1S,21S,2S,x/x2,21S,x2 1 15";
-          break;
-        case 6:
-          this.tags.tps =
-            "21S,1S,x2,2S,12S/1S,21S,1S,2S,12S,2S/x,1S,21S,12S,2S,x/x,2S,12S,21S,1S,x/2S,12S,2S,1S,21S,1S/12S,2S,x2,1S,21S 1 27";
-          break;
-        case 7:
-          this.tags.tps =
-            "21S,1S,x3,2S,12S/1S,21S,1S,x,2S,12S,2S/x,1S,21S,21S,12S,2S,x/x2,12S,x,12S,x2/x,2S,12S,21S,21S,1S,x/2S,12S,2S,x,1S,21S,1S/12S,2S,x3,1S,21S 1 33";
-          break;
-        case 8:
-          this.tags.tps =
-            "21S,1S,x4,2S,12S/1S,21S,1S,x2,2S,12S,2S/x,1S,21S,1S,2S,12S,2S,x/x2,1S,21S,12S,2S,x2/x2,2S,12S,21S,1S,x2/x,2S,12S,2S,1S,21S,1S,x/2S,12S,2S,x2,1S,21S,1S/12S,2S,x4,1S,21S 1 37";
-          break;
-        default:
-          this.tags.tps = "";
-      }
+      this.tags = { ...this.tags, ...sample(this.tags) };
+      this.name = this.generatedName;
     },
     swapPlayers() {
       [this.tags.player1, this.tags.player2] = [
@@ -788,4 +770,5 @@ export default {
 <style lang="stylus">
 .q-select .result
   margin 0 0 -4px
+  font-size .9em
 </style>

src/components/controls/GameSelector.vue

@@ -70,9 +70,9 @@ export default {
       }
     },
     close(index) {
+      const game = this.$store.state.games[index];
       this.$store.getters.confirm({
-        title: this.$t("confirm.close"),
-        message: this.$store.state.games[index].name,
+        title: this.$t("confirm.closeGame", { game: game.name }),
         ok: this.$t("OK"),
         cancel: this.$t("Cancel"),
         success: () => {

src/components/controls/ShareButton.vue

@@ -134,7 +134,7 @@ export default {
         this.bottomSheet = this.$q
           .bottomSheet({
             grid: true,
-            class: "bg-secondary",
+            class: "bg-secondary non-selectable",
             message: this.$t("Share"),
             actions: this.actions
           })

src/components/dialogs/AddGame.vue

@@ -1,5 +1,9 @@
 <template>
-  <q-dialog :value="value" @input="$emit('input', $event)">
+  <q-dialog
+    :value="value"
+    @input="$emit('input', $event)"
+    content-class="non-selectable"
+  >
     <q-card style="width: 560px" class="bg-secondary">
       <q-tabs v-model="tab" active-color="accent" indicator-color="accent">
         <q-tab name="new" :label="$t('New Game')" />

src/components/dialogs/Help.vue

@@ -6,6 +6,22 @@
         <q-tab name="usage" icon="help" :label="$t('Usage')" />
         <q-tab name="hotkeys" icon="keyboard" :label="$t('Hotkeys')" />
       </q-tabs>
+      <SmoothReflow>
+        <q-input
+          v-show="section === 'hotkeys'"
+          v-model="filter"
+          class="col-grow"
+          color="accent"
+          autofocus
+          clearable
+          filled
+          dense
+        >
+          <template v-slot:prepend>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </SmoothReflow>
     </template>
 
     <div class="help">
@@ -20,7 +36,7 @@
 
         <q-tab-panel name="hotkeys">
           <q-markdown>{{ $t("Hotkeys") + "\n===" }}</q-markdown>
-          <hotkeys />
+          <hotkeys ref="hotkeys" v-model="filter" />
         </q-tab-panel>
       </q-tab-panels>
     </div>
@@ -47,7 +63,8 @@ export default {
     return {
       section: "about",
       about: "",
-      usage: ""
+      usage: "",
+      filter: ""
     };
   },
   created() {

src/components/dialogs/UISettings.vue

@@ -1,5 +1,9 @@
 <template>
-  <q-dialog :value="value" @input="$emit('input', $event)">
+  <q-dialog
+    :value="value"
+    @input="$emit('input', $event)"
+    content-class="non-selectable"
+  >
     <q-card style="width: 300px" class="bg-secondary">
       <DialogHeader>{{ $t("Preferences") }}</DialogHeader>
 

src/components/general/LargeDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <q-dialog
-    :content-class="['large-dialog', $attrs['content-class']]"
+    :content-class="['large-dialog', 'non-selectable', $attrs['content-class']]"
     @input="$emit('input', $event)"
     :value="value"
     :maximized="maximized"

src/i18n/en-us/about.md

@@ -1,6 +1,6 @@
 PTN Ninja
 ===
-**Version 3.0.3**
+**Version 3.0.4**
 
 This is an editor and viewer for [Portable Tak Notation (PTN)](https://www.reddit.com/r/Tak/wiki/portable_tak_notation). It aims to be...
 

src/i18n/en-us/usage.md

@@ -14,11 +14,12 @@ You can load games from **.ptn** or **.txt** files, or from URLs originating fro
 - To create a new game, **click** the "+" button in the main menu to open the New Game dialog.
 - To load an existing game, **click** the "+" button in the main menu, then select the Load Game tab.
 - Or, **drag** one or more **.ptn** or **.txt** files into the window.
+- Use the Game Selector in the top toolbar, or hotkeys, to switch between games.
 
 ### Playback
 
-- Navigate the game using the **Play Controls** or **arrow hotkeys**.
-- **Right-click** the Back or Forward button to move by a **half-step**.
+- Navigate the game using the **Play Controls** or **arrow keys**.
+- **Right-click** the Back or Forward button to move by a **half-step** or hold **shift** with the **arrow keys**.
 - **Drag** or **click** the scrub bar to quickly jump to a different point in the game.
 
 ### Place a Stone
@@ -40,6 +41,8 @@ Branches
 
 PTN Ninja records multiple lines of play, called "branches." Branches are hidden by default. You can display branches by **clicking** the Branch button in the PTN toolbar.
 
+- Click the Branch menu in the bottom toolbar, or press **B**, to see the contextual branch menu.
+- Use the **vertical arrow keys** or **0-9** to navigate between branches.
 - **Right-click** a branch title to **rename** or **delete** it.
 
 PTN

src/i18n/hotkeys.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="hotkeys">
-    <template v-for="(names, group) in names">
+    <template v-for="(names, group) in filtered.names">
       <h6 v-text="$t('hotkeys.' + group)" :key="group + 'title'" />
       <q-markup-table :key="group" flat>
         <tbody>
           <tr v-for="(name, id) in names" :key="id">
             <td v-text="$t(name)" width="50%" />
             <td>
               <kbd
-                v-for="(key, i) in keys[group][id].split(/ \+ /g)"
+                v-for="(key, i) in filtered.keys[group][id]"
                 :key="`${id}-${i}`"
-                v-text="key.length > 1 ? $t('hotkeys.' + key) : key"
+                v-text="key"
               />
             </td>
           </tr>
@@ -21,14 +21,79 @@
 </template>
 
 <script>
-import { HOTKEY_NAMES, HOTKEYS_FORMATTED } from "../keymap";
+import { HOTKEYS, HOTKEYS_FORMATTED, HOTKEY_NAMES } from "../keymap";
+
+import { pick, pickBy, zipObject } from "lodash";
 
 export default {
+  props: ["value"],
   data() {
     return {
       names: HOTKEY_NAMES,
-      keys: HOTKEYS_FORMATTED
+      keys: zipObject(
+        Object.keys(HOTKEYS_FORMATTED),
+        Object.values(HOTKEYS_FORMATTED).map(values => {
+          return zipObject(
+            Object.keys(values),
+            Object.values(values).map(value =>
+              value
+                .split(/ \+ /g)
+                .map(key => (key.length > 1 ? this.$t("hotkeys." + key) : key))
+            )
+          );
+        })
+      )
     };
+  },
+  computed: {
+    filtered() {
+      if (this.value) {
+        const q = this.value.toLowerCase();
+
+        const search = (category, key) => {
+          return (
+            this.$t(this.names[category][key])
+              .toLowerCase()
+              .includes(q) ||
+            this.keys[category][key].find(key =>
+              ("" + key).toLowerCase().includes(q)
+            ) ||
+            HOTKEYS[category][key].find(key =>
+              ("" + key).toLowerCase().includes(q)
+            )
+          );
+        };
+
+        const filteredKeys = pickBy(
+          zipObject(
+            Object.keys(this.names),
+            Object.keys(this.names).map(category => {
+              return Object.keys(this.names[category]).filter(key => {
+                return search(category, key);
+              });
+            })
+          ),
+          values => values.length
+        );
+
+        return {
+          names: zipObject(
+            Object.keys(filteredKeys),
+            Object.keys(filteredKeys).map(category =>
+              pick(this.names[category], filteredKeys[category])
+            )
+          ),
+          keys: zipObject(
+            Object.keys(filteredKeys),
+            Object.keys(filteredKeys).map(category =>
+              pick(this.keys[category], filteredKeys[category])
+            )
+          )
+        };
+      } else {
+        return { names: this.names, keys: this.keys };
+      }
+    }
   }
 };
 </script>