Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // BoxIcon.vue
- <template lang="pug" functional>
- svg(version="1.1" viewBox="0 0 100 100" :width="width" :height="height" xmlns="http://www.w3.org/2000/svg")
- g
- circle(cx="50" cy="50" r="50" fill="#407900" stroke-width="3" stroke="#fff")
- path(d="m17.268 25.299-6.3867 13.324h7.8711v40.832h62.25v-40.832h7.8691l-6.3867-13.324z" fill="#fff")
- </template>
- <script lang="ts">
- import { Component, Vue } from 'vue-property-decorator';
- const BoxIconProps = Vue.extend({
- props: {
- width: {
- type: String,
- required: true
- },
- height: {
- type: String,
- required: true
- }
- }
- });
- @Component
- export default class BoxIcon extends BoxIconProps {}
- </script>
- // ikona se pouziva obecne v CardSymbol, kde to nemam resene moc hezky ale nevidim duvod proc by to nemelo fungovat tak jak chcu
- // CardSymbol.vue
- <template lang="pug">
- WheatIcon(v-if="symbol === symbols.Wheat" :width="width" :height="height")
- BoxIcon(v-else-if="symbol === symbols.Box" :width="width" :height="height")
- PigIcon(v-else-if="symbol === symbols.Pig" :width="width" :height="height")
- CoffeeIcon(v-else-if="symbol === symbols.Coffee" :width="width" :height="height")
- CogIcon(v-else-if="symbol === symbols.Cog" :width="width" :height="height")
- FactoryIcon(v-else-if="symbol === symbols.Factory" :width="width" :height="height")
- BoatIcon(v-else-if="symbol === symbols.Boat" :width="width" :height="height")
- MallIcon(v-else-if="symbol === symbols.Mall" :width="width" :height="height")
- SuitcaseIcon(v-else-if="symbol === symbols.Suitcase" :width="width" :height="height")
- TowerIcon(v-else :type="towerType" :width="width" :height="height")
- </template>
- <script lang="ts">
- import { Component, Vue } from 'vue-property-decorator';
- import TowerIcon from './icons/TowerIcon.vue';
- import BoatIcon from './icons/BoatIcon.vue';
- import BoxIcon from './icons/BoxIcon.vue';
- import CoffeeIcon from './icons/CoffeeIcon.vue';
- import CogIcon from './icons/CogIcon.vue';
- import FactoryIcon from './icons/FactoryIcon.vue';
- import MallIcon from './icons/MallIcon.vue';
- import PigIcon from './icons/PigIcon.vue';
- import SuitcaseIcon from './icons/SuitcaseIcon.vue';
- import WheatIcon from './icons/WheatIcon.vue';
- import { CardColor, CardSymbol as SymbolEnum } from '~/utils/cards';
- const CardSymbolProps = Vue.extend({
- props: {
- symbol: {
- required: true,
- type: Number,
- validator (value) {
- return Number(value) in SymbolEnum;
- }
- },
- // if symbol is Tower, two additional properties must be provided
- // eslint-disable-next-line vue/require-default-prop
- color: {
- required: false,
- type: Number,
- validator (value) {
- return Number(value) in CardColor;
- }
- },
- bought: {
- required: false,
- type: Boolean
- },
- width: {
- type: String,
- required: false,
- default: '20'
- },
- height: {
- type: String,
- required: false,
- default: '20'
- }
- }
- });
- @Component({
- components: {
- BoatIcon,
- BoxIcon,
- CoffeeIcon,
- CogIcon,
- FactoryIcon,
- MallIcon,
- PigIcon,
- SuitcaseIcon,
- TowerIcon,
- WheatIcon
- }
- })
- export default class CardSymbol extends CardSymbolProps {
- readonly symbols = SymbolEnum;
- get towerType (): 'purple'|'dominant-inactive'|'dominant-active' {
- if (this.color === CardColor.Purple) {
- return 'purple';
- }
- return this.bought ? 'dominant-active' : 'dominant-inactive';
- }
- }
- </script>
- // tenhle symbol se pak pouziva obecne v komponente karty, kde ho pak vkladam takhle:
- CardSymbol(:symbol="info.card.symbol" :color="info.card.color" width="20" height="20")
- // stejne to blblo i kdyz width a height byly cisla
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement