MtgIcon.tsx

import React, { memo } from "react";
import styled from "styled-components";

export type Size = "2x" | "3x" | "4x" | "5x" | "6x";

type BasicMana = "w" | "u" | "b" | "r" | "g" | "c" | "s";

type HybridMana =
	| "wu"
	| "wb"
	| "ub"
	| "ur"
	| "br"
	| "bg"
	| "rg"
	| "rw"
	| "gw"
	| "gu"
	| "2w"
	| "2u"
	| "2b"
	| "2r"
	| "2g";

type PhyrexianMana = "p" | "wp" | "up" | "bp" | "rp" | "gp";

type GenericMana =
	| "0"
	| "1"
	| "2"
	| "3"
	| "4"
	| "5"
	| "6"
	| "7"
	| "8"
	| "9"
	| "10"
	| "11"
	| "12"
	| "13"
	| "14"
	| "15"
	| "16"
	| "17"
	| "18"
	| "19"
	| "20"
	| "x"
	| "y"
	| "z"
	| "1-2"
	| "infinity"
	| "100"
	| "1000000"
	| "e";

type CardSymbol =
	| "tap"
	| "untap"
	| "tap-alt"
	| "chaos"
	| "artifact"
	| "creature"
	| "enchantment"
	| "instant"
	| "land"
	| "planeswalker"
	| "sorcery"
	| "multiple"
	| "flashback"
	| "loyalty-up"
	| "loyalty-down"
	| "loyalty-zero"
	| "loyalty-start"
	| "dfc-day"
	| "dfc-night"
	| "dfc-spark"
	| "dfc-ignite"
	| "dfc-moon"
	| "dfc-emrakul"
	| "dfc-enchantment"
	| "power"
	| "toughness"
	| "artist-brush"
	| "artist-nib";

type GuildSymbol =
	| "guild-azorius"
	| "guild-boros"
	| "guild-dimir"
	| "guild-golgari"
	| "guild-gruul"
	| "guild-izzet"
	| "guild-orzhov"
	| "guild-rakdos"
	| "guild-selesnya"
	| "guild-simic";

type ClanSymbol =
	| "clan-abzan"
	| "clan-jeskai"
	| "clan-mardu"
	| "clan-sultai"
	| "clan-temur"
	| "clan-atarka"
	| "clan-dromoka"
	| "clan-kolaghan"
	| "clan-ojutai"
	| "clan-silumgar";

type PolisSymbol = "polis-setessa" | "polis-akros" | "polis-meletis";

type AbilitySymbol = "ability-adventure";

export type IconType =
	| BasicMana
	| HybridMana
	| PhyrexianMana
	| GenericMana
	| CardSymbol
	| GuildSymbol
	| ClanSymbol
	| PolisSymbol
	| AbilitySymbol;

const DEFAULT_LABELS = {
	w: "white",
	u: "blue",
	b: "black",
	r: "red",
	g: "green",
	c: "colorless",
};

interface Props {
	type: IconType;
	cost?: boolean;
	shadow?: boolean;
	half?: boolean;
	size?: Size;
	fixedWidth?: boolean;
	role?: string;
	"aria-label"?: string;
}

const Icon = styled.i``;

const MtgIcon: React.FC<Props> = ({
	type,
	cost,
	shadow,
	half,
	size,
	fixedWidth,
	role = "img",
	"aria-label": ariaLabel,
}) => {
	const className = ["ms ms-" + type];
	if (cost !== false) {
		className.push("ms-cost");
	}
	if (shadow) {
		className.push("ms-shadow");
	}
	if (half) {
		className.push("ms-half");
	}
	if (size) {
		className.push("ms-" + size);
	}
	if (fixedWidth) {
		className.push("ms-fw");
	}
	return (
		<Icon
			className={className.join(" ")}
			role={role}
			aria-label={ariaLabel ?? DEFAULT_LABELS[type] ?? type}
		/>
	);
};

export default memo(MtgIcon);