ignore update script

fixup contract #33
fixup contract #20
2024-05-11 10:02:47 +02:00 · 2024-05-11 10:00:10 +02:00 · 2024-05-11 09:57:48 +02:00 · 2024-05-11 09:51:17 +02:00 · 2024-04-21 10:48:35 +02:00 · 2024-04-21 10:22:43 +02:00
5 changed files with 289 additions and 147 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,3 @@
 .idea
 index.js
 update.sh
--- a/contracts.json
+++ b/contracts.json
@@ -224,7 +224,7 @@
              "tobacco": 0,
              "upgrade": 0}},
 {"costs": {"bread": 0,
-            "cheese": 0,
+            "cheese": 2,
            "cow": 2,
            "sheep": 0,
            "whisky": 0,
@@ -265,12 +265,12 @@
              "sugarCane": 0,
              "tobacco": 0,
              "upgrade": 0}},
- {"costs": {"bread": 0,
+ {"costs": {"bread": 2,
            "cheese": 0,
            "cow": 0,
            "sheep": 3,
            "whisky": 0,
-            "wool": 2},
+            "wool": 0},
  "id": 20,
  "rewards": {"cotton": 0,
              "expansion": 0,
@@ -402,8 +402,8 @@
              "expansion": 0,
              "gold": 5,
              "hops": 2,
-              "sugarCane": 4,
+              "sugarCane": 0,
-              "tobacco": 0,
+              "tobacco": 4,
              "upgrade": 0}},
 {"costs": {"bread": 0,
            "cheese": 0,
@@ -447,9 +447,9 @@
              "sugarCane": 0,
              "tobacco": 4,
              "upgrade": 0}},
- {"costs": {"bread": 0,
+ {"costs": {"bread": 3,
            "cheese": 0,
-            "cow": 3,
+            "cow": 0,
            "sheep": 1,
            "whisky": 0,
            "wool": 0},
--- a/index.html
+++ b/index.html
@@ -2,151 +2,21 @@
 <html class="no-js" lang="">
 <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>
 <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>
--- a/index.ts
+++ b/index.ts
@@ -0,0 +1,233 @@
 let contracts;
 let costs = ["sheep", "cow", "wool", "bread", "cheese", "whisky"]
 let rewards = ["cotton", "tobacco", "sugarCane", "upgrade", "expansion", "gold", "hops"]
 let imports = ["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="imports" class="filters">
            <button type="button" id="rewardsNone" onclick="setAllImportsCheckboxes(false)">None</button>
            <button type="button" id="rewardsAll" onclick="setAllImportsCheckboxes(true)">All</button>
            <span>Imports:</span>
            ${buildCheckBoxes(imports)}
        </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 setAllImportsCheckboxes(value: boolean) {
    for (const filter of imports) {
        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 `<span class="filterElement"><input id="${filterKey}" type="checkbox" checked="checked"/>
        <label for="${filterKey}">${capitalized}</label>
        <span id="${filterKey}Count"></span></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();
 }
--- a/style.css
+++ b/style.css
@@ -0,0 +1,36 @@
 .filters {
    font-size: x-large;
    input {
        width: 20px;
        height: 20px;
    }
 }
 .filterElement {
 	margin: 15px;
 }
 .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;
 }
Author	SHA1	Message	Date
badcold	5c945efeb5	ignore update script	2024-05-11 10:02:47 +02:00
badcold	d34c13dfa6	fixup contract #33	2024-05-11 10:00:10 +02:00
badcold	e32cf5b817	fixup contract #20	2024-05-11 09:57:48 +02:00
badcold	877304a19e	fixup rewards for contract #29	2024-05-11 09:51:17 +02:00
badcold	9d2cf4c264	fixup contract reward name + spacing between filters	2024-04-21 10:48:35 +02:00
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