From 7d51a426a54e26151d848df61fc7c5279b2d7e7c Mon Sep 17 00:00:00 2001
From: Robert Shi <42782709+robertyishi@users.noreply.github.com>
Date: Wed, 16 Nov 2022 18:29:07 -0800
Subject: [PATCH] v5.0.0-alpha.172: Move history, initial position
 customization, and improvements (#61)

* Initial position customization with validation

* Move history import/export with validation

* Search bar improvement: the user can now use the esc key to clear input

* Restart game now clears the move history

Co-authored-by: Victoria Phelps <victoria.phelps@sap.com>
Co-authored-by: Cameron Cheung <cameronlcheung@yahoo.com>
---
 package.json                                  |   2 +-
 src/components/units/AppGame.vue              |   8 +-
 .../units/AppGameBodyHeaderOptions.vue        |  10 +-
 src/components/units/AppGameMenu.vue          |  61 +++++
 src/components/units/AppGameMenuHeader.vue    |  19 ++
 src/components/units/AppGameMenuHistory.vue   |  22 ++
 .../units/AppGameMenuHistoryExport.vue        |  66 ++++++
 .../units/AppGameMenuHistoryImport.vue        |  84 +++++++
 .../units/AppGameMenuHistoryImportFile.vue    |  48 ++++
 src/components/units/AppGameMenuPosition.vue  |  97 ++++++++
 src/components/units/AppGameVvh.vue           |   8 +-
 src/components/units/AppGames.vue             |   2 +-
 src/models/datas/defaultApp.ts                |  25 +-
 src/scripts/gamesmanUni/index.ts              | 219 +++++++++++++++---
 src/scripts/gamesmanUni/types.ts              |   7 +-
 src/scripts/plugins/store/index.ts            |  77 ++++--
 tsconfig.json                                 |   1 +
 17 files changed, 687 insertions(+), 69 deletions(-)
 create mode 100644 src/components/units/AppGameMenu.vue
 create mode 100644 src/components/units/AppGameMenuHeader.vue
 create mode 100644 src/components/units/AppGameMenuHistory.vue
 create mode 100644 src/components/units/AppGameMenuHistoryExport.vue
 create mode 100644 src/components/units/AppGameMenuHistoryImport.vue
 create mode 100644 src/components/units/AppGameMenuHistoryImportFile.vue
 create mode 100644 src/components/units/AppGameMenuPosition.vue

diff --git a/package.json b/package.json
index 02eb16a5..10198b05 100644
--- a/package.json
+++ b/package.json
@@ -47,5 +47,5 @@
         "preview:https": "serve dist",
         "reinstall": "rm -rf node_modules; yarn; vue-tsc --noEmit"
     },
-    "version": "5.0.0-alpha.171"
+    "version": "5.0.0-alpha.172"
 }
diff --git a/src/components/units/AppGame.vue b/src/components/units/AppGame.vue
index f8fb2ec5..bc49c476 100644
--- a/src/components/units/AppGame.vue
+++ b/src/components/units/AppGame.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="app-game">
         <AppGameBody />
-        <AppGameVvh />
+        <AppGameMenu v-show="showVvh"/>
     </div>
 </template>
 
@@ -10,7 +10,7 @@
     import { onBeforeRouteLeave, useRoute } from "vue-router";
     import { actionTypes, useStore } from "../../scripts/plugins/store";
     import AppGameBody from "./AppGameBody.vue";
-    import AppGameVvh from "./AppGameVvh.vue";
+    import AppGameMenu from "./AppGameMenu.vue";
 
     const route = useRoute();
     const store = useStore();
@@ -18,13 +18,15 @@
     const gameId = computed(() => route.params.gameId as string);
     const variantId = computed(() => route.params.variantId as string);
     store.dispatch(actionTypes.initiateMatch, { gameType: gameType.value, gameId: gameId.value, variantId: variantId.value });
+    const options = computed(() => (store.getters.currentPlayer ? store.getters.currentPlayer.options : undefined));
+    const showVvh = computed(() => (options.value ? options.value.showMenu : true));
     onBeforeRouteLeave(() => store.dispatch(actionTypes.exitMatch));
 </script>
 
 <style lang="scss" scoped>
     #app-game {
         align-content: normal;
-        align-items: flex-end;
+        align-items: flex-start;
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
diff --git a/src/components/units/AppGameBodyHeaderOptions.vue b/src/components/units/AppGameBodyHeaderOptions.vue
index 3c745176..e4d09517 100644
--- a/src/components/units/AppGameBodyHeaderOptions.vue
+++ b/src/components/units/AppGameBodyHeaderOptions.vue
@@ -143,15 +143,15 @@
                 </div>
                 <div id="computer-move-duration" v-if="updatedMatchType.includes('c')">
                     <h3 class="title">Computer Move Duration (milliseconds)</h3>
-                    <VueSlider id="slider" v-model="options.computerMoveDuration" :min="0" :max="10000" interval="10" :tooltip="'active'" />
+                    <VueSlider id="slider" v-model="options.computerMoveDuration" :min="0" :max="10000" :interval="10" :tooltip="'active'" />
                     <i>(Note: The actual duration will be either the ideal duration above or server data load time if there is any server data load action, whichever is greater.)</i>
                 </div>
                 <div id="visibility-options">
                     <h3 id="title">Visibility Options</h3>
                     <div id="options">
                         <div class="option">
-                            <input class="uni-toggle-button" aria-label="toggle" type="checkbox" v-model="options.showVvh" />
-                            <label for="checkbox">Visual Value History</label>
+                            <input class="uni-toggle-button" aria-label="toggle" type="checkbox" v-model="options.showMenu" />
+                            <label for="checkbox">Game Menu</label>
                         </div>
                         <div class="option">
                             <input class="uni-toggle-button" aria-label="toggle" type="checkbox" v-model="options.showNextMoves" />
@@ -196,9 +196,9 @@
 
     const currentPlayerName = computed(() => (store.getters.users ? store.getters.users[currentPlayerId.value].name : ""));
     const updatedPlayerName = ref("");
-    const currentLeftPlayerName = computed(() => (store.getters.users ? store.getters.users[currentLeftPlayerId.value].name : ""));
+    const currentLeftPlayerName = computed(() => (store.getters.users && store.getters.users[currentLeftPlayerId.value] ? store.getters.users[currentLeftPlayerId.value].name : ""));
     const updatedLeftPlayerName = ref("");
-    const currentRightPlayerName = computed(() => (store.getters.users ? store.getters.users[currentRightPlayerId.value].name : ""));
+    const currentRightPlayerName = computed(() => (store.getters.users && store.getters.users[currentRightPlayerId.value] ? store.getters.users[currentRightPlayerId.value].name : ""));
     const updatedRightPlayerName = ref("");
     const gameType = route.params.type as string;
     const gameId = route.params.gameId as string;
diff --git a/src/components/units/AppGameMenu.vue b/src/components/units/AppGameMenu.vue
new file mode 100644
index 00000000..8db1dd47
--- /dev/null
+++ b/src/components/units/AppGameMenu.vue
@@ -0,0 +1,61 @@
+<template>
+    <div id="app-game-menu">
+        <AppGameMenuHeader />
+        <div id="app-game-menu-content">
+            <div id="app-game-menu-content-buttons">
+                <button class="buttons" @click="activeTab = 'vvh'">
+                    Visual Value History
+                </button>
+                <!-- <button class="buttons" @click="activeTab = 'analysis'">
+                    Analysis
+                </button> -->
+                <button class="buttons" @click="activeTab = 'startPos'">
+                    Customize Starting Position
+                </button>
+                <button class="buttons" @click="activeTab = 'moveHist'">
+                    Move History
+                </button>
+            </div>
+            <div id="app-game-menu-content-active">
+                <AppGameVvh v-show="activeTab === 'vvh'"/>
+                <!-- <AppGameMenuAnalysis/> -->
+                <AppGameMenuPosition v-show="activeTab === 'startPos'"/>
+                <AppGameMenuMoveHistory v-show="activeTab === 'moveHist'"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { ref } from "vue";
+    import AppGameVvh from "./AppGameVvh.vue";
+    import AppGameMenuHeader from "./AppGameMenuHeader.vue";
+    import AppGameMenuPosition from "./AppGameMenuPosition.vue";
+    import AppGameMenuMoveHistory from "./AppGameMenuHistory.vue";
+
+    const activeTab = ref('vvh');
+</script>
+
+<style lang="scss" scoped>
+    #app-game-menu {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        #app-game-menu-content {
+            border-radius: 1rem;
+            border: 0.1rem solid var(--neutralColor);
+            padding: 4rem;
+            .buttons {
+                margin-top: 2rem;
+                margin-right: 1rem;
+                margin-left: 1rem;
+                margin-bottom: 2rem;
+                padding: 0 0.5rem;
+                border-radius: 10rem;
+                border: 0.1rem solid var(--neutralColor);
+            }
+        }
+    }
+</style>
diff --git a/src/components/units/AppGameMenuHeader.vue b/src/components/units/AppGameMenuHeader.vue
new file mode 100644
index 00000000..5228c426
--- /dev/null
+++ b/src/components/units/AppGameMenuHeader.vue
@@ -0,0 +1,19 @@
+<template>
+    <div id="app-game-menu-header">
+        <h1> Menu </h1>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    #app-game-menu-header {
+        align-content: center;
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        > * {
+            margin: 2.5rem;
+        }
+    }
+</style>
diff --git a/src/components/units/AppGameMenuHistory.vue b/src/components/units/AppGameMenuHistory.vue
new file mode 100644
index 00000000..4eed8216
--- /dev/null
+++ b/src/components/units/AppGameMenuHistory.vue
@@ -0,0 +1,22 @@
+<template>
+    <div id="app-game-menu-history">
+        <AppGameMenuHistoryImport />
+        <AppGameMenuHistoryExport />
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import AppGameMenuHistoryImport from "./AppGameMenuHistoryImport.vue";
+    import AppGameMenuHistoryExport from "./AppGameMenuHistoryExport.vue";
+</script>
+
+<style lang="scss" scoped>
+    #app-game-menu-history {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+        margin: 2rem; 
+    }
+</style>
diff --git a/src/components/units/AppGameMenuHistoryExport.vue b/src/components/units/AppGameMenuHistoryExport.vue
new file mode 100644
index 00000000..854a5b0f
--- /dev/null
+++ b/src/components/units/AppGameMenuHistoryExport.vue
@@ -0,0 +1,66 @@
+<template>
+    <div id="app-game-menu-history-export">
+        <h3>Current Move History</h3>
+        <textarea id="app-game-menu-history-export-currHist" readonly>{{ moveHistoryText }}</textarea>
+        <button class="button unclicked" v-show="!copied" @click="copyToClipboard" title="copy to clipboard">copy to clipboard</button>
+        <button class="button clicked" v-show="copied" @click="copyToClipboard" title="copied!">copy to clipboard</button>
+        <!-- TODO: Export to file goes here -->
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { computed, ref } from "vue";
+    import { useStore } from "../../scripts/plugins/store";
+
+    const copied = ref(false);
+    const store = useStore();
+    const moveHistoryText = computed(() => {
+        copied.value = false;
+        return store.getters.moveHistory;
+    });
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(moveHistoryText.value);
+        copied.value = true;
+    }
+</script>
+
+<style lang="scss" scoped>
+    #app-game-menu-history-export {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        justify-content: center;
+        align-items: center; 
+        #app-game-menu-history-export-currHist {
+            width: 15vw;
+            height: 15vh;
+            text-align: left;
+            resize: none;
+            border-radius: 1rem;
+            border: 0.1rem solid var(--neutralColor);
+            padding: 1rem;
+            margin-top: 1rem;
+        }
+        .button {
+            margin: 1rem;
+            padding: 0 0.5rem;
+            border-radius: 10rem;
+            border: 0.1rem solid var(--neutralColor);
+        }
+        .clicked {
+            background-color: rgba(76, 220, 37, 0.645);
+        }
+        // #app-game-menu-history-export-copy {
+        //     width: 10rem;
+        //     height: 10rem;
+        //     margin-top: 2rem;
+        //     margin-right: 1rem;
+        //     margin-left: 1rem;
+        //     margin-bottom: 2rem;
+        //     padding: 0 0.5rem;
+        //     border-radius: 10rem;
+        //     border: 0.1rem solid var(--neutralColor);
+        // }
+    }
+</style>
diff --git a/src/components/units/AppGameMenuHistoryImport.vue b/src/components/units/AppGameMenuHistoryImport.vue
new file mode 100644
index 00000000..e58d030a
--- /dev/null
+++ b/src/components/units/AppGameMenuHistoryImport.vue
@@ -0,0 +1,84 @@
+<template>
+    <div id="app-game-menu-history-import">
+        <h3>Import Move History</h3>
+        <div id="app-game-menu-history-import-text">
+            <button id="app-game-menu-history-import-text-info" @click="showInfo = !showInfo">𝓲</button>
+            <textarea
+                v-model="inputHist"
+                id="app-game-menu-history-import-text-input"
+                placeholder="Enter move history of game here"
+                @keyup.enter="onTextSubmit"
+            />
+            <button id="app-game-menu-history-import-text-submit" @click="onTextSubmit">Submit</button>
+        </div>
+        <div class="error" v-show="errorMsg">Error: {{ errorMsg }}</div>
+        <AppGameMenuHistoryImportFile />
+        <p v-show="showInfo" id="app-game-menu-history-import-infoMsg">
+            Instructions on how to format the move history...
+        </p>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { ref } from "vue";
+    import { actionTypes, useStore } from "../../scripts/plugins/store";
+    import AppGameMenuHistoryImportFile from "./AppGameMenuHistoryImportFile.vue";
+
+    const store = useStore();
+    const showInfo = ref(false);
+    const inputHist = ref("");
+    const errorMsg = ref("");
+    const onTextSubmit = async () => {
+        const error = await store.dispatch(actionTypes.loadMoveHistory, { history: inputHist.value });
+        if (error) {
+            errorMsg.value = error.message;
+        } else {
+            errorMsg.value = "";
+            inputHist.value = "";
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    #app-game-menu-history-import {
+        #app-game-menu-history-import-text {
+            flex: 1 1 auto;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: center;
+            margin: 1rem;
+            align-items: center;    
+            #app-game-menu-history-import-text-info {
+                margin-right: 2rem;
+                border-radius: 100%;
+                font-size: 2rem;
+                height: max(2.5rem, min(5vh, 5vw));
+                width: max(2.5rem, min(5vh, 5vw));
+            }
+            #app-game-menu-history-import-text-input {
+                border-radius: 1rem;
+                border: 0.1rem solid var(--neutralColor);
+                padding: 1rem;
+                border-spacing: 5rem;
+                width: 15vw;
+                height: 15vh;
+                text-align: left;
+                resize: none;
+            }
+            #app-game-menu-history-import-text-submit {
+                padding: 0.3rem;
+                margin-left: 2rem;
+                border: 0.1rem solid var(--neutralColor);
+            }
+        }
+        #app-game-menu-history-import-infoMsg {
+            padding: 1rem;
+            text-align: center;
+        }
+        .error {
+            color: red;
+            margin: 1rem;
+        }
+    }
+</style>
diff --git a/src/components/units/AppGameMenuHistoryImportFile.vue b/src/components/units/AppGameMenuHistoryImportFile.vue
new file mode 100644
index 00000000..3e627b5a
--- /dev/null
+++ b/src/components/units/AppGameMenuHistoryImportFile.vue
@@ -0,0 +1,48 @@
+<template>
+    <div id="app-game-menu-history-import-file">
+        <input type="file" accept=".txt" v-on:change="onFileChange" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { actionTypes, useStore } from "../../scripts/plugins/store";
+    interface HTMLInputEvent extends Event {
+        target: HTMLInputElement & EventTarget
+    };
+    const store = useStore();
+    const readHistoryFromFile = (file: File) => {
+        if (!file) return;
+        const reader = new FileReader();
+        reader.readAsText(file);
+        reader.onload = () => {
+            if (typeof reader.result === "string") {
+                store.dispatch(actionTypes.loadMoveHistory, { history: reader.result });
+            }
+        };
+        reader.onerror = () => {
+            console.log(reader.error);
+            alert(reader.error);
+        };
+    };
+    const onFileChange = (e: HTMLInputEvent) => {
+        if (!e.target || !e.target.files) return;
+        readHistoryFromFile(e.target.files[0]);
+    };
+</script>
+
+<style lang="scss" scoped>
+    // #app-game-menu-history-import-file {
+        // #input-file {
+        //     margin-left: 2rem;
+        //     padding: 1rem;
+        //     padding-top: 1rem;
+        //     float: center;
+        //     justify-content: space-around;
+        //     width: 15rem;
+        // }
+        // #upload {
+        //     padding: 0.5rem;
+        //     border: 0.1rem solid var(--neutralColor);
+        // }
+    // }
+</style>
diff --git a/src/components/units/AppGameMenuPosition.vue b/src/components/units/AppGameMenuPosition.vue
new file mode 100644
index 00000000..693dfd1b
--- /dev/null
+++ b/src/components/units/AppGameMenuPosition.vue
@@ -0,0 +1,97 @@
+<template>
+    <div id="app-game-menu-customPos">
+        <div id="app-game-menu-customPos-input">
+            <button id="app-game-menu-customPos-input-info" @click="showInfo = !showInfo">𝓲</button>
+            <input
+                v-model.lazy="inputPos"
+                id="app-game-menu-customPos-input-input"
+                placeholder="Enter starting position of game here"
+                @keyup.enter="onTextSubmit"
+            />
+            <button id="app-game-menu-customPos-input-submit" @click="onTextSubmit">Submit</button>
+        </div>
+        <div class="error" v-show="errorMsg">Error: {{ errorMsg }}</div>
+        <h3>Current Start Position</h3>
+        <textarea
+            id="app-game-menu-customPos-currStartPos"
+            type="text"
+            v-model="currStartPosText"
+            readonly
+        ></textarea>
+        <p v-show="showInfo" id="app-game-menu-customPos-infoText">
+            Instructions on how to format the start position...
+        </p>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { computed, ref } from "vue";
+    import { actionTypes, useStore } from "../../scripts/plugins/store";
+
+    const store = useStore();
+    const showInfo = ref(false);
+    const inputPos = ref("");
+    const errorMsg = ref("");
+    const currStartPosText = computed(() => store.getters.currentStartPosition);
+    const onTextSubmit = async () => {
+        const error = await store.dispatch(actionTypes.updateMatchStartPosition, { position: inputPos.value });
+        if (error) {
+            errorMsg.value = error.message;
+        } else {
+            errorMsg.value = "";
+            inputPos.value = "";
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    #app-game-menu-customPos {
+        #app-game-menu-customPos-input {
+            flex: 1 1 auto;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: center;
+            margin: 2rem;
+            align-items: center;
+            #app-game-menu-customPos-input-info {
+                margin-right: 2rem;
+                border-radius: 100%;
+                font-size: 2rem;
+                height: max(2.5rem, min(5vh, 5vw));
+                width: max(2.5rem, min(5vh, 5vw));
+            }
+            #app-game-menu-customPos-input-input {
+                border-radius: 1rem;
+                border: 0.1rem solid var(--neutralColor);
+                padding: 1rem;
+                border-spacing: 5rem;
+                width: 30vw;
+                height: 3vh;
+                resize: none;
+            }
+            #app-game-menu-customPos-input-submit {
+                padding: 0.5rem;
+                margin-left: 2rem;
+                border: 0.1rem solid var(--neutralColor);
+            }
+        }
+        #app-game-menu-customPos-currStartPos {
+            border-radius: 1rem;
+            border: 0.1rem solid var(--neutralColor);
+            padding: 0.5rem;
+            width: 40vw;
+            height: 3vh;
+            resize: none;
+            margin-top: 1rem;
+        }
+        #app-game-menu-customPos-infoText {
+           padding: 1rem;
+           text-align: center;
+        }
+        .error {
+            color: red;
+            margin: 1rem;
+        }
+    }
+</style>
diff --git a/src/components/units/AppGameVvh.vue b/src/components/units/AppGameVvh.vue
index 19be5de1..abc9921a 100644
--- a/src/components/units/AppGameVvh.vue
+++ b/src/components/units/AppGameVvh.vue
@@ -1,19 +1,13 @@
 <template>
-    <div id="app-game-vvh" v-if="showVvh">
+    <div id="app-game-vvh">
         <AppGameVvhHeader />
         <AppGameVvhBody />
     </div>
 </template>
 
 <script lang="ts" setup>
-    import { computed } from "vue";
     import AppGameVvhHeader from "./AppGameVvhHeader.vue";
     import AppGameVvhBody from "./AppGameVvhBody.vue";
-    import { useStore } from "../../scripts/plugins/store";
-
-    const store = useStore();
-    const options = computed(() => (store.getters.currentPlayer ? store.getters.currentPlayer.options : undefined));
-    const showVvh = computed(() => (options.value ? options.value.showVvh : true));
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/units/AppGames.vue b/src/components/units/AppGames.vue
index 2911daf8..a8249119 100644
--- a/src/components/units/AppGames.vue
+++ b/src/components/units/AppGames.vue
@@ -2,7 +2,7 @@
     <div id="app-games">
         <h2>{{ gameTypeTitle }}</h2>
         <div id="search">
-            <input type="text" v-model="search" placeholder="Search for..." /> <br>
+            <input type="text" v-model="search" placeholder="Search for..." @keydown.esc="search = ''"/> <br>
         </div>
         <div id="games">
             <router-link v-for="game in games" :key="game.id" :to="{ name: 'variants', params: { type: gameType, gameId: game.id } }">
diff --git a/src/models/datas/defaultApp.ts b/src/models/datas/defaultApp.ts
index 3f17a788..dd8a7695 100644
--- a/src/models/datas/defaultApp.ts
+++ b/src/models/datas/defaultApp.ts
@@ -29,10 +29,13 @@ export const defaultAvailableMove: Types.Move = {
     remoteness: 0,
 };
 
+export const defaultAvailableMoveNames: Types.MoveNames = {};
+
 export const defaultAvailableMoves: Types.Moves = {};
 
 export const defaultPosition: Types.Position = {
     ...defaultUpdate,
+    availableMoveNames: {},
     availableMoves: {},
     position: "",
     positionValue: "",
@@ -101,7 +104,7 @@ export const defaultOptions: Types.Options = {
     showNextMoveHints: true,
     showNextMoves: true,
     showOptions: false,
-    showVvh: true,
+    showMenu: true,
     showVvhGuides: true,
     showVvhMeters: false,
 };
@@ -126,9 +129,11 @@ export const defaultMatch: Types.Match = {
     gameId: "",
     variantId: "",
     type: "",
+    startPosition: "",
     players: [],
     startingPlayerId: "",
     rounds: {},
+    moveHistory: "",
     round: { ...defaultRound, position: { ...defaultPosition, availableMoves: {} } },
     created: 0,
     lastPlayed: 0,
@@ -182,5 +187,21 @@ export const defaultApp: Types.App = {
         c1: { id: "c1", name: "Computer 1", options: { ...defaultOptions }, matches: {} },
         c2: { id: "c2", name: "Computer 2", options: { ...defaultOptions }, matches: {} },
     },
-    currentMatch: { id: 0, gameType: "", gameId: "", variantId: "", type: "", players: [], startingPlayerId: "", rounds: {}, round: { ...defaultRound, position: { ...defaultPosition, availableMoves: {} } }, created: 0, lastPlayed: 0, ended: 0 },
+    currentMatch: {
+        id: 0, gameType: "",
+        gameId: "",
+        variantId: "",
+        type: "",
+        startPosition: "",
+        players: [],
+        startingPlayerId: "",
+        rounds: {},
+        moveHistory: "",
+        round: {
+            ...defaultRound,
+            position: { ...defaultPosition, availableMoves: {} } },
+            created: 0,
+            lastPlayed: 0,
+            ended: 0
+        },
 };
diff --git a/src/scripts/gamesmanUni/index.ts b/src/scripts/gamesmanUni/index.ts
index 1fef754c..eda88714 100644
--- a/src/scripts/gamesmanUni/index.ts
+++ b/src/scripts/gamesmanUni/index.ts
@@ -4,13 +4,19 @@ import * as GHAPI from "../apis/gitHub";
 import type * as Types from "./types";
 import * as Defaults from "../../models/datas/defaultApp";
 
+const moveHistoryDelim = ':';
+
+const deepcopy = (obj: Object) => {
+    return JSON.parse(JSON.stringify(obj));
+}
+
 export const loadGames = async (app: Types.App, payload: { gameType: string; force?: boolean }) => {
     if (!payload.force && Object.keys(app.gameTypes[payload.gameType].games).length && (new Date().getTime() - app.gameTypes[payload.gameType].lastUpdated) / (1000 * 60 * 60 * 24) < 3 * (1000 * 60 * 60 * 24)) return app;
     const dataSource = payload.gameType === "puzzles" ? app.dataSources.onePlayerGameAPI : app.dataSources.twoPlayerGameAPI;
     const games = await GCTAPI.loadGames(dataSource, payload);
     if (!games) return undefined;
     app.gameTypes[payload.gameType].status = games.status;
-    for (const game of games.response)
+    for (const game of games.response) {
         app.gameTypes[payload.gameType].games[game.gameId] = {
             ...Defaults.defaultGame,
             id: game.gameId,
@@ -19,6 +25,7 @@ export const loadGames = async (app: Types.App, payload: { gameType: string; for
             status: game.status,
             variants: { ...Defaults.defaultVariants },
         };
+    }
     app.gameTypes[payload.gameType].lastUpdated = new Date().getTime();
     return app;
 };
@@ -26,8 +33,7 @@ export const loadGames = async (app: Types.App, payload: { gameType: string; for
 export const loadVariants = async (app: Types.App, payload: { gameType: string; gameId: string; force?: boolean }) => {
     if (!Object.keys(app.gameTypes[payload.gameType].games).length) {
         const updatedApp = await loadGames(app, payload);
-        if (updatedApp) app = updatedApp;
-        else return undefined;
+        if (!updatedApp) return undefined;
     }
     if (!payload.force && app.gameTypes[payload.gameType].games[payload.gameId] && Object.keys(app.gameTypes[payload.gameType].games[payload.gameId].variants.variants).length && (new Date().getTime() - app.gameTypes[payload.gameType].games[payload.gameId].variants.lastUpdated) / (1000 * 60 * 60 * 24) < 3 * (1000 * 60 * 60 * 24)) return app;
     const baseDataSource = payload.gameType === "puzzles" ? app.dataSources.onePlayerGameAPI : app.dataSources.twoPlayerGameAPI;
@@ -41,7 +47,7 @@ export const loadVariants = async (app: Types.App, payload: { gameType: string;
     app.gameTypes[payload.gameType].games[payload.gameId].instructions = variants.response.instructions;
     app.gameTypes[payload.gameType].games[payload.gameId].custom = variants.response.custom === "true";
     app.gameTypes[payload.gameType].games[payload.gameId].variants.variants = {};
-    for (const variant of variants.response.variants)
+    for (const variant of variants.response.variants) {
         app.gameTypes[payload.gameType].games[payload.gameId].variants.variants[variant.variantId] = {
             id: variant.variantId,
             description: variant.description,
@@ -50,10 +56,35 @@ export const loadVariants = async (app: Types.App, payload: { gameType: string;
             autogui_v2_data: variant.autogui_v2_data,
             status: variant.status,
         };
+    }
     return app;
 };
 
-const formatMoves = (source: Array<{ deltaRemoteness: number; move: string; moveName: string; moveValue: string; position: string; positionValue: string; remoteness: number }>) => {
+const formatMoveNames = (source: Array<{
+    deltaRemoteness: number;
+    move: string;
+    moveName: string;
+    moveValue: string;
+    position: string;
+    positionValue: string;
+    remoteness: number
+}>) => {
+    const target: Types.MoveNames = { ...Defaults.defaultAvailableMoveNames };
+    for (let i = 0; i < source.length; i++) {
+        target[source[i].moveName ? source[i].moveName : source[i].move] = source[i].move;
+    }
+    return target;
+}
+
+const formatMoves = (source: Array<{
+        deltaRemoteness: number;
+        move: string;
+        moveName: string;
+        moveValue: string;
+        position: string;
+        positionValue: string;
+        remoteness: number
+    }>) => {
     const target: Types.Moves = { ...Defaults.defaultAvailableMoves };
     if (source.length) target[source[0].move] = { ...source[0], moveValueOpacity: 1 };
     for (let i = 1; i < source.length; i++) {
@@ -73,10 +104,13 @@ const loadPosition = async (app: Types.App, payload: { gameType: string; gameId:
     if (!payload.force && positions[payload.position] && (new Date().getTime() - positions[payload.position].lastUpdated) / (1000 * 60 * 60 * 24) < 3 * (1000 * 60 * 60 * 24)) return app;
     const dataSource = payload.gameType === "puzzles" ? `${app.dataSources.onePlayerGameAPI}/${payload.gameId}/${payload.variantId}/${payload.position}` : `${app.dataSources.twoPlayerGameAPI}/${payload.gameId}/variants/${payload.variantId}/positions/${payload.position}`;
     const updatedPosition = await GCTAPI.loadPosition(dataSource);
-    if (!updatedPosition) return undefined;
+    if (!updatedPosition || updatedPosition.response.positionValue === "undecided") {
+        return undefined;
+    }
     positions[payload.position] = {
         status: updatedPosition.status,
         lastUpdated: new Date().getTime(),
+        availableMoveNames: formatMoveNames(updatedPosition.response.moves),
         availableMoves: formatMoves(updatedPosition.response.moves),
         position: updatedPosition.response.position,
         positionValue: updatedPosition.response.positionValue,
@@ -104,32 +138,47 @@ const generateMatchId = (app: Types.App) => {
     return newId;
 };
 
-export const initiateMatch = async (app: Types.App, payload: { gameType: string; gameId: string; variantId: string; matchType?: string }) => {
-    if (!Object.keys(app.gameTypes[payload.gameType].games).length || !Object.keys(app.gameTypes[payload.gameType].games[payload.gameId].variants.variants).length) {
+export const initiateMatch = async (app: Types.App, payload: {
+        gameType: string;
+        gameId: string;
+        variantId: string;
+        matchType?: string;
+        startPosition?: string
+    }) => {
+    const cachedGames = app.gameTypes[payload.gameType].games;
+    if (!Object.keys(cachedGames).length || !Object.keys(cachedGames[payload.gameId].variants.variants).length) {
         const updatedApp = await loadVariants(app, payload);
-        if (updatedApp) app = updatedApp;
-        else return undefined;
+        if (!updatedApp) return undefined;
     }
-
-    const has_custom = app.gameTypes[payload.gameType].games[payload.gameId].custom;
-    let game = app.gameTypes[payload.gameType].games[payload.gameId].variants.variants[payload.variantId];
-    if (!game && has_custom) {
-        game = await loadVariant(app, payload);
-        app.gameTypes[payload.gameType].games[payload.gameId].variants.variants[payload.variantId] = game;
+    const game = cachedGames[payload.gameId];
+    let gameVariant = game.variants.variants[payload.variantId];
+    const hasCustom = game.custom;
+    if (!gameVariant && hasCustom) {
+        gameVariant = await loadVariant(app, payload);
+        game.variants.variants[payload.variantId] = gameVariant;
     }
-
-    const updatedApp = await loadPosition(app, { ...payload, position: game.startPosition });
+    const startPosition = payload.startPosition ? payload.startPosition : gameVariant.startPosition;
+    const updatedApp = await loadPosition(app, { ...payload, position: startPosition });
     if (!updatedApp) return undefined;
-    app.currentMatch = { ...Defaults.defaultMatch };
+    app.currentMatch.startPosition = startPosition;
+    app.currentMatch.moveHistory = game.name + moveHistoryDelim + startPosition;
     app.currentMatch.created = new Date().getTime();
     app.currentMatch.gameType = payload.gameType;
     app.currentMatch.gameId = payload.gameId;
     app.currentMatch.variantId = payload.variantId;
-    app.currentMatch.type = payload.matchType ? payload.matchType : payload.gameType === "puzzles" ? "p" : game.positions[game.startPosition].positionValue === "lose" ? "cvp" : "pvc";
+    app.currentMatch.type = payload.matchType ? payload.matchType : payload.gameType === "puzzles" ? "p" : gameVariant.positions[startPosition].positionValue === "lose" ? "cvp" : "pvc";
     app.currentMatch.players = app.currentMatch.gameType === "puzzles" ? [app.currentMatch.type + "1"] : app.currentMatch.type === "pvc" ? ["p1", "c1"] : app.currentMatch.type === "cvp" ? ["c1", "p1"] : app.currentMatch.type === "cvc" ? ["c1", "c2"] : app.currentMatch.type === "pvp" ? ["p1", "p2"] : [];
     app.currentMatch.id = generateMatchId(app);
     app.currentMatch.startingPlayerId = app.currentMatch.players[0];
-    app.currentMatch.round = { id: 1, playerId: app.currentMatch.startingPlayerId, players: [...app.currentMatch.players], move: "", moveName: "", moveValue: "", position: { ...game.positions[game.startPosition] } };
+    app.currentMatch.round = {
+        id: 1,
+        playerId: app.currentMatch.startingPlayerId,
+        players: [...app.currentMatch.players],
+        move: "",
+        moveName: "",
+        moveValue: "",
+        position: { ...gameVariant.positions[startPosition] }
+    };
     app.currentMatch.ended = 0;
     app.currentMatch.rounds[app.currentMatch.round.id] = { ...app.currentMatch.round };
     app.currentMatch.lastPlayed = new Date().getTime();
@@ -169,7 +218,10 @@ export const getMaximumRemoteness = (app: Types.App, payload: { from: number; to
     return Math.max(...remotenesses);
 };
 
-export const isEndOfMatch = (app: Types.App) => !app.currentMatch.round.position.remoteness && app.currentMatch.round.position.positionValue !== "draw" && !Object.keys(app.currentMatch.round.position.availableMoves).length;
+export const isEndOfMatch = (app: Types.App) =>
+    !app.currentMatch.round.position.remoteness &&
+    app.currentMatch.round.position.positionValue !== "draw" &&
+    !Object.keys(app.currentMatch.round.position.availableMoves).length;
 
 export const exitMatch = (app: Types.App) => {
     if (Object.entries(app.currentMatch.rounds).length > 1 && !isEndOfMatch(app)) { 
@@ -177,7 +229,7 @@ export const exitMatch = (app: Types.App) => {
         app.currentMatch.rounds[app.currentMatch.round.id] = { ...app.currentMatch.round };
         for (const player of app.currentMatch.players) app.users[player].matches[app.currentMatch.id] = app.currentMatch;
     }
-    app.currentMatch.round.position.position = "";
+    app.currentMatch = deepcopy(Defaults.defaultMatch);
     return app;
 };
 
@@ -203,14 +255,26 @@ export const runMove = async (app: Types.App, payload: { move: string }) => {
     } else {
         app.currentMatch.round.moveName = app.currentMatch.round.position.availableMoves[payload.move].move;
     }
-    for (let roundId = app.currentMatch.round.id; roundId <= Math.max(...Object.keys(app.currentMatch.rounds).map((roundId) => parseInt(roundId))); roundId++) delete app.currentMatch.rounds[roundId];
-    app.currentMatch.rounds[app.currentMatch.round.id] = { ...app.currentMatch.round };
+    // If runMove immediately after undoing, rewrite history by deleting all subsequent moves made ealier.
+    for (let roundId = app.currentMatch.round.id;
+         roundId <= Math.max(...Object.keys(app.currentMatch.rounds).map((roundId) => parseInt(roundId)));
+         roundId++) {
+        delete app.currentMatch.rounds[roundId];
+    }
+    app.currentMatch.rounds[app.currentMatch.round.id] = deepcopy(app.currentMatch.round);
     if (isEndOfMatch(app)) {
         app.currentMatch.lastPlayed = new Date().getTime();
         app.currentMatch.ended = new Date().getTime();
-        for (const player of app.currentMatch.players) app.users[player].matches[app.currentMatch.id] = { ...app.currentMatch };
+        for (const player of app.currentMatch.players) {
+            app.users[player].matches[app.currentMatch.id] = deepcopy(app.currentMatch);
+        }
     } else {
-        const updatedApp = await loadPosition(app, { gameType: app.currentMatch.gameType, gameId: app.currentMatch.gameId, variantId: app.currentMatch.variantId, position: app.currentMatch.round.position.availableMoves[payload.move].position });
+        const updatedApp = await loadPosition(app, {
+            gameType: app.currentMatch.gameType,
+            gameId: app.currentMatch.gameId,
+            variantId: app.currentMatch.variantId,
+            position: app.currentMatch.round.position.availableMoves[payload.move].position
+        });
         if (!updatedApp) return undefined;
         const updatedPosition = { 
             ...updatedApp.
@@ -227,15 +291,17 @@ export const runMove = async (app: Types.App, payload: { move: string }) => {
                 position
             ]
         };
+        const move = app.currentMatch.round.position.availableMoves[payload.move];
+        app.currentMatch.moveHistory += moveHistoryDelim + (move.moveName ? move.moveName : move.move);
         app.currentMatch.round.id += 1;
         app.currentMatch.round.players = [...app.currentMatch.round.players];
         if (app.currentMatch.gameType != "puzzles") {
-          let posArr = updatedPosition.position.split('_');
-          if (posArr.length === 5 && posArr[0] === 'R') {
-            app.currentMatch.round.playerId = posArr[1] === 'A' ? app.currentMatch.players[0] : app.currentMatch.players[1];
-          } else {
-            app.currentMatch.round.playerId = app.currentMatch.round.playerId === app.currentMatch.players[0] ? app.currentMatch.players[1] : app.currentMatch.players[0];
-          }
+            let posArr = updatedPosition.position.split('_');
+            if (posArr.length === 5 && posArr[0] === 'R') {
+                app.currentMatch.round.playerId = posArr[1] === 'A' ? app.currentMatch.players[0] : app.currentMatch.players[1];
+            } else {
+                app.currentMatch.round.playerId = app.currentMatch.round.playerId === app.currentMatch.players[0] ? app.currentMatch.players[1] : app.currentMatch.players[0];
+            }
         }
         app.currentMatch.round.move = "";
         app.currentMatch.round.moveValue = "";
@@ -246,9 +312,34 @@ export const runMove = async (app: Types.App, payload: { move: string }) => {
     return app;
 };
 
-export const redoMove = async (app: Types.App, payload?: { count?: number }) => {
+const popMovesFromHistory = (history: string, count?: number) => {
+    let i = history.length - 1;
+    if (!count) {
+        count = 1;
+    }
+    while (count > 0 && i >= 0) {
+        if (history[i--] === moveHistoryDelim) {
+            --count;
+        }
+    }
+    if (++i <= 1) {
+        console.error("popMoveFromHistory: popping from empty move list")
+        return "";
+    }
+    return history.substring(0, i);
+}
+
+export const redoMove = (app: Types.App, payload?: { count?: number }) => {
     const count = payload && payload.count ? payload.count : 1;
     const newRoundId = Math.min(Math.max(...Object.values(app.currentMatch.rounds).map((round) => round.id)), app.currentMatch.round.id + count);
+    // Modify move history before changing current round id.
+    for (let i = app.currentMatch.round.id; i < newRoundId; ++i) {
+        app.currentMatch.moveHistory += moveHistoryDelim + (
+            app.currentMatch.rounds[i].moveName ?
+            app.currentMatch.rounds[i].moveName :
+            app.currentMatch.rounds[i].move
+        );
+    }
     app.currentMatch.round = { ...app.currentMatch.rounds[newRoundId] };
     app.currentMatch.round.move = "";
     app.currentMatch.round.moveValue = "";
@@ -256,9 +347,11 @@ export const redoMove = async (app: Types.App, payload?: { count?: number }) =>
     return app;
 };
 
-export const undoMove = async (app: Types.App, payload?: { count?: number }) => {
+export const undoMove = (app: Types.App, payload?: { count?: number }) => {
     const count = payload && payload.count ? payload.count : 1;
     const newRoundId = Math.max(1, app.currentMatch.round.id - count);
+    // Modify move history.
+    app.currentMatch.moveHistory = popMovesFromHistory(app.currentMatch.moveHistory, count);
     app.currentMatch.round = { ...app.currentMatch.rounds[newRoundId] };
     app.currentMatch.round.move = "";
     app.currentMatch.round.moveValue = "";
@@ -275,6 +368,23 @@ export const updateMatchType = (app: Types.App, payload: { matchType: string, pl
     return app;
 }
 
+export const updateMatchStartPosition = async (app: Types.App, payload: { position: string }) => {
+    // Check if position is valid
+    payload.position = payload.position.replace(/(\r\n|\n|\r)/gm, "");
+    const updatedApp = await loadPosition(app, {
+        gameType: app.currentMatch.gameType,
+        gameId: app.currentMatch.gameId,
+        variantId: app.currentMatch.variantId,
+        position: payload.position
+    });
+    if (!updatedApp) {
+        return Error("invalid position [" + payload.position + "]");
+    }
+    // Position is valid, update app.
+    app.currentMatch.startPosition = payload.position;
+    return app;
+}
+
 export const loadCommits = async (app: Types.App, payload?: { force?: boolean }) => {
     if (!(payload && payload.force) && Object.keys(app.commits.commits).length && (new Date().getTime() - app.commits.lastUpdated) / (1000 * 60 * 60 * 24) < 3 * (1000 * 60 * 60 * 24)) return app;
     const commits = await GHAPI.loadLatestCommits(app.dataSources.gitHubRepositoryAPI + "/commits");
@@ -294,3 +404,42 @@ export const loadCommits = async (app: Types.App, payload?: { force?: boolean })
     }
     return app;
 };
+
+export const loadMoveHistory = async (app: Types.App, payload: { history: string }) => {
+    // Parse and load initial position, return undefined if initial position is invalid
+    payload.history = payload.history.replace(/(\r\n|\n|\r)/gm, "");
+    let parsed = payload.history.split(moveHistoryDelim);
+    if (parsed.length < 2) {
+        return Error("game name or start position missing");
+    }
+    let newApp: Types.App = deepcopy(app);
+    const updatedAppOrError = await updateMatchStartPosition(newApp, { position: parsed[1] });
+    if (updatedAppOrError instanceof Error) {
+        return updatedAppOrError;
+    }
+    // Restart match in PVP mode
+    exitMatch(newApp);
+    let updatedApp = await initiateMatch(newApp, {
+        gameType: app.currentMatch.gameType,
+        gameId: app.currentMatch.gameId,
+        variantId: app.currentMatch.variantId,
+        matchType: "pvp",
+        startPosition: parsed[1]
+    });
+    if (!updatedApp) {
+        return Error("UNREACHED: initiateMatch failed");
+    }
+    // Do move one by one, return undefined if any move is invalid
+    for (let i = 2; i < parsed.length; ++i) {
+        const nextMove = newApp.currentMatch.round.position.availableMoveNames[parsed[i]];
+        if (!nextMove) {
+            return Error("invalid move [" + parsed[i] + "]");
+        }
+        updatedApp = await runMove(newApp, { move: nextMove });
+        if (!updatedApp) {
+            return Error("UNREACHED: runMove returned undefined");
+        }
+    }
+    // Load successful, update app.
+    return newApp;
+}
diff --git a/src/scripts/gamesmanUni/types.ts b/src/scripts/gamesmanUni/types.ts
index 5cc7b1a3..53f75754 100644
--- a/src/scripts/gamesmanUni/types.ts
+++ b/src/scripts/gamesmanUni/types.ts
@@ -61,6 +61,7 @@ export type Variant = {
 export type Positions = Record<string, Position>;
 
 export type Position = Update & {
+    availableMoveNames: MoveNames;
     availableMoves: Moves;
     position: string;
     positionValue: string;
@@ -69,6 +70,8 @@ export type Position = Update & {
 
 export type Moves = Record<string, Move>;
 
+export type MoveNames = Record<string, string>;
+
 export type Move = {
     deltaRemoteness: number;
     move: string;
@@ -111,7 +114,7 @@ export type Options = {
     showNextMoveHints: boolean;
     showNextMoves: boolean;
     showOptions: boolean;
-    showVvh: boolean;
+    showMenu: boolean;
     showVvhGuides: boolean;
     showVvhMeters: boolean;
 };
@@ -124,9 +127,11 @@ export type Match = {
     gameId: string;
     variantId: string;
     type: string;
+    startPosition: string;
     players: Array<string>;
     startingPlayerId: string;
     rounds: Rounds;
+    moveHistory: string;
     round: Round;
     created: number;
     lastPlayed: number;
diff --git a/src/scripts/plugins/store/index.ts b/src/scripts/plugins/store/index.ts
index b491eea0..5b331beb 100644
--- a/src/scripts/plugins/store/index.ts
+++ b/src/scripts/plugins/store/index.ts
@@ -15,6 +15,7 @@ type Getters = {
     currentAvailableMove(state: State): (move: string) => GMUTypes.Move;
     currentAvailableMoves(state: State): GMUTypes.Moves;
     currentGameId(state: State): string;
+    currentGameName(state: State): string;
     currentGameType(state: State): string;
     currentLeftPlayer(state: State): GMUTypes.User;
     currentMatch(state: State): GMUTypes.Match;
@@ -31,6 +32,7 @@ type Getters = {
     currentRound(state: State): (roundId?: number) => GMUTypes.Round;
     currentRoundId(state: State): number;
     currentRounds(state: State): GMUTypes.Rounds;
+    currentStartPosition(state: State): string;
     currentVariantId(state: State): string;
     dataSources(state: State): GMUTypes.DataSources;
     fallbackLocale(state: State): string;
@@ -40,6 +42,7 @@ type Getters = {
     isEndOfMatch(state: State): boolean;
     locale(state: State): string;
     maximumRemoteness(state: State): (from: number, to: number) => number;
+    moveHistory(state: State): string;
     onePlayerGameAPI(state: State): string;
     position(state: State): (gameType: string, gameId: string, variantId: string, position: string) => GMUTypes.Position;
     positions(state: State): (gameType: string, gameId: string, variantId: string) => GMUTypes.Positions;
@@ -65,6 +68,7 @@ const getters: Vuex.GetterTree<State, State> & Getters = {
     currentAvailableMove: (state: State) => (move: string) => state.app.currentMatch.round.position.availableMoves[move],
     currentAvailableMoves: (state: State) => state.app.currentMatch.round.position.availableMoves,
     currentGameId: (state: State) => state.app.currentMatch.gameId,
+    currentGameName: (state: State) => state.app.gameTypes[state.app.currentMatch.gameType].games[state.app.currentMatch.gameId].name,
     currentGameType: (state: State) => state.app.currentMatch.gameType,
     currentLeftPlayer: (state: State) => state.app.users[state.app.currentMatch.players[0]],
     currentMatch: (state: State) => state.app.currentMatch,
@@ -86,6 +90,7 @@ const getters: Vuex.GetterTree<State, State> & Getters = {
     currentRound: (state: State) => (roundId?: number) => roundId ? state.app.currentMatch.rounds[roundId] : state.app.currentMatch.round,
     currentRoundId: (state: State) => state.app.currentMatch.round.id,
     currentRounds: (state: State) => state.app.currentMatch.rounds,
+    currentStartPosition: (state: State) => state.app.currentMatch.startPosition,
     currentVariantId: (state: State) => state.app.currentMatch.variantId,
     dataSources: (state: State) => state.app.dataSources,
     fallbackLocale: (state: State) => state.app.preferences.fallbackLocale,
@@ -95,6 +100,7 @@ const getters: Vuex.GetterTree<State, State> & Getters = {
     isEndOfMatch: (state: State) => GMU.isEndOfMatch(state.app),
     locale: (state: State) => state.app.preferences.locale,
     maximumRemoteness: (state: State) => (from: number, to: number) => GMU.getMaximumRemoteness(state.app, { from, to }),
+    moveHistory: (state: State) => state.app.currentMatch.moveHistory,
     onePlayerGameAPI: (state: State) => state.app.dataSources.onePlayerGameAPI,
     position: (state: State) => (gameType: string, gameId: string, variantId: string, position: string) => state.app.gameTypes[gameType].games[gameId].variants.variants[variantId].positions[position],
     positions: (state: State) => (gameType: string, gameId: string, variantId: string) => state.app.gameTypes[gameType].games[gameId].variants.variants[variantId].positions,
@@ -182,14 +188,22 @@ export enum actionTypes {
     redoMove = "redoMove",
     undoMove = "undoMove",
     updateMatchType = "updateMatchType",
+    updateMatchStartPosition = "updateMatchStartPosition",
     preFetchNextPositions = "preFetchNextPositions",
     loadLatestCommits = "loadLatestCommits",
+    loadMoveHistory = "loadMoveHistory"
 }
 
 type Actions = {
     [actionTypes.loadGames](context: ActionContext, payload: { type: string }): Promise<void>;
     [actionTypes.loadVariants](context: ActionContext, payload: { type: string; gameId: string }): Promise<void>;
-    [actionTypes.initiateMatch](context: ActionContext, payload: { gameType: string; gameId: string; variantId: string; matchType?: string }): Promise<void>;
+    [actionTypes.initiateMatch](context: ActionContext, payload: {
+        gameType: string
+        gameId: string;
+        variantId: string;
+        matchType?: string;
+        startPosition?: string
+    }): Promise<void>;
     [actionTypes.exitMatch](context: ActionContext): void;
     [actionTypes.restartMatch](context: ActionContext, payload?: { matchType?: string }): Promise<void>;
     [actionTypes.runMove](context: ActionContext, payload: { move: string }): Promise<void>;
@@ -197,8 +211,10 @@ type Actions = {
     [actionTypes.redoMove](context: ActionContext, payload?: { count?: number }): Promise<void>;
     [actionTypes.undoMove](context: ActionContext, payload?: { count?: number }): Promise<void>;
     [actionTypes.updateMatchType](context: ActionContext, payload: { matchType: string; players: Array<string> }): void;
+    [actionTypes.updateMatchStartPosition](context: ActionContext, payload: { position: string }): Promise<void | Error>;
     [actionTypes.preFetchNextPositions](context: ActionContext): Promise<void>;
     [actionTypes.loadLatestCommits](context: ActionContext): Promise<void>;
+    [actionTypes.loadMoveHistory](context: ActionContext, payload: { history: string }): Promise<void | Error>;
 };
 
 const actions: Vuex.ActionTree<State, State> & Actions = {
@@ -210,22 +226,36 @@ const actions: Vuex.ActionTree<State, State> & Actions = {
         const updatedApp = await GMU.loadVariants(context.state.app, { gameType: payload.type, gameId: payload.gameId });
         if (updatedApp) context.commit(mutationTypes.setApp, updatedApp);
     },
-    initiateMatch: async (context: ActionContext, payload: { gameType: string; gameId: string; variantId: string; matchType?: string }) => {
+    initiateMatch: async (context: ActionContext, payload: {
+        gameType: string;
+        gameId: string;
+        variantId: string;
+        matchType?: string;
+        startPosition?: string
+    }) => {
         const updatedApp = await GMU.initiateMatch(context.state.app, payload);
         if (updatedApp) {
             context.commit(mutationTypes.setApp, updatedApp);
             context.dispatch(actionTypes.preFetchNextPositions);
         }
-        store.dispatch(actionTypes.runComputerMove);
+        await store.dispatch(actionTypes.runComputerMove);
     },
     exitMatch: (context: ActionContext) => context.commit(mutationTypes.setApp, GMU.exitMatch(context.state.app)),
     restartMatch: async (context: ActionContext, payload?: { matchType?: string }) => {
+        const currentGameType = context.getters.currentGameType;
+        const currentGameId = context.getters.currentGameId;
+        const currentVariantId = context.getters.currentVariantId;
+        const currentMatchType = context.getters.currentMatchType;
+        const currentStartPosition = context.getters.currentStartPosition;
+
         context.dispatch(actionTypes.exitMatch);
-        if (payload && payload.matchType !== undefined) {
-            context.dispatch(actionTypes.initiateMatch, { gameType: context.getters.currentGameType, gameId: context.getters.currentGameId, variantId: context.getters.currentVariantId, matchType: payload.matchType });
-        } else {
-            context.dispatch(actionTypes.initiateMatch, { gameType: context.getters.currentGameType, gameId: context.getters.currentGameId, variantId: context.getters.currentVariantId, matchType: context.getters.currentMatchType });
-        }
+        await context.dispatch(actionTypes.initiateMatch, {
+            gameType: currentGameType,
+            gameId: currentGameId,
+            variantId: currentVariantId,
+            matchType: (payload && payload.matchType) ? payload.matchType : currentMatchType,
+            startPosition: currentStartPosition
+        });
     },
     runMove: async (context: ActionContext, payload: { move: string }) => {
         const updatedApp = await GMU.runMove(context.state.app, payload);
@@ -233,7 +263,7 @@ const actions: Vuex.ActionTree<State, State> & Actions = {
             context.commit(mutationTypes.setApp, updatedApp);
             context.dispatch(actionTypes.preFetchNextPositions);
         }
-        store.dispatch(actionTypes.runComputerMove);
+        await store.dispatch(actionTypes.runComputerMove);
     },
     runComputerMove: async (context: ActionContext) => {
         while (context.getters.currentPlayer.id[0] === "c" && !GMU.isEndOfMatch(context.state.app)) {
@@ -246,23 +276,42 @@ const actions: Vuex.ActionTree<State, State> & Actions = {
         }
     },
     redoMove: async (context: ActionContext, payload?: { count?: number }) => {
-        context.commit(mutationTypes.setApp, await GMU.redoMove(context.state.app, payload));
-        if (!context.state.app.currentMatch.rounds[context.state.app.currentMatch.round.id + 1]) context.dispatch(actionTypes.preFetchNextPositions);
-        store.dispatch(actionTypes.runComputerMove);
+        context.commit(mutationTypes.setApp, GMU.redoMove(context.state.app, payload));
+        if (!context.state.app.currentMatch.rounds[context.state.app.currentMatch.round.id + 1]) {
+            context.dispatch(actionTypes.preFetchNextPositions);
+        }
+        await store.dispatch(actionTypes.runComputerMove);
     },
     undoMove: async (context: ActionContext, payload?: { count?: number }) => {
-        context.commit(mutationTypes.setApp, await GMU.undoMove(context.state.app, payload));
-        store.dispatch(actionTypes.runComputerMove);
+        context.commit(mutationTypes.setApp, GMU.undoMove(context.state.app, payload));
+        await store.dispatch(actionTypes.runComputerMove);
     },
     updateMatchType: (context: ActionContext, payload: { matchType: string; players: Array<string> }) => {
         const updatedApp = GMU.updateMatchType(context.state.app, payload);
         context.commit(mutationTypes.setApp, updatedApp);
     },
+    updateMatchStartPosition: async (context: ActionContext, payload: { position: string }) => {
+        const updatedAppOrError = await GMU.updateMatchStartPosition(context.state.app, payload);
+        if (updatedAppOrError instanceof Error) {
+            return updatedAppOrError;
+        } else {
+            context.commit(mutationTypes.setApp, updatedAppOrError);
+            await context.dispatch(actionTypes.restartMatch, { matchType: "pvp" });
+        }
+    },
     preFetchNextPositions: async (context: ActionContext) => context.commit(mutationTypes.setApp, await GMU.preFetchNextPositions(context.state.app, { gameType: context.state.app.currentMatch.gameType, gameId: context.state.app.currentMatch.gameId, variantId: context.state.app.currentMatch.variantId, position: context.state.app.currentMatch.round.position.position })),
     loadLatestCommits: async (context: ActionContext) => {
         const updatedApp = await GMU.loadCommits(context.state.app);
         if (updatedApp) context.commit(mutationTypes.setApp, updatedApp);
     },
+    loadMoveHistory: async (context: ActionContext, payload: { history: string }) => {
+        const updatedAppOrError = await GMU.loadMoveHistory(context.state.app, payload);
+        if (updatedAppOrError instanceof Error) {
+            return updatedAppOrError;
+        } else {
+            context.commit(mutationTypes.setApp, updatedAppOrError);
+        }
+    }
 };
 
 type Store = Omit<Vuex.Store<State>, "getters" | "commit" | "dispatch"> & {
diff --git a/tsconfig.json b/tsconfig.json
index 720affaa..933cd783 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "allowJs": true,
         "declaration": true,
         "emitDecoratorMetadata": true,
         "esModuleInterop": true,