martyn/townsquare
1
0
Fork 0
mirror of https://github.com/bra1n/townsquare.git synced 2025-10-21 16:55:12 +00:00
Code Issues Projects Releases Packages Wiki Activity

fixed animations

Browse source
This commit is contained in:
Steffen 2020-04-10 11:21:27 +02:00
parent 58802ffb5b
commit 59ec2e8467
No known key found for this signature in database
GPG key ID: 764D74E98267DFC6
4 changed files with 57 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.vue
View file

@ -49,7 +49,7 @@ export default {
isControlOpen: false, isControlOpen: false,
players: [], players: [],
roles, roles,
set: "BMR" set: "TB"
}), }),
methods: { methods: {
togglePublic() { togglePublic() {

45
src/components/Player.vue
View file

@ -102,6 +102,18 @@ export default {
padding-top: $token + 6px; padding-top: $token + 6px;
.shroud { .shroud {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 2/3 * $token;
cursor: pointer;
transform: rotateX(0deg);
transform-origin: top center;
transition: transform 200ms ease-in-out;
z-index: 2;
&:before {
content: " "; content: " ";
background: url("../assets/shroud.png") center -10px no-repeat; background: url("../assets/shroud.png") center -10px no-repeat;
background-size: auto 100%; background-size: auto 100%;
@ -111,20 +123,21 @@ export default {
height: 2/3 * $token; height: 2/3 * $token;
left: 50%; left: 50%;
top: -30px; top: -30px;
cursor: pointer;
opacity: 0; opacity: 0;
transform: perspective(400px) scale(1.5); transform: perspective(400px) scale(1.5);
transform-origin: top center; transform-origin: top center;
transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
z-index: 2; pointer-events: none;
&:hover { }
&:hover:before {
opacity: 0.5; opacity: 0.5;
top: -10px; top: -10px;
transform: scale(1); transform: scale(1);
} }
} }
&.dead .shroud { &.dead .shroud:before {
opacity: 1; opacity: 1;
top: 0; top: 0;
transform: perspective(400px) scale(1); transform: perspective(400px) scale(1);
@ -135,7 +148,8 @@ export default {
} }
/****** Life token *******/ /****** Life token *******/
.player .life { .player {
.life {
border-radius: 50%; border-radius: 50%;
height: $token + 6px; height: $token + 6px;
width: $token + 6px; width: $token + 6px;
@ -151,16 +165,6 @@ export default {
left: 50%; left: 50%;
top: 0; top: 0;
margin-left: ($token + 6) / -2; margin-left: ($token + 6) / -2;
}
#townsquare.public .player {
.shroud {
transform: perspective(400px) rotateX(90deg);
pointer-events: none;
}
.life {
transform: perspective(400px) rotateY(0deg);
} }
&.dead { &.dead {
@ -190,6 +194,17 @@ export default {
} }
} }
#townsquare.public .player {
.shroud {
transform: perspective(400px) rotateX(90deg);
pointer-events: none;
}
.life {
transform: perspective(400px) rotateY(0deg);
}
}
/***** Role token ******/ /***** Role token ******/
.circle .token { .circle .token {
border-radius: 50%; border-radius: 50%;

2
src/components/TownInfo.vue
View file

@ -84,7 +84,7 @@ export default {
height: 20%; height: 20%;
margin-left: -10%; margin-left: -10%;
margin-top: -5%; margin-top: -5%;
padding: 100px 0 0; padding: 50px 0 0;
align-items: center; align-items: center;
align-content: center; align-content: center;
justify-content: center; justify-content: center;

5
src/components/TownSquare.vue
View file

@ -188,8 +188,9 @@ export default {
transform: rotate($rot * -1deg); transform: rotate($rot * -1deg);
} }
.life, .life,
.token { .token,
transition-delay: $i * 50ms; .shroud {
transition-delay: ($i - 1) * 50ms;
} }
} }
$rot: $rot + $angle; $rot: $rot + $angle;