adjustments to tick-logic; Autumn -> Fall; add alpha-chickens; implement animal-movement; add crop-info on harvest & time remaining; style empty-inv message; add first meals;

notes/season-table

@@ -1,52 +1,52 @@
 Week 1	Spring
 Week 2	Summer
-Week 3	Autumn
+Week 3	Fall
 Week 4	Winter
 Week 5	Spring
 Week 6	Summer
-Week 7	Autumn
+Week 7	Fall
 Week 8	Winter
 Week 9	Spring
 Week 10	Summer
-Week 11	Autumn
+Week 11	Fall
 Week 12	Winter
 Week 13	Spring
 Week 14	Summer
-Week 15	Autumn
+Week 15	Fall
 Week 16	Winter
 Week 17	Spring
 Week 18	Summer
-Week 19	Autumn
+Week 19	Fall
 Week 20	Winter
 Week 21	Spring
 Week 22	Summer
-Week 23	Autumn
+Week 23	Fall
 Week 24	Winter
 Week 25	Spring
 Week 26	Summer
-Week 27	Autumn
+Week 27	Fall
 Week 28	Winter
 Week 29	Spring
 Week 30	Summer
-Week 31	Autumn
+Week 31	Fall
 Week 32	Winter
 Week 33	Spring
 Week 34	Summer
-Week 35	Autumn
+Week 35	Fall
 Week 36	Winter
 Week 37	Spring
 Week 38	Summer
-Week 39	Autumn
+Week 39	Fall
 Week 40	Winter
 Week 41	Spring
 Week 42	Summer
-Week 43	Autumn
+Week 43	Fall
 Week 44	Winter
 Week 45	Spring
 Week 46	Summer
-Week 47	Autumn
+Week 47	Fall
 Week 48	Winter
 Week 49	Spring
 Week 50	Summer
-Week 51	Autumn
+Week 51	Fall
 Week 52	Winter

src/components/BarnView.vue

@@ -1,7 +1,16 @@
 <template>
     <div class="container container-fluid" id="main-container">
         <div class="row">
-
+            <div class="col-12">
+                <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;'">
+                            <img :src="getSpriteForAnimal(animal)" alt="">
+                            <div class="animal-tag">{{ animal.name }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -14,6 +23,13 @@ export default {
     methods: {
         getFrameClass(type) {
             return ItemTypeFrameClasses[type];
+        },
+        getSpriteForAnimal(animal) {
+            if (!animal.position.moving) {
+                return animal.data.assets[animal.position.facing].idle;
+            } else {
+                return this.$store.state.tickBeat ? animal.data.assets[animal.position.facing].walk2 : animal.data.assets[animal.position.facing].walk;
+            }
         }
     }
 }
@@ -24,14 +40,30 @@ export default {
     margin-top: 5em;
 }
 
-.item-icon {
+#barn {
-    height: 2.5em;
+    height: 70vh;
 }
 
-.inventory-item {
+.animal {
-    font-size: 0.8em;
+    position: absolute;
-    margin-bottom: 1em;
+}
+
+.bordered-content {
+    background-image: url(@/assets/backgrounds/planks.jpg);
+    background-size: 20%;
+}
+
+.animal-wrapper {
+    position: relative;
+}
+
+.animal-tag {
+    margin-top: 0.5em;
+    border: 1px solid black;
+    border-radius: 5px;
     background-color: white;
-    border-radius: 20px;
+    font-size: 0.8em;
+    text-align: center;
+    color: orangered;
 }
 </style>

src/components/CropField.vue

@@ -50,6 +50,7 @@
 import Modal from 'bootstrap/js/src/modal'
 import ItemService from "@/services/ItemService";
 import iziToast from "izitoast";
+import moment from "moment";
 
 export default {
     name: "CropField",
@@ -67,15 +68,17 @@ export default {
         interactWithField(field) {
             if (!field.data) {
                 this.selectSeed(field.id);
-            } else if (field.data.readyForHarvest) {
+            } else if (field.data.percentDone === 100) {
                 this.harvestField(field);
-            } else if (!field.data.readyForHarvest) {
+            } else {
-                let seed = ItemService.getItemByID(field.data.crop_id)
+                let productFromSeed = ItemService.getProductFromSeedID(field.data.seed_id);
-                console.log(seed)
 
                 iziToast.info({
-                    title: 'KUCHEN'
+                    title: productFromSeed.name+' will be harvestable '+ moment(field.data.readyForHarvest).fromNow(),
-                })
+                    image: productFromSeed.icon,
+                });
+
+                return false;
             }
         },
         selectSeed(id) {

src/components/InventoryView.vue

@@ -52,10 +52,12 @@
                     </div>
                 </div>
             </template>
-            <div v-if="$store.state.inventory.length === 0">
+            <div v-if="$store.state.inventory.length === 0" class="col-12">
+                <div class="pixel-border-red bordered-content">
                     Your inventory is empty.
                 </div>
             </div>
+        </div>
 
         <div class="modal fade" id="itemInfoModal" tabindex="-1" aria-labelledby="itemInfoModalLabel" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered">

src/data/Animals.js

@@ -0,0 +1,25 @@
+import {AnimalProducts} from "@/data/ItemsIDs";
+import {AnimalAssets} from "@/data/Paths";
+
+export default [
+    {
+        id: 1,
+        name: 'Chicken',
+        assets: {
+            left: {
+                idle: AnimalAssets+'chicken/idle_left.png',
+                walk: AnimalAssets+'chicken/walk_left_1.png',
+                walk2: AnimalAssets+'chicken/walk_left_2.png',
+            },
+            right: {
+                idle: AnimalAssets+'chicken/idle_right.png',
+                walk: AnimalAssets+'chicken/walk_right_1.png',
+                walk2: AnimalAssets+'chicken/walk_right_2.png',
+            }
+        },
+        produces: {
+            time: 10,
+            item_id: AnimalProducts.Egg
+        }
+    }
+]

src/data/Paths.js

@@ -1,2 +1,3 @@
 export const CropAssets = '/assets/crops/'
 export const FoodAssets = '/assets/food/'
+export const AnimalAssets = '/assets/animals/'

src/router/index.js

@@ -2,6 +2,7 @@ import {createRouter, createWebHistory} from 'vue-router'
 import FieldView from '@/components/CropField'
 import CropShopView from "@/components/CropShopView";
 import InventoryView from "@/components/InventoryView";
+import BarnView from "@/components/BarnView";
 
 const routes = [
     {
@@ -36,11 +37,10 @@ const routes = [
     {
         path: '/barn',
         name: 'barn',
-        component: CropShopView,
+        component: BarnView,
         meta: {
             title: 'Barn',
-            background: '/assets/backgrounds/planks.jpg',
+            background: '/assets/backgrounds/grass_summer.png'
-            backgroundSize: '20%'
         }
     }
 ]

src/services/AnimalService.js

@@ -0,0 +1,15 @@
+import Animals from "@/data/Animals";
+import ItemService from "@/services/ItemService";
+
+export default class {
+    static getAnimalByID(id) {
+        return Animals.find((item) => {
+            return item.id === id;
+        });
+    }
+
+    static getProductFromAnimalID(id) {
+        let animal = this.getAnimalByID(id);
+        return ItemService.getItemByID(animal.produces.item_id);
+    }
+}

src/services/ItemService.js

@@ -17,6 +17,10 @@ export default class {
                 return item.type === type;
             });
         }
+    }
 
+    static getProductFromSeedID(id) {
+        let seed = this.getItemByID(id);
+        return this.getItemByID(seed.cropData.product_id);
     }
 }

src/services/SeasonService.js

@@ -8,7 +8,7 @@ export class SeasonService {
             case 2:
                 return Seasons.Summer;
             case 3:
-                return Seasons.Autumn;
+                return Seasons.Fall;
             case 0:
             default:
                 return Seasons.Winter;
@@ -19,6 +19,6 @@ export class SeasonService {
 export const Seasons = {
     Spring: 'Spring',
     Summer: 'Summer',
-    Autumn: 'Autumn',
+    Fall: 'Fall',
     Winter: 'Winter'
 };

src/store/index.js

@@ -5,17 +5,19 @@ import {ItemTypes} from "@/data/ItemTypes";
 import createPersistedState from "vuex-persistedstate";
 import ItemService from "@/services/ItemService";
 import iziToast from "izitoast";
+import AnimalService from "@/services/AnimalService";
 
 
 export default createStore({
     state: {
         initialized: null,
+        tickBeat: false,
         player: {
             // TODO: ADD PLAYER INTRODUCTION
             name: 'Franz',
             money: 1_000,
             unlocked: {
-                fields: 48
+                fields: 10
             },
         },
         time: {
@@ -33,8 +35,60 @@ export default createStore({
         selections: {
             field: null,
             item: null
+        },
+        animals: [
+            {
+                id: 1,
+                name: 'Nugget',
+                position: {
+                    facing: 'left',
+                    moving: false,
+                    x: 20,
+                    y: 20
+                }
+            },
+            {
+                id: 1,
+                name: 'Nugget',
+                position: {
+                    facing: 'left',
+                    moving: false,
+                    x: 20,
+                    y: 20
+                }
+            },
+            {
+                id: 1,
+                name: 'Nugget',
+                position: {
+                    facing: 'left',
+                    moving: false,
+                    x: 20,
+                    y: 20
+                }
+            },
+            {
+                id: 1,
+                name: 'Nugget',
+                position: {
+                    facing: 'left',
+                    moving: false,
+                    x: 20,
+                    y: 20
                 }
             },
+            {
+                id: 1,
+                name: 'Nugget',
+                position: {
+                    facing: 'left',
+                    moving: false,
+                    x: 20,
+                    y: 20
+                }
+            },
+        ],
+    },
     getters: {
         selectedField(state) {
             return state.cropField.find(function (field) {
@@ -90,6 +144,12 @@ export default createStore({
                 item.quantity = inventoryItem.quantity;
                 return item;
             }) ?? [];
+        },
+        getAnimalsWithAnimalData(state) {
+            return state.animals.map((animal) => {
+                animal.data = AnimalService.getAnimalByID(animal.id)
+                return animal;
+            });
         }
     },
     mutations: {
@@ -105,6 +165,7 @@ export default createStore({
             this.commit('generateField');
         },
         updateTimestamp(state) {
+            state.tickBeat = !state.tickBeat;
             state.time.stamp = moment().format('H:mm:ss')
         },
         generateField(state) {
@@ -150,6 +211,11 @@ export default createStore({
                 return false;
             }
 
+            iziToast.success({
+                title: 'Harvested '+productFromSeed.name,
+                image: productFromSeed.icon
+            });
+
             this.commit('addItemToInventory', {
                 item: productFromSeed,
                 quantity: 1
@@ -264,6 +330,37 @@ export default createStore({
         },
         toggleGrouping(state) {
             state.groupInventory = !state.groupInventory;
+        },
+        doAnimalMovement(state) {
+            state.animals.forEach((animal) => {
+                animal.position.moving = false;
+                let moveChance = Math.random();
+                // console.log(moveChance)
+                // console.log(animal.position.x+'|'+animal.position.y)
+
+                if (moveChance > 0.6) {
+                    animal.position.moving = true;
+                    let randomX = Math.random() * 5 - 2.0;
+                    let randomY = Math.random() * 5 - 2.0;
+                    // console.log(randomX+'|'+randomY)
+                    let newX = Math.floor(Number(animal.position.x) + Number(randomX));
+                    let newY = Math.floor(Number(animal.position.y) + Number(randomY));
+
+
+
+                    animal.position.x = (newX > 0 ? (newX < 60 ? newX: 60) : 0);
+                    animal.position.y = (newY > 0 ? (newY < 70 ? newY: 70) : 0);
+
+                    animal.position.facing = randomY > 0 ? 'right' : 'left';
+                    // console.debug('lazy chicken did move')
+                } else {
+                    // console.debug('lazy chicken did not move')
+                }
+
+                setTimeout(() => {
+                    animal.position.moving = false;
+                }, 500)
+            });
         }
     },
     actions: {},

src/style/_gui-elements.scss

@@ -108,3 +108,8 @@
 .btn-pixel-mono:active {
     border-image: url('@/assets/gui/btn_monochrome_pressed.png') 15 repeat;
 }
+
+.bordered-content {
+    background-color: white;
+    border-radius: 20px;
+}

src/views/GameView.vue

@@ -33,7 +33,7 @@ export default {
         });
 
         window.addEventListener('drag', () => {
-            return true;
+            return false;
         });
     },
     methods: {
@@ -44,6 +44,7 @@ export default {
 
             game.$store.commit('updateTimestamp');
             game.$store.commit('updateCrops');
+            game.$store.commit('doAnimalMovement');
 
             /*** Check for passing midnight ***/
             if (moment(game.$store.initialized).format('Ymd') !== tickStart.format('Ymd')) {
@@ -52,7 +53,7 @@ export default {
             }
 
             /*** tick end & measurements ***/
-            let tickTimeInSeconds = tickStart.diff(moment(), 'milliseconds', true);
+            let tickTimeInSeconds = moment().diff(tickStart, 'milliseconds', true);
             if (tickTimeInSeconds > game.config.tickTime) {
                 console.warn('Tick took longer: '+tickTimeInSeconds);
             }

tests/unit/getSeason.spec.js

@@ -9,7 +9,7 @@ test('expect week 2 to return season summer', () => {
 });
 
 test('expect week 3 to return season autumn', () => {
-    expect(SeasonService.getSeasonByWeek(3)).toBe(Seasons.Autumn);
+    expect(SeasonService.getSeasonByWeek(3)).toBe(Seasons.Fall);
 });
 
 test('expect week 4 to return season winter', () => {
@@ -25,7 +25,7 @@ test('expect week 10 to return season summer', () => {
 });
 
 test('expect week 39 to return season autumn', () => {
-    expect(SeasonService.getSeasonByWeek(39)).toBe(Seasons.Autumn)
+    expect(SeasonService.getSeasonByWeek(39)).toBe(Seasons.Fall)
 });
 
 test('expect week 52 to return season winter', () => {