-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
2,151 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| { | ||
| "printWidth": 120, | ||
| "singleQuote": true, | ||
| "trailingComma": "all", | ||
| "trailingComma": "es5", | ||
| "tabWidth": 2, | ||
| "semi": true | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| # Playing cards svg | ||
|
|
||
| The SVG embedded in this project comes from [https://github.com/htdebeer/SVG-cards](https://github.com/htdebeer/SVG-cards), after a little optmization via [SVGOMG](https://jakearchibald.github.io/svgomg/) | ||
|
|
||
| In order to use them: | ||
|
|
||
| ```jsx | ||
| import svgCards from '[RELATIVE_PATH_TO_ASSETS]/svg-cards-optimized.svg'; | ||
|
|
||
| <svg viewBox="0 0 171 251" className={classes.svgStyle}> | ||
| <use xlinkHref={`${svgCards}#joker_black`} /> | ||
| </svg> | ||
| ``` | ||
|
|
||
| The various cards have the following names: | ||
|
|
||
| * Jokers: joker_black and joker_red | ||
| * Back card: back or alternative-back | ||
| * Picture cards: {club,diamond,heart,spade}_{king,queen,jack} | ||
| * Pip cards:{club,diamond,heart,spade}_{1,2,3,4,5,6,7,8,9,10} | ||
|
|
||
| Examples: | ||
|
|
||
| * The ace of club is `club_1`. | ||
| * The queen of diamonds is `diamond_queen`. | ||
|
|
||
| The cards have the following natural positions: | ||
|
|
||
| * width: `169.075` | ||
| * height: `244.64` | ||
| * center: `(+98.0375, +122.320)` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import React from 'react'; | ||
| import { render } from '@testing-library/react'; | ||
| import { PlayingCard } from './PlayingCard'; | ||
|
|
||
| const testCardSvg = (el: HTMLElement, pattern: string | RegExp) => | ||
| expect(el).toHaveAttribute('xlink:href', expect.stringMatching(pattern)); | ||
|
|
||
| describe('PlayingCard', () => { | ||
| it('should render correctly', () => { | ||
| const { getByTestId } = render(<PlayingCard />); | ||
| expect(getByTestId('BaseCard')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| describe('on default rendering', () => { | ||
| let frontFace: HTMLElement; | ||
| let backFace: HTMLElement; | ||
| beforeEach(() => { | ||
| const { getByTestId } = render(<PlayingCard />); | ||
| frontFace = getByTestId('PlayingCard_front_use'); | ||
| backFace = getByTestId('PlayingCard_back_use'); | ||
| }); | ||
|
|
||
| it('should default front to joker_black', () => { | ||
| testCardSvg(frontFace, /#joker_black$/i); | ||
| }); | ||
|
|
||
| it('should default front to no fill', () => { | ||
| expect(frontFace).toHaveAttribute('fill', ''); | ||
| }); | ||
|
|
||
| it('should default back to back', () => { | ||
| testCardSvg(backFace, /#back$/i); | ||
| }); | ||
|
|
||
| it('should default back to black color', () => { | ||
| expect(backFace).toHaveAttribute('fill', 'black'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('on rendering', () => { | ||
| let frontFace: HTMLElement; | ||
| let backFace: HTMLElement; | ||
| beforeEach(() => { | ||
| const { getByTestId } = render(<PlayingCard card="spade_4" backColor="red" />); | ||
| frontFace = getByTestId('PlayingCard_front_use'); | ||
| backFace = getByTestId('PlayingCard_back_use'); | ||
| }); | ||
|
|
||
| it('should render the correct card', () => { | ||
| testCardSvg(frontFace, /#spade_4$/i); | ||
| }); | ||
|
|
||
| it('should always show back as back', () => { | ||
| testCardSvg(backFace, /#back$/i); | ||
| }); | ||
|
|
||
| it('should render back as backColor property', () => { | ||
| expect(backFace).toHaveAttribute('fill', 'red'); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import React from 'react'; | ||
| import { createUseStyles } from 'react-jss'; | ||
| import svgCards from '../../../assets/svg-cards-optimized.svg'; | ||
| import { BaseCard } from '../BaseCard/BaseCard'; | ||
| import { PlayingCardType } from '../../../models/PlayingCardType'; | ||
|
|
||
| /** | ||
| * Properties for PlayingCard | ||
| */ | ||
| export interface PlayingCardProps { | ||
| /** Card to be rendered */ | ||
| card?: PlayingCardType; | ||
| /** Color to be applied to back face */ | ||
| backColor?: string; | ||
| } | ||
|
|
||
| const useStyles = createUseStyles({ | ||
| svgStyle: { | ||
| width: '100%', | ||
| }, | ||
| }); | ||
|
|
||
| export const PlayingCard: React.FC<PlayingCardProps> = ({ card = 'joker_black', backColor = 'black' }) => { | ||
| const classes = useStyles(); | ||
|
|
||
| const generateSvg = (isFront: boolean) => { | ||
| const testId = `PlayingCard_${isFront ? 'front' : 'back'}`; | ||
| return ( | ||
| <svg data-testid={testId} viewBox="0 0 171 251" className={classes.svgStyle}> | ||
| <use | ||
| data-testid={`${testId}_use`} | ||
| xlinkHref={`${svgCards}#${isFront ? card : 'back'}`} | ||
| fill={isFront ? '' : backColor} | ||
| /> | ||
| </svg> | ||
| ); | ||
| }; | ||
|
|
||
| return <BaseCard height={251} width={171} frontFace={generateSvg(true)} backFace={generateSvg(false)} />; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.