Skip to content

Commit 0503fe3

Browse files
jcservjcserv
committed
feat: show missing cards on hover
1 parent 0590981 commit 0503fe3

File tree

15 files changed

+114
-121
lines changed

15 files changed

+114
-121
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"@radix-ui/react-separator": "^1.1.0",
2828
"@radix-ui/react-slot": "^1.1.0",
2929
"@radix-ui/react-toast": "^1.2.2",
30+
"@radix-ui/react-tooltip": "^1.1.4",
3031
"@tanstack/react-query": "^5.59.20",
3132
"@tanstack/react-router": "^1.65.0",
3233
"@tanstack/store": "^0.5.5",

‎pnpm-lock.yaml

Lines changed: 36 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/CartForm.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
SelectTrigger,
2020
SelectValue,
2121
} from "@/components/ui";
22-
import { TypeaheadTextarea } from "@/components/TypeaheadTextarea";
22+
import { TypeaheadTextarea } from "@/components";
2323
import { Finish } from "@/__generated__/graphql";
2424
import { useLocalStorage } from "@/hooks/localStorage";
2525
import {

‎src/components/DeckViewer.tsx

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
11
import { useEffect, useMemo, useState } from "react";
2-
import { CopyIcon } from "lucide-react";
2+
import { CopyIcon, LucideHelpCircle } from "lucide-react";
33

4-
import { Card, Button, ScrollArea } from "@/components/ui";
5-
import { CardDisplay } from "@/components/CardDisplay";
6-
import { CardTypeSection } from "@/components/CardTypeSection";
4+
import {
5+
Card,
6+
Button,
7+
Tooltip,
8+
TooltipContent,
9+
TooltipProvider,
10+
TooltipTrigger,
11+
} from "@/components/ui";
12+
import { CardDisplay, CardTypeSection, TreatmentSelect } from "@/components";
713
import { useToast } from "@/hooks/use-toast";
814
import { toMoxfield } from "@/lib/decklist";
915
import { DeckPricingResult, CardOption, CardType, Currency } from "@/types";
10-
import TreatmentSelect from "@/components/TreatmentSelect";
1116
import { useLocalStorage } from "@/hooks/localStorage";
1217
import { Finish } from "@/__generated__/graphql";
1318

14-
const DeckViewer = ({
19+
export const DeckViewer = ({
1520
deckResult,
1621
}: {
1722
deckResult: DeckPricingResult | null;
@@ -258,26 +263,23 @@ const DeckViewer = ({
258263
<span className="text-sm text-gray-500 dark:text-gray-400">
259264
Missing cards:
260265
</span>
261-
<span className="font-semibold">
262-
{deckResult.stats.numMissingCards}
263-
</span>
264-
</div>
265-
<div className="flex justify-between items-center">
266-
<ScrollArea className="h-72 w-48 rounded-md border">
267-
<div className="p-4">
268-
<h4 className="mb-4 text-sm font-medium leading-none">
269-
Tags
270-
</h4>
271-
{tags.map((tag) => (
272-
<>
273-
<div key={tag} className="text-sm">
274-
{tag}
275-
</div>
276-
<Separator className="my-2" />
277-
</>
278-
))}
279-
</div>
280-
</ScrollArea>
266+
<div className="flex items-center gap-1">
267+
<span className="font-semibold">
268+
{deckResult.stats.numMissingCards}
269+
</span>
270+
<TooltipProvider>
271+
<Tooltip>
272+
<TooltipTrigger>
273+
<LucideHelpCircle className="h-5 w-5 text-gray-500 dark:text-gray-400 cursor-pointer" />
274+
</TooltipTrigger>
275+
<TooltipContent className="text-center">
276+
{deckResult.stats.missingCards.map((name) => (
277+
<p key={name}>{name}</p>
278+
))}
279+
</TooltipContent>
280+
</Tooltip>
281+
</TooltipProvider>
282+
</div>
281283
</div>
282284
</Card>
283285
)}
@@ -305,5 +307,3 @@ const DeckViewer = ({
305307
</div>
306308
);
307309
};
308-
309-
export default DeckViewer;

‎src/components/TreatmentSelect.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from "@/components/ui";
99
import { CardOption } from "@/types";
1010

11-
const TreatmentSelect = ({
11+
export const TreatmentSelect = ({
1212
card,
1313
onPrintingChange,
1414
}: {
@@ -102,6 +102,4 @@ const TreatmentSelect = ({
102102
</div>
103103
</div>
104104
);
105-
};
106-
107-
export default TreatmentSelect;
105+
};

‎src/components/index.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export * from "./Banner";
2+
export * from "./CardDisplay";
3+
export * from "./CardTypeSection";
4+
export * from "./CartForm";
5+
export * from "./DeckViewer";
6+
export * from "./Footer";
7+
export * from "./Header";
8+
export * from "./Loading";
9+
export * from "./TreatmentSelect";
10+
export * from "./TypeaheadTextarea";

‎src/components/ui/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@ export * from "./card";
55
export * from "./checkbox";
66
export * from "./form";
77
export * from "./label";
8-
export * from "./scroll-area";
98
export * from "./select";
10-
export * from "./separator";
119
export * from "./textarea";
1210
export * from "./toast";
1311
export * from "./toaster";
12+
export * from "./tooltip";

‎src/components/ui/scroll-area.tsx

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎src/components/ui/separator.tsx

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎src/components/ui/tooltip.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as React from "react"
2+
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
3+
4+
import { cn } from "@/lib/utils"
5+
6+
const TooltipProvider = TooltipPrimitive.Provider
7+
8+
const Tooltip = TooltipPrimitive.Root
9+
10+
const TooltipTrigger = TooltipPrimitive.Trigger
11+
12+
const TooltipContent = React.forwardRef<
13+
React.ElementRef<typeof TooltipPrimitive.Content>,
14+
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
15+
>(({ className, sideOffset = 4, ...props }, ref) => (
16+
<TooltipPrimitive.Content
17+
ref={ref}
18+
sideOffset={sideOffset}
19+
className={cn(
20+
"z-50 overflow-hidden rounded-md border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
21+
className
22+
)}
23+
{...props}
24+
/>
25+
))
26+
TooltipContent.displayName = TooltipPrimitive.Content.displayName
27+
28+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

‎src/routes/__root.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@ import { createRootRoute, Outlet } from "@tanstack/react-router";
66

77
import { ManaqlClient } from "@/api/manaql/client";
88
import { Toaster } from "@/components/ui";
9-
import { ErrorBanner } from "@/components/Banner";
10-
import { Footer } from "@/components/Footer";
11-
import { Header } from "@/components/Header";
9+
import { ErrorBanner, Footer, Header } from "@/components";
1210

1311
const apolloClient = new ApolloClient({
1412
uri: "https://api.manaql.com",

‎src/routes/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { createFileRoute } from "@tanstack/react-router";
22

3-
import { CartForm } from "@/components/CartForm";
4-
import { ErrorBanner, InfoBanner } from "@/components/Banner";
3+
import { CartForm, ErrorBanner, InfoBanner } from "@/components";
54

65
type Params = {
76
error: string;

‎src/routes/overview.lazy.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { useEffect, useState } from "react";
22
import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
33

4-
import DeckViewer from "@/components/DeckViewer";
5-
import { Loading } from "@/components/Loading";
4+
import { DeckViewer, Loading } from "@/components";
65
import { useLocalStorage } from "@/hooks/localStorage";
76
import { BlingService } from "@/services/bling";
87
import { DeckPricingResult, Submission } from "@/types";

‎src/services/bling.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -189,9 +189,9 @@ export class BlingService {
189189
}
190190
});
191191

192-
const missingCards = submission.decklist.filter(
193-
(card) => blingMap[card.name] === undefined
194-
);
192+
const missingCards = submission.decklist
193+
.map((card) => card.name)
194+
.filter((name) => blingMap[name] === undefined);
195195

196196
return {
197197
bling: blingMap,

‎src/types/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export interface DeckPricingResult {
111111
totalCards: number;
112112
uniqueCards: number;
113113
selectedCards: number;
114-
missingCards: SubCard[];
114+
missingCards: string[];
115115
numMissingCards: number;
116116
};
117117
}

0 commit comments

Comments
 (0)