extract css and js to separated files
This commit is contained in:
badcold
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.idea
|
||||
134
index.html
134
index.html
@@ -4,125 +4,13 @@
|
||||
<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>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body onload="init()">
|
||||
<script>
|
||||
let contracts;
|
||||
<script src="index.js"></script>
|
||||
|
||||
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>
|
||||
<input id="sheep" type="checkbox" checked="checked"/><label for="sheep">Sheep</label>
|
||||
<input id="cow" type="checkbox" checked="checked"/><label for="cow">Cow</label>
|
||||
@@ -130,8 +18,8 @@
|
||||
<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">
|
||||
</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>
|
||||
@@ -140,13 +28,13 @@
|
||||
<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>
|
||||
|
||||
<div id="included">
|
||||
</div>
|
||||
<hr style="clear: left;height:5px;border-width:0;color:gray;background-color:darkgoldenrod"/>
|
||||
<div id="excluded">
|
||||
</div>
|
||||
<div id="included">
|
||||
</div>
|
||||
<hr style="clear: left;height:5px;border-width:0;color:gray;background-color:darkgoldenrod"/>
|
||||
<div id="excluded">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
78
index.js
Normal file
78
index.js
Normal 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
32
style.css
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user