Force Touch Scale

/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { renderToString } from "https://esm.sh/react-dom/server"; const ForceScale = () => { const [force, setForce] = useState(0); const [weight, setWeight] = useState(0); const scaleRef = useRef(null); const baselineForceRef = useRef(0); const isPressedRef = useRef(false); useEffect(() => { const handleForceChange = (e) => { if (typeof e.webkitForce !== "undefined") { const currentForce = e.webkitForce; setForce(currentForce); if (isPressedRef.current && baselineForceRef.current > 0) { const forceDifference = Math.max(0, currentForce - baselineForceRef.current); const estimatedWeight = (forceDifference * 1000).toFixed(2); setWeight(estimatedWeight); } } }; const handleMouseDown = (e) => { isPressedRef.current = true; baselineForceRef.current = e.webkitForce || 0; }; const handleMouseUp = () => { isPressedRef.current = false; baselineForceRef.current = 0; setWeight(0); }; document.addEventListener("webkitmouseforcechanged", handleForceChange); scaleRef.current?.addEventListener("mousedown", handleMouseDown); scaleRef.current?.addEventListener("mouseup", handleMouseUp); return () => { document.removeEventListener("webkitmouseforcechanged", handleForceChange); scaleRef.current?.removeEventListener("mousedown", handleMouseDown); scaleRef.current?.removeEventListener("mouseup", handleMouseUp); }; }, []); const isForceSupported = typeof window !== "undefined" && "webkitForce" in MouseEvent.prototype; return (

{isForceSupported ? weight > 0 ? `${weight}g` : "Place apple here" : "Force Touch not supported"}

{isForceSupported ? `Current force: ${force.toFixed(2)}` : "This demo requires Safari on a Mac with Force Touch"}

); }; const App = () => ( Force Touch Scale

perbhat