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

show hint for scrapped card

Browse Source
This commit is contained in:
Alberto Xamin 2020-11-28 11:41:11 +01:00
parent 7444fba0d3
commit 1370efc98a
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
2 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/Deck.vue
View File

@ -1,16 +1,22 @@
<template> <template>
<div class="deck"> <div>
<card v-if="endTurnAction && isPlaying" v-show="pending_action == 2" :card="endTurnCard" class="end-turn" @click.native="endTurnAction"/> <div class="deck">
<div style="position:relative"> <card v-if="endTurnAction && isPlaying" v-show="pending_action == 2" :card="endTurnCard" class="end-turn" @click.native="endTurnAction"/>
<div class="card back" style="position:absolute; bottom:-3pt;right:-3pt;"/> <div style="position:relative">
<div class="card back" style="position:absolute; bottom:-1.5pt;right:-1.5pt;"/> <div class="card back" style="position:absolute; bottom:-3pt;right:-3pt;"/>
<card :card="card" :class="{back:true, pick:pending_action === 0, draw:pending_action === 1}" @click.native="action"/> <div class="card back" style="position:absolute; bottom:-1.5pt;right:-1.5pt;"/>
</div> <card :card="card" :class="{back:true, pick:pending_action === 0, draw:pending_action === 1}" @click.native="action"/>
<div style="position:relative;"> </div>
<card v-if="previousScrap" :card="previousScrap"/> <div style="position:relative;">
<card v-else :card="card" class="back" style="opacity:0"/> <card v-if="previousScrap" :card="previousScrap"/>
<card v-if="lastScrap" :card="lastScrap" :key="lastScrap" class="last-scrap" @click.native="action('scrap')"/> <card v-else :card="card" class="back" style="opacity:0"/>
<card v-if="lastScrap" :card="lastScrap" :key="lastScrap" class="last-scrap" @click.native="action('scrap')"
@pointerenter.native="desc=lastScrap.desc" @pointerleave.native="desc=''" />
</div>
</div> </div>
<transition name="list">
<p v-if="desc" class="center-stuff"><i>{{desc}}</i></p>
</transition>
</div> </div>
</template> </template>
@ -35,6 +41,7 @@ export default {
previousScrap: null, previousScrap: null,
pending_action: false, pending_action: false,
isPlaying: true, isPlaying: true,
desc: '',
}), }),
sockets: { sockets: {
self(self){ self(self){

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

@ -7,15 +7,17 @@
@pointerenter.native="desc=my_role.goal" @pointerleave.native="desc=''"/> @pointerenter.native="desc=my_role.goal" @pointerleave.native="desc=''"/>
<Card v-if="character" :card="character" style="margin-left: -30pt;margin-right: 0pt;" <Card v-if="character" :card="character" style="margin-left: -30pt;margin-right: 0pt;"
@pointerenter.native="desc=character.desc" @pointerleave.native="desc=''"/> @pointerenter.native="desc=character.desc" @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="n" :alt="i">❤️</span>
<span v-for="(n, i) in (max_lives-lives)" v-bind:key="n" :alt="i">💀</span>
</transition-group>
<transition-group v-if="lives > 0" name="list" tag="div" style="margin: 0 0 0 10pt; display:flex;"> <transition-group v-if="lives > 0" name="list" tag="div" style="margin: 0 0 0 10pt; display:flex;">
<Card v-for="card in equipment" v-bind:key="card.name+card.number" :card="card" @pointerenter.native="desc=card.desc" @pointerleave.native="desc=''" /> <Card v-for="card in equipment" v-bind:key="card.name+card.number" :card="card" @pointerenter.native="desc=card.desc" @pointerleave.native="desc=''" />
</transition-group> </transition-group>
</div> </div>
<p v-if="desc">{{desc}}</p> <transition name="list">
<transition-group name="list" tag="div" style="display: flex; justify-content: space-evenly; margin-bottom:2pt;"> <p v-if="desc"><i>{{desc}}</i></p>
<span v-for="(n, i) in lives" v-bind:key="n" :alt="i">❤️</span> </transition>
<span v-for="(n, i) in (max_lives-lives)" v-bind:key="n" :alt="i">💀</span>
</transition-group>
<div v-if="lives > 0"> <div v-if="lives > 0">
<span>{{$t('hand')}}</span> <span>{{$t('hand')}}</span>
<transition-group name="list" tag="div" class="hand"> <transition-group name="list" tag="div" class="hand">
@ -24,7 +26,9 @@
@pointerenter.native="hint=card.desc" @pointerleave.native="hint=''"/> @pointerenter.native="hint=card.desc" @pointerleave.native="hint=''"/>
</transition-group> </transition-group>
</div> </div>
<p>{{hint}}</p> <transition name="list">
<p v-if="hint"><i>{{hint}}</i></p>
</transition>
<Chooser v-if="card_against" :text="$t('card_against')" :cards="visiblePlayers" :select="selectAgainst" :cancel="cancelCardAgainst"/> <Chooser v-if="card_against" :text="$t('card_against')" :cards="visiblePlayers" :select="selectAgainst" :cancel="cancelCardAgainst"/>
<Chooser v-if="pending_action == 3" :text="respondText" :cards="respondCards" :select="respond"/> <Chooser v-if="pending_action == 3" :text="respondText" :cards="respondCards" :select="respond"/>
<Chooser v-if="shouldChooseCard" :text="$t('choose_card_to_get')" :cards="available_cards" :select="choose"/> <Chooser v-if="shouldChooseCard" :text="$t('choose_card_to_get')" :cards="available_cards" :select="choose"/>