badcold/clansofcontracts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor header

Browse Source
This commit is contained in:
badcold
2024-04-21 10:22:43 +02:00
parent e7fecb58cd
commit fb1442b270
2 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@@ -10,30 +10,7 @@
<body onload="init()">
<script src="index.js"></script>
<div id="costs" class="filters">
<span>Costs:</span>
<input id="sheep" type="checkbox" checked="checked"/><label for="sheep">Sheep</label>
<input id="cow" type="checkbox" checked="checked"/><label for="cow">Cow</label>
<input id="wool" type="checkbox" checked="checked"/><label for="wool">Wool</label>
<input id="bread" type="checkbox" checked="checked"/><label for="bread">Bread</label>
<input id="cheese" type="checkbox" checked="checked"/><label for="cheese">Cheese</label>
<input id="whisky" type="checkbox" checked="checked"/><label for="whisky">Whisky</label>
</div>
<div id="rewards" class="filters">
<span>Rewards:</span>
<input id="cotton" type="checkbox" checked="checked"/><label for="cotton">Cotton</label>
<input id="tobacco" type="checkbox" checked="checked"/><label for="tobacco">Tobacco</label>
<input id="sugarCane" type="checkbox" checked="checked"/><label for="sugarCane">Sugar cane</label>
<input id="upgrade" type="checkbox" checked="checked"/><label for="upgrade">Upgrade</label>
<input id="expansion" type="checkbox" checked="checked"/><label for="expansion">Expansion</label>
<input id="gold" type="checkbox" checked="checked"/><label for="gold">Gold</label>
<input id="hops" type="checkbox" checked="checked"/><label for="hops">Hops</label>
</div>
<div id="other" class="filters">
<span>Other:</span>
<input id="discarded" type="checkbox" checked="checked"/><label for="discarded">Discarded</label>
</div>
<div id="header"></div>
<div id="included">
</div>

32
index.ts
View File

@@ -4,6 +4,7 @@ let costs = ["sheep", "cow", "wool", "bread", "cheese", "whisky"]
let rewards = ["cotton", "tobacco", "sugarCane", "upgrade", "expansion", "gold", "hops"]
function init() {
buildHeader();
fetch('contracts.json')
.then(response => response.json())
.then(json => {
@@ -32,6 +33,37 @@ function init() {
});
}
function buildHeader() {
document.getElementById("header").innerHTML = `
<div id="costs" class="filters">
<span>Costs:</span>
${buildCheckBoxes(costs)}
</div>
<div id="rewards" class="filters">
<span>Rewards:</span>
${buildCheckBoxes(rewards)}
</div>
<div id="other" class="filters">
<span>Other:</span>
${buildCheckBoxes(["discarded"])}
</div>
`;
}
function buildCheckBoxes(filters: string[]) : string {
let result = "";
for (const filter of filters) {
result += buildCheckBox(filter);
}
return result;
}
function buildCheckBox(filterKey: string): string {
let capitalized = filterKey[0].toUpperCase() + filterKey.slice(1);
return `<input id="${filterKey}" type="checkbox" checked="checked"/><label for="${filterKey}">${capitalized}</label>`;
}
function update() {
let includedContracts = "";
let excludedContracts = "";