Add new statement and styling

Add "Both of us are knights" statement to the interactive. Update styling for statements and their negations using different border styles and colors to represent A, B, and the statement.

src/components/KnightsAndKnavesI.tsx

@@ -5,6 +5,7 @@ import { cn } from "@/lib/utils";
 // Statements
 const STATEMENTS = [
   { id: "S", label: "At least one of us is a knave." },
+  { id: "SNEG", label: "Both of us are knights." },
   { id: "AK", label: "A is a knight" },
   { id: "AN", label: "A is a knave" },
   { id: "BK", label: "B is a knight" },
@@ -13,6 +14,15 @@ const STATEMENTS = [
 
 type StatementId = typeof STATEMENTS[number]["id"];
 
+const META: Record<StatementId, { group: "A" | "B" | "S"; neg: boolean }> = {
+  S: { group: "S", neg: false },
+  SNEG: { group: "S", neg: true },
+  AK: { group: "A", neg: false },
+  AN: { group: "A", neg: true },
+  BK: { group: "B", neg: false },
+  BN: { group: "B", neg: true },
+};
+
 const KnightsAndKnavesI = () => {
   const [inArena, setInArena] = useState<StatementId[]>([]);
   const [showExplain, setShowExplain] = useState(false);
@@ -80,6 +90,7 @@ const KnightsAndKnavesI = () => {
         if (ids.has("AN") && aKnight) continue;
         if (ids.has("BK") && !bKnight) continue;
         if (ids.has("BN") && bKnight) continue;
+        if (ids.has("SNEG") && !(aKnight && bKnight)) continue;
 
         // A's utterance if included: S = "At least one is a knave"
         if (ids.has("S")) {

src/index.css

@@ -41,6 +41,11 @@ All colors MUST be HSL.
     --success: 142 71% 45%;
     --success-foreground: 0 0% 98%;
 
+    /* Logic token colors */
+    --logic-a: 24 94% 50%;
+    --logic-b: 221 83% 53%;
+    --logic-s: 47 95% 57%;
+
     /* Custom design tokens for the boxy aesthetic */
     --surface: 0 0% 100%;
     --surface-variant: 220 13% 96%;
@@ -107,6 +112,11 @@ All colors MUST be HSL.
     --success: 142 71% 45%;
     --success-foreground: 0 0% 98%;
 
+    /* Logic token colors */
+    --logic-a: 24 94% 50%;
+    --logic-b: 221 83% 53%;
+    --logic-s: 47 95% 57%;
+
     /* Dark mode custom tokens */
     --surface: 220 13% 11%;
     --surface-variant: 220 13% 15%;
@@ -141,6 +151,15 @@ All colors MUST be HSL.
   }
 }
 
+@layer components {
+  .logic-a { --logic-color: var(--logic-a); }
+  .logic-b { --logic-color: var(--logic-b); }
+  .logic-s { --logic-color: var(--logic-s); }
+  .logic-border { border-color: hsl(var(--logic-color)) !important; }
+  .logic-dotted { border-style: dotted; }
+  .logic-solid { border-style: solid; }
+}
+
 /* Custom slider styling */
 .slider-special::-webkit-slider-thumb,
 .slider-normal::-webkit-slider-thumb {