@@ -129,6 +132,9 @@ export default {
is_competitive: false,
disconnect_bot: false,
debug_mode: false,
+ showTurnFlow: false,
+ turnReversed: false,
+ turn: -1,
}),
sockets: {
room(data) {
@@ -347,7 +353,18 @@ export default {
privateRoom(old, _new) {
if (this.isRoomOwner && old !== _new)
this.$socket.emit('private')
- }
+ },
+ players(_, _new) {
+ let x = _new.findIndex(x => x.is_my_turn);
+ if (x !== -1 && x !== this.turn) {
+ this.turnReversed = (x+1 === this.turn)
+ this.showTurnFlow = true;
+ setTimeout(() => {
+ this.showTurnFlow = false
+ }, 1000);
+ this.turn = x;
+ }
+ },
},
mounted() {
if (Vue.config.devtools)
@@ -409,6 +426,39 @@ export default {
justify-content: space-evenly;
margin-bottom: 12pt;
}
+#turn-indicator{
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-image: linear-gradient(135deg, #cbcbcb33 25%, transparent 25%), linear-gradient(45deg, #cbcbcb33 25%, transparent 25%);
+ background-size: 80px 200px;
+ background-position: 0 100px;
+ background-position-x: 0;
+ opacity: 0;
+ background-repeat: repeat;
+ animation-name: next-turn-animation;
+ animation-duration: 1s;
+ animation-iteration-count: 3;
+ animation-timing-function: linear;
+}
+#turn-indicator.reversed {
+ background-image: linear-gradient(225deg, #cbcbcb33 25%, transparent 25%), linear-gradient(315deg, #cbcbcb33 25%, transparent 25%);
+}
+
+@keyframes next-turn-animation {
+ 0% {
+background-position-x: 0;
+opacity: 1;
+ }
+ 50% {
+background-position-x: 80px;
+ }
+ 100% {
+ opacity: 0;
+ background-position-x: 160px;
+ }
+
+}
.lobby {
display: flex;
flex-direction: column;