From 406906e6616fb8991e3763e9f96ff8de2bbfb980 Mon Sep 17 00:00:00 2001 From: Luca Micieli Date: Wed, 17 Feb 2021 00:06:44 +0100 Subject: [PATCH] feat(app-board): add rule card images --- .../src/assets/images/cards/rule-card-1.svg | 110 ++++ .../src/assets/images/cards/rule-card-2.svg | 139 +++++ .../src/assets/images/cards/rule-card-3.svg | 494 ++++++++++++++++++ .../src/assets/images/cards/rule-card-4.svg | 187 +++++++ .../src/assets/images/cards/rule-card-5.svg | 238 +++++++++ .../ExpandableRule/ExpandableRule.tsx | 4 +- .../RulesOverlay/RulesOverlay.styled.tsx | 6 + .../components/RulesOverlay/RulesOverlay.tsx | 33 +- 8 files changed, 1203 insertions(+), 8 deletions(-) create mode 100644 packages/game-app/src/assets/images/cards/rule-card-1.svg create mode 100644 packages/game-app/src/assets/images/cards/rule-card-2.svg create mode 100644 packages/game-app/src/assets/images/cards/rule-card-3.svg create mode 100644 packages/game-app/src/assets/images/cards/rule-card-4.svg create mode 100644 packages/game-app/src/assets/images/cards/rule-card-5.svg diff --git a/packages/game-app/src/assets/images/cards/rule-card-1.svg b/packages/game-app/src/assets/images/cards/rule-card-1.svg new file mode 100644 index 00000000..088761cf --- /dev/null +++ b/packages/game-app/src/assets/images/cards/rule-card-1.svg @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + + + ? + ? + ? + ? + ? + + A Developer + Deploy to + Production + Commits Code + + + diff --git a/packages/game-app/src/assets/images/cards/rule-card-2.svg b/packages/game-app/src/assets/images/cards/rule-card-2.svg new file mode 100644 index 00000000..63f1b945 --- /dev/null +++ b/packages/game-app/src/assets/images/cards/rule-card-2.svg @@ -0,0 +1,139 @@ + + + + + + + + + + + + + + + ? + + ? + + + + ? + + ? + + + ? + + Code is Merged to + + Trunk (Master) + + Build Release + + Candidate + + Deploy to + + Production + + + + diff --git a/packages/game-app/src/assets/images/cards/rule-card-3.svg b/packages/game-app/src/assets/images/cards/rule-card-3.svg new file mode 100644 index 00000000..ae89145c --- /dev/null +++ b/packages/game-app/src/assets/images/cards/rule-card-3.svg @@ -0,0 +1,494 @@ + + + + + + + + + diff --git a/packages/game-app/src/assets/images/cards/rule-card-4.svg b/packages/game-app/src/assets/images/cards/rule-card-4.svg new file mode 100644 index 00000000..66a53466 --- /dev/null +++ b/packages/game-app/src/assets/images/cards/rule-card-4.svg @@ -0,0 +1,187 @@ + + + + + + + + + + + + + + + + ? + ? + + ? + + + + + DeployStep + + + + SystemTest + A Step Marked + A Step Marked + System Test + Deploy + + + diff --git a/packages/game-app/src/assets/images/cards/rule-card-5.svg b/packages/game-app/src/assets/images/cards/rule-card-5.svg new file mode 100644 index 00000000..6ba396ef --- /dev/null +++ b/packages/game-app/src/assets/images/cards/rule-card-5.svg @@ -0,0 +1,238 @@ + + + + + + + + + + + + A Step Marked + Package + + + ? + ? + + ? + + + + + + + + + + + + + + + + Package + + + + + + + + + + + + + + + DeployStep + A Step Marked + Deploy + + + + diff --git a/packages/game-app/src/gameView/components/ExpandableRule/ExpandableRule.tsx b/packages/game-app/src/gameView/components/ExpandableRule/ExpandableRule.tsx index 085bcfd6..9e3efa99 100644 --- a/packages/game-app/src/gameView/components/ExpandableRule/ExpandableRule.tsx +++ b/packages/game-app/src/gameView/components/ExpandableRule/ExpandableRule.tsx @@ -24,9 +24,7 @@ const ExpandableRule: React.FC = ({ title, children }) => { - - {children} - + {children} ); diff --git a/packages/game-app/src/gameView/components/RulesOverlay/RulesOverlay.styled.tsx b/packages/game-app/src/gameView/components/RulesOverlay/RulesOverlay.styled.tsx index 85401e1c..816457a0 100644 --- a/packages/game-app/src/gameView/components/RulesOverlay/RulesOverlay.styled.tsx +++ b/packages/game-app/src/gameView/components/RulesOverlay/RulesOverlay.styled.tsx @@ -26,3 +26,9 @@ export const RulesContainer = styled.div` `; RulesContainer.displayName = 'RulesContainer'; + +export const RuleMainImage = styled.div` + svg { + max-width: 100%; + } +`; diff --git a/packages/game-app/src/gameView/components/RulesOverlay/RulesOverlay.tsx b/packages/game-app/src/gameView/components/RulesOverlay/RulesOverlay.tsx index 94f6bc29..651f68bb 100644 --- a/packages/game-app/src/gameView/components/RulesOverlay/RulesOverlay.tsx +++ b/packages/game-app/src/gameView/components/RulesOverlay/RulesOverlay.tsx @@ -1,9 +1,14 @@ import React from 'react'; import { Box, Button, GlassOverlay, Typography } from '@pipeline/components'; -import { RulesContainer, RulesOverlayContent } from './RulesOverlay.styled'; +import { RuleMainImage, RulesContainer, RulesOverlayContent } from './RulesOverlay.styled'; import { useTranslate } from '@pipeline/i18n'; import { ReactComponent as ArrowIcon } from '@assets/icons/back-arrow-default.svg'; import { ReactComponent as ArrowHoverIcon } from '@assets/icons/back-arrow-hover.svg'; +import { ReactComponent as Rule1Image } from '@assets/images/cards/rule-card-1.svg'; +import { ReactComponent as Rule2Image } from '@assets/images/cards/rule-card-2.svg'; +import { ReactComponent as Rule3Image } from '@assets/images/cards/rule-card-3.svg'; +import { ReactComponent as Rule4Image } from '@assets/images/cards/rule-card-4.svg'; +import { ReactComponent as Rule5Image } from '@assets/images/cards/rule-card-5.svg'; import ExpandableRule from '../ExpandableRule'; import useCards from '../../hooks/useCards'; import { CardType } from '@pipeline/common'; @@ -13,12 +18,24 @@ type Props = { close: () => void; }; +const images = { + '51xgsF43n5iaMNLkxGs1': , + '51xgsF43n5iaMNLkxGs2': , + '51xgsF43n5iaMNLkxGs3': ( + + + + ), + '51xgsF43n5iaMNLkxGs5': , + '51xgsF43n5iaMNLkxGs6': , +}; + const RulesOverlay: React.FC = ({ isOpen, close }) => { const t = useTranslate(); const { cards: ruleCards } = useCards(CardType.GameRule); - const firstGroup = ruleCards.slice(0, Math.floor(ruleCards.length / 2)); - const secondGroup = ruleCards.slice(Math.floor(ruleCards.length / 2)); + const firstGroup = ruleCards.slice(0, Math.ceil(ruleCards.length / 2)); + const secondGroup = ruleCards.slice(Math.ceil(ruleCards.length / 2)); return ( @@ -40,14 +57,20 @@ const RulesOverlay: React.FC = ({ isOpen, close }) => { {firstGroup.map(card => ( - {card.content} + {images[card.id as keyof typeof images] && ( + {images[card.id as keyof typeof images]} + )} + {card.content} ))} {secondGroup.map(card => ( - {card.content} + {images[card.id as keyof typeof images] && ( + {images[card.id as keyof typeof images]} + )} + {card.content} ))}