initial commit
This commit is contained in:
badcold
121
contracts.json
Normal file
121
contracts.json
Normal file
@@ -0,0 +1,121 @@
|
||||
[
|
||||
{
|
||||
"id": 1,
|
||||
"costs": {
|
||||
"wool": 4
|
||||
},
|
||||
"rewards": {
|
||||
"cotton": 2,
|
||||
"expansion": 1,
|
||||
"hops": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"costs": {
|
||||
"wool": 6
|
||||
},
|
||||
"rewards": {
|
||||
"tobacco": 2,
|
||||
"hops": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"costs": {
|
||||
"cow": 2
|
||||
},
|
||||
"rewards": {
|
||||
"sugarCane": 2,
|
||||
"gold": 10,
|
||||
"hops": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"costs": {
|
||||
"cow": 3
|
||||
},
|
||||
"rewards": {
|
||||
"wool": 3,
|
||||
"hops": 3
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"costs": {
|
||||
"sheep": 2
|
||||
},
|
||||
"rewards": {
|
||||
"tobacco": 2,
|
||||
"expansion": 1,
|
||||
"hops": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"costs": {
|
||||
"wool": 3
|
||||
},
|
||||
"rewards": {
|
||||
"sugarCane": 1,
|
||||
"upgrade": 1,
|
||||
"hops": 3
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"costs": {
|
||||
"bread": 2
|
||||
},
|
||||
"rewards": {
|
||||
"cotton": 2,
|
||||
"expansion": 1,
|
||||
"gold": 10
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"costs": {
|
||||
"bread": 4
|
||||
},
|
||||
"rewards": {
|
||||
"tobacco": 4,
|
||||
"gold": 5,
|
||||
"hops": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"costs": {
|
||||
"cheese": 2
|
||||
},
|
||||
"rewards": {
|
||||
"sugarCane": 1,
|
||||
"gold": 8,
|
||||
"hops": 8
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"costs": {
|
||||
"cheese": 4
|
||||
},
|
||||
"rewards": {
|
||||
"cotton": 4,
|
||||
"upgrade": 2,
|
||||
"gold": 10
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"costs": {
|
||||
"whisky": 2
|
||||
},
|
||||
"rewards": {
|
||||
"tobacco": 2,
|
||||
"gold": 10,
|
||||
"hops": 1
|
||||
}
|
||||
}
|
||||
]
|
||||
BIN
contracts.webp
Normal file
BIN
contracts.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 283 KiB |
156
index.html
Normal file
156
index.html
Normal file
@@ -0,0 +1,156 @@
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>ClansOfContracts</title>
|
||||
<style>
|
||||
.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>
|
||||
|
||||
<body onload="init()">
|
||||
<script>
|
||||
let contracts;
|
||||
|
||||
let costs=["sheep", "cow", "wool", "bread", "cheese", "whisky"]
|
||||
let rewards=["cotton", "tobacco", "sugarCane", "upgrade", "expansion", "gold", "hops"]
|
||||
|
||||
function init() {
|
||||
fetch('contracts.json')
|
||||
.then(response => response.json())
|
||||
.then(json => {
|
||||
contracts = json;
|
||||
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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user