import React, { useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; const BUILT_IN = [ "Abandon normal instruments", "Accept advice", "Use an old idea", "State the problem in words as clearly as possible", "Only one element of each kind", "What would your closest friend do?", "What to increase? What to reduce?", "Are there sections? Consider transitions", "Try faking it", "Honour thy error as a hidden intention", "Ask your body", "Work at a different speed", "Faced with a choice, do both", "Retrace your steps", "What is the simplest thing you could do?", "Slow preparation, fast execution", "Remove specifics and convert to ambiguities", "Give way to your worst impulse", "emphasize the flaws", "Go outside. Shut the door.", ]; export default function App() { const { useLiveQuery, database } = useFireproof("oblique-strategy-draw"); const { docs: strategies } = useLiveQuery("type", { key: "strategy" }); const { docs: draws } = useLiveQuery("type", { key: "draw", descending: true, limit: 20 }); const [currentCard, setCurrentCard] = useState(null); const [isDrawing, setIsDrawing] = useState(false); const [isGenerating, setIsGenerating] = useState(false); const [genCount, setGenCount] = useState(3); const [showDeck, setShowDeck] = useState(false); const allStrategies = [ ...BUILT_IN, ...strategies.map((s) => s.text), ]; async function drawCard() { setIsDrawing(true); try { const pool = allStrategies; const picked = pool[Math.floor(Math.random() * pool.length)]; setCurrentCard(picked); await database.put({ type: "draw", text: picked, drawnAt: Date.now() }); } finally { setIsDrawing(false); } } async function generateStrategies() { setIsGenerating(true); try { const existing = allStrategies.slice(0, 10).join("; "); const response = await callAI( `Generate ${genCount} new oblique strategy prompts in the style of Brian Eno and Peter Schmidt's Oblique Strategies. They should be short, cryptic, poetic, and useful for breaking creative blocks. Avoid these existing ones: ${existing}`, { schema: { properties: { strategies: { type: "array", items: { type: "string" }, description: "Short oblique strategy prompts", }, }, }, } ); const data = JSON.parse(response); for (const text of data.strategies) { await database.put({ type: "strategy", text, createdAt: Date.now() }); } } finally { setIsGenerating(false); } } async function deleteStrategy(doc) { await database.del(doc._id); } const c = { bg: "bg-[oklch(0.96_0.01_90)]", card: "bg-white border-[3px] border-[oklch(0.15_0.02_280)]", shadow: "[box-shadow:4px_4px_0px_oklch(0.15_0.02_280)]", shadowSm: "[box-shadow:3px_3px_0px_oklch(0.15_0.02_280)]", shadowHover: "hover:[box-shadow:6px_6px_0px_oklch(0.15_0.02_280)] hover:translate-x-[-2px] hover:translate-y-[-2px]", shadowActive: "active:[box-shadow:none] active:translate-x-[2px] active:translate-y-[2px]", ink: "text-[oklch(0.15_0.02_280)]", muted: "text-[oklch(0.50_0.02_280)]", red: "bg-[oklch(0.55_0.24_28)]", yellow: "bg-[oklch(0.85_0.18_85)]", green: "bg-[oklch(0.62_0.19_145)]", blue: "bg-[oklch(0.52_0.18_255)]", btnPrimary: "bg-[oklch(0.55_0.24_28)] text-white border-[3px] border-[oklch(0.15_0.02_280)] [box-shadow:4px_4px_0px_oklch(0.15_0.02_280)] hover:[box-shadow:6px_6px_0px_oklch(0.15_0.02_280)] hover:translate-x-[-2px] hover:translate-y-[-2px] active:[box-shadow:none] active:translate-x-[2px] active:translate-y-[2px] transition-all duration-150 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed", btnSecondary: "bg-[oklch(0.85_0.18_85)] text-[oklch(0.15_0.02_280)] border-[3px] border-[oklch(0.15_0.02_280)] [box-shadow:3px_3px_0px_oklch(0.15_0.02_280)] hover:[box-shadow:6px_6px_0px_oklch(0.15_0.02_280)] hover:translate-x-[-2px] hover:translate-y-[-2px] active:[box-shadow:none] active:translate-x-[2px] active:translate-y-[2px] transition-all duration-150 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed", btnGhost: "bg-white text-[oklch(0.15_0.02_280)] border-[3px] border-[oklch(0.15_0.02_280)] hover:[box-shadow:3px_3px_0px_oklch(0.15_0.02_280)] hover:translate-x-[-2px] hover:translate-y-[-2px] active:[box-shadow:none] active:translate-x-[2px] active:translate-y-[2px] transition-all duration-150 cursor-pointer", mono: "font-['JetBrains_Mono',monospace]", heading: "font-['Space_Grotesk',sans-serif] font-bold uppercase tracking-tight", label: "font-['Space_Grotesk',sans-serif] text-[0.65rem] uppercase tracking-[0.15em] text-[oklch(0.50_0.02_280)]", }; const Spinner = () => ( ); return (

{/* Ambient bg */}

{/* Nav */} {/* Hero card */}

Current Strategy

{currentCard ? (

{currentCard}

) : (

Draw a card to begin

)}

{/* Generate + Deck row */}

{/* Generate */}

AI Strategy Generator

Generate new oblique strategies with AI and add them to the shared deck.

Count

{/* Stats */}

Session Stats

{[ { label: "Cards in Deck", value: allStrategies.length }, { label: "Draws This Session", value: draws.length }, { label: "AI Generated", value: strategies.length }, { label: "Built-in", value: BUILT_IN.length }, ].map(({ label, value }) => (

{value}

{label}

))}

{/* Draw history */}

Draw History {draws.length} draws

{draws.length === 0 ? (

No draws yet — pull a card above

) : (

{draws.slice(0, 10).map((d, i) => (

{i + 1} {d.text} {new Date(d.drawnAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}

))}

)}

{/* Deck panel */} {showDeck && (

Full Deck — {allStrategies.length} Strategies

{BUILT_IN.map((s, i) => (

{i + 1} {s} built-in

))} {strategies.map((s, i) => (

{BUILT_IN.length + i + 1} {s.text} ai

))}

)}

); }