techwire/bang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bullet holes in card borders and less tidy equipments

Browse Source
This commit is contained in:
Alberto Xamin 2023-02-02 12:41:58 +00:00
parent cc936fb3b9
commit 17a3568ba5
3 changed files with 36 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/Card.vue
View File

@ -89,6 +89,19 @@ export default {
#816b45 10px
);
}
.card:not(.back,.fistful-of-cards,.high-noon,.gold-rush):before{
content: "";
background-image: radial-gradient(var(--bg-color) 13%, #0000 5%),
radial-gradient(var(--bg-color) 14%, transparent 5%),
radial-gradient(var(--bg-color) 8%, transparent 5%);
background-position: -12px 0, 12px 14px, 0 -12pt;
background-size: 50px 50px;
position: absolute;
top: -10px;
left: -10px;
bottom: -4px;
right: -4px;
}
.card.equipment {
box-shadow:
0 0 0 3pt #5c5e83,

10
frontend/src/components/Lobby.vue
View File

@ -61,7 +61,7 @@
<div class="tiny-equipment">
<Card v-for="(card, i) in p.equipment" v-bind:key="card.name+card.number"
:card="card" @click.native="selectedInfo = p.equipment"
:style="`margin-top: ${i<1?10:-(Math.min((p.equipment.length+p.gold_rush_equipment.length+1)*12,80))}pt`"/>
:style="`margin-top: ${i < 1 ? 10 : -(Math.min((p.equipment.length + p.gold_rush_equipment.length + 1) * 12, 80))}pt;`"/>
<Card v-for="(card, i) in p.gold_rush_equipment" v-bind:key="card.name+card.number"
:card="card" @click.native="selectedInfo = p.gold_rush_equipment"
:style="`margin-top: ${i+p.equipment.length<1?10:-(Math.min((p.equipment.length+p.gold_rush_equipment.length+1)*12,80))}pt`"/>
@ -531,8 +531,14 @@ export default {
transform: scale(0.8);
margin-bottom: -4pt;
}
.tiny-equipment .card {
transform: rotate(2deg);
}
.tiny-equipment .card:nth-child(odd) {
transform: rotate(-2deg);
}
.tiny-equipment .card:hover {
transform: translateY(10px) scale(1.1);
transform: translateY(10px) scale(1.2);
z-index: 1;
}
.tiny-character {

20
frontend/src/components/Player.vue
View File

@ -3,13 +3,13 @@
<p v-if="instruction && (lives > 0 || is_ghost)" class="center-stuff">{{instruction}}</p>
<!-- <button v-if="canEndTurn" @click="end_turn">Termina Turno</button> -->
<div class="equipment-slot">
<Card v-if="my_role" :card="my_role" class="back"
<Card v-if="my_role" :card="my_role" class="back" style="transform:rotate(-2deg)"
@pointerenter.native="desc=($i18n.locale=='it'?my_role.goal:my_role.goal_eng)" @pointerleave.native="desc=''"/>
<Card v-if="character" :card="character" style="margin-left: -30pt;margin-right: 0pt;"
@pointerenter.native="setDesc(character)" @pointerleave.native="desc=''"/>
<transition-group name="list" tag="div" style="display: flex;flex-direction:column; justify-content: space-evenly; margin-left: 12pt;margin-right:-10pt;">
<span v-for="(n, i) in lives" v-bind:key="i" :alt="i">❤️</span>
<span v-for="(n, i) in (max_lives-lives)" v-bind:key="`${i}-sk`" :alt="i">💀</span>
<span v-for="(n, i) in lives" v-bind:key="i" :alt="i">❤️</span>
</transition-group>
<div v-if="gold_nuggets > 0" style="display: flex;align-items: center;margin-left: 12pt;margin-right: -10pt;justify-content: space-evenly;width: 25pt;">
<transition name="list">
@ -17,7 +17,7 @@
</transition>
<span>💵️</span>
</div>
<transition-group v-if="lives > 0 || is_ghost" name="list" tag="div" style="margin: 0 0 0 10pt; display:flex;">
<transition-group v-if="lives > 0 || is_ghost" name="list" id="equipment" tag="div" style="margin: 0 0 0 10pt; display:flex;">
<Card v-for="card in equipmentComputed" v-bind:key="card.name+card.number" :card="card"
@pointerenter.native="setDesc(card)" @pointerleave.native="desc=''"
@click.native="play_card(card, true)" :class="{'cant-play':((eventCard && eventCard.name == 'Lazo') || (!card.can_be_used_now && !card.is_equipment))}"/>
@ -514,8 +514,12 @@ export default {
margin-left: -30pt;
}
.hand>.card:hover {
margin-right:35pt;
transform: translateY(-15px);
transform: translateY(-15px) translateX(-15px) rotate(-2deg);
z-index: 1;
}
.hand>.card:nth-child(1):hover, .hand>.card:last-child:hover {
transform: translateY(-15px) translateX(0) rotate(2deg);
z-index: 1;
}
#hand_text{
color: var(--muted-color);
@ -531,6 +535,12 @@ export default {
margin: 10pt 0pt;
overflow:auto;
}
#equipment .card:nth-child(even) {
transform: rotate(1deg);
}
#equipment .card:nth-child(odd) {
transform: rotate(-1deg);
}
.hurt-notify {
pointer-events: none;
animation: disappear 0.5s ease-in forwards;