Skip to content

Commit 97c524a

Browse files
Akshola00Akshola00
authored
Merge pull request #18 from Uyoxy/feature/game-creation-qr
Add GameCreationPage with matching QR code/card sizes and Connect Wal…
2 parents d9040a8 + 30e91d5 commit 97c524a

6 files changed

Lines changed: 6683 additions & 19 deletions

File tree

‎app/components/WalletConnectButton.jsx‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,28 @@
1-
"use client"
1+
"use client";
22

33
import React, { useState } from "react";
44
import { connect, disconnect } from "get-starknet";
55
import { encode } from "starknet";
6+
67
function WalletConnectButton() {
78
const [walletAddress, setWalletAddress] = useState("");
89
const [walletName, setWalletName] = useState("");
910
const [wallet, setWallet] = useState("");
11+
1012
const handleDisconnect = async () => {
1113
await disconnect({ clearLastWallet: true });
1214
setWallet("");
1315
setWalletAddress("");
1416
setWalletName("");
1517
};
1618

17-
18-
const truncatedAdress = walletAddress.slice(0, 5) + "..." + walletAddress.slice(10, 15) + walletAddress.slice(20, 25)
19-
19+
const truncatedAddress =
20+
walletAddress.length > 25
21+
? walletAddress.slice(0, 5) +
22+
"..." +
23+
walletAddress.slice(10, 15) +
24+
walletAddress.slice(20, 25)
25+
: walletAddress;
2026

2127
const handleConnect = async () => {
2228
try {
@@ -34,32 +40,35 @@ function WalletConnectButton() {
3440
setWalletAddress(addr);
3541
setWalletName(getWallet?.name || "");
3642
} catch (e) {
37-
// Handle user rejection to install MetaMask / the Starknet Snap.
3843
console.log(e);
3944
}
4045
};
46+
4147
return (
4248
<div>
4349
{!walletAddress && (
44-
<button onClick={handleConnect} className="relative bg-white transform -skew-x-12 cursor-pointer px-4 sm:px-8 h-[40px] sm:h-[62px]">
45-
<span className="text-[#222C38] text-sm sm:text-base font-bold transform skew-x-12">
46-
CONNECT WALLET
47-
</span>
48-
</button>
50+
<button
51+
onClick={handleConnect}
52+
className="relative bg-white transform -skew-x-12 cursor-pointer px-4 sm:px-8 h-[40px] sm:h-[62px]"
53+
>
54+
<span className="text-[#222C38] text-sm sm:text-base font-bold transform skew-x-12">
55+
CONNECT WALLET
56+
</span>
57+
</button>
4958
)}
5059
{walletAddress && (
5160
<div>
52-
<button className="cursor-pointer flex flex-col items-center justify-center " onClick={handleDisconnect}>
53-
<span> Disconnect Wallet </span>
54-
55-
<p> {truncatedAdress} </p>
56-
</button>
61+
<button
62+
className="cursor-pointer flex flex-col items-center justify-center"
63+
onClick={handleDisconnect}
64+
>
65+
<span>Disconnect Wallet</span>
66+
<p>{truncatedAddress}</p>
67+
</button>
5768
</div>
5869
)}
59-
60-
61-
6270
</div>
6371
);
6472
}
73+
6574
export default WalletConnectButton;

‎app/createGame/page.tsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
"use client";
2+
import React, { useState, useEffect } from "react";
3+
import QRCode from "react-qr-code";
4+
import WalletConnectButton from "@/app/components/WalletConnectButton";
5+
6+
const GameCreationPage = () => {
7+
const [gameCode, setGameCode] = useState<string>("014454");
8+
const [qrValue, setQrValue] = useState<string>("");
9+
10+
useEffect(() => {
11+
const baseUrl = "https://yourgame.com/join";
12+
setQrValue(`${baseUrl}?code=${gameCode}`);
13+
}, [gameCode]);
14+
15+
const handleCreateGame = () => {
16+
const newCode = Math.floor(100000 + Math.random() * 900000)
17+
.toString()
18+
.substring(0, 6);
19+
setGameCode(newCode);
20+
console.log("Creating new game with code:", newCode);
21+
};
22+
23+
// Shared dimensions for both the CREATE GAME card and QR code container
24+
const containerClasses =
25+
"w-full sm:w-[250px] md:w-[292px] h-[180px] sm:h-[220px] md:h-[260px] mx-auto";
26+
27+
return (
28+
<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">
29+
{/* Connect Wallet Button */}
30+
<div className="absolute top-5 right-5 z-10">
31+
<WalletConnectButton />
32+
</div>
33+
34+
<div className="relative flex items-center justify-center h-full">
35+
{/* Grid Container */}
36+
<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">
37+
{/* CREATE GAME Card */}
38+
<div
39+
className={`${containerClasses} bg-gradient-to-r from-[#EB655F] to-[#151515] flex items-end justify-center relative opacity-90`}
40+
style={{
41+
transform: "perspective(500px) rotateY(5deg)",
42+
boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
43+
}}
44+
>
45+
<button
46+
onClick={handleCreateGame}
47+
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"
48+
>
49+
<span
50+
className="text-lg sm:text-xl md:text-2xl tracking-widest uppercase font-sans"
51+
style={{ textShadow: "0 1px 2px rgba(0,0,0,0.4)" }}
52+
>
53+
CREATE GAME
54+
</span>
55+
</button>
56+
</div>
57+
58+
{/* QR Code and Game Code Container */}
59+
<div className={`${containerClasses} relative flex flex-col items-center justify-center`}>
60+
<div className="p-2 bg-white rounded-md">
61+
<QRCode
62+
value={qrValue}
63+
size={100}
64+
className="w-[100px] h-[100px] sm:w-[120px] sm:h-[120px] md:w-[150px] md:h-[150px]"
65+
/>
66+
</div>
67+
<div className="mt-4 text-white text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold tracking-widest text-center">
68+
{gameCode}
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
);
75+
};
76+
77+
export default GameCreationPage;

‎app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import Image from "next/image";
33
import Link from "next/link";
44

5-
import WalletConnectButton from './components/WalletConnectButton';
5+
// import WalletConnectButton from './components/WalletConnectButton';
66

77

88
export default function Home() {

0 commit comments

Comments
 (0)