fix: add haptic feedback

posaune0423 · Sep 27, 2024 · 84bd0ac · 84bd0ac
1 parent 8d09617
commit 84bd0ac
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 1 deletion.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "tailwindcss-animate": "^1.0.7",
     "twgl.js": "^5.5.4",
     "use-debounce": "^10.0.3",
+    "use-haptic": "^1.0.1",
     "use-sound": "^4.0.3"
   },
   "devDependencies": {

diff --git a/src/components/PixelViewer.tsx b/src/components/PixelViewer.tsx
@@ -11,6 +11,7 @@ import { useWebGL } from "@/hooks/useWebGL";
 import { CoordinateFinder } from "@/components/CoordinateFinder";
 import { ColorPalette } from "@/components/ColorPallette";
 import { CanvasGrid } from "@/components/CanvasGrid";
+import { useHaptic } from "use-haptic";
 
 export const PixelViewer: React.FC = () => {
   // Refs
@@ -28,6 +29,7 @@ export const PixelViewer: React.FC = () => {
       connectedAccount,
     },
   } = useDojo();
+  const { vibe } = useHaptic();
 
   const { gridState, setGridState } = useGridState();
   const { drawPixels } = useWebGL(canvasRef, gridState);
@@ -42,6 +44,7 @@ export const PixelViewer: React.FC = () => {
       startTransition(async () => {
         setOptimisticPixels({ x, y, color: selectedColor });
         play();
+        vibe();
         await interact(activeAccount, {
           for_player: 0n,
           for_system: 0n,
@@ -50,7 +53,7 @@ export const PixelViewer: React.FC = () => {
         });
       });
     },
-    [selectedColor, activeAccount, interact, setOptimisticPixels, play]
+    [selectedColor, activeAccount, interact, setOptimisticPixels, play, vibe]
   );
 
   const onDrawGrid = useCallback(() => {