Add GameCreationPage with matching QR code/card sizes and Connect Wal…

app/components/WalletConnectButton.jsx

@@ -1,22 +1,28 @@
-"use client"
+"use client";
 
 import React, { useState } from "react";
 import { connect, disconnect } from "get-starknet";
 import { encode } from "starknet";
+
 function WalletConnectButton() {
   const [walletAddress, setWalletAddress] = useState("");
   const [walletName, setWalletName] = useState("");
   const [wallet, setWallet] = useState("");
+
   const handleDisconnect = async () => {
     await disconnect({ clearLastWallet: true });
     setWallet("");
     setWalletAddress("");
     setWalletName("");
   };
 
-
-  const truncatedAdress =  walletAddress.slice(0, 5) + "..." + walletAddress.slice(10, 15) +  walletAddress.slice(20, 25)
-
+  const truncatedAddress =
+    walletAddress.length > 25
+      ? walletAddress.slice(0, 5) +
+        "..." +
+        walletAddress.slice(10, 15) +
+        walletAddress.slice(20, 25)
+      : walletAddress;
 
   const handleConnect = async () => {
     try {
@@ -34,32 +40,35 @@ function WalletConnectButton() {
       setWalletAddress(addr);
       setWalletName(getWallet?.name || "");
     } catch (e) {
-      // Handle user rejection to install MetaMask / the Starknet Snap.
       console.log(e);
     }
   };
+
   return (
     <div>
       {!walletAddress && (
-        <button onClick={handleConnect} className="relative bg-white transform -skew-x-12 cursor-pointer px-4 sm:px-8 h-[40px] sm:h-[62px]">
-        <span className="text-[#222C38] text-sm sm:text-base font-bold transform skew-x-12">
-          CONNECT WALLET
-        </span>
-      </button>
+        <button
+          onClick={handleConnect}
+          className="relative bg-white transform -skew-x-12 cursor-pointer px-4 sm:px-8 h-[40px] sm:h-[62px]"
+        >
+          <span className="text-[#222C38] text-sm sm:text-base font-bold transform skew-x-12">
+            CONNECT WALLET
+          </span>
+        </button>
       )}
       {walletAddress && (
         <div>
-          <button className="cursor-pointer flex flex-col items-center justify-center " onClick={handleDisconnect}>
-          <span>  Disconnect Wallet </span>
-
-            <p> {truncatedAdress} </p>
-            </button>
+          <button
+            className="cursor-pointer flex flex-col items-center justify-center"
+            onClick={handleDisconnect}
+          >
+            <span>Disconnect Wallet</span>
+            <p>{truncatedAddress}</p>
+          </button>
         </div>
       )}
-
-
-
     </div>
   );
 }
+
 export default WalletConnectButton;

app/createGame/page.tsx

@@ -0,0 +1,77 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import QRCode from "react-qr-code";
+import WalletConnectButton from "@/app/components/WalletConnectButton";
+
+const GameCreationPage = () => {
+  const [gameCode, setGameCode] = useState<string>("014454");
+  const [qrValue, setQrValue] = useState<string>("");
+
+  useEffect(() => {
+    const baseUrl = "https://yourgame.com/join";
+    setQrValue(`${baseUrl}?code=${gameCode}`);
+  }, [gameCode]);
+
+  const handleCreateGame = () => {
+    const newCode = Math.floor(100000 + Math.random() * 900000)
+      .toString()
+      .substring(0, 6);
+    setGameCode(newCode);
+    console.log("Creating new game with code:", newCode);
+  };
+
+  // Shared dimensions for both the CREATE GAME card and QR code container
+  const containerClasses =
+    "w-full sm:w-[250px] md:w-[292px] h-[180px] sm:h-[220px] md:h-[260px] mx-auto";
+
+  return (
+    <div className="relative h-screen w-full overflow-hidden bg-gradient-to-b from-blue-900 to-purple-900 bg-[url('/Background.png')] bg-cover bg-center">
+    {/* Connect Wallet Button */}
+    <div className="absolute top-5 right-5 z-10">
+      <WalletConnectButton />
+    </div>
+
+    <div className="relative flex items-center justify-center h-full">
+      {/* Grid Container */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 lg:gap-4 max-w-2xl w-full px-4 sm:px-6 lg:px-8">
+        {/* CREATE GAME Card */}
+        <div
+          className={`${containerClasses} bg-gradient-to-r from-[#EB655F] to-[#151515] flex items-end justify-center relative opacity-90`}
+          style={{
+            transform: "perspective(500px) rotateY(5deg)",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+          }}
+        >
+          <button
+            onClick={handleCreateGame}
+            className="text-white font-bold py-3 sm:py-4 mr-0 sm:mr-6 md:mr-10 transform transition-transform duration-300 hover:scale-105 relative z-10"
+          >
+            <span
+              className="text-lg sm:text-xl md:text-2xl tracking-widest uppercase font-sans"
+              style={{ textShadow: "0 1px 2px rgba(0,0,0,0.4)" }}
+            >
+              CREATE GAME
+            </span>
+          </button>
+        </div>
+
+        {/* QR Code and Game Code Container */}
+        <div className={`${containerClasses} relative flex flex-col items-center justify-center`}>
+          <div className="p-2 bg-white rounded-md">
+            <QRCode
+              value={qrValue}
+              size={100}
+              className="w-[100px] h-[100px] sm:w-[120px] sm:h-[120px] md:w-[150px] md:h-[150px]"
+            />
+          </div>
+          <div className="mt-4 text-white text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold tracking-widest text-center">
+            {gameCode}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  );
+};
+
+export default GameCreationPage;

app/page.tsx

@@ -2,7 +2,7 @@
 import Image from "next/image";
 import Link from "next/link";
 
-import WalletConnectButton from './components/WalletConnectButton';
+// import WalletConnectButton from './components/WalletConnectButton';
 
 
 export default function Home() {