diff --git a/.gitignore b/.gitignore index 245d4f3..d3a3b8f 100644 --- a/.gitignore +++ b/.gitignore @@ -39,4 +39,5 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts -package-lock.json/* \ No newline at end of file +package-lock.json/* +# Remember to remove the package-lock.json/* line if you dont want to commit package-lock.json files. \ No newline at end of file diff --git a/package.json b/package.json index 666971c..c3719af 100644 --- a/package.json +++ b/package.json @@ -9,14 +9,19 @@ "lint": "next lint" }, "dependencies": { + "@radix-ui/react-avatar": "^1.1.10", + "@radix-ui/react-separator": "^1.1.7", "@starknet-react/chains": "^3.1.3", "@starknet-react/core": "^3.7.4", + "class-variance-authority": "^0.7.1", "framer-motion": "^12.9.4", "lucide-react": "^0.507.0", "next": "15.3.1", "react": "^19.0.0", "react-dom": "^19.0.0", - "starknet": "^6.24.1" + "react-slot": "^0.1.2", + "starknet": "^6.24.1", + "tailwind-merge": "^3.3.0" }, "devDependencies": { "@eslint/eslintrc": "^3", diff --git a/src/app/game-board/components/chat-sidebar.tsx b/src/app/game-board/components/chat-sidebar.tsx new file mode 100644 index 0000000..1db4502 --- /dev/null +++ b/src/app/game-board/components/chat-sidebar.tsx @@ -0,0 +1,65 @@ +"use client" + +import { Button } from "../components/ui/button" +import { Input } from "../components/ui/input" +import { Settings, Send, Copy, Volume2 } from "lucide-react" + +export function ChatSidebar() { + return ( +
+ {/* Game Room Header */} +
+
+

Game Room

+
+ + +
+
+
+ https://gameroom10qd.io/rok + +
+
+ + {/* Chat Section */} +
+
+
+
+ +

Chat

+
+ +
+
+ + {/* Chat Messages */} +
+

No messages yet

+
+ + {/* Chat Input */} +
+
+ + +
+
+
+
+ ) +} diff --git a/src/app/game-board/components/corner-space.tsx b/src/app/game-board/components/corner-space.tsx new file mode 100644 index 0000000..24707c4 --- /dev/null +++ b/src/app/game-board/components/corner-space.tsx @@ -0,0 +1,50 @@ +"use client" + +import { Card } from "../components/ui/card" + +interface CornerSpaceProps { + name: string +} + +export function CornerSpace({ name }: CornerSpaceProps) { + const getCornerContent = () => { + switch (name) { + case "GO": + return ( +
+
GO
+
Collect ⊕200
+
+ ) + case "Jail": + return ( +
+
JAIL
+
Just Visiting
+
+ ) + case "Free Parking": + return ( +
+
FREE
+
PARKING
+
+ ) + case "Go to Jail": + return ( +
+
GO TO
+
JAIL
+
+ ) + default: + return
{name}
+ } + } + + return ( + + {getCornerContent()} + + ) +} diff --git a/src/app/game-board/components/game-board.tsx b/src/app/game-board/components/game-board.tsx new file mode 100644 index 0000000..c462b23 --- /dev/null +++ b/src/app/game-board/components/game-board.tsx @@ -0,0 +1,102 @@ +"use client" + +import { PropertyCard } from "../components/property-card" +import { CornerSpace } from "../components/corner-space" +import { Button } from "../components/ui/button" + +const boardProperties = { + top: [ + { name: "Free Parking", type: "corner" }, + { name: "LONDON", color: "bg-orange-500", price: 220, rent: 18, hasBuilding: true }, + { name: "MOSCOW", color: "bg-yellow-500", price: 240, rent: 20, hasFlag: true }, + { name: "BERLIN", color: "bg-yellow-500", price: 240, rent: 20, hasFlag: true }, + { name: "PARIS", color: "bg-red-500", price: 260, rent: 22, hasLandmark: true }, + { name: "MADRID", color: "bg-red-500", price: 260, rent: 22, hasLandmark: true }, + { name: "ROME", color: "bg-red-500", price: 280, rent: 24, hasPlane: true }, + { name: "Go to Jail", type: "corner" }, + ], + right: [ + { name: "TORONTO", color: "bg-green-500", price: 300, rent: 26, hasBuilding: true }, + { name: "TORONTO", color: "bg-green-500", price: 300, rent: 26, hasBuilding: true }, + { name: "NEW YORK", color: "bg-green-500", price: 320, rent: 28, hasBuilding: true }, + { name: "NEW YORK", color: "bg-green-500", price: 320, rent: 28, hasBuilding: true }, + ], + bottom: [ + { name: "Jail", type: "corner" }, + { name: "SYDNEY", color: "bg-blue-500", price: 350, rent: 35, hasLandmark: true }, + { name: "TAIPEI", color: "bg-blue-500", price: 350, rent: 35, hasBuilding: true }, + { name: "SHANGHAI", color: "bg-cyan-400", price: 400, rent: 50, hasBuilding: true }, + { name: "SEOUL", color: "bg-purple-500", price: 450, rent: 55, hasBuilding: true }, + { name: "TOKYO", color: "bg-purple-500", price: 500, rent: 60, hasPlane: true }, + { name: "GO", type: "corner" }, + ], + left: [ + { name: "CAIRO", color: "bg-purple-600", price: 100, rent: 6, hasLandmark: true }, + { name: "CAIRO", color: "bg-purple-600", price: 100, rent: 6, hasLandmark: true }, + { name: "CAIRO", color: "bg-purple-600", price: 120, rent: 8, hasLandmark: true }, + { name: "CAIRO", color: "bg-purple-600", price: 120, rent: 8, hasLandmark: true }, + ], +} + +export function GameBoard() { + return ( +
+
+ {/* Center Play Button */} +
+ +
+ + {/* Top Row */} +
+ {boardProperties.top.map((property, index) => ( +
+ {property.type === "corner" ? ( + + ) : ( + + )} +
+ ))} +
+ + {/* Right Column */} +
+
+ {boardProperties.right.map((property, index) => ( +
+ +
+ ))} +
+
+ + {/* Bottom Row */} +
+ {boardProperties.bottom.map((property, index) => ( +
+ {property.type === "corner" ? ( + + ) : ( + + )} +
+ ))} +
+ + {/* Left Column */} +
+
+ {boardProperties.left.map((property, index) => ( +
+ +
+ ))} +
+
+
+
+ ) +} diff --git a/src/app/game-board/components/game-header.tsx b/src/app/game-board/components/game-header.tsx new file mode 100644 index 0000000..b04071c --- /dev/null +++ b/src/app/game-board/components/game-header.tsx @@ -0,0 +1,46 @@ +"use client"; + +import { Avatar, AvatarFallback } from "../components/ui/avatar"; +import { Button } from "../components/ui/button"; +import { Bell, Volume2, Users } from "lucide-react"; +import Logo from "../../components/icons/logo"; + +export function GameHeader() { + return ( +
+
+ {/* Logo */} +
+
+ +
+
+ + {/* Right side */} +
+
+ + 0 friends online +
+ + + + + +
+ + + F + + + Flora +
+
+
+
+ ); +} diff --git a/src/app/game-board/components/game-sidebar.tsx b/src/app/game-board/components/game-sidebar.tsx new file mode 100644 index 0000000..30932de --- /dev/null +++ b/src/app/game-board/components/game-sidebar.tsx @@ -0,0 +1,98 @@ +"use client" + +import { Avatar, AvatarFallback } from "../components/ui/avatar" +import { Button } from "../components/ui/button" +import { Card, CardContent } from "../components/ui/card" +import { Separator } from "../components/ui/separator" +import { ChevronDown, Plus, Check, FileText } from "lucide-react" + +const players = [ + { name: "Aji", initials: "A", money: 1000, color: "bg-yellow-500", isMe: true }, + { name: "Flora", initials: "F", money: 1000, color: "bg-blue-500" }, + { name: "Ejembi", initials: "E", money: 1000, color: "bg-pink-500" }, +] + +export function GameSidebar() { + return ( +
+ {/* Players Section */} +
+
+

Players

+ +
+ +
+ {players.map((player) => ( +
+ + + {player.initials} + + +
+
+ {player.name} {player.isMe && "(Me)"} +
+ {player.isMe &&
Change appearance
} +
+
⊕{player.money}
+
+ ))} +
+
+ + + + {/* Trade Section */} +
+
+

Trade

+ +
+ + + +

+ Make trades with other players to exchange properties, money, and bonus cards. Use the Create Trade + button to create a new trade. +

+ + + +
+ + + + {/* My Properties Section */} +
+
+

My Properties

+ +
+ + + +

+ You can start building houses on your properties when you have a complete set. +

+

Click on a property to upgrade, downgrade or sell it

+ + + +
+
+ ) +} diff --git a/src/app/game-board/components/lib/utils.ts b/src/app/game-board/components/lib/utils.ts new file mode 100644 index 0000000..4b1c0f9 --- /dev/null +++ b/src/app/game-board/components/lib/utils.ts @@ -0,0 +1,7 @@ + +import { type ClassValue, clsx } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/src/app/game-board/components/property-card.tsx b/src/app/game-board/components/property-card.tsx new file mode 100644 index 0000000..dd78507 --- /dev/null +++ b/src/app/game-board/components/property-card.tsx @@ -0,0 +1,77 @@ +"use client" + +import { Card } from "../components/ui/card" +import { Building, Flag, Landmark, Plane, HelpCircle } from "lucide-react" + +interface PropertyCardProps { + name: string + color?: string + price?: number + // rent?: number + type?: string + orientation: "top" | "right" | "bottom" | "left" + hasBuilding?: boolean + hasFlag?: boolean + hasLandmark?: boolean + hasPlane?: boolean +} + +export function PropertyCard({ + name, + color, + price, + // rent, + type, + orientation, + hasBuilding, + hasFlag, + hasLandmark, + hasPlane, +}: PropertyCardProps) { + const isVertical = orientation === "left" || orientation === "right" + + const getIcon = () => { + if (hasBuilding) return + if (hasFlag) return + if (hasLandmark) return + if (hasPlane) return + return + } + + const getCardContent = () => { + if (type === "chance" || type === "community") { + return ( +
+ +
+ ) + } + + return ( +
+ {/* Color bar */} + {color &&
} + + {/* Content */} +
+
{getIcon()}
+
{name}
+ {price &&
⊕{price}
} +
+
+ ) + } + + return ( + + {getCardContent()} + + ) +} diff --git a/src/app/game-board/components/ui/avatar.tsx b/src/app/game-board/components/ui/avatar.tsx new file mode 100644 index 0000000..d86080b --- /dev/null +++ b/src/app/game-board/components/ui/avatar.tsx @@ -0,0 +1,40 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "../lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/src/app/game-board/components/ui/button.tsx b/src/app/game-board/components/ui/button.tsx new file mode 100644 index 0000000..3170291 --- /dev/null +++ b/src/app/game-board/components/ui/button.tsx @@ -0,0 +1,47 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "../lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", + { + variants: { + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", + secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-10 px-4 py-2", + sm: "h-9 rounded-md px-3", + lg: "h-11 rounded-md px-8", + icon: "h-10 w-10", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + }, +) + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button" + return + }, +) +Button.displayName = "Button" + +export { Button, buttonVariants } diff --git a/src/app/game-board/components/ui/card.tsx b/src/app/game-board/components/ui/card.tsx new file mode 100644 index 0000000..7861aea --- /dev/null +++ b/src/app/game-board/components/ui/card.tsx @@ -0,0 +1,43 @@ +import * as React from "react" + +import { cn } from "../lib/utils" + +const Card = React.forwardRef>(({ className, ...props }, ref) => ( +
+)) +Card.displayName = "Card" + +const CardHeader = React.forwardRef>( + ({ className, ...props }, ref) => ( +
+ ), +) +CardHeader.displayName = "CardHeader" + +const CardTitle = React.forwardRef>( + ({ className, ...props }, ref) => ( +

+ ), +) +CardTitle.displayName = "CardTitle" + +const CardDescription = React.forwardRef>( + ({ className, ...props }, ref) => ( +

+ ), +) +CardDescription.displayName = "CardDescription" + +const CardContent = React.forwardRef>( + ({ className, ...props }, ref) =>

, +) +CardContent.displayName = "CardContent" + +const CardFooter = React.forwardRef>( + ({ className, ...props }, ref) => ( +
+ ), +) +CardFooter.displayName = "CardFooter" + +export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } diff --git a/src/app/game-board/components/ui/input.tsx b/src/app/game-board/components/ui/input.tsx new file mode 100644 index 0000000..7b254a7 --- /dev/null +++ b/src/app/game-board/components/ui/input.tsx @@ -0,0 +1,21 @@ +import * as React from "react" +import { cn } from "../lib/utils" + +const Input = React.forwardRef>( + ({ className, type, ...props }, ref) => { + return ( + + ) + } +) +Input.displayName = "Input" + +export { Input } \ No newline at end of file diff --git a/src/app/game-board/components/ui/separator.tsx b/src/app/game-board/components/ui/separator.tsx new file mode 100644 index 0000000..d41f8f6 --- /dev/null +++ b/src/app/game-board/components/ui/separator.tsx @@ -0,0 +1,22 @@ +"use client" + +import * as React from "react" +import * as SeparatorPrimitive from "@radix-ui/react-separator" + +import { cn } from "../lib/utils" + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => ( + +)) +Separator.displayName = SeparatorPrimitive.Root.displayName + +export { Separator } diff --git a/src/app/game-board/page.tsx b/src/app/game-board/page.tsx new file mode 100644 index 0000000..d7170ed --- /dev/null +++ b/src/app/game-board/page.tsx @@ -0,0 +1,21 @@ +"use client" + +import { GameHeader } from "./components/game-header" +import { GameSidebar } from "./components/game-sidebar" +import { GameBoard } from "./components/game-board" +import { ChatSidebar } from "./components/chat-sidebar" + +export default function GamePage() { + return ( +
+ +
+ +
+ +
+ +
+
+ ) +} diff --git a/src/app/gameroom/page.tsx b/src/app/gameroom/page.tsx index 9cf219b..fd2efd8 100644 --- a/src/app/gameroom/page.tsx +++ b/src/app/gameroom/page.tsx @@ -2,14 +2,14 @@ "use client"; import React from "react"; -// import Navbar from "@/app/components/navbar"; +import Navbar from "@/app/components/navbar"; import { GameRoomProvider } from "@/app/contexts/GameRoomContext"; import GameRoomContent from "@/app/components/game-room/GameRoomContent"; export default function GameRoomPage() { return ( <> - {/* */} + diff --git a/src/app/join-game/page.tsx b/src/app/join-game/page.tsx index d907b84..fd160e1 100644 --- a/src/app/join-game/page.tsx +++ b/src/app/join-game/page.tsx @@ -2,6 +2,7 @@ import { useState } from "react"; import { ArrowLeft, Plus, User } from "lucide-react"; +import Navbar from "../components/navbar"; const shapes = { "arrow-right": "polygon(1rem 0%, 100% 0%, calc(100% - 1rem) 100%, 0% 100%)", @@ -97,7 +98,9 @@ export default function JoinRoom() { }; return ( -
+ <> + +
+ + ); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 68b50ff..b0d0ca7 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -3,7 +3,7 @@ import { Geist_Mono, Orbitron } from "next/font/google"; import "./globals.css"; import { StarknetProvider } from "./components/provider"; import { WalletProvider } from "./components/walletProvider"; -import Navbar from "./components/navbar"; +// import Navbar from "./components/navbar"; const orbitron = Orbitron({ variable: "--font-orbitron-sans", @@ -32,7 +32,7 @@ export default function RootLayout({ - + {/* */} {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index 8b915ec..19ef02b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,9 +1,9 @@ -// import Navbar from "./components/navbar"; +import Navbar from "./components/navbar"; export default function Home() { return (
-{/* */} +
); }