replace checkbox for expansions
This commit is contained in:
Alberto Xamin
parent
c269c950e7
commit
bb7f1a7157
@ -137,6 +137,53 @@ export default {
|
||||
);
|
||||
border: 2pt solid rgb(50 122 172);
|
||||
}
|
||||
.card.back.high-noon{
|
||||
color:var(--bg-color);
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
rgb(198 78 45),
|
||||
rgb(198 78 45) 5px,
|
||||
rgb(178 58 25) 5px,
|
||||
rgb(178 58 25) 10px
|
||||
);
|
||||
border: 2pt solid rgb(198 78 45);
|
||||
}
|
||||
.card.back.the-valley-of-shadows{
|
||||
color:var(--bg-color);
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
rgb(98 88 85),
|
||||
rgb(98 88 85) 5px,
|
||||
rgb(78 68 65) 5px,
|
||||
rgb(78 68 65) 10px
|
||||
);
|
||||
box-shadow:
|
||||
0 0 0 3pt rgb(98 88 85),
|
||||
0 0 0 6pt var(--bg-color),
|
||||
0 0 5pt 6pt #aaa;
|
||||
}
|
||||
.card.back.cant-play {
|
||||
transform: scale(0.9);
|
||||
filter: grayscale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.card.back.cant-play:hover {
|
||||
transform: scale(0.95);
|
||||
filter: grayscale(0.6);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.beta::after {
|
||||
content: "Beta";
|
||||
position: absolute;
|
||||
bottom: -12pt;
|
||||
right: -12pt;
|
||||
background: red;
|
||||
font-size: 10pt;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-weight: bold;
|
||||
padding: 4pt;
|
||||
border-radius: 12pt;
|
||||
}
|
||||
.avatar {
|
||||
position: absolute;
|
||||
width: 36pt;
|
||||
@ -166,6 +213,9 @@ export default {
|
||||
top: -10pt;
|
||||
font-size: 11pt;
|
||||
}
|
||||
.card.back h4{
|
||||
font-size: 12pt;
|
||||
}
|
||||
.card .emoji {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
@ -180,7 +230,7 @@ export default {
|
||||
.card.must-be-used {
|
||||
filter: drop-shadow(0 0 5px red);
|
||||
}
|
||||
.fistful-of-cards .emoji, .high-noon .emoji{
|
||||
.fistful-of-cards .emoji, .high-noon .emoji, .exp-pack .emoji{
|
||||
top:auto !important;
|
||||
bottom:15% !important;
|
||||
}
|
||||
|
||||
@ -60,12 +60,10 @@
|
||||
<p v-if="players.length < 3" class="center-stuff" style="min-height: 19px;">{{$t('minimum_players')}}</p>
|
||||
<p v-else style="min-height: 19px;"> </p>
|
||||
<h3>{{$t("expansions")}}</h3>
|
||||
<div v-for="ex in expansionsStatus" v-bind:key="ex.id">
|
||||
<PrettyCheck @click.native="toggleExpansions(ex.id)" :disabled="!isRoomOwner" :checked="ex.enabled" class="p-switch p-fill" style="margin-top:5px; margin-bottom:3px;">{{ex.name}} {{ex.emoji}}
|
||||
<p v-if="ex.is_beta" style="padding: 0px 10px;color: red;border-radius: 12pt;position: absolute;right: -50pt;top: -12pt;">BETA</p>
|
||||
</PrettyCheck>
|
||||
<br>
|
||||
<div class="players-table" style="justify-content: flex-start;">
|
||||
<card v-for="ex in expansionsStatus" v-bind:key="ex.id" :card="ex.card" :class="{'cant-play':!ex.enabled, 'beta':ex.is_beta, ...ex.card.classes}" :donotlocalize="true" @click.native="toggleExpansions(ex.id)"/>
|
||||
</div>
|
||||
<p v-if="isRoomOwner">{{$t('click_to_toggle')}}</p>
|
||||
<h3>{{$t('mods')}}</h3>
|
||||
<PrettyCheck @click.native="toggleCompetitive" :disabled="!isRoomOwner" v-model="is_competitive" class="p-switch p-fill" style="margin-top:5px; margin-bottom:3px;">{{$t('mod_comp')}}</PrettyCheck>
|
||||
<h3>{{$t('bots')}}</h3>
|
||||
@ -114,6 +112,7 @@ import Status from './Status.vue'
|
||||
import DeadRoleNotification from './DeadRoleNotification.vue'
|
||||
import AnimatedCard from './AnimatedCard.vue'
|
||||
import { emojiMap } from '@/utils/emoji-map.js'
|
||||
import { expansionsMap } from '@/utils/expansions-map.js'
|
||||
|
||||
const cumulativeOffset = function(element) {
|
||||
var top = 0, left = 0;
|
||||
@ -141,7 +140,8 @@ export default {
|
||||
FullScreenInput,
|
||||
Status,
|
||||
DeadRoleNotification,
|
||||
AnimatedCard
|
||||
AnimatedCard,
|
||||
Card
|
||||
},
|
||||
data: () => ({
|
||||
username: '',
|
||||
@ -316,6 +316,7 @@ export default {
|
||||
is_beta: this.beta_expansions.indexOf(x) !== -1,
|
||||
enabled: this.expansions.indexOf(x) !== -1,
|
||||
emoji: emojiMap[x],
|
||||
card: this.getExpansionCard(x),
|
||||
}
|
||||
})
|
||||
},
|
||||
@ -368,6 +369,15 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getExpansionCard(id) {
|
||||
let ex = expansionsMap[id]
|
||||
ex.classes = {
|
||||
back: true,
|
||||
'exp-pack': true
|
||||
}
|
||||
ex.classes[ex.expansion] = true
|
||||
return ex
|
||||
},
|
||||
is_toggled_expansion(ex) {
|
||||
if (Vue.config.devtools)
|
||||
console.log(ex+' '+ this.expansions+ (this.expansions.indexOf(ex) !== -1))
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
"end_turn": "Konec tahu!",
|
||||
"start_game": "Začít!",
|
||||
"expansions": "Rozšíření",
|
||||
"click_to_toggle": "Klikněte pro přepnutí",
|
||||
"details": "Podrobnosti",
|
||||
"ok": "OK",
|
||||
"you": "TY",
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
"end_turn": "End Turn!",
|
||||
"start_game": "Start!",
|
||||
"expansions": "Expansions",
|
||||
"click_to_toggle": "Click to toggle",
|
||||
"details": "Details",
|
||||
"ok": "OK",
|
||||
"you": "YOU",
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
"end_turn": "Termina turno!",
|
||||
"start_game": "Avvia!",
|
||||
"expansions": "Espansioni",
|
||||
"click_to_toggle": "Clicca per attivare/disattivare",
|
||||
"details": "Dettagli",
|
||||
"ok": "OK",
|
||||
"you": "TU",
|
||||
|
||||
32
frontend/src/utils/expansions-map.js
Normal file
32
frontend/src/utils/expansions-map.js
Normal file
@ -0,0 +1,32 @@
|
||||
export const expansionsMap = {
|
||||
'dodge_city' : {
|
||||
name: 'Dodge City',
|
||||
icon: '🐄',
|
||||
back: true,
|
||||
expansion: 'dodge-city',
|
||||
},
|
||||
'fistful_of_cards' : {
|
||||
name: 'Fistful of Cards',
|
||||
icon: '🎴',
|
||||
back: true,
|
||||
expansion: 'fistful-of-cards',
|
||||
},
|
||||
'high_noon': {
|
||||
name: 'High Noon',
|
||||
icon: '🔥',
|
||||
back: true,
|
||||
expansion: 'high-noon',
|
||||
},
|
||||
'gold_rush': {
|
||||
name: 'Gold Rush',
|
||||
icon: '🤑',
|
||||
back: true,
|
||||
expansion: 'gold-rush',
|
||||
},
|
||||
'the_valley_of_shadows': {
|
||||
name: 'The Valley of Shadows',
|
||||
icon: '👻',
|
||||
back: true,
|
||||
expansion: 'the-valley-of-shadows',
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user