diff --git a/apps/web/src/app/games/complement-race/components/PressureGauge.tsx b/apps/web/src/app/games/complement-race/components/PressureGauge.tsx index 9a577daf..eac4613f 100644 --- a/apps/web/src/app/games/complement-race/components/PressureGauge.tsx +++ b/apps/web/src/app/games/complement-race/components/PressureGauge.tsx @@ -1,6 +1,7 @@ 'use client' import { useSpring, animated } from '@react-spring/web' +import { AbacusReact } from '@soroban/abacus-react' interface PressureGaugeProps { pressure: number // 0-150 PSI @@ -36,7 +37,7 @@ export function PressureGauge({ pressure }: PressureGaugeProps) { background: 'rgba(255, 255, 255, 0.95)', padding: '16px', borderRadius: '12px', - minWidth: '160px', + minWidth: '220px', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)' }}> {/* Title */} @@ -52,7 +53,7 @@ export function PressureGauge({ pressure }: PressureGaugeProps) { {/* SVG Gauge */} - - {psi} - +
+ +
+ ) })} @@ -121,17 +141,34 @@ export function PressureGauge({ pressure }: PressureGaugeProps) { /> - {/* Digital readout - animated */} + {/* Abacus readout */}
- - {spring.pressure.to(p => Math.round(p))} - - {' '} - PSI +
+ +
+ PSI
)