Recently, I delved into creating an Idle Game in TypeScript (similar to cookie clicker, but not quite as refined yet!). My knowledge of TypeScript and JavaScript is still at a beginner level.
The challenge arose when I decided to switch the "cost" attribute from a simple number to a more complex type called "Cost". The intention behind this change was to accommodate future objects (like the winged rat) that would require multiple resources, not just scrap. I have a feeling that my implementation of Cost might be flawed somewhere, or there could be issues with the constructor's setup, or it's not being instantiated correctly.
Currently, the problem arises when I try to access "resourceList["rat"].cost.costList["scrap"]", as it returns undefined. This issue results in the "rat" button remaining disabled indefinitely.
class Resource {
name: string;
amount : number;
cost: Cost;
value: number;
display() : string
{
if(this.amount - Math.floor(this.amount) > 0)
{
return this.amount.toFixed(2);
}
else
return this.amount.toString();
}
}
class Cost {
costList: { [id: string] : number; } = {};
constructor(res:string[], cost:number[]){
var i = 0;
for(var r in res)
{
var c = cost[i];
this.costList[r] = c;
i++;
}
return this;
}
}
class Scrap extends Resource {
constructor(public amount) {
super();
this.name = "scrap";
this.cost = new Cost([""],[0]);
document.getElementById('scrapLbl').innerHTML = this.name + ": ";
}
}
class Rat extends Resource {
constructor(public amount) {
super();
this.name = "rat";
this.cost = new Cost(["scrap"],[10]);
this.value = 1;
document.getElementById('ratLbl').innerHTML = this.name + ": ";
}
}
class wRat extends Resource {
constructor(public amount) {
super();
this.name = "wrat";
this.cost = new Cost(["scrap", "rat"],[10, 1]);
this.value = 1;
document.getElementById('wratLbl').innerHTML = this.name + ": ";
}
}
var resourceList: { [id: string] : Resource; } = {};
var curScrap = new Scrap(0);
var curRat = new Rat(0);
var curWRat = new wRat(0);
resourceList["scrap"] = curScrap;
resourceList["rat"] = curRat;
resourceList["wrat"] = curWRat;
function updateView()
{
document.getElementById('scrapId').innerHTML = resourceList["scrap"].display();
document.getElementById('ratId').innerHTML = resourceList["rat"].display();
if(resourceList["scrap"].amount >= resourceList["rat"].cost.costList["scrap"])
{
document.getElementById('scrapRat').disabled = false;
}
else
{
document.getElementById('scrapRat').disabled = true;
}
document.getElementById('ratId').title = resourceList["rat"].cost.toString();
}
function updateValues()
{
if(resourceList["rat"].amount > 0)
resourceList["scrap"].amount += (resourceList["rat"].value * resourceList["rat"].amount)/10;
}
function collectScrap()
{
resourceList["scrap"].amount += 1;
}
function scrapRat()
{
//cost
resourceList["scrap"].amount -= resourceList["rat"].cost.costList["scrap"];
//create
resourceList["rat"].amount += 1;
//update cost
resourceList["rat"].cost.costList["scrap"] *= 1.12;
}
window.setInterval(function(){
this.updateValues();
updateView();
}, 100);
I'm uncertain if the HTML is required, but here it is:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scrap Clicker</title>
<link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<label id="scrapLbl" ></label> <span id="scrapId">0</span>
<label id="ratLbl" ></label> <span id="ratId">0</span>
<label id="wratLbl" ></label> <span id="wratId">0</span>
<div>
<button title="Free" data-toggle="popover" data-trigger="hover" data-content="Dig!" class="btn btn-lg btn-primary" onclick="collectScrap()">collect scrap</button>
<button title="10 Scrap" data-toggle="popover" data-trigger="hover" data-content="Strap some scrap to a rat, now you've got a Scrap-Rat!" class="btn btn-lg btn-primary" onclick="scrapRat()" id="scrapRat" disabled>scrap rat</button>
<button title="10 Scrap, 1 rat" data-toggle="popover" data-trigger="hover" data-content="Strap some scrap to a Scrap-Rat, now you've got a Flying-Scrap-Rat!" class="btn btn-lg btn-primary" onclick="wRat()" id="wRat" disabled>Winged scrap rat</button>
</div>
<script src="game.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
Bonus Points: Present me with an improved method to manage resources and costs efficiently!