-
-
-
-
-
- Profile Photo
-
-
- This image will be displayed on your profile
-
-
-
-
-
-
+
+
+
+
+
-
+
Display Name
-
+
This name will be displayed on your profile
+
setDisplayName(e.target.value)}
+ placeholder="Enter display name"
+ />
+
+
+
+
+ Profile Photo
+
+
+ This image will be displayed on your profile
+
+
+
+
+ {imageLoading && (
+
+ )}
+
+
+ {/* Add status message */}
+ {saveStatus.message && (
+
+ {saveStatus.message}
+
+ )}
+
+
+
+
+
-
setDisplayName(e.target.value)}
- placeholder="Enter display name"
- />
-
-
-
+
diff --git a/client/src/components/seed.tsx b/client/src/components/seed.tsx
index 779ff37c..6109a3d8 100644
--- a/client/src/components/seed.tsx
+++ b/client/src/components/seed.tsx
@@ -1,183 +1,53 @@
+import { useAudioControl } from "@/hooks/useAudioControl";
+import { positions } from "@/lib/constants";
import clsx from "clsx";
import { motion } from "framer-motion";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
export default function Seed({
color,
- length,
type,
- seed_id,
pit_number,
seed_number,
isNative,
}: {
color?: string;
- length?: number;
type?: "player" | "opponent";
- seed_id: number;
pit_number: number;
seed_number: number;
isNative: boolean;
}) {
-
- // Define position maps for both player and opponent
- const playerPositions = isNative
- ? {
- 1: { x: -715, y: 120 },
- 2: { x: -595, y: 120 },
- 3: { x: -475, y: 120 },
- 4: { x: -355, y: 120 },
- 5: { x: -235, y: 120 },
- 6: { x: -115, y: 120 },
- 7: { x: (length || 0) > 24 ? -30 : -1, y: 80 },
- }
- : {
- 1: { x: 90, y: 120 },
- 2: { x: 205, y: 120 },
- 3: { x: 325, y: 120 },
- 4: { x: 445, y: 120 },
- 5: { x: 565, y: 120 },
- 6: { x: 685, y: 120 },
- 7: { x: (length || 0) > 24 ? (length || 0) > 38 ? 800 : 810 : 825, y: 80 },
- };
-
- const opponentPositions = isNative
- ? {
- 1: { x: 685, y: 10 },
- 2: { x: 565, y: 10 },
- 3: { x: 445, y: 10 },
- 4: { x: 325, y: 10 },
- 5: { x: 205, y: 10 },
- 6: { x: 85, y: 10 },
- 7: { x: (length || 0) > 24 ? 10 : 15, y: 80 },
- }
- : {
- 1: { x: -110, y: 10 },
- 2: { x: -235, y: 10 },
- 3: { x: -355, y: 10 },
- 4: { x: -475, y: 10 },
- 5: { x: -595, y: 10 },
- 6: { x: -715, y: 10 },
- 7: { x: (length || 0) > 24 ? (length || 0) > 38 ? -815 : -830 : -810, y: 80 },
- };
-
- // Updated grid position calculation
- const SEED_SIZE = 15;
-
- const getGridPosition = (seedNumber: number) => {
- if (pit_number === 7) {
- const SEEDS_PER_COLUMN = 10;
- const COLUMNS = 3;
- const INTERMEDIATE_COLUMNS = 2;
- const BASE_COMPACT_GAP = 0.8;
-
- // Calculate which grid the seed belongs to (main or intermediate)
- const totalMainGridSeeds = SEEDS_PER_COLUMN * COLUMNS; // 30 seeds in main grid
- const seedsPerIntermediateColumn = SEEDS_PER_COLUMN;
-
- // Sort seeds from bottom to top by adjusting the row calculation
- const getAdjustedRow = (row: number) => SEEDS_PER_COLUMN - 1 - row;
-
- if (seedNumber <= totalMainGridSeeds) {
- // Main 3x10 grid
- const column = Math.floor((seedNumber - 1) / SEEDS_PER_COLUMN);
- const row = getAdjustedRow((seedNumber - 1) % SEEDS_PER_COLUMN);
-
- const COLUMN_SPACING = 15;
- const verticalSpacing = SEED_SIZE + BASE_COMPACT_GAP;
- const totalHeight = SEEDS_PER_COLUMN * verticalSpacing;
-
- const columnOffset = [-COLUMN_SPACING, 0, COLUMN_SPACING];
-
- return {
- gridX: columnOffset[column],
- gridY: Math.floor(row * verticalSpacing - totalHeight/2)
- };
- } else {
- // Intermediate columns
- const remainingSeeds = seedNumber - totalMainGridSeeds;
- const intermediateSection = Math.floor((remainingSeeds - 1) / seedsPerIntermediateColumn);
- const positionInSection = getAdjustedRow((remainingSeeds - 1) % seedsPerIntermediateColumn);
-
- const COLUMN_SPACING = 15;
- const verticalSpacing = SEED_SIZE + BASE_COMPACT_GAP;
- const totalHeight = SEEDS_PER_COLUMN * verticalSpacing;
-
- const baseOffset = [-COLUMN_SPACING/2, COLUMN_SPACING/2];
-
- return {
- gridX: baseOffset[intermediateSection],
- gridY: Math.floor(positionInSection * verticalSpacing - totalHeight/2) + (SEED_SIZE/2)
- };
- }
- }
-
- // New logic for pits 1-6
- const INNER_GRID_GAP = 2;
- const RING_GAP = 1;
- const BASE_OFFSET = 8;
- const X_SHIFT = 10;
- const Y_SHIFT = 10;
-
- const positionInSet = ((seedNumber - 1) % 16) + 1;
-
- // First 4 seeds in a 2x2 grid
- if (seedNumber <= 4) {
- const row = Math.floor((seedNumber - 1) / 2);
- const col = (positionInSet - 1) % 2;
- return {
- gridX: (col - 0.5) * (SEED_SIZE + INNER_GRID_GAP) + X_SHIFT,
- gridY: (row - 0.5) * (SEED_SIZE + INNER_GRID_GAP) + Y_SHIFT,
- };
- }
-
- // Ring positioning for seeds 5 and up
- const ringPosition = seedNumber - 4; // Position in the ring pattern
- let x = 0, y = 0;
-
- if (ringPosition <= 4) {
- // Left side: 4 seeds
- x = -(SEED_SIZE + BASE_OFFSET);
- y = ((ringPosition - 2.5) * (SEED_SIZE + RING_GAP));
- } else if (ringPosition <= 6) {
- // Top: 2 seeds
- x = ((ringPosition - 5.5) * (SEED_SIZE + RING_GAP));
- y = -(SEED_SIZE + BASE_OFFSET);
- } else if (ringPosition <= 10) {
- // Right side: 4 seeds
- x = (SEED_SIZE + BASE_OFFSET);
- y = ((ringPosition - 8.5) * (SEED_SIZE + RING_GAP));
- } else if (ringPosition <= 12) {
- // Bottom: 2 seeds
- x = ((ringPosition - 11.5) * (SEED_SIZE + RING_GAP));
- y = (SEED_SIZE + BASE_OFFSET);
- }
-
- return {
- gridX: x + X_SHIFT,
- gridY: y + Y_SHIFT,
- };
- };
-
- // Get base position based on type and pit number
- const basePosition =
- type === "player"
- ? playerPositions[pit_number as keyof typeof playerPositions]
- : opponentPositions[pit_number as keyof typeof opponentPositions];
-
- // Calculate final position including grid offset
- const gridOffset = getGridPosition(seed_number);
- const finalPosition = {
- x: (basePosition?.x ?? 0) + gridOffset.gridX,
- y: (basePosition?.y ?? 0) + gridOffset.gridY,
- };
-
const [animationDelay, setAnimationDelay] = useState(seed_number * 0.75);
+ const { playSeedDropSound } = useAudioControl();
+ const _positions = positions(type);
+
+ const position = useMemo(() => {
+ return isNative && type === "player"
+ ? _positions[pit_number - 1]?.player?.native[seed_number - 1]
+ : isNative && type === "opponent"
+ ? _positions[pit_number - 1]?.opponent?.native[seed_number - 1]
+ : !isNative && type === "player"
+ ? _positions[pit_number - 1]?.player?.non_native[seed_number - 1]
+ : !isNative && type === "opponent"
+ ? _positions[pit_number - 1]?.opponent?.non_native[seed_number - 1]
+ : { x: 0, y: 0 };
+ }, [isNative, type, _positions, pit_number, seed_number]);
useEffect(() => {
setAnimationDelay(seed_number * 0.75);
}, [seed_number]);
+ const play = () => {
+ const timer = setTimeout(
+ () => {
+ playSeedDropSound();
+ },
+ animationDelay * 1000 + 600,
+ );
+
+ return () => clearTimeout(timer);
+ };
+
return (
);
}
diff --git a/client/src/components/ui/dialog.tsx b/client/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..775c93a9
--- /dev/null
+++ b/client/src/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef
,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+ Dialog,
+ DialogPortal,
+ DialogOverlay,
+ DialogClose,
+ DialogTrigger,
+ DialogContent,
+ DialogHeader,
+ DialogFooter,
+ DialogTitle,
+ DialogDescription,
+};
diff --git a/client/src/components/ui/svgs/bubble.tsx b/client/src/components/ui/svgs/bubble.tsx
new file mode 100644
index 00000000..f55ad890
--- /dev/null
+++ b/client/src/components/ui/svgs/bubble.tsx
@@ -0,0 +1,16 @@
+export default function Bubble() {
+ return (
+
+ );
+}
diff --git a/client/src/components/ui/svgs/users-plus.tsx b/client/src/components/ui/svgs/users-plus.tsx
new file mode 100644
index 00000000..5be14ca9
--- /dev/null
+++ b/client/src/components/ui/svgs/users-plus.tsx
@@ -0,0 +1,19 @@
+export default function UsersPlus() {
+ return (
+
+ );
+}
diff --git a/client/src/dojo/DojoContext.tsx b/client/src/dojo/DojoContext.tsx
index b6530be4..a0c298de 100644
--- a/client/src/dojo/DojoContext.tsx
+++ b/client/src/dojo/DojoContext.tsx
@@ -24,6 +24,7 @@ export const DojoProvider = ({
config: { masterAddress, masterPrivateKey },
burnerManager,
dojoProvider,
+ client,
} = value;
const masterAccount = useMemo(
@@ -32,43 +33,17 @@ export const DojoProvider = ({
[masterAddress, masterPrivateKey, dojoProvider.provider],
);
- const {
- create,
- list,
- get,
- select,
- deselect,
- remove,
- clear,
- account,
- isDeploying,
- count,
- copyToClipboard,
- applyFromClipboard,
- checkIsDeployed,
- } = useBurnerManager({
- burnerManager,
- });
+ const burnerManagerData = useBurnerManager({ burnerManager });
return (
diff --git a/client/src/dojo/createSystemCalls.ts b/client/src/dojo/createSystemCalls.ts
index 009da1f4..9812f5b6 100644
--- a/client/src/dojo/createSystemCalls.ts
+++ b/client/src/dojo/createSystemCalls.ts
@@ -59,10 +59,9 @@ export function createSystemCalls(
retryInterval: 100,
}),
);
- const transaction: any =
- await account.getTransactionReceipt(transaction_hash);
- setGameId(transaction.events[1].data[1]);
- return transaction.events[1].data[1];
+ const transaction: any = await account.getTransactionReceipt(transaction_hash);
+ setGameId(transaction?.events[0]?.data[1]);
+ return transaction?.events[0]?.data[1];
} catch (e) {
console.log(e);
}
diff --git a/client/src/dojo/generated/generated.ts b/client/src/dojo/generated/generated.ts
index 2a409aa1..c2d83aa7 100644
--- a/client/src/dojo/generated/generated.ts
+++ b/client/src/dojo/generated/generated.ts
@@ -3,7 +3,8 @@
import { AccountInterface } from "starknet";
import { DojoProvider } from "@dojoengine/core";
-export const NAMESPACE = "mancala_dev";
+export const NAMESPACE = "mancala_alpha";
+export const contractName = "Mancala";
export type IWorld = Awaited>;
@@ -14,7 +15,7 @@ export async function setupWorld(provider: DojoProvider) {
return await provider.execute(
account,
{
- contractName: "actions",
+ contractName,
entrypoint: "create_initial_game_id",
calldata: [],
},
@@ -27,11 +28,12 @@ export async function setupWorld(provider: DojoProvider) {
};
const create_game = async (account: AccountInterface) => {
+ console.log("account: ", account);
try {
return await provider.execute(
account,
{
- contractName: "actions",
+ contractName,
entrypoint: "new_game",
calldata: [],
},
@@ -51,7 +53,7 @@ export async function setupWorld(provider: DojoProvider) {
return await provider.execute(
account,
{
- contractName: "actions",
+ contractName,
entrypoint: "create_private_game",
calldata: [player_2],
},
@@ -68,7 +70,7 @@ export async function setupWorld(provider: DojoProvider) {
return await provider.execute(
account,
{
- contractName: "actions",
+ contractName,
entrypoint: "join_game",
calldata: [game_id],
},
@@ -89,7 +91,7 @@ export async function setupWorld(provider: DojoProvider) {
return await provider.execute(
account,
{
- contractName: "actions",
+ contractName,
entrypoint: "move",
calldata: [game_id, selected_pit],
},
@@ -112,18 +114,18 @@ export async function setupWorld(provider: DojoProvider) {
approver
? [
{
- contractName: "actions",
+ contractName,
entrypoint: "request_restart_game",
calldata: [game_id],
},
{
- contractName: "actions",
+ contractName,
entrypoint: "restart_current_game",
calldata: [game_id],
},
]
: {
- contractName: "actions",
+ contractName,
entrypoint: "request_restart_game",
calldata: [game_id],
},
@@ -140,7 +142,7 @@ export async function setupWorld(provider: DojoProvider) {
return await provider.execute(
account,
{
- contractName: "actions",
+ contractName,
entrypoint: "forfeited",
calldata: [game_id],
},
@@ -161,7 +163,7 @@ export async function setupWorld(provider: DojoProvider) {
return await provider.execute(
account,
{
- contractName: "actions",
+ contractName,
entrypoint: "timeout",
calldata: [game_id, opposition_address],
},
@@ -181,7 +183,7 @@ export async function setupWorld(provider: DojoProvider) {
return await provider.execute(
account,
{
- contractName: "actions",
+ contractName: "PlayerProfile",
entrypoint: "create_player_profile",
calldata: [name],
},
@@ -202,7 +204,7 @@ export async function setupWorld(provider: DojoProvider) {
return await provider.execute(
account,
{
- contractName: "actions",
+ contractName: "PlayerProfile",
entrypoint: "update_player_profile",
calldata: [name, new_uri],
},
diff --git a/client/src/dojo/generated/setup.ts b/client/src/dojo/generated/setup.ts
index c11414a8..6d9b4452 100644
--- a/client/src/dojo/generated/setup.ts
+++ b/client/src/dojo/generated/setup.ts
@@ -6,69 +6,72 @@ import { createSystemCalls } from "../createSystemCalls";
import { defineContractComponents } from "./contractComponents";
import { world } from "./world";
import { setupWorld } from "./generated";
-import { Account, ArraySignatureType } from "starknet";
-import { BurnerManager } from "@dojoengine/create-burner";
+import { ArraySignatureType } from "starknet";
+import { setupBurnerManager } from "@dojoengine/create-burner";
export type SetupResult = Awaited>;
-export async function setup({ ...config }: DojoConfig) {
- // torii client
- const toriiClient = await torii.createClient({
- rpcUrl: config.rpcUrl,
- toriiUrl: config.toriiUrl,
- relayUrl: "",
- worldAddress: config.manifest.world.address || "",
- });
+export type SetupStatus = {
+ toriiClient: boolean;
+ contractComponents: boolean;
+ syncEntities: boolean;
+ dojoProvider: boolean;
+ worldSetup: boolean;
+ burnerManager: boolean;
+};
- // create contract components
- const contractComponents = defineContractComponents(world);
+export async function setup(
+ { ...config }: DojoConfig,
+ onStatusUpdate?: (status: Partial) => void,
+) {
+ try {
+ onStatusUpdate?.({ toriiClient: true });
+ const toriiClient = await torii.createClient({
+ rpcUrl: config.rpcUrl,
+ toriiUrl: config.toriiUrl,
+ relayUrl: "",
+ worldAddress: config.manifest.world.address || "",
+ });
+ onStatusUpdate?.({ toriiClient: false, contractComponents: true });
- // create client components
- const clientComponents = createClientComponents({ contractComponents });
+ const contractComponents = defineContractComponents(world);
+ const clientComponents = createClientComponents({ contractComponents });
+ onStatusUpdate?.({ contractComponents: false, syncEntities: true });
- // fetch all existing entities from torii
- await getSyncEntities(toriiClient, contractComponents as any, undefined, []);
+ await getSyncEntities(
+ toriiClient,
+ contractComponents as never,
+ undefined,
+ [],
+ );
- // create dojo provider
- const dojoProvider = new DojoProvider(config.manifest, config.rpcUrl);
+ onStatusUpdate?.({ syncEntities: false, dojoProvider: true });
- // setup world
- const client = await setupWorld(dojoProvider);
+ const dojoProvider = new DojoProvider(config.manifest, config.rpcUrl);
+ onStatusUpdate?.({ dojoProvider: false, worldSetup: true });
- // create burner manager
- const burnerManager = new BurnerManager({
- masterAccount: new Account(
- {
- nodeUrl: config.rpcUrl,
- },
- config.masterAddress,
- config.masterPrivateKey,
- ),
- accountClassHash: config.accountClassHash,
- rpcProvider: dojoProvider.provider,
- feeTokenAddress: config.feeTokenAddress,
- });
+ const client = await setupWorld(dojoProvider);
+ onStatusUpdate?.({ worldSetup: false, burnerManager: true });
- try {
- await burnerManager.init();
- if (burnerManager.list().length === 0) {
- await burnerManager.create();
- }
- } catch (e) {
- console.error(e);
- }
+ const burnerManager = await setupBurnerManager(config);
- return {
- client,
- clientComponents,
- contractComponents,
- systemCalls: createSystemCalls({ client }, clientComponents),
- publish: (typedData: string, signature: ArraySignatureType) => {
- toriiClient.publishMessage(typedData, signature);
- },
- config,
- dojoProvider,
- burnerManager,
- toriiClient,
- };
+ onStatusUpdate?.({ burnerManager: false });
+
+ return {
+ client,
+ clientComponents,
+ contractComponents,
+ systemCalls: createSystemCalls({ client }, clientComponents),
+ publish: (typedData: string, signature: ArraySignatureType) => {
+ toriiClient.publishMessage(typedData, signature);
+ },
+ config,
+ dojoProvider,
+ burnerManager,
+ toriiClient,
+ };
+ } catch (error) {
+ console.error("Setup failed:", error);
+ throw error;
+ }
}
diff --git a/client/src/hooks/useAudioControl.ts b/client/src/hooks/useAudioControl.ts
index 1cef9efb..0bd6d040 100644
--- a/client/src/hooks/useAudioControl.ts
+++ b/client/src/hooks/useAudioControl.ts
@@ -2,6 +2,8 @@ import { useRef, useState, useEffect } from "react";
import { useAtom } from "jotai";
import { isPlayingAtom } from "@/atom/atoms";
import audio from "@/music/audio_1.mp4";
+import emptyPitSound from "@/music/empty-pit.mp3";
+import seedDropSound from "@/music/seed-drop.mp3";
export function useAudioControl() {
const [isPlaying, setPlaying] = useAtom(isPlayingAtom);
@@ -20,6 +22,18 @@ export function useAudioControl() {
setVolumeDisplayValue(Math.round(newVolume * 100));
};
+ const playEmptyPitSound = () => {
+ const emptySound = new Audio(emptyPitSound);
+ emptySound.volume = volume * 0.6;
+ emptySound.play();
+ };
+
+ const playSeedDropSound = () => {
+ const dropSound = new Audio(seedDropSound);
+ dropSound.volume = volume * 0.4;
+ dropSound.play();
+ };
+
useEffect(() => {
const audio = audioRef.current;
@@ -35,7 +49,7 @@ export function useAudioControl() {
"Audio playback was not allowed. This may be due to autoplay restrictions.",
error,
);
- setPlaying(false); // Reset playing state
+ setPlaying(false);
} else if (error.name === "NotSupportedError") {
console.error(
"The audio format is not supported by the browser.",
@@ -74,5 +88,7 @@ export function useAudioControl() {
volumeDisplayValue,
handleVolumeChange,
audioRef,
+ playEmptyPitSound,
+ playSeedDropSound,
};
}
diff --git a/client/src/hooks/useControllerData.ts b/client/src/hooks/useControllerData.ts
deleted file mode 100644
index 13739f5d..00000000
--- a/client/src/hooks/useControllerData.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import ControllerConnector from "@cartridge/connector/controller";
-import { useAccount, useConnect } from "@starknet-react/core";
-import { useEffect, useState } from "react";
-
-export default function useControllerData() {
- const { connector } = useConnect();
- const { account } = useAccount();
- const [username, setUsername] = useState();
- const [icon, setIcon] = useState();
- const contollerConnector = connector as unknown as ControllerConnector;
-
- useEffect(() => {
- if (account && connector?.id === "controller") {
- contollerConnector.username()?.then(setUsername);
- // setIcon(contollerConnector.icon);
- } else {
- setUsername(undefined);
- setIcon(undefined);
- }
- }, [account, connector]);
-
- if (username !== undefined && icon !== undefined) {
- return { username, icon, controllerConnector: contollerConnector };
- } else if (account) {
- return {
- username: formatAddress(account.address),
- icon: undefined,
- controllerConnector: undefined,
- };
- }
-}
-
-function formatAddress(address: string) {
- return `${address.slice(0, 6)}...${address.slice(-4)}`;
-}
diff --git a/client/src/lib/config.ts b/client/src/lib/config.ts
index 198a4fca..97b2681d 100644
--- a/client/src/lib/config.ts
+++ b/client/src/lib/config.ts
@@ -1,5 +1,5 @@
const CONFIG = {
- GRAPHQL_ENDPOINT: "https://api.cartridge.gg/x/mancala-t/torii/graphql",
+ GRAPHQL_ENDPOINT: "https://api.cartridge.gg/x/mancala-e/torii/graphql",
};
export default CONFIG;
diff --git a/client/src/lib/constants.ts b/client/src/lib/constants.ts
index a106cc73..9e18b11f 100644
--- a/client/src/lib/constants.ts
+++ b/client/src/lib/constants.ts
@@ -351,6 +351,10 @@ export const duels_header = [
},
{
id: 4,
+ name: "Date",
+ },
+ {
+ id: 5,
name: "Status",
},
];
@@ -601,70 +605,61 @@ export const gameStarted = (games_data_one: any, games_data_two: any) =>
export const SLOT_RPC_URL = "https://api.cartridge.gg/x/starknet/sepolia";
-const ACTION_ADDRESS = "0x039e885bb49e7002da73d0b77efee67ac3801cada2767eb382e4dc63755def20";
+const MANCALA_ADDRESS =
+ "0x470f026bf97f0781492a95ebb9031da1c524601e8c2a285534545d33ca44797";
+
+const PROFILE_ADDRESS =
+ "0x4a992660cbd6a91cda1e1697e43c52641f3818aeabcf96658a986322603ef85";
+
+export const ELIZA_ADDRESS =
+ "0x076795eb2CDc3E799364F661A409EDBE0f204b67625B179a6880733893f7004d";
export const POLICIES = [
{
- target: ACTION_ADDRESS,
- method: "initialize_game_counter",
- },
- {
- target: ACTION_ADDRESS,
+ target: MANCALA_ADDRESS,
method: "new_game",
},
{
- target: ACTION_ADDRESS,
- method: "create_private_game",
- },
- {
- target: ACTION_ADDRESS,
+ target: MANCALA_ADDRESS,
method: "join_game",
},
{
- target: ACTION_ADDRESS,
- method: "move",
+ target: MANCALA_ADDRESS,
+ method: "timeout",
},
{
- target: ACTION_ADDRESS,
- method: "request_restart_game",
+ target: MANCALA_ADDRESS,
+ method: "create_private_game",
},
{
- target: ACTION_ADDRESS,
- method: "restart_current_game",
+ target: MANCALA_ADDRESS,
+ method: "move",
},
{
- target: ACTION_ADDRESS,
+ target: MANCALA_ADDRESS,
method: "forfeited",
},
{
- target: ACTION_ADDRESS,
- method: "timeout",
- },
- {
- target: ACTION_ADDRESS,
- method: "create_player_profile",
+ target: MANCALA_ADDRESS,
+ method: "request_restart_game",
},
{
- target: ACTION_ADDRESS,
- method: "update_player_uri",
+ target: MANCALA_ADDRESS,
+ method: "restart_current_game",
},
{
- target: ACTION_ADDRESS,
- method: "rename_player",
+ target: PROFILE_ADDRESS,
+ method: "create_player_profile",
},
{
- target: ACTION_ADDRESS,
+ target: PROFILE_ADDRESS,
method: "update_player_profile",
},
- {
- target: ACTION_ADDRESS,
- method: "new_profile",
- },
];
export const MancalaBoardModelsQuery = gql`
- query mancalaDevMancalaBoardModels {
- mancalaDevMancalaBoardModels {
+ query mancalaAlphaMancalaBoardModels {
+ mancalaAlphaMancalaBoardModels {
edges {
node {
game_id
@@ -684,8 +679,8 @@ export const MancalaBoardModelsQuery = gql`
`;
export const MancalaBoardModelQuery = gql`
- query mancalaDevMancalaBoardModel($gameId: u128) {
- mancalaDevMancalaBoardModels(
+ query mancalaAlphaMancalaBoardModel($gameId: u128) {
+ mancalaAlphaMancalaBoardModels(
where: { game_id: $gameId }
limit: 1000000000
) {
@@ -709,8 +704,8 @@ export const MancalaBoardModelQuery = gql`
`;
export const MancalaPlayQuery = gql`
- query mancalaDevPlayerModels($gameId: u128) {
- mancalaDevPlayerModels(where: { game_id: $gameId }, limit: 1000000000) {
+ query mancalaAlphaPlayerModels($gameId: u128) {
+ mancalaAlphaPlayerModels(where: { game_id: $gameId }, limit: 1000000000) {
edges {
node {
address
@@ -720,7 +715,7 @@ export const MancalaPlayQuery = gql`
}
}
}
- mancalaDevPitModels(where: { game_id: $gameId }, limit: 1000000000) {
+ mancalaAlphaPitModels(where: { game_id: $gameId }, limit: 1000000000) {
edges {
node {
game_id
@@ -734,8 +729,8 @@ export const MancalaPlayQuery = gql`
`;
export const MancalaSeedQuery = gql`
- query mancalaDevSeedModels($gameId: u128) {
- mancalaDevSeedModels(where: { game_id: $gameId }, limit: 1000000000) {
+ query mancalaAlphaSeedModels($gameId: u128) {
+ mancalaAlphaSeedModels(where: { game_id: $gameId }, limit: 1000000000) {
edges {
node {
game_id
@@ -755,7 +750,7 @@ export const MancalaSeedQuery = gql`
export const MancalaHeaderQuery = gql`
query FetchModelsForHeader {
- mancalaDevGameModels {
+ mancalaAlphaGameModels {
edges {
node {
game_id
@@ -772,8 +767,8 @@ export const MancalaHeaderQuery = gql`
`;
export const MancalaPlayerNames = gql`
- query mancalaDevPlayerNames {
- mancalaDevProfileModels {
+ query mancalaAlphaPlayerNames {
+ mancalaAlphaProfileModels {
edges {
node {
name
@@ -784,3 +779,322 @@ export const MancalaPlayerNames = gql`
}
}
`;
+
+export const MancalaCaptureQuery = gql`
+ query mancalaAlphaCaptureModels($gameId: u128) {
+ mancalaAlphaCaptureModels(where: { game_id: $gameId }, limit: 1000000000) {
+ edges {
+ node {
+ game_id
+ player
+ seed_count
+ pit_number
+ }
+ }
+ }
+ }
+`;
+
+export const MancalaExtraTurnQuery = gql`
+ query mancalaAlphaPlayerExtraTurnModels($gameId: u128) {
+ mancalaAlphaPlayerExtraTurnModels(
+ where: { game_id: $gameId }
+ limit: 1000000000
+ ) {
+ edges {
+ node {
+ player
+ }
+ }
+ }
+ }
+`;
+
+export const positions = (type: "player" | "opponent" | undefined) =>
+ Array.from({ length: 7 }, (_, playerIndex) => {
+ // Base x-offset for this player/opponent pair
+ const xOffset =
+ type === "player" ? playerIndex * 120 : 600 - playerIndex * 120;
+ const yOffset = type === "player" ? 0 : -110;
+
+ // Base coordinates from player 1
+ const baseCoords = [
+ { x: 270, y: 110 },
+ { x: 287, y: 110 },
+ { x: 270, y: 127 },
+ { x: 287, y: 127 },
+ { x: 270, y: 144 },
+ { x: 287, y: 144 },
+ { x: 270, y: 93 },
+ { x: 287, y: 93 },
+ { x: 253, y: 100 },
+ { x: 253, y: 117 },
+ { x: 253, y: 134 },
+ { x: 304, y: 100 },
+ { x: 304, y: 117 },
+ { x: 304, y: 134 },
+ { x: 260, y: 100 },
+ { x: 260, y: 117 },
+ { x: 260, y: 134 },
+ { x: 278, y: 93 },
+ { x: 278, y: 110 },
+ { x: 278, y: 127 },
+ { x: 278, y: 143 },
+ { x: 296, y: 100 },
+ { x: 296, y: 117 },
+ { x: 296, y: 134 },
+ { x: 314, y: 110 },
+ { x: 314, y: 128 },
+ { x: 247, y: 110 },
+ { x: 247, y: 127 },
+ { x: 267, y: 95 },
+ { x: 267, y: 112 },
+ { x: 267, y: 129 },
+ { x: 255, y: 135 },
+ { x: 267, y: 146 },
+ { x: 278, y: 97 },
+ { x: 278, y: 114 },
+ { x: 278, y: 131 },
+ { x: 278, y: 148 },
+ { x: 289, y: 97 },
+ { x: 289, y: 114 },
+ { x: 289, y: 131 },
+ { x: 289, y: 148 },
+ { x: 300, y: 93 },
+ { x: 300, y: 110 },
+ { x: 300, y: 127 },
+ { x: 300, y: 144 },
+ { x: 312, y: 100 },
+ { x: 312, y: 117 },
+ { x: 312, y: 134 },
+ ];
+
+ const coords = [
+ {
+ x: 185,
+ y: -10,
+ },
+ {
+ x: 185,
+ y: 7,
+ },
+ {
+ x: 185,
+ y: 22,
+ },
+ {
+ x: 185,
+ y: 37,
+ },
+ {
+ x: 185,
+ y: 52,
+ },
+ {
+ x: 185,
+ y: 67,
+ },
+ {
+ x: 185,
+ y: 82,
+ },
+ {
+ x: 185,
+ y: 97,
+ },
+ {
+ x: 185,
+ y: 112,
+ },
+ {
+ x: 185,
+ y: 127,
+ },
+ {
+ x: 185,
+ y: 142,
+ },
+ {
+ x: 168,
+ y: -10,
+ },
+ {
+ x: 168,
+ y: 7,
+ },
+ {
+ x: 168,
+ y: 22,
+ },
+ {
+ x: 168,
+ y: 37,
+ },
+ {
+ x: 168,
+ y: 52,
+ },
+ {
+ x: 168,
+ y: 67,
+ },
+ {
+ x: 168,
+ y: 82,
+ },
+ {
+ x: 168,
+ y: 97,
+ },
+ {
+ x: 168,
+ y: 112,
+ },
+ {
+ x: 168,
+ y: 127,
+ },
+ {
+ x: 168,
+ y: 142,
+ },
+ {
+ x: 157,
+ y: -5,
+ },
+ {
+ x: 151,
+ y: 7,
+ },
+ {
+ x: 151,
+ y: 22,
+ },
+ {
+ x: 151,
+ y: 37,
+ },
+ {
+ x: 151,
+ y: 52,
+ },
+ {
+ x: 151,
+ y: 67,
+ },
+ {
+ x: 151,
+ y: 82,
+ },
+ {
+ x: 151,
+ y: 97,
+ },
+ {
+ x: 151,
+ y: 112,
+ },
+ {
+ x: 151,
+ y: 127,
+ },
+ {
+ x: 158,
+ y: 139,
+ },
+ {
+ x: 160,
+ y: 129,
+ },
+ {
+ x: 160,
+ y: 112,
+ },
+ {
+ x: 160,
+ y: 95,
+ },
+ {
+ x: 160,
+ y: 78,
+ },
+ {
+ x: 160,
+ y: 61,
+ },
+ {
+ x: 160,
+ y: 44,
+ },
+ {
+ x: 160,
+ y: 27,
+ },
+ {
+ x: 160,
+ y: 10,
+ },
+ {
+ x: 160,
+ y: -5,
+ },
+ {
+ x: 170,
+ y: -15,
+ },
+ {
+ x: 170,
+ y: 1,
+ },
+ {
+ x: 170,
+ y: 17,
+ },
+ {
+ x: 170,
+ y: 33,
+ },
+ {
+ x: 170,
+ y: 49,
+ },
+ {
+ x: 170,
+ y: 65,
+ },
+ ];
+
+ const offsetCoords = baseCoords.map((coord) => ({
+ x: coord.x + xOffset,
+ y: coord.y + yOffset,
+ }));
+
+ const coordsOffest = coords.map((coord) => ({
+ x: type === "player" ? 782.5 + (185 - coord.x) + 185 : coord.x,
+ y: coord.y,
+ }));
+
+ if (playerIndex < 6) {
+ return {
+ player: {
+ native: offsetCoords,
+ non_native: offsetCoords,
+ },
+ opponent: {
+ native: offsetCoords,
+ non_native: offsetCoords,
+ },
+ };
+ } else {
+ return {
+ player: {
+ native: coordsOffest,
+ non_native: coordsOffest,
+ },
+ opponent: {
+ native: coords,
+ non_native: coords,
+ },
+ };
+ }
+ });
diff --git a/client/src/music/empty-pit.mp3 b/client/src/music/empty-pit.mp3
new file mode 100644
index 00000000..8d32e3de
Binary files /dev/null and b/client/src/music/empty-pit.mp3 differ
diff --git a/client/src/music/seed-drop.mp3 b/client/src/music/seed-drop.mp3
new file mode 100644
index 00000000..5764c4e2
Binary files /dev/null and b/client/src/music/seed-drop.mp3 differ
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index 63db2fec..09cca7a8 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -1,14 +1,28 @@
import logo from "../assets/logo.png";
import link from "../assets/link-out.png";
import { Link } from "react-router-dom";
+import Bubble from "@/components/ui/svgs/bubble";
+import { useConnect } from "@starknet-react/core";
+import { useEffect } from "react";
+import { useAccount } from "@starknet-react/core";
+import small_logo from "@/assets/small-logo.png";
+
export default function Home() {
+ const { connect, connectors } = useConnect();
+ const { account } = useAccount();
+ useEffect(() => {
+ if (!account?.address) {
+ connect({ connector: connectors[0] });
+ }
+ }, [account, connect, connectors]);
return (
-
+
-
-
by Realm of Ra Studios
+
);
}
diff --git a/client/src/pages/Leaderboard.tsx b/client/src/pages/Leaderboard.tsx
deleted file mode 100644
index 5e307075..00000000
--- a/client/src/pages/Leaderboard.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import { Button } from "@material-tailwind/react";
-import { Card, Typography } from "@material-tailwind/react";
-import clsx from "clsx";
-import { MancalaBoardModelsQuery, table_head } from "@/lib/constants";
-import Header from "@/components/header";
-import { useProvider } from "@starknet-react/core";
-import { StarknetIdNavigator } from "starknetid.js";
-import { constants, StarkProfile } from "starknet";
-import { getPlayers, truncateString } from "@/lib/utils";
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { UserIcon } from "@heroicons/react/24/solid";
-import { useQuery } from "@apollo/client";
-
-export default function Leaderboard() {
- const { provider } = useProvider();
- const navigate = useNavigate();
-
- const starknetIdNavigator = new StarknetIdNavigator(
- provider,
- constants.StarknetChainId.SN_SEPOLIA,
- );
-
- const { loading, error, data, startPolling } = useQuery(
- MancalaBoardModelsQuery,
- );
-
- startPolling(1000);
-
- // Extracting player_one and player_two from the data object and get the the top 8 highest winners
- // TODO: instead of type coercion, we can use this to aid loading state
- const players = getPlayers(data?.mancalaMancalaBoardModels?.edges)
- ?.sort((a: any, b: any) => b?.wins - a?.wins)
- ?.slice(0, 8);
-
- const addresses = players?.map((player: any) => player.address);
-
- const [profiles, setProfiles] = useState
([]);
-
- useEffect(() => {
- if (!starknetIdNavigator || !addresses) return;
- (async () => {
- const data = await starknetIdNavigator?.getStarkProfiles(addresses);
- if (!data) return;
- setProfiles(data);
- })();
- }, [addresses]);
-
- return (
-
- {/* Start of header */}
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Second position */}
-
-
- {/*
*/}
-
-
-
-
-
- {profiles[1]?.name
- ? profiles[1].name
- : addresses && truncateString(addresses[1])}
-
-
-
-
- {(players && players[1]?.wins !== undefined
- ? players[1].wins
- : 0) * 50}{" "}
- points
-
-
-
-
-
- {/* First position */}
-
-
-
-
- {/*
*/}
-
-
-
-
-
- {profiles[0]?.name
- ? profiles[2].name
- : addresses && truncateString(addresses[0])}
-
-
-
-
- {(players && players[0]?.wins !== undefined
- ? players[0].wins
- : 0) * 50}{" "}
- points
-
-
-
-
-
- {/* Third position */}
-
-
- {/*
*/}
-
-
-
-
-
- {profiles[2]?.name
- ? profiles[2].name
- : addresses && truncateString(addresses[2])}
-
-
-
-
- {(players && players[2]?.wins !== undefined
- ? players[2].wins
- : 0) * 50}{" "}
- points
-
-
-
-
-
-
-
-
-
-
-
-
- {table_head.map((head) => (
- |
-
- {head}
-
- |
- ))}
-
-
-
- {players
- ?.slice(3, 8)
- .map(({ wins }: { wins: number }, index: number) => {
- const isLast = index === players.slice(3).length - 1;
-
- return (
-
- |
- {index + 4}
-
- {/*
-
- */}
-
-
- {profiles[index + 3]?.name
- ? profiles[index + 3].name
- : addresses &&
- truncateString(addresses[index + 3])}
-
- |
-
-
- Level {wins < 4 ? 1 : Math.floor(wins / 4) + 1}
-
- |
-
-
- {wins * 50} points
-
- |
-
- );
- })}
-
-
-
-
-
+
-
-
-
-
+
+
+
+
+ Duels
+
@@ -239,19 +232,9 @@ export default function Lobby() {
Live Duels
-
- Duels
-
@@ -260,14 +243,14 @@ export default function Lobby() {
- {/*
*/}
- {/* {isDropdownOpen &&
} */}
+
+ {isDropdownOpen &&
}
+ : account?.address &&
+ }
+
- )}
-
- {isDropdownOpen && (
- 
- 
-
-
- 
-
-