equipment visualizer

This commit is contained in:
Alberto Xamin 2020-11-21 15:41:18 +01:00
parent ac895afb29
commit 3b9e16f1c1
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2

View File

@ -2,12 +2,15 @@
<div> <div>
<h1>Lobby: {{ lobbyName }}</h1> <h1>Lobby: {{ lobbyName }}</h1>
<h3>Giocatori (tu sei {{username}})</h3> <h3>Giocatori (tu sei {{username}})</h3>
<div style="display:flex"> <div class="players-table">
<Card v-if="startGameCard" :card="startGameCard" @click.native="startGame"/> <Card v-if="startGameCard" :card="startGameCard" @click.native="startGame"/>
<!-- <div style="position: relative;width:260pt;height:400pt;"> --> <!-- <div style="position: relative;width:260pt;height:400pt;"> -->
<div v-for="p in playersTable" v-bind:key="p.card.name" style="position:relative;"> <div v-for="p in playersTable" v-bind:key="p.card.name" style="position:relative;">
<Card :card="p.card" :class="{is_my_turn:p.is_my_turn}"/> <Card :card="p.card" :class="{is_my_turn:p.is_my_turn}"/>
<tiny-hand :ncards="p.ncards"/> <tiny-hand :ncards="p.ncards"/>
<div class="tiny-equipment">
<Card v-for="card in p.equipment" v-bind:key="card.name+card.number" :card="card" />
</div>
</div> </div>
<!-- :style="p.style"/> --> <!-- :style="p.style"/> -->
<!-- </div> --> <!-- </div> -->
@ -153,4 +156,21 @@ export default {
transform: scale(1); transform: scale(1);
} }
} }
.tiny-equipment {
position: absolute;
display: flex;
flex-direction: column;
right: -35pt;
transform: scale(0.45);
transform-origin: 50% 0%;
top: 0;
}
.tiny-equipment .card:nth-child(n+2) {
margin-top: -60pt;
}
.players-table {
display: flex;
justify-content: space-evenly;
margin-bottom: 12pt;
}
</style> </style>