From d5bf34e305fa163cd799a1b7b6c8917f19cd3f0c Mon Sep 17 00:00:00 2001
From: tezlm <zestylemonade@celery.eu.org>
Date: Sun, 18 Aug 2024 03:21:18 -0700
Subject: [PATCH] put set captcha on top level

---
 set-captcha.html | 178 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 178 insertions(+)
 create mode 100644 set-captcha.html
diff --git a/set-captcha.html b/set-captcha.html
new file mode 100644
index 0000000..b9111eb
--- /dev/null
+++ b/set-captcha.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>set captcha</title>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+    
+      #cards {
+        padding: 8px;
+        background: #eeeeee;
+        display: inline-grid;
+        grid-template-columns: auto auto auto auto;
+        gap: 4px;
+      }
+
+      #cards > canvas {
+        border: solid #222222 1px;
+        margin: 3px;
+      }
+      
+      #cards > canvas.selected {
+        margin: 0;
+        border: solid blue 4px;
+      }
+    </style>
+  </head>
+  <body>
+    <p><a href="https://en.wikipedia.org/wiki/Set_(card_game)">set</a> captcha</p>
+    <p id="status">select a set of 3 cards to continue</p>
+    <div id="cards"></div>
+    <script>
+      const cardsEl = document.getElementById("cards");
+      const statusEl = document.getElementById("status");
+      const cardColors = [0, 90, 250];
+      const cardShapes = ["diamond", "oval", "squiggle"];
+      const cardCounts = [1, 2, 3];
+      const cardFills  = ["solid", "hollow", "striped"];
+
+      function simcolor(color) {
+        return `hsl(${color + Math.random() * 20 - 10}deg, ${Math.random() * 50 + 50}%, ${Math.random() * 30 + 35}%)`;
+      }
+      
+      function makeCard(info) {
+        const canvas = document.createElement("canvas");
+        canvas.height = 200;
+        canvas.width = 200;
+        
+        const ctx = canvas.getContext("2d");
+        const color = cardColors[info.colorId];
+        ctx.fillStyle = simcolor(color);
+        ctx.strokeStyle = simcolor(color);
+        ctx.lineWidth = 5;
+        ctx.lineJoin = "round";
+
+        for (let i = 0; i < cardCounts[info.countId]; i++) {
+          ctx.save();
+          ctx.translate(100, 100);
+          ctx.rotate(Math.random() * Math.PI * 2);
+          ctx.scale(Math.random() + .5, Math.random() + .5);
+          ctx.lineWidth = 5;
+          ctx.lineJoin = "round";
+
+          ctx.beginPath();
+          switch (cardShapes[info.shapeId]) {
+            case "diamond": traceDiamond(); break;
+            case "oval": traceOval(); break;
+            case "squiggle": traceSquiggle(); break;
+          }
+          
+          switch (cardFills[info.fillId]) {
+            case "solid": {
+              ctx.globalAlpha = .8;
+              ctx.fill();
+              break;
+            }
+            case "hollow": ctx.stroke(); break;
+            case "striped": {
+              // couldn't figure out how to make stripes work
+              ctx.stroke();
+              ctx.globalAlpha = .3;
+              ctx.fill();
+              break;
+            }
+          }
+          
+          ctx.restore();
+        }        
+
+        function traceDiamond() {
+            ctx.moveTo(75, 0);
+            ctx.lineTo(150, 30);
+            ctx.lineTo(75, 60);
+            ctx.lineTo(0, 30);
+            ctx.lineTo(75, 0);
+        }
+
+        function traceOval() {
+            ctx.roundRect(0, 0, 150, 60, 30);
+        }
+
+        function traceSquiggle() {
+            ctx.moveTo(0, 60);
+            ctx.bezierCurveTo(10, 0, 20, 10, 30, 10);
+            ctx.bezierCurveTo(50, 10, 100, 40, 110, 30);
+            ctx.bezierCurveTo(120, 30, 140, 0, 150, 0);
+            ctx.bezierCurveTo(150, 30, 130, 60, 120, 60);
+            ctx.bezierCurveTo(100, 60, 50, 30, 40, 40);
+            ctx.bezierCurveTo(30, 40, 20, 60, 0, 60);
+        }
+        
+        return canvas;
+      }
+
+      const pack = generatePack();
+      const selected = new Set();
+      for (let i = 0; i < pack.length; i++) {
+        const card = pack[i];
+        const el = makeCard(card);
+        el.addEventListener("click", (e) => {
+          const isSelected = selected.has(i);
+          el.classList.toggle("selected");
+          if (isSelected) {
+            selected.delete(i);
+          } else {
+            selected.add(i);
+          }
+
+          if (selected.size !== 3) {
+            statusEl.textContent = "sets must have 3 cards";
+          } else if (isSet([...selected].map(i => pack[i]))) {
+            statusEl.textContent = "nice";
+          } else {
+            statusEl.textContent = "not a set";
+          }
+        });
+        cardsEl.append(el);
+      }
+      
+      function generatePack() {
+        // TODO: smarter set generation?
+        const rndId = () => Math.floor(Math.random() * 3);
+        const hash = (c) => c.colorId * 27 + c.shapeId * 9 + c.countId * 3 + c.fillId;
+        const seenCards = new Set();
+        const cards = [];
+        for (let i = 0; i < 12; i++) {
+          const card = {
+            colorId: rndId(),
+            shapeId: rndId(),
+            countId: rndId(),
+            fillId: rndId(),
+          };
+          if (seenCards.has(hash(card))) {
+            i--;
+          } else {
+            cards.push(card);
+          }
+        }
+        return cards;
+      }
+
+      function isSet(cards) {
+        console.log(cards);
+        
+        function allSameOrDifferent(prop) {
+          const unique = new Set(cards.map(i => i[prop])).size;
+          return unique === cards.length || unique === 1;
+        }
+        
+        return allSameOrDifferent("colorId") &&
+          allSameOrDifferent("shapeId") &&
+          allSameOrDifferent("countId") &&
+          allSameOrDifferent("fillId");
+      }
+    </script>
+  </body>
+</html>
