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

fixup contract reward name + spacing between filters

Browse Source
This commit is contained in:
badcold
2024-04-21 10:48:35 +02:00
parent fea9007a01
commit 9d2cf4c264
2 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
index.ts
View File

@@ -2,7 +2,7 @@ let contracts;
let costs = ["sheep", "cow", "wool", "bread", "cheese", "whisky"] let costs = ["sheep", "cow", "wool", "bread", "cheese", "whisky"]
let rewards = ["cotton", "tobacco", "sugarCane", "upgrade", "expansion", "gold", "hops"] let rewards = ["cotton", "tobacco", "sugarCane", "upgrade", "expansion", "gold", "hops"]
let exports = ["cotton", "tobacco", "sugarCane"] let imports = ["cotton", "tobacco", "sugarCane"]
let bonuses = ["upgrade", "expansion", "gold", "hops"] let bonuses = ["upgrade", "expansion", "gold", "hops"]
function init() { function init() {
@@ -43,11 +43,11 @@ function buildHeader() {
<span>Costs:</span> <span>Costs:</span>
${buildCheckBoxes(costs)} ${buildCheckBoxes(costs)}
</div> </div>
<div id="exports" class="filters"> <div id="imports" class="filters">
<button type="button" id="rewardsNone" onclick="setAllExportsCheckboxes(false)">None</button> <button type="button" id="rewardsNone" onclick="setAllImportsCheckboxes(false)">None</button>
<button type="button" id="rewardsAll" onclick="setAllExportsCheckboxes(true)">All</button> <button type="button" id="rewardsAll" onclick="setAllImportsCheckboxes(true)">All</button>
<span>Exports:</span> <span>Imports:</span>
${buildCheckBoxes(exports)} ${buildCheckBoxes(imports)}
</div> </div>
<div id="bonuses" class="filters"> <div id="bonuses" class="filters">
<button type="button" id="bonusesNone" onclick="setAllBonusesCheckboxes(false)">None</button> <button type="button" id="bonusesNone" onclick="setAllBonusesCheckboxes(false)">None</button>
@@ -71,8 +71,8 @@ function setAllCostsCheckboxes(value: boolean) {
update(); update();
} }
function setAllExportsCheckboxes(value: boolean) { function setAllImportsCheckboxes(value: boolean) {
for (const filter of exports) { for (const filter of imports) {
let checkBox = document.getElementById(filter) as HTMLInputElement; let checkBox = document.getElementById(filter) as HTMLInputElement;
checkBox.checked = value; checkBox.checked = value;
} }
@@ -97,9 +97,9 @@ function buildCheckBoxes(filters: string[]): string {
function buildCheckBox(filterKey: string): string { function buildCheckBox(filterKey: string): string {
let capitalized = filterKey[0].toUpperCase() + filterKey.slice(1); let capitalized = filterKey[0].toUpperCase() + filterKey.slice(1);
return `<input id="${filterKey}" type="checkbox" checked="checked"/> return `<span class="filterElement"><input id="${filterKey}" type="checkbox" checked="checked"/>
<label for="${filterKey}">${capitalized}</label> <label for="${filterKey}">${capitalized}</label>
<span id="${filterKey}Count"></span>`; <span id="${filterKey}Count"></span></span>`;
} }

4
style.css
View File

@@ -7,6 +7,10 @@
} }
} }
.filterElement {
margin: 15px;
}
.contract { .contract {
margin: 5px; margin: 5px;
float: left; float: left;