It works, don't know why

src/app/Farmers.ts

@@ -0,0 +1,62 @@
+import {FarmerDto} from "./farmer.dto";
+
+export default class Farmers {
+
+  private static farmerList: FarmerDto[] = [
+    {
+      id: 1,
+      name: "Farmer 1",
+      price: 1000,
+    },
+    {
+      id: 2,
+      name: "Farmer 2",
+      price: 10000,
+    },
+    {
+      id: 3,
+      name: "Farmer 3",
+      price: 100000,
+    },
+    {
+      id: 4,
+      name: "Farmer 4",
+      price: 1000000,
+    },
+    {
+      id: 5,
+      name: "Farmer 5",
+      price: 10000000,
+    },
+    {
+      id: 6,
+      name: "Farmer 6",
+      price: 100000000,
+    },
+    {
+      id: 7,
+      name: "Farmer 7",
+      price: 1000000000,
+    },
+    {
+      id: 8,
+      name: "Farmer 8",
+      price: 10000000000,
+    },
+    {
+      id: 9,
+      name: "Farmer 9",
+      price: 100000000000,
+    },
+    {
+      id: 10,
+      name: "Farmer 10",
+      price: 1000000000000,
+    }
+  ];
+
+  public static getFarmer(id: number): FarmerDto | null {
+    return this.farmerList.find(x => x.id === id) ?? null;
+  }
+
+}

src/app/Plant.ts

@@ -0,0 +1,104 @@
+import {FarmerDto} from "./farmer.dto";
+import {FormulasService} from "./formulas.service";
+import {PlayerService} from "./player.service";
+import {UtilitiesService} from "./utilities.service";
+import Plants from "./Plants";
+import {PlantDto} from "./plant.dto";
+
+export default class Plant {
+
+  id: number = 0;
+  private level: number = 0;
+  private timePassed: number = 0;
+  farmerBough: boolean = false;
+
+  private readonly plant: PlantDto | null;
+
+  public constructor(
+    data: any,
+    private readonly formulasService: FormulasService,
+    private readonly playerService: PlayerService,
+    private readonly utilitiesService: UtilitiesService,
+    ) {
+    this.id = data.id ?? 0;
+    this.level = data.level ?? 0;
+    this.timePassed = data.timePassed ?? 0;
+    this.farmerBough = data.farmerBough ?? false;
+    this.plant = Plants.getPlant(this.id);
+  }
+
+  public isFarmerBought(): boolean {
+    return this.farmerBough;
+  }
+
+  public getLevel(): number {
+    return this.level;
+  }
+  public getFarberBought(): boolean {
+    return this.farmerBough;
+  }
+  public getTimePassed(): number {
+    return this.timePassed;
+  }
+  public addTimePassed(time: number): number {
+    return this.timePassed += time;
+  }
+
+  public getPlantData(): PlantDto {
+    return this.plant!;
+  }
+
+  public getSaveData(): any {
+    return {
+      id: this.id,
+      level: this.level,
+      timePassed: this.timePassed,
+      farmerBough: this.farmerBough,
+    };
+  }
+
+  public getTimeToGrow(): number {
+    if (!this.plant) return 0;
+    return this.plant.timeToGrow;
+  }
+  getPrice() {
+    if (!this.plant) return 0;
+    return this.formulasService.getPrice(this.plant.basePrice, this.plant.growthRate, this.level);
+  }
+
+  buy() {
+    if (this.playerService.seeds >= this.getPrice()) {
+      this.playerService.seeds -= this.getPrice();
+      this.level += 1
+    }
+  }
+
+  harvest() {
+    if (this.getTimeToGrow() < this.timePassed) {
+      this.timePassed = 0;
+      this.playerService.seeds += this.getReward() * this.level;
+    }
+  }
+
+  getReward() {
+    if (!this.plant) return 0;
+    return this.plant.reward;
+  }
+
+  getRewardTotal() {
+    return this.level * this.getReward();
+  }
+
+  progress(): number {
+    return this.timePassed / this.getTimeToGrow() * 100;
+  }
+
+  timeLeft(): string {
+    return this.utilitiesService.convertToTime(this.getTimeToGrow() - this.timePassed);
+  }
+
+  canAfford(): boolean {
+    return this.playerService.seeds >= this.getPrice();
+  }
+
+}

src/app/Plants.ts

@@ -0,0 +1,105 @@
+import {PlantDto} from "./plant.dto";
+import Farmers from "./Farmers";
+
+export default class Plants {
+
+  private static plantList: PlantDto[] = [
+    {
+      id: 1,
+      name: 'Plant 1',
+      level: 1,
+      basePrice: 4,
+      growthRate: 1.07,
+      timeToGrow: 600,
+      timePassed: 0,
+      reward: 1,
+      farmer: Farmers.getFarmer(1)!,
+    },
+    {
+      id: 2,
+      name: 'Plant 2',
+      level: 0,
+      basePrice: 60,
+      growthRate: 1.15,
+      timeToGrow: 3000,
+      timePassed: 0,
+      reward: 60,
+      farmer: Farmers.getFarmer(2)!,
+    },
+    {
+      id: 3,
+      name: 'Plant 3',
+      level: 0,
+      basePrice: 720,
+      growthRate: 1.14,
+      timeToGrow: 6000,
+      timePassed: 0,
+      reward: 540,
+      farmer: Farmers.getFarmer(3)!,
+    },
+    {
+      id: 4,
+      name: 'Plant 4',
+      level: 0,
+      basePrice: 8640,
+      growthRate: 1.13,
+      timeToGrow: 12000,
+      timePassed: 0,
+      reward: 4320,
+      farmer: Farmers.getFarmer(4)!,
+    },
+    {
+      id: 5,
+      name: 'Plant 5',
+      level: 0,
+      basePrice: 103680,
+      growthRate: 1.12,
+      timeToGrow: 24000,
+      timePassed: 0,
+      reward: 51840,
+      farmer: Farmers.getFarmer(5)!,
+    },
+    {
+      id: 6,
+      name: 'Plant 6',
+      level: 0,
+      basePrice: 51200,
+      growthRate: 1.11,
+      timeToGrow: 45000,
+      timePassed: 0,
+      reward: 102400,
+      farmer: Farmers.getFarmer(6)!,
+    },
+    {
+      id: 7,
+      name: 'Plant 7',
+      level: 0,
+      basePrice: 1000000,
+      growthRate: 1.106,
+      timeToGrow: 60000,
+      timePassed: 0,
+      reward: 204800,
+      farmer: Farmers.getFarmer(7)!,
+    },
+    {
+      id: 8,
+      name: 'Plant 8',
+      level: 0,
+      basePrice: 5000000,
+      growthRate: 1.10,
+      timeToGrow: 60000,
+      timePassed: 0,
+      reward: 614150,
+      farmer: Farmers.getFarmer(8)!,
+    }
+  ]
+
+  public static getPlantCount() {
+    return this.plantList.length;
+  }
+
+  public static getPlant(id: number): PlantDto | null {
+    return this.plantList.find(x => x.id === id) ?? null;
+  }
+
+}

src/app/farmer-container/farmer-container.component.html

@@ -0,0 +1,14 @@
+<div class="farmer-container" *ngIf="plant && !plant.isFarmerBought()">
+  <div class="farmer-image">
+    <img src="/assets/plant.png" alt="plant" />
+  </div>
+  <div class="upgrade-button" (click)="buy()" [class.disabled]="!canAfford()">
+    {{ getPrice() }} seeds
+  </div>
+  <div class="name">
+    {{ plant.getPlantData().farmer.name }}
+  </div>
+  <div class="reward">
+    Automated crops gathering for {{plant.getPlantData().name}}
+  </div>
+</div>

src/app/farmer-container/farmer-container.component.scss

@@ -0,0 +1,53 @@
+.farmer-container {
+  position: relative;
+  width: 100%;
+  height: calc(100vh / 8);
+  background: #005BBB;
+  margin-top: 1vh;
+}
+
+.farmer-image {
+  position: absolute;
+  top: 1vh;
+  right: 1vh;
+  height: calc(100vh / 8 - 2vh);
+  width: calc(100vh / 8 - 2vh);
+}
+
+.upgrade-button {
+  position: absolute;
+  top: 1vh;
+  left: 1vh;
+  text-align: center;
+  height: calc(100vh / 8 - 2vh);
+  line-height: calc((100vh / 8 - 2vh) / 2);
+  background: #FFD500;
+  width: 20vh;
+  color: black;
+  font-weight: bold;
+}
+
+.name {
+  position: absolute;
+  top: 1vh;
+  left: 22vh;
+  text-align: center;
+  height: calc(100vh / 16 - 3vh);
+  line-height: calc(100vh / 16 - 3vh);
+  width: calc(100% - 1vh - 100vh / 8 - 21vh);
+}
+
+.reward {
+  position: absolute;
+  top: calc(100vh / 16 - 2vh);
+  left: 22vh;
+  text-align: center;
+  height: calc(100vh / 16 - 3vh);
+  line-height: calc(100vh / 16 - 3vh);
+  width: calc(100% - 1vh - 100vh / 8 - 21vh);
+}
+
+
+.disabled {
+  background: #cacaca;
+}

src/app/farmer-container/farmer-container.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { FarmerContainerComponent } from './farmer-container.component';
+
+describe('FarmerContainerComponent', () => {
+  let component: FarmerContainerComponent;
+  let fixture: ComponentFixture<FarmerContainerComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FarmerContainerComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FarmerContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/farmer-container/farmer-container.component.ts

@@ -0,0 +1,30 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {PlantDto} from "../plant.dto";
+import {PlayerService} from "../player.service";
+import Plant from "../Plant";
+
+@Component({
+  selector: 'app-farmer-container',
+  templateUrl: './farmer-container.component.html',
+  styleUrls: ['./farmer-container.component.scss'],
+})
+export class FarmerContainerComponent implements OnInit {
+
+  @Input('plant') plant!: Plant;
+  constructor(private playerService: PlayerService) { }
+
+  getPrice() {
+    if (!this.plant) return 0;
+    return this.plant.getPlantData().farmer.price;
+  }
+  buy() {
+    this.playerService.buyFarmer(this.plant.id);
+  }
+
+  canAfford(): boolean {
+    return this.playerService.canAffordFarmer(this.plant.id);
+  }
+
+  ngOnInit() {}
+
+}

src/app/farmer.dto.ts

@@ -1,6 +1,5 @@
 export type FarmerDto = {
+  id: number;
   name: string,
-  level: number,
-  basePrice: number,
-  boost: number,
+  price: number,
 }

src/app/home/home.module.ts

@@ -7,6 +7,7 @@ import { HomePage } from './home.page';
 import { HomePageRoutingModule } from './home-routing.module';
 import {PlantContainerComponent} from "../plant-container/plant-container.component";
 import {ProgressBarComponent} from "../progress-bar/progress-bar.component";
+import {FarmerContainerComponent} from "../farmer-container/farmer-container.component";
 
 
 @NgModule({
@@ -16,6 +17,6 @@ import {ProgressBarComponent} from "../progress-bar/progress-bar.component";
     IonicModule,
     HomePageRoutingModule
   ],
-  declarations: [HomePage, PlantContainerComponent, ProgressBarComponent]
+    declarations: [HomePage, PlantContainerComponent, ProgressBarComponent, FarmerContainerComponent]
 })
 export class HomePageModule {}

src/app/home/home.page.html

@@ -14,19 +14,25 @@
       </div>
     </div>
     <div id="navigation">
-      <div>Plants</div>
-      <div>Farmers</div>
+      <div (click)="activeTab = 0">Plants</div>
+      <div (click)="activeTab = 1">Farmers</div>
       <div>Boosters</div>
       <div>Upgrades</div>
       <div>Stats</div>
     </div>
-    <div id="plants">
+    <div id="plants" *ngIf="activeTab === 0">
       <ng-container *ngFor="let plant of getPlants()">
         <app-plant-container
           [plant]="plant"
-          (onBuy)="onBuy(plant)"
         ></app-plant-container>
       </ng-container>
     </div>
+    <div id="farmers" *ngIf="activeTab === 1">
+      <ng-container *ngFor="let plant of getPlants()">
+        <app-farmer-container
+          [plant]="plant"
+        ></app-farmer-container>
+      </ng-container>
+    </div>
   </div>
 </ion-content>

src/app/home/home.page.ts

@@ -3,6 +3,8 @@ import {PlayerService} from "../player.service";
 import {FormulasService} from "../formulas.service";
 import {UtilitiesService} from "../utilities.service";
 import {PlantDto} from "../plant.dto";
+import {PlayerPlantDto} from "../playerPlant.dto";
+import Plant from "../Plant";
 
 @Component({
   selector: 'app-home',
@@ -12,6 +14,8 @@ import {PlantDto} from "../plant.dto";
 })
 export class HomePage {
 
+  public activeTab: number = 0;
+
   constructor(
     private playerService: PlayerService,
     private formulasService: FormulasService
@@ -23,18 +27,10 @@ export class HomePage {
     return this.playerService.seeds;
   }
 
-  getPlants(): PlantDto[] {
+  getPlants(): Plant[] {
     return this.playerService.plants;
   }
 
-  onBuy(plant: PlantDto) {
-    const price = this.formulasService.getPrice(plant.basePrice, plant.growthRate, plant.level);
-    if (price <= this.playerService.seeds) {
-      plant.level += 1;
-      this.playerService.seeds -= price;
-    }
-  }
-
   gameLoop() {
 
     const currentTime = Date.now();
@@ -42,12 +38,14 @@ export class HomePage {
     this.playerService.lastTime = currentTime;
 
     for(let plant of this.playerService.plants) {
-      if (plant.level > 0) {
-        plant.timePassed += dt;
+      if (plant.getLevel() > 0) {
+        plant.addTimePassed(dt);
 
-        while (plant.timePassed >= plant.timeToGrow) {
-          this.playerService.seeds += plant.reward * plant.level;
-          plant.timePassed -= plant.timeToGrow;
+        if (plant.getFarberBought()) {
+          while (plant.getTimePassed() >= plant.getPlantData().timeToGrow) {
+            this.playerService.seeds += plant.getRewardTotal();
+            plant.addTimePassed(-plant.getTimeToGrow());
+          }
         }
       }
     }

src/app/plant-container/plant-container.component.html

@@ -1,26 +1,27 @@
-<div class="plant-container" *ngIf="plant">
+<div class="plant-container" *ngIf="plant" (click)="plant.harvest()">
   <div class="plant-image">
     <img src="/assets/plant.png" alt="plant" />
-    <div class="plant-level">Lv. {{ plant.level }}</div>
+    <div class="plant-level">Lv. {{ plant.getLevel() }}</div>
   </div>
-  <div class="upgrade-button" (click)="buy()">
-    Upgrade to Lv. {{ plant.level + 1 }}<br />
-    {{ getPrice() }} seeds
+  <div class="upgrade-button" (click)="plant.buy()" [class.disabled]="!plant.canAfford()">
+    Upgrade to Lv. {{ plant.getLevel() + 1 }}<br />
+    {{ plant.getPrice() }} seeds
   </div>
   <div class="name">
-    {{ plant.name }}
+    {{ plant.getPlantData().name }}
   </div>
   <div class="reward">
-    {{ getReward() }} seeds/plant
+    {{ plant.getReward() }} seeds/plant
   </div>
   <app-progress-bar
-    [fill]="progress()"
+    [fill]="plant.progress()"
     [fillColor]="'#FFD500'"
     [backgroundColor]="'#005BBB'"
-    [progressBarText]="timeLeft()"
+    [progressBarText]="plant.timeLeft()"
     class="plant-progress"
   ></app-progress-bar>
   <div class="reward-total">
-    + {{ getRewardTotal() }} seeds
+    + {{ plant.getRewardTotal() }} seeds
   </div>
+  <div class="ready-to-harvest" *ngIf="plant.getTimePassed() > plant.getTimeToGrow()">Ready To Harvest</div>
 </div>

src/app/plant-container/plant-container.component.scss

@@ -76,3 +76,20 @@
   line-height: calc(100vh / 16 - 3vh);
   width: calc(100% - 1vh - 100vh / 8 - 21vh);
 }
+
+.ready-to-harvest {
+  position: absolute;
+  top: 1vh;
+  right: 1vh;
+  height: calc(100vh / 8 - 2vh);
+  width: calc(100vh / 8 - 2vh);
+  background: #1a1a1acc;
+  color: white;
+  line-height: calc(100vh / 25);
+  text-align: center;
+}
+
+
+.disabled {
+  background: #cacaca;
+}

src/app/plant-container/plant-container.component.ts

@@ -1,53 +1,18 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {FormulasService} from "../formulas.service";
-import {UtilitiesService} from "../utilities.service";
-import {PlantDto} from "../plant.dto";
+import {Component, Input, OnInit} from '@angular/core';
+import Plant from "../Plant";
 
 @Component({
   selector: 'app-plant-container',
   templateUrl: './plant-container.component.html',
   styleUrls: ['./plant-container.component.scss'],
-  // changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PlantContainerComponent implements OnInit {
 
-  @Input('plant') plant: PlantDto | undefined;
-  @Output('onBuy') onBuy = new EventEmitter<PlantDto>();
+  @Input('plant') plant!: Plant;
 
-  constructor(
-    private formulasService: FormulasService,
-    private utilitiesService: UtilitiesService
-  ) { }
+  constructor() { }
 
   ngOnInit() {}
 
-  buy() {
-    this.onBuy.emit(this.plant);
-  }
-
-  getPrice() {
-    if (!this.plant) return 0;
-    return this.formulasService.getPrice(this.plant.basePrice, this.plant.growthRate, this.plant.level);
-  }
-
-  getReward() {
-    if (!this.plant) return 0;
-    return this.plant.reward;
-  }
-
-  getRewardTotal() {
-    if (!this.plant) return 0;
-    return this.plant.level * this.plant.reward;
-  }
-
-  progress(): number {
-    if (!this.plant) return 0;
-    return this.plant.timePassed / this.plant.timeToGrow * 100;
-  }
-
-  timeLeft(): string {
-    if (!this.plant) return '';
-    return this.utilitiesService.convertToTime(this.plant.timeToGrow - this.plant.timePassed);
-  }
 
 }

src/app/plant.dto.ts

@@ -1,4 +1,7 @@
+import {FarmerDto} from "./farmer.dto";
+
 export type PlantDto = {
+  id: number,
   name: string,
   level: number,
   basePrice: number,
@@ -6,4 +9,5 @@ export type PlantDto = {
   timeToGrow: number,
   timePassed: number,
   reward: number,
+  farmer: FarmerDto,
 }

src/app/player.service.ts

@@ -1,102 +1,63 @@
 import { Injectable } from '@angular/core';
 import {PlantDto} from "./plant.dto";
+import Plant from "./Plant";
+import Plants from "./Plants";
+import {FormulasService} from "./formulas.service";
+import {UtilitiesService} from "./utilities.service";
 
 @Injectable({
   providedIn: 'root'
 })
 export class PlayerService {
 
+  private lastSaved = Date.now();
   public lastTime = Date.now();
   public seeds: number = 0;
-  public plants: PlantDto[] = [
-    {
-      name: 'Plant 1',
-      level: 1,
-      basePrice: 4,
-      growthRate: 1.07,
-      timeToGrow: 600,
-      timePassed: 0,
-      reward: 1,
-    },
-    {
-      name: 'Plant 2',
-      level: 0,
-      basePrice: 60,
-      growthRate: 1.15,
-      timeToGrow: 3000,
-      timePassed: 0,
-      reward: 60,
-    },
-    {
-      name: 'Plant 3',
-      level: 0,
-      basePrice: 720,
-      growthRate: 1.14,
-      timeToGrow: 6000,
-      timePassed: 0,
-      reward: 540,
-    },
-    {
-      name: 'Plant 4',
-      level: 0,
-      basePrice: 8640,
-      growthRate: 1.13,
-      timeToGrow: 12000,
-      timePassed: 0,
-      reward: 4320,
-    },
-    {
-      name: 'Plant 5',
-      level: 0,
-      basePrice: 103680,
-      growthRate: 1.12,
-      timeToGrow: 24000,
-      timePassed: 0,
-      reward: 51840,
-    },
-    {
-      name: 'Plant 6',
-      level: 0,
-      basePrice: 51200,
-      growthRate: 1.11,
-      timeToGrow: 45000,
-      timePassed: 0,
-      reward: 102400,
-    },
-    {
-      name: 'Plant 7',
-      level: 0,
-      basePrice: 1000000,
-      growthRate: 1.106,
-      timeToGrow: 60000,
-      timePassed: 0,
-      reward: 204800,
-    },
-    {
-      name: 'Plant 8',
-      level: 0,
-      basePrice: 5000000,
-      growthRate: 1.10,
-      timeToGrow: 60000,
-      timePassed: 0,
-      reward: 614150,
-    }
-  ];
-  constructor() {
+  public plants: Plant[] = [];
+  constructor(
+    private readonly formulasService: FormulasService,
+    private readonly utilitiesService: UtilitiesService,
+  ) {
     const data = localStorage.getItem('PlayerSave');
     if (data) {
       const parsed = JSON.parse(data);
-      this.plants = parsed.plants;
+
+      for (let index = 1; index < Plants.getPlantCount(); index++) {
+        this.plants.push(new Plant({...(parsed.plants.find((x: any) => x.id === index) ?? {}), id: index}, formulasService, this, utilitiesService));
+      }
+
+      // this.plants = parsed.plants.map((plant: PlantDto) => ({...this.BlankPlant, ...plant}));
       this.seeds = parsed.seeds;
       this.lastTime = parsed.lastTime ? parsed.lastTime : Date.now();
+    } else {
+      // add default plants
     }
   }
 
   save() {
+    if (this.lastSaved + 1000 > Date.now()) return;
+    this.lastSaved = Date.now();
     localStorage.setItem('PlayerSave', JSON.stringify({
       seeds: this.seeds,
-      plants: this.plants,
+      plants: this.plants.map(plant => plant.getSaveData()),
       lastTime: this.lastTime
     }));
   }
+
+
+
+  public canAffordFarmer(id: number): boolean {
+    const plant = this.plants.find(x => x.id === id);
+    if (!plant) return false;
+    return this.seeds >= plant.getPlantData().farmer.price;
+  }
+
+  public buyFarmer(id: number) {
+    const plant = this.plants.find(x => x.id === id);
+    if (!plant) return;
+    if (!this.canAffordFarmer(id)) return;
+    if (plant.isFarmerBought()) return;
+    this.seeds -= plant.getPlantData().farmer.price;
+    plant.farmerBough = true;
+  }
 }

src/app/playerPlant.dto.ts

@@ -0,0 +1,8 @@
+import {FarmerDto} from "./farmer.dto";
+
+export type PlayerPlantDto = {
+  id: number,
+  level: number,
+  timePassed: number,
+  farmerBought: boolean,
+}

src/app/progress-bar/progress-bar.component.html

@@ -1,4 +1,4 @@
 <div class="progress-bar-container" [style]="'background: ' + backgroundColor + ';'">
-  <div class="progress-bar-progress" [style]="'width: '+fill+'%; background: ' + fillColor + ';'"></div>
+  <div class="progress-bar-progress" [style]="'width: '+getFill()+'%; background: ' + fillColor + ';'"></div>
   <div class="progress-bar-text">{{ progressBarText }}</div>
 </div>

src/app/progress-bar/progress-bar.component.ts

@@ -17,4 +17,10 @@ export class ProgressBarComponent implements OnInit {
 
   ngOnInit() {}
 
+  getFill(): number {
+    if (this.fill < 0) return 0;
+    if (this.fill > 100) return 100;
+    return this.fill;
+  }
+
 }

src/app/utilities.service.ts

@@ -8,6 +8,7 @@ export class UtilitiesService {
   constructor() { }
 
   convertToTime(num: number) {
+    if (num < 0) num = 0;
     num = Math.round(num / 1000);
     const days = Math.floor(num / 60 / 60 / 24);
     num -= days * 60 * 60 * 24;