✨ (viewer) Replay controls in local mode

Author: coyotte508

viewer/src/components/Wrapper.vue

@@ -4,42 +4,78 @@
     <b-modal v-model="modalShow" size="lg" @ok="handleOK" title="Load from JSON">
       <b-textarea v-model="text" rows="6" />
     </b-modal>
-    <b-avatar
-      button
-      style="position: fixed; left: 20px; bottom: 20px; z-index: 100"
-      size="50"
-      @click="modalShow = true"
-    >
-      LOAD
-    </b-avatar>
-    <b-avatar button style="position: fixed; left: 80px; bottom: 20px; z-index: 100" size="50" @click="openExport">
-      EXPORT
-    </b-avatar>
+    <div class="d-flex">
+      <b-button-group>
+        <b-button @click="modalShow = true">Load</b-button>
+        <b-button @click="openExport">Export</b-button>
+      </b-button-group>
+      <div class="mt-75">
+        <b-btn variant="info" size="sm" @click="startReplay" v-if="!replayData">Replay</b-btn>
+        <div v-else class="d-flex align-items-center">
+          <b-btn size="sm" class="mr-1" @click="replayTo(replayData.start)">⏮️</b-btn>
+          <b-btn size="sm" class="mx-1" @click="replayTo(Math.max(replayData.start, replayData.current - 1))">
+            ⏪
+          </b-btn>
+          <span
+            class="mx-1 text-center"
+            style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; flex-grow: 1"
+          >
+            {{ replayData.current }} / {{ replayData.end }}
+          </span>
+          <b-btn size="sm" class="mx-1" @click="replayTo(Math.min(replayData.end, replayData.current + 1))"> ⏩ </b-btn>
+          <b-btn size="sm" class="mx-1" @click="replayTo(replayData.end)">⏭️</b-btn>
+          <b-btn size="sm" class="ml-1" @click="endReplay">⏹️</b-btn>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts">
-import { Vue, Prop, Watch, Component } from "vue-property-decorator";
+import { Vue, Component } from "vue-property-decorator";
 import Game from "./Game.vue";
 
 @Component({
-  components: { Game }
+  components: { Game },
 })
 export default class Wrapper extends Vue {
   modalShow = false;
   text = "";
+  replayData: { stard: number; end: number; current: number } | null = null;
 
-  handleOK () {
+  handleOK() {
     this.$store.dispatch("gaiaViewer/loadFromJSON", JSON.parse(this.text));
   }
 
-  openExport () {
+  openExport() {
     this.text = JSON.stringify(this.$store.state.gaiaViewer.data);
     this.modalShow = true;
   }
+
+  startReplay() {
+    this.$store.dispatch("gaiaViewer/replayStart");
+  }
+
+  replayTo(dest: number) {
+    this.$store.dispatch("gaiaViewer/replayTo", dest);
+  }
+
+  endReplay() {
+    this.$store.dispatch("gaiaViewer/replayEnd");
+    this.replayData = null;
+  }
+
+  mounted() {
+    const unsub = this.$store.subscribeAction(({ type, payload }) => {
+      if (type === "gaiaViewer/replayInfo") {
+        this.replayData = payload;
+      }
+    });
+    this.$on("hook:beforeDestroy", unsub);
+  }
 }
 </script>
-<style lang="scss">
-.b-avatar-custom {
-  display: contents !important;
+<style lang="scss" scoped>
+.btn-group {
+  margin: 0.3rem;
 }
 </style>