diff --git a/src/app/Plant.ts b/src/app/Plant.ts index 52f26b3..4cb17e5 100644 --- a/src/app/Plant.ts +++ b/src/app/Plant.ts @@ -59,13 +59,17 @@ export default class Plant { public getTimeToGrow(): number { if (!this.plant) return 0; - return this.plant.timeToGrow; + return this.plant.timeToGrow * Math.pow(0.9, Math.floor(this.level / 25)); } getPrice() { if (!this.plant) return 0; return this.formulasService.getPrice(this.plant.basePrice, this.plant.growthRate, this.level); } + getPriceFormatted() { + return this.utilitiesService.formatNumber(this.getPrice()); + } + buy() { if (this.playerService.seeds >= this.getPrice()) { this.playerService.seeds -= this.getPrice(); @@ -85,9 +89,16 @@ export default class Plant { return this.plant.reward; } + getRewardFormatted() { + return this.utilitiesService.formatNumber(this.getReward()); + } + getRewardTotal() { return this.level * this.getReward(); } + getRewardTotalFormatted() { + return this.utilitiesService.formatNumber(this.getRewardTotal()); + } progress(): number { return this.timePassed / this.getTimeToGrow() * 100; diff --git a/src/app/config.service.spec.ts b/src/app/config.service.spec.ts new file mode 100644 index 0000000..aca64dd --- /dev/null +++ b/src/app/config.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ConfigService } from './config.service'; + +describe('ConfigService', () => { + let service: ConfigService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ConfigService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/config.service.ts b/src/app/config.service.ts new file mode 100644 index 0000000..82038b0 --- /dev/null +++ b/src/app/config.service.ts @@ -0,0 +1,69 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class ConfigService { + + private hats = [ + '', + 'assets/hat.png', + ]; + private glasses = [ + '', + 'assets/glasses.png', + ]; + private hoodies = [ + '', + 'assets/hoodie.png', + ]; + private pants = [ + '', + 'assets/shorts.png', + ]; + private shoes = [ + '', + 'assets/shoes.png', + ]; + constructor() { } + + public getHats(): string[] { + return this.hats; + } + + public getHatByIndex(index: number): string { + return this.hats[index] ?? ''; + } + + public getGlasses(): string[] { + return this.glasses; + } + + public getGlassesByIndex(index: number): string { + return this.glasses[index] ?? ''; + } + + public getHoodies(): string[] { + return this.hoodies; + } + + public getHoodieByIndex(index: number): string { + return this.hoodies[index] ?? ''; + } + + public getPants(): string[] { + return this.pants; + } + + public getPantsByIndex(index: number): string { + return this.pants[index] ?? ''; + } + + public getShoes(): string[] { + return this.shoes; + } + + public getShoesByIndex(index: number): string { + return this.shoes[index] ?? ''; + } +} diff --git a/src/app/farmer-container/farmer-container.component.html b/src/app/farmer-container/farmer-container.component.html index ecc03c1..6879b9f 100644 --- a/src/app/farmer-container/farmer-container.component.html +++ b/src/app/farmer-container/farmer-container.component.html @@ -3,7 +3,7 @@ plant
- {{ getPrice() }} seeds + {{ getPriceFormatted() }} seeds
{{ plant.getPlantData().farmer.name }} diff --git a/src/app/farmer-container/farmer-container.component.ts b/src/app/farmer-container/farmer-container.component.ts index 7eee4a4..7231ab4 100644 --- a/src/app/farmer-container/farmer-container.component.ts +++ b/src/app/farmer-container/farmer-container.component.ts @@ -2,6 +2,7 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import {PlantDto} from "../plant.dto"; import {PlayerService} from "../player.service"; import Plant from "../Plant"; +import {UtilitiesService} from "../utilities.service"; @Component({ selector: 'app-farmer-container', @@ -11,12 +12,18 @@ import Plant from "../Plant"; export class FarmerContainerComponent implements OnInit { @Input('plant') plant!: Plant; - constructor(private playerService: PlayerService) { } + constructor( + private playerService: PlayerService, + private utilitiesService: UtilitiesService, + ) { } getPrice() { if (!this.plant) return 0; return this.plant.getPlantData().farmer.price; } + getPriceFormatted() { + return this.utilitiesService.formatNumber(this.getPrice()); + } buy() { this.playerService.buyFarmer(this.plant.id); } diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index df5fb90..6335753 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -8,6 +8,7 @@ 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"; +import {ProfileComponent} from "../profile/profile.component"; @NgModule({ @@ -17,6 +18,6 @@ import {FarmerContainerComponent} from "../farmer-container/farmer-container.com IonicModule, HomePageRoutingModule ], - declarations: [HomePage, PlantContainerComponent, ProgressBarComponent, FarmerContainerComponent] + declarations: [HomePage, PlantContainerComponent, ProgressBarComponent, FarmerContainerComponent, ProfileComponent] }) export class HomePageModule {} diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html index 273173c..c5e2083 100644 --- a/src/app/home/home.page.html +++ b/src/app/home/home.page.html @@ -2,8 +2,9 @@
diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss index 861b408..58c0443 100644 --- a/src/app/home/home.page.scss +++ b/src/app/home/home.page.scss @@ -21,14 +21,10 @@ position: absolute; top: 0; left: 0; - height: calc((100vh / 6) - 4vh); + height: calc((100vh / 6)); aspect-ratio: calc(54/64); - img { - height: calc((100vh / 6) - 4vh); - aspect-ratio: calc(54/64); - margin: 2vh; - } + padding: 1vh; } #seeds { @@ -75,7 +71,35 @@ width: 100%; line-height: 3.6vh; text-align: center; + + &.active { + background: #3a7be0; + } } } +#boosters, #upgrades, #stats { + text-align: center; + color: black; + font-size: 2rem; + padding-top: 10vh; +} +#plants, #farmers, #character { + position: absolute; + top: calc(100vh / 6 + 3vh); + left: 0; + right: 0; + bottom: 0; + overflow-y: scroll; +} + +.pfp-display { + width: 20vh; + magrin: 1vh; +} + +.image-container { + display: grid; + grid-template-columns: repeat(5, 1fr); +} diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts index a71df62..56bc33c 100644 --- a/src/app/home/home.page.ts +++ b/src/app/home/home.page.ts @@ -5,6 +5,7 @@ import {UtilitiesService} from "../utilities.service"; import {PlantDto} from "../plant.dto"; import {PlayerPlantDto} from "../playerPlant.dto"; import Plant from "../Plant"; +import {ConfigService} from "../config.service"; @Component({ selector: 'app-home', @@ -18,19 +19,61 @@ export class HomePage { constructor( private playerService: PlayerService, - private formulasService: FormulasService + private formulasService: FormulasService, + private readonly configService: ConfigService, + private readonly utilitiesService: UtilitiesService, ) { this.gameLoop(); } - getSeeds(): number { - return this.playerService.seeds; + getSeeds(): string { + return this.utilitiesService.formatNumber(this.playerService.seeds); } getPlants(): Plant[] { return this.playerService.plants; } + getAllHats() { + return this.configService.getHats(); + } + + getAllGlasses() { + return this.configService.getGlasses(); + } + + getAllHoodies() { + return this.configService.getHoodies(); + } + + getAllPants() { + return this.configService.getPants(); + } + + getAllShoes() { + return this.configService.getShoes(); + } + + setHat(index: number) { + this.playerService.profilePicture.hat = index; + } + + setGlasses(index: number) { + this.playerService.profilePicture.glasses = index; + } + + setHoodie(index: number) { + this.playerService.profilePicture.hoodie = index; + } + + setPants(index: number) { + this.playerService.profilePicture.pants = index; + } + + setShoes(index: number) { + this.playerService.profilePicture.shoes = index; + } + gameLoop() { const currentTime = Date.now(); @@ -42,7 +85,7 @@ export class HomePage { plant.addTimePassed(dt); if (plant.getFarberBought()) { - while (plant.getTimePassed() >= plant.getPlantData().timeToGrow) { + while (plant.getTimePassed() >= plant.getTimeToGrow()) { this.playerService.seeds += plant.getRewardTotal(); plant.addTimePassed(-plant.getTimeToGrow()); } diff --git a/src/app/plant-container/plant-container.component.html b/src/app/plant-container/plant-container.component.html index c0ffcbf..1534ebf 100644 --- a/src/app/plant-container/plant-container.component.html +++ b/src/app/plant-container/plant-container.component.html @@ -5,23 +5,23 @@
Upgrade to Lv. {{ plant.getLevel() + 1 }}
- {{ plant.getPrice() }} seeds + {{ plant.getPriceFormatted() }} seeds
{{ plant.getPlantData().name }}
- {{ plant.getReward() }} seeds/plant + {{ plant.getRewardFormatted() }} seeds/plant
-
- + {{ plant.getRewardTotal() }} seeds -
-
Ready To Harvest
+
Ready To Harvest
diff --git a/src/app/player.service.ts b/src/app/player.service.ts index 94a4a34..2b055a8 100644 --- a/src/app/player.service.ts +++ b/src/app/player.service.ts @@ -14,6 +14,14 @@ export class PlayerService { public lastTime = Date.now(); public seeds: number = 0; public plants: Plant[] = []; + + public profilePicture = { + hat: 0, + glasses: 0, + hoodie: 0, + pants: 0, + shoes: 0, + } constructor( private readonly formulasService: FormulasService, private readonly utilitiesService: UtilitiesService, @@ -28,6 +36,7 @@ export class PlayerService { // this.plants = parsed.plants.map((plant: PlantDto) => ({...this.BlankPlant, ...plant})); this.seeds = parsed.seeds; + this.profilePicture = parsed.profilePicture ?? this.profilePicture; this.lastTime = parsed.lastTime ? parsed.lastTime : Date.now(); } else { // add default plants @@ -40,7 +49,8 @@ export class PlayerService { localStorage.setItem('PlayerSave', JSON.stringify({ seeds: this.seeds, plants: this.plants.map(plant => plant.getSaveData()), - lastTime: this.lastTime + lastTime: this.lastTime, + profilePicture: this.profilePicture, })); } diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html new file mode 100644 index 0000000..89ae849 --- /dev/null +++ b/src/app/profile/profile.component.html @@ -0,0 +1,8 @@ +
+ + + + + + +
diff --git a/src/app/profile/profile.component.scss b/src/app/profile/profile.component.scss new file mode 100644 index 0000000..5cbd5e9 --- /dev/null +++ b/src/app/profile/profile.component.scss @@ -0,0 +1,12 @@ +.profile { + position: relative; + width: 100%; + aspect-ratio: calc(54/64); + + img { + position: absolute; + top: 0; + left: 0; + width: 100%; + } +} diff --git a/src/app/profile/profile.component.spec.ts b/src/app/profile/profile.component.spec.ts new file mode 100644 index 0000000..c0b2686 --- /dev/null +++ b/src/app/profile/profile.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { ProfileComponent } from './profile.component'; + +describe('ProfileComponent', () => { + let component: ProfileComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ ProfileComponent ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(ProfileComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts new file mode 100644 index 0000000..e9b5cdd --- /dev/null +++ b/src/app/profile/profile.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import {PlayerService} from "../player.service"; +import {ConfigService} from "../config.service"; + +@Component({ + selector: 'app-profile', + templateUrl: './profile.component.html', + styleUrls: ['./profile.component.scss'], +}) +export class ProfileComponent implements OnInit { + + constructor(private readonly playerService: PlayerService, private readonly configService: ConfigService) { } + + ngOnInit() {} + + public getHat() { + return this.configService.getHatByIndex(this.playerService.profilePicture.hat); + } + public getGlasses() { + return this.configService.getGlassesByIndex(this.playerService.profilePicture.glasses); + } + public getHoodie() { + return this.configService.getHoodieByIndex(this.playerService.profilePicture.hoodie); + } + public getPants() { + return this.configService.getPantsByIndex(this.playerService.profilePicture.pants); + } + public getShoes() { + return this.configService.getShoesByIndex(this.playerService.profilePicture.shoes); + } + +} diff --git a/src/app/progress-bar/progress-bar.component.html b/src/app/progress-bar/progress-bar.component.html index 6e485e3..e298fa9 100644 --- a/src/app/progress-bar/progress-bar.component.html +++ b/src/app/progress-bar/progress-bar.component.html @@ -1,4 +1,8 @@
-
-
{{ progressBarText }}
+
{{ progressBarText }}
+
{{ progressBarTextRight }}
+
+
{{ progressBarText }}
+
{{ progressBarTextRight }}
+
diff --git a/src/app/progress-bar/progress-bar.component.scss b/src/app/progress-bar/progress-bar.component.scss index dddb247..14b267f 100644 --- a/src/app/progress-bar/progress-bar.component.scss +++ b/src/app/progress-bar/progress-bar.component.scss @@ -1,6 +1,6 @@ .progress-bar-container { position: relative; - width: 100%; + width: calc(var(--game-width) - 1vh - 100vh / 8); height: 100%; .progress-bar-progress { @@ -8,13 +8,24 @@ right: 0; top: 0; height: 100%; + overflow: hidden; } .progress-bar-text { position: absolute; - width: 100%; + width: calc(var(--game-width) - 1vh - 100vh / 8); height: 100%; text-align: center; line-height: 180%; + right: 0; + } + + .progress-bar-text-right { + position: absolute; + width: calc(var(--game-width) - 1vh - 100vh / 8); + height: 100%; + text-align: right; + line-height: 180%; + right: 0; } } diff --git a/src/app/progress-bar/progress-bar.component.ts b/src/app/progress-bar/progress-bar.component.ts index 173c760..1397f2b 100644 --- a/src/app/progress-bar/progress-bar.component.ts +++ b/src/app/progress-bar/progress-bar.component.ts @@ -10,8 +10,11 @@ export class ProgressBarComponent implements OnInit { @Input('fill') fill: number = 0; @Input('progressBarText') progressBarText: string = ''; + @Input('progressBarTextRight') progressBarTextRight: string = ''; @Input('backgroundColor') backgroundColor: string = '#1a1a1a'; @Input('fillColor') fillColor: string = '#2dd36f'; + @Input('backgroundFontColor') backgroundFontColor: string = '#2dd36f'; + @Input('fillFontColor') fillFontColor: string = '#1a1a1a'; constructor() { } diff --git a/src/app/utilities.service.ts b/src/app/utilities.service.ts index 3cbfba0..a18e50e 100644 --- a/src/app/utilities.service.ts +++ b/src/app/utilities.service.ts @@ -30,6 +30,18 @@ export class UtilitiesService { return (minutes > 9 ? minutes : '0' + minutes) + ':' + (seconds > 9 ? seconds : '0' + seconds); } - return seconds + ' sec'; + return '00:' + (seconds > 9 ? seconds : '0' + seconds); + } + + formatNumber(num: number): string { + if (num < 1e3) return num.toString(); + if (num < 1e6) return Math.round(num)/1e3 + 'k'; + if (num < 1e9) return Math.floor(num/1e3)/1e3 + 'M'; + if (num < 1e12) return Math.floor(num/1e6)/1e3 + 'B'; + if (num < 1e15) return Math.floor(num/1e9)/1e3 + 'T'; + if (num < 1e18) return Math.floor(num/1e12)/1e3 + 'aa'; + if (num < 1e21) return Math.floor(num/1e15)/1e3 + 'ab'; + if (num < 1e24) return Math.floor(num/1e18)/1e3 + 'ac'; + return '0'; } } diff --git a/src/assets/blank.png b/src/assets/blank.png new file mode 100644 index 0000000..329b532 Binary files /dev/null and b/src/assets/blank.png differ diff --git a/src/assets/glasses.png b/src/assets/glasses.png new file mode 100644 index 0000000..a848c8b Binary files /dev/null and b/src/assets/glasses.png differ diff --git a/src/assets/hat.png b/src/assets/hat.png new file mode 100644 index 0000000..71444a6 Binary files /dev/null and b/src/assets/hat.png differ diff --git a/src/assets/hoodie.png b/src/assets/hoodie.png new file mode 100644 index 0000000..66ed05a Binary files /dev/null and b/src/assets/hoodie.png differ diff --git a/src/assets/pfp-default.png b/src/assets/pfp-default.png index 0339957..1fa6aa2 100644 Binary files a/src/assets/pfp-default.png and b/src/assets/pfp-default.png differ diff --git a/src/assets/shoes.png b/src/assets/shoes.png new file mode 100644 index 0000000..9ab3ae8 Binary files /dev/null and b/src/assets/shoes.png differ diff --git a/src/assets/shorts.png b/src/assets/shorts.png new file mode 100644 index 0000000..7ea70cb Binary files /dev/null and b/src/assets/shorts.png differ