setIsOpen(true)}
- >
- setIsOpen((prev) => !prev)}
- />
-
- );
-};
diff --git a/client/src/components/ConnectButton.tsx b/client/src/components/ConnectButton.tsx
deleted file mode 100644
index d864878..0000000
--- a/client/src/components/ConnectButton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { type Connector, useConnect } from "@starknet-react/core";
-import { useCallback } from "react";
-import { toast } from "sonner";
-import { Button } from "@/components/ui/Button";
-
-export const ConnectButton = () => {
- const { connectAsync, connectors } = useConnect();
-
- const handleConnect = useCallback(
- async (connector: Connector) => {
- try {
- await connectAsync({ connector });
- toast.success("Successfully logged in");
- } catch (error) {
- console.error(error);
- toast.error("Wallet is not installed");
- }
- },
- [connectAsync],
- );
-
- return ;
-};
diff --git a/client/src/components/CoordinateFinder.tsx b/client/src/components/CoordinateFinder.tsx
deleted file mode 100644
index 13af67e..0000000
--- a/client/src/components/CoordinateFinder.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useState, useEffect } from "react";
-import { useDebouncedCallback } from "use-debounce";
-
-const CoordinateFinder = ({
- currentMousePos,
- animateJumpToCell,
-}: {
- currentMousePos: { x: number; y: number };
- animateJumpToCell: (x: number, y: number) => void;
-}) => {
- const [localPos, setLocalPos] = useState(currentMousePos);
-
- useEffect(() => {
- setLocalPos(currentMousePos);
- }, [currentMousePos]);
-
- const debouncedAnimateJumpToCell = useDebouncedCallback((x: number, y: number) => {
- animateJumpToCell(x, y);
- }, 180);
-
- const handleInputChange = (axis: "x" | "y", value: number) => {
- setLocalPos((prev) => ({ ...prev, [axis]: value }));
- debouncedAnimateJumpToCell(axis === "x" ? value : localPos.x, axis === "y" ? value : localPos.y);
- };
-
- return (
-
-
-
- {[...paletteColors].map((color, index) => (
-
-
-
- );
-};
-
-export { CoordinateFinder };
diff --git a/client/src/components/CreateProposalButton.tsx b/client/src/components/CreateProposalButton.tsx
deleted file mode 100644
index 2b20b71..0000000
--- a/client/src/components/CreateProposalButton.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { useCallback, useMemo, useState } from "react";
-import {
- Dialog,
- DialogTrigger,
- DialogContent,
- DialogTitle,
- DialogClose,
- DialogDescription,
-} from "@/components/ui/Dialog";
-import { Input } from "@/components/ui/Input";
-import { Button } from "@/components/ui/Button";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/Select";
-import { ProposalType } from "@/libs/dojo/typescript/models.gen";
-import { useDojo } from "@/hooks/useDojo";
-import { DEFAULT_GAME_ID } from "@/constants";
-import { usePaletteColors } from "@/hooks/usePalleteColors";
-import { cn, formatColorToRGB, hexRGBtoNumber, rgbaToHex } from "@/utils";
-
-export const CreateProposalButton = ({ className }: { className?: string }) => {
- const [open, setOpen] = useState(false);
- const [proposalType, setProposalType] = useState
-
-
-
-
+ {children}
+
+ );
+};
+
+export default CustomButton;
diff --git a/client/src/components/FilterMenu.tsx b/client/src/components/FilterMenu.tsx
deleted file mode 100644
index c2299e1..0000000
--- a/client/src/components/FilterMenu.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from "react";
-
-interface FilterMenuProps {
- statusFilter: "All" | "Active" | "Closed";
- setStatusFilter: (status: "All" | "Active" | "Closed") => void;
-}
-
-export const FilterMenu: React.FC
-
- );
-};
diff --git a/client/src/components/GamePage/App/App.module.css b/client/src/components/GamePage/App/App.module.css
new file mode 100644
index 0000000..48ae1ea
--- /dev/null
+++ b/client/src/components/GamePage/App/App.module.css
@@ -0,0 +1,3 @@
+.inner {
+ @apply text-black;
+}
diff --git a/client/src/components/GamePage/App/App.tsx b/client/src/components/GamePage/App/App.tsx
new file mode 100644
index 0000000..98c8177
--- /dev/null
+++ b/client/src/components/GamePage/App/App.tsx
@@ -0,0 +1,20 @@
+import type React from "react";
+
+import styles from "./App.module.css";
+
+interface AppProps {
+ icon: string; // Unicode string for the emoji
+ name: string;
+}
+
+const App: React.FCStatus Filter
-
-
-
-
-
-
+
+ );
+};
+
+export default App;
diff --git a/client/src/components/GamePage/AppPicker/AppPicker.module.css b/client/src/components/GamePage/AppPicker/AppPicker.module.css
new file mode 100644
index 0000000..e9fe1d3
--- /dev/null
+++ b/client/src/components/GamePage/AppPicker/AppPicker.module.css
@@ -0,0 +1,15 @@
+.inner {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: white;
+ border: 1px solid #ccc;
+ padding: 20px;
+ z-index: 1000;
+ width: 100vw; /* Full viewport width */
+ box-sizing: border-box; /* Include padding and border in element's total width and height */
+}
+.selected {
+ background-color: lightblue;
+}
diff --git a/client/src/components/GamePage/AppPicker/AppPicker.tsx b/client/src/components/GamePage/AppPicker/AppPicker.tsx
new file mode 100644
index 0000000..425cdcd
--- /dev/null
+++ b/client/src/components/GamePage/AppPicker/AppPicker.tsx
@@ -0,0 +1,44 @@
+import App from "@/components/GamePage/App/App.tsx";
+import { usePixelawProvider } from "@pixelaw/react";
+import styles from "./AppPicker.module.css";
+
+export interface AppPickerProps {
+ setSelectedApp: (appName: string) => void;
+ selectedApp: string;
+ onClose: () => void;
+}
+
+const AppPicker: React.FC+ {icon} {name} +
+
+ {allApps
+ .filter((app) => app.name !== "player" && app.name !== "paint")
+ .map((app) => (
+ // biome-ignore lint/a11y/useKeyWithClickEvents: TODO keyboard support later
+
+ );
+};
+
+export default AppPicker;
diff --git a/client/src/components/GamePage/AppPicker/AppPickerButton.module.css b/client/src/components/GamePage/AppPicker/AppPickerButton.module.css
new file mode 100644
index 0000000..df9ed1f
--- /dev/null
+++ b/client/src/components/GamePage/AppPicker/AppPickerButton.module.css
@@ -0,0 +1,29 @@
+.inner {
+ position: relative;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 2.25rem;
+ touch-action: none;
+ user-select: none;
+}
+
+.inner span {
+ position: absolute;
+ inset: 0; /* stretch to cover button */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ touch-action: none;
+ user-select: none;
+}
+
+.inner button {
+ all: unset; /* Remove all default styles */
+ display: inline-flex; /* Adjust size to fit content */
+ justify-content: center;
+ align-items: center;
+ cursor: pointer; /* Ensure it's still clickable */
+ height: auto; /* Let the height be determined by content */
+ width: auto; /* Let the width be determined by content */
+}
diff --git a/client/src/components/GamePage/AppPicker/AppPickerButton.tsx b/client/src/components/GamePage/AppPicker/AppPickerButton.tsx
new file mode 100644
index 0000000..9dff5bd
--- /dev/null
+++ b/client/src/components/GamePage/AppPicker/AppPickerButton.tsx
@@ -0,0 +1,47 @@
+import CustomButton from "@/components/CustomButton/CustomButton.tsx";
+import type React from "react";
+
+export interface AppPickerButtonProps {
+ onClick: () => void;
+ onSecondary: () => void;
+ appEmoji: string;
+ selected: boolean;
+}
+
+const AppPickerButton: React.FC {
+ setSelectedApp(app.name);
+ onClose();
+ }}
+ className={app.name === selectedApp ? styles.selected : ""}
+ >
+
+ ))}
+
+ {
+ onColorSelect(hexRGBtoNumber(color.hex));
+ setHex(color.hex);
+ }}
+ />
+
+ );
+};
+
+export default ColorPicker;
diff --git a/client/src/components/GamePage/ColorPicker/ColorPickerButton.tsx b/client/src/components/GamePage/ColorPicker/ColorPickerButton.tsx
new file mode 100644
index 0000000..08d5535
--- /dev/null
+++ b/client/src/components/GamePage/ColorPicker/ColorPickerButton.tsx
@@ -0,0 +1,39 @@
+import CustomButton from "@/components/CustomButton/CustomButton.tsx";
+import { numberToHexRGB } from "@/utils.ts";
+import type React from "react";
+
+export interface ColorPickerButtonProps {
+ onClick: () => void;
+ onSecondary: () => void;
+ color: number;
+ selected: boolean;
+}
+
+const ColorPickerButton: React.FC
+ {colors.map((color) => (
+
+ );
+};
+
+export default SimpleColorPicker;
diff --git a/client/src/components/GamePage/WalletPicker/WalletPicker.module.css b/client/src/components/GamePage/WalletPicker/WalletPicker.module.css
new file mode 100644
index 0000000..20424c9
--- /dev/null
+++ b/client/src/components/GamePage/WalletPicker/WalletPicker.module.css
@@ -0,0 +1,54 @@
+.inner {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: white;
+ border: 1px solid #ccc;
+ padding: 20px;
+ z-index: 1000;
+ width: 100vw; /* Full viewport width */
+ box-sizing: border-box; /* Include padding and border in element's total width and height */
+}
+
+.list {
+ list-style-type: none;
+ padding: 0;
+}
+
+.listItem {
+ padding: 10px;
+ cursor: pointer;
+ border: 1px solid #ccc;
+ margin-bottom: 5px;
+ border-radius: 4px;
+ transition: background-color 0.3s;
+}
+
+.listItem:hover {
+ background-color: #f0f0f0;
+}
+
+.selected {
+ background-color: #d0eaff;
+ border-color: #a0cfff;
+}
+
+.menuButton {
+ width: 100%;
+ padding: 10px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 16px;
+}
+
+.selectedButton {
+ background-color: #007bff;
+ color: white;
+}
+
+.unselectedButton {
+ background-color: #6c757d;
+ color: white;
+}
diff --git a/client/src/components/GamePage/WalletPicker/WalletPicker.tsx b/client/src/components/GamePage/WalletPicker/WalletPicker.tsx
new file mode 100644
index 0000000..f29ccfd
--- /dev/null
+++ b/client/src/components/GamePage/WalletPicker/WalletPicker.tsx
@@ -0,0 +1,23 @@
+import { usePixelawProvider } from "@pixelaw/react";
+import { StarknetWalletSelectorPage } from "@pixelaw/react-dojo";
+
+export interface WalletPickerProps {
+ onClose: () => void;
+}
+
+export const WalletPicker: React.FC
+
+ );
+ }
+ return (
+
+
+ );
+};
diff --git a/client/src/components/GamePage/WalletPicker/WalletPickerButton.tsx b/client/src/components/GamePage/WalletPicker/WalletPickerButton.tsx
new file mode 100644
index 0000000..72bac9d
--- /dev/null
+++ b/client/src/components/GamePage/WalletPicker/WalletPickerButton.tsx
@@ -0,0 +1,45 @@
+import CustomButton from "@/components/CustomButton/CustomButton.tsx";
+import type React from "react";
+
+export interface WalletPickerButtonProps {
+ onClick: () => void;
+ onSecondary: () => void;
+ playerEmoji: string;
+ selected: boolean;
+}
+
+const WalletPickerButton: React.FCnot implemented
+
-
- );
-};
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
deleted file mode 100644
index ebcf6cd..0000000
--- a/client/src/components/Header.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import Avatar from "./Avatar";
-import { cn, truncateAddress } from "@/utils";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/DropDownMenu";
-import { useDojo } from "@/hooks/useDojo";
-import { toast } from "sonner";
-import { ConnectButton } from "./ConnectButton";
-import { useControllerUsername } from "@/hooks/useControllerUserName";
-import { useDisconnect } from "@starknet-react/core";
-import { Button } from "./ui/Button";
-import { useMemo } from "react";
-import { GameTimeCounter } from "./GameTimeCounter";
-import { useGame } from "@/hooks/useGame";
-import { HEADER_HEIGHT } from "@/constants";
-
-export const Header = () => {
- const {
- account: { account },
- connectedAccount,
- } = useDojo();
-
- const onCopy = (e: React.MouseEvent{timeLeft}
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
- onCopy(e, activeAccount.address)}>
- {username ? username : truncateAddress(activeAccount.address)}
-
-
- {connectedAccount ? :
-
-
-
- onCopy(e, activeAccount.address)}
- >
- {username ? username : truncateAddress(activeAccount.address)}
-
-
+
+
+);
+
+export default Loading;
diff --git a/client/src/components/MenuBar/MenuBar.module.css b/client/src/components/MenuBar/MenuBar.module.css
new file mode 100644
index 0000000..c1fdf9a
--- /dev/null
+++ b/client/src/components/MenuBar/MenuBar.module.css
@@ -0,0 +1,85 @@
+.inner {
+ @apply w-full h-12 bg-header-primary flex items-center px-4;
+ position: relative;
+}
+
+.logoContainer {
+ @apply w-[139px] h-[46px] cursor-pointer;
+}
+
+.menuButton {
+ /* Add this class */
+ @apply text-white bg-blue-500 hover:bg-blue-700 font-bold py-2 px-4 rounded;
+}
+
+.rightSection {
+ @apply flex items-center gap-4;
+ position: absolute;
+ right: 2%;
+ /* transform: translateX(-50%); */
+}
+
+.addressContainer {
+ @apply flex items-center gap-2;
+}
+
+.addressContainer {
+ background-color: rgba(255, 255, 255, 0.1);
+ border-radius: 12px;
+ padding: 8px 16px;
+ /* margin-right: 20px; */
+ font-family: "Roboto Mono", monospace;
+ font-size: 14px;
+ color: #fff;
+ letter-spacing: 0.5px;
+ border: 1px solid #ffd700;
+ box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+}
+
+.countdownContainer {
+ font-family: "Roboto Mono", monospace;
+ font-size: 24px;
+ font-weight: bold;
+ color: #ffd700;
+ text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.pxChange {
+ position: absolute;
+ top: 20px;
+ left: 70%;
+ transform: translateX(-10%);
+ background-color: rgba(0, 0, 0, 0.8);
+ color: #fff;
+ padding: 4px 8px;
+ border-radius: 4px;
+ animation: fadeInOut 1s ease-in-out;
+ font-family: "Roboto Mono", monospace;
+ font-size: 14px;
+ font-weight: bold;
+}
+
+@keyframes fadeInOut {
+ 0% {
+ opacity: 0;
+ transform: translate(-50%, -10px);
+ }
+ 50% {
+ opacity: 1;
+ transform: translate(-50%, 0);
+ }
+ 100% {
+ opacity: 0;
+ transform: translate(-50%, -10px);
+ }
+}
+
+.zeroPx {
+ background-color: rgba(255, 0, 0, 0.1);
+ color: #ff0000;
+ border: 1px solid #ff0000;
+ box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
+}
diff --git a/client/src/components/MenuBar/MenuBar.tsx b/client/src/components/MenuBar/MenuBar.tsx
new file mode 100644
index 0000000..7bd6f74
--- /dev/null
+++ b/client/src/components/MenuBar/MenuBar.tsx
@@ -0,0 +1,84 @@
+import { usePixelawProvider } from "@pixelaw/react";
+import type React from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import styles from "./MenuBar.module.css";
+
+import { DojoEngine } from "@pixelaw/core-dojo";
+
+const MenuBar: React.FC = () => {
+ const navigate = useNavigate();
+ const location = useLocation();
+ const {
+ pixelawCore: { engine },
+ wallet,
+ world,
+ } = usePixelawProvider();
+ // const { address } = useAccount()
+ // const { connectAsync, connectors } = useConnect()
+ const currentWallet = wallet?.id;
+
+ if (!(engine instanceof DojoEngine)) return null;
+
+ if (!engine.dojoSetup) return;
+
+ // Determine if the settings page is shown based on the current path
+ const showSettings = location.pathname === "/settings";
+ const showWorldSelector = location.pathname === "/world";
+ const showWalletSelector = location.pathname === "/wallet";
+
+ const toggleSettings = () => {
+ if (showSettings) {
+ navigate("/");
+ } else {
+ navigate("/settings"); // Navigate to settings if not currently showing
+ }
+ };
+
+ const toggleWalletSelector = () => {
+ if (showWalletSelector) {
+ navigate("/pwar");
+ } else {
+ navigate("/wallet");
+ }
+ };
+
+ const toggleWorldSelector = () => {
+ if (showWorldSelector) {
+ navigate("/");
+ } else {
+ navigate("/world"); // Navigate to settings if not currently showing
+ }
+ };
+ return (
+ Loading...
+
+
+
+
+
+ );
+};
+
+export default MenuBar;
diff --git a/client/src/components/PixelViewer.tsx b/client/src/components/PixelViewer.tsx
deleted file mode 100644
index ddc9353..0000000
--- a/client/src/components/PixelViewer.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import { startTransition, useCallback, useMemo, useRef, useState, useOptimistic } from "react";
-import { BASE_CELL_SIZE } from "@/constants/webgl";
-import { Pixel, type Color } from "@/types";
-import { useDojo } from "@/hooks/useDojo";
-import { rgbaToUint32, uint32ToRgba } from "@/utils";
-import { useSound } from "use-sound";
-import { DEFAULT_BOARD_SIZE, sounds } from "@/constants";
-import { useGridState } from "@/hooks/useGridState";
-import { useWebGL } from "@/hooks/useWebGL";
-import { CoordinateFinder } from "@/components/CoordinateFinder";
-import { ColorPalette } from "@/components/ColorPallette";
-import { CanvasGrid } from "@/components/CanvasGrid";
-import { usePaletteColors } from "@/hooks/usePalleteColors";
-import { useEntityQuery } from "@dojoengine/react";
-import { getComponentValue, Has } from "@dojoengine/recs";
-import { detectMobile } from "@/utils/devices";
-import { useHaptic } from "use-haptic";
-
-export const PixelViewer: React.FC = () => {
- // Refs
- const canvasRef = useRef
+ 
+
+
+
+
+
+
+
+
- setIsOpen((prev) => !prev)}
- className={cn(isOpen ? "hidden" : "flex size-full")}
- />
-
-
-
-
- {/* Button */}
-
- setIsOpen((prev) => !prev)} className="cursor-pointer" />
-
-
- {/* Scrollable Proposal List */}
-
-
-
-
-
-
-
-
- Proposal List
-
- {filteredProposals.map((proposal) => (
-
-
-
- );
-};
-
-interface ProposalItemProps {
- proposal: Proposal;
-}
-
-export const ProposalItem: React.FC
-
-
-
-
-
- For {yes_voting_power}
-Against {no_voting_power}
-
-
- );
-};
-
-const getStatusColor = (status: string) => {
- if (status.startsWith("ends in")) {
- return "bg-green-500";
- } else if (status === "closed") {
- return "bg-purple-500";
- } else {
- return "bg-gray-500";
- }
-};
-
-// doesn't work correctly...
-const getTextColor = (proposalStatus: string, proposal: Proposal) => {
- if (proposalStatus === "closed" && proposal.yes_voting_power > proposal.no_voting_power) {
- return "text-green-300";
- } else if (proposalStatus === "closed" && proposal.yes_voting_power <= proposal.no_voting_power) {
- return "text-red-300";
- } else {
- return "text-white";
- }
-};
diff --git a/client/src/components/Pwar/GameControls/GameControls.module.css b/client/src/components/Pwar/GameControls/GameControls.module.css
new file mode 100644
index 0000000..aa28f24
--- /dev/null
+++ b/client/src/components/Pwar/GameControls/GameControls.module.css
@@ -0,0 +1,63 @@
+.gameControls {
+ background-color: #2a2a2a;
+ border-radius: 8px;
+ padding: 16px;
+ margin-bottom: 16px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.gameControls h3 {
+ margin-top: 0;
+ color: #eaeaea;
+ border-bottom: 1px solid #444;
+ padding-bottom: 8px;
+ margin-bottom: 16px;
+}
+
+.startGameButton {
+ width: 100%;
+ padding: 12px;
+ background-color: #43b581;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-size: 16px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+.startGameButton:hover {
+ background-color: #3ca374;
+}
+
+.gameActions {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.actionButton {
+ padding: 10px 16px;
+ background-color: #7289da;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: background-color 0.2s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.actionButton:hover {
+ background-color: #5a6ebd;
+}
+
+.actionButton:disabled {
+ background-color: #4d5673;
+ cursor: not-allowed;
+ opacity: 0.7;
+}
diff --git a/client/src/components/Pwar/GameControls/GameControls.tsx b/client/src/components/Pwar/GameControls/GameControls.tsx
new file mode 100644
index 0000000..8f77843
--- /dev/null
+++ b/client/src/components/Pwar/GameControls/GameControls.tsx
@@ -0,0 +1,32 @@
+import type { FC } from "react";
+import styles from "./GameControls.module.css";
+
+interface GameControlsProps {
+ onStartGame: () => void;
+ onPayFee: () => void;
+ gameStarted: boolean;
+}
+
+export const GameControls: FC
-
-
- {title}
- {hexColor && }
-
-
- {proposalStatus}
-
-
- proposed by {formatWalletAddressWithEmoji("0x" + proposal.author.toString(16))}
-
-
-
+
+ );
+};
diff --git a/client/src/components/Pwar/GameStatus/GameStatusBar.module.css b/client/src/components/Pwar/GameStatus/GameStatusBar.module.css
new file mode 100644
index 0000000..534e872
--- /dev/null
+++ b/client/src/components/Pwar/GameStatus/GameStatusBar.module.css
@@ -0,0 +1,47 @@
+.statusBar {
+ background-color: #202225;
+ color: #eaeaea;
+ padding: 12px 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ height: 60px;
+}
+
+.statusMessage {
+ font-size: 16px;
+ font-weight: 500;
+ color: #dcddde;
+}
+
+.gameInfo {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+}
+
+.gameIdLabel {
+ font-weight: 600;
+ font-size: 18px;
+ color: #00aff4;
+ background-color: rgba(0, 175, 244, 0.1);
+ padding: 4px 10px;
+ border-radius: 4px;
+}
+
+.timeRemaining {
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ background-color: rgba(237, 66, 69, 0.1);
+ padding: 4px 10px;
+ border-radius: 4px;
+ color: #ed4245;
+ font-weight: 600;
+}
+
+.timeRemaining::before {
+ content: "⏱️";
+ margin-right: 6px;
+}
diff --git a/client/src/components/Pwar/GameStatus/GameStatusBar.tsx b/client/src/components/Pwar/GameStatus/GameStatusBar.tsx
new file mode 100644
index 0000000..305d2c8
--- /dev/null
+++ b/client/src/components/Pwar/GameStatus/GameStatusBar.tsx
@@ -0,0 +1,94 @@
+import { type FC, useEffect, useState } from "react";
+import styles from "./GameStatusBar.module.css";
+import { usePwarProvider } from "@/provider/PwarContext";
+import WalletPickerButton from "@/components/GamePage/WalletPicker/WalletPickerButton.tsx";
+import { WalletPicker } from "@/components/GamePage/WalletPicker/WalletPicker";
+import { usePixelawProvider } from "@pixelaw/react";
+
+interface GameStatusBarProps {
+ gameStarted: boolean;
+ gameId: number | null;
+}
+
+export const GameStatusBar: FCGame Controls
+ + {!gameStarted ? ( + + ) : ( +
+
+
+ )}
+
+ {!gameStarted ? (
+ setActiveChooser(null)} />
+ )}
+
+ );
+};
diff --git a/client/src/components/Pwar/Guild/GuildPanel.module.css b/client/src/components/Pwar/Guild/GuildPanel.module.css
new file mode 100644
index 0000000..5644967
--- /dev/null
+++ b/client/src/components/Pwar/Guild/GuildPanel.module.css
@@ -0,0 +1,107 @@
+.guildPanel {
+ background-color: #2a2a2a;
+ border-radius: 8px;
+ padding: 16px;
+ margin-bottom: 16px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.guildPanel h3 {
+ margin-top: 0;
+ color: #eaeaea;
+ border-bottom: 1px solid #444;
+ padding-bottom: 8px;
+ margin-bottom: 16px;
+}
+
+.guildPanel h4 {
+ color: #d0d0d0;
+ margin-top: 16px;
+ margin-bottom: 8px;
+}
+
+.createGuild {
+ display: flex;
+ gap: 8px;
+ margin-bottom: 16px;
+}
+
+.guildNameInput {
+ flex: 1;
+ padding: 8px 12px;
+ background-color: #3a3a3a;
+ border: 1px solid #555;
+ border-radius: 4px;
+ color: #eaeaea;
+ font-size: 14px;
+}
+
+.guildNameInput:focus {
+ outline: none;
+ border-color: #7289da;
+}
+
+.createButton {
+ padding: 8px 16px;
+ background-color: #7289da;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-weight: 500;
+ transition: background-color 0.2s;
+}
+
+.createButton:hover {
+ background-color: #5a6ebd;
+}
+
+.guildList {
+ margin-top: 16px;
+}
+
+.guildList ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.guildItem {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px;
+ background-color: #3a3a3a;
+ border-radius: 4px;
+ margin-bottom: 8px;
+}
+
+.guildItem span {
+ color: #eaeaea;
+ font-weight: 500;
+}
+
+.guildItem button {
+ padding: 6px 12px;
+ background-color: #7289da;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 12px;
+ transition: background-color 0.2s;
+}
+
+.guildItem button:hover {
+ background-color: #5a6ebd;
+}
+
+.guildItem button:disabled {
+ background-color: #43b581;
+ cursor: default;
+}
+
+.selected {
+ border-left: 4px solid #43b581;
+ background-color: #333333;
+}
diff --git a/client/src/components/Pwar/Guild/GuildPanel.tsx b/client/src/components/Pwar/Guild/GuildPanel.tsx
new file mode 100644
index 0000000..005bed8
--- /dev/null
+++ b/client/src/components/Pwar/Guild/GuildPanel.tsx
@@ -0,0 +1,114 @@
+import { type FC, useState, useEffect } from "react";
+import styles from "./GuildPanel.module.css";
+import { usePwarProvider } from "@/provider/PwarContext";
+
+interface GuildPanelProps {
+ gameId: number | null;
+ selectedGuildId: number | null;
+ onJoinGuild: (guildId: number) => void;
+ onCreateGuild: (guildName: string) => void;
+}
+
+export const GuildPanel: FC
+ No active game. Start a new game to play!
+
+ ) : (
+
+
+ )}
+ Game #{gameId}
+ {timeRemaining !== null && (
+
+ Time Remaining: {formatTime(timeRemaining)}
+
+ )}
+
+
+ );
+ }
+
+ return (
+ Guild Panel
+Start a game to manage guilds
+
+
+ );
+};
diff --git a/client/src/components/Pwar/Proposal/ProposalItem.tsx b/client/src/components/Pwar/Proposal/ProposalItem.tsx
new file mode 100644
index 0000000..a3e6203
--- /dev/null
+++ b/client/src/components/Pwar/Proposal/ProposalItem.tsx
@@ -0,0 +1,67 @@
+import type React from "react";
+
+interface Proposal {
+ id: number;
+ title: string;
+ author: string;
+ yesVotes: number;
+ noVotes: number;
+ isActive: boolean;
+}
+
+interface ProposalItemProps {
+ proposal: Proposal;
+}
+
+export const ProposalItem: React.FCGuild Panel
+ +
+ setGuildName(e.target.value)}
+ className={styles.guildNameInput}
+ />
+
+
+
+
+
+ Available Guilds
+ {guilds.length === 0 ? ( +No guilds available yet
+ ) : ( +-
+ {guilds.map((guild) => (
+
- + {guild.name} + + + ))} +
+
+ );
+};
diff --git a/client/src/components/Pwar/Proposal/ProposalList.tsx b/client/src/components/Pwar/Proposal/ProposalList.tsx
new file mode 100644
index 0000000..baa9a1a
--- /dev/null
+++ b/client/src/components/Pwar/Proposal/ProposalList.tsx
@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { ProposalItem } from "./ProposalItem";
+
+// Simplified Proposal type
+interface Proposal {
+ id: number;
+ title: string;
+ author: string;
+ yesVotes: number;
+ noVotes: number;
+ isActive: boolean;
+}
+
+// Dummy data
+const initialProposals: Proposal[] = [
+ {
+ id: 1,
+ title: "Paint pixels red",
+ author: "0x123",
+ yesVotes: 10,
+ noVotes: 5,
+ isActive: true,
+ },
+ {
+ id: 2,
+ title: "Paint pixels blue",
+ author: "0x456",
+ yesVotes: 7,
+ noVotes: 8,
+ isActive: true,
+ },
+];
+
+export const ProposalList = () => {
+ const [proposals, setProposals] = useState
+
+
+ {/* Vote Progress Bar */}
+ {proposal.title}
+ by {proposal.author} +
+
+
+ {/* Action Buttons */}
+
+
+
+
+
+ Yes: {proposal.yesVotes}
+ No: {proposal.noVotes}
+
+
+
+
+
+
+
+ );
+};
diff --git a/client/src/components/Pwar/Stats/StatsDashboard.module.css b/client/src/components/Pwar/Stats/StatsDashboard.module.css
new file mode 100644
index 0000000..bf3f12e
--- /dev/null
+++ b/client/src/components/Pwar/Stats/StatsDashboard.module.css
@@ -0,0 +1,78 @@
+.statsDashboard {
+ background-color: #2a2a2a;
+ border-radius: 8px;
+ padding: 16px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.statsDashboard h3 {
+ margin-top: 0;
+ color: #eaeaea;
+ border-bottom: 1px solid #444;
+ padding-bottom: 8px;
+ margin-bottom: 16px;
+}
+
+.statsSection {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.statRow {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 8px 0;
+}
+
+.statLabel {
+ color: #b9bbbe;
+ font-size: 14px;
+}
+
+.statValue {
+ color: #ffffff;
+ font-family: monospace;
+ background-color: #3a3a3a;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 14px;
+}
+
+/* Highlight values with specific styling */
+.commitValue {
+ color: #43b581;
+ background-color: rgba(67, 181, 129, 0.1);
+ font-weight: bold;
+}
+
+.ownsValue {
+ color: #faa61a;
+ background-color: rgba(250, 166, 26, 0.1);
+ font-weight: bold;
+}
+
+/* Refresh button styling */
+.refreshButton {
+ margin-top: 12px;
+ padding: 8px 16px;
+ background-color: #4f545c;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: background-color 0.2s;
+ align-self: center;
+}
+
+.refreshButton:hover {
+ background-color: #5d6269;
+}
+
+.refreshButton:disabled {
+ background-color: #36393f;
+ cursor: not-allowed;
+ opacity: 0.7;
+}
diff --git a/client/src/components/Pwar/Stats/StatsDashboard.tsx b/client/src/components/Pwar/Stats/StatsDashboard.tsx
new file mode 100644
index 0000000..3df83e0
--- /dev/null
+++ b/client/src/components/Pwar/Stats/StatsDashboard.tsx
@@ -0,0 +1,121 @@
+import { useState, useEffect, useCallback } from "react";
+import { usePixelawProvider } from "@pixelaw/react";
+import { usePwarProvider } from "@/provider/PwarContext";
+import styles from "./StatsDashboard.module.css";
+
+export const StatsDashboard = () => {
+ const { pixelawCore } = usePixelawProvider();
+ const { wallet, world, account } = usePwarProvider();
+ const [_clickCount, setClickCount] = useState(0);
+ const [pixelsPlaced, setPixelsPlaced] = useState(0);
+ const [playerCommit, setPlayerCommit] = useState
+ setNewProposal(e.target.value)}
+ placeholder="Enter proposal title"
+ className="flex-1 p-2 rounded bg-gray-700 text-white"
+ />
+
+
+
+
+ {proposals.map((proposal) => (
+
+
+
+ );
+};
diff --git a/client/src/components/Avatar/emojiAvatarForAddress.ts b/client/src/components/Pwar/utils/EmojiAvatar.ts
similarity index 95%
rename from client/src/components/Avatar/emojiAvatarForAddress.ts
rename to client/src/components/Pwar/utils/EmojiAvatar.ts
index 16db28a..fd27daf 100644
--- a/client/src/components/Avatar/emojiAvatarForAddress.ts
+++ b/client/src/components/Pwar/utils/EmojiAvatar.ts
@@ -75,6 +75,8 @@ function hashCode(text: string) {
export function emojiAvatarForAddress(address: string) {
const resolvedAddress = typeof address === "string" ? address : "";
- const avatarIndex = Math.abs(hashCode(resolvedAddress.toLowerCase()) % avatars.length);
+ const avatarIndex = Math.abs(
+ hashCode(resolvedAddress.toLowerCase()) % avatars.length,
+ );
return avatars[avatarIndex ?? 0];
}
diff --git a/client/src/components/Pwar/utils/utils.tsx b/client/src/components/Pwar/utils/utils.tsx
new file mode 100644
index 0000000..471e114
--- /dev/null
+++ b/client/src/components/Pwar/utils/utils.tsx
@@ -0,0 +1,41 @@
+import { emojiAvatarForAddress } from "./EmojiAvatar";
+
+export const uint32ToHex = (uint32: number) => {
+ const color = uint32 >>> 8;
+ return `#${color.toString(16).padStart(6, "0")}`;
+};
+
+export const formatTimeRemainingForTitle = (
+ remainingSeconds: number,
+): string => {
+ const days = Math.floor(remainingSeconds / 86400);
+ let seconds = remainingSeconds % 86400;
+ const hours = Math.floor(seconds / 3600);
+ seconds %= 3600;
+ const minutes = Math.floor(seconds / 60);
+ const secs = seconds % 60;
+
+ let formattedTime = "";
+ if (days > 0) {
+ formattedTime += `${days}D`;
+ }
+ if (hours > 0) {
+ formattedTime += ` ${hours}H`;
+ }
+ if (minutes > 0) {
+ formattedTime += ` ${minutes}M`;
+ }
+ if (secs > 0) {
+ formattedTime += ` ${secs}S`;
+ }
+
+ return formattedTime || "0S";
+};
+
+export const formatWalletAddressWithEmoji = (address: string) => {
+ const avatar = emojiAvatarForAddress(address);
+ if (address.length > 10) {
+ return `${avatar.emoji} ${address.slice(0, 4)}...${address.slice(-4)}`;
+ }
+ return `${avatar.emoji} ${address}`;
+};
diff --git a/client/src/components/SwipeControl.tsx b/client/src/components/SwipeControl.tsx
deleted file mode 100644
index 183bc8f..0000000
--- a/client/src/components/SwipeControl.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { detectMobile } from "@/utils/devices";
-import { useEffect, useLayoutEffect } from "react";
-import { useSwipeable } from "react-swipeable";
-
-const SwipeControl = ({ children }: { children: React.ReactNode }) => {
- const isMobile = detectMobile();
-
- useLayoutEffect(() => {
- // add dummy entry to browser history
- window.history.pushState(null, "", window.location.pathname);
-
- // add listener for popstate event
- const handlePopState = (e: PopStateEvent) => {
- e.stopImmediatePropagation();
- // prevent browser back motion
- window.history.pushState(null, "", window.location.pathname);
- };
-
- window.addEventListener("popstate", handlePopState);
-
- // remove listener when component unmounts
- return () => {
- window.removeEventListener("popstate", handlePopState);
- };
- }, []);
-
- useEffect(() => {
- if (!isMobile) return;
- // NOTE: improve mobile scroll experience
- window.addEventListener(
- "wheel",
- (e) => {
- e.preventDefault();
- },
- { passive: false },
- );
- }, [isMobile]);
-
- const handlers = useSwipeable({
- preventScrollOnSwipe: true,
- trackMouse: true,
- });
-
- return Player Stats
+ +
+
+
+ Address:
+
+ {wallet
+ ? `${wallet.address.slice(0, 6)}...${wallet.address.slice(-4)}`
+ : "Not connected"}
+
+
+
+
+ Pixels Placed:
+ {pixelsPlaced}
+
+
+
+ Pixels Committed:
+
+ {isLoading ? "..." : playerCommit !== null ? playerCommit : "N/A"}
+
+
+
+
+ Pixels Owned:
+
+ {isLoading ? "..." : playerOwns !== null ? playerOwns : "N/A"}
+
+
+
+
+ {children}
;
-};
-
-export default SwipeControl;
diff --git a/client/src/components/ThemeProvider.tsx b/client/src/components/ThemeProvider.tsx
deleted file mode 100644
index 4d676bd..0000000
--- a/client/src/components/ThemeProvider.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { createContext, useContext, useEffect, useState } from "react";
-
-type Theme = "dark" | "light" | "system";
-
-type ThemeProviderProps = {
- children: React.ReactNode;
- defaultTheme?: Theme;
- storageKey?: string;
-};
-
-type ThemeProviderState = {
- theme: Theme;
- setTheme: (theme: Theme) => void;
-};
-
-const initialState: ThemeProviderState = {
- theme: "system",
- setTheme: () => null,
-};
-
-const ThemeProviderContext = createContextError occurred, check the logs
+ // }
+ if (coreStatus === "initAccount") {
+ return (
+ Pls wait 🧘 : Initializing account
+ Pls wait 🧘 : Loading (Auto-refreshing in 5s)
+});
+
+const App = () => {
+ console.log("Initializing App with:", {
+ worldsRegistry,
+ world,
+ engines,
+ coreDefaults
+ });
+
+ return (
+
-
-
- );
- }
-
- return (
- Setup World...
-
+
+
+ {currentInteraction && (
+
+
+ );
+};
+
+// Wrap the PwarPage content with the PwarProvider
+const PwarPage: React.FC = () => {
+ return
+
+
+
+
+
+
+
+ );
+};
+
+export default SettingsPage;
diff --git a/client/src/pages/WalletSelectorPage.module.css b/client/src/pages/WalletSelectorPage.module.css
new file mode 100644
index 0000000..7c9edfb
--- /dev/null
+++ b/client/src/pages/WalletSelectorPage.module.css
@@ -0,0 +1,53 @@
+.inner {
+ background-color: white;
+ padding: 1rem;
+ border-radius: 1rem;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+ width: 100vw;
+}
+
+.list {
+ list-style-type: none;
+ padding: 0;
+}
+
+.listItem {
+ padding: 10px;
+ cursor: pointer;
+ border: 1px solid #ccc;
+ margin-bottom: 5px;
+ border-radius: 4px;
+ transition: background-color 0.3s;
+}
+
+.listItem:hover {
+ background-color: #f0f0f0;
+}
+
+.selected {
+ background-color: #d0eaff;
+ border-color: #a0cfff;
+}
+
+.menuButton {
+ width: 100%;
+ padding: 10px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 16px;
+}
+
+.selectedButton {
+ background-color: #007bff;
+ color: white;
+}
+
+.unselectedButton {
+ background-color: #6c757d;
+ color: white;
+}
diff --git a/client/src/pages/WalletSelectorPage.tsx b/client/src/pages/WalletSelectorPage.tsx
new file mode 100644
index 0000000..5d77ffc
--- /dev/null
+++ b/client/src/pages/WalletSelectorPage.tsx
@@ -0,0 +1,15 @@
+import { usePixelawProvider } from "@pixelaw/react";
+import { StarknetWalletSelectorPage } from "@pixelaw/react-dojo";
+
+export const WalletSelectorPage = () => {
+ const { engine } = usePixelawProvider();
+
+ if (engine!.id === "dojo") {
+ return Settings
+-
+
- + Clear IndexedDB + + +
- + Example Setting + + +
- + + +
+
+ );
+};
diff --git a/client/src/pages/WorldSelectorPage.module.css b/client/src/pages/WorldSelectorPage.module.css
new file mode 100644
index 0000000..7c9edfb
--- /dev/null
+++ b/client/src/pages/WorldSelectorPage.module.css
@@ -0,0 +1,53 @@
+.inner {
+ background-color: white;
+ padding: 1rem;
+ border-radius: 1rem;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+ width: 100vw;
+}
+
+.list {
+ list-style-type: none;
+ padding: 0;
+}
+
+.listItem {
+ padding: 10px;
+ cursor: pointer;
+ border: 1px solid #ccc;
+ margin-bottom: 5px;
+ border-radius: 4px;
+ transition: background-color 0.3s;
+}
+
+.listItem:hover {
+ background-color: #f0f0f0;
+}
+
+.selected {
+ background-color: #d0eaff;
+ border-color: #a0cfff;
+}
+
+.menuButton {
+ width: 100%;
+ padding: 10px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 16px;
+}
+
+.selectedButton {
+ background-color: #007bff;
+ color: white;
+}
+
+.unselectedButton {
+ background-color: #6c757d;
+ color: white;
+}
diff --git a/client/src/pages/WorldSelectorPage.tsx b/client/src/pages/WorldSelectorPage.tsx
new file mode 100644
index 0000000..db3cc2d
--- /dev/null
+++ b/client/src/pages/WorldSelectorPage.tsx
@@ -0,0 +1,42 @@
+import { useNavigate } from "react-router-dom";
+import styles from "./WorldSelectorPage.module.css";
+import { usePixelawProvider } from "@pixelaw/react";
+
+const WorldSelectorPage = () => {
+ const { pixelawCore, world, setWorld } = usePixelawProvider();
+
+ const navigate = useNavigate();
+
+ const handleWorldChange = (newWorld: string) => {
+ setWorld(newWorld);
+ navigate("/");
+ };
+
+ return (
+ not implemented
+
+
+ );
+};
+
+export default WorldSelectorPage;
diff --git a/client/src/provider/PwarContext.tsx b/client/src/provider/PwarContext.tsx
new file mode 100644
index 0000000..c37bce9
--- /dev/null
+++ b/client/src/provider/PwarContext.tsx
@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+import type { DojoWallet } from "@pixelaw/core-dojo";
+import type { Account, Provider } from "starknet";
+
+export type IPwarContext = {
+ wallet: DojoWallet;
+ account: Account;
+ provider: Provider;
+ world: World;
+};
+
+export const PwarContext = createContextWorld Selector: {world}
+-
+ {Object.entries(pixelawCore.getWorldsRegistry()).map(
+ ([worldKey, worldConfig]) => {
+ return (
+
- + + + ); + }, + )} +