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

Compare commits

base: badcold:6d46e973cff38532e80023bfe6050eefa29c5ace
Branches Tags
badcold:master badcold:gh-pages
..
compare: badcold:fea9007a018b94b082ae18226301d6a582ea2d99
Branches Tags
badcold:gh-pages badcold:master

8 Commits
6d46e973cf ... fea9007a01

Author SHA1 Message Date
badcold
fea9007a01 better counts for excluded contracts 2024-04-21 10:22:43 +02:00
badcold
81313adf4c fixup data for contract #17 2024-04-21 10:22:43 +02:00
badcold
1e7ae85866 split rewards into exports and bonuses 2024-04-21 10:22:43 +02:00
badcold
f9b1507911 counting resources 2024-04-21 10:22:43 +02:00
badcold
fb1442b270 refactor header 2024-04-21 10:22:43 +02:00
badcold
e7fecb58cd allow to exclude discarded contracts from selection 2024-04-21 10:22:43 +02:00
badcold
3d14936a99 convert to ts 2024-04-21 10:22:43 +02:00
badcold
ba5973bd96 extract css and js to separated files 2024-04-21 10:22:43 +02:00
5 changed files with 278 additions and 141 deletions
Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
.idea
index.js

2
contracts.json
View File

@@ -224,7 +224,7 @@
"tobacco": 0, "tobacco": 0,
"upgrade": 0}}, "upgrade": 0}},
{"costs": {"bread": 0, {"costs": {"bread": 0,
"cheese": 0, "cheese": 2,
"cow": 2, "cow": 2,
"sheep": 0, "sheep": 0,
"whisky": 0, "whisky": 0,

150
index.html
View File

@@ -2,151 +2,21 @@
<html class="no-js" lang=""> <html class="no-js" lang="">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>ClansOfContracts</title> <title>ClansOfContracts</title>
<style> <link rel="stylesheet" href="style.css">
.filters {
font-size: x-large;
input {
width: 20px;
height: 20px;
}
}
.contract {
margin: 5px;
float: left;
color: red;
font-size: 14em;
line-height: 194px;
text-align: center;
user-select: none;
width: 194px;
height: 194px;
background-image: url('contracts.webp');
background-size: 9894px 194px;
}
html {
color: #222;
font-size: 1em;
line-height: 1.4;
background-color: palegoldenrod;
}
</style>
</head> </head>
<body onload="init()"> <body onload="init()">
<script> <script src="index.js"></script>
let contracts;
let costs=["sheep", "cow", "wool", "bread", "cheese", "whisky"] <div id="header"></div>
let rewards=["cotton", "tobacco", "sugarCane", "upgrade", "expansion", "gold", "hops"]
function init() { <div id="included">
fetch('contracts.json') </div>
.then(response => response.json()) <hr style="clear: left;height:5px;border-width:0;color:gray;background-color:darkgoldenrod"/>
.then(json => { <div id="excluded">
contracts = json; </div>
for (contract of contracts) {
contract.discarded = false;
}
update();
})
.catch(error => console.error('Error:', error));
for (cost of costs) {
checkBox = document.getElementById(cost);
checkBox.addEventListener('change', function() {
update();
});
}
for (reward of rewards) {
checkBox = document.getElementById(reward);
checkBox.addEventListener('change', function() {
update();
});
}
}
function update() {
let includedContracts = "";
let excludedContracts = "";
for (contract of contracts) {
if (isIncluded(contract)) {
includedContracts += generateContractHtml(contract);
} else {
excludedContracts += generateContractHtml(contract);
}
}
document.getElementById("included").innerHTML = includedContracts;
document.getElementById("excluded").innerHTML = excludedContracts;
}
function isIncluded(contract) {
let included = true;
for (cost of costs) {
checkBox = document.getElementById(cost);
if (!checkBox.checked && (contract.costs[cost] > 0)) {
included = false;
}
}
for (reward of rewards) {
checkBox = document.getElementById(reward);
if (!checkBox.checked && (contract.rewards[reward] > 0)) {
included = false;
}
}
return included;
}
function generateContractHtml(contract) {
let position = -(contract.id * 194);
if (contract.discarded) {
return "<div id=\"" + contract.id + "\" onclick=\"toggleDiscard(" + contract.id + ")\" class=\"contract\" style=\"background-position: "+position+"px 194px;\">X</div>";
} else {
return "<div id=\"" + contract.id + "\" onclick=\"toggleDiscard(" + contract.id + ")\" class=\"contract\" style=\"background-position: "+position+"px 194px;\"> </div>";
}
}
function toggleDiscard(id) {
for (contract of contracts) {
if (contract.id === id) {
contract.discarded = !contract.discarded;
}
}
update();
}
</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="included">
</div>
<hr style="clear: left;height:5px;border-width:0;color:gray;background-color:darkgoldenrod"/>
<div id="excluded">
</div>
<script> <script>

233
index.ts Normal file
View File

@@ -0,0 +1,233 @@
let contracts;
let costs = ["sheep", "cow", "wool", "bread", "cheese", "whisky"]
let rewards = ["cotton", "tobacco", "sugarCane", "upgrade", "expansion", "gold", "hops"]
let exports = ["cotton", "tobacco", "sugarCane"]
let bonuses = ["upgrade", "expansion", "gold", "hops"]
function init() {
buildHeader();
fetch('contracts.json')
.then(response => response.json())
.then(json => {
contracts = json;
for (const contract of contracts) {
contract.discarded = false;
}
update();
})
.catch(error => console.error('Error:', error));
for (const cost of costs) {
let checkBox = document.getElementById(cost);
checkBox.addEventListener('change', function () {
update();
});
}
for (const reward of rewards) {
let checkBox = document.getElementById(reward);
checkBox.addEventListener('change', function () {
update();
});
}
let otherCheckBox = document.getElementById("discarded");
otherCheckBox.addEventListener('change', function () {
update();
});
}
function buildHeader() {
document.getElementById("header").innerHTML = `
<div id="costs" class="filters">
<button type="button" id="costsNone" onclick="setAllCostsCheckboxes(false)">None</button>
<button type="button" id="costsAll" onclick="setAllCostsCheckboxes(true)">All</button>
<span>Costs:</span>
${buildCheckBoxes(costs)}
</div>
<div id="exports" class="filters">
<button type="button" id="rewardsNone" onclick="setAllExportsCheckboxes(false)">None</button>
<button type="button" id="rewardsAll" onclick="setAllExportsCheckboxes(true)">All</button>
<span>Exports:</span>
${buildCheckBoxes(exports)}
</div>
<div id="bonuses" class="filters">
<button type="button" id="bonusesNone" onclick="setAllBonusesCheckboxes(false)">None</button>
<button type="button" id="bonusesAll" onclick="setAllBonusesCheckboxes(true)">All</button>
<span>Bonus:</span>
${buildCheckBoxes(bonuses)}
</div>
<div id="other" class="filters">
<span>Other:</span>
${buildCheckBoxes(["discarded"])}
</div>
`;
}
function setAllCostsCheckboxes(value: boolean) {
for (const filter of costs) {
let checkBox = document.getElementById(filter) as HTMLInputElement;
checkBox.checked = value;
}
update();
}
function setAllExportsCheckboxes(value: boolean) {
for (const filter of exports) {
let checkBox = document.getElementById(filter) as HTMLInputElement;
checkBox.checked = value;
}
update();
}
function setAllBonusesCheckboxes(value: boolean) {
for (const filter of bonuses) {
let checkBox = document.getElementById(filter) as HTMLInputElement;
checkBox.checked = value;
}
update();
}
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>
<span id="${filterKey}Count"></span>`;
}
function update() {
let includedContracts = [];
let excludedContracts = [];
for (const contract of contracts) {
if (isIncluded(contract, "")) {
includedContracts.push(contract);
} else {
excludedContracts.push(contract);
}
}
for (const filter of costs) {
let checkBox = document.getElementById(filter) as HTMLInputElement;
if (checkBox.checked) {
setIncludedFilterCounts(includedContracts, "costs", filter);
} else {
setExcludedFilterCounts(excludedContracts, "costs", filter);
}
}
for (const filter of rewards) {
let checkBox = document.getElementById(filter) as HTMLInputElement;
if (checkBox.checked) {
setIncludedFilterCounts(includedContracts, "rewards", filter);
} else {
setExcludedFilterCounts(excludedContracts, "rewards", filter);
}
}
setDirectFilterCounts(contracts, "discarded");
let includedContractsHtml = "";
for (const included of includedContracts) {
includedContractsHtml += generateContractHtml(included);
}
document.getElementById("included").innerHTML = includedContractsHtml;
let excludedContractsHtml = "";
for (const excluded of excludedContracts) {
excludedContractsHtml += generateContractHtml(excluded);
}
document.getElementById("excluded").innerHTML = excludedContractsHtml;
}
function setIncludedFilterCounts(contracts: any[], subcategory: string, filterKey: string) {
let count: number = 0;
let sum: number = 0;
for (const contract of contracts) {
let value = contract[subcategory][filterKey];
sum += value
if (value > 0) {
count += 1
}
}
document.getElementById(filterKey + "Count").innerHTML = `(${sum} on ${count})`;
}
function setExcludedFilterCounts(contracts: any[], subcategory: string, filterKey: string) {
let count: number = 0;
let sum: number = 0;
for (const contract of contracts) {
if (isIncluded(contract, filterKey)) {
let value = contract[subcategory][filterKey];
sum += value
if (value > 0) {
count += 1
}
}
}
document.getElementById(filterKey + "Count").innerHTML = `(+${sum} on ${count})`;
}
function setDirectFilterCounts(contracts, filter: string) {
let count: number = 0;
for (const contract of contracts) {
if (contract[filter]) {
count += 1;
}
}
document.getElementById("discardedCount").innerHTML = `(${count})`;
}
function isIncluded(contract, ignoredCriteria: string) {
let included = true;
for (const cost of costs) {
if (cost == ignoredCriteria) {
continue;
}
let checkBox = document.getElementById(cost) as HTMLInputElement;
if (!checkBox.checked && (contract.costs[cost] > 0)) {
included = false;
}
}
for (const reward of rewards) {
if (reward == ignoredCriteria) {
continue;
}
let checkBox = document.getElementById(reward) as HTMLInputElement;
if (!checkBox.checked && (contract.rewards[reward] > 0)) {
included = false;
}
}
if ("discarded" != ignoredCriteria
&& !(document.getElementById("discarded") as HTMLInputElement).checked
&& contract.discarded) {
included = false;
}
return included;
}
function generateContractHtml(contract) {
let position = -(contract.id * 194);
if (contract.discarded) {
return "<div id=\"" + contract.id + "\" onclick=\"toggleDiscard(" + contract.id + ")\" class=\"contract\" style=\"background-position: " + position + "px 194px;\">X</div>";
} else {
return "<div id=\"" + contract.id + "\" onclick=\"toggleDiscard(" + contract.id + ")\" class=\"contract\" style=\"background-position: " + position + "px 194px;\"> </div>";
}
}
function toggleDiscard(id) {
for (const contract of contracts) {
if (contract.id === id) {
contract.discarded = !contract.discarded;
}
}
update();
}

32
style.css Normal file
View File

@@ -0,0 +1,32 @@
.filters {
font-size: x-large;
input {
width: 20px;
height: 20px;
}
}
.contract {
margin: 5px;
float: left;
color: red;
font-size: 14em;
line-height: 194px;
text-align: center;
user-select: none;
width: 194px;
height: 194px;
background-image: url('contracts.webp');
background-size: 9894px 194px;
}
html {
color: #222;
font-size: 1em;
line-height: 1.4;
background-color: palegoldenrod;
}