20// <style>body{margin:0;background-color:black;color:white;font-family:system-ui,sans-serif}</style>
21
22export default async function (req: Request): Promise<Response> {
23 return new Response(html, {
24 headers: {
2import { useState } from "https://esm.sh/react@18.2.0";
3
4export function App() {
5 const [clicked, setClicked] = useState(0);
6 return (
17import { HandDrawnCardsLogo } from './handDrawnCardsLogo.js';
18
19function App() {
20 return <HandDrawnCardsLogo />;
21}
2import React from "https://esm.sh/react@18.3.1";
3
4export function HandDrawnCardsLogo() {
5 // Create a function to generate hand-drawn paths with waviness
6 function createWavyPath(points, magnitude = 2, smoothness = 0.25) {
7 // Helper to add waviness to points
8 function addWaviness(points, magnitude) {
9 return points.map(p => {
10 // If this is a marker for a critical point, keep it exact
31
32 // Helper to calculate control points for smooth curves
33 function getControlPoints(p0, p1, p2, smoothness = 0.2) {
34 // Calculate distances between points
35 const d01 = Math.sqrt(Math.pow(p1.x - p0.x, 2) + Math.pow(p1.y - p0.y, 2));
77
78 // Create hand-drawn card outline with properly placed corners
79 function createCardOutline(x, y, width, height, cornerRadius) {
80 // Points per edge for waviness
81 const numPointsPerEdge = 6;
201
202 // Mini cards have rougher edges
203 function createMiniCard(x, y, width, height, rotation = 0) {
204 // Card outline
205 const pathData = createCardOutline(0, 0, width, height, 8);
20 animation-name: spin;
21 animation-duration: 32s;
22 animation-timing-function: linear;
23 animation-iteration-count: infinite;
24}
27 animation-name: scroll;
28 animation-duration: .5s;
29 animation-timing-function: linear;
30 animation-iteration-count: infinite;
31}
19}
20
21function DraggableList({ items, onReorder, allowDrag, renderItem, className = "" }: DraggableListProps) {
22 const [draggedItem, setDraggedItem] = useState<Card | null>(null);
23 const [draggedOverIndex, setDraggedOverIndex] = useState<number | null>(null);
78}
79
80export function App() {
81 const [players, setPlayers] = useState<Player[]>([]);
82 const [loading, setLoading] = useState(true);
497 : "")}
498 >
499 {/* Tooltip for drag & drop functionality */}
500 {gameState?.playedCards.length > 0 && !gameState?.showYears && (
501 <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-indigo-600 text-white px-3 py-1 rounded-full text-sm shadow-lg">
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {
6 const [messages, setMessages] = useState([]);
7 const [newMessage, setNewMessage] = useState('');
79}
80
81function client() {
82 createRoot(document.getElementById("root")).render(<App />);
83}
84if (typeof document !== "undefined") { client(); }
85
86export default async function server(request: Request): Promise<Response> {
87 const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
88 const KEY = "Rantboard";
6console.log({ Skullcat });
7
8function App () { return (<h1>hi</h1>); }
9
10const div = document.getElementById("app");
19}
20
21function DraggableList({ items, onReorder, allowDrag, renderItem, className = "" }: DraggableListProps) {
22 const [draggedItem, setDraggedItem] = useState<Card | null>(null);
23 const [draggedOverIndex, setDraggedOverIndex] = useState<number | null>(null);
78}
79
80export function App() {
81 const [players, setPlayers] = useState<Player[]>([]);
82 const [loading, setLoading] = useState(true);
497 : "")}
498 >
499 {/* Tooltip for drag & drop functionality */}
500 {gameState?.playedCards.length > 0 && !gameState?.showYears && (
501 <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-indigo-600 text-white px-3 py-1 rounded-full text-sm shadow-lg">
8 transform,
9 transitionProperty: 'transform',
10 transitionTimingFunction: 'ease-in-out',
11 transitionDuration,
12 }
