add set number

src/components/Snippets/_icons.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import API from '../SpreadsheetData';
 
 export function AttackIcon(props) {
   const attack = "attack" + ((props.bp && props.bp >= 0) ? "_" + props.bp : "");
@@ -15,13 +14,10 @@ export function LocationIcon(props) {
 }
   
 export function RarityIcon(props) {
-  const { set, rarity, iconOnly=false } = props;
+  const { set, rarity, size } = props;
-  return (
+  return (<>{set !== 'PE1' && 
-    <span>
+    <img className={size || "icon16"} style={{ verticalAlign: 'middle' }} src={("/public/img/icons/set/" + set + "/" + rarity + ".png").toLowerCase()} />
-      {set !== 'PE1' && <img className={props.size || "icon16"} style={{ verticalAlign: 'middle' }} src={("/public/img/icons/set/" + set + "/" + rarity + ".png").toLowerCase()} />}
+  }</>);
-      {!iconOnly && <>{API.sets[props.set]}&nbsp;|&nbsp;{props.rarity}</>}
-    </span>
-  );
 }
 
 export function MugicIcon(props) {

src/components/Snippets/_text.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import API from '../SpreadsheetData';
 import { abilityText } from './abilityText';
 import { uniqueText } from './uniqueText';
-import { InitiativeIcon } from './_icons';
+import { InitiativeIcon, RarityIcon } from './_icons';
 
 export function Name(props) {
   const name = props.name.split(",");
@@ -18,6 +19,20 @@ export function Name(props) {
   </div>);
 }
 
+export function Rarity(props) {
+  const { set, rarity, id = -1 } = props;
+
+  return (
+    <div>
+      <RarityIcon {...props} />
+      {(id === -1)
+        ? (<>{API.sets[props.set]}&nbsp;|&nbsp;{props.rarity}</>)
+        : (<>{` ${API.sets[set]} `}<span style={{ fontWeight: 'bold' }}>{`# ${id}`}</span>{` | ${rarity}`}</>)
+      }
+    </div>
+  );
+}
+
 export function FlavorText({ flavortext }) {
   return (flavortext) ? <div className="flavortext">{flavortext}</div> : <></>;
 }

src/components/_mobile/collection/Attack.tsx

@@ -1,10 +1,10 @@
 import { Typography } from '@mui/material';
 import React from 'react';
 import { Attack } from "../../common/definitions";
-import { AttackIcon, ElementIcon, Name, RarityIcon } from '../../Snippets';
+import { AttackIcon, ElementIcon, Name } from '../../Snippets';
 import { abilityText } from '../../Snippets/abilityText';
 import { uniqueText } from '../../Snippets/uniqueText';
-import { CardBase, CardComponent, Flavor, Unique } from './CardBase';
+import { CardBase, CardComponent, Flavor, Unique, Rarity } from './CardBase';
 
 const AttackCard: CardBase<Attack> = (props) => {
   const { card } = props;
@@ -22,7 +22,7 @@ const AttackCard: CardBase<Attack> = (props) => {
       </>}
       left={<>
         <Name name={card.gsx$name} />
-        <RarityIcon size="icon20" set={card.gsx$set} rarity={card.gsx$rarity} />
+        <Rarity {...props} />
         <Typography><AttackIcon size="icon20" bp={card.gsx$bp} /> Attack - {card.gsx$bp}</Typography>
         <Typography>
           {`${card.gsx$base} | `}
@@ -34,6 +34,7 @@ const AttackCard: CardBase<Attack> = (props) => {
       </>}
       content={<>
         <Name name={card.gsx$name} />
+        <Rarity {...props} />
         <Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
         {unique && <Unique>{unique}</Unique>}
         {flavor && <Flavor>{flavor}</Flavor>}

src/components/_mobile/collection/Battlegear.tsx

@@ -1,10 +1,10 @@
 import { Typography } from '@mui/material';
 import React from 'react';
-import { BattlegearIcon, Name, RarityIcon } from '../../Snippets';
+import { BattlegearIcon, Name } from '../../Snippets';
 import { Battlegear } from '../../common/definitions';
 import { abilityText } from '../../Snippets/abilityText';
 import { uniqueText } from '../../Snippets/uniqueText';
-import { CardBase, CardComponent, Unique, Flavor } from './CardBase';
+import { CardBase, CardComponent, Unique, Flavor, Rarity } from './CardBase';
 
 const BattlegearCard: CardBase<Battlegear> = (props) => {
   const { card } = props;
@@ -16,7 +16,7 @@ const BattlegearCard: CardBase<Battlegear> = (props) => {
     <CardComponent {...props}
       left={<>
         <Name name={card.gsx$name} />
-        <RarityIcon size="icon20" set={card.gsx$set} rarity={card.gsx$rarity} />
+        <Rarity {...props} />
         <Typography><BattlegearIcon size="icon20"/> Battlegear{card.gsx$types.length > 0 ? ` - ${card.gsx$types}` : null}</Typography>
       </>}
       right={<>
@@ -26,6 +26,7 @@ const BattlegearCard: CardBase<Battlegear> = (props) => {
       </>}
       content={<>
         <Name name={card.gsx$name} />
+        <Rarity {...props} />
         <Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
         {unique && <Unique>{unique}</Unique>}
         {flavor && <Flavor>{flavor}</Flavor>}

src/components/_mobile/collection/CardBase.tsx

@@ -2,6 +2,7 @@ import { Box, Card, CardMedia, CardContent, Typography, styled } from '@mui/mate
 import React from 'react';
 
 import { Card as ChaoticCard } from "../../common/definitions";
+import { RarityIcon } from '../../Snippets';
 import API from '../../SpreadsheetData';
 
 export type statsType = "avg" | "min" | "max";
@@ -34,10 +35,11 @@ export const CardComponent = (
 
   return (ext === false)
     ? (
-      <Card sx={{ display: 'flex' }}>
+      <Card sx={{ display: 'flex' }} raised>
         <CardMedia
           component="img"
-          sx={{ height: "100px", width: "96px" }}
+          sx={{ width: "96px" }}
+          height="100px"
           image={API.base_image + (card.gsx$thumb||API.thumb_missing)}
           alt={`${card.gsx$name} thumb`}
           onClick={() => extend(card)}
@@ -45,7 +47,7 @@ export const CardComponent = (
         <Box sx={{ marginLeft: .5, marginRight: .5, minWidth: "242px" }}>
           {left}
         </Box>
-        <Box>
+        <Box sx={{ marginRight: "auto" }}>
           {right}
         </Box>
         {right2 && <Box>
@@ -53,7 +55,7 @@ export const CardComponent = (
         </Box>}
       </Card>
     ) : (
-      <Card>
+      <Card raised>
         <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: "flex-start" }}>
           <CardMedia
             component="img"
@@ -68,7 +70,9 @@ export const CardComponent = (
           }
           <CardContent sx={{ 
             flex: '1 0', minWidth: "310px", 
-            width: `calc(100% - ${loc ? " 350px" : "250px"})`
+            width: `calc(100% - ${loc ? " 350px" : "250px"})`,
+            paddingTop: "8px",
+            paddingBottom: 0,
           }}>
             {content}
           </CardContent>
@@ -84,3 +88,20 @@ export const Unique = styled(Typography)(() => ({
 export const Flavor = styled(Typography)(() => ({
   fontStyle: "italic"
 }));
+
+export const Rarity = (props: {card: ChaoticCard, ext: boolean}) => {
+  const { card, ext } = props;
+
+  return (!ext) ? (
+    <Typography>
+      <RarityIcon size="icon20" set={card.gsx$set} rarity={card.gsx$rarity} />
+      {` ${API.sets[card.gsx$set]} | ${card.gsx$rarity}`}
+    </Typography>
+  ) : (
+    <Typography>
+      <RarityIcon size="icon20" set={card.gsx$set} rarity={card.gsx$rarity} />
+      {` ${API.sets[card.gsx$set]} `}<span style={{ fontWeight: 'bold' }}>{`# ${card.gsx$id}`}</span>{` | ${card.gsx$rarity}`}
+    </Typography>
+  );
+};
+

src/components/_mobile/collection/Creature.tsx

@@ -1,10 +1,10 @@
 import { Typography, styled } from '@mui/material';
 import React from 'react';
 import { Creature } from "../../common/definitions";
-import { Name, RarityIcon, TribeIcon, MugicIcon, ElementIcon, DisciplineIcon } from '../../Snippets';
+import { Name, TribeIcon, MugicIcon, ElementIcon, DisciplineIcon } from '../../Snippets';
 import { abilityText } from '../../Snippets/abilityText';
 import { uniqueText } from '../../Snippets/uniqueText';
-import { CardBase, CardComponent, Unique, Flavor } from "./CardBase";
+import { CardBase, CardComponent, Unique, Flavor, Rarity } from "./CardBase";
 
 const TribeLine = ({ card }: {card: Creature}) => {
   let types = card.gsx$types;
@@ -36,8 +36,9 @@ const Brainwashed = styled(Typography)(() => ({
 }));
 
 const Stat = styled(Typography)(() => ({
-  width: "40px",
+  width: "44px",
-  lineHeight: "normal"
+  lineHeight: "normal",
+  textAlign: "right"
 }));
 
 const CreatureCard: CardBase<Creature> = (props) => {
@@ -73,7 +74,7 @@ const CreatureCard: CardBase<Creature> = (props) => {
     <CardComponent {...props} 
       left={<>
         <Name name={card.gsx$name} />
-        <RarityIcon size="icon20" set={card.gsx$set} rarity={card.gsx$rarity} />
+        <Rarity {...props} />
         <TribeLine card={card} />
         <Typography>
           <ElementIcon element="fire" value={card.gsx$elements.toLowerCase().indexOf("fire") >=0} />&nbsp;
@@ -97,7 +98,7 @@ const CreatureCard: CardBase<Creature> = (props) => {
         <Stat>{power}<DisciplineIcon discipline="power" /></Stat>
         <Stat>{wisdom}<DisciplineIcon discipline="wisdom" /></Stat>
         <Stat>{speed}<DisciplineIcon discipline="speed" /></Stat>
-        <Stat sx={{ fontWeight: "bold" }}>{energy}</Stat>
+        <Stat sx={{ fontWeight: "bold" }}>{energy}<span style={{ display: "inline-block", width: "16px" }}></span></Stat>
       </>}
       {...((!hideStats) ? { imageCover: (
         <div>
@@ -111,6 +112,7 @@ const CreatureCard: CardBase<Creature> = (props) => {
         : undefined)}
       content={<>
         <Name name={card.gsx$name} />
+        <Rarity {...props} />
         <span>{stat_range(card.gsx$courage)}&nbsp;<DisciplineIcon discipline="courage" /></span>&nbsp;
         <span>{stat_range(card.gsx$power)}&nbsp;<DisciplineIcon discipline="power" /></span>&nbsp;
         <span>{stat_range(card.gsx$wisdom)}&nbsp;<DisciplineIcon discipline="wisdom" /></span>&nbsp;

src/components/_mobile/collection/Location.tsx

@@ -1,10 +1,10 @@
 import { Typography } from '@mui/material';
 import React from 'react';
 import { Location } from '../../common/definitions';
-import { InitiativeIcon, LocationIcon, Name, RarityIcon } from '../../Snippets';
+import { InitiativeIcon, LocationIcon, Name } from '../../Snippets';
 import { abilityText } from '../../Snippets/abilityText';
 import { uniqueText } from '../../Snippets/uniqueText';
-import { CardBase, CardComponent, Unique, Flavor } from './CardBase';
+import { CardBase, CardComponent, Unique, Flavor, Rarity } from './CardBase';
 
 const LocationCard: CardBase<Location> = (props) => {
   const { card } = props;
@@ -16,7 +16,7 @@ const LocationCard: CardBase<Location> = (props) => {
     <CardComponent {...props}
       left={<>
         <Name name={card.gsx$name} />
-        <RarityIcon size="icon20" set={card.gsx$set} rarity={card.gsx$rarity} />
+        <Rarity {...props} />
         <Typography><LocationIcon size="icon20" /> Location{card.gsx$types.length > 0 ? ` - ${card.gsx$types}` : null}</Typography>
         <Typography>{`Initiative: `}<InitiativeIcon initiative={card.gsx$initiative} />{` ${card.gsx$initiative}`}</Typography>
       </>}
@@ -27,6 +27,7 @@ const LocationCard: CardBase<Location> = (props) => {
       </>}
       content={<>
         <Name name={card.gsx$name} />
+        <Rarity {...props} />
         <Typography>{`Initiative: `}<InitiativeIcon initiative={card.gsx$initiative} />{` ${card.gsx$initiative}`}</Typography>
         <Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
         {unique && <Unique>{unique}</Unique>}

src/components/_mobile/collection/Mugic.tsx

@@ -1,10 +1,10 @@
 import { Typography } from "@mui/material";
 import React from "react";
 import { Mugic } from "../../common/definitions";
-import { Name, RarityIcon, TribeIcon, MugicIcon } from "../../Snippets";
+import { Name, TribeIcon, MugicIcon } from "../../Snippets";
 import { abilityText } from "../../Snippets/abilityText";
 import { uniqueText } from "../../Snippets/uniqueText";
-import { CardBase, CardComponent, Unique, Flavor } from "./CardBase";
+import { CardBase, CardComponent, Unique, Flavor, Rarity } from "./CardBase";
 
 
 const MugicCounter = ({ card }: { card: Mugic }) => {
@@ -39,7 +39,7 @@ const MugicCard: CardBase<Mugic> = (props) => {
     <CardComponent {...props}
       left={<>
         <Name name={card.gsx$name} />
-        <RarityIcon size="icon20" set={card.gsx$set} rarity={card.gsx$rarity} />
+        <Rarity {...props} />
         <Typography><TribeIcon size="icon20" tribe={card.gsx$tribe} /> Mugic - {card.gsx$tribe}</Typography>
         <Typography><MugicCounter card={card}/></Typography>
       </>
@@ -51,6 +51,7 @@ const MugicCard: CardBase<Mugic> = (props) => {
       </>}
       content={<>
         <Name name={card.gsx$name} />
+        <Rarity {...props} />
         <Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
         {unique && <Unique>{unique}</Unique>}
         {flavor && <Flavor>{flavor}</Flavor>}

src/components/_mobile/collection/index.tsx

@@ -33,7 +33,7 @@ theme = createTheme(theme, createTheme({
         root: {
           backgroundColor: "#1F1F1F",
           color: "gray",
-          paddingLeft: theme.spacing(.5)
+          marginBottom: "4px"
         }
       }
     }
@@ -122,7 +122,11 @@ export default function Collection (_props) {
   }, [content]);
   
   return (<ThemeProvider theme={theme}>
-    <Paper square sx={{ minHeight: "100vh", height: "100%", paddingLeft: theme.spacing(1), paddingRight: theme.spacing(1) }}>
+    <Paper square sx={{ 
+      minHeight: "100vh", height: "100%", 
+      padding: theme.spacing(1),
+      // backgroundColor: "hsl(0deg 0% 97%)"
+    }}>
       <Search {...({ setContent, setInfo })} />
       <AppBar color="inherit" sx={{ paddingLeft: theme.spacing(1) }} >
         <Box sx={{

src/components/collection/types/Attack.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import API from '../../SpreadsheetData';
 import { observer, inject } from 'mobx-react';
-import { FlavorText, RarityIcon, Unique, Name, ElementIcon, Ability, AttackIcon } from '../../Snippets';
+import { FlavorText, Rarity, Unique, Name, ElementIcon, Ability, AttackIcon } from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class Attack extends React.Component {
@@ -14,7 +14,7 @@ export default class Attack extends React.Component {
         <img className="thumb" src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
         <div className="left">
           <Name name={card.gsx$name} />
-          <RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} /><br />
+          <Rarity set={card.gsx$set} rarity={card.gsx$rarity} />
           <span><AttackIcon bp={card.gsx$bp} /> Attack - {card.gsx$bp}</span><br />
           <div>
             <span className="bp bigger" >{card.gsx$base}</span> |&nbsp;
@@ -37,6 +37,7 @@ export default class Attack extends React.Component {
         <div className="fullcard"><img src={API.cardImage(card)} /></div>
         <div className="right">
           <Name name={card.gsx$name} />
+          <Rarity set={card.gsx$set} rarity={card.gsx$rarity} id={card.gsx$id} />
           <Ability ability={card.gsx$ability} />
           <Unique data={{ unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }} />
           <FlavorText flavortext={card.gsx$flavortext} />

src/components/collection/types/Battlegear.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import API from '../../SpreadsheetData';
 import { observer, inject } from 'mobx-react';
-import { FlavorText, RarityIcon, Unique, Name, Ability, BattlegearIcon } from '../../Snippets';
+import { FlavorText, Rarity, Unique, Name, Ability, BattlegearIcon } from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class Battlegear extends React.Component {
@@ -14,7 +14,7 @@ export default class Battlegear extends React.Component {
         <img className="thumb" style={{ float: 'left' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
         <div className="left">
           <Name name={card.gsx$name} />
-          <RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} /><br />
+          <Rarity set={card.gsx$set} rarity={card.gsx$rarity} />
           <span><BattlegearIcon /> Battlegear{card.gsx$types.length > 0 ? " - " + card.gsx$types : null}</span>
         </div>
         <div className="right" >
@@ -29,6 +29,7 @@ export default class Battlegear extends React.Component {
         <div className="fullcard"><img src={API.cardImage(card)} /></div>
         <div className="right" >
           <Name name={card.gsx$name} />
+          <Rarity set={card.gsx$set} rarity={card.gsx$rarity} id={card.gsx$id} />
           <Ability ability={card.gsx$ability} />
           <Unique data={{ unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }} />
           <FlavorText flavortext={card.gsx$flavortext} />

src/components/collection/types/Creature.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import API from '../../SpreadsheetData';
 import { observer, inject } from 'mobx-react';
-import { FlavorText, RarityIcon, Unique, Name, ElementIcon, MugicIcon, DisciplineIcon, Ability, TribeIcon } from '../../Snippets';
+import { FlavorText, Rarity, Unique, Name, ElementIcon, MugicIcon, DisciplineIcon, Ability, TribeIcon } from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class Creature extends React.Component {
@@ -47,7 +47,7 @@ export default class Creature extends React.Component {
         <img className="thumb" style={{ float: 'left' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
         <div className="left">
           <Name name={card.gsx$name} />
-          <RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} /><br />
+          <Rarity set={card.gsx$set} rarity={card.gsx$rarity} />
           <TribeLine /><br />
           <div>
             <ElementIcon element="fire" value={card.gsx$elements.toLowerCase().indexOf("fire") >=0} />&nbsp;
@@ -111,6 +111,7 @@ export default class Creature extends React.Component {
         </div>
         <div className="right" >
           <Name name={card.gsx$name} />
+          <Rarity set={card.gsx$set} rarity={card.gsx$rarity} id={card.gsx$id} />
           <span>{stat_range(card.gsx$courage, card.gsx$name)}&nbsp;<DisciplineIcon discipline="courage" /></span>&nbsp;
           <span>{stat_range(card.gsx$power, card.gsx$name)}&nbsp;<DisciplineIcon discipline="power" /></span>&nbsp;
           <span>{stat_range(card.gsx$wisdom, card.gsx$name)}&nbsp;<DisciplineIcon discipline="wisdom" /></span>&nbsp;

src/components/collection/types/Location.js

@@ -1,7 +1,7 @@
 import { inject, observer } from 'mobx-react';
 import React from 'react';
 
-import { Ability, FlavorText, Initiative, LocationIcon, Name, RarityIcon, Unique } from '../../Snippets';
+import { Ability, FlavorText, Initiative, LocationIcon, Name, Rarity, Unique } from '../../Snippets';
 import API from '../../SpreadsheetData';
 
 @inject((stores, props, context) => props) @observer
@@ -15,7 +15,7 @@ export default class Location extends React.Component {
         <img className="thumb" style={{ float: 'left', width: '100px', height: '98px' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
         <div className="left">
           <Name name={card.gsx$name} />
-          <RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} /><br />
+          <Rarity set={card.gsx$set} rarity={card.gsx$rarity} />
           <span><LocationIcon /> Location{card.gsx$types.length > 0 ? " - " + card.gsx$types : null}</span><br />
           <Initiative initiative={card.gsx$initiative} />
         </div>
@@ -31,6 +31,7 @@ export default class Location extends React.Component {
         <div className="fullcard"><img src={API.cardImage(card)} /></div>
         <div className="right">
           <Name name={card.gsx$name} />
+          <Rarity set={card.gsx$set} rarity={card.gsx$rarity} id={card.gsx$id} />
           <Initiative initiative={card.gsx$initiative} />
           <Ability ability={card.gsx$ability} />
           <Unique data={{ unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }} />

src/components/collection/types/Mugic.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import API from '../../SpreadsheetData';
 import { observer, inject } from 'mobx-react';
-import { FlavorText, RarityIcon, Unique, Name, MugicIcon as MugicCounter, Ability, TribeIcon } from '../../Snippets';
+import { FlavorText, Rarity, Unique, Name, MugicIcon as MugicCounter, Ability, TribeIcon } from '../../Snippets';
 import MugicPlay from '../../mugicplayer/playbutton.tsx';
 
 @inject((stores, props, context) => props) @observer
@@ -33,7 +33,7 @@ export default class Mugic extends React.Component {
         <img className="thumb" style={{ float: 'left' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
         <div className="left">
           <Name name={card.gsx$name} />
-          <RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} /> <br />
+          <Rarity set={card.gsx$set} rarity={card.gsx$rarity} />
           <TribeIcon size="icon16" tribe={card.gsx$tribe} /> Mugic - {card.gsx$tribe}<br />
           <span>{mugicCounters}</span><MugicPlay notes={card.gsx$shownotes?.length > 0 ? card.gsx$shownotes : card.gsx$notes}/><br />
         </div>
@@ -50,6 +50,7 @@ export default class Mugic extends React.Component {
         <div className="fullcard"><img src={API.cardImage(card)} /></div>
         <div className="right" >
           <Name name={card.gsx$name} />
+          <Rarity set={card.gsx$set} rarity={card.gsx$rarity} id={card.gsx$id} />
           <Ability ability={card.gsx$ability} tribe={card.gsx$tribe} />
           <Unique data={{ unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }} />
           <FlavorText flavortext={card.gsx$flavortext} />

src/components/common/definitions.ts

@@ -6,6 +6,7 @@ export interface BaseCard {
   gsx$type: CardType
   gsx$set: string
   gsx$rarity: string
+  gsx$id: string
   gsx$image: string
   gsx$thumb: string
   gsx$ability: string