From f2663a6c36cfc994c45e29f21e18c862b8cffeed Mon Sep 17 00:00:00 2001
From: starknetdev <starknetdev@gmail.com>
Date: Thu, 5 Oct 2023 17:43:50 +0100
Subject: [PATCH 1/4] - modify actions layout - set fixed height for all
 screens - make drop + swap buttons smaller in adventurer card - start mobile
 fixes

---
 ui/src/app/components/KeyboardControls.tsx       |  8 +++++---
 ui/src/app/components/adventurer/ItemDisplay.tsx |  6 +++---
 ui/src/app/components/menu/ButtonMenu.tsx        | 14 ++------------
 ui/src/app/components/start/AdventurersList.tsx  |  4 ++--
 ui/src/app/containers/ActionsScreen.tsx          |  4 ++--
 ui/src/app/containers/AdventurerScreen.tsx       |  4 ++--
 ui/src/app/containers/BeastScreen.tsx            |  6 +++---
 ui/src/app/containers/GuideScreen.tsx            |  2 +-
 ui/src/app/containers/InventoryScreen.tsx        |  2 +-
 ui/src/app/containers/LeaderboardScreen.tsx      |  2 +-
 ui/src/app/page.tsx                              |  6 +++---
 11 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/ui/src/app/components/KeyboardControls.tsx b/ui/src/app/components/KeyboardControls.tsx
index 2e54fe3a9..53b9a670f 100644
--- a/ui/src/app/components/KeyboardControls.tsx
+++ b/ui/src/app/components/KeyboardControls.tsx
@@ -49,7 +49,9 @@ 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
@@ -57,8 +59,8 @@ const KeyboardControl = ({ buttonsData, size, direction }: ButtonProps) => {
           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/ItemDisplay.tsx b/ui/src/app/components/adventurer/ItemDisplay.tsx
index f2059d99e..7625c3104 100644
--- a/ui/src/app/components/adventurer/ItemDisplay.tsx
+++ b/ui/src/app/components/adventurer/ItemDisplay.tsx
@@ -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/menu/ButtonMenu.tsx b/ui/src/app/components/menu/ButtonMenu.tsx
index 77a4f9806..c259d3938 100644
--- 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
index f90bf292f..4b8a2d25d 100644
--- 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
index 36c2b2c55..fe7adcefb 100644
--- 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
index c45b37ac8..af2415732 100644
--- a/ui/src/app/containers/AdventurerScreen.tsx
+++ b/ui/src/app/containers/AdventurerScreen.tsx
@@ -92,7 +92,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}
@@ -115,7 +115,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-[575px] 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
index 7c51b16de..2cab2cd70 100644
--- a/ui/src/app/containers/BeastScreen.tsx
+++ b/ui/src/app/containers/BeastScreen.tsx
@@ -150,8 +150,8 @@ 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-1/2 order-1 sm:order-2">
+    <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 h-full">
         {hasBeast ? (
           <>
             <BeastDisplay beastData={beastData} />
@@ -207,7 +207,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
index 7da3e09ba..38546e6c6 100644
--- 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
index f02c1b017..144873bf3 100644
--- a/ui/src/app/containers/InventoryScreen.tsx
+++ b/ui/src/app/containers/InventoryScreen.tsx
@@ -176,7 +176,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>
diff --git a/ui/src/app/containers/LeaderboardScreen.tsx b/ui/src/app/containers/LeaderboardScreen.tsx
index b3112f817..103929301 100644
--- 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(
diff --git a/ui/src/app/page.tsx b/ui/src/app/page.tsx
index 222f8a8e8..a4df0eef8 100644
--- a/ui/src/app/page.tsx
+++ b/ui/src/app/page.tsx
@@ -358,7 +358,7 @@ export default function Home() {
           {status == "connected" && topUpDialog && <TopUpDialog />}
 
           {introComplete ? (
-            <div className="flex flex-col w-full">
+            <div className="flex flex-col w-full h-[625px]">
               <>
                 <div className="sm:hidden flex  sm:justify-normal sm:pb-2">
                   <ScreenMenu
@@ -382,7 +382,7 @@ export default function Home() {
                 <div className="sm:hidden">
                   <MobileHeader />
                 </div>
-                <>
+                <div className="h-[600px]">
                   {screen === "start" && (
                     <AdventurerScreen
                       spawn={spawn}
@@ -405,7 +405,7 @@ export default function Home() {
                   {screen === "settings" && <Settings />}
                   {screen === "player" && <Player />}
                   {screen === "wallet" && <WalletSelect />}
-                </>
+                </div>
               </>
             </div>
           ) : null}

From 8688be7b6cd28594661fcea2fbd4d8889f0ae7b4 Mon Sep 17 00:00:00 2001
From: starknetdev <starknetdev@gmail.com>
Date: Thu, 5 Oct 2023 19:21:45 +0100
Subject: [PATCH 2/4] - fix mobile heights - improve inventory

---
 ui/src/app/components/adventurer/Info.tsx      | 12 ++++++------
 .../app/components/adventurer/ItemDisplay.tsx  | 10 +++++-----
 ui/src/app/components/adventurer/Player.tsx    |  4 +---
 ui/src/app/components/beast/BeastDisplay.tsx   | 17 +++++++----------
 ui/src/app/components/icons/LootIcon.tsx       |  4 +++-
 ui/src/app/containers/AdventurerScreen.tsx     |  2 +-
 ui/src/app/containers/BeastScreen.tsx          |  6 ++----
 ui/src/app/containers/InventoryScreen.tsx      | 18 +++++++++---------
 ui/src/app/page.tsx                            |  4 ++--
 9 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/ui/src/app/components/adventurer/Info.tsx b/ui/src/app/components/adventurer/Info.tsx
index c91a79e50..f91020ec9 100644
--- a/ui/src/app/components/adventurer/Info.tsx
+++ b/ui/src/app/components/adventurer/Info.tsx
@@ -120,9 +120,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">
@@ -164,19 +164,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
index 7625c3104..a5283cd41 100644
--- a/ui/src/app/components/adventurer/ItemDisplay.tsx
+++ b/ui/src/app/components/adventurer/ItemDisplay.tsx
@@ -145,7 +145,7 @@ 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"
               : ""
@@ -153,12 +153,12 @@ export const ItemDisplay = ({
           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 ? (
diff --git a/ui/src/app/components/adventurer/Player.tsx b/ui/src/app/components/adventurer/Player.tsx
index ff2b3bb33..4a834dd26 100644
--- 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
index d944b7dbf..d596cf0fe 100644
--- a/ui/src/app/components/beast/BeastDisplay.tsx
+++ b/ui/src/app/components/beast/BeastDisplay.tsx
@@ -21,13 +21,14 @@ 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
-            className={`text-4xl flex ${beastData?.health === 0 ? "text-red-600" : "text-terminal-green"
-              }`}
+            className={`text-4xl flex ${
+              beastData?.health === 0 ? "text-red-600" : "text-terminal-green"
+            }`}
           >
             <HeartIcon className="self-center w-4 h-4 fill-current mr-1" />{" "}
             <div className="self-center text-xl sm:text-4xl">
@@ -36,12 +37,8 @@ export const BeastDisplay = ({ beastData }: BeastDisplayProps) => {
           </div>
         </div>
         <div className="flex justify-between w-full p-2 text-lg sm:text-3xl text-terminal-yellow">
-          <p>
-            Level {beastData?.level}
-          </p>
-          <p>
-            Tier {tier}
-          </p>
+          <p>Level {beastData?.level}</p>
+          <p>Tier {tier}</p>
         </div>
         <div className="flex flex-row justify-center gap-4 items-center w-full py-1 sm:py-4 space-x-2">
           <div className="flex flex-row gap-2 items-center ml-5">
diff --git a/ui/src/app/components/icons/LootIcon.tsx b/ui/src/app/components/icons/LootIcon.tsx
index 940f1bab7..e652cb888 100644
--- 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/containers/AdventurerScreen.tsx b/ui/src/app/containers/AdventurerScreen.tsx
index af2415732..54dc0c24f 100644
--- a/ui/src/app/containers/AdventurerScreen.tsx
+++ b/ui/src/app/containers/AdventurerScreen.tsx
@@ -115,7 +115,7 @@ export default function AdventurerScreen({
       )}
 
       {startOption === "choose adventurer" && (
-        <div className="flex flex-col sm:w-5/6 h-[575px] sm:h-full">
+        <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
index 2cab2cd70..63830f58d 100644
--- a/ui/src/app/containers/BeastScreen.tsx
+++ b/ui/src/app/containers/BeastScreen.tsx
@@ -151,11 +151,9 @@ export default function BeastScreen({ attack, flee }: BeastScreenProps) {
 
   return (
     <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 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">
diff --git a/ui/src/app/containers/InventoryScreen.tsx b/ui/src/app/containers/InventoryScreen.tsx
index 144873bf3..cf134475e 100644
--- a/ui/src/app/containers/InventoryScreen.tsx
+++ b/ui/src/app/containers/InventoryScreen.tsx
@@ -190,7 +190,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}
         />
@@ -203,7 +203,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}
         />
@@ -216,7 +216,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}
         />
@@ -229,7 +229,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}
         />
@@ -242,7 +242,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}
         />
@@ -255,7 +255,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}
         />
@@ -268,7 +268,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}
         />
@@ -281,7 +281,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}
         />
@@ -294,7 +294,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/page.tsx b/ui/src/app/page.tsx
index a4df0eef8..4868c2c5d 100644
--- a/ui/src/app/page.tsx
+++ b/ui/src/app/page.tsx
@@ -358,7 +358,7 @@ export default function Home() {
           {status == "connected" && topUpDialog && <TopUpDialog />}
 
           {introComplete ? (
-            <div className="flex flex-col w-full h-[625px]">
+            <div className="flex flex-col w-full h-[600px] sm:h-[625px]">
               <>
                 <div className="sm:hidden flex  sm:justify-normal sm:pb-2">
                   <ScreenMenu
@@ -382,7 +382,7 @@ export default function Home() {
                 <div className="sm:hidden">
                   <MobileHeader />
                 </div>
-                <div className="h-[600px]">
+                <div className="h-[550px] sm:h-[600px]">
                   {screen === "start" && (
                     <AdventurerScreen
                       spawn={spawn}

From 5becc1802f3b702a7dc1beb60329d4ae8d0a6eb8 Mon Sep 17 00:00:00 2001
From: starknetdev <starknetdev@gmail.com>
Date: Mon, 9 Oct 2023 14:49:01 +0100
Subject: [PATCH 3/4] add goerli faucet links

---
 ui/src/app/components/intro/ArcadeIntro.tsx | 23 ++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/ui/src/app/components/intro/ArcadeIntro.tsx b/ui/src/app/components/intro/ArcadeIntro.tsx
index 3405423ea..2d6e5cf55 100644
--- 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">

From 8a3faf5eb1758bd226caaf352cac4652f9df7cd9 Mon Sep 17 00:00:00 2001
From: starknetdev <starknetdev@gmail.com>
Date: Mon, 9 Oct 2023 15:24:26 +0100
Subject: [PATCH 4/4] temp AA fix

---
 ui/src/app/lib/utils/syscalls.ts | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/ui/src/app/lib/utils/syscalls.ts b/ui/src/app/lib/utils/syscalls.ts
index ec7c16bd0..790134d9b 100644
--- a/ui/src/app/lib/utils/syscalls.ts
+++ b/ui/src/app/lib/utils/syscalls.ts
@@ -232,6 +232,16 @@ export function syscalls({
   };
 
   const spawn = async (formData: FormData) => {
+    const mintLords: Call = {
+      contractAddress: lordsContract?.address ?? "",
+      entrypoint: "mint",
+      calldata: [account?.address ?? "0x0", (250 * 10 ** 18).toString(), "0"],
+    };
+    const approveLordsSpendingTx = {
+      contractAddress: lordsContract?.address ?? "",
+      entrypoint: "approve",
+      calldata: [gameContract?.address ?? "", (250 * 10 ** 18).toString(), "0"],
+    };
     const mintAdventurerTx = {
       contractAddress: gameContract?.address ?? "",
       entrypoint: "new_game",
@@ -244,7 +254,7 @@ export function syscalls({
 
     addToCalls(mintAdventurerTx);
     const balanceEmpty = await checkArcadeBalance(
-      [...calls, mintAdventurerTx],
+      [...calls, mintLords, approveLordsSpendingTx, mintAdventurerTx],
       ethBalance,
       showTopUpDialog,
       setTopUpAccount,
@@ -252,8 +262,6 @@ export function syscalls({
       account
     );
 
-    console.log(balanceEmpty);
-
     if (!balanceEmpty) {
       startLoading(
         "Create",
@@ -264,6 +272,8 @@ export function syscalls({
       try {
         const tx = await handleSubmitCalls(account, [
           ...calls,
+          mintLords,
+          approveLordsSpendingTx,
           mintAdventurerTx,
         ]);
         setTxHash(tx?.transaction_hash);