Merge Staging (#53)

* Merge from main (#31) * Fixed sweeping gas handling following EIP-4844 upgrades on optimism (#35) * Fixed gas issues following EIP-4844 upgrade on optimism * Pk dice updates (#36) * Added a welcome roll section to home screen, set theme to light mode only, removed ai background & responsive UI updates * Added admin feature to increase and decrease hidden characters (#38) * Added admin feature to increase and decrease hidden characters * set server to live (#40) * Changed backend to heroku's deployment (#42) * vercel backend config * vercel backend config * vercel backend config * vercel backend config * vercel backend config * vercel backend config * backend with heroku * backend deployed to fly.io (#44) * deployed backend to fly.io * removed welcome roll condition (#46) * Welcome roll new Ui background (#48) * removed welcome roll condition * welcome roll ui background * ui updates (#50) * removed welcome roll condition * welcome roll ui background * ui update * welcome roll ui update (#52) * removed welcome roll condition * welcome roll ui background * ui update * welcome roll ui update
BuidlGuidl · Jul 24, 2024 · 6aac4b3 · 6aac4b3
1 parent 22bf429
commit 6aac4b3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 43 deletions.
diff --git a/packages/nextjs/components/dicedemo/WelcomeRoll.tsx b/packages/nextjs/components/dicedemo/WelcomeRoll.tsx
@@ -75,18 +75,16 @@ const WelcomeRoll = () => {
   }, [rolledResult]);
 
   return (
-    <div className="flex justify-center flex-col gap-2 bg-white">
-      <button
-        className="btn btn-sm btn-primary mx-auto "
-        onClick={rollTheDice}
-        disabled={isRolling || spinning || isHacked}
-      >
-        {spinning && <span className="loading loading-spinner"></span>}
-        Roll
-      </button>
+    <div className="bg-white overflow-hidden h-fit">
+      <div className="flex justify-center mt-2">
+        <button className="btn btn-sm btn-primary " onClick={rollTheDice} disabled={isRolling || spinning || isHacked}>
+          {spinning && <span className="loading loading-spinner"></span>}
+          Roll
+        </button>
+      </div>
       <div className="h-10">
         {rolledAddress != "" && (
-          <div className="flex justify-center items-center gap-2   mt-2 ">
+          <div className="flex justify-center items-center gap-2 mt-2 ">
             <span>
               <Address address={rolledAddress}></Address>
             </span>
@@ -96,45 +94,34 @@ const WelcomeRoll = () => {
           </div>
         )}
       </div>
-      <div className="grid grid-cols-8 w-full mt-2 mx-auto opacity-100">
-        {Array.from({ length: 64 }).map((_, index) =>
-          rolled ? (
-            isUnitRolling[index] ? (
-              <div
-                key={index}
-                className="w-[95%] h-[95%] overflow-hidden rounded-lg mx-auto flex justify-center items-center"
-              >
-                <div className="scale-125">
-                  <Image className="scale-150" src="/rolls-gif/Spin.gif" alt="spinning" width={350} height={350} />
-                </div>
-              </div>
-            ) : (
-              <div
-                key={index}
-                className="w-[95%] h-[95%] overflow-hidden rounded-lg mx-auto flex justify-center items-center"
-              >
-                <div className="scale-125">
-                  <Image
-                    className="scale-150"
-                    src={`/rolls-jpg/${rolls[index]}.jpg`}
-                    alt="rolled"
-                    width={350}
-                    height={350}
-                  />
-                </div>
-              </div>
-            )
-          ) : (
+      <div className="grid grid-cols-8 mt-2 opacity-100">
+        {Array.from({ length: 64 }).map((_, index) => {
+          let src, alt;
+
+          if (rolled) {
+            if (isUnitRolling[index]) {
+              src = "/rolls-gif/Spin.gif";
+              alt = "spinning";
+            } else {
+              src = `/rolls-jpg/${rolls[index]}.jpg`;
+              alt = "rolled";
+            }
+          } else {
+            src = "/rolls-jpg/0.jpg";
+            alt = "zero roll";
+          }
+
+          return (
             <div
               key={index}
               className="w-[95%] h-[95%] overflow-hidden rounded-lg mx-auto flex justify-center items-center"
             >
               <div className="scale-125">
-                <Image className=" scale-150" src={`/rolls-jpg/0.jpg`} alt="zero roll" width={400} height={400} />
+                <Image className="scale-150" src={src} alt={alt} width={350} height={350} />
               </div>
             </div>
-          ),
-        )}
+          );
+        })}
       </div>
     </div>
   );

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -34,7 +34,9 @@ const Home: NextPage = () => {
 
         <div>
           <div className="mx-auto mt-5 border p-6 rounded-md bg-base-100 shadow-2xl flex flex-col">
-            <WelcomeRoll />
+            <div className="box">
+              <WelcomeRoll />
+            </div>
             <div className="flex justify-center mt-10">
               <ul className="menu menu-horizontal justify-center p-2 bg-base-300 rounded-full mb-8 w-fit mx-auto">
                 <li onClick={() => setGameState("joinGame")}>