)}
- {/* --- Phase 1: Event Modal --- */}
- {phase === 1 && (
-
-
-
{currentEvent.title}
-
-
-
"{currentEvent.flavor}"
-
{currentEvent.desc}
-
- {!eventResult ? (
-
- {currentEvent.type === "discard" && (
-
-
setDiscardAmount(d => Math.max(0, d - 1))} className="p-2 border rounded hover:bg-white/10">-
-
{discardAmount}
-
setDiscardAmount(d => d + 1)} className="p-2 border rounded hover:bg-white/10">+
+ {/* --- Bidding Menu for Phase 3 --- */}
+ {phase === 3 && biddingActorId && (
+
+
+
Make a Bid...
+
+ {[
+ { type: 'product', label: 'bet on win', icon: '/resources/resource_box.png', color: 'bg-red-500/10' },
+ { type: 'energy', label: 'bet on lose', icon: '/resources/resource_energy.png', color: 'bg-blue-500/10' },
+ { type: 'recycle', label: 'bet on draw', icon: '/resources/resource_bio.png', color: 'bg-green-500/10' }
+ ].map((res) => (
+
handleBid(res.type as any)}
+ disabled={resources[res.type as keyof typeof resources] <= 0}
+ className="group flex flex-col items-center gap-2 p-4 rounded-xl border border-white/5 hover:border-[#d4af37]/50 hover:bg-white/5 transition-all disabled:opacity-30 disabled:grayscale"
+ >
+
+
- )}
- CONFIRM
-
- ) : (
-
-
{eventResult.msg}
-
CONTINUE
-
- )}
+
{res.label}
+
{resources[res.type as keyof typeof resources]}
+
+ ))}
+
+
+ handleBid(null)}
+ className="w-full py-2 text-[10px] text-red-400 hover:text-red-300 uppercase tracking-widest font-bold border border-red-500/20 rounded hover:bg-red-500/10 transition-all mb-2"
+ >
+ Undo / Clear Bet
+
+ setBiddingActorId(null)}
+ className="w-full text-[10px] text-gray-500 hover:text-white uppercase tracking-[0.2em] font-bold"
+ >
+ Close
+
+
+
+ )
+ }
+
+ {/* --- Exchange Modal --- */}
+ {exchangeTarget && (
+
+ setExchangeTarget(null)}
+ onConfirm={handleExchangeConfirm}
+ targetName={exchangeTarget.name}
+ playerResources={resources}
+ opponentResources={opponentsData[exchangeTarget.id]?.resources || {}}
+ />
)}
-
-
-
+
+ {/* --- Phase 1: Event Modal --- */}
+ {
+ phase === 1 && (
+
+
+
{currentEvent.title}
+
+
+
"{currentEvent.flavor}"
+
{currentEvent.desc}
+
+ {!eventResult ? (
+
+ {currentEvent.type === "discard" && (
+
+ setDiscardAmount(d => Math.max(0, d - 1))} className="p-2 border rounded hover:bg-white/10">-
+ {discardAmount}
+ setDiscardAmount(d => d + 1)} className="p-2 border rounded hover:bg-white/10">+
+
+ )}
+
CONFIRM
+
+ ) : (
+
+
{eventResult.msg}
+
CONTINUE
+
+ )}
+
+
+ )
+ }
+
+
+
);
}
diff --git a/frontend/app/game/create/page.tsx b/frontend/app/game/create/page.tsx
index 58e6f18..d23d967 100644
--- a/frontend/app/game/create/page.tsx
+++ b/frontend/app/game/create/page.tsx
@@ -3,7 +3,7 @@
import ProfileWidget from "@/components/ProfileWidget";
import MetarchyButton from "@/components/MetarchyButton";
import Link from "next/link";
-import { Copy, ChevronDown, Check, User, Loader2 } from "lucide-react";
+import { Copy, ChevronDown, Check, User, Loader2, RefreshCw } from "lucide-react";
import Image from "next/image";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
@@ -11,9 +11,25 @@ import { useGameState } from "@/context/GameStateContext";
import citizens from "@/data/citizens.json";
import { v4 as uuidv4 } from 'uuid';
+const FUTURISTIC_ADJECTIVES = [
+ "Neon", "Cyber", "Neural", "Quantum", "Void", "Zenith", "Plasma", "Aura", "Nova", "Vector",
+ "Synth", "Orbital", "Hyper", "Solar", "Logic", "Meta", "Prism", "Glitch", "Echo", "Core"
+];
+
+const FUTURISTIC_NOUNS = [
+ "Nexus", "Spire", "Vortex", "Matrix", "Vault", "Harbor", "Gate", "Pulse", "Shell", "Bridge",
+ "Grid", "Node", "Station", "Bastion", "Summit", "Point", "Link", "Zone", "Flow", "Drift"
+];
+
+const getRandomRoomName = () => {
+ const adj = FUTURISTIC_ADJECTIVES[Math.floor(Math.random() * FUTURISTIC_ADJECTIVES.length)];
+ const noun = FUTURISTIC_NOUNS[Math.floor(Math.random() * FUTURISTIC_NOUNS.length)];
+ return `${adj}_${noun}`;
+};
+
export default function CreateGamePage() {
const { player, lobby, createRoom, joinRoom } = useGameState();
- const [roomName, setRoomName] = useState("Metarchy_Genesis");
+ const [roomName, setRoomName] = useState("");
const [playerCount, setPlayerCount] = useState(3);
const [isCreating, setIsCreating] = useState(false);
const [isPrivate, setIsPrivate] = useState(false);
@@ -21,9 +37,10 @@ export default function CreateGamePage() {
const [preGeneratedId, setPreGeneratedId] = useState("");
const router = useRouter();
- // Initialize pre-generated ID on mount
+ // Initialize pre-generated ID and random Room Name on mount
useEffect(() => {
setPreGeneratedId(uuidv4());
+ setRoomName(getRandomRoomName());
}, []);
const handleCreate = async () => {
@@ -90,14 +107,22 @@ export default function CreateGamePage() {
Name of room
-
diff --git a/frontend/app/game/lobby/[id]/page.tsx b/frontend/app/game/lobby/[id]/page.tsx
index f0e2016..01f20bc 100644
--- a/frontend/app/game/lobby/[id]/page.tsx
+++ b/frontend/app/game/lobby/[id]/page.tsx
@@ -41,13 +41,8 @@ export default function LobbyPage() {
setMessages(data.messages || []);
// Handle Start Trigger
- if (data.status === 'starting' && data.startTime) {
- const timeLeft = Math.floor((data.startTime - Date.now()) / 1000);
- if (timeLeft <= 0) {
- router.push(`/game/board/${id}`);
- } else {
- setCountdown(timeLeft);
- }
+ if (data.status === 'playing') {
+ router.push(`/game/board/${id}`);
} else if (data.status === 'waiting') {
setCountdown(null);
}
diff --git a/frontend/components/OnboardingModal.tsx b/frontend/components/OnboardingModal.tsx
index 63f5329..fa5c57b 100644
--- a/frontend/components/OnboardingModal.tsx
+++ b/frontend/components/OnboardingModal.tsx
@@ -1,5 +1,11 @@
"use client";
+declare global {
+ interface Window {
+ ethereum?: any;
+ }
+}
+
import React, { useState } from 'react';
import { useGameState } from '../context/GameStateContext';
import { useRouter } from 'next/navigation';
@@ -11,7 +17,7 @@ import { WindowFrame } from './WindowFrame';
import { CompactFrame } from './CompactFrame';
export default function OnboardingModal({ isOpen, onClose }: { isOpen: boolean, onClose: () => void }) {
- const { setPlayerName, setPlayerAddress, setCitizenId, setPlayer } = useGameState();
+ const { player, setPlayerName, setPlayerAddress, setCitizenId, setPlayer } = useGameState();
const router = useRouter();
const [step, setStep] = useState<'connect' | 'create' | 'minting' | 'success'>('connect');
const [name, setName] = useState('');
@@ -22,72 +28,92 @@ export default function OnboardingModal({ isOpen, onClose }: { isOpen: boolean,
// if (!isOpen) return null;
const handleConnect = async () => {
+ if (!window.ethereum) {
+ setError("MetaMask not detected. Please install the extension.");
+ return;
+ }
+
setIsLoading(true);
setError(null);
- console.log("Initiating connection...");
-
- // Mock connection (replace with valid wallet login logic as needed)
- // In a real app, we'd get the address from the wallet provider
- // For now, we simulate a connection
- const mockAddress = "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"; // Fixed for demo, or random if desired
+ console.log("Initiating real wallet connection...");
- // Simulate delay
- await new Promise(resolve => setTimeout(resolve, 600));
+ try {
+ // Request accounts from MetaMask
+ const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
+ if (!accounts || accounts.length === 0) {
+ setError("No accounts found. Please unlock MetaMask.");
+ setIsLoading(false);
+ return;
+ }
- // setPlayerAddress(mockAddress);
+ const connectedAddress = accounts[0];
+ console.log("Connected address:", connectedAddress);
+ setPlayerAddress(connectedAddress);
- // Check user registration
- try {
- console.log("Fetching citizen data for:", mockAddress);
- const res = await fetch(`/api/citizen?address=${mockAddress}`);
- console.log("API Response status:", res.status);
+ // Check user registration
+ console.log("Fetching citizen data for:", connectedAddress);
+ const res = await fetch(`/api/citizen?address=${connectedAddress}`);
if (res.ok) {
const data = await res.json();
- console.log("User found:", data);
- // User exists!
+ console.log("Citizen found:", data);
+
+ // Update status to online
+ await fetch('/api/citizen', {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ address: connectedAddress, status: 'online' })
+ });
+
setPlayer({
- address: mockAddress,
+ address: connectedAddress,
name: data.name,
citizenId: data.citizenId,
- avatar: data.avatar || "/avatars/golden_avatar.png" // Fallback to default
+ avatar: data.avatar || "/avatars/golden_avatar.png"
});
setGeneratedId(data.citizenId);
- setName(data.name); // Pre-fill name state for success screen
+ setName(data.name);
setStep('success');
} else {
- console.log("User not found, proceeding to creation.");
- setPlayerAddress(mockAddress);
- // User is new
+ console.log("Citizen not found, proceeding to creation.");
setStep('create');
}
- } catch (e) {
- console.error("Failed to check registration:", e);
- setError("Connection failed. Please try again.");
- // setStep('create'); // Don't auto-advance on error, let user see it
+ } catch (e: any) {
+ console.error("Wallet connection failed:", e);
+ if (e.code === 4001) {
+ setError("Connection request rejected by user.");
+ } else {
+ setError("Failed to connect wallet. Please try again.");
+ }
} finally {
setIsLoading(false);
}
};
const handleCreate = async () => {
- if (!name) return;
+ if (!name || !player.address) return;
setStep('minting');
- const currentAddress = "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"; // Matching handleConnect
-
try {
const res = await fetch('/api/citizen', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ address: currentAddress, name: name })
+ body: JSON.stringify({ address: player.address, name: name })
});
if (res.ok) {
const data = await res.json();
+
+ // Update status to online (Identity just minted)
+ await fetch('/api/citizen', {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ address: player.address, status: 'online' })
+ });
+
setGeneratedId(data.citizenId);
setPlayer({
- address: currentAddress,
+ address: player.address,
name: data.name,
citizenId: data.citizenId,
avatar: data.avatar || "/avatars/golden_avatar.png"
diff --git a/frontend/components/ProfileWidget.tsx b/frontend/components/ProfileWidget.tsx
index a5a92ce..b344eca 100644
--- a/frontend/components/ProfileWidget.tsx
+++ b/frontend/components/ProfileWidget.tsx
@@ -2,10 +2,35 @@ import React from 'react';
import { useGameState } from '../context/GameStateContext';
export default function ProfileWidget() {
- const { player } = useGameState();
+ const { player, setPlayer } = useGameState();
if (!player || !player.citizenId || player.citizenId === "0000") return null;
+ const handleLogout = async () => {
+ if (!player.address) return;
+
+ try {
+ await fetch('/api/citizen', {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ address: player.address, status: 'offline' })
+ });
+
+ // Clear local state
+ setPlayer({
+ name: "",
+ address: "",
+ citizenId: "0000",
+ avatar: ""
+ });
+
+ // Redirect or refresh
+ window.location.href = '/';
+ } catch (e) {
+ console.error("Logout failed:", e);
+ }
+ };
+
return (
{/*
@@ -96,15 +121,15 @@ export default function ProfileWidget() {
)}
- {/* 4. Profile Menu Button */}
- {/* Positioned 5px from top-right page corner (local coords to snapped container) */}
+ {/* 4. Profile Menu Button / Logout */}
console.log('Profile Menu Clicked')}
+ className="absolute top-[5px] right-[5px] z-50 hover:scale-110 transition-transform cursor-pointer group"
+ onClick={handleLogout}
+ title="LOGOUT"
>
+ {Object.values(uniqueCards).map(({ card, count }) => {
+ const isActive = activeCardId === card.id;
+ return (
+
+
+
{card.type}
+
{card.title}
+
+
+
+ {card.icon ? (
+
+ ) : (
+
+ IMG
+
+ )}
+
+
+ {/* Count Badge */}
+
+ {count}
+
+
+
+ );
+ })}
+
+ {cards.map((card, i) => {
+ const isActive = activeCardId === card.id;
+
+ return (
+
onSelect(card.id)}
+ className={`group relative w-40 h-56 rounded-xl border transition-all cursor-pointer overflow-hidden
+ ${isActive
+ ? 'border-[#d4af37] bg-[#d4af37]/20 -translate-y-4 shadow-[0_0_30px_rgba(212,175,55,0.4)] scale-110'
+ : 'border-white/10 bg-[#0d0d12]/90 backdrop-blur-md hover:border-[#d4af37]/50 hover:bg-white/5 hover:-translate-y-2'
+ }
+ `}
+ >
+ {/* Card Header/Type */}
+
+
+
+
{card.type}
+
{card.title}
+
+ {/* Card Art Placeholder/Mock */}
+
+
+ {card.icon ? (
+
+ ) : (
+
+ )}
+
+
+ {!compact && (
+
+ {card.desc}
+
+ )}
+
+
+ {/* Selection Glow */}
+ {isActive && (
+
+ )}
+
+ );
+ })}
+
(conflict.playerActor.type || 'rock');
+ const [opponentChoices, setOpponentChoices] = useState<{ [id: string]: string }>({});
+
+ // Calculated Result
+ const [result, setResult] = useState(null);
+
+ // 1. Initialize Opponent Choices (Random for now)
+ useEffect(() => {
+ const choices: { [id: string]: string } = {};
+ conflict.opponents.forEach(opp => {
+ const roll = Math.random();
+ choices[opp.actorId] = roll < 0.33 ? 'rock' : roll < 0.66 ? 'paper' : 'scissors';
+ });
+ setOpponentChoices(choices);
+ }, [conflict]);
+
+ // 2. Logic: Resolve the Conflict
+ const resolveConflict = (pChoice: string) => {
+ const choices = [
+ { id: 'p1', choice: pChoice, bid: conflict.playerActor.bid, isPlayer: true },
+ ...conflict.opponents.map(opp => ({
+ id: opp.actorId,
+ choice: opponentChoices[opp.actorId],
+ bid: opp.bid,
+ isPlayer: false
+ }))
+ ];
+
+ // Group by choice
+ const counts = { rock: 0, paper: 0, scissors: 0 };
+ choices.forEach(c => {
+ if (counts[c.choice as keyof typeof counts] !== undefined) {
+ counts[c.choice as keyof typeof counts]++;
+ }
+ });
+
+ const presentTypes = Object.keys(counts).filter(k => counts[k as keyof typeof counts] > 0);
+ let winnerType = null;
+ let isDraw = false;
+
+ if (presentTypes.length === 1 || presentTypes.length === 3) {
+ isDraw = true;
+ } else {
+ const [t1, t2] = presentTypes;
+ if (
+ (t1 === 'rock' && t2 === 'scissors') ||
+ (t1 === 'scissors' && t2 === 'paper') ||
+ (t1 === 'paper' && t2 === 'rock')
+ ) {
+ winnerType = t1;
+ } else {
+ winnerType = t2;
+ }
+ }
+
+ const winners = isDraw ? [] : choices.filter(c => c.choice === winnerType);
+
+ // Initial Result Object
+ return {
+ winnerId: winners.length === 1 ? winners[0].id : null,
+ isDraw: isDraw || winners.length > 1,
+ restart: false, // Will be checked in Bid Phase
+ logs: [] as string[]
+ };
+ };
+
+ // Handler: "Reveal" Button Click
+ const handleReveal = () => {
+ const res = resolveConflict(playerChoice);
+ setResult(res);
+ setStep('reveal');
+
+ // Auto-advance to Outcome Modal after animation
+ setTimeout(() => setStep('outcome_rsp'), 2000);
+ };
+
+ // Handler: Re-Roll (Draw)
+ const handleReRoll = (newChoice: string) => {
+ setPlayerChoice(newChoice);
+ // Optional: Re-roll opponents too?
+ // For fairness/chaos, let's re-roll opponents randomly too
+ const newOppChoices: { [id: string]: string } = {};
+ conflict.opponents.forEach(opp => {
+ const roll = Math.random();
+ newOppChoices[opp.actorId] = roll < 0.33 ? 'rock' : roll < 0.66 ? 'paper' : 'scissors';
+ });
+ setOpponentChoices(newOppChoices);
+
+ // Re-calculate immediately
+ const res = resolveConflict(newChoice);
+
+ // Slightly hacky: Set result, but keep step 'outcome_rsp' to update the modal content
+ setResult(res);
+ };
+
+ // Handler: Next (Check Bids or Close)
+ const handleNext = () => {
+ if (!result) return;
+
+ // Check for active bids that affect outcome
+ // 1. Lose Bid (Energy) - if Bidder Lost
+ // 2. Win Bid (Product) - if Bidder Won
+ // 3. Draw Bid (Recycle) - if Draw
+
+ // We need to know who bid what.
+ const playerBid = conflict.playerActor.bid;
+ const playerWon = result.winnerId === 'p1';
+ const playerLost = !playerWon && !result.isDraw;
+
+ let hasBidEffect = false;
+ const newLogs = [...result.logs];
+ let restart = false;
+
+ if (playerBid === 'energy' && playerLost) {
+ hasBidEffect = true;
+ newLogs.push("Energy Bid Triggered: RESTART!");
+ restart = true;
+ } else if (playerBid === 'product' && playerWon) {
+ hasBidEffect = true;
+ newLogs.push("Product Bid: DOUBLE PRIZE!");
+ } else if (playerBid === 'recycle' && result.isDraw) {
+ hasBidEffect = true;
+ newLogs.push("Recycle Bid: DRAW WIN!");
+ // Technically changes result to win? For now just log it.
+ }
+
+ if (hasBidEffect && step !== 'outcome_bid') {
+ setResult({ ...result, logs: newLogs, restart });
+ setStep('outcome_bid');
+ return;
+ }
+
+ // If no bid effect or already showed it -> Confirm & Close
+ onResolve({ ...result, logs: newLogs, restart });
+ };
+
+ const bgImage = LOCATION_IMAGES[conflict.locId] || LOCATION_IMAGES['square'];
+
+ // Helper: Determine grayscale
+ const isActorLoser = (actorId: string) => {
+ if (step === 'intro' || step === 'reveal') return false;
+ if (!result) return false;
+ // If draw, no one is loser yet (unless specific logic).
+ if (result.isDraw) return false;
+ return result.winnerId !== actorId;
+ };
+
+ return (
+
+ {/* Background Layer */}
+
+
+
+ {/* SCENE: Actors & Tokens */}
+
+
+ {/* Left: Player */}
+
+ {/* Token Floating Above */}
+
+
+
+ {/* Actor Body */}
+
+
+ {/* Tag */}
+
+ YOU
+
+
+
+ {/* Center: VS (Only Intro/Reveal) */}
+ {(step === 'intro' || step === 'reveal') && (
+
+
+ VS
+
+
+ )}
+
+ {/* Right: Opponents */}
+
+ {conflict.opponents.map((opp, idx) => (
+
+ {/* Token Above */}
+
+ {step === 'intro' ? (
+
+ ?
+
+ ) : (
+
+
+ {/* Actor Body */}
+
+
+
+ {opp.name}
+
+
+ ))}
+
+
+
+ {/* BUTTON: Reveal (Intro Only) */}
+ {step === 'intro' && (
+
+
+ Reveal Conflict
+
+
+ )}
+
+ {/* MODAL: Outcome & Interaction */}
+
+ {(step === 'outcome_rsp' || step === 'outcome_bid') && (
+
+
+ {/* Header */}
+
+
+ {result?.isDraw ? 'DRAW' : result?.winnerId === 'p1' ? 'VICTORY' : 'DEFEAT'}
+
+
+ {result?.isDraw
+ ? "The negotiation stalled. Arguments were inconclusive."
+ : result?.winnerId === 'p1'
+ ? "Your arguments prevailed over the opposition."
+ : "You failed to convince the assembly."
+ }
+
+
+
+ {/* DRAW: Re-Selection */}
+ {step === 'outcome_rsp' && result?.isDraw && (
+
+
Resolve the dispute. Choose argument:
+
+ {['rock', 'paper', 'scissors'].map(token => (
+ handleReRoll(token)}
+ className={`w-24 h-24 rounded-full border-2 flex items-center justify-center transition-all ${playerChoice === token ? 'bg-[#d4af37]/20 border-[#d4af37] scale-110 shadow-[0_0_20px_#d4af37]' : 'bg-white/5 border-white/20 hover:bg-white/10'}`}
+ >
+
+ ))}
+
+
+ )}
+
+ {/* WIN/LOSE: Next/Close */}
+ {step === 'outcome_rsp' && !result?.isDraw && (
+
+
+
+
Conflict Resolved
+
+ Next
+
+
+ )}
+
+ {/* BID OUTCOME STAGE */}
+ {step === 'outcome_bid' && (
+
+
+
BID EFFECT TRIGGERED
+
+ {result?.logs.map((log, i) => (
+
+
+ ))}
+
+
+
+ Close
+
+
+ )}
+
+
+
+
+
+
+
Active Conflicts
+
+
+
+ {conflicts.map((conflict) => {
+ const isActive = activeConflictLocId === conflict.locId;
+ return (
+
onSelectConflict(conflict.locId)}
+ className={`
+ relative group flex items-start justify-between p-3 rounded-xl border transition-all duration-300 w-full text-left cursor-pointer
+ ${isActive
+ ? 'bg-[#d4af37]/20 border-[#d4af37] shadow-[0_0_15px_rgba(212,175,55,0.2)]'
+ : 'bg-white/5 border-white/5 hover:bg-white/10 hover:border-white/20'
+ }
+ `}
+ >
+ {/* Location Label */}
+
+
+ {/* 1. Main Player: Actor Orb (Scaled) */}
+
+
+
+
+ {conflict.playerActor.type}
+
+
+
+
VS
+
+ {/* 2. Opponents: HUD Markers (Scaled) */}
+
+ {conflict.opponents.map((opp, idx) => (
+
+ ))}
+
+
+
+
+
+ );
+ })}
+
+ );
+}
diff --git a/frontend/components/game/ExchangeModal.tsx b/frontend/components/game/ExchangeModal.tsx
new file mode 100644
index 0000000..c0d7495
--- /dev/null
+++ b/frontend/components/game/ExchangeModal.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import React, { useState } from 'react';
+import { X, ArrowRightLeft } from 'lucide-react';
+import Image from 'next/image';
+
+interface ExchangeModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ onConfirm: (give: 'power' | 'art' | 'wisdom', take: 'power' | 'art' | 'wisdom') => void;
+ targetName: string;
+ playerResources: Record;
+ opponentResources: Record;
+}
+
+const RESOURCES = [
+ { id: 'power', label: 'Power', icon: '/intangibles/resource_power.png' },
+ { id: 'art', label: 'Art', icon: '/intangibles/resource_Art.png' },
+ { id: 'wisdom', label: 'Wisdom', icon: '/intangibles/resource_wisdom.png' }
+] as const;
+
+type ResourceId = 'power' | 'art' | 'wisdom';
+
+export default function ExchangeModal({
+ isOpen,
+ onClose,
+ onConfirm,
+ targetName,
+ playerResources,
+ opponentResources
+}: ExchangeModalProps) {
+ const [give, setGive] = useState(null);
+ const [take, setTake] = useState(null);
+
+ if (!isOpen) return null;
+
+ return (
+
+
+ {/* Header */}
+
+
+ {/* Content */}
+
+
+ Select a resource to give and a resource to take from {targetName} .
+
+
+
+ {/* Give Section */}
+
+
You Give
+
+ {RESOURCES.map((res) => {
+ const resourceKey = res.id === 'wisdom' ? 'knowledge' : res.id;
+ const count = playerResources[resourceKey] || 0;
+ const isDisabled = count <= 0;
+
+ return (
+
setGive(res.id)}
+ className={`
+ relative flex flex-col items-center gap-2 p-3 rounded-xl border transition-all
+ ${give === res.id
+ ? 'bg-red-500/10 border-red-500/50 shadow-[0_0_15px_rgba(239,68,68,0.1)]'
+ : isDisabled
+ ? 'bg-black/20 border-white/5 opacity-30 grayscale cursor-not-allowed'
+ : 'bg-black/40 border-white/5 hover:border-white/20'
+ }
+ `}
+ >
+
+
+
+
+ {res.label}
+
+ {count}
+
+
+ );
+ })}
+
+
+
+ {/* Divider Icon */}
+
+
+ {/* Take Section */}
+
+
{targetName} Gives You
+
+ {RESOURCES.map((res) => {
+ const resourceKey = res.id === 'wisdom' ? 'knowledge' : res.id;
+ const count = opponentResources[resourceKey] || 0;
+ const isDisabled = count <= 0;
+
+ return (
+
setTake(res.id)}
+ className={`
+ relative flex flex-col items-center gap-2 p-3 rounded-xl border transition-all
+ ${take === res.id
+ ? 'bg-green-500/10 border-green-500/50 shadow-[0_0_15px_rgba(34,197,94,0.1)]'
+ : isDisabled
+ ? 'bg-black/20 border-white/5 opacity-30 grayscale cursor-not-allowed'
+ : 'bg-black/40 border-white/5 hover:border-white/20'
+ }
+ `}
+ >
+
+
+
+
+ {res.label}
+
+ {count}
+
+
+ );
+ })}
+
+
+
+
+ {/* Actions */}
+
+
+ Cancel
+
+ give && take && onConfirm(give, take)}
+ className={`
+ flex-1 py-3 px-4 rounded-lg font-bold text-xs transition-all uppercase tracking-widest
+ ${give && take
+ ? 'bg-[#d4af37] text-black hover:brightness-110 shadow-lg cursor-pointer'
+ : 'bg-white/5 text-gray-600 cursor-not-allowed'
+ }
+ `}
+ >
+ Confirm Swap
+
+
+
+
+
(null);
+
+ useEffect(() => {
+ if (scrollRef.current) {
+ scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+ }
+ }, [logs]);
+
+ return (
+
+
+ Command Log
+
+
+
+ {logs.length === 0 ? (
+
Waiting for uplink...
+ ) : (
+ logs.map((log, i) => (
+
+
+ [{new Date().toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit' })}]
+
+
+ {log}
+
+
+ ))
+ )}
+
+
+
+
diff --git a/frontend/components/game/MapContainer.tsx b/frontend/components/game/MapContainer.tsx
index 739dce2..1f16343 100644
--- a/frontend/components/game/MapContainer.tsx
+++ b/frontend/components/game/MapContainer.tsx
@@ -11,6 +11,7 @@ const CITIZENS = citizensData as any[]; // Type assertion for simple usage
interface MapContainerProps {
phase: number;
+ p3Step?: number;
placedActors: any[];
selectedActorId: string | null;
hoveredActorId: string | null;
@@ -19,6 +20,7 @@ interface MapContainerProps {
selectedHex: string | null;
playerActorsV2: any[];
players: any[];
+ availableTeleportCards?: number;
onHexClick: (locId: string) => void;
onPlayerClick: (actor: any, event: React.MouseEvent) => void;
}
@@ -34,6 +36,7 @@ const ACTOR_AVATARS: { [key: string]: string } = {
export default function MapContainer({
phase,
+ p3Step,
placedActors,
selectedActorId,
hoveredActorId,
@@ -42,40 +45,72 @@ export default function MapContainer({
selectedHex,
playerActorsV2,
players,
+ availableTeleportCards,
onHexClick,
onPlayerClick
}: MapContainerProps) {
const [scale, setScale] = useState(0.7);
+ const [offset, setOffset] = useState({ x: 0, y: 0 });
+ const [isDragging, setIsDragging] = useState(false);
+ const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
const [hoveredLocId, setHoveredLocId] = useState
(null);
+ // Zoom Compensation logic: keep HUD size constant as seen in Phase 2
+ const BASE_ZOOM = 0.7;
+ const currentZoomFactor = phase >= 3 ? 1.6 : 0.7;
+ const hudScale = BASE_ZOOM / currentZoomFactor;
+
useEffect(() => {
if (typeof window !== 'undefined') {
const updateScale = () => {
const baseScale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
- const zoomFactor = phase >= 3 ? 0.9 : 0.7;
- setScale(baseScale * zoomFactor);
+ setScale(baseScale * currentZoomFactor);
};
updateScale();
window.addEventListener('resize', updateScale);
return () => window.removeEventListener('resize', updateScale);
}
- }, [phase]);
+ }, [phase, currentZoomFactor]);
+
+ const handleMouseDown = (e: React.MouseEvent) => {
+ if (e.button !== 0) return; // Only left click
+ setIsDragging(true);
+ setDragStart({ x: e.clientX - offset.x, y: e.clientY - offset.y });
+ };
+
+ const handleMouseMove = (e: React.MouseEvent) => {
+ if (!isDragging) return;
+ setOffset({
+ x: e.clientX - dragStart.x,
+ y: e.clientY - dragStart.y
+ });
+ };
- const activeActorId = hoveredActorId || selectedActorId;
+ const handleMouseUp = () => {
+ setIsDragging(false);
+ };
+
+ const activeActorId = teleportSource || hoveredActorId || selectedActorId;
const activeActor = activeActorId ? playerActorsV2.find(a => a.id === activeActorId) : null;
const validLocs = activeActor ? ALLOWED_MOVES[activeActor.type] || [] : [];
return (
-
+
{/* Background Map Layer */}
= 4 ? 'blur-sm brightness-50' : ''}`} />
{/* Virtual Canvas for Fixed 1080p Positioning */}
{LOCATIONS.map(loc => {
@@ -172,26 +207,38 @@ export default function MapContainer({
if (!isVisible) return null;
// Resolve full actor details
- const actorDetails = playerActorsV2.find(origin => origin.id === a.actorId) || a;
+ const actorDetails = playerActorsV2.find(origin => origin.id === a.actorId) || { ...a, type: a.actorType || a.type };
const token = a.type !== actorDetails.type ? a.type : undefined;
+ // Centered Spread Logic
+ const spread = 100;
+ const startX = -((actorsHere.length - 1) * spread) / 2;
+ const currentX = startX + (i * spread);
+ const baseSlotY = phase >= 3 ? -4 : -34;
+ const opponentYOffset = a.playerId !== 'p1' ? -80 : 0;
+ const finalY = baseSlotY + opponentYOffset;
+
// Opponent Marker
if (a.playerId !== 'p1') {
- const pIndex = parseInt(a.playerId.replace('p', '')) - 1;
- const playerAvatar = CITIZENS[pIndex]?.avatar || "";
+ const opponent = players.find(p => p.id === a.playerId);
+ const playerAvatar = opponent?.avatar || "";
return (
= 4 ? a.bid : undefined}
+ hasSecretBid={phase === 3 && !!a.bid}
phase={phase}
+ hudScale={hudScale}
onClick={(e) => { e.stopPropagation(); onPlayerClick(a, e) }}
/>
@@ -202,17 +249,23 @@ export default function MapContainer({
return (
+
{ e.stopPropagation(); onPlayerClick(a, e) }}
/>
diff --git a/frontend/components/game/NewPlayersPanel.tsx b/frontend/components/game/NewPlayersPanel.tsx
index bacff30..19e7beb 100644
--- a/frontend/components/game/NewPlayersPanel.tsx
+++ b/frontend/components/game/NewPlayersPanel.tsx
@@ -3,17 +3,24 @@ import Image from 'next/image';
interface NewPlayersPanelProps {
players?: any[];
+ p3Step?: number;
+ availableExchangeCards?: number;
+ onExchangeClick?: (playerId: string, playerName: string) => void;
}
-export default function NewPlayersPanel({ players = [] }: NewPlayersPanelProps) {
+export default function NewPlayersPanel({ players = [], p3Step, availableExchangeCards, onExchangeClick }: NewPlayersPanelProps) {
// Data unpacking: p1 is Index 0 (User), p2/p3 are Index 1/2 (Opponents)
const userPlayer = players[0] || { name: 'Citizen', avatar: '/avatars/golden_avatar.png' };
- const p2 = players[1] || { name: 'Viper', avatar: '/avatars/viper.png' };
- const p3 = players[2] || { name: 'Ghost', avatar: '/avatars/ghost.png' };
+ const p2 = players[1] || { id: 'p2', name: 'Viper', avatar: '/avatars/viper.png' };
+ const p3 = players[2] || { id: 'p3', name: 'Ghost', avatar: '/avatars/ghost.png' };
+
+ const showExchange = p3Step === 4 && availableExchangeCards && availableExchangeCards > 0;
// Helper for circular avatar
- const AvatarCircle = ({ x, y, r, img, alt, hasOuterRing }: { x: number, y: number, r: number, img: string, alt: string, hasOuterRing?: boolean }) => {
+ const AvatarCircle = ({ x, y, r, img, alt, player, hasOuterRing }: { x: number, y: number, r: number, img: string, alt: string, player?: any, hasOuterRing?: boolean }) => {
const size = r * 2;
+ const isOpponent = !hasOuterRing && player;
+
return (
<>
{hasOuterRing && (
@@ -39,15 +46,34 @@ export default function NewPlayersPanel({ players = [] }: NewPlayersPanelProps)
)}
{
+ if (isOpponent && showExchange && onExchangeClick) {
+ onExchangeClick(player.id, player.name);
+ }
+ }}
>
+
+ {/* Interaction Overlay */}
+ {isOpponent && showExchange && (
+
+ )}
);
@@ -63,7 +89,7 @@ export default function NewPlayersPanel({ players = [] }: NewPlayersPanelProps)
{/* Gold Separator Line */}
-
+
{/* Outline / Decor paths */}
@@ -107,10 +133,14 @@ export default function NewPlayersPanel({ players = [] }: NewPlayersPanelProps)
{/* 4. Player 2 (Viper) */}
-
+
{/* 5. Player 3 (Ghost) */}
-
+
diff --git a/frontend/components/game/OtherPlayerActorMarker.tsx b/frontend/components/game/OtherPlayerActorMarker.tsx
index ea824a1..bb39124 100644
--- a/frontend/components/game/OtherPlayerActorMarker.tsx
+++ b/frontend/components/game/OtherPlayerActorMarker.tsx
@@ -1,12 +1,14 @@
"use client";
-import React from 'react';
import Image from 'next/image';
interface OtherPlayerActorMarkerProps {
- actor: { type: string, avatar: string, id: string }; // The actor (Magenta ring)
- playerAvatar?: string; // The player's citizen avatar (Blue ring)
+ actor: { type: string, avatar: string, id: string }; // The actor
+ playerAvatar?: string; // The player's citizen avatar
+ bid?: string; // Attached resource type
+ hasSecretBid?: boolean; // New: indicates a bid exists but is hidden
phase?: number;
+ hudScale?: number;
onClick?: (e: React.MouseEvent) => void;
}
@@ -18,15 +20,51 @@ const FACE_Offsets: { [key: string]: string } = {
'robot': '50% 20%'
};
-export default function OtherPlayerActorMarker({ actor, playerAvatar, phase, onClick }: OtherPlayerActorMarkerProps) {
+const Resource_Icons: { [key: string]: string } = {
+ 'product': '/resources/resource_product.png',
+ 'energy': '/resources/resource_energy.png',
+ 'recycle': '/resources/resource_Recycle.png'
+};
+
+export default function OtherPlayerActorMarker({ actor, playerAvatar, bid, hasSecretBid, phase, hudScale = 1, onClick }: OtherPlayerActorMarkerProps) {
const objectPosition = FACE_Offsets[actor.type.toLowerCase()] || '50% 20%';
- const baseScale = phase && phase >= 3 ? 'scale-[1.2]' : 'scale-100';
+ const phaseScaleAdjust = phase && phase >= 3 ? 1.44 : 1.0;
return (
+ {/* Bid Icon Overlay - Styled like GameResources panel */}
+ {(bid || hasSecretBid) && (
+
+ {/* Background Plate */}
+
+
+ {/* Icon */}
+
+ {hasSecretBid ? (
+
+ ?
+
+ ) : (
+
+ )}
+
+
+ {!hasSecretBid &&
1 }
+
+ )}
{/* Layer 0: Background Fills */}
);
diff --git a/frontend/components/game/PlacedActorMarker.tsx b/frontend/components/game/PlacedActorMarker.tsx
index af24488..2169fcf 100644
--- a/frontend/components/game/PlacedActorMarker.tsx
+++ b/frontend/components/game/PlacedActorMarker.tsx
@@ -1,14 +1,17 @@
"use client";
-import React from 'react';
import Image from 'next/image';
interface PlacedActorMarkerProps {
actor: { type: string, avatar: string, id: string };
token?: string; // RSP token id
+ bid?: string; // Attached resource type
isP1: boolean;
isTeleporting?: boolean;
phase?: number;
+ p3Step?: number;
+ availableTeleportCards?: number;
+ hudScale?: number;
onClick?: (e: React.MouseEvent) => void;
}
@@ -19,15 +22,78 @@ const FACE_Offsets: { [key: string]: string } = {
'robot': '50% 20%'
};
-export default function PlacedActorMarker({ actor, token, isP1, isTeleporting, phase, onClick }: PlacedActorMarkerProps) {
+const Resource_Icons: { [key: string]: string } = {
+ 'product': '/resources/resource_box.png',
+ 'energy': '/resources/resource_energy.png',
+ 'recycle': '/resources/resource_bio.png'
+};
+
+export default function PlacedActorMarker({ actor, token, bid, isP1, isTeleporting, phase, p3Step, availableTeleportCards, hudScale = 1, onClick }: PlacedActorMarkerProps) {
const objectPosition = FACE_Offsets[actor.type.toLowerCase()] || '50% 20%';
- const baseScale = phase && phase >= 3 ? 'scale-[1.4]' : 'scale-125';
+ const phaseScaleAdjust = phase && phase >= 3 ? 1.5 : 1.25;
+
+ const canTeleport = phase === 3 && p3Step === 3 && availableTeleportCards && availableTeleportCards > 0 && !isTeleporting;
return (
+ {/* Phase 3 Interactions: Bidding & Teleport */}
+ {phase === 3 && (
+
+ {/* Bidding (Step 1 or View-Only) */}
+ {bid && (
+
{
+ if (p3Step === 1) {
+ e.stopPropagation();
+ onClick?.(e);
+ }
+ }}
+ >
+
+
+
+
1
+
+ )}
+
+ {/* Step 1: Add Bid Button (if no bid) */}
+ {!bid && p3Step === 1 && (
+
{ e.stopPropagation(); onClick?.(e); }}
+ className="pointer-events-auto group/add w-10 h-10 rounded-full bg-black/60 backdrop-blur-md border border-[#d4af37]/40 flex items-center justify-center hover:bg-[#d4af37] transition-all shadow-lg animate-in fade-in slide-in-from-bottom-2"
+ >
+ +
+
+ )}
+
+ {/* Step 3: Teleport Interaction (Only if cards available) */}
+ {p3Step === 3 && availableTeleportCards && availableTeleportCards > 0 && !isTeleporting && (
+
{ e.stopPropagation(); onClick?.(e); }}
+ className="pointer-events-auto group/teleport w-10 h-10 rounded-full bg-[#171B21]/90 backdrop-blur-sm border border-[#d4af37]/40 flex items-center justify-center hover:bg-[#d4af37]/20 hover:border-[#d4af37] transition-all shadow-lg z-50"
+ >
+
+
+
+ )}
+
+ )}
+
{/* Layer 0: Background Fills */}