From 62591e0e7a1c81fd28aec2602bb26620d863f279 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 3 Nov 2020 19:54:35 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=AA=E3=83=90=E3=83=BC=E3=82=B7=E3=81=AE?=
=?UTF-8?q?=E3=83=AA=E3=83=97=E3=83=AC=E3=82=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Related #1240
---
src/client/pages/reversi/game.board.vue | 54 +++++++++++++++++++++----
1 file changed, 46 insertions(+), 8 deletions(-)
diff --git a/src/client/pages/reversi/game.board.vue b/src/client/pages/reversi/game.board.vue
index ff530b1b1..002a99a0b 100644
--- a/src/client/pages/reversi/game.board.vue
+++ b/src/client/pages/reversi/game.board.vue
@@ -62,12 +62,13 @@
<div class="player" v-if="game.isEnded">
<span>{{ logPos }} / {{ logs.length }}</span>
- <!-- TODO <ui-horizon-group> -->
- <MkButton @click="logPos = 0" :disabled="logPos == 0"><fa :icon="faAngleDoubleLeft"/></MkButton>
- <MkButton @click="logPos--" :disabled="logPos == 0"><fa :icon="faAngleLeft"/></MkButton>
- <MkButton @click="logPos++" :disabled="logPos == logs.length"><fa :icon="faAngleRight"/></MkButton>
- <MkButton @click="logPos = logs.length" :disabled="logPos == logs.length"><fa :icon="faAngleDoubleRight"/></MkButton>
- <!-- TODO </ui-horizon-group> -->
+ <div class="buttons" v-if="!autoplaying">
+ <MkButton inline @click="logPos = 0" :disabled="logPos == 0"><fa :icon="faAngleDoubleLeft"/></MkButton>
+ <MkButton inline @click="logPos--" :disabled="logPos == 0"><fa :icon="faAngleLeft"/></MkButton>
+ <MkButton inline @click="logPos++" :disabled="logPos == logs.length"><fa :icon="faAngleRight"/></MkButton>
+ <MkButton inline @click="logPos = logs.length" :disabled="logPos == logs.length"><fa :icon="faAngleDoubleRight"/></MkButton>
+ </div>
+ <MkButton @click="autoplay()" :disabled="autoplaying" style="margin: var(--margin) auto 0 auto;"><fa :icon="faPlay"/></MkButton>
</div>
<div class="info">
@@ -80,7 +81,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
-import { faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
+import { faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight, faPlay } from '@fortawesome/free-solid-svg-icons';
import { faCircle as fasCircle } from '@fortawesome/free-solid-svg-icons';
import { faCircle as farCircle } from '@fortawesome/free-regular-svg-icons';
import * as CRC32 from 'crc-32';
@@ -113,7 +114,7 @@ export default defineComponent({
logs: [],
logPos: 0,
pollingClock: null,
- faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight, fasCircle, farCircle
+ faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight, fasCircle, farCircle, faPlay
};
},
@@ -313,6 +314,35 @@ export default defineComponent({
gameId: this.game.id
});
},
+
+ autoplay() {
+ this.autoplaying = true;
+ this.logPos = 0;
+
+ setTimeout(() => {
+ this.logPos = 1;
+
+ let i = 1;
+ let previousLog = this.game.logs[0];
+ const tick = () => {
+ const log = this.game.logs[i];
+ const time = new Date(log.at).getTime() - new Date(previousLog.at).getTime()
+ setTimeout(() => {
+ i++;
+ this.logPos++;
+ previousLog = log;
+
+ if (i < this.game.logs.length) {
+ tick();
+ } else {
+ this.autoplaying = false;
+ }
+ }, time);
+ };
+
+ tick();
+ }, 1000);
+ }
}
});
</script>
@@ -467,6 +497,14 @@ export default defineComponent({
margin: 0 8px;
min-width: 70px;
}
+
+ > .buttons {
+ display: flex;
+
+ > * {
+ flex: 1;
+ }
+ }
}
}
</style>