Dodge field
A field whose contents dodge the pointer with a falloff curve until it relents and shows a notice instead.
Chase the pill with the pointer. Dodges so far: 0.
Implementation
1"use client";2 3import {4 useEffect,5 useRef,6 useState,7 type CSSProperties,8 type ReactNode,9} from "react";10 11export type DodgeAxis = "both" | "x" | "y";12export type DodgeWall = "clamp" | "bounce";13 14export interface DodgeFieldState {15 dodges: number;16 gave: boolean;17 caught: boolean;18 fleeing: boolean;19}20 21export interface DodgeFieldProps {22 children?: ReactNode | ((state: DodgeFieldState) => ReactNode);23 taunts?: string[];24 notice?: string;25 inkColor?: string;26 contrastColor?: string;27 fieldHeight?: number;28 reach?: number;