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

extract css and js to separated files

Browse Source
This commit is contained in:
badcold
2024-04-21 10:22:43 +02:00
parent 6d46e973cf
commit ba5973bd96
4 changed files with 124 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.idea

116
index.html
View File

@@ -4,123 +4,11 @@
<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"]
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"> <div id="costs" class="filters">
<span>Costs:</span> <span>Costs:</span>

78
index.js Normal file
View File

@@ -0,0 +1,78 @@
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();
}

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;
}