Skip to content

Commit b3002eb

Browse files
PhrancisPhrancis
authored
Merge pull request #143 from Cardshifter/vuejs-css-fixes
Fix CardModel and tested, all cards seem to be displaying properly
2 parents 739a0a3 + 831a467 commit b3002eb

File tree

1 file changed

+125
-93
lines changed

1 file changed

+125
-93
lines changed

‎src/components/CardModel.vue

Lines changed: 125 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,143 @@
11
<template>
2-
<div class="card card-outer"
3-
:class="{'selected': card.selected, 'targetable': doingAction && targets.indexOf(card.id) !== -1}">
4-
<!--
5-
TODO Add ng-FitText.js fields to elements in this model of which length may vary widely, for example card descriptions and flavor text.
6-
The primary fields for FitText are:
7-
- data-fittext : Enable FitText for the content inside the tag
8-
- data-fittext-min="8pt" : Minimum font size allowed
9-
- data-fittext-max="12pt" : Maximum font size allowed
10-
-->
11-
12-
<div class="test" v-if="debugMode">doingAction: {{doingAction}} targets: {{targets}} actions: {{actions}} card: {{card}}</div>
13-
<!-- card name -->
14-
<div>
15-
<div class="card-name">
16-
<a @click="selectEntity(card)" :class="{'selected': card.selected, 'targetable': doingAction && targets.indexOf(card.id) !== -1}">{{card.properties.name}}</a>
2+
<div class="card card-outer"
3+
:class="{'selected': card.selected, 'targetable': doingAction && targets.indexOf(card.id) !== -1}">
4+
<div class="test"
5+
v-if="debugMode">doingAction: {{doingAction}} targets: {{targets}} actions: {{actions}} card: {{card}}
176
</div>
18-
19-
</div>
20-
<!-- card image -->
21-
<div style="clear:both;">
22-
<div style="text-align: center;">
23-
<img style="width: 160px; height: 120px;" class="card-image"
24-
:src="resolveImage(card.properties.imagePath)" />
25-
</div>
26-
</div>
27-
<!-- card type -->
28-
<div class="card-type">
29-
{{card.properties.creatureType}}
30-
</div>
31-
<!-- card statistics -->
32-
<div>
33-
<!-- mana cost -->
34-
<div style="float: left; padding: 5px">
35-
<button class="btn btn-sm btn-info active fa fa-tint" style="cursor:default">{{card.properties.MANA_COST}}</button>
36-
</div>
37-
<div style="float: right; padding: 5px;" class="btn-group">
38-
<!-- attack -->
39-
<button class="btn btn-sm btn-danger active fa fa-crosshairs" style="cursor:default">{{card.properties.ATTACK || "-"}}</button>
40-
<!-- health -->
41-
<div class="card-property">
42-
<button class="btn btn-sm btn-success active fa fa-heart" style="cursor:default">{{card.properties.HEALTH || "-"}}</button>
43-
<!-- <dynamic-animation items="card.animations.HEALTH" /> -->
7+
<!-- card name -->
8+
<div>
9+
<div class="card-name">
10+
<a @click="selectEntity(card)"
11+
:class="{'selected': card.selected, 'targetable': doingAction && targets.indexOf(card.id) !== -1}"
12+
:style="`font-size: ${adjustFontSize(card.properties.name)}em`">
13+
{{card.properties.name}}
14+
</a>
4415
</div>
4516
</div>
46-
</div>
47-
<div style="clear: both;">
48-
<div style="float: left; padding: 5px; text-align: center;">
49-
<!-- scrap cost -->
50-
<button v-if="card.properties.SCRAP_COST" class="btn btn-xs btn-primary active fa fa-wrench" style="cursor:default">{{card.properties.SCRAP_COST}}</button>
17+
<!-- card image -->
18+
<div style="clear:both;">
19+
<div style="text-align: center;">
20+
<img style="width: 160px; height: 120px;" class="card-image"
21+
:src="resolveImage(card.properties.imagePath)" />
22+
</div>
5123
</div>
52-
<div v-if="card.properties.SCRAP" style="float: left; padding: 5px; text-align: center;">
53-
<!-- scrap value -->
54-
<button class="btn btn-xs btn-primary active fa fa-cog" style="cursor:default">{{card.properties.SCRAP}}</button>
24+
<!-- card type -->
25+
<div class="card-type"
26+
:style="`font-size: ${adjustFontSize(card.properties.creatureType)}em`">
27+
{{card.properties.creatureType}}
5528
</div>
56-
<!-- flavor text -->
57-
<div v-show="card.properties.flavor" style="float: right; padding: 5px; text-align: center;">
58-
<b-btn type="button" class="btn btn-xs btn-primary fa fa-book"
59-
popover-placement="top"
60-
v-b-popover.hover="card.properties.flavor"></b-btn>
29+
<!-- card statistics -->
30+
<div>
31+
<!-- mana cost -->
32+
<div style="float: left; padding-left: 5px;">
33+
<button class="btn btn-sm btn-info active fa fa-tint" style="cursor:default" title="Mana Cost">
34+
{{card.properties.MANA_COST}}
35+
</button>
36+
</div>
37+
<div style="float: right; padding-right: 5px;" class="btn-group">
38+
<!-- attack -->
39+
<button class="btn btn-sm btn-danger active fa fa-crosshairs" style="cursor:default" title="Attack">
40+
{{card.properties.ATTACK || "-"}}
41+
</button>
42+
<!-- health -->
43+
<div class="card-property">
44+
<button class="btn btn-sm btn-success active fa fa-heart" style="cursor:default" title="Health">
45+
{{card.properties.HEALTH || "-"}}
46+
</button>
47+
<!-- <dynamic-animation items="card.animations.HEALTH" /> -->
48+
</div>
49+
</div>
6150
</div>
62-
<!-- effect text -->
63-
<div v-show="card.properties.effect" style="float: right; padding: 5px; text-align: center;">
64-
<b-btn type="button" class="btn btn-xs btn-warning fa fa-flash"
65-
popover-placement="top"
66-
v-b-popover.hover="card.properties.effect">FX</b-btn>
51+
<div style="clear: both;">
52+
<div v-if="card.properties.SCRAP_COST" style="float: left; padding: 5px;">
53+
<!-- scrap cost -->
54+
<button class="btn btn-sm btn-primary active fa fa-wrench" style="cursor:default" title="Scrap Cost">
55+
{{card.properties.SCRAP_COST}}
56+
</button>
57+
</div>
58+
<div v-if="card.properties.SCRAP" style="float: left; padding: 5px;">
59+
<!-- scrap value -->
60+
<button class="btn btn-sm btn-primary active fa fa-cog" style="cursor:default" title="Scrap Value">
61+
{{card.properties.SCRAP}}
62+
</button>
63+
</div>
64+
<!-- flavor text -->
65+
<div v-show="card.properties.flavor" style="float: right; padding: 5px; text-align: center;">
66+
<b-btn class="btn btn-sm btn-dark fa fa-book" :id="`${card.id}-flavor`"></b-btn>
67+
<b-popover :target="`${card.id}-flavor`"
68+
:title="card.properties.name"
69+
triggers="hover focus"
70+
:content="card.properties.flavor"
71+
placement="bottomleft">
72+
</b-popover>
73+
</div>
74+
<!-- effect text -->
75+
<div v-show="card.properties.effect" style="float: right; padding: 5px; text-align: center;">
76+
<b-btn class="btn btn-sm btn-secondary fa fa-flash" :id="`${card.id}-effect`">FX</b-btn>
77+
<b-popover :target="`${card.id}-effect`"
78+
:title="card.properties.name"
79+
triggers="hover focus"
80+
:content="card.properties.effect"
81+
placement="bottomleft">
82+
</b-popover>
83+
</div>
6784
</div>
68-
</div>
69-
<div class="card-actions">
70-
<button class="btn btn-xs btn-navbar csh-button btn-default" v-for="action in actions"
85+
<div class="card-actions">
86+
<button class="btn btn-sm btn-navbar" v-for="action in actions"
7187
:key="action.action"
7288
v-if="!doingAction && action.id === card.id"
7389
@click="startAction(action)">
74-
{{action.action}}
75-
</button>
90+
{{action.action}}
91+
</button>
92+
</div>
7693
</div>
77-
</div>
7894
</template>
7995
<script>
8096
import CardshifterServerAPI from "../server_interface";
8197
8298
export default {
83-
name: "CardModel",
84-
props: ["card", "targets", "doingAction", "selectEntity", "actions", "startAction"],
85-
data() {
86-
return {
87-
debugMode: false
88-
}
89-
},
90-
methods: {
91-
resolveImage(path) {
92-
return require('../assets/images/cards/' + path);
93-
}
94-
},
95-
created() {
99+
name: "CardModel",
100+
props: ["card", "targets", "doingAction", "selectEntity", "actions", "startAction"],
101+
data() {
102+
return {
103+
debugMode: false
104+
}
105+
},
106+
methods: {
107+
resolveImage(path) {
108+
return require('../assets/images/cards/' + path);
109+
},
110+
/**
111+
* Adjusts the size of the font to be displayed on a CardModel
112+
* based on the length of the text and whether it is all caps.
113+
*
114+
* @param {String} text - the text to decide the font size for
115+
* @return {Number} - the font size in em units
116+
*/
117+
adjustFontSize(text) {
118+
let baselineEm = 1.1;
119+
if (!text) {
120+
return baselineEm;
121+
}
122+
const isAllCaps = text === text.toUpperCase();
123+
const length = text.length;
124+
if (length >= 20) {
125+
baselineEm = isAllCaps ? 0.7 : 0.8;
126+
} else if (length >= 18) {
127+
baselineEm = isAllCaps ? 0.9 : 1.0;
128+
}
129+
return baselineEm;
130+
}
131+
},
132+
created() {
133+
134+
},
135+
computed: {
136+
137+
},
138+
beforeDestroy() {
96139
97-
},
98-
computed: {
99-
100-
},
101-
beforeDestroy() {
102-
103-
}
140+
}
104141
}
105142
</script>
106143
<style>
@@ -131,27 +168,22 @@ export default {
131168
132169
.card-name {
133170
float: left;
134-
padding: 5px;
171+
padding-left: 5px;
135172
font-family: Georgia, Times, "Times New Roman", serif;
136-
font-size: 1.2em;
137-
font-weight: bold;
173+
font-size: 0.9em;
138174
}
139175
140176
.card-type {
141177
clear:both;
142178
padding: 5px;
143179
padding-top: 8px;
144180
font-family: Georgia, Times, "Times New Roman", serif;
145-
font-size: 1.1em;
181+
font-size: 0.9em;
146182
}
147183
148184
.card-actions {
149185
width: 180px;
150186
clear: both;
151-
/*border-style: solid;
152-
border-width: 3px;
153-
border-color: black;
154-
border-radius: 10px;*/
155187
text-align: center;
156188
}
157189

0 commit comments

Comments
 (0)