tsdko · June 5, 2026 21:41
diff --git a/checkbox-test.html b/checkbox-test.html
 <!doctype html>
 <html>
 <head>
  <meta charset="utf-8" />
 </head>
 <body>
 <textarea id="inputJSON">
 {
      "name": "What's Up, Dock?",
      "description": "Either you love maritime infrastructure, or you may be a boat. Either way, this is your token of dock appreciation!",
      "condition": "Visit the following worlds themed around docks: Docks, Lezaxzasea Docks, Streetlight Docks, Flooded Docks, Barley Docks, Dreadful Docks, Rainy Docks, Blinking Docks, Serene Docks, Wan Lotus Docks, White Pillar Docks, Birch Tree Docks, and Sweet Pink Docks",
      "checkbox": {
        "the_docks": "Docks",
        "lezaxzasea_docks": "Lezaxzasea Docks",
        "visit_streetlight_docks": "Streetlight Docks",
        "flooded_docks": "Flooded Docks",
        "visit_barley_docks": "Barley Docks",
        "visit_dreadful_docks": "Dreadful Docks",
        "visit_rainy_docks": "Rainy Docks",
        "visit_blinking_docks": "Blinking Docks",
        "visit_serene_docks": "Serene Docks",
        "wan_lotus_docks": "Wan Lotus Docks",
        "visit_white_pillar_docks": "White Pillar Docks",
        "visit_birch_tree_docks": "Birch Tree Docks",
        "visit_sweet_pink_docks": "Sweet Pink Docks"
      }
 }
 </textarea>

 <div id="errors" style="color: red"></div> <div id="errorsClear">(clear)</div>
 <div id="displayText"></div>
 <button id="checkAll">Check all</button>
 <button id="uncheckAll">Uncheck all</button>
 <div id="checkboxes"></div>

 <style>
 #errors:empty + #errorsClear { display: none }
 #errors { white-space: pre }
 #errorsClear { cursor: pointer; color: blue }

 #displayText tag { text-decoration: line-through; opacity: 50% }
 </style>

 <script>
 function conditionHTML(localizedTooltip, badge) {
  let condition = localizedTooltip.condition.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;");
  for (const subcondition in localizedTooltip.checkbox) {
    const needle = localizedTooltip.checkbox[subcondition];
    let subconditionAchieved;
    if (subcondition.includes('|'))
      subconditionAchieved = !!subcondition.split('|').find(tag => badge.tags.includes(tag));
    else
      subconditionAchieved = badge.tags.includes(subcondition);
    if (subconditionAchieved)
      condition = condition.replace(needle, `<tag>${needle}</tag>`);
  }
  return condition;
 }

 function badgeFromCheckboxes() {
  return {tags: [...document.querySelectorAll("#checkboxes input:checked")].map(inp => inp.value.split('|')).flat()};
 }

 function conditionData() {
  return JSON.parse(document.getElementById("inputJSON").value);
 }

 function updateConditionData() {
  document.getElementById("displayText").innerHTML = conditionHTML(conditionData(), badgeFromCheckboxes());
 }

 function updateJSON() {
  try {
    const data = conditionData();
    document.getElementById("displayText").textContent = data.condition;
    const checks = document.getElementById("checkboxes");
    checks.replaceChildren();
    for (const [k, v] of Object.entries(data.checkbox)) {
      const container = document.createElement("div");
      const cb = document.createElement("input");
      cb.type = "checkbox";
      cb.id = "cond_" + k;
      cb.value = k;
      cb.addEventListener("input", () => updateConditionData());
      const label = document.createElement("label");
      label.htmlFor = "cond_" + k;
      label.textContent = k;
      container.replaceChildren(cb, label);
      checks.appendChild(container);
    }
    errors.textContent = "";
  } catch(e) {
    errors.textContent += e.toString() + "\n";
  }
 }

 document.getElementById("inputJSON").addEventListener("input", () => updateJSON());
 document.getElementById("errorsClear").addEventListener("click", () => {errors.textContent = ""});
 document.getElementById("checkAll").addEventListener("click", () => {
  document.querySelectorAll("#checkboxes input").forEach(c => {c.checked = true});
  updateConditionData();
 });
 document.getElementById("uncheckAll").addEventListener("click", () => {
  document.querySelectorAll("#checkboxes input").forEach(c => {c.checked = false})
  updateConditionData();
 });
 updateJSON();
 </script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />
	</head>
	<body>
	<textarea id="inputJSON">
	{
	"name": "What's Up, Dock?",
	"description": "Either you love maritime infrastructure, or you may be a boat. Either way, this is your token of dock appreciation!",
	"condition": "Visit the following worlds themed around docks: Docks, Lezaxzasea Docks, Streetlight Docks, Flooded Docks, Barley Docks, Dreadful Docks, Rainy Docks, Blinking Docks, Serene Docks, Wan Lotus Docks, White Pillar Docks, Birch Tree Docks, and Sweet Pink Docks",
	"checkbox": {
	"the_docks": "Docks",
	"lezaxzasea_docks": "Lezaxzasea Docks",
	"visit_streetlight_docks": "Streetlight Docks",
	"flooded_docks": "Flooded Docks",
	"visit_barley_docks": "Barley Docks",
	"visit_dreadful_docks": "Dreadful Docks",
	"visit_rainy_docks": "Rainy Docks",
	"visit_blinking_docks": "Blinking Docks",
	"visit_serene_docks": "Serene Docks",
	"wan_lotus_docks": "Wan Lotus Docks",
	"visit_white_pillar_docks": "White Pillar Docks",
	"visit_birch_tree_docks": "Birch Tree Docks",
	"visit_sweet_pink_docks": "Sweet Pink Docks"
	}
	}
	</textarea>

	<div id="errors" style="color: red"></div> <div id="errorsClear">(clear)</div>
	<div id="displayText"></div>
	<button id="checkAll">Check all</button>
	<button id="uncheckAll">Uncheck all</button>
	<div id="checkboxes"></div>

	<style>
	#errors:empty + #errorsClear { display: none }
	#errors { white-space: pre }
	#errorsClear { cursor: pointer; color: blue }

	#displayText tag { text-decoration: line-through; opacity: 50% }
	</style>

	<script>
	function conditionHTML(localizedTooltip, badge) {
	let condition = localizedTooltip.condition.replace("&", "&").replace("<", "<").replace(">", ">");
	for (const subcondition in localizedTooltip.checkbox) {
	const needle = localizedTooltip.checkbox[subcondition];
	let subconditionAchieved;
	if (subcondition.includes('\|'))
	subconditionAchieved = !!subcondition.split('\|').find(tag => badge.tags.includes(tag));
	else
	subconditionAchieved = badge.tags.includes(subcondition);
	if (subconditionAchieved)
	condition = condition.replace(needle, `<tag>${needle}</tag>`);
	}
	return condition;
	}

	function badgeFromCheckboxes() {
	return {tags: [...document.querySelectorAll("#checkboxes input:checked")].map(inp => inp.value.split('\|')).flat()};
	}

	function conditionData() {
	return JSON.parse(document.getElementById("inputJSON").value);
	}

	function updateConditionData() {
	document.getElementById("displayText").innerHTML = conditionHTML(conditionData(), badgeFromCheckboxes());
	}

	function updateJSON() {
	try {
	const data = conditionData();
	document.getElementById("displayText").textContent = data.condition;
	const checks = document.getElementById("checkboxes");
	checks.replaceChildren();
	for (const [k, v] of Object.entries(data.checkbox)) {
	const container = document.createElement("div");
	const cb = document.createElement("input");
	cb.type = "checkbox";
	cb.id = "cond_" + k;
	cb.value = k;
	cb.addEventListener("input", () => updateConditionData());
	const label = document.createElement("label");
	label.htmlFor = "cond_" + k;
	label.textContent = k;
	container.replaceChildren(cb, label);
	checks.appendChild(container);
	}
	errors.textContent = "";
	} catch(e) {
	errors.textContent += e.toString() + "\n";
	}
	}

	document.getElementById("inputJSON").addEventListener("input", () => updateJSON());
	document.getElementById("errorsClear").addEventListener("click", () => {errors.textContent = ""});
	document.getElementById("checkAll").addEventListener("click", () => {
	document.querySelectorAll("#checkboxes input").forEach(c => {c.checked = true});
	updateConditionData();
	});
	document.getElementById("uncheckAll").addEventListener("click", () => {
	document.querySelectorAll("#checkboxes input").forEach(c => {c.checked = false})
	updateConditionData();
	});
	updateJSON();
	</script>
	</body>
	</html>
No results found