/** @jsxImportSource npm:react **/ import { useEffect, useState } from "npm:react"; import { renderToString } from "npm:react-dom@18/server"; const TrackpadScale = () => { const [forceText, setForceText] = useState("Place object here"); useEffect(() => { const maxForce = 3.0; const gramsPerForceUnit = 1000 / maxForce; const handleForce = (event: MouseEvent) => { if ("webkitForce" in event) { const force = (event as any).webkitForce; const grams = Math.round(force * gramsPerForceUnit); setForceText(`Weight: ${grams}g`); } else { setForceText("Force Touch not supported"); } }; const resetText = () => setForceText("Place object here"); document.addEventListener("mousedown", handleForce); document.addEventListener("mousemove", handleForce); document.addEventListener("mouseup", resetText); return () => { document.removeEventListener("mousedown", handleForce); document.removeEventListener("mousemove", handleForce); document.removeEventListener("mouseup", resetText); }; }, []); return (

Trackpad Scale

OPEN IN SAFARI

Weigh things on your trackpad

(This mostly works to see how hard you are pressing your trackpad. Once you click, you will see a weight in grams. Then you can try placing something on the trackpad)

{forceText}

); }; export default (req: Request) => { return new Response( renderToString( Trackpad Scale , ), { headers: { "Content-Type": "text/html" } }, ); };

perbhat