add Mugic; update definitions

src/components/Snippets/_icons.js

@@ -51,16 +51,16 @@ export function InitiativeIcon(props) {
   const { initiative } = props;
   let image = <></>;
   if (["Danian", "Generic", "Mipedian", "OverWorld", "UnderWorld", "M'arrillian"].indexOf(initiative) > -1) {
-    image = <img className="icon16" style={{ verticalAlign: 'middle' }} src={("/public/img/icons/tribes/" + initiative + ".png").toLowerCase()} />;
+    image = <img className={props.size || "icon16"} style={{ verticalAlign: 'middle' }} src={("/public/img/icons/tribes/" + initiative + ".png").toLowerCase()} />;
   }
   else if (["courage", "power", "speed", "wisdom"].indexOf(initiative.toLowerCase()) > -1) {
-    image = <img className="icon16" style={{ verticalAlign: 'middle' }} src={("/public/img/icons/disciplines/" + initiative + ".png").toLowerCase()} />;
+    image = <img className={props.size || "icon16"} style={{ verticalAlign: 'middle' }} src={("/public/img/icons/disciplines/" + initiative + ".png").toLowerCase()} />;
   }
   else if (["fire", "air", "earth", "water"].indexOf(initiative.toLowerCase()) > -1) {
-    image = <img className="icon16" style={{ verticalAlign: 'middle' }} src={("/public/img/icons/elements/" + initiative + ".png").toLowerCase()} />;
+    image = <img className={props.size || "icon16"} style={{ verticalAlign: 'middle' }} src={("/public/img/icons/elements/" + initiative + ".png").toLowerCase()} />;
   }
   else if (initiative.toLowerCase() == "mugic counter") {
-    image = <img className="icon16" style={{ verticalAlign: 'middle' }} src={("/public/img/icons/mugic/generic.png").toLowerCase()} />;
+    image = <img className={props.size || "icon16"} style={{ verticalAlign: 'middle' }} src={("/public/img/icons/mugic/generic.png").toLowerCase()} />;
   }
 
   return image;

src/components/Snippets/abilityText.js

@@ -7,30 +7,30 @@ export function abilityText(props) {
     regex: /([0-9x]*){{mc}}/i,
     fn: (key, result) => {
       if (result.length > 1 && result[1] != "") {
-        return (<MugicIcon key={key} tribe={props.tribe} amount={result[1].toLowerCase()} size="icon14" />);
+        return (<MugicIcon key={key} tribe={props.tribe} amount={result[1].toLowerCase()} size={props.size || "icon14"} />);
       }
-      return (<MugicIcon key={key} tribe={props.tribe} size="icon14" />);
+      return (<MugicIcon key={key} tribe={props.tribe} size={props.size || "icon14"} />);
     }
   };
   
   const elements = {
     regex: new RegExp(/(\b((fire)|(air)|(earth)|(water)))/i),
     fn: (key, result) => {
-      return (<span key={key}><ElementIcon element={result[0].replace(/\b/, '')} value="true" size="icon14" />{result[0]}</span>);
+      return (<span key={key}><ElementIcon element={result[0].replace(/\b/, '')} value="true" size={props.size || "icon14"} />{result[0]}</span>);
     }
   };
   
   const disciplines = {
     regex: /(courage)|(power)|(wisdom)|(speed)/i,
     fn: (key, result) => {
-      return (<span key={key}><DisciplineIcon discipline={result[0]} size="icon14" />{result[0]}</span>);
+      return (<span key={key}><DisciplineIcon discipline={result[0]} size={props.size || "icon14"} />{result[0]}</span>);
     }
   };
   
   const tribes = {
     regex: /(danian)|(generic)|(mipedian)|(overworld)|(underworld)|(m'arrillian)/i,
     fn: (key, result) => {
-      return (<span key={key}><TribeIcon tribe={result[0]} size="icon14" />{result[0]}</span>);
+      return (<span key={key}><TribeIcon tribe={result[0]} size={props.size || "icon14"} />{result[0]}</span>);
     }
   };
   

src/components/_mobile/collection/CardBase.tsx

@@ -11,7 +11,7 @@ export interface chaoticCardProps<T extends ChaoticCard> {
   ext: boolean
   stats: statsType
   hideStats: boolean
-  extend: (name: string) => void
+  extend: (card: ChaoticCard | null) => void
 }
 
 export interface CardBase<T extends ChaoticCard> {
@@ -38,7 +38,7 @@ export const CardComponent = (
           sx={{ height: "100px", width: "96px" }}
           image={API.base_image + (card.gsx$thumb||API.thumb_missing)}
           alt={`${card.gsx$name} thumb`}
-          onClick={() => extend(card.gsx$name)}
+          onClick={() => extend(card)}
         />
         <Box sx={{ marginLeft: .5, marginRight: .5, minWidth: "242px" }}>
           {left}
@@ -56,7 +56,7 @@ export const CardComponent = (
             height={loc ? "250" : "350"}
             image={API.cardImage(card)}
             alt={`${card.gsx$name} card`}
-            onClick={() => extend("")}
+            onClick={() => extend(null)}
           />
           <CardContent sx={{ 
             flex: '1 0', minWidth: "310px", 

src/components/_mobile/collection/Mugic.tsx

@@ -0,0 +1,65 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import { Mugic } from "../../common/definitions";
+import { Name, RarityIcon, TribeIcon, MugicIcon } from "../../Snippets";
+import { abilityText } from "../../Snippets/abilityText";
+import { uniqueText } from "../../Snippets/uniqueText";
+import { CardBase, CardComponent, Unique, Flavor } from "./CardBase";
+
+
+const MugicCounter = ({ card }: {card:Mugic}) => {
+  const mugicCounters = [] as JSX.Element[];
+  if (Number(card.gsx$cost) === 0) {
+    mugicCounters.push(<MugicIcon tribe={card.gsx$tribe} key={0} amount={"0"}/>);
+  }
+  else if (card.gsx$cost.toLowerCase() == 'x') {
+    mugicCounters.push(<MugicIcon tribe={card.gsx$tribe} key={0} amount={"x"}/>);
+  }
+  else {
+    if (Number(card.gsx$cost) > 5) {
+      mugicCounters.push(<MugicIcon tribe={card.gsx$tribe} key={0} amount={card.gsx$cost} />);
+    }
+    else {
+      for (let i = 0; i < Number(card.gsx$cost); i++) {
+        mugicCounters.push(<MugicIcon tribe={card.gsx$tribe} key={i} />);
+      }
+    }
+  }
+
+  return <>{mugicCounters}</>;
+};
+
+const MugicCard: CardBase<Mugic> = (props) => {
+  const { card } = props;
+  const ability = abilityText({ ability: card.gsx$ability, size: "icon16" });
+  const unique = uniqueText({ data: { unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }});
+  const flavor = card.gsx$flavortext;
+
+  return (
+    <CardComponent {...props}
+      left={<>
+        <Name name={card.gsx$name} />
+        <RarityIcon size="icon20" set={card.gsx$set} rarity={card.gsx$rarity} />
+        <Typography><TribeIcon size="icon20" tribe={card.gsx$tribe} /> Mugic - {card.gsx$tribe}</Typography>
+        <Typography><MugicCounter card={card}/></Typography>
+      </>
+      }
+      right={<>
+        <Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
+        {unique && <Unique>{unique}</Unique>}
+        {flavor && <Flavor>{flavor}</Flavor>}
+      </>}
+      content={<>
+        <Name name={card.gsx$name} />
+        <Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
+        {unique && <Unique>{unique}</Unique>}
+        {flavor && <Flavor>{flavor}</Flavor>}
+        <Typography>Art By: {card.gsx$artist}</Typography>
+        <Typography>Notes: {card.gsx$notes}</Typography>
+      </>}
+    />
+  );
+
+};
+
+export default MugicCard;

src/components/_mobile/collection/Search.tsx

@@ -1,4 +1,4 @@
-import React, { FormEvent, useEffect, useRef, useState } from 'react';
+import React, { FormEvent, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import API, { sets } from '../../SpreadsheetData/API';
 import search_api from '../../collection/search/search';
@@ -6,10 +6,10 @@ import { Loading } from '../../Snippets';
 import { Modal, Fab, Zoom, useTheme } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 
-const initInput = () => {
+const initInput = (() => {
   /* @ts-ignore */
   const cardSets: {[key in keyof typeof sets]: boolean} = {};
-  for (const key in sets) sets[key.toLowerCase()] = false;
+  for (const key in sets) cardSets[key.toLowerCase()] = false;
 
   return {
     name: "",
@@ -27,11 +27,11 @@ const initInput = () => {
     mull: { unique: false, loyal: false, legendary: false, mixed: false },
     gender: { ambiguous: false, female: false, male: false }
   };
-};
+})();
 
 const queryList = ["sets", "types", "rarity", "tribes", "elements", "mull", "gender"];
 
-const parseQuery = (input, location) => {
+const parseQuery = (input: typeof initInput, location) => {
   const queryString = location.search.toLowerCase();
 
   const query = {} as any;
@@ -75,7 +75,6 @@ const parseQuery = (input, location) => {
 const updateQuery = (input, history) => {
   let queryString = "";
 
-
   queryList.forEach(query => {
     let temp = "";
     Object.keys(input[query]).forEach((item) => {
@@ -116,12 +115,17 @@ const updateQuery = (input, history) => {
   history.push(`/collection/?${queryString}`);
 };
 
+const inputReducer = (state: typeof initInput, newState: Partial<typeof initInput>) => {
+  return { ...state, ...newState };
+};
+
 export default function Search ({ setContent, setInfo }) {
   const theme = useTheme();
   const history = useHistory();
   const location = useLocation();
   const prevLocation = useRef<any>(undefined);
-  const [input, setInput] = useState(initInput());
+  const [input, dispatchInput] = useReducer(inputReducer, initInput);
+  // const [input, setInput] = useState(() => initInput());
   const [loaded, setLoaded] = useState(false);
   const [open, setOpen] = useState(false);
 
@@ -135,17 +139,17 @@ export default function Search ({ setContent, setInfo }) {
     .catch(() => {});
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
+    
   useEffect(() => {
     if (location != prevLocation.current) {
       prevLocation.current = location;
-      setInput(parseQuery(input, location));
+      dispatchInput(parseQuery(input, location));
     }
   }, [input, location]);
 
 
   const cleanInput = () => {
-    setInput(initInput());
+    dispatchInput(initInput);
   };
 
   const handleSearch = (event?: FormEvent) => {
@@ -170,14 +174,13 @@ export default function Search ({ setContent, setInfo }) {
     const value = target.type === 'checkbox' ? target.checked : target.value;
     const { name } = target;
 
-    setInput({
-      ...input,
+    dispatchInput({
       ...((!obj) ? { [input[name]]: value } : { [input[obj][name]]: value })
     });
   };
 
   if (loaded == false) {
-    return (<Loading />);
+    return (<></>);
   }
 
   const form = (<>

src/components/_mobile/collection/index.tsx

@@ -2,10 +2,11 @@ import {
   Box, Card, Checkbox, createTheme, FormControl, FormControlLabel, InputLabel, MenuItem, Pagination, Paper, Select, SelectChangeEvent, styled, ThemeProvider, Typography
 } from '@mui/material';
 import React, { useEffect, useState } from 'react';
-import { Attack, Battlegear, Location, Card as ChaoticCard } from '../../common/definitions';
+import { Attack, Battlegear, Location, Card as ChaoticCard, Mugic } from '../../common/definitions';
 import AttackCard from './Attack';
 import BattlegearCard from './Battlegear';
 import LocationCard from './Location';
+import MugicCard from './Mugic';
 import { chaoticCardProps, statsType } from './CardBase';
 import Search from './Search';
 
@@ -58,7 +59,7 @@ export default function Collection (_props) {
   const [hideStats, setHideStats] = useState(false);
   const [content, setContent] = useState<ChaoticCard[]>([]);
   const [info, setInfo] = useState<{text?: string}>({});
-  const [selected, setSelected] = useState("");
+  const [selected, setSelected] = useState<ChaoticCard | null>(null);
 
   useEffect(() => {
     const load = localStorage.getItem("collection");
@@ -110,13 +111,12 @@ export default function Collection (_props) {
     saveSettings({ hideStats: event.target.checked.toString() });
   };
 
-  const handleExtendSingle = (name: string) => {
-    setSelected(name);
+  const handleExtendSingle = (card: ChaoticCard | null) => {
+    setSelected(card);
   };
 
   useEffect(() => {
-    console.log("refresh list");
-    setSelected("");
+    setSelected(null);
   }, [content]);
   
   return (<ThemeProvider theme={theme}>
@@ -205,23 +205,26 @@ export default function Collection (_props) {
 
 type listProps = Omit<chaoticCardProps<ChaoticCard>, "card"> & {
   cards: ChaoticCard[]
-  selected: string
+  selected: ChaoticCard | null
 }
 
 const CardList = ({ cards, selected, ext, ...props }: listProps) => {
+  const isSelected = (card: ChaoticCard) => {
+    return (selected && card.gsx$name === selected.gsx$name && card.gsx$set === selected.gsx$set);
+  };
 
   const list = cards.map((card, i) => {
     switch (card.gsx$type) {
       case "Attacks":
         return (<AttackCard key={card.gsx$name+card.gsx$set}
           card={card as Attack}  
-          ext={(card.gsx$name === selected || ext)}
+          ext={(isSelected(card) || ext)}
           {...props}
         />);
       case "Battlegear":
         return (<BattlegearCard key={card.gsx$name+card.gsx$set}
           card={card as Battlegear}
-          ext={(card.gsx$name === selected || ext)}
+          ext={(isSelected(card) || ext)}
           {...props}
         />);
       // case "Creatures":
@@ -229,11 +232,15 @@ const CardList = ({ cards, selected, ext, ...props }: listProps) => {
       case "Locations":
         return (<LocationCard key={card.gsx$name+card.gsx$set}
           card={card as Location}
-          ext={(card.gsx$name === selected || ext)}
+          ext={(isSelected(card) || ext)}
+          {...props}
+        />);
+      case "Mugic":
+        return (<MugicCard key={card.gsx$name+card.gsx$set}
+          card={card as Mugic}
+          ext={(isSelected(card) || ext)}
           {...props}
         />);
-      // case "Mugic":
-      //   return (<Mugic card={card} key={i} {...props}/>);
       default:
         return (<Card key={i}><Typography>Invalid Card Type</Typography></Card>);
     }

src/components/common/definitions.ts

@@ -12,9 +12,9 @@ export interface BaseCard {
   gsx$flavortext: string
   gsx$splash: string
   gsx$types: string
-  gsx$unique: number | string
-  gsx$legendary: number | string
-  gsx$loyal: number | string
+  gsx$unique: string
+  gsx$legendary: string
+  gsx$loyal: string
   gsx$alt?: string
   gsx$alt2?: string
   gsx$ic?: string // imgur card
@@ -23,12 +23,12 @@ export interface BaseCard {
 }
 
 export interface Attack extends BaseCard {
-  gsx$fire: number | string
-  gsx$air: number | string
-  gsx$earth: number | string
-  gsx$water: number | string
-  gsx$base: number | string
-  gsx$bp: number | string
+  gsx$fire: string
+  gsx$air: string
+  gsx$earth: string
+  gsx$water: string
+  gsx$base: string
+  gsx$bp: string
 }
 
 export interface Battlegear extends BaseCard {
@@ -37,14 +37,14 @@ export interface Battlegear extends BaseCard {
 
 export interface Creature extends BaseCard {
   gsx$tribe: string
-  gsx$courage: string | number
-  gsx$power: string | number
-  gsx$wisdom: string | number
-  gsx$speed: string | number
-  gsx$energy: string | number
+  gsx$courage: string
+  gsx$power: string
+  gsx$wisdom: string
+  gsx$speed: string
+  gsx$energy: string
   gsx$elements: string
   gsx$brainwashed: string
-  gsx$mugicability: string | number
+  gsx$mugicability: string
   gsx$avatar?: string
   gsx$subtype: string
   gsx$ia?: string // imgur avatar
@@ -57,7 +57,9 @@ export interface Location extends BaseCard {
 
 export interface Mugic extends BaseCard {
   gsx$tribe: string
-  gsx$cost: number | string
+  gsx$cost: string
+  gsx$notes: string
+  gsx$shownotes: string
 }
 
 export type Card = Attack | Battlegear | Creature | Location | Mugic;