feat: add support for templates quantity. Add scryfall link in templa…

…tes modal. Closes #512

src/components/SearchBar/SearchBar.tsx

@@ -25,12 +25,13 @@ const countUpToString = (count: number) => {
 const SearchBar: React.FC<Props> = ({ onHomepage, className }: Props) => {
   const router = useRouter();
   const inputRef = useRef<HTMLInputElement>(null);
-  const countUpRef = useRef<number>(20000);
+  const initialCount = 20000;
+  const countUpRef = useRef<number>(initialCount);
 
   const [mobileMenuIsOpen, setMobileMenuIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState(router.query.q);
-  const [cookies, setCookies] = useCookies(["variantCount"])
-  const [variantCount, setVariantCount] = useState<number>(20000)
+  const [cookies, setCookies] = useCookies(["variantCount"]);
+  const [variantCount, setVariantCount] = useState<number>(initialCount);
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -41,8 +42,10 @@ const SearchBar: React.FC<Props> = ({ onHomepage, className }: Props) => {
 
   const handleCountUp = () => {
     if (!inputRef.current) return;
-    if (countUpRef.current < 25000) {
-      countUpRef.current +=  Math.floor(Math.random() * (200 - 100 + 1)) + 100;
+    const target = (cookies.variantCount ?? 25000);
+    if (countUpRef.current < target) {
+      const increment = (target - initialCount) / 50;
+      countUpRef.current +=  Math.floor((1 + Math.random()) * increment);
       inputRef.current.placeholder = `Search ${countUpToString(countUpRef.current)} EDH combos`;
       setTimeout(handleCountUp, 50);
     } else if (cookies.variantCount) {
@@ -106,7 +109,7 @@ const SearchBar: React.FC<Props> = ({ onHomepage, className }: Props) => {
             id="search-bar-input"
             type="text"
             className={`${styles.mainSearchInput} ${
-              onHomepage ? "text-2xl text-center" : "pl-8 -ml-6"
+              onHomepage ? "text-2xl text-center" : "pl-8 -ml-6 text-white"
             }`}
           />
         </div>

src/components/combo/TemplateCard/ScryfallResultsModal/ScryfallResultsModal.tsx

@@ -5,16 +5,18 @@ import edhrecService from "services/edhrec.service";
 import { ScryfallCard } from "@scryfall/api-types";
 import TextWithMagicSymbol from "components/layout/TextWithMagicSymbol/TextWithMagicSymbol";
 import {getScryfallImage} from "lib/getScryfallImage";
+import ExternalLink from "components/layout/ExternalLink/ExternalLink";
 
 type Props = {
   scryfallApiUrl: string
+  quantity?: number
+  scryfallQuery?: string
   textTrigger?: React.ReactNode
   count?: number
   title?: string
 }
 
-const TEST = "https://api.scryfall.com/cards/search?order=cmc&q=c%3Ared+pow%3D3"
-const ScryfallResultsModal: React.FC<Props> = ({ scryfallApiUrl, textTrigger, count, title }: Props) => {
+const ScryfallResultsModal: React.FC<Props> = ({ scryfallApiUrl, textTrigger, count, title, scryfallQuery, quantity }: Props) => {
   const [loading, setLoading] = useState(false)
   const [isOpen, setIsOpen] = useState(false)
   const [nextUrl, setNextUrl] = useState<string | null>(null)
@@ -58,6 +60,8 @@ const ScryfallResultsModal: React.FC<Props> = ({ scryfallApiUrl, textTrigger, co
       >
         {loading && <Dimmer loading/>}
         {title && <h2 className="text-center text-2xl font-bold mb-8"><TextWithMagicSymbol text={"Scryfall results for “" + title + "”"}/></h2>}
+        {quantity && quantity > 1 && <h3 className="text-center font-bold mb-8 underline">Quantity Needed: {quantity}</h3>}
+        {scryfallQuery && <ExternalLink href={"https://scryfall.com/search?q=" + encodeURIComponent(scryfallQuery + " legal:commander")} className="text-center block mb-8">View on Scryfall</ExternalLink>}
         <div className="flex flex-wrap gap-3 justify-center">
           {results.map((result) => (
             <a href={edhrecService.getCardUrl(result.name)} target="_blank" rel="noopener noreferrer" key={result.id}>

src/components/combo/TemplateCard/TemplateCard.tsx

@@ -32,13 +32,22 @@ const TemplateCard = ({template, className, imgClassName}: Props) => {
   return (
     <div className="relative">
       <div className={`rounded-xl ${className ?? ''}`} style={{backgroundColor: '#404040'}}>
-        <div className="absolute -top-5 text-center w-full text-white font-bold text-[16px] p-7"><TextWithMagicSymbol text={template.template.name}/></div>
+        <div className="absolute -top-5 text-center w-full text-white font-bold text-[16px] p-7">
+          <TextWithMagicSymbol text={template.template.name}/>
+          {template.quantity > 1 && <span className="text-[16px]"> (x{template.quantity})</span>}
+        </div>
         <div className="absolute top-[60px] flex flex-col justify-center w-full items-center z-10">
           {loading ? <Loader/> : <ScryfallResultsWheel cards={results}/>}
         </div>
         <div className="absolute -bottom-1 flex flex-col justify-center w-full items-center">
           {/*<div className="text-center w-full font-bold italic text-gray-400">{loading ? <Loader/> : `${resultCount} legal cards`}</div>*/}
-          <ScryfallResultsModal count={resultCount} scryfallApiUrl={template.template.scryfallApi} title={template.template.name}/>
+          <ScryfallResultsModal
+            count={resultCount}
+            scryfallApiUrl={template.template.scryfallApi}
+            scryfallQuery={template.template.scryfallQuery}
+            title={template.template.name}
+            quantity={template.quantity}
+          />
         </div>
         <img className={`opacity-10 ${imgClassName ?? ''}`} src={cardBack.src} alt="MTG Card Back"/>
       </div>

src/lib/types.ts

@@ -44,6 +44,7 @@ export type Template = {
   graveyardCardState: string,
   battlefieldCardState: string,
   mustBeCommander: boolean,
+  quantity: number,
 }
 
 export type Feature = {