Merge pull request #533 from BibliothecaDAO/feat/mobile-touches

Design fixes

ui/src/app/components/ArcadeDialog.tsx

@@ -16,7 +16,7 @@ import {
 } from "@/app/lib/constants";
 import { getArcadeConnectors, getWalletConnectors } from "@/app/lib/connectors";
 import { fetchBalances } from "@/app/lib/balances";
-import { indexAddress } from "@/app/lib/utils";
+import { formatCurrency, indexAddress } from "@/app/lib/utils";
 import Lords from "public/icons/lords.svg";
 import Eth from "public/icons/eth-2.svg";
 import ArcadeLoader from "@/app/components/animations/ArcadeLoader";
@@ -34,6 +34,7 @@ interface ArcadeDialogProps {
   updateConnectors: () => void;
   lordsBalance: number;
   ethBalance: number;
+  costToPlay: bigint;
 }
 
 export const ArcadeDialog = ({
@@ -43,6 +44,7 @@ export const ArcadeDialog = ({
   updateConnectors,
   lordsBalance,
   ethBalance,
+  costToPlay,
 }: ArcadeDialogProps) => {
   const [fetchedBalances, setFetchedBalances] = useState(false);
   const [recoverArcade, setRecoverArcade] = useState(false);
@@ -132,6 +134,8 @@ export const ArcadeDialog = ({
     });
   };
 
+  const lordsGameCost = Number(costToPlay);
+
   useEffect(() => {
     getBalances();
   }, [arcadeConnectors, fetchedBalances]);
@@ -183,8 +187,9 @@ export const ArcadeDialog = ({
                 <div className="flex flex-col">
                   <p className="my-2 text-sm sm:text-base text-terminal-yellow p-2 border border-terminal-yellow sm:w-1/2 mx-auto">
                     Note: Creating an account will initiate a transfer of 0.01
-                    ETH & 25 LORDS from your connected wallet to the arcade
-                    account to cover your transaction costs from gameplay.
+                    ETH & {formatCurrency(lordsGameCost)} LORDS from your
+                    connected wallet to the arcade account to cover your
+                    transaction costs from gameplay.
                   </p>
                   <div className="flex flex-row justify-center gap-5">
                     <Button
@@ -236,6 +241,7 @@ export const ArcadeDialog = ({
                     isWithdrawing={isWithdrawing}
                     lordsBalance={lordsBalance}
                     ethBalance={ethBalance}
+                    lordsGameCost={lordsGameCost}
                   />
                 );
               })}
@@ -298,6 +304,7 @@ interface ArcadeAccountCardProps {
   isWithdrawing: boolean;
   lordsBalance: number;
   ethBalance: number;
+  lordsGameCost: number;
 }
 
 export const ArcadeAccountCard = ({
@@ -318,6 +325,7 @@ export const ArcadeAccountCard = ({
   isWithdrawing,
   lordsBalance,
   ethBalance,
+  lordsGameCost,
 }: ArcadeAccountCardProps) => {
   const { connect, connectors } = useConnect();
   const [isCopied, setIsCopied] = useState(false);
@@ -393,6 +401,7 @@ export const ArcadeAccountCard = ({
                     getBalances={getAccountBalances}
                     lordsBalance={lordsBalance}
                     ethBalance={ethBalance}
+                    lordsGameCost={lordsGameCost}
                   />
                 </div>
                 <Button
@@ -420,6 +429,7 @@ export const ArcadeAccountCard = ({
                     getBalances={getAccountBalances}
                     lordsBalance={lordsBalance}
                     ethBalance={ethBalance}
+                    lordsGameCost={lordsGameCost}
                   />
                 </div>
                 <Button
@@ -444,6 +454,7 @@ export const ArcadeAccountCard = ({
             getBalances={async () => await getAccountBalances(account.name)}
             lordsBalance={lordsBalance}
             ethBalance={ethBalance}
+            lordsGameCost={lordsGameCost}
           />
         )}
       </div>

ui/src/app/components/CountDown.tsx

@@ -82,7 +82,7 @@ export const PenaltyCountDown: React.FC<PenaltyCountDownProps> = ({
   }, [updateDeathPenalty]);
 
   return (
-    <div className="text-xxs sm:text-lg self-center border px-1 border border-terminal-green">
+    <div className="text-xs sm:text-lg self-center border px-1 border border-terminal-green">
       {startCountdown ? (
         seconds > 0 ? (
           <span className="flex flex-row gap-1 items-center">

ui/src/app/components/arcade/TopupInput.tsx

@@ -1,6 +1,7 @@
 import React, { useState, ChangeEvent } from "react";
 import { AccountInterface } from "starknet";
 import { Button } from "@/app/components/buttons/Button";
+import { formatCurrency } from "@/app/lib/utils";
 
 interface TopupInputProps {
   balanceType: string;
@@ -13,6 +14,7 @@ interface TopupInputProps {
   className?: string;
   lordsBalance: number;
   ethBalance: number;
+  lordsGameCost: number;
 }
 
 const TopupInput = ({
@@ -26,6 +28,7 @@ const TopupInput = ({
   className,
   lordsBalance,
   ethBalance,
+  lordsGameCost,
 }: TopupInputProps) => {
   const [showInput, setShowInput] = useState(false);
   const [inputValue, setInputValue] = useState(0);
@@ -71,6 +74,10 @@ const TopupInput = ({
     setShowInput(false);
   };
 
+  const mainTopupDisabled =
+    balanceType === "eth"
+      ? ethBalance < 0.01 * 10 ** 18
+      : lordsBalance < lordsGameCost;
   const inputTopupInvalid =
     inputValue * 10 ** 18 > (balanceType === "eth" ? ethBalance : lordsBalance);
 
@@ -128,9 +135,11 @@ const TopupInput = ({
             size="xxxs"
             className="text-black"
             onClick={() => handleSubmitDefault()}
-            disabled={disabled}
+            disabled={disabled || mainTopupDisabled}
           >
-            {balanceType === "eth" ? "Add 0.01 ETH" : "Add 25 LORDS"}
+            {balanceType === "eth"
+              ? "Add 0.01 ETH"
+              : `Add ${formatCurrency(lordsGameCost)} LORDS`}
           </Button>
           <Button
             size="xxxs"

ui/src/app/components/marketplace/MarketplaceRow.tsx

@@ -4,7 +4,13 @@ import { getItemData, getItemPrice, getKeyFromValue } from "@/app/lib/utils";
 import useAdventurerStore from "@/app/hooks/useAdventurerStore";
 import LootIcon from "@/app/components/icons/LootIcon";
 import { useWaitForTransaction } from "@starknet-react/core";
-import { Metadata, Item, ItemPurchase, UpgradeStats } from "@/app/types";
+import {
+  Metadata,
+  Item,
+  ItemPurchase,
+  UpgradeStats,
+  NullAdventurer,
+} from "@/app/types";
 import { CoinIcon } from "@/app/components/icons/Icons";
 import EfficacyDisplay from "@/app/components/icons/EfficacyIcon";
 import { GameData } from "@/app/lib/data/GameData";
@@ -25,6 +31,7 @@ interface MarketplaceRowProps {
     purchases?: ItemPurchase[]
   ) => void;
   totalCharisma: number;
+  dropItems: string[];
 }
 
 const MarketplaceRow = ({
@@ -38,6 +45,7 @@ const MarketplaceRow = ({
   setPurchaseItems,
   upgradeHandler,
   totalCharisma,
+  dropItems,
 }: MarketplaceRowProps) => {
   const [selectedButton, setSelectedButton] = useState<number>(0);
   const adventurer = useAdventurerStore((state) => state.adventurer);
@@ -107,6 +115,24 @@ const MarketplaceRow = ({
 
   const isActive = activeMenu == index;
 
+  const equippedItems = ownedItems.filter((obj) => obj.equipped).length;
+  const baggedItems = ownedItems.filter((obj) => !obj.equipped).length;
+
+  // Check whether an equipped slot is free, if it is free then even if the bag is full the slot can be bought and equipped.
+  const formatAdventurer = adventurer ?? NullAdventurer;
+  const equppedItem = formatAdventurer[slot.toLowerCase()];
+  const emptySlot = equppedItem === null;
+
+  const purchaseNoEquipItems = purchaseItems.filter(
+    (item) => item.equip === "0"
+  ).length;
+  const purchaseEquipItems = purchaseItems.filter(
+    (item) => item.equip === "1"
+  ).length;
+
+  const equipFull = equippedItems + purchaseEquipItems === 8;
+  const bagFull = baggedItems + purchaseNoEquipItems === 11;
+
   useEffect(() => {
     if (isActive) {
       window.addEventListener("keydown", handleKeyDown);
@@ -189,6 +215,7 @@ const MarketplaceRow = ({
                   upgradeHandler(undefined, undefined, newPurchases);
                   setActiveMenu(null);
                 }}
+                disabled={bagFull}
               >
                 No
               </Button>
@@ -214,7 +241,9 @@ const MarketplaceRow = ({
               singlePurchaseExists(item.item ?? "") ||
               item.owner ||
               checkOwned(item.item ?? "") ||
-              checkPurchased(item.item ?? "")
+              checkPurchased(item.item ?? "") ||
+              (equipFull && bagFull) ||
+              (bagFull && !emptySlot)
             }
             className={checkTransacting(item.item ?? "") ? "bg-white" : ""}
           >
@@ -226,6 +255,8 @@ const MarketplaceRow = ({
               ? "In Cart"
               : checkOwned(item.item ?? "")
               ? "Owned"
+              : (equipFull && bagFull) || (bagFull && !emptySlot)
+              ? "Inventory Full"
               : "Purchase"}
           </Button>
         )}

ui/src/app/components/marketplace/MarketplaceTable.tsx

@@ -18,6 +18,7 @@ export interface MarketplaceTableProps {
   totalCharisma: number;
   calculatedNewGold: number;
   adventurerItems: Item[];
+  dropItems: string[];
 }
 
 const MarketplaceTable = ({
@@ -27,6 +28,7 @@ const MarketplaceTable = ({
   totalCharisma,
   calculatedNewGold,
   adventurerItems,
+  dropItems,
 }: MarketplaceTableProps) => {
   const [sortField, setSortField] = useState<string | null>(null);
   const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
@@ -133,6 +135,7 @@ const MarketplaceTable = ({
                 setPurchaseItems={setPurchaseItems}
                 upgradeHandler={upgradeHandler}
                 totalCharisma={totalCharisma}
+                dropItems={dropItems}
                 key={index}
               />
             ))
@@ -148,6 +151,9 @@ const MarketplaceTable = ({
         <div className="sm:hidden h-full">
           {(() => {
             const item = sortedMarketLatestItems[showEquipQ ?? 0];
+            const bagFull =
+              adventurerItems.filter((obj) => !obj.equipped).length == 11;
+
             return (
               <div
                 className={`${
@@ -188,6 +194,7 @@ const MarketplaceTable = ({
                     upgradeHandler(undefined, undefined, newPurchases);
                     setShowEquipQ(null);
                   }}
+                  disabled={bagFull}
                 >
                   No
                 </Button>

ui/src/app/components/menu/ButtonMenu.tsx

@@ -85,7 +85,10 @@ const ButtonMenu: React.FC<ButtonMenuProps> = ({
         <Button
           key={buttonData.id}
           ref={(ref) => (buttonRefs.current[index] = ref)}
-          className="flex flex-row gap-5 w-full"
+          className={`flex flex-row gap-5 w-full ${
+            selectedIndex === index &&
+            "bg-terminal-green text-terminal-black hover:bg-terminal-green hover:text-terminal-black"
+          }`}
           variant="outline"
           size={size}
           onClick={() => {
@@ -94,7 +97,11 @@ const ButtonMenu: React.FC<ButtonMenuProps> = ({
           }}
           disabled={buttonData.disabled}
         >
-          {buttonData.icon && <div className="w-6 h-6">{buttonData.icon}</div>}
+          {buttonData.icon && (
+            <div className="flex items-center justify-center w-6 h-6">
+              {buttonData.icon}
+            </div>
+          )}
           {buttonData.label}
         </Button>
       ))}

ui/src/app/components/navigation/ApibaraStatus.tsx

@@ -14,7 +14,7 @@ export default function ApibaraStatus({ status }: ApibaraStatusProps) {
 
   return (
     <div
-      className={`w-2 h-2 sm:w-4 sm:h-4 rounded-lg ${color} cursor-pointer`}
+      className={`w-2 h-2 mx-2 sm:w-4 sm:h-4 rounded-lg ${color} cursor-pointer`}
       onClick={() => window.open("https://apibara.statuspage.io/", "_blank")}
     />
   );