services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add 'Test Solo' feature to Cube Manager for randomized deck play, with server support for solo game state on rejoin.

Browse Source
This commit is contained in:
Daniele Viti
2025-12-17 16:29:12 +01:00
parent e13aa16766
commit 0fb330e10b
6 changed files with 145 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/client/src/App.tsx
View File

@@ -100,6 +100,7 @@ export const App: React.FC = () => {
<CubeManager
packs={generatedPacks}
setPacks={setGeneratedPacks}
availableLands={availableLands}
setAvailableLands={setAvailableLands}
onGoToLobby={() => setActiveTab('lobby')}
/>

95
src/client/src/modules/cube/CubeManager.tsx
View File

@@ -1,19 +1,20 @@
import React, { useState, useRef, useEffect } from 'react';
import { Layers, RotateCcw, Box, Check, Loader2, Upload, LayoutGrid, List, Sliders, Settings, Users, Download, Copy, FileDown, Trash2, Search, X } from 'lucide-react';
import { Layers, RotateCcw, Box, Check, Loader2, Upload, LayoutGrid, List, Sliders, Settings, Users, Download, Copy, FileDown, Trash2, Search, X, PlayCircle } from 'lucide-react';
import { ScryfallCard, ScryfallSet } from '../../services/ScryfallService';
import { PackGeneratorService, ProcessedPools, SetsMap, Pack, PackGenerationSettings } from '../../services/PackGeneratorService';
import { PackCard } from '../../components/PackCard';
import { socketService } from '../../services/SocketService';
import { useToast } from '../../components/Toast';
interface CubeManagerProps {
packs: Pack[];
setPacks: React.Dispatch<React.SetStateAction<Pack[]>>;
availableLands: any[];
setAvailableLands: React.Dispatch<React.SetStateAction<any[]>>;
onGoToLobby: () => void;
}
import { useToast } from '../../components/Toast';
export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, setAvailableLands, onGoToLobby }) => {
export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, availableLands, setAvailableLands, onGoToLobby }) => {
const { showToast } = useToast();
// --- Services ---
@@ -280,6 +281,84 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, setAv
}
};
const handleStartSoloTest = async () => {
if (packs.length === 0) return;
// Validate Lands
if (!availableLands || availableLands.length === 0) {
if (!confirm("No basic lands detected in the current pool. The generated deck will have 0 lands. Continue?")) {
return;
}
}
setLoading(true);
try {
// Collect all cards
const allCards = packs.flatMap(p => p.cards);
// Random Deck Construction Logic
// 1. Separate lands and non-lands (Exclude existing Basic Lands from spells to be safe)
const spells = allCards.filter(c => !c.typeLine?.includes('Basic Land') && !c.typeLine?.includes('Land'));
// 2. Select 23 Spells randomly
const deckSpells: any[] = [];
const spellPool = [...spells];
// Fisher-Yates Shuffle
for (let i = spellPool.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[spellPool[i], spellPool[j]] = [spellPool[j], spellPool[i]];
}
// Take up to 23 spells, or all if fewer
deckSpells.push(...spellPool.slice(0, Math.min(23, spellPool.length)));
// 3. Select 17 Lands (or fill to 40)
const deckLands: any[] = [];
const landCount = 40 - deckSpells.length; // Aim for 40 cards total
if (availableLands.length > 0) {
for (let i = 0; i < landCount; i++) {
const land = availableLands[Math.floor(Math.random() * availableLands.length)];
deckLands.push(land);
}
}
const fullDeck = [...deckSpells, ...deckLands];
// Emit socket event
const playerId = localStorage.getItem('player_id') || 'tester-' + Date.now();
const playerName = localStorage.getItem('player_name') || 'Tester';
if (!socketService.socket.connected) socketService.connect();
const response = await socketService.emitPromise('start_solo_test', {
playerId,
playerName,
deck: fullDeck
});
if (response.success) {
localStorage.setItem('active_room_id', response.room.id);
localStorage.setItem('player_id', playerId);
// Brief delay to allow socket events to propagate
setTimeout(() => {
onGoToLobby();
}, 100);
} else {
alert("Failed to start test game: " + response.message);
}
} catch (e: any) {
console.error(e);
alert("Error: " + e.message);
} finally {
setLoading(false);
}
};
const handleExportCsv = () => {
if (packs.length === 0) return;
const csvContent = generatorService.generateCsv(packs);
@@ -676,6 +755,14 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, setAv
>
<Users className="w-4 h-4" /> <span className="hidden sm:inline">Play Online</span>
</button>
<button
onClick={handleStartSoloTest}
disabled={loading}
className="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white font-bold rounded-lg shadow-lg flex items-center gap-2 animate-in fade-in zoom-in"
title="Test a randomized deck from these packs right now"
>
<PlayCircle className="w-4 h-4 text-emerald-400" /> <span className="hidden sm:inline">Test Solo</span>
</button>
<button
onClick={handleExportCsv}
className="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white font-bold rounded-lg shadow-lg flex items-center gap-2 animate-in fade-in zoom-in"

39
src/client/src/modules/lobby/GameRoom.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef } from 'react';
import { socketService } from '../../services/SocketService';
import { Users, MessageSquare, Send, Play, Copy, Check, Layers, LogOut } from 'lucide-react';
import { Users, MessageSquare, Send, Copy, Check, Layers, LogOut } from 'lucide-react';
import { Modal } from '../../components/Modal';
import { GameView } from '../game/GameView';
import { DraftView } from '../draft/DraftView';
@@ -149,20 +149,7 @@ export const GameRoom: React.FC<GameRoomProps> = ({ room: initialRoom, currentPl
}
};
const handleStartGame = () => {
const testDeck = Array.from({ length: 40 }).map((_, i) => ({
id: `card-${i}`,
name: i % 2 === 0 ? "Mountain" : "Lightning Bolt",
image_uris: {
normal: i % 2 === 0
? "https://cards.scryfall.io/normal/front/1/9/194459f0-2586-444a-be7d-786d5e7e9bc4.jpg"
: "https://cards.scryfall.io/normal/front/f/2/f29ba16f-c8fb-42fe-aabf-87089cb211a7.jpg"
}
}));
const decks = room.players.reduce((acc, p) => ({ ...acc, [p.id]: testDeck }), {});
socketService.socket.emit('start_game', { roomId: room.id, decks });
};
const handleStartDraft = () => {
socketService.socket.emit('start_draft', { roomId: room.id });
@@ -237,16 +224,9 @@ export const GameRoom: React.FC<GameRoomProps> = ({ room: initialRoom, currentPl
disabled={room.status !== 'waiting'}
className="px-8 py-3 bg-purple-600 hover:bg-purple-500 text-white font-bold rounded-lg flex items-center gap-2 shadow-lg shadow-purple-900/20 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
>
<Layers className="w-5 h-5" /> Start Real Draft
</button>
<span className="text-xs text-slate-500 text-center">- OR -</span>
<button
onClick={handleStartGame}
disabled={room.status !== 'waiting'}
className="px-8 py-3 bg-slate-700 hover:bg-slate-600 text-white font-bold rounded-lg flex items-center gap-2 shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed text-xs uppercase tracking-wider"
>
<Play className="w-4 h-4" /> Quick Play (Test Decks)
<Layers className="w-5 h-5" /> Start Draft
</button>
</div>
)}
</div>
@@ -268,6 +248,7 @@ export const GameRoom: React.FC<GameRoomProps> = ({ room: initialRoom, currentPl
{room.players.map(p => {
const isReady = (p as any).ready;
const isMe = p.id === currentPlayerId;
const isSolo = room.players.length === 1 && room.status === 'playing';
return (
<div key={p.id} className="flex items-center justify-between bg-slate-900/50 p-2 rounded-lg border border-slate-700/50 group">
@@ -287,14 +268,18 @@ export const GameRoom: React.FC<GameRoomProps> = ({ room: initialRoom, currentPl
</div>
</div>
<div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<div className={`flex gap-2 ${isSolo ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}>
{isMe && (
<button
onClick={onExit}
className="p-1 hover:bg-slate-700 rounded text-slate-400 hover:text-red-400"
title="Leave Room"
className={`p-1 rounded flex items-center gap-2 transition-colors ${isSolo
? 'bg-red-900/40 text-red-200 hover:bg-red-900/60 px-3 py-1.5'
: 'hover:bg-slate-700 text-slate-400 hover:text-red-400'
}`}
title={isSolo ? "End Solo Session" : "Leave Room"}
>
<LogOut className="w-4 h-4" />
{isSolo && <span className="text-xs font-bold">End Test</span>}
</button>
)}
{isMeHost && !isMe && (