feat: updated keyboard event handler

FuelLabs · Dec 20, 2024 · 2162acd · 2162acd
1 parent 8da5973
commit 2162acd
Show file tree

Hide file tree

Showing 5 changed files with 185 additions and 20 deletions.
diff --git a/frontend/src/components/NewPlayer.tsx b/frontend/src/components/NewPlayer.tsx
@@ -1,6 +1,6 @@
 import { BoxCentered, Button, Link } from "@fuel-ui/react";
 import { useWallet } from "@fuels/react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import type { Dispatch, SetStateAction } from "react";
 import type { Modals } from "../constants";
 
@@ -41,11 +41,7 @@ export default function NewPlayer({
   const paymaster = usePaymaster();
   const isGaslessSupported = useGaslessWalletSupported();
 
-  useEffect(() => {
-    getBalance();
-  }, [wallet]);
-
-  async function getBalance() {
+  const getBalance = useCallback(async () => {
     const thisWallet = wallet ?? contract?.account;
     console.log(wallet, "wallet");
     const baseAssetId = thisWallet?.provider.getBaseAssetId();
@@ -55,7 +51,33 @@ export default function NewPlayer({
     if (balanceNum) {
       setHasFunds(balanceNum > 0);
     }
-  }
+  }, [wallet, contract]);
+
+  useEffect(() => {
+    getBalance();
+  }, [wallet, getBalance]);
+
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: globalThis.KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+
+        if (status === "error") {
+          setStatus("none");
+          updatePageNum();
+        } else if (status === "none" && !showNoFunds) {
+          handleNewPlayer();
+        } else if (status === "none" && !hasFunds && showNoFunds) {
+          getBalance();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleGlobalKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleGlobalKeyDown);
+    };
+  }, [status, showNoFunds, hasFunds]);
 
   async function createPlayerWithoutGasStation() {
     if (!wallet || !contract) throw new Error("Wallet or contract not found");
@@ -202,19 +224,42 @@ export default function NewPlayer({
   return (
     <div className="new-player-modal">
       {status === "none" && !showNoFunds && (
-        <Button css={buttonStyle} onPress={handleNewPlayer}>
+        <Button
+          css={buttonStyle}
+          onPress={handleNewPlayer}
+          role="button"
+          tabIndex={0}
+          aria-label="Create new player"
+        >
           Make A New Player
         </Button>
       )}
       {status === "none" && !hasFunds && showNoFunds && (
         <BoxCentered css={styles.container}>
           You need some ETH to play:
-          <Link isExternal href={`https://app.fuel.network/bridge`}>
-            <Button css={styles.link} variant="link">
+          <Link
+            isExternal
+            href={`https://app.fuel.network/bridge`}
+            role="link"
+            tabIndex={0}
+          >
+            <Button
+              css={styles.link}
+              variant="link"
+              role="button"
+              tabIndex={0}
+              aria-label="Go to Bridge"
+            >
               Go to Bridge
             </Button>
           </Link>
-          <Button css={buttonStyle} onPress={getBalance}>
+          <Button
+            css={buttonStyle}
+            onPress={getBalance}
+            role="button"
+            tabIndex={0}
+            aria-label="Recheck balance"
+          >
             Recheck balance
           </Button>
         </BoxCentered>
@@ -238,6 +283,9 @@ export default function NewPlayer({
               setStatus("none");
               updatePageNum();
             }}
+            role="button"
+            tabIndex={0}
+            aria-label="Try again"
           >
             Try Again
           </Button>

diff --git a/frontend/src/components/modals/BuySeeds.tsx b/frontend/src/components/modals/BuySeeds.tsx
@@ -1,7 +1,7 @@
 import { Button, Spinner, BoxCentered } from "@fuel-ui/react";
 import { type BytesLike, Address, bn, Provider } from "fuels";
 import type { Dispatch, SetStateAction } from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useWalletFunds } from "../../hooks/useWalletFunds";
 import { NoFundsMessage } from "./NoFundsMessage";
 import {
@@ -39,6 +39,26 @@ export default function BuySeeds({
   const { hasFunds, showNoFunds, getBalance, showNoFundsMessage } =
     useWalletFunds(contract);
 
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+
+        if (status === "error") {
+          setStatus("none");
+          updatePageNum();
+        } else if (status === "none" && !showNoFunds) {
+          buySeeds();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleGlobalKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleGlobalKeyDown);
+    };
+  }, [status, showNoFunds]);
+
   async function buyWithGasStation() {
     if (!wallet) {
       throw new Error("No wallet found");
@@ -219,6 +239,9 @@ export default function BuySeeds({
               setStatus("none");
               updatePageNum();
             }}
+            role="button"
+            tabIndex={0}
+            aria-label="Try again"
           >
             Try Again
           </Button>
@@ -227,7 +250,14 @@ export default function BuySeeds({
       {status === "none" && !showNoFunds && (
         <>
           <div className="market-header">Buy Seeds</div>
-          <Button css={buttonStyle} variant="outlined" onPress={buySeeds}>
+          <Button
+            css={buttonStyle}
+            variant="outlined"
+            onPress={buySeeds}
+            role="button"
+            tabIndex={0}
+            aria-label="Buy 10 seeds"
+          >
             Buy 10 seeds
           </Button>
         </>

diff --git a/frontend/src/components/modals/HarvestModal.tsx b/frontend/src/components/modals/HarvestModal.tsx
@@ -1,6 +1,6 @@
 import { Spinner, Button, BoxCentered } from "@fuel-ui/react";
 import type { Dispatch, SetStateAction } from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { cssObj } from "@fuel-ui/css";
 
 import {
@@ -44,6 +44,27 @@ export default function HarvestModal({
   const { hasFunds, showNoFunds, getBalance, showNoFundsMessage } =
     useWalletFunds(contract);
 
+  // Add global keyboard event listener
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+
+        if (status === "error") {
+          setStatus("none");
+          updatePageNum();
+        } else if (status === "none" && !hasFunds && !showNoFunds) {
+          harvestItem();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleGlobalKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleGlobalKeyDown);
+    };
+  }, [status, hasFunds, showNoFunds]);
+
   async function harvestWithoutGasStation() {
     if (!wallet || !contract) throw new Error("Wallet or contract not found");
 
@@ -99,7 +120,6 @@ export default function HarvestModal({
     const tx = await wallet.sendTransaction(request);
 
     if (tx) {
-      console.log("tx", tx);
       onHarvestSuccess(tileArray[0]);
       await paymaster.postJobComplete(jobId);
       setModal("plant");
@@ -184,6 +204,9 @@ export default function HarvestModal({
               setStatus("none");
               updatePageNum();
             }}
+            role="button"
+            tabIndex={0}
+            aria-label="Try again"
           >
             Try Again
           </Button>
@@ -195,7 +218,13 @@ export default function HarvestModal({
       {status === "none" && !hasFunds && !showNoFunds && (
         <>
           <div style={styles.items}>Harvest this item?</div>
-          <Button css={buttonStyle} onPress={harvestItem}>
+          <Button
+            css={buttonStyle}
+            onPress={harvestItem}
+            role="button"
+            tabIndex={0}
+            aria-label="Harvest item"
+          >
             Harvest
           </Button>
         </>

diff --git a/frontend/src/components/modals/PlantModal.tsx b/frontend/src/components/modals/PlantModal.tsx
@@ -1,6 +1,6 @@
 import { Button } from "@fuel-ui/react";
 import type { Dispatch, SetStateAction } from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useWalletFunds } from "../../hooks/useWalletFunds";
 import { NoFundsMessage } from "./NoFundsMessage";
 
@@ -47,6 +47,25 @@ export default function PlantModal({
   const { hasFunds, showNoFunds, getBalance, showNoFundsMessage } =
     useWalletFunds(contract);
 
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: globalThis.KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+
+        if (status === "error") {
+          setStatus("none");
+        } else if (status === "none" && !showNoFunds && seeds > 0) {
+          handlePlant();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleGlobalKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleGlobalKeyDown);
+    };
+  }, [status, showNoFunds, seeds]);
+
   async function plantWithoutGasStation() {
     if (!wallet || !contract) throw new Error("Wallet or contract not found");
 
@@ -183,6 +202,9 @@ export default function PlantModal({
             onPress={() => {
               setStatus("none");
             }}
+            role="button"
+            tabIndex={0}
+            aria-label="Try again"
           >
             Try Again
           </Button>
@@ -193,7 +215,13 @@ export default function PlantModal({
           {seeds > 0 ? (
             <>
               <div style={styles.seeds}>Plant a seed here?</div>
-              <Button css={buttonStyle} onPress={handlePlant}>
+              <Button
+                css={buttonStyle}
+                onPress={handlePlant}
+                role="button"
+                tabIndex={0}
+                aria-label="Plant seed"
+              >
                 Plant
               </Button>
             </>

diff --git a/frontend/src/components/modals/SellItem.tsx b/frontend/src/components/modals/SellItem.tsx
@@ -1,7 +1,7 @@
 import { Button } from "@fuel-ui/react";
 import { Address, InputType, Provider, bn } from "fuels";
 import type { Dispatch, SetStateAction } from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useWalletFunds } from "../../hooks/useWalletFunds";
 import { NoFundsMessage } from "./NoFundsMessage";
 
@@ -40,6 +40,26 @@ export default function SellItem({
   const { hasFunds, showNoFunds, getBalance, showNoFundsMessage } =
     useWalletFunds(contract);
 
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: globalThis.KeyboardEvent) => {
+      if (e.key === "Shift") {
+        e.preventDefault();
+
+        if (status === "error") {
+          setStatus("none");
+          updatePageNum();
+        } else if (status === "none" && !showNoFunds) {
+          sellItems();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleGlobalKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleGlobalKeyDown);
+    };
+  }, [status, showNoFunds]);
+
   async function sellWithoutGasStation() {
     if (!wallet || !contract) throw new Error("Wallet or contract not found");
 
@@ -191,13 +211,23 @@ export default function SellItem({
               setStatus("none");
               updatePageNum();
             }}
+            role="button"
+            tabIndex={0}
+            aria-label="Try again (press S or Shift)"
           >
             Try Again
           </Button>
         </div>
       )}
       {status === "none" && !showNoFunds && (
-        <Button css={buttonStyle} variant="outlined" onPress={sellItems}>
+        <Button
+          css={buttonStyle}
+          variant="outlined"
+          onPress={sellItems}
+          role="button"
+          tabIndex={0}
+          aria-label="Sell all items (press S or Shift)"
+        >
           Sell All Items
         </Button>
       )}