Merge pull request #384 from BibliothecaDAO/feat/design-improve

Feat/design improve
BibliothecaDAO · Oct 9, 2023 · 1bacbc2 · 1bacbc2 · vercel · Oct 9, 2023
2 parents e9503e0 + 8a3faf5
commit 1bacbc2
Show file tree

Hide file tree

Showing 17 changed files with 80 additions and 71 deletions.
diff --git a/ui/src/app/components/KeyboardControls.tsx b/ui/src/app/components/KeyboardControls.tsx
@@ -49,16 +49,18 @@ const KeyboardControl = ({ buttonsData, size, direction }: ButtonProps) => {
 
   return (
     <div
-      className={`flex ${direction === "row" ? "flex-row" : "flex-col"} w-full justify-between`}
+      className={`flex ${
+        direction === "row" ? "flex-row" : "flex-col"
+      } w-full justify-between`}
     >
       {buttonsData.map((buttonData, index) => (
         <Button
           onMouseEnter={buttonData.mouseEnter}
           onMouseLeave={buttonData.mouseLeave}
           key={buttonData.id}
           ref={(ref) => (buttonRefs.current[index] = ref)}
-          className={`w-full ${selectedIndex === index ? "animate-pulse" : ""}`}
-          variant={selectedIndex === index ? "default" : "outline"}
+          className={`w-full`}
+          variant={"outline"}
           onClick={() => {
             buttonData.action();
             setSelectedIndex(index);

diff --git a/ui/src/app/components/adventurer/Info.tsx b/ui/src/app/components/adventurer/Info.tsx
@@ -108,9 +108,9 @@ export default function Info({
   return (
     <>
       {adventurer?.id ? (
-        <div className="border border-terminal-green xl:h-[500px] 2xl:h-full">
-          <div className="flex flex-row flex-wrap gap-2 p-2 xl:h-full">
-            <div className="flex flex-col w-full uppercase xl:h-full">
+        <div className="border border-terminal-green h-full">
+          <div className="flex flex-row flex-wrap gap-2 p-2 h-full">
+            <div className="flex flex-col w-full uppercase h-full">
               <div className="relative flex justify-between w-full text-xl sm:text-2xl lg:text-3xl border-b border-terminal-green">
                 {formatAdventurer.name}
                 <span className="relative flex items-center text-terminal-yellow">
@@ -143,19 +143,19 @@ export default function Info({
                 <LevelBar xp={formatAdventurer.xp ?? 0} />
               </div>
 
-              <div className="flex flex-col w-full justify-between overflow-hidden">
+              <div className="flex flex-col w-full gap-1 overflow-hidden h-[450px] sm:h-full">
                 <div className="flex flex-row w-full font-semibold text-xs sm:text-sm lg:text-base">
                   {attributes.map((attribute) => (
                     <div
                       key={attribute.key}
-                      className="flex flex-wrap justify-between p-1 bg-terminal-green text-terminal-black w-full border border-terminal-black  sm:mb-2"
+                      className="flex flex-wrap justify-between p-1 bg-terminal-green text-terminal-black w-full border border-terminal-black"
                     >
                       {attribute.key}
                       <span className="pl-1">{attribute.value}</span>
                     </div>
                   ))}
                 </div>
-                <div className="w-full flex flex-col sm:gap-1 2xl:gap-0 text-xs h-full xl:h-[500px] overflow-y-auto 2xl:overflow-hidden">
+                <div className="w-full flex flex-col sm:gap-1 2xl:gap-0 text-xs h-[400px] sm:h-[425px] overflow-y-auto 2xl:overflow-hidden">
                   {bodyParts.map((part) => (
                     <ItemDisplay
                       item={

diff --git a/ui/src/app/components/adventurer/ItemDisplay.tsx b/ui/src/app/components/adventurer/ItemDisplay.tsx
@@ -145,20 +145,20 @@ export const ItemDisplay = ({
     <>
       {!showInventoryItems ? (
         <div
-          className={`flex flex-row items-center mb-1 text-sm sm:text-base w-full h-10 sm:h-10 md:h-full  ${
+          className={`flex flex-row items-center mb-1 text-sm sm:text-base w-full h-[8rem] sm:h-10 md:h-full  ${
             item.item
               ? "bg-terminal-green text-terminal-black 2xl:overflow-x-auto 2xl:overflow-y-hidden"
               : ""
           }`}
           ref={scrollableRef}
         >
           <div className="sm:hidden flex flex-col items-center justify-center border-r-2 border-terminal-black p-1 sm:p-2 gap-2">
-            <LootIcon size={"w-3"} type={itemSlot ? itemSlot : slot} />
-            <Efficacyicon size={"w-4"} type={type} />
+            <LootIcon size={"w-5"} type={itemSlot ? itemSlot : slot} />
+            <Efficacyicon size={"w-5"} type={type} />
           </div>
           <div className="hidden sm:flex flex-col justify-center border-r-2 border-terminal-black p-1 sm:p-2 gap-2">
-            <LootIcon size={"w-4"} type={itemSlot ? itemSlot : slot} />
-            <Efficacyicon size={"w-4"} type={type} />
+            <LootIcon size={"w-5"} type={itemSlot ? itemSlot : slot} />
+            <Efficacyicon size={"w-5"} type={type} />
           </div>
 
           {item.item ? (
@@ -192,12 +192,12 @@ export const ItemDisplay = ({
                         <Button
                           variant={"contrast"}
                           size={"xxs"}
-                          className="p-1"
+                          className="p-1 xl:p-0 2xl:h-5 2xl:w-6"
                           onClick={() => {
                             setShowInventoryItems(true);
                           }}
                         >
-                          <SwapIcon className="w-3 h-3 lg:w-4 lg:h-4" />
+                          <SwapIcon className="w-2 h-2 lg:w-3 lg:h-3" />
                         </Button>
                       )}
                       {inventory && (
@@ -237,7 +237,7 @@ export const ItemDisplay = ({
                         <Button
                           variant={"contrast"}
                           size={"xxs"}
-                          className="p-1"
+                          className="p-1 xl:p-0 2xl:h-5 2xl:w-6"
                           onClick={() => handleDrop(item.item ?? "")}
                           disabled={checkDropping(item.item ?? "")}
                         >

diff --git a/ui/src/app/components/adventurer/Player.tsx b/ui/src/app/components/adventurer/Player.tsx
@@ -6,9 +6,7 @@ export default function Player() {
   return (
     <>
       {adventurer?.id ? (
-        <div className="w-full">
-          <Info adventurer={adventurer} />
-        </div>
+        <Info adventurer={adventurer} />
       ) : (
         <div className="flex items-center justify-center">
           <p>Please select an adventurer!</p>

diff --git a/ui/src/app/components/beast/BeastDisplay.tsx b/ui/src/app/components/beast/BeastDisplay.tsx
@@ -20,8 +20,8 @@ export const BeastDisplay = ({ beastData }: BeastDisplayProps) => {
   const { tier, attack, armor, image } = getBeastData(beastData?.beast ?? "");
 
   return (
-    <div className="relative flex flex-col items-center h-full xl:h-[500px] 2xl:h-full  border-2 border-terminal-green">
-      <div className="flex flex-col w-full h-full sm:p-3 uppercase">
+    <div className="relative flex flex-col items-center h-full border-2 border-terminal-green">
+      <div className="flex flex-col w-full sm:p-3 uppercase">
         <div className="flex justify-between py-1 sm:py-3 text-2xl sm:text-4xl border-b border-terminal-green  px-2 ">
           {beastName}
           <div

diff --git a/ui/src/app/components/icons/LootIcon.tsx b/ui/src/app/components/icons/LootIcon.tsx
@@ -27,7 +27,9 @@ export interface ItemDisplayProps {
 }
 
 const ItemDisplay = ({ type, size = "w-5", className }: ItemDisplayProps) => {
-  const classes = `fill-current ${size} ${className}`;
+  const classes = `fill-current ${size} ${
+    size == "w-8" ? "h-8" : ""
+  } ${className}`;
   const Components: { [key in string]: ReactElement } = {
     chest: <Chest className={classes} />,
     weapon: <Weapon className={classes} />,

diff --git a/ui/src/app/components/intro/ArcadeIntro.tsx b/ui/src/app/components/intro/ArcadeIntro.tsx
@@ -72,6 +72,9 @@ export const ArcadeIntro = () => {
     }
   };
 
+  const checkNotEnoughPrefundEth = eth < parseInt(ETH_PREFUND_AMOUNT);
+  const checkAnyETh = eth === 0;
+
   return (
     <>
       <div className="fixed inset-0 opacity-80 bg-terminal-black z-40" />
@@ -106,7 +109,11 @@ export const ArcadeIntro = () => {
           </div>
           <p className="text-sm xl:text-xl 2xl:text-2xl">Mint Some Lords</p>
           <Button
-            onClick={() => mintLords()}
+            onClick={() =>
+              checkAnyETh
+                ? window.open("https://faucet.goerli.starknet.io/", "_blank")
+                : mintLords()
+            }
             disabled={
               isWrongNetwork ||
               isMintingLords ||
@@ -117,6 +124,8 @@ export const ArcadeIntro = () => {
             <Lords className="sm:w-5 sm:h-5  h-3 w-3 fill-current mr-1" />{" "}
             {isMintingLords ? (
               <p className="loading-ellipsis">Minting Lords</p>
+            ) : checkAnyETh ? (
+              "GET GOERLI ETH"
             ) : (
               "Mint"
             )}
@@ -126,15 +135,15 @@ export const ArcadeIntro = () => {
             approvals)
           </p>
           <Button
-            onClick={() => create()}
-            disabled={
-              isWrongNetwork ||
-              eth < parseInt(ETH_PREFUND_AMOUNT) ||
-              lords < parseInt(LORDS_PREFUND_AMOUNT)
+            onClick={() =>
+              checkNotEnoughPrefundEth
+                ? window.open("https://faucet.goerli.starknet.io/", "_blank")
+                : create()
             }
+            disabled={isWrongNetwork || lords < parseInt(LORDS_PREFUND_AMOUNT)}
             className="w-1/4"
           >
-            {eth < parseInt(ETH_PREFUND_AMOUNT) ? "NOT ENOUGH ETH" : "CREATE"}
+            {checkNotEnoughPrefundEth ? "GET GOERLI ETH" : "CREATE"}
           </Button>
           {isDeploying && (
             <div className="fixed inset-0 opacity-80 bg-terminal-black z-50 m-2 w-full h-full">

diff --git a/ui/src/app/components/menu/ButtonMenu.tsx b/ui/src/app/components/menu/ButtonMenu.tsx
@@ -85,18 +85,8 @@ const ButtonMenu: React.FC<ButtonMenuProps> = ({
         <Button
           key={buttonData.id}
           ref={(ref) => (buttonRefs.current[index] = ref)}
-          className={
-            selectedIndex === index && isActive
-              ? "flex flex-row gap-5 animate-pulse w-full"
-              : "flex flex-row gap-5 w-full"
-          }
-          variant={
-            buttonData.variant
-              ? buttonData.variant
-              : selectedIndex === index
-              ? "default"
-              : "outline"
-          }
+          className="flex flex-row gap-5 w-full"
+          variant="outline"
           size={size}
           onClick={() => {
             setSelectedIndex(index);

diff --git a/ui/src/app/components/start/AdventurersList.tsx b/ui/src/app/components/start/AdventurersList.tsx
@@ -77,7 +77,7 @@ export const AdventurersList = ({
   }, [isActive, handleKeyDown]);
 
   return (
-    <div className="flex flex-col items-center h-screen">
+    <div className="flex flex-col items-center h-full">
       {sortedAdventurers.length > 0 ? (
         <div className="flex flex-col gap-2 sm:flex-row w-full h-full items-center sm:items-start">
           <div className="flex flex-col w-full sm:w-1/3 overflow-y-auto mx-2 border border-terminal-green sm:border-none h-[350px] xl:h-[500px] 2xl:h-[625px] p-1">
@@ -121,7 +121,7 @@ export const AdventurersList = ({
             )}
           </div>
           {filteredAdventurers.length > 0 && (
-            <div className="hidden sm:block sm:w-6/12 md:w-6/12 lg:w-2/3 w-full">
+            <div className="hidden sm:block sm:w-6/12 md:w-6/12 lg:w-2/3 w-full h-full">
               {isLoading.global ? (
                 <LootIconLoader className="m-auto" size="w-10" />
               ) : (

diff --git a/ui/src/app/containers/ActionsScreen.tsx b/ui/src/app/containers/ActionsScreen.tsx
@@ -67,8 +67,8 @@ export default function ActionsScreen({
   ];
 
   return (
-    <div className="flex flex-col sm:flex-row flex-wrap">
-      <div className="hidden sm:block sm:w-1/2 lg:w-1/3">
+    <div className="flex flex-col sm:flex-row flex-wrap h-full">
+      <div className="hidden sm:block sm:w-1/2 lg:w-1/3 h-full">
         <Info adventurer={adventurer} />
       </div>
 

diff --git a/ui/src/app/containers/AdventurerScreen.tsx b/ui/src/app/containers/AdventurerScreen.tsx
@@ -71,7 +71,7 @@ export default function AdventurerScreen({
   }
 
   return (
-    <div className="flex flex-col gap-2 sm:gap-0 sm:flex-row flex-wrap">
+    <div className="flex flex-col gap-2 sm:gap-0 sm:flex-row flex-wrap h-full">
       <div className="w-full sm:w-2/12">
         <ButtonMenu
           buttonsData={menu}
@@ -96,7 +96,7 @@ export default function AdventurerScreen({
       )}
 
       {startOption === "choose adventurer" && (
-        <div className="flex flex-col sm:w-5/6">
+        <div className="flex flex-col sm:w-5/6 h-[500px] sm:h-full">
           <p className="text-center text-xl sm:hidden uppercase">Adventurers</p>
 
           <AdventurersList

diff --git a/ui/src/app/containers/BeastScreen.tsx b/ui/src/app/containers/BeastScreen.tsx
@@ -147,12 +147,10 @@ export default function BeastScreen({ attack, flee }: BeastScreenProps) {
   }
 
   return (
-    <div className="sm:w-2/3 sm:h-2/3 flex flex-col sm:flex-row">
+    <div className="sm:w-2/3 flex flex-col sm:flex-row h-full">
       <div className="sm:w-1/2 order-1 sm:order-2">
         {hasBeast ? (
-          <>
-            <BeastDisplay beastData={beastData} />
-          </>
+          <BeastDisplay beastData={beastData} />
         ) : (
           <div className="flex flex-col items-center border-2 border-terminal-green">
             <p className="m-auto text-lg uppercase text-terminal-green">
@@ -206,7 +204,7 @@ export default function BeastScreen({ attack, flee }: BeastScreenProps) {
           </>
         )}
 
-        <div className="hidden sm:block xl:h-[500px] 2xl:h-full">
+        <div className="hidden sm:block">
           {(hasBeast || formatBattles.length > 0) && <BattleLog />}
         </div>
 

diff --git a/ui/src/app/containers/GuideScreen.tsx b/ui/src/app/containers/GuideScreen.tsx
@@ -90,7 +90,7 @@ export default function GuideScreen() {
   ];
 
   return (
-    <div className="h-[500px] overflow-y-auto 2xl:h-[650px] p-2 table-scroll text-xs sm:text-base sm:text-left">
+    <div className="overflow-y-auto p-2 table-scroll text-xs sm:text-base sm:text-left h-full">
       <div className="flex flex-col sm:flex-row justify-between items-center mb-4">
         <h1>Loot Survivor</h1>
         <a

diff --git a/ui/src/app/containers/InventoryScreen.tsx b/ui/src/app/containers/InventoryScreen.tsx
@@ -161,7 +161,7 @@ export default function InventoryScreen() {
   const selectedItems = groupedItems[selected || "Weapon"] || [];
 
   return (
-    <div className="flex flex-row sm:gap-5">
+    <div className="flex flex-row sm:gap-5 h-full">
       <div className="hidden sm:block sm:w-1/2 lg:w-1/3">
         <Info adventurer={adventurer} />
       </div>
@@ -175,7 +175,7 @@ export default function InventoryScreen() {
           isSelected={inventorySelected == 0}
           setSelected={setInventorySelected}
           equippedItem={adventurer?.weapon}
-          icon={<LootIcon type="bag" />}
+          icon={<LootIcon type="bag" size="w-8" />}
           equipItems={equipItems}
           setEquipItems={setEquipItems}
         />
@@ -188,7 +188,7 @@ export default function InventoryScreen() {
           isSelected={inventorySelected == 1}
           setSelected={setInventorySelected}
           equippedItem={adventurer?.weapon}
-          icon={<LootIcon type="weapon" size="w-4" />}
+          icon={<LootIcon type="weapon" size="w-8" />}
           equipItems={equipItems}
           setEquipItems={setEquipItems}
         />
@@ -201,7 +201,7 @@ export default function InventoryScreen() {
           isSelected={inventorySelected == 2}
           setSelected={setInventorySelected}
           equippedItem={adventurer?.chest}
-          icon={<LootIcon type="chest" size="w-4" />}
+          icon={<LootIcon type="chest" size="w-8" />}
           equipItems={equipItems}
           setEquipItems={setEquipItems}
         />
@@ -214,7 +214,7 @@ export default function InventoryScreen() {
           isSelected={inventorySelected == 3}
           setSelected={setInventorySelected}
           equippedItem={adventurer?.head}
-          icon={<LootIcon type="head" size="w-4" />}
+          icon={<LootIcon type="head" size="w-8" />}
           equipItems={equipItems}
           setEquipItems={setEquipItems}
         />
@@ -227,7 +227,7 @@ export default function InventoryScreen() {
           isSelected={inventorySelected == 4}
           setSelected={setInventorySelected}
           equippedItem={adventurer?.waist}
-          icon={<LootIcon type="waist" size="w-4" />}
+          icon={<LootIcon type="waist" size="w-8" />}
           equipItems={equipItems}
           setEquipItems={setEquipItems}
         />
@@ -240,7 +240,7 @@ export default function InventoryScreen() {
           isSelected={inventorySelected == 5}
           setSelected={setInventorySelected}
           equippedItem={adventurer?.foot}
-          icon={<LootIcon type="foot" size="w-4" />}
+          icon={<LootIcon type="foot" size="w-8" />}
           equipItems={equipItems}
           setEquipItems={setEquipItems}
         />
@@ -253,7 +253,7 @@ export default function InventoryScreen() {
           isSelected={inventorySelected == 6}
           setSelected={setInventorySelected}
           equippedItem={adventurer?.hand}
-          icon={<LootIcon type="hand" size="w-4" />}
+          icon={<LootIcon type="hand" size="w-8" />}
           equipItems={equipItems}
           setEquipItems={setEquipItems}
         />
@@ -266,7 +266,7 @@ export default function InventoryScreen() {
           isSelected={inventorySelected == 7}
           setSelected={setInventorySelected}
           equippedItem={adventurer?.neck}
-          icon={<LootIcon type="neck" size="w-4" />}
+          icon={<LootIcon type="neck" size="w-8" />}
           equipItems={equipItems}
           setEquipItems={setEquipItems}
         />
@@ -279,7 +279,7 @@ export default function InventoryScreen() {
           isSelected={inventorySelected == 8}
           setSelected={setInventorySelected}
           equippedItem={adventurer?.ring}
-          icon={<LootIcon type="ring" size="w-4" />}
+          icon={<LootIcon type="ring" size="w-8" />}
           equipItems={equipItems}
           setEquipItems={setEquipItems}
         />

diff --git a/ui/src/app/containers/LeaderboardScreen.tsx b/ui/src/app/containers/LeaderboardScreen.tsx
@@ -73,7 +73,7 @@ export default function LeaderboardScreen() {
   }, [adventurersByXPdata]);
 
   return (
-    <div className="flex flex-col items-center justify-between xl:h-[500px] xl:overflow-y-auto 2xl:h-full 2xl:overflow-hidden mt-5 sm:mt-0">
+    <div className="flex flex-col items-center h-full xl:overflow-y-auto 2xl:overflow-hidden mt-5 sm:mt-0">
       <Button
         onClick={async () => {
           const adventurersByXPdata = await refetch(