🚀 Kick start the arcade client

.gitignore

@@ -1 +1,2 @@
-target/
+target/
+.env*

clients/arcade/package.json

@@ -21,6 +21,10 @@
         "@dojoengine/state": "1.0.1",
         "@dojoengine/torii-client": "1.0.1",
         "@dojoengine/utils": "1.0.1",
+        "@fortawesome/fontawesome-svg-core": "^6.7.1",
+        "@fortawesome/free-brands-svg-icons": "^6.7.1",
+        "@fortawesome/free-solid-svg-icons": "^6.7.1",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "@radix-ui/react-scroll-area": "^1.2.1",
         "@radix-ui/react-slider": "^1.2.0",
         "@radix-ui/react-slot": "^1.1.0",

clients/arcade/src/App.tsx

@@ -1,11 +1,14 @@
+import { ThemeProvider } from "@/contexts/theme-provider"
 import { Landing as LandingPage } from "./components/pages/landing";
 
 function App() {
-    return (
-        <>
-            <LandingPage />
-        </>
-    );
+  return (
+    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <div>
+        <LandingPage />
+      </div>
+    </ThemeProvider>
+  );
 }
 
 export default App;

clients/arcade/src/components/containers/Header.tsx

@@ -0,0 +1,31 @@
+import logo from "/assets/logo.png";
+import { useNavigate } from "react-router-dom";
+import { useCallback } from "react";
+import { Connection } from "../elements/Connection";
+
+export const Header = () => {
+  const navigate = useNavigate();
+
+  const setGameQueryParam = useCallback(
+    () => navigate("", { replace: true }),
+    [navigate],
+  );
+
+  return (
+    <div className="w-full flex justify-between items-center px-8 py-2">
+      <div className="flex gap-4 items-center">
+        <div
+          className="flex gap-4 items-center cursor-pointer"
+          onClick={setGameQueryParam}
+        >
+          <img src={logo} alt="Conquest" className="h-12" />
+          <p className="text-4xl font-bold">Conquest</p>
+        </div>
+      </div>
+      <div className="flex gap-4 items-center">
+        <p className="text-2xl font-bold">{""}</p>
+        <Connection />
+      </div>
+    </div>
+  );
+};

clients/arcade/src/components/elements/Connection.tsx

@@ -0,0 +1,26 @@
+import { useDojo } from "@/dojo/useDojo";
+import { Button } from "@/components/ui/button";
+import { useAccount, useConnect } from "@starknet-react/core";
+
+export function Connection() {
+  const {
+    account: { account },
+  } = useDojo();
+  const { connect, connectors } = useConnect();
+  const { isConnected } = useAccount();
+  const connectWallet = async () => {
+    connect({ connector: connectors[0] });
+  };
+
+  if (isConnected || !!account) return null;
+
+  return (
+    <Button
+      className="px-4 text-xl"
+      variant="outline"
+      onClick={connectWallet}
+    >
+      Log in
+    </Button>
+  );
+}

clients/arcade/src/components/pages/landing.tsx

@@ -0,0 +1,104 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSpaceAwesome } from "@fortawesome/free-brands-svg-icons";
+import { faGamepad, faStar } from "@fortawesome/free-solid-svg-icons";
+
+export const Header = () => {
+  return (
+    <div className="flex gap-x-px">
+      <div className="bg-background h-14 w-14 flex items-center justify-center">
+        <img className="h-6 w-6" src="/assets/logo.svg" alt="Logo" />
+      </div>
+      <div className="bg-background flex justify-end items-center grow px-3 py-2">
+        <div className="bg-primary flex items-center px-2 py-1.5 rounded-sm">
+          <div className="h-7 w-7 flex items-center justify-center">
+            <FontAwesomeIcon className="h-4 w-4" icon={faSpaceAwesome} />
+          </div>
+          <p className="text-sm font-semibold px-1">bal7hazar</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Player = () => {
+  return (
+    <div className="flex justify-center items-center gap-4">
+      <div className="bg-primary h-16 w-16 flex items-center justify-center rounded-sm">
+        <FontAwesomeIcon className="h-8 w-8" icon={faSpaceAwesome} />
+      </div>
+      <div className="flex flex-col">
+        <p className="text-2xl font-semibold">bal7hazar</p>
+        <p className="text-xs text-muted-foreground">0x0123...4567</p>
+      </div>
+    </div>
+  );
+};
+
+export const Navigation = () => {
+  return (
+    <div className="flex gap-x-4">
+      <div className="border py-3 px-4 rounded-sm">
+        <p>Assets</p>
+      </div>
+      <div className="border py-3 px-4 rounded-sm">
+        <p>Achievements</p>
+      </div>
+      <div className="border py-3 px-4 rounded-sm">
+        <p>Activity</p>
+      </div>
+    </div>
+  );
+};
+
+export const Games = () => {
+  return (
+    <div className="flex flex-col gap-y-px w-[324px] rounded-lg overflow-hidden">
+      <Game />
+      <Game />
+      <Game />
+      <Game />
+      <Game />
+      <Game />
+    </div>
+  );
+};
+
+export const Game = () => {
+  return (
+    <div className="flex justify-between items-center bg-primary p-2">
+      <div className="flex items-center gap-x-2">
+        <div className="h-7 w-7 flex items-center justify-center">
+          <FontAwesomeIcon className="h-4 w-4" icon={faGamepad} />
+        </div>
+        <p className="text-sm">Games</p>
+      </div>
+      <div className="flex items-center gap-x-2">
+        <FontAwesomeIcon className="h-4 w-4" icon={faStar} />
+        <p className="text-sm">400</p>
+      </div>
+    </div>
+  )
+};
+
+export const Container = () => {
+  return <div className="">Container</div>;
+};
+
+export const Landing = () => {
+  return (
+    <div className="bg-spacer flex flex-col gap-y-px">
+      <Header />
+
+      <div className="bg-background w-full flex flex-col py-8 gap-y-8">
+        <div className="flex justify-between items-center w-3/4 m-auto">
+          <Player />
+          <Navigation />
+        </div>
+        <div className="flex justify-between items-center w-3/4 m-auto">
+          <Games />
+          <Container />
+        </div>
+      </div>
+    </div>
+  );
+};

clients/arcade/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/libs/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    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<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }