After creating a base class named AncientWisdom and multiple subclasses representing different aspects of ancient wisdom, I encountered an issue in Angular. When the end value triggers the logic for exceeding the maximum unlocks, all subclasses inheriting from AncientWisdom are updated to that value, causing unexpected changes in model values. Despite trying various solutions, including moving the if statement down to the class level, the error persists.
To resolve this confusion, I may opt to work with only the base class and set specific values. However, I am puzzled as to why my classes share variables without being static.
export class AncientWisdom {
startValue: number;
endValue: number;
name: string;
maxUnlocks: number;
constructor() {
this.endValue = 0;
this.startValue = 0;
this.maxUnlocks = -1;
}
calculateCost(): number {
if (this.endValue > this.maxUnlocks) {
this.endValue = this.maxUnlocks;
}
const currentCost = this.startValue * (this.startValue + 1);
const desiredCost = this.endValue * (this.endValue + 1);
const cost = (desiredCost - currentCost) * 400 / 2;
return cost > 0 ? cost : 0;
}
}
import { AncientWisdom } from "./ancientWisdom.model";
export class PermanentUpgradeEnergy extends AncientWisdom {
constructor() {
super();
this.name = 'Increased Energy Points';
this.maxUnlocks = 2;
}
calculateCost(): number {
const currentCost = this.startValue * (this.startValue + 1);
const desiredCost = this.endValue * (this.endValue + 1);
const cost = (desiredCost - currentCost) * 400 / 2;
return cost > 0 ? cost : 0;
}
}
import { AncientWisdom } from "./ancientWisdom.model";
export class PermanentUpgradeLessHP extends AncientWisdom {
constructor() {
super();
this.name = 'Reduced Boss HP';
this.maxUnlocks = 10;
}
calculateCost(): number {
const currentCost = this.startValue * (this.startValue + 1);
const desiredCost = this.endValue * (this.endValue + 1);
const cost = (desiredCost - currentCost) * 200 / 2;
return cost > 0 ? cost : 0;
}
}
export class AncientWisdomsComponent implements OnInit {
ancientWisdoms: AncientWisdom[] = [];
constructor() { }
ngOnInit() {
this.ancientWisdoms = [
new PermanentUpgradeMoreXP,
new PermanentUpgradeMoreGold,
new PermanentUpgradeMoreDrops,
new PermanentUpgradeMoreMovementSpeed,
new PermanentUpgradeLessHP,
new PermanentUpgradeEnergy,
new PermanentUpgradeMoreEnemies,
new PermanentUpgradeLongerBuffs,
new PermanentUpgradeMoreMercenaries
];
}
}
<h1 class="mt-5">Ancient Wisdoms</h1>
<form>
<div *ngFor="let ancientWisdom of ancientWisdoms" class="form-group row">
<div class="col-3">
<label class="form-label">{{ancientWisdom.name}}</label>
</div>
<div class="col">
<input type="number" class="form-control" name="startValue" [(ngModel)]="ancientWisdom.startValue" />
</div>
<div class="col">
<input type="number" class="form-control" name="endValue" [(ngModel)]="ancientWisdom.endValue" />
</div>
<div class="col">
{{ancientWisdom.calculateCost()}}
</div>
</div>
</form>