SHARE
TWEET

Untitled

a guest Feb 14th, 2020 73 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // BoxIcon.vue
  2. <template lang="pug" functional>
  3.     svg(version="1.1" viewBox="0 0 100 100" :width="width" :height="height" xmlns="http://www.w3.org/2000/svg")
  4.         g
  5.             circle(cx="50" cy="50" r="50" fill="#407900" stroke-width="3" stroke="#fff")
  6.         path(d="m17.268 25.299-6.3867 13.324h7.8711v40.832h62.25v-40.832h7.8691l-6.3867-13.324z" fill="#fff")
  7. </template>
  8.  
  9. <script lang="ts">
  10. import { Component, Vue } from 'vue-property-decorator';
  11.  
  12. const BoxIconProps = Vue.extend({
  13.     props: {
  14.         width: {
  15.             type: String,
  16.             required: true
  17.         },
  18.         height: {
  19.             type: String,
  20.             required: true
  21.         }
  22.     }
  23. });
  24.  
  25. @Component
  26. export default class BoxIcon extends BoxIconProps {}
  27. </script>
  28.  
  29.  
  30.  
  31. // ikona se pouziva obecne v CardSymbol, kde to nemam resene moc hezky ale nevidim duvod proc by to nemelo fungovat tak jak chcu
  32. // CardSymbol.vue
  33. <template lang="pug">
  34.     WheatIcon(v-if="symbol === symbols.Wheat" :width="width" :height="height")
  35.     BoxIcon(v-else-if="symbol === symbols.Box" :width="width" :height="height")
  36.     PigIcon(v-else-if="symbol === symbols.Pig" :width="width" :height="height")
  37.     CoffeeIcon(v-else-if="symbol === symbols.Coffee" :width="width" :height="height")
  38.     CogIcon(v-else-if="symbol === symbols.Cog" :width="width" :height="height")
  39.     FactoryIcon(v-else-if="symbol === symbols.Factory" :width="width" :height="height")
  40.     BoatIcon(v-else-if="symbol === symbols.Boat" :width="width" :height="height")
  41.     MallIcon(v-else-if="symbol === symbols.Mall" :width="width" :height="height")
  42.     SuitcaseIcon(v-else-if="symbol === symbols.Suitcase" :width="width" :height="height")
  43.     TowerIcon(v-else :type="towerType" :width="width" :height="height")
  44. </template>
  45.  
  46. <script lang="ts">
  47. import { Component, Vue } from 'vue-property-decorator';
  48. import TowerIcon from './icons/TowerIcon.vue';
  49. import BoatIcon from './icons/BoatIcon.vue';
  50. import BoxIcon from './icons/BoxIcon.vue';
  51. import CoffeeIcon from './icons/CoffeeIcon.vue';
  52. import CogIcon from './icons/CogIcon.vue';
  53. import FactoryIcon from './icons/FactoryIcon.vue';
  54. import MallIcon from './icons/MallIcon.vue';
  55. import PigIcon from './icons/PigIcon.vue';
  56. import SuitcaseIcon from './icons/SuitcaseIcon.vue';
  57. import WheatIcon from './icons/WheatIcon.vue';
  58. import { CardColor, CardSymbol as SymbolEnum } from '~/utils/cards';
  59.  
  60. const CardSymbolProps = Vue.extend({
  61.     props: {
  62.         symbol: {
  63.             required: true,
  64.             type: Number,
  65.             validator (value) {
  66.                 return Number(value) in SymbolEnum;
  67.             }
  68.         },
  69.         // if symbol is Tower, two additional properties must be provided
  70.         // eslint-disable-next-line vue/require-default-prop
  71.         color: {
  72.             required: false,
  73.             type: Number,
  74.             validator (value) {
  75.                 return Number(value) in CardColor;
  76.             }
  77.         },
  78.         bought: {
  79.             required: false,
  80.             type: Boolean
  81.         },
  82.         width: {
  83.             type: String,
  84.             required: false,
  85.             default: '20'
  86.         },
  87.         height: {
  88.             type: String,
  89.             required: false,
  90.             default: '20'
  91.         }
  92.     }
  93. });
  94.  
  95. @Component({
  96.     components: {
  97.         BoatIcon,
  98.         BoxIcon,
  99.         CoffeeIcon,
  100.         CogIcon,
  101.         FactoryIcon,
  102.         MallIcon,
  103.         PigIcon,
  104.         SuitcaseIcon,
  105.         TowerIcon,
  106.         WheatIcon
  107.     }
  108. })
  109. export default class CardSymbol extends CardSymbolProps {
  110.     readonly symbols = SymbolEnum;
  111.  
  112.     get towerType (): 'purple'|'dominant-inactive'|'dominant-active' {
  113.         if (this.color === CardColor.Purple) {
  114.             return 'purple';
  115.         }
  116.         return this.bought ? 'dominant-active' : 'dominant-inactive';
  117.     }
  118. }
  119. </script>
  120.  
  121. // tenhle symbol se pak pouziva obecne v komponente karty, kde ho pak vkladam takhle:
  122. CardSymbol(:symbol="info.card.symbol" :color="info.card.color" width="20" height="20")
  123.  
  124. // stejne to blblo i kdyz width a height byly cisla
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top