feat: add game board UI

.gitignore

@@ -39,4 +39,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-package-lock.json/*
+package-lock.json/*
+# Remember to remove the package-lock.json/* line if you dont want to commit package-lock.json files.

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",

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 (
+    <div className="w-80 bg-slate-800 flex flex-col">
+      {/* Game Room Header */}
+      <div className="p-6 border-b border-slate-700">
+        <div className="flex items-center justify-between mb-3">
+          <h2 className="text-lg font-semibold">Game Room</h2>
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" size="sm">
+              <Volume2 className="w-4 h-4" />
+            </Button>
+            <Button variant="ghost" size="sm">
+              <Settings className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-sm text-gray-400">
+          <span>https://gameroom10qd.io/rok</span>
+          <Button variant="ghost" size="sm" className="p-1">
+            <Copy className="w-3 h-3" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Chat Section */}
+      <div className="flex-1 flex flex-col">
+        <div className="p-4 border-b border-slate-700">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Volume2 className="w-4 h-4" />
+              <h3 className="font-semibold">Chat</h3>
+            </div>
+            <Button variant="ghost" size="sm">
+              <Settings className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+
+        {/* Chat Messages */}
+        <div className="flex-1 p-6 flex items-center justify-center">
+          <p className="text-gray-400 text-sm">No messages yet</p>
+        </div>
+
+        {/* Chat Input */}
+        <div className="p-4 border-t border-slate-700">
+          <div className="flex gap-2">
+            <Input
+              placeholder="type a message..."
+              className="bg-slate-700 border-slate-600 text-white placeholder-gray-400 text-sm"
+            />
+            <Button size="sm" className="bg-cyan-500 hover:bg-cyan-600">
+              <Send className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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 (
+          <div className="text-center p-2">
+            <div className="text-lg font-bold">GO</div>
+            <div className="text-xs">Collect ⊕200</div>
+          </div>
+        )
+      case "Jail":
+        return (
+          <div className="text-center p-2">
+            <div className="text-sm font-bold">JAIL</div>
+            <div className="text-xs">Just Visiting</div>
+          </div>
+        )
+      case "Free Parking":
+        return (
+          <div className="text-center p-2">
+            <div className="text-sm font-bold">FREE</div>
+            <div className="text-sm font-bold">PARKING</div>
+          </div>
+        )
+      case "Go to Jail":
+        return (
+          <div className="text-center p-2">
+            <div className="text-sm font-bold">GO TO</div>
+            <div className="text-sm font-bold">JAIL</div>
+          </div>
+        )
+      default:
+        return <div className="text-sm font-bold p-2">{name}</div>
+    }
+  }
+
+  return (
+    <Card className="w-24 h-24 bg-white text-black border border-gray-300 flex items-center justify-center">
+      {getCornerContent()}
+    </Card>
+  )
+}

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 (
+    <div className="flex items-center justify-center min-h-full">
+      <div className="relative w-[700px] h-[700px] bg-slate-900 rounded-lg">
+        {/* Center Play Button */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <Button className="bg-cyan-400 hover:bg-cyan-500 text-slate-900 font-bold text-xl px-12 py-6 rounded-full">
+            Play
+          </Button>
+        </div>
+
+        {/* Top Row */}
+        <div className="absolute top-0 left-0 right-0 flex">
+          {boardProperties.top.map((property, index) => (
+            <div key={index} className="flex-1">
+              {property.type === "corner" ? (
+                <CornerSpace name={property.name} />
+              ) : (
+                <PropertyCard {...property} orientation="top" />
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Right Column */}
+        <div className="absolute top-0 right-0 bottom-0 flex flex-col">
+          <div className="h-24"></div>
+          {boardProperties.right.map((property, index) => (
+            <div key={index} className="flex-1">
+              <PropertyCard {...property} orientation="right" />
+            </div>
+          ))}
+          <div className="h-24"></div>
+        </div>
+
+        {/* Bottom Row */}
+        <div className="absolute bottom-0 left-0 right-0 flex flex-row-reverse">
+          {boardProperties.bottom.map((property, index) => (
+            <div key={index} className="flex-1">
+              {property.type === "corner" ? (
+                <CornerSpace name={property.name} />
+              ) : (
+                <PropertyCard {...property} orientation="bottom" />
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Left Column */}
+        <div className="absolute top-0 left-0 bottom-0 flex flex-col-reverse">
+          <div className="h-24"></div>
+          {boardProperties.left.map((property, index) => (
+            <div key={index} className="flex-1">
+              <PropertyCard {...property} orientation="left" />
+            </div>
+          ))}
+          <div className="h-24"></div>
+        </div>
+      </div>
+    </div>
+  )
+}

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 (
+    <header className="bg-slate-800 border-b border-cyan-400 px-6 py-3">
+      <div className="flex items-center justify-between">
+        {/* Logo */}
+        <div className="flex items-center">
+          <div className="w-10 h-10 justify-center">
+            <Logo />
+          </div>
+        </div>
+
+        {/* Right side */}
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 text-sm text-gray-300">
+            <Users className="w-4 h-4" />
+            <span>0 friends online</span>
+          </div>
+
+          <Button variant="ghost" size="sm">
+            <Bell className="w-4 h-4" />
+          </Button>
+
+          <Button variant="ghost" size="sm">
+            <Volume2 className="w-4 h-4" />
+          </Button>
+
+          <div className="flex items-center gap-2">
+            <Avatar className="w-8 h-8">
+              <AvatarFallback className="bg-blue-500 text-white">
+                F
+              </AvatarFallback>
+            </Avatar>
+            <span className="text-sm font-medium">Flora</span>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

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 (
+    <div className="w-80 bg-slate-800 p-6 space-y-6">
+      {/* Players Section */}
+      <div>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold">Players</h2>
+          <ChevronDown className="w-4 h-4 text-gray-400" />
+        </div>
+
+        <div className="space-y-3">
+          {players.map((player) => (
+            <div key={player.name} className="flex items-center gap-3">
+              <Avatar className="w-10 h-10">
+                <AvatarFallback className={`${player.color} text-white font-semibold`}>
+                  {player.initials}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex-1">
+                <div className="text-sm font-medium">
+                  {player.name} {player.isMe && "(Me)"}
+                </div>
+                {player.isMe && <div className="text-xs text-gray-400">Change appearance</div>}
+              </div>
+              <div className="text-sm font-mono text-gray-300">⊕{player.money}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <Separator className="bg-slate-700" />
+
+      {/* Trade Section */}
+      <div>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold">Trade</h2>
+          <Button variant="outline" size="sm" className="text-xs">
+            <Plus className="w-3 h-3 mr-1" />
+            Create Trade
+          </Button>
+        </div>
+
+        <Card className="bg-slate-700/50 border-slate-600">
+          <CardContent className="p-4">
+            <p className="text-sm text-gray-300 mb-3">
+              Make trades with other players to exchange properties, money, and bonus cards. Use the Create Trade
+              button to create a new trade.
+            </p>
+            <Button variant="ghost" size="sm" className="w-full text-cyan-400">
+              <Check className="w-4 h-4 mr-2" />
+              Got it
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Separator className="bg-slate-700" />
+
+      {/* My Properties Section */}
+      <div>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold">My Properties</h2>
+          <Button variant="outline" size="sm" className="text-xs">
+            <FileText className="w-3 h-3 mr-1" />
+            Declare Bankruptcy
+          </Button>
+        </div>
+
+        <Card className="bg-slate-700/50 border-slate-600">
+          <CardContent className="p-4">
+            <p className="text-sm text-gray-300 mb-3">
+              You can start building houses on your properties when you have a complete set.
+            </p>
+            <p className="text-sm text-gray-300 mb-3">Click on a property to upgrade, downgrade or sell it</p>
+            <Button variant="ghost" size="sm" className="w-full text-cyan-400">
+              <Check className="w-4 h-4 mr-2" />
+              Got it
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}