Skip to content

Commit ef0c7a2

Browse files
PhrancisPhrancis
committed
cleanup & make formatting consistent
1 parent d80c2d2 commit ef0c7a2

File tree

1 file changed

+98
-99
lines changed

1 file changed

+98
-99
lines changed

‎src/components/CardModel.vue‎

Lines changed: 98 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,119 @@
11
<template>
2-
<div class="card card-outer"
3-
:class="{'selected': card.selected, 'targetable': doingAction && targets.indexOf(card.id) !== -1}">
4-
<div class="test" v-if="debugMode">doingAction: {{doingAction}} targets: {{targets}} actions: {{actions}} card: {{card}}</div>
5-
<!-- card name -->
6-
<div>
7-
<div class="card-name">
8-
<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}}
96
</div>
10-
</div>
11-
<!-- card image -->
12-
<div style="clear:both;">
13-
<div style="text-align: center;">
14-
<img style="width: 160px; height: 120px;" class="card-image"
15-
:src="resolveImage(card.properties.imagePath)" />
16-
</div>
17-
</div>
18-
<!-- card type -->
19-
<div class="card-type">
20-
{{card.properties.creatureType}}
21-
</div>
22-
<!-- card statistics -->
23-
<div>
24-
<!-- mana cost -->
25-
<div style="float: left; padding-left: 5px;">
26-
<button class="btn btn-sm btn-info active fa fa-tint" style="cursor:default" title="Mana Cost">
27-
{{card.properties.MANA_COST}}
28-
</button>
29-
</div>
30-
<div style="float: right; padding-right: 5px;" class="btn-group">
31-
<!-- attack -->
32-
<button class="btn btn-sm btn-danger active fa fa-crosshairs" style="cursor:default" title="Attack">
33-
{{card.properties.ATTACK || "-"}}
34-
</button>
35-
<!-- health -->
36-
<div class="card-property">
37-
<button class="btn btn-sm btn-success active fa fa-heart" style="cursor:default" title="Health">
38-
{{card.properties.HEALTH || "-"}}
39-
</button>
40-
<!-- <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}">{{card.properties.name}}
12+
</a>
4113
</div>
4214
</div>
43-
</div>
44-
<div style="clear: both;">
45-
<div v-if="card.properties.SCRAP_COST" style="float: left; padding: 5px;">
46-
<!-- scrap cost -->
47-
<button class="btn btn-sm btn-primary active fa fa-wrench" style="cursor:default" title="Scrap Cost">
48-
{{card.properties.SCRAP_COST}}
49-
</button>
15+
<!-- card image -->
16+
<div style="clear:both;">
17+
<div style="text-align: center;">
18+
<img style="width: 160px; height: 120px;" class="card-image"
19+
:src="resolveImage(card.properties.imagePath)" />
20+
</div>
5021
</div>
51-
<div v-if="card.properties.SCRAP" style="float: left; padding: 5px;">
52-
<!-- scrap value -->
53-
<button class="btn btn-sm btn-primary active fa fa-cog" style="cursor:default" title="Scrap Value">
54-
{{card.properties.SCRAP}}
55-
</button>
22+
<!-- card type -->
23+
<div class="card-type">
24+
{{card.properties.creatureType}}
5625
</div>
57-
<!-- flavor text -->
58-
<div v-show="card.properties.flavor" style="float: right; padding: 5px; text-align: center;">
59-
<b-btn class="btn btn-sm btn-dark fa fa-book" :id="`${card.id}-flavor`"></b-btn>
60-
<b-popover :target="`${card.id}-flavor`"
61-
:title="card.properties.name"
62-
triggers="hover focus"
63-
:content="card.properties.flavor"
64-
placement="bottomleft">
65-
</b-popover>
26+
<!-- card statistics -->
27+
<div>
28+
<!-- mana cost -->
29+
<div style="float: left; padding-left: 5px;">
30+
<button class="btn btn-sm btn-info active fa fa-tint" style="cursor:default" title="Mana Cost">
31+
{{card.properties.MANA_COST}}
32+
</button>
33+
</div>
34+
<div style="float: right; padding-right: 5px;" class="btn-group">
35+
<!-- attack -->
36+
<button class="btn btn-sm btn-danger active fa fa-crosshairs" style="cursor:default" title="Attack">
37+
{{card.properties.ATTACK || "-"}}
38+
</button>
39+
<!-- health -->
40+
<div class="card-property">
41+
<button class="btn btn-sm btn-success active fa fa-heart" style="cursor:default" title="Health">
42+
{{card.properties.HEALTH || "-"}}
43+
</button>
44+
<!-- <dynamic-animation items="card.animations.HEALTH" /> -->
45+
</div>
46+
</div>
6647
</div>
67-
<!-- effect text -->
68-
<div v-show="card.properties.effect" style="float: right; padding: 5px; text-align: center;">
69-
<b-btn class="btn btn-sm btn-secondary fa fa-flash" :id="`${card.id}-effect`">FX</b-btn>
70-
<b-popover :target="`${card.id}-effect`"
71-
:title="card.properties.name"
72-
triggers="hover focus"
73-
:content="card.properties.effect"
74-
placement="bottomleft">
75-
</b-popover>
48+
<div style="clear: both;">
49+
<div v-if="card.properties.SCRAP_COST" style="float: left; padding: 5px;">
50+
<!-- scrap cost -->
51+
<button class="btn btn-sm btn-primary active fa fa-wrench" style="cursor:default" title="Scrap Cost">
52+
{{card.properties.SCRAP_COST}}
53+
</button>
54+
</div>
55+
<div v-if="card.properties.SCRAP" style="float: left; padding: 5px;">
56+
<!-- scrap value -->
57+
<button class="btn btn-sm btn-primary active fa fa-cog" style="cursor:default" title="Scrap Value">
58+
{{card.properties.SCRAP}}
59+
</button>
60+
</div>
61+
<!-- flavor text -->
62+
<div v-show="card.properties.flavor" style="float: right; padding: 5px; text-align: center;">
63+
<b-btn class="btn btn-sm btn-dark fa fa-book" :id="`${card.id}-flavor`"></b-btn>
64+
<b-popover :target="`${card.id}-flavor`"
65+
:title="card.properties.name"
66+
triggers="hover focus"
67+
:content="card.properties.flavor"
68+
placement="bottomleft">
69+
</b-popover>
70+
</div>
71+
<!-- effect text -->
72+
<div v-show="card.properties.effect" style="float: right; padding: 5px; text-align: center;">
73+
<b-btn class="btn btn-sm btn-secondary fa fa-flash" :id="`${card.id}-effect`">FX</b-btn>
74+
<b-popover :target="`${card.id}-effect`"
75+
:title="card.properties.name"
76+
triggers="hover focus"
77+
:content="card.properties.effect"
78+
placement="bottomleft">
79+
</b-popover>
80+
</div>
7681
</div>
77-
</div>
78-
<div class="card-actions">
79-
<button class="btn btn-sm btn-navbar" v-for="action in actions"
82+
<div class="card-actions">
83+
<button class="btn btn-sm btn-navbar" v-for="action in actions"
8084
:key="action.action"
8185
v-if="!doingAction && action.id === card.id"
8286
@click="startAction(action)">
83-
{{action.action}}
84-
</button>
87+
{{action.action}}
88+
</button>
89+
</div>
8590
</div>
86-
</div>
8791
</template>
8892
<script>
8993
import CardshifterServerAPI from "../server_interface";
9094
9195
export default {
92-
name: "CardModel",
93-
props: ["card", "targets", "doingAction", "selectEntity", "actions", "startAction"],
94-
data() {
95-
return {
96-
debugMode: false
97-
}
98-
},
99-
methods: {
100-
resolveImage(path) {
101-
return require('../assets/images/cards/' + path);
102-
}
103-
},
104-
created() {
105-
106-
},
107-
computed: {
96+
name: "CardModel",
97+
props: ["card", "targets", "doingAction", "selectEntity", "actions", "startAction"],
98+
data() {
99+
return {
100+
debugMode: false
101+
}
102+
},
103+
methods: {
104+
resolveImage(path) {
105+
return require('../assets/images/cards/' + path);
106+
}
107+
},
108+
created() {
109+
110+
},
111+
computed: {
112+
113+
},
114+
beforeDestroy() {
108115
109-
},
110-
beforeDestroy() {
111-
112-
}
116+
}
113117
}
114118
</script>
115119
<style>
@@ -143,7 +147,6 @@ export default {
143147
padding-left: 5px;
144148
font-family: Georgia, Times, "Times New Roman", serif;
145149
font-size: 0.9em;
146-
/* font-weight: bold; */
147150
}
148151
149152
.card-type {
@@ -157,10 +160,6 @@ export default {
157160
.card-actions {
158161
width: 180px;
159162
clear: both;
160-
/*border-style: solid;
161-
border-width: 3px;
162-
border-color: black;
163-
border-radius: 10px;*/
164163
text-align: center;
165164
}
166165

0 commit comments

Comments
 (0)