diff --git a/package.json b/package.json index a1fd1fb..6c84757 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,8 @@ "dev": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", - "eject": "react-scripts eject" + "eject": "react-scripts eject", + "generate-icons": "npx @svgr/cli src/Icons/svgs" }, "eslintConfig": { "extends": [ @@ -47,6 +48,7 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@svgr/cli": "^8.1.0", "babel-plugin-styled-components": "^2.1.4", "prettier": "2.8.8" } diff --git a/src/Components/Buttons/SettingsButton.tsx b/src/Components/Buttons/SettingsButton.tsx index b11e229..5876ebe 100644 --- a/src/Components/Buttons/SettingsButton.tsx +++ b/src/Components/Buttons/SettingsButton.tsx @@ -1,6 +1,6 @@ import styled, { css } from 'styled-components/macro'; -import SettingsIcon from '../../Icons/SettingsIcon'; import { Rotation } from '../../Types/Player'; +import { Cog } from '../../Icons/generated'; export const StyledSettingsButton = styled.button<{ rotation: number }>` position: absolute; @@ -39,7 +39,7 @@ type SettingsButtonProps = { const SettingsButton = ({ onClick, rotation }: SettingsButtonProps) => { return ( - + ); }; diff --git a/src/Components/Counters/ExtraCountersBar.tsx b/src/Components/Counters/ExtraCountersBar.tsx index 895aed5..45a422a 100644 --- a/src/Components/Counters/ExtraCountersBar.tsx +++ b/src/Components/Counters/ExtraCountersBar.tsx @@ -1,12 +1,14 @@ import { CounterType, Player } from '../../Types/Player'; import ExtraCounter from '../Buttons/ExtraCounter'; -import CommanderTaxIcon from '../../Icons/CommanderTaxIcon'; -import EnergyIcon from '../../Icons/EnergyIcon'; -import ExperienceIcon from '../../Icons/ExperienceIcon'; -import PoisonIcon from '../../Icons/PoisonIcon'; -import PartnerTaxIcon from '../../Icons/PartnerTaxIcon'; import styled, { css } from 'styled-components/macro'; import { Rotation } from '../../Types/Player'; +import { + CommanderTax, + Energy, + Experience, + PartnerTax, + Poison, +} from '../../Icons/generated'; const ExtraCountersGrid = styled.div<{ rotation: number }>` display: flex; @@ -81,7 +83,7 @@ const ExtraCountersBar = ({ {player.settings.useCommanderDamage && ( } + Icon={} type={CounterType.CommanderTax} counterTotal={ player.extraCounters?.find( @@ -96,7 +98,7 @@ const ExtraCountersBar = ({ ) && ( } + Icon={} type={CounterType.PartnerTax} counterTotal={ player.extraCounters?.find( @@ -109,7 +111,7 @@ const ExtraCountersBar = ({ {player.settings.usePoison && ( } + Icon={} type={CounterType.Poison} counterTotal={ player.extraCounters?.find((counter) => counter.type === 'poison') @@ -121,7 +123,7 @@ const ExtraCountersBar = ({ {player.settings.useEnergy && ( } + Icon={} type={CounterType.Energy} counterTotal={ player.extraCounters?.find((counter) => counter.type === 'energy') @@ -133,7 +135,7 @@ const ExtraCountersBar = ({ {player.settings.useExperience && ( } + Icon={} type={CounterType.Experience} counterTotal={ player.extraCounters?.find( diff --git a/src/Components/Misc/SupportMe.tsx b/src/Components/Misc/SupportMe.tsx new file mode 100644 index 0000000..04a8441 --- /dev/null +++ b/src/Components/Misc/SupportMe.tsx @@ -0,0 +1,23 @@ +import styled from 'styled-components'; +import { theme } from '../../Data/theme'; +import { Paragraph } from './TextComponents'; + +const Footer = styled.div` + position: absolute; + bottom: 0; + width: 100%; + height: 58px; + background-color: ${theme.palette.primary.main}; + display: flex; + align-items: center; + justify-content: center; + padding: 0 16px; +`; + +export const SupportMe = () => { + return ( +
+ Support me +
+ ); +}; diff --git a/src/Components/Misc/TextComponents.tsx b/src/Components/Misc/TextComponents.tsx new file mode 100644 index 0000000..bbbec80 --- /dev/null +++ b/src/Components/Misc/TextComponents.tsx @@ -0,0 +1,10 @@ +import styled from 'styled-components'; +import { theme } from '../../Data/theme'; + +export const Paragraph = styled.p` + color: ${theme.palette.text.primary}; +`; + +export const H2 = styled.h2` + color: ${theme.palette.text.primary}; +`; diff --git a/src/Components/PlayerMenu/Settings.tsx b/src/Components/PlayerMenu/Settings.tsx index 273835b..3fa0de7 100644 --- a/src/Components/PlayerMenu/Settings.tsx +++ b/src/Components/PlayerMenu/Settings.tsx @@ -1,11 +1,8 @@ import { Checkbox } from '@mui/material'; import { Player, Rotation } from '../../Types/Player'; -import ExperienceIcon from '../../Icons/ExperienceIcon'; -import PartnerTaxIcon from '../../Icons/PartnerTaxIcon'; -import EnergyIcon from '../../Icons/EnergyIcon'; -import PoisonIcon from '../../Icons/PoisonIcon'; import { useWakeLock } from 'react-screen-wake-lock'; import styled, { css } from 'styled-components/macro'; +import { Energy, Experience, PartnerTax, Poison } from '../../Icons/generated'; type SettingsProps = { player: Player; @@ -181,19 +178,19 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => { name="usePartner" checked={player.settings.usePartner} icon={ - } checkedIcon={ - } onChange={handleSettingsChange} @@ -206,14 +203,19 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => { name="usePoison" checked={player.settings.usePoison} icon={ - + } checkedIcon={ - } onChange={handleSettingsChange} @@ -225,14 +227,19 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => { name="useEnergy" checked={player.settings.useEnergy} icon={ - + } checkedIcon={ - } onChange={handleSettingsChange} @@ -244,19 +251,19 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => { name="useExperience" checked={player.settings.useExperience} icon={ - } checkedIcon={ - } onChange={handleSettingsChange} diff --git a/src/Components/Views/StartMenu/LayoutOptions.tsx b/src/Components/Views/StartMenu/LayoutOptions.tsx index 774d046..44ee976 100644 --- a/src/Components/Views/StartMenu/LayoutOptions.tsx +++ b/src/Components/Views/StartMenu/LayoutOptions.tsx @@ -2,18 +2,20 @@ import React from 'react'; import styled from 'styled-components/macro'; import { GridTemplateAreas } from '../../../Data/GridTemplateAreas'; import { FormControlLabel, Radio, RadioGroup } from '@mui/material'; -import OnePlayerLandscape from '../../../Icons/Layouts/OnePlayerLandscape'; -import OnePlayerPortrait from '../../../Icons/Layouts/OnePlayerPortrait'; -import TwoPlayersOppositeLandscape from '../../../Icons/Layouts/TwoPlayersOppositeLandscape'; -import TwoPlayersOppositePortrait from '../../../Icons/Layouts/TwoPlayersOppositePortrait'; -import TwoPlayersSameSide from '../../../Icons/Layouts/TwoPlayersSameSide'; -import FivePlayers from '../../../Icons/Layouts/FivePlayers'; -import FourPlayers from '../../../Icons/Layouts/FourPlayers'; -import FourPlayersSide from '../../../Icons/Layouts/FourPlayersSide'; -import ThreePlayers from '../../../Icons/Layouts/ThreePlayers'; -import ThreePlayersSide from '../../../Icons/Layouts/ThreePlayersSide'; -import SixPlayers from '../../../Icons/Layouts/SixPlayers'; import { theme } from '../../../Data/theme'; +import { + OnePlayerPortrait, + TwoPlayersOppositeLandscape, + TwoPlayersOppositePortrait, + ThreePlayers, + ThreePlayersSide, + FourPlayers, + FourPlayersSide, + FivePlayers, + SixPlayers, + TwoPlayersSameSide, +} from '../../../Icons/generated/Layouts'; +import OnePlayerLandscape from '../../../Icons/generated/Layouts/OnePlayerLandscape'; const LayoutWrapper = styled.div` flex-direction: row; @@ -33,6 +35,8 @@ const LayoutOptions: React.FC = ({ onChange, }) => { const iconSize = '33vmin'; + const iconHeight = '33vmin'; + const iconWidth = '20vmin'; const renderLayoutOptions = () => { switch (numberOfPlayers) { @@ -45,14 +49,16 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } TouchRippleProps={{ style: { display: 'none' } }} @@ -66,14 +72,16 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } TouchRippleProps={{ style: { display: 'none' } }} @@ -92,14 +100,16 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } TouchRippleProps={{ style: { display: 'none' } }} @@ -113,14 +123,16 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } TouchRippleProps={{ style: { display: 'none' } }} @@ -134,14 +146,16 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } TouchRippleProps={{ style: { display: 'none' } }} @@ -160,14 +174,16 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } TouchRippleProps={{ style: { display: 'none' } }} @@ -181,14 +197,16 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } TouchRippleProps={{ style: { display: 'none' } }} @@ -208,14 +226,16 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } TouchRippleProps={{ style: { display: 'none' } }} @@ -229,14 +249,16 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } TouchRippleProps={{ style: { display: 'none' } }} @@ -256,14 +278,16 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } TouchRippleProps={{ style: { display: 'none' } }} @@ -277,14 +301,16 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } TouchRippleProps={{ style: { display: 'none' } }} @@ -304,14 +330,16 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } TouchRippleProps={{ style: { display: 'none' } }} @@ -325,14 +353,16 @@ const LayoutOptions: React.FC = ({ } checkedIcon={ } TouchRippleProps={{ style: { display: 'none' } }} diff --git a/src/Components/Views/StartMenu/StartMenu.tsx b/src/Components/Views/StartMenu/StartMenu.tsx index 92030ee..eee8c19 100644 --- a/src/Components/Views/StartMenu/StartMenu.tsx +++ b/src/Components/Views/StartMenu/StartMenu.tsx @@ -9,11 +9,8 @@ import { } from '../../../Data/getInitialPlayers'; import { Player } from '../../../Types/Player'; import LayoutOptions from './LayoutOptions'; -import { theme } from '../../../Data/theme'; - -const H2 = styled.h2` - color: ${theme.palette.text.primary}; -`; +import { SupportMe } from '../../Misc/SupportMe'; +import { H2 } from '../../Misc/TextComponents'; const MainWrapper = styled.div` width: 100vw; @@ -209,6 +206,7 @@ const Start = ({ Start Game + {/* */} ); }; diff --git a/src/Icons/Layouts/FivePlayers.tsx b/src/Icons/Layouts/FivePlayers.tsx deleted file mode 100644 index 23a3754..0000000 --- a/src/Icons/Layouts/FivePlayers.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { useState } from 'react'; -import { IconProps } from '../../Types/Icon'; - -const FivePlayers = ({ size, color, active }: IconProps) => { - const [isChecked, setIsChecked] = useState(active || false); - - const handleRadioClick = () => { - setIsChecked(!isChecked); - }; - - return ( -
- -
- ); -}; - -export default FivePlayers; diff --git a/src/Icons/Layouts/FivePlayersSide.tsx b/src/Icons/Layouts/FivePlayersSide.tsx deleted file mode 100644 index 5fa5261..0000000 --- a/src/Icons/Layouts/FivePlayersSide.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { useState } from 'react'; -import { IconProps } from '../../Types/Icon'; - -const FivePlayersSide = ({ size, color, active }: IconProps) => { - const [isChecked, setIsChecked] = useState(active || false); - - const handleRadioClick = () => { - setIsChecked(!isChecked); - }; - - return ( -
- -
- ); -}; - -export default FivePlayersSide; diff --git a/src/Icons/Layouts/FourPlayers.tsx b/src/Icons/Layouts/FourPlayers.tsx deleted file mode 100644 index 1441281..0000000 --- a/src/Icons/Layouts/FourPlayers.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { useState } from 'react'; -import { IconProps } from '../../Types/Icon'; - -const FourPlayers = ({ size, color, active }: IconProps) => { - const [isChecked, setIsChecked] = useState(active || false); - - const handleRadioClick = () => { - setIsChecked(!isChecked); - }; - - return ( -
- -
- ); -}; - -export default FourPlayers; diff --git a/src/Icons/Layouts/FourPlayersSide.tsx b/src/Icons/Layouts/FourPlayersSide.tsx deleted file mode 100644 index 95ae2a9..0000000 --- a/src/Icons/Layouts/FourPlayersSide.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { useState } from 'react'; -import { IconProps } from '../../Types/Icon'; - -const FourPlayersSide = ({ size, color, active }: IconProps) => { - const [isChecked, setIsChecked] = useState(active || false); - - const handleRadioClick = () => { - setIsChecked(!isChecked); - }; - - return ( -
- -
- ); -}; - -export default FourPlayersSide; diff --git a/src/Icons/Layouts/OnePlayerLandscape.tsx b/src/Icons/Layouts/OnePlayerLandscape.tsx deleted file mode 100644 index 7e0db5e..0000000 --- a/src/Icons/Layouts/OnePlayerLandscape.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { useState } from 'react'; -import { IconProps } from '../../Types/Icon'; - -const OnePlayerLandscape = ({ size, color, active }: IconProps) => { - const [isChecked, setIsChecked] = useState(active || false); - - const handleRadioClick = () => { - setIsChecked(!isChecked); - }; - - return ( -
- -
- ); -}; - -export default OnePlayerLandscape; diff --git a/src/Icons/Layouts/OnePlayerPortrait.tsx b/src/Icons/Layouts/OnePlayerPortrait.tsx deleted file mode 100644 index 197a3a7..0000000 --- a/src/Icons/Layouts/OnePlayerPortrait.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { useState } from 'react'; -import { IconProps } from '../../Types/Icon'; - -const OnePlayerPortrait = ({ size, color, active }: IconProps) => { - const [isChecked, setIsChecked] = useState(active || false); - - const handleRadioClick = () => { - setIsChecked(!isChecked); - }; - - return ( -
- -
- ); -}; - -export default OnePlayerPortrait; diff --git a/src/Icons/Layouts/SixPlayers.tsx b/src/Icons/Layouts/SixPlayers.tsx deleted file mode 100644 index 4f13313..0000000 --- a/src/Icons/Layouts/SixPlayers.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { useState } from 'react'; -import { IconProps } from '../../Types/Icon'; - -const SixPlayers = ({ size, color, active }: IconProps) => { - const [isChecked, setIsChecked] = useState(active || false); - - const handleRadioClick = () => { - setIsChecked(!isChecked); - }; - - return ( -
- -
- ); -}; - -export default SixPlayers; diff --git a/src/Icons/Layouts/SixPlayersSide.tsx b/src/Icons/Layouts/SixPlayersSide.tsx deleted file mode 100644 index 7f22bfd..0000000 --- a/src/Icons/Layouts/SixPlayersSide.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { useState } from 'react'; -import { IconProps } from '../../Types/Icon'; - -const SixPlayersSide = ({ size, color, active }: IconProps) => { - const [isChecked, setIsChecked] = useState(active || false); - - const handleRadioClick = () => { - setIsChecked(!isChecked); - }; - - return ( -
- -
- ); -}; - -export default SixPlayersSide; diff --git a/src/Icons/Layouts/ThreePlayers.tsx b/src/Icons/Layouts/ThreePlayers.tsx deleted file mode 100644 index c5c24e6..0000000 --- a/src/Icons/Layouts/ThreePlayers.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { useState } from 'react'; -import { IconProps } from '../../Types/Icon'; - -const ThreePlayers = ({ size, color, active }: IconProps) => { - const [isChecked, setIsChecked] = useState(active || false); - - const handleRadioClick = () => { - setIsChecked(!isChecked); - }; - - return ( -
- -
- ); -}; - -export default ThreePlayers; diff --git a/src/Icons/Layouts/ThreePlayersSide.tsx b/src/Icons/Layouts/ThreePlayersSide.tsx deleted file mode 100644 index bddf6a3..0000000 --- a/src/Icons/Layouts/ThreePlayersSide.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { useState } from 'react'; -import { IconProps } from '../../Types/Icon'; - -const ThreePlayersSide = ({ size, color, active }: IconProps) => { - const [isChecked, setIsChecked] = useState(active || false); - - const handleRadioClick = () => { - setIsChecked(!isChecked); - }; - - return ( -
- -
- ); -}; - -export default ThreePlayersSide; diff --git a/src/Icons/Layouts/TwoPlayersOppositeLandscape.tsx b/src/Icons/Layouts/TwoPlayersOppositeLandscape.tsx deleted file mode 100644 index 05072d9..0000000 --- a/src/Icons/Layouts/TwoPlayersOppositeLandscape.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { useState } from 'react'; -import { IconProps } from '../../Types/Icon'; - -const TwoPlayerOppositeLandscape = ({ size, color, active }: IconProps) => { - const [isChecked, setIsChecked] = useState(active || false); - - const handleRadioClick = () => { - setIsChecked(!isChecked); - }; - - return ( -
- -
- ); -}; - -export default TwoPlayerOppositeLandscape; diff --git a/src/Icons/Layouts/TwoPlayersOppositePortrait.tsx b/src/Icons/Layouts/TwoPlayersOppositePortrait.tsx deleted file mode 100644 index 9aa7c1a..0000000 --- a/src/Icons/Layouts/TwoPlayersOppositePortrait.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { useState } from 'react'; -import { IconProps } from '../../Types/Icon'; - -const TwoPlayersOppositePortrait = ({ size, color, active }: IconProps) => { - const [isChecked, setIsChecked] = useState(active || false); - - const handleRadioClick = () => { - setIsChecked(!isChecked); - }; - - return ( -
- -
- ); -}; - -export default TwoPlayersOppositePortrait; diff --git a/src/Icons/Layouts/TwoPlayersSameSide.tsx b/src/Icons/Layouts/TwoPlayersSameSide.tsx deleted file mode 100644 index 37741b9..0000000 --- a/src/Icons/Layouts/TwoPlayersSameSide.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { useState } from 'react'; -import { IconProps } from '../../Types/Icon'; - -const TwoPlayersSameSide = ({ size, color, active }: IconProps) => { - const [isChecked, setIsChecked] = useState(active || false); - - const handleRadioClick = () => { - setIsChecked(!isChecked); - }; - - return ( -
- -
- ); -}; - -export default TwoPlayersSameSide; diff --git a/src/Icons/PoisonIcon.tsx b/src/Icons/PoisonIcon.tsx deleted file mode 100644 index 0e0a321..0000000 --- a/src/Icons/PoisonIcon.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { IconProps } from '../Types/Icon'; - -const PoisonIcon = ({ color, size, opacity, showStroke }: IconProps) => { - return ( -
- - - - - -
- ); -}; - -export default PoisonIcon; diff --git a/src/Icons/generated/Cog.tsx b/src/Icons/generated/Cog.tsx new file mode 100644 index 0000000..9ed9ace --- /dev/null +++ b/src/Icons/generated/Cog.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const Cog = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + ); +}; +Cog.propTypes = { + title: PropTypes.string, +}; +export default Cog; diff --git a/src/Icons/generated/CommanderTax.tsx b/src/Icons/generated/CommanderTax.tsx new file mode 100644 index 0000000..12941fb --- /dev/null +++ b/src/Icons/generated/CommanderTax.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const CommanderTax = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + ); +}; +CommanderTax.propTypes = { + title: PropTypes.string, +}; +export default CommanderTax; diff --git a/src/Icons/generated/Energy.tsx b/src/Icons/generated/Energy.tsx new file mode 100644 index 0000000..99663ea --- /dev/null +++ b/src/Icons/generated/Energy.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const Energy = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + ); +}; +Energy.propTypes = { + title: PropTypes.string, +}; +export default Energy; diff --git a/src/Icons/generated/Experience.tsx b/src/Icons/generated/Experience.tsx new file mode 100644 index 0000000..a965c10 --- /dev/null +++ b/src/Icons/generated/Experience.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const Experience = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + ); +}; +Experience.propTypes = { + title: PropTypes.string, +}; +export default Experience; diff --git a/src/Icons/generated/Layouts/FivePlayers.tsx b/src/Icons/generated/Layouts/FivePlayers.tsx new file mode 100644 index 0000000..7858d84 --- /dev/null +++ b/src/Icons/generated/Layouts/FivePlayers.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const FivePlayers = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + ); +}; +FivePlayers.propTypes = { + title: PropTypes.string, +}; +export default FivePlayers; diff --git a/src/Icons/generated/Layouts/FivePlayersSide.tsx b/src/Icons/generated/Layouts/FivePlayersSide.tsx new file mode 100644 index 0000000..e69ed70 --- /dev/null +++ b/src/Icons/generated/Layouts/FivePlayersSide.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const FivePlayersSide = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + ); +}; +FivePlayersSide.propTypes = { + title: PropTypes.string, +}; +export default FivePlayersSide; diff --git a/src/Icons/generated/Layouts/FourPlayers.tsx b/src/Icons/generated/Layouts/FourPlayers.tsx new file mode 100644 index 0000000..ae88e04 --- /dev/null +++ b/src/Icons/generated/Layouts/FourPlayers.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const FourPlayers = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + ); +}; +FourPlayers.propTypes = { + title: PropTypes.string, +}; +export default FourPlayers; diff --git a/src/Icons/generated/Layouts/FourPlayersSide.tsx b/src/Icons/generated/Layouts/FourPlayersSide.tsx new file mode 100644 index 0000000..269dd6d --- /dev/null +++ b/src/Icons/generated/Layouts/FourPlayersSide.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const FourPlayersSide = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + ); +}; +FourPlayersSide.propTypes = { + title: PropTypes.string, +}; +export default FourPlayersSide; diff --git a/src/Icons/generated/Layouts/OnePlayerLandscape.tsx b/src/Icons/generated/Layouts/OnePlayerLandscape.tsx new file mode 100644 index 0000000..ec3f21c --- /dev/null +++ b/src/Icons/generated/Layouts/OnePlayerLandscape.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const OnePlayerLandscape = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + ); +}; +OnePlayerLandscape.propTypes = { + title: PropTypes.string, +}; +export default OnePlayerLandscape; diff --git a/src/Icons/generated/Layouts/OnePlayerPortrait.tsx b/src/Icons/generated/Layouts/OnePlayerPortrait.tsx new file mode 100644 index 0000000..476d40e --- /dev/null +++ b/src/Icons/generated/Layouts/OnePlayerPortrait.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const OnePlayerPortrait = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + ); +}; +OnePlayerPortrait.propTypes = { + title: PropTypes.string, +}; +export default OnePlayerPortrait; diff --git a/src/Icons/generated/Layouts/SixPlayers.tsx b/src/Icons/generated/Layouts/SixPlayers.tsx new file mode 100644 index 0000000..c1d6f2c --- /dev/null +++ b/src/Icons/generated/Layouts/SixPlayers.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const SixPlayers = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + ); +}; +SixPlayers.propTypes = { + title: PropTypes.string, +}; +export default SixPlayers; diff --git a/src/Icons/generated/Layouts/SixPlayersSide.tsx b/src/Icons/generated/Layouts/SixPlayersSide.tsx new file mode 100644 index 0000000..74f6b32 --- /dev/null +++ b/src/Icons/generated/Layouts/SixPlayersSide.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const SixPlayersSide = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + ); +}; +SixPlayersSide.propTypes = { + title: PropTypes.string, +}; +export default SixPlayersSide; diff --git a/src/Icons/generated/Layouts/ThreePlayers.tsx b/src/Icons/generated/Layouts/ThreePlayers.tsx new file mode 100644 index 0000000..0f57eb6 --- /dev/null +++ b/src/Icons/generated/Layouts/ThreePlayers.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const ThreePlayers = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + ); +}; +ThreePlayers.propTypes = { + title: PropTypes.string, +}; +export default ThreePlayers; diff --git a/src/Icons/generated/Layouts/ThreePlayersSide.tsx b/src/Icons/generated/Layouts/ThreePlayersSide.tsx new file mode 100644 index 0000000..e62a3f2 --- /dev/null +++ b/src/Icons/generated/Layouts/ThreePlayersSide.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const ThreePlayersSide = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + ); +}; +ThreePlayersSide.propTypes = { + title: PropTypes.string, +}; +export default ThreePlayersSide; diff --git a/src/Icons/generated/Layouts/TwoPlayersOppositeLandscape.tsx b/src/Icons/generated/Layouts/TwoPlayersOppositeLandscape.tsx new file mode 100644 index 0000000..0deb412 --- /dev/null +++ b/src/Icons/generated/Layouts/TwoPlayersOppositeLandscape.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const TwoPlayersOppositeLandscape = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + ); +}; +TwoPlayersOppositeLandscape.propTypes = { + title: PropTypes.string, +}; +export default TwoPlayersOppositeLandscape; diff --git a/src/Icons/generated/Layouts/TwoPlayersOppositePortrait.tsx b/src/Icons/generated/Layouts/TwoPlayersOppositePortrait.tsx new file mode 100644 index 0000000..42610fd --- /dev/null +++ b/src/Icons/generated/Layouts/TwoPlayersOppositePortrait.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const TwoPlayersOppositePortrait = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + ); +}; +TwoPlayersOppositePortrait.propTypes = { + title: PropTypes.string, +}; +export default TwoPlayersOppositePortrait; diff --git a/src/Icons/generated/Layouts/TwoPlayersSameSide.tsx b/src/Icons/generated/Layouts/TwoPlayersSameSide.tsx new file mode 100644 index 0000000..260ef58 --- /dev/null +++ b/src/Icons/generated/Layouts/TwoPlayersSameSide.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const TwoPlayersSameSide = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + ); +}; +TwoPlayersSameSide.propTypes = { + title: PropTypes.string, +}; +export default TwoPlayersSameSide; diff --git a/src/Icons/generated/Layouts/index.ts b/src/Icons/generated/Layouts/index.ts new file mode 100644 index 0000000..503e262 --- /dev/null +++ b/src/Icons/generated/Layouts/index.ts @@ -0,0 +1,13 @@ +export { default as FivePlayers } from './FivePlayers'; +export { default as FivePlayersSide } from './FivePlayersSide'; +export { default as FourPlayers } from './FourPlayers'; +export { default as FourPlayersSide } from './FourPlayersSide'; +export { default as OnePlayerLandscape } from './OnePlayerLandscape'; +export { default as OnePlayerPortrait } from './OnePlayerPortrait'; +export { default as SixPlayers } from './SixPlayers'; +export { default as SixPlayersSide } from './SixPlayersSide'; +export { default as ThreePlayers } from './ThreePlayers'; +export { default as ThreePlayersSide } from './ThreePlayersSide'; +export { default as TwoPlayersOppositeLandscape } from './TwoPlayersOppositeLandscape'; +export { default as TwoPlayersOppositePortrait } from './TwoPlayersOppositePortrait'; +export { default as TwoPlayersSameSide } from './TwoPlayersSameSide'; diff --git a/src/Icons/generated/PartnerTax.tsx b/src/Icons/generated/PartnerTax.tsx new file mode 100644 index 0000000..cbf0ec4 --- /dev/null +++ b/src/Icons/generated/PartnerTax.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const PartnerTax = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + + ); +}; +PartnerTax.propTypes = { + title: PropTypes.string, +}; +export default PartnerTax; diff --git a/src/Icons/generated/Poison.tsx b/src/Icons/generated/Poison.tsx new file mode 100644 index 0000000..bb66603 --- /dev/null +++ b/src/Icons/generated/Poison.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const Poison = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + ); +}; +Poison.propTypes = { + title: PropTypes.string, +}; +export default Poison; diff --git a/src/Icons/generated/Support/BmcLogo.tsx b/src/Icons/generated/Support/BmcLogo.tsx new file mode 100644 index 0000000..59148eb --- /dev/null +++ b/src/Icons/generated/Support/BmcLogo.tsx @@ -0,0 +1,50 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +import PropTypes from 'prop-types'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const BmcLogo = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + + + + ); +}; +BmcLogo.propTypes = { + title: PropTypes.string, +}; +export default BmcLogo; diff --git a/src/Icons/generated/Support/index.ts b/src/Icons/generated/Support/index.ts new file mode 100644 index 0000000..6a74678 --- /dev/null +++ b/src/Icons/generated/Support/index.ts @@ -0,0 +1 @@ +export { default as BmcLogo } from './BmcLogo'; diff --git a/src/Icons/generated/index.ts b/src/Icons/generated/index.ts new file mode 100644 index 0000000..e6bdb20 --- /dev/null +++ b/src/Icons/generated/index.ts @@ -0,0 +1,6 @@ +export { default as Cog } from './Cog'; +export { default as CommanderTax } from './CommanderTax'; +export { default as Energy } from './Energy'; +export { default as Experience } from './Experience'; +export { default as PartnerTax } from './PartnerTax'; +export { default as Poison } from './Poison'; diff --git a/src/Icons/SettingsIcon.tsx b/src/Icons/svgs/Cog.svg similarity index 57% rename from src/Icons/SettingsIcon.tsx rename to src/Icons/svgs/Cog.svg index c9f65cf..8f707cf 100644 --- a/src/Icons/SettingsIcon.tsx +++ b/src/Icons/svgs/Cog.svg @@ -1,22 +1,12 @@ -import { IconProps } from '../Types/Icon'; - -const SettingsIcon = ({ color, size, opacity, showStroke }: IconProps) => { - return ( -
- - - + + - - -
- ); -}; - -export default SettingsIcon; + /> + + \ No newline at end of file diff --git a/src/Icons/CommanderTaxIcon.tsx b/src/Icons/svgs/CommanderTax.svg similarity index 68% rename from src/Icons/CommanderTaxIcon.tsx rename to src/Icons/svgs/CommanderTax.svg index 14c1303..bda0ae3 100644 --- a/src/Icons/CommanderTaxIcon.tsx +++ b/src/Icons/svgs/CommanderTax.svg @@ -1,19 +1,9 @@ -import { IconProps } from '../Types/Icon'; - -const CommanderTaxIcon = ({ size, color, opacity, showStroke }: IconProps) => { - return ( -
- CommanderTaxIcon { className="s0" d="m159.9 351.8c-11.4 0.3-22.5 0.7-33.2 1.2-10.6 0.6-20.8 1.3-30.5 1.8-9.6 0.5-18.8 0.6-27.2 0.5-8.4-0.6-16.1-1.6-23-3.4-6.9-2.3-12.9-5.5-18.1-9.5-5-4.7-9.1-10.4-12.2-16.9-3.1-7.1-5.2-15-6.3-23.4-1.1-8.8-1.2-17.9-0.4-27.1 0.8-9.2 2.4-17.7 4.7-25.3 2.2-7.4 5.2-13.9 8.8-19.5 3.6-5.3 7.8-9.9 12.8-13.6 4.8-3.7 10.5-6.9 16.8-9.5 6.4-2.9 13.6-5.4 21.5-7.6 7.9-2.4 16.6-4.6 26-6.5 9.4-2.1 19.4-3.8 29.9-5 10.6-1.3 21.7-2 33-2 11.3 0 22.4 0.7 33 2 10.5 1.2 20.6 2.9 30 5 9.4 1.9 18.2 4.1 26.2 6.5 7.9 2.3 15.2 4.8 21.7 7.6 6.4 2.7 12.2 5.8 17.1 9.5 5.1 3.8 9.4 8.3 12.9 13.7 3.7 5.5 6.7 12.1 8.9 19.5 2.3 7.7 3.8 16.2 4.5 25.3 0.7 9.2 0.4 18.3-0.9 27.1-1.3 8.4-3.6 16.2-6.8 23.3-3.4 6.4-7.8 11.9-13.1 16.4-5.5 3.9-11.8 6.9-19 9.1-7.3 1.6-15.4 2.6-24.1 3-8.8 0.1-18.3-0.1-28.2-0.5-10-0.4-20.5-0.9-31.4-1.3-10.8-0.3-22-0.5-33.4-0.4z" /> - -
- ); -}; - -export default CommanderTaxIcon; + \ No newline at end of file diff --git a/src/Icons/EnergyIcon.tsx b/src/Icons/svgs/Energy.svg similarity index 79% rename from src/Icons/EnergyIcon.tsx rename to src/Icons/svgs/Energy.svg index 22ab654..e86d308 100644 --- a/src/Icons/EnergyIcon.tsx +++ b/src/Icons/svgs/Energy.svg @@ -1,26 +1,11 @@ -import { IconProps } from '../Types/Icon'; - -const EnergyIcon = ({ color, size, opacity, showStroke }: IconProps) => { - return ( -
- - -
- ); -}; - -export default EnergyIcon; + \ No newline at end of file diff --git a/src/Icons/ExperienceIcon.tsx b/src/Icons/svgs/Experience.svg similarity index 67% rename from src/Icons/ExperienceIcon.tsx rename to src/Icons/svgs/Experience.svg index d783ff5..a5a1b32 100644 --- a/src/Icons/ExperienceIcon.tsx +++ b/src/Icons/svgs/Experience.svg @@ -1,26 +1,11 @@ -import { IconProps } from '../Types/Icon'; - -const ExperienceIcon = ({ color, size, opacity, showStroke }: IconProps) => { - return ( -
- - -
- ); -}; - -export default ExperienceIcon; + \ No newline at end of file diff --git a/src/Icons/svgs/FivePlayers.svg b/src/Icons/svgs/Layouts/FivePlayers.svg similarity index 100% rename from src/Icons/svgs/FivePlayers.svg rename to src/Icons/svgs/Layouts/FivePlayers.svg diff --git a/src/Icons/svgs/FivePlayersSide.svg b/src/Icons/svgs/Layouts/FivePlayersSide.svg similarity index 100% rename from src/Icons/svgs/FivePlayersSide.svg rename to src/Icons/svgs/Layouts/FivePlayersSide.svg diff --git a/src/Icons/svgs/FourPlayers.svg b/src/Icons/svgs/Layouts/FourPlayers.svg similarity index 100% rename from src/Icons/svgs/FourPlayers.svg rename to src/Icons/svgs/Layouts/FourPlayers.svg diff --git a/src/Icons/svgs/FourPlayersSide.svg b/src/Icons/svgs/Layouts/FourPlayersSide.svg similarity index 100% rename from src/Icons/svgs/FourPlayersSide.svg rename to src/Icons/svgs/Layouts/FourPlayersSide.svg diff --git a/src/Icons/svgs/OnePlayerLandscape.svg b/src/Icons/svgs/Layouts/OnePlayerLandscape.svg similarity index 100% rename from src/Icons/svgs/OnePlayerLandscape.svg rename to src/Icons/svgs/Layouts/OnePlayerLandscape.svg diff --git a/src/Icons/svgs/OnePlayerPortrait.svg b/src/Icons/svgs/Layouts/OnePlayerPortrait.svg similarity index 100% rename from src/Icons/svgs/OnePlayerPortrait.svg rename to src/Icons/svgs/Layouts/OnePlayerPortrait.svg diff --git a/src/Icons/svgs/SixPlayers.svg b/src/Icons/svgs/Layouts/SixPlayers.svg similarity index 100% rename from src/Icons/svgs/SixPlayers.svg rename to src/Icons/svgs/Layouts/SixPlayers.svg diff --git a/src/Icons/svgs/SixPlayersSide.svg b/src/Icons/svgs/Layouts/SixPlayersSide.svg similarity index 100% rename from src/Icons/svgs/SixPlayersSide.svg rename to src/Icons/svgs/Layouts/SixPlayersSide.svg diff --git a/src/Icons/svgs/ThreePlayers.svg b/src/Icons/svgs/Layouts/ThreePlayers.svg similarity index 100% rename from src/Icons/svgs/ThreePlayers.svg rename to src/Icons/svgs/Layouts/ThreePlayers.svg diff --git a/src/Icons/svgs/ThreePlayersSide.svg b/src/Icons/svgs/Layouts/ThreePlayersSide.svg similarity index 100% rename from src/Icons/svgs/ThreePlayersSide.svg rename to src/Icons/svgs/Layouts/ThreePlayersSide.svg diff --git a/src/Icons/svgs/TwoPlayersOppositeLandscape.svg b/src/Icons/svgs/Layouts/TwoPlayersOppositeLandscape.svg similarity index 100% rename from src/Icons/svgs/TwoPlayersOppositeLandscape.svg rename to src/Icons/svgs/Layouts/TwoPlayersOppositeLandscape.svg diff --git a/src/Icons/svgs/TwoPlayersOppositePortrait.svg b/src/Icons/svgs/Layouts/TwoPlayersOppositePortrait.svg similarity index 100% rename from src/Icons/svgs/TwoPlayersOppositePortrait.svg rename to src/Icons/svgs/Layouts/TwoPlayersOppositePortrait.svg diff --git a/src/Icons/svgs/TwoPlayersSameSide-svg.svg b/src/Icons/svgs/Layouts/TwoPlayersSameSide.svg similarity index 100% rename from src/Icons/svgs/TwoPlayersSameSide-svg.svg rename to src/Icons/svgs/Layouts/TwoPlayersSameSide.svg diff --git a/src/Icons/PartnerTaxIcon.tsx b/src/Icons/svgs/PartnerTax.svg similarity index 71% rename from src/Icons/PartnerTaxIcon.tsx rename to src/Icons/svgs/PartnerTax.svg index 2816de6..df62b86 100644 --- a/src/Icons/PartnerTaxIcon.tsx +++ b/src/Icons/svgs/PartnerTax.svg @@ -1,18 +1,8 @@ -import { IconProps } from '../Types/Icon'; - -const PartnerTaxIcon = ({ size, color, opacity, showStroke }: IconProps) => { - return ( -
- { -126 10z" /> - -
- ); -}; - -export default PartnerTaxIcon; + \ No newline at end of file diff --git a/src/Icons/svgs/Poison.svg b/src/Icons/svgs/Poison.svg new file mode 100644 index 0000000..9bf30a7 --- /dev/null +++ b/src/Icons/svgs/Poison.svg @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/src/Icons/svgs/Support/bmc-logo.svg b/src/Icons/svgs/Support/bmc-logo.svg new file mode 100644 index 0000000..5ba6db9 --- /dev/null +++ b/src/Icons/svgs/Support/bmc-logo.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/svgr.config.js b/svgr.config.js new file mode 100644 index 0000000..f5df7bf --- /dev/null +++ b/svgr.config.js @@ -0,0 +1,26 @@ +module.exports = { + template: require('./template'), + titleProp: true, + svgProps: { + height: '{props.size || 16}', + width: '{props.size || 16}', + }, + svgoConfig: { + plugins: [ + { + name: 'preset-default', + params: { + overrides: { + inlineStyles: { + onlyMatchedOnce: false, + }, + removeDoctype: false, + removeViewBox: true, + }, + }, + }, + ], + }, + typescript: true, + outDir: './src/Icons/generated', +}; diff --git a/template.js b/template.js new file mode 100644 index 0000000..8014f05 --- /dev/null +++ b/template.js @@ -0,0 +1,36 @@ +const propTypesTemplate = ( + { imports, interfaces, componentName, props, jsx, exports }, + { tpl } +) => { + const title = componentName.split('Svg')[1]; + + interfaces[0].body.body.push({ + type: 'TSPropertySignature', + key: { type: 'Identifier', name: 'size' }, + typeAnnotation: { + type: 'TSTypeAnnotation', + typeAnnotation: { + type: 'TSStringKeyword', + }, + }, + initializer: null, + optional: true, + }); + + return tpl`${imports} + +import PropTypes from 'prop-types'; +${interfaces} + +const ${title} = (${props}) => { + return ${jsx}; +} + +${title}.propTypes = { + title: PropTypes.string, +}; + +export default ${title}`; +}; + +module.exports = propTypesTemplate;