Better wand select ui

TwoAbove · Jan 30, 2025 · a6bf8ab · a6bf8ab
1 parent 4d47ef5
commit a6bf8ab
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 61 deletions.
diff --git a/src/components/Icons/Spell.tsx b/src/components/Icons/Spell.tsx
@@ -12,24 +12,27 @@ interface ISpellProps {
   className?: string | false;
   highlight?: boolean;
   width?: string;
+  onClick?: () => void;
+  style?: React.CSSProperties;
 }
 
 const spells = new SpellInfoProvider({} as any);
 
-const Spell: FC<ISpellProps> = ({ id, className, width, highlight, ...rest }) => {
+const Spell: FC<ISpellProps> = ({ id, className, width, highlight, onClick, style, ...rest }) => {
   const [t] = useTranslation("materials");
 
   const item = spells.provide(id);
   const wikiUrl = getWikiUrl(t(item.name));
 
   return (
-    <Clickable wikiUrl={wikiUrl}>
+    <Clickable useHover wikiUrl={wikiUrl} onClick={onClick}>
       <Icon
         className={classNames(className, highlight && "shadow" && "icon-spell")}
         width={width || "2rem"}
         uri={item.sprite}
         title={t(item.name)}
         background
+        style={style}
         {...rest}
       />
     </Clickable>

diff --git a/src/components/SpellSelect.tsx b/src/components/SpellSelect.tsx
@@ -1,8 +1,7 @@
 import { FC, useContext, useEffect, useMemo, useState, useTransition } from "react";
 import { Modal, Row, Col, FormControl } from "react-bootstrap";
 import Fuse from "fuse.js";
-
-import Icon from "./Icons/Icon";
+import Spell from "./Icons/Spell";
 import Clickable from "./Icons/Clickable";
 
 import { useTranslation } from "react-i18next";
@@ -26,6 +25,7 @@ interface ISpellSelectProps {
   disabled?: boolean;
   filter?: boolean;
   strict?: boolean;
+  unique?: boolean;
 }
 
 const SpellSelect: FC<ISpellSelectProps> = ({
@@ -38,7 +38,8 @@ const SpellSelect: FC<ISpellSelectProps> = ({
   selected = [],
   disabled = false,
   filter = true,
-  strict = true,
+  strict = false,
+  unique = false,
 }) => {
   const [isPending, startTransition] = useTransition();
   const [selectedFilter, setSelectedFilter] = useState("");
@@ -67,11 +68,17 @@ const SpellSelect: FC<ISpellSelectProps> = ({
     filter && selectedFilter
       ? fuse.search(selectedFilter).map(s => s.item)
       : gameInfoProvider!.providers.spells.spellsArr
-  ).filter(s =>
-    level !== undefined && level >= 0
-      ? Object.keys(s.spawn_probabilities).includes(String(gameInfoProvider!.providers.shop.getShopLevel(level)))
-      : true,
-  );
+  ).filter(s => {
+    if (level !== undefined && level >= 0) {
+      if (!Object.keys(s.spawn_probabilities).includes(String(gameInfoProvider!.providers.shop.getShopLevel(level)))) {
+        return false;
+      }
+    }
+    if (unique && selected.includes(s.id)) {
+      return false;
+    }
+    return true;
+  });
 
   const handleFilter = e => {
     setSelectedFilter(e.target.value);
@@ -89,19 +96,19 @@ const SpellSelect: FC<ISpellSelectProps> = ({
         {isPending ? (
           <LoadingComponent />
         ) : (
-          showSelected &&
-          selected.length > 0 && (
+          showSelected && (
             <Row sm={8} className="p-3 justify-content-start align-items-center row-cols-auto">
-              {selected.map(s => {
-                const spell = gameInfoProvider!.providers.spells.spells[s];
-                return (
-                  <Col className="p-0 m-1" key={spell.id}>
-                    <Clickable useHover onClick={() => handleSelectedClicked(spell.id)}>
-                      <Icon uri={spell.sprite} alt={t(spell.description)} title={t(spell.name)} background />
-                    </Clickable>
+              {selected.length > 0 ? (
+                selected.map(s => (
+                  <Col className="p-0 m-1" key={s}>
+                    <Spell id={s} width="3rem" onClick={() => handleSelectedClicked(s)} />
                   </Col>
-                );
-              })}
+                ))
+              ) : (
+                <Col className="p-0 m-1">
+                  <Spell id="" width="3rem" />
+                </Col>
+              )}
             </Row>
           )
         )}
@@ -118,21 +125,16 @@ const SpellSelect: FC<ISpellSelectProps> = ({
           </Row>
         )}
         <Row sm={8} className="p-3 justify-content-center align-items-center row-cols-auto">
-          {spellsToShow.map(spell => {
-            return (
-              <Col className="p-0 m-1" key={spell.id}>
-                <Clickable useHover onClick={() => !disabled && handleOnClick(spell.id)}>
-                  <Icon
-                    uri={spell.sprite}
-                    alt={t(spell.description)}
-                    title={t(spell.name)}
-                    background
-                    style={disabled ? { opacity: 0.5 } : undefined}
-                  />
-                </Clickable>
-              </Col>
-            );
-          })}
+          {spellsToShow.map(spell => (
+            <Col className="p-0 m-1" key={spell.id}>
+              <Spell
+                id={spell.id}
+                width="3rem"
+                style={disabled ? { opacity: 0.5 } : undefined}
+                onClick={() => !disabled && handleOnClick(spell.id)}
+              />
+            </Col>
+          ))}
         </Row>
       </Modal.Body>
     </Modal>

diff --git a/src/components/WandSelect.tsx b/src/components/WandSelect.tsx
@@ -29,7 +29,7 @@ interface IWandSearchParams {
   };
   cards: string[];
   cardsStrict: boolean;
-  permanentCard?: string | null | true;
+  permanentCard?: string[] | null | true;
 }
 
 const sliderConfigs: Record<string, ISliderConfig> = {
@@ -229,15 +229,25 @@ const WandSelect = (props: IWandSelectProps) => {
   const handleAlwaysCastAdd = (id: string) => {
     handleParamsChange({
       ...params,
-      permanentCard: id,
+      permanentCard:
+        params.permanentCard === true || params.permanentCard === null ? [id] : [...(params.permanentCard || []), id],
     });
-    setAlwaysCastOpen(false);
   };
 
-  const handleAlwaysCastRemove = () => {
+  const handleAlwaysCastRemove = (id?: string) => {
+    if (!id) {
+      handleParamsChange({
+        ...params,
+        permanentCard: undefined,
+      });
+      return;
+    }
+
     handleParamsChange({
       ...params,
-      permanentCard: undefined,
+      permanentCard: Array.isArray(params.permanentCard)
+        ? params.permanentCard.filter(spell => spell !== id)
+        : undefined,
     });
   };
 
@@ -338,23 +348,33 @@ const WandSelect = (props: IWandSelectProps) => {
           <Col>
             {params.permanentCard !== null && (
               <div className="p-3 border border-secondary rounded mb-3">
-                <h6 className="mb-3">Always Cast</h6>
-                <div className="d-flex align-items-center">
-                  {params.permanentCard && params.permanentCard !== undefined ? (
-                    <Entity
-                      id="Spell"
-                      entityParams={{ extra: params.permanentCard }}
-                      onClick={() => setAlwaysCastOpen(true)}
-                    />
-                  ) : (
-                    <SpellSlot onClick={() => params.permanentCard !== null && setAlwaysCastOpen(true)} />
-                  )}
-                  {params.permanentCard && params.permanentCard !== undefined && (
-                    <Button variant="outline-danger" size="sm" className="ms-2" onClick={handleAlwaysCastRemove}>
-                      Clear
-                    </Button>
+                <div className="d-flex justify-content-between mb-3">
+                  <h6 className="mb-0">Always Cast</h6>
+                  <Button variant="primary" size="sm" onClick={() => setAlwaysCastOpen(true)}>
+                    Add Spells
+                  </Button>
+                </div>
+                <div className="d-flex align-items-center flex-wrap gap-2">
+                  {Array.isArray(params.permanentCard) &&
+                    params.permanentCard.map(spell => (
+                      <Entity
+                        key={spell}
+                        id="Spell"
+                        entityParams={{ extra: spell }}
+                        onClick={() => setAlwaysCastOpen(true)}
+                      />
+                    ))}
+                  {(!Array.isArray(params.permanentCard) || params.permanentCard.length === 0) && (
+                    <div className="text-muted">
+                      {params.permanentCard === true ? "Any always cast" : "No always cast spells selected"}
+                    </div>
                   )}
                 </div>
+                {Array.isArray(params.permanentCard) && params.permanentCard.length > 0 && (
+                  <Button variant="outline-danger" size="sm" className="mt-2" onClick={() => handleAlwaysCastRemove()}>
+                    Clear All
+                  </Button>
+                )}
               </div>
             )}
 
@@ -411,7 +431,7 @@ const WandSelect = (props: IWandSelectProps) => {
         show={spellSelectOpen}
         selected={params.cards}
         showSelected
-        filter={false}
+        filter={true}
         strict={params.cardsStrict}
         disabled={params.cards.length >= params.gun.deck_capacity[1]}
         handleClose={() => setSpellSelectOpen(false)}
@@ -421,7 +441,10 @@ const WandSelect = (props: IWandSelectProps) => {
 
       <SpellSelect
         show={alwaysCastOpen}
-        selected={typeof params.permanentCard === "string" ? [params.permanentCard] : []}
+        selected={Array.isArray(params.permanentCard) ? params.permanentCard : []}
+        showSelected
+        filter={true}
+        unique={true}
         handleClose={() => setAlwaysCastOpen(false)}
         handleOnClick={handleAlwaysCastAdd}
         handleSelectedClicked={handleAlwaysCastRemove}

diff --git a/src/services/SeedInfo/infoHandler/InfoProviders/Wand.ts b/src/services/SeedInfo/infoHandler/InfoProviders/Wand.ts
@@ -667,8 +667,13 @@ export class WandInfoProvider extends InfoProvider {
       if (target.permanentCard === true && !wand.cards.permanentCard) {
         return false;
       }
-      if (typeof target.permanentCard === "string" && target.permanentCard !== wand.cards.permanentCard) {
-        return false;
+      if (Array.isArray(target.permanentCard)) {
+        if (!wand.cards.permanentCard) {
+          return false;
+        }
+        if (!target.permanentCard.includes(wand.cards.permanentCard)) {
+          return false;
+        }
       }
     }
 
@@ -702,7 +707,7 @@ export interface IWandRule {
   };
   cards?: string[];
   cardsStrict: boolean;
-  permanentCard?: string | null | true;
+  permanentCard?: string[] | null | true;
 }
 
 export default WandInfoProvider;