From 752ea0d4f92d3358cd4b362cc71ee22ddb1c0702 Mon Sep 17 00:00:00 2001 From: Chris Date: Tue, 25 Feb 2020 13:01:12 +1000 Subject: [PATCH] King --- components/Faces.jsx | 23 +++++++++++++++++++++++ components/index.js | 2 ++ graphics/King.jsx | 31 +++++++++++++++++++++++++++++++ graphics/index.js | 2 ++ stories/01_Card.stories.js | 14 +++++++++++--- 5 files changed, 69 insertions(+), 3 deletions(-) create mode 100644 components/Faces.jsx create mode 100644 graphics/King.jsx diff --git a/components/Faces.jsx b/components/Faces.jsx new file mode 100644 index 0000000..1d6e020 --- /dev/null +++ b/components/Faces.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { + King, +} from '../graphics' + +const useStyles = makeStyles(theme => ({ + maxIconSize: { + maxHeight: 100, + maxWidth: 100, + margin: 4 + } +})); + +export default function Faces() { + const classes = useStyles(); + const color = '#212121' + return ( + + + + ); +} \ No newline at end of file diff --git a/components/index.js b/components/index.js index 05e3a4c..cdc77eb 100644 --- a/components/index.js +++ b/components/index.js @@ -3,6 +3,7 @@ import Dropdown from "./Dropdown"; import Icons from "./Icons"; import Ranks from "./Ranks"; import Suits from "./Suits"; +import Faces from "./Faces"; export { ButtonExamples, @@ -10,4 +11,5 @@ export { Icons, Ranks, Suits, + Faces, }; diff --git a/graphics/King.jsx b/graphics/King.jsx new file mode 100644 index 0000000..0736fb6 --- /dev/null +++ b/graphics/King.jsx @@ -0,0 +1,31 @@ +import React from 'react'; + +const makeGraphic = (props, svg) => { + return ( + + + {svg} + + + ) +} + +export default function King(props) { + let c = `#000`; + let s = `S`; + const { color, suit } = props; + if (color) c = color + if (suit) s = suit + return makeGraphic(props, + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/graphics/index.js b/graphics/index.js index bf50c03..9d2e228 100644 --- a/graphics/index.js +++ b/graphics/index.js @@ -6,6 +6,7 @@ import IconHeart from "./suitIcons/IconHeart"; import IconClub from "./suitIcons/IconClub"; import RankSymbol from "./RankSymbol"; import SuitSymbol from "./SuitSymbol"; +import King from "./King"; export { Firestore, @@ -16,4 +17,5 @@ export { IconClub, RankSymbol, SuitSymbol, + King, }; diff --git a/stories/01_Card.stories.js b/stories/01_Card.stories.js index 2775f6a..de8a9d9 100644 --- a/stories/01_Card.stories.js +++ b/stories/01_Card.stories.js @@ -3,15 +3,23 @@ import { Ranks, Suits, } from "../components"; +import { + King +} from "../graphics"; export default { title: 'Cards', } -export const Suit_Symbols = () => ( +export const King_ = () => ( + +) + +export const Suits_ = () => ( ) -export const Rank_Symbols = () => ( +export const Ranks_ = () => ( -) \ No newline at end of file +) +