better counts for excluded contracts

fixup data for contract #17
split rewards into exports and bonuses
2024-04-21 10:22:43 +02:00 · 2024-04-21 10:22:43 +02:00 · 2024-04-21 10:22:43 +02:00 · 2024-04-21 10:22:43 +02:00 · 2024-04-21 10:22:43 +02:00 · 2024-04-21 10:22:43 +02:00
5 changed files with 278 additions and 141 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.idea
+index.js
--- 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,
--- a/index.html
+++ b/index.html
@@ -4,149 +4,19 @@
 <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"]
+<div id="header"></div>

-    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>
+<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 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();
+}
--- a/style.css
+++ b/style.css
@@ -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;
+}
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