Skip to content

Create a deck #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
acezard wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Create a deck #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4ad094d
Create a deck
acezard Feb 20, 2025
d8dbe4e
Add tabs for each deck and update state to show only one deck per tab
acezard Feb 20, 2025
0b28544
Group warlords by their faction in the UI
acezard Feb 20, 2025
ba2def0
fix: improve test env
acezard Feb 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"devDependencies": {
"@eslint/js": "^9.19.0",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.2.0",
"@types/jest": "^29.5.14",
"@types/react": "^19.0.8",
Expand Down
56 changes: 55 additions & 1 deletion src/App.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,60 @@
import { render } from "@testing-library/react";
import { render, screen, fireEvent } from "@testing-library/react";
import App from "./App";
import "@testing-library/jest-dom";

window.prompt = jest.fn();
window.localStorage.__proto__.getItem = jest.fn();
window.localStorage.__proto__.setItem = jest.fn();

test("renders", () => {
render(<App />);
});

test("creates a new deck with a unique name", () => {
render(<App />);
const addButton = screen.getByText("Add New Deck");
fireEvent.click(addButton);
const promptSpy = jest.spyOn(window, "prompt").mockReturnValue("Unique Deck");
fireEvent.click(addButton);
expect(screen.getByText("Unique Deck")).toBeInTheDocument();
promptSpy.mockRestore();
});

test("saves the deck to local storage", () => {
render(<App />);
const addButton = screen.getByText("Add New Deck");
fireEvent.click(addButton);
const promptSpy = jest.spyOn(window, "prompt").mockReturnValue("Saved Deck");
fireEvent.click(addButton);
expect(localStorage.setItem).toHaveBeenCalledWith(
"decks",
JSON.stringify([{ deckName: "Saved Deck", factions: expect.any(Array) }]),
);
promptSpy.mockRestore();
});

test("loads decks from local storage on component mount", () => {
const savedDecks = [{ deckName: "Loaded Deck", factions: [] }];
jest
.spyOn(localStorage, "getItem")
.mockReturnValue(JSON.stringify(savedDecks));
render(<App />);
expect(screen.getByText("Loaded Deck")).toBeInTheDocument();
});

test("shows only one deck per tab", () => {
const savedDecks = [
{ deckName: "Deck 1", factions: [] },
{ deckName: "Deck 2", factions: [] },
];
jest
.spyOn(localStorage, "getItem")
.mockReturnValue(JSON.stringify(savedDecks));
render(<App />);
expect(screen.getByText("Deck 1")).toBeInTheDocument();
expect(screen.getByText("Deck 2")).toBeInTheDocument();
const tab1 = screen.getByRole("tabpanel", { hidden: true, name: "Deck 1" });
const tab2 = screen.getByRole("tabpanel", { hidden: true, name: "Deck 2" });
expect(tab1).toBeInTheDocument();
expect(tab2).toBeInTheDocument();
});
40 changes: 34 additions & 6 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,33 @@
// src/App.tsx
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import { Deck } from "./models/types";
import { deepCopyMasterTable } from "./models/masterData";
import DeckTab from "./components/DeckTab";
import { Container, Typography, Button, Box } from "@mui/material";
import { Container, Typography, Button, Box, Tabs, Tab } from "@mui/material";

const App: React.FC = () => {
const [decks, setDecks] = useState<Deck[]>([]);
const [selectedTab, setSelectedTab] = useState(0);

useEffect(() => {
const savedDecks = localStorage.getItem("decks");
if (savedDecks) {
setDecks(JSON.parse(savedDecks));
}
}, []);

const handleAddDeck = () => {
const deckName = prompt("Enter deck name:", "New Deck") || "New Deck";
const newDeck: Deck = {
deckName: "New Deck",
deckName,
factions: deepCopyMasterTable(),
};
setDecks([...decks, newDeck]);
const updatedDecks = [...decks, newDeck];
setDecks(updatedDecks);
localStorage.setItem("decks", JSON.stringify(updatedDecks));
};

const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
setSelectedTab(newValue);
};

return (
Expand All @@ -25,9 +39,23 @@ const App: React.FC = () => {
Add New Deck
</Button>

<Tabs value={selectedTab} onChange={handleChange} aria-label="deck tabs">
{decks.map((deck, index) => (
<Tab key={index} label={deck.deckName} />
))}
</Tabs>

<Box>
{decks.map((deck, index) => (
<DeckTab key={index} deck={deck} />
<div
role="tabpanel"
hidden={selectedTab !== index}
id={`tabpanel-${index}`}
aria-labelledby={`tab-${index}`}
key={index}
>
{selectedTab === index && <DeckTab deck={deck} />}
</div>
))}
</Box>
</Container>
Expand Down
215 changes: 107 additions & 108 deletions src/components/DeckTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ import {
TableRow,
Paper,
Typography,
Box,
} from "@mui/material";
import { Deck, Faction, Warlord } from "../models/types";
import { Deck, Warlord, Faction } from "../models/types";

// Helper function to compute derived stats
function getWarlordStats(w: Warlord) {
Expand All @@ -30,115 +31,113 @@ const DeckTab: React.FC<DeckTabProps> = ({ deck }) => {
<Typography variant="h5" gutterBottom>
{deck.deckName}
</Typography>
<TableContainer>
<Table size="small" aria-label="deck stats table">
<TableHead>
<TableRow>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Faction
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Warlord
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Matches
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Off. Wins
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Off. Losses
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Def. Wins
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Def. Losses
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Total Wins
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Total Losses
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Win Rate
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{deck.factions.map((faction: Faction) => {
const numberOfWarlords = faction.warlords.length;

return faction.warlords.map((warlord: Warlord, idx: number) => {
const { matches, totalWins, totalLosses, winRate } =
getWarlordStats(warlord);

// Color-coded column styles
const offWinStyle = { backgroundColor: "#bfb" };
const offLossStyle = { backgroundColor: "#fbb" };
const defWinStyle = { backgroundColor: "#bfb" };
const defLossStyle = { backgroundColor: "#fbb" };
const totalWinStyle = { backgroundColor: "#dfd" };
const totalLossStyle = { backgroundColor: "#fdd" };
const rateStyle = { backgroundColor: "#eee" };

return (
<TableRow
key={`${faction.factionName}-${warlord.warlordName}`}
>
{/*
Only render the Faction cell for the first warlord in this faction
so it spans multiple rows.
*/}
{idx === 0 && (
<TableCell
rowSpan={numberOfWarlords}
sx={{
verticalAlign: "top",
backgroundColor: "#cce",
fontWeight: "bold",
}}
>
{faction.factionName}
</TableCell>
)}

{/* Warlord Name */}
<TableCell sx={{ backgroundColor: "#eef" }}>
{warlord.warlordName}
<Box>
<TableContainer>
<Table size="small" aria-label="deck stats table">
<TableHead>
<TableRow>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Warlord
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Matches
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Off. Wins
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Off. Losses
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Def. Wins
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Def. Losses
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Total Wins
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Total Losses
</TableCell>
<TableCell sx={{ backgroundColor: "#ccc", fontWeight: "bold" }}>
Win Rate
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{deck.factions.map((faction: Faction) => (
<React.Fragment key={faction.factionName}>
<TableRow>
<TableCell
colSpan={9}
sx={{ backgroundColor: "#ddd", fontWeight: "bold" }}
>
{faction.factionName}
</TableCell>

{/* Matches */}
<TableCell>{matches}</TableCell>

{/* Off. Wins */}
<TableCell sx={offWinStyle}>{warlord.offWins}</TableCell>

{/* Off. Losses */}
<TableCell sx={offLossStyle}>{warlord.offLosses}</TableCell>

{/* Def. Wins */}
<TableCell sx={defWinStyle}>{warlord.defWins}</TableCell>

{/* Def. Losses */}
<TableCell sx={defLossStyle}>{warlord.defLosses}</TableCell>

{/* Total Wins */}
<TableCell sx={totalWinStyle}>{totalWins}</TableCell>

{/* Total Losses */}
<TableCell sx={totalLossStyle}>{totalLosses}</TableCell>

{/* Win Rate */}
<TableCell sx={rateStyle}>{winRate.toFixed(1)}%</TableCell>
</TableRow>
);
});
})}
</TableBody>
</Table>
</TableContainer>
{faction.warlords.map((warlord: Warlord) => {
const { matches, totalWins, totalLosses, winRate } =
getWarlordStats(warlord);

// Color-coded column styles
const offWinStyle = { backgroundColor: "#bfb" };
const offLossStyle = { backgroundColor: "#fbb" };
const defWinStyle = { backgroundColor: "#bfb" };
const defLossStyle = { backgroundColor: "#fbb" };
const totalWinStyle = { backgroundColor: "#dfd" };
const totalLossStyle = { backgroundColor: "#fdd" };
const rateStyle = { backgroundColor: "#eee" };

return (
<TableRow key={warlord.warlordName}>
{/* Warlord Name */}
<TableCell sx={{ backgroundColor: "#eef" }}>
{warlord.warlordName}
</TableCell>

{/* Matches */}
<TableCell>{matches}</TableCell>

{/* Off. Wins */}
<TableCell sx={offWinStyle}>
{warlord.offWins}
</TableCell>

{/* Off. Losses */}
<TableCell sx={offLossStyle}>
{warlord.offLosses}
</TableCell>

{/* Def. Wins */}
<TableCell sx={defWinStyle}>
{warlord.defWins}
</TableCell>

{/* Def. Losses */}
<TableCell sx={defLossStyle}>
{warlord.defLosses}
</TableCell>

{/* Total Wins */}
<TableCell sx={totalWinStyle}>{totalWins}</TableCell>

{/* Total Losses */}
<TableCell sx={totalLossStyle}>{totalLosses}</TableCell>

{/* Win Rate */}
<TableCell sx={rateStyle}>
{winRate.toFixed(1)}%
</TableCell>
</TableRow>
);
})}
</React.Fragment>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
</Paper>
);
};
Expand Down
Loading