add set number

2026-03-22 01:34:20 -05:00 · 2021-11-23 17:54:21 -05:00 · 2021-11-23 17:54:21 -05:00 · 100d34e704
commit 100d34e704
parent 0e0aa1d341
15 changed files with 92 additions and 44 deletions
--- a/src/components/Snippets/_icons.js
+++ b/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;
-  return (
-    <span>
-      {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>
-  );
+  const { set, rarity, size } = props;
+  return (<>{set !== 'PE1' && 
+    <img className={size || "icon16"} style={{ verticalAlign: 'middle' }} src={("/public/img/icons/set/" + set + "/" + rarity + ".png").toLowerCase()} />
+  }</>);
 }

 export function MugicIcon(props) {
--- a/src/components/Snippets/_text.js
+++ b/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> : <></>;
 }
--- a/src/components/_mobile/collection/Attack.tsx
+++ b/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>}
--- a/src/components/_mobile/collection/Battlegear.tsx
+++ b/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>}
--- a/src/components/_mobile/collection/CardBase.tsx
+++ b/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>
+  );
+};
+
--- a/src/components/_mobile/collection/Creature.tsx
+++ b/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",
-  lineHeight: "normal"
+  width: "44px",
+  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;
--- a/src/components/_mobile/collection/Location.tsx
+++ b/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>}
--- a/src/components/_mobile/collection/Mugic.tsx
+++ b/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>}
--- a/src/components/_mobile/collection/index.tsx
+++ b/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={{
--- a/src/components/collection/types/Attack.js
+++ b/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} />
--- a/src/components/collection/types/Battlegear.js
+++ b/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} />
--- a/src/components/collection/types/Creature.js
+++ b/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;
--- a/src/components/collection/types/Location.js
+++ b/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 }} />
--- a/src/components/collection/types/Mugic.js
+++ b/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} />
--- a/src/components/common/definitions.ts
+++ b/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