farm-fresh/src/components/CropField.vue

<template>
    <div class="row grass-border" id="field">
        <div :class="'crop-field '+(!field.data ? 'empty' : '')"
             v-on:click="interactWithField(field)"
             v-for="field in fields"
             v-bind:key="field.id">
            <img v-if="field.data" class="planted-field" :src="getCropAsset(field)"/>
            <div v-if="field.data && field.data.percentDone < 100" class="percent-bar-wrapper">
                <div class="percent-bar" :style="'width:'+field.data.percentDone+'%'"></div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="cropInventoryModal" tabindex="-1" aria-labelledby="cropInventoryModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content steel-border">
                <div class="modal-header">
                    <h5 class="modal-title" id="cropInventoryModalLabel">Select a crop to be planted</h5>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-6 pixel-border-static"
                             v-for="seed in $store.getters.getSeedsInInventory"
                             v-bind:key="seed"
                             data-bs-dismiss="modal">
                            <div v-on:click="plantSeed(seed)">
                                <div class="float-end">
                                    <img :src="seed.assetsFolder+'/6.png'" :alt="seed.name">
                                </div>
                                {{ seed.name }}<br/>
                                {{ seed.cropData.timeToGrow }} minutes<br/>
                                ({{ seed.quantity }} left)
                            </div>
                        </div>
                        <div v-if="!$store.getters.getSeedsInInventory.length">
                            No seeds to plant.
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-pixel-border" data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Modal from 'bootstrap/js/src/modal'

export default {
    name: "CropField",
    computed: {
        fields() {
            return this.$store.state.cropField;
        }
    },
    methods: {
        interactWithField(field) {
            if (!field.data) {
                this.selectSeed(field.id);
            } else if (field.data.readyForHarvest) {
                this.harvestField(field);
            }
        },
        selectSeed(id) {
            this.$store.commit('selectField', id);
            const modal = new Modal(document.getElementById('cropInventoryModal'))
            modal.toggle();
        },
        plantSeed(seed) {
            this.$store.commit('plantSeed', seed);
        },
        harvestField(field) {
            this.$store.commit('harvestSeed', field);
        },
        // cropInformation(id) {
        //     this.$store.commit('selectField', id);
        //
        //     if (!this.$store.getters.selectedField.data) {
        //         return false;
        //     }
        //
        //     const modal = new Modal(document.getElementById('cropInformationModal'))
        //     modal.toggle();
        //     return false;
        // },
        getCropAsset(field) {
            let seed = this.$store.state.itemCatalogue.find((item) => {
                return item.id === field.data.seed_id;
            });

            if (field.data.percentDone >= 100) {
                return seed.assetsFolder + '5.png';
            } else if (field.data.percentDone > 75) {
                return seed.assetsFolder + '4.png';
            } else if (field.data.percentDone > 50) {
                return seed.assetsFolder + '3.png';
            } else if (field.data.percentDone > 25) {
                return seed.assetsFolder + '2.png';
            } else {
                return seed.assetsFolder + '1.png';
            }
        }
    }
}
</script>

<style scoped>
#field {
    margin: 1em 0.5em 6em 0.5em;
    padding-bottom: 0;
    background-color: #5A3C28;
    align-content: center;
}

.crop-field {
    width: 3.7em;
    height: 3.7em;
    border-radius: 14px;
    background-image: url('@/assets/field/tile057.png');
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 3px auto;
    padding: 0;
}

.crop-field:hover {
    opacity: 0.5;
}

.crop-field:not(.empty) {
    background:
        linear-gradient(
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0.2)
        ),
        url('@/assets/field/tile057.png');
}

.planted-field {
    height: 100%;
    width: auto;
}

.percent-bar-wrapper {
    z-index: 300;
    margin-top: -0.2em;
}

.percent-bar {
    background-color: green;
    height: 0.2em;
}
</style>