+ {focusedCard && setFocusedCardId(null)} />}
+
+
+ );
+}
diff --git a/src/components/CardField.tsx b/src/components/CardField.tsx
new file mode 100644
index 0000000..572114a
--- /dev/null
+++ b/src/components/CardField.tsx
@@ -0,0 +1,138 @@
+import { useRef, useMemo, useLayoutEffect, useState, useCallback } from 'react';
+import type { CardData } from '../types';
+import FloatingCard from './FloatingCard';
+import ConnectionLines from './ConnectionLines';
+import type { CardRect } from './ConnectionLines';
+
+interface CardFieldProps {
+ cards: CardData[];
+ focusedId: number | null;
+ onFocus: (id: number | null) => void;
+}
+
+interface LayoutPos {
+ x: number;
+ y: number;
+ angle: number;
+}
+
+function computePositions(count: number, w: number, h: number): LayoutPos[] {
+ if (count === 0) return [];
+
+ const cardW = 150;
+ const cardH = 210;
+ const cx = w / 2 - cardW / 2;
+ const cy = h / 2 - cardH / 2;
+
+ if (count === 1) return [{ x: cx, y: cy, angle: 0 }];
+
+ const maxR = Math.min(w, h) * 0.35;
+ const minR = maxR * 0.3;
+
+ const positions: LayoutPos[] = [];
+ for (let i = 0; i < count; i++) {
+ const t = i / count;
+ const angle = t * Math.PI * 2 - Math.PI / 2;
+ const radius = minR + (maxR - minR) * (0.5 + 0.5 * Math.sin(t * Math.PI));
+ const x = cx + radius * Math.cos(angle);
+ const y = cy + radius * Math.sin(angle);
+ const rot = ((i * 137.5) % 12) - 6;
+ positions.push({ x, y, angle: rot });
+ }
+ return positions;
+}
+
+export default function CardField({ cards, focusedId, onFocus }: CardFieldProps) {
+ const fieldRef = useRef
+ toggleSet(v, selectedAE, setSelectedAE)} />
+
+
+
+ toggleSet(v, selectedSDG, setSelectedSDG)} />
+
+
+
+ toggleSet(v, selectedMFL, setSelectedMFL)} />
+
+
+
+
+
+ {active.ae ? 'AE' : ''}
+ {active.mfl ? 'MFL' : ''}
+ {active.sdg ? 'SDG' : ''}
+ {filteredCards.length} cards
+
+
+ {cards.length === 0 && (
+ {
+ if (el) el.dataset.cardId = String(card.id);
+ }}
+ />
+ );
+ })}
+
+ );
+}
diff --git a/src/components/CardFocusOverlay.tsx b/src/components/CardFocusOverlay.tsx
new file mode 100644
index 0000000..c3ff16b
--- /dev/null
+++ b/src/components/CardFocusOverlay.tsx
@@ -0,0 +1,77 @@
+import { motion } from 'framer-motion';
+import { getCardImagePath } from '../data/cardImages';
+import { getIconPath } from '../data/iconPaths';
+import { AE_LABELS, MFL_LABELS, SDG_LABELS } from '../data/labels';
+import type { CardData } from '../types';
+
+function IconTags({ values, set, labels }: { values: number[]; set: string; labels: Record
+ select icons to reveal cards
+
+ )}
+
+
+ {values.map((v) => (
+
+ 
+ {set.toUpperCase()} {v}: {labels[v]}
+
+ ))}
+
+ );
+}
+
+interface CardFocusOverlayProps {
+ card: CardData;
+ onClose: () => void;
+}
+
+export default function CardFocusOverlay({ card, onClose }: CardFocusOverlayProps) {
+ const imgSrc = getCardImagePath(card.id);
+
+ return (
+ e.stopPropagation()}>
+
+ 
+
+
+
+
+
+ {card.name}
+ +
+
+
+ Action
+{card.action_text}
+
+
+
+ Description
+{card.description}
+
+
+ Associated Values
+
+
+
+
+
+
+ {values.map((v) => (
+
+ );
+}
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
new file mode 100644
index 0000000..2201cf6
--- /dev/null
+++ b/src/components/IconButton.tsx
@@ -0,0 +1,28 @@
+import { motion } from 'framer-motion';
+import { getIconPath } from '../data/iconPaths';
+import type { ValueSet } from '../types';
+
+interface IconButtonProps {
+ set: ValueSet;
+ value: number;
+ label: string;
+ selected: boolean;
+ onToggle: (value: number) => void;
+}
+
+export default function IconButton({ set, value, label, selected, onToggle }: IconButtonProps) {
+ const src = getIconPath(set, value);
+
+ return (
+
+ {values.map((v) => (
+
+ );
+}
diff --git a/src/data/cardImages.ts b/src/data/cardImages.ts
new file mode 100644
index 0000000..8792ad5
--- /dev/null
+++ b/src/data/cardImages.ts
@@ -0,0 +1,29 @@
+const CARD_IMG: (string | null)[] = [
+ null,
+ "1-Gift-of-Water-Action.png","2-Grow-Greens-Action.png","3-Fine-Dining-Compost-Dish-Action.png",
+ "4-Buzzing-with-Wisdom-Action.png","5-Baking-Flatbread.png","6-Mixed-Wastemonster-Action.png",
+ "7-Ingredient-Detective-Action.png","8-Mindful-Eating-Action.png","9-Fermentastic-Action.png",
+ "10 - Tree Planter.png","11 - Seed Scout.png","12 - Natural Spritz.png",
+ "13 - Dashboard Designer.png","14 - Onion Bodyguard.png","15 - Local Investor.png",
+ "16 - Poster Designer.png","17 - Change-Maker.png","18 - Waste Remover.png",
+ "19 - Manure Maker.png","20 - Mixed Garden.png","21 - Ash Bug Blaster.png",
+ "22 - Dry & Store.png","23 - Seed Distributor.png","24 - River Cleaners.png",
+ "25 - Garden Documenter.png","26 - Local Variety Guardian.png","27 - Nature Regenerator.png",
+ "28 - Biodiversity Steward.png","29 - Land Negotiator.png","30-TJD-Booster-Action.png",
+ "31 - Kitchen Garden.png","32 - Balanced Plate Builder.png","33 - Indigenous Tree Lover.png",
+ "34 - Cover Crop Protector.png","35 - Local Food Producer.png","36 - Market Price Checker.png",
+ "37 - Community Meeting.png","38 - Jar Farm Product Marketer.png","39 - Food Donation Hero.png",
+ "40 - Windbreak Warrior.png","41 - Seed Champion.png","42 - Fruit & Tree Team.png",
+ "43 - Manure Cycle Drawer.png","44 - Animal Hero.png","45 - Land Magic.png",
+ "46 - Local Chicken Lover.png","47 - Food Dryer Explorer.png","48 - Scrap-tastic Animal Feeder.png",
+ "49 - Leftover Chef.png","50 - Weather Tracker Checker.png","51 - Farm Record Keeper.png",
+ "52 - The Water Fertilizers.png","53 - Small Farm, Big Voice.png","54 - Nature Educator.png",
+ "55 - Teamwork Harvest.png","56 - Sky Garden.png","57-Be-the-Change-Action.png",
+ "58-Ancient-Wisdom-Defender-Action.png","59-Seedling-Protector-Action.png","60-Cooperative-Builder-Action.png",
+];
+
+export function getCardImagePath(cardId: number): string {
+ const filename = CARD_IMG[cardId];
+ if (!filename) return '';
+ return `/cards/${encodeURI(filename)}`;
+}
diff --git a/src/data/iconPaths.ts b/src/data/iconPaths.ts
new file mode 100644
index 0000000..c667a4c
--- /dev/null
+++ b/src/data/iconPaths.ts
@@ -0,0 +1,20 @@
+import type { ValueSet } from '../types';
+
+const SET_DIR: Record