add emote-assets; add hint for ready products;

src/components/BarnView.vue

@@ -5,6 +5,9 @@
                 <div class="steel-border bordered-content" id="barn">
                     <div class="animal-wrapper" v-for="animal in $store.getters.getAnimalsWithAnimalData" v-bind:key="animal.data.id">
                         <div class="animal" :style="'top: '+animal.position.x+'vh; left: '+animal.position.y+'vw;'">
+                            <div class="production-ready" v-if="animal.production && animal.production.canBeCollected" v-on:click="interactWithAnimal(animal)">
+                                <img :src="getProductIconFromAnimal(animal)" alt="" class="product-icon">
+                            </div>
                             <img :src="getSpriteForAnimal(animal)" alt="" v-on:click="interactWithAnimal(animal)">
                             <div class="animal-tag">{{ animal.name }}</div>
                         </div>
@@ -41,13 +44,17 @@ export default {
                 let productFromAnimal = AnimalService.getProductFromAnimalID(animal.id);
 
                 iziToast.info({
-                    title: productFromAnimal.name+' will be collectable '+ moment(animal.production.ready).fromNow(),
+                    title: productFromAnimal.name+' can be collected '+ moment(animal.production.ready).fromNow(),
                     image: productFromAnimal.icon,
                 });
 
                 return false;
             }
         },
+        getProductIconFromAnimal(animal) {
+            let productFromAnimal = AnimalService.getProductFromAnimalID(animal.id);
+            return productFromAnimal.icon;
+        },
         collectItem(animal) {
             let productFromAnimal = AnimalService.getProductFromAnimalID(animal.id);
             let animalData = AnimalService.getAnimalByID(animal.id);
@@ -92,6 +99,8 @@ export default {
 
 .animal-wrapper {
     position: relative;
+    text-align: center;
+    align-content: center;
 }
 
 .animal-tag {
@@ -103,4 +112,19 @@ export default {
     text-align: center;
     color: orangered;
 }
+
+.production-ready {
+    margin-left: auto;
+    margin-right: auto;
+    background-image: url(@/assets/emotes/_.png);
+    background-repeat: no-repeat;
+    margin-bottom: 0;
+    width: 32px;
+    height: 32px;
+}
+
+.product-icon {
+    padding-top: 1px;
+    max-height: 20px;
+}
 </style>