diff --git a/.vscode/settings.json b/.vscode/settings.json index 30fd9ac7..6e729704 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,6 +8,7 @@ "figtree", "hookform", "Korps", + "Landsknechte", "LFTF", "Mapbox", "merc", diff --git a/src/components/generic/FlagCircle/FlagCircle.module.scss b/src/components/generic/FlagCircle/FlagCircle.module.scss new file mode 100644 index 00000000..08715622 --- /dev/null +++ b/src/components/generic/FlagCircle/FlagCircle.module.scss @@ -0,0 +1,31 @@ +@use "/src/style/variables"; + +.FlagCircle { + flex-shrink: 0; + + aspect-ratio: 1; + width: 100%; + + border-radius: 100%; + + // A normal border pushes the background image 1px away from the edges giving the circle "flat sides" + box-shadow: inset var(--border-color-default) 0 0 0 1px; +} + +.FlagCircleCustom { + background-color: transparent; + background-repeat: no-repeat; + background-size: cover; + + &[data-code="xx-lkt"] { + background-image: url("./customFlags/1x1/xx-lkt.svg"); + } + + &[data-code="xx-mrc"] { + background-color: black; + } + + &[data-code="xx-prt"] { + background-image: url("./customFlags/1x1/xx-prt.svg"); + } +} diff --git a/src/components/generic/FlagCircle/FlagCircle.scss b/src/components/generic/FlagCircle/FlagCircle.scss deleted file mode 100644 index d4dd77a2..00000000 --- a/src/components/generic/FlagCircle/FlagCircle.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use "/src/style/variables"; - -.FlagCircle { - flex-shrink: 0; - - aspect-ratio: 1; - width: 100%; - - border-radius: 100%; - - // A normal border pushes the background image 1px away from the edges giving the circle "flat sides" - box-shadow: inset var(--border-color-default) 0 0 0 1px; -} - -.FlagCircle-merc { - background-color: yellow; -} diff --git a/src/components/generic/FlagCircle/FlagCircle.tsx b/src/components/generic/FlagCircle/FlagCircle.tsx index 45022d3c..bed5aef5 100644 --- a/src/components/generic/FlagCircle/FlagCircle.tsx +++ b/src/components/generic/FlagCircle/FlagCircle.tsx @@ -1,7 +1,13 @@ import clsx from 'clsx'; import '/node_modules/flag-icons/css/flag-icons.min.css'; -import './FlagCircle.scss'; +import styles from './FlagCircle.module.scss'; + +const customCodes = [ + 'xx-lkt', + 'xx-mrc', + 'xx-prt', +]; export interface FlagCircleProps { className?: string; @@ -12,16 +18,17 @@ export const FlagCircle = ({ className, code, }: FlagCircleProps): JSX.Element => { - if (code === 'merc') { + if (customCodes.includes(code)) { return (
); } return ( ); }; diff --git a/src/components/generic/FlagCircle/customFlags/1x1/xx-lkt.svg b/src/components/generic/FlagCircle/customFlags/1x1/xx-lkt.svg new file mode 100644 index 00000000..d44c9823 --- /dev/null +++ b/src/components/generic/FlagCircle/customFlags/1x1/xx-lkt.svg @@ -0,0 +1,638 @@ + + + diff --git a/src/components/generic/FlagCircle/customFlags/1x1/xx-prt.svg b/src/components/generic/FlagCircle/customFlags/1x1/xx-prt.svg new file mode 100644 index 00000000..200f0b45 --- /dev/null +++ b/src/components/generic/FlagCircle/customFlags/1x1/xx-prt.svg @@ -0,0 +1,77 @@ + + + diff --git a/src/components/generic/FlagCircle/customFlags/4x3/xx-lkt.svg b/src/components/generic/FlagCircle/customFlags/4x3/xx-lkt.svg new file mode 100644 index 00000000..810d4301 --- /dev/null +++ b/src/components/generic/FlagCircle/customFlags/4x3/xx-lkt.svg @@ -0,0 +1,640 @@ + + + diff --git a/src/components/generic/FlagCircle/customFlags/4x3/xx-prt.svg b/src/components/generic/FlagCircle/customFlags/4x3/xx-prt.svg new file mode 100644 index 00000000..d4b76814 --- /dev/null +++ b/src/components/generic/FlagCircle/customFlags/4x3/xx-prt.svg @@ -0,0 +1,65 @@ + + + diff --git a/src/utils/common/getCountryName.ts b/src/utils/common/getCountryName.ts index e8c65463..7c8d67b9 100644 --- a/src/utils/common/getCountryName.ts +++ b/src/utils/common/getCountryName.ts @@ -1,13 +1,20 @@ import { country, subdivision } from 'iso-3166-2'; export const getCountryName = (code: string): string | undefined => { - if (code === 'merc') { + if (code === 'xx-lkt') { + return 'Landsknechte'; + } + if (code === 'xx-mrc') { return 'Mercenaries'; - } else { - if (code.includes('-')) { - return subdivision(code)?.name; - } else { - return country(code)?.name; - } } + if (code === 'xx-prt') { + return 'Pirates'; + } + if (code === 'un') { + return 'United Nations'; + } + if (code.includes('-')) { + return subdivision(code)?.name; + } + return country(code)?.name; }; diff --git a/src/utils/common/getCountryOptions.ts b/src/utils/common/getCountryOptions.ts index f3680e57..9bd9c0a8 100644 --- a/src/utils/common/getCountryOptions.ts +++ b/src/utils/common/getCountryOptions.ts @@ -39,7 +39,6 @@ export const getEtcCountryOptions = (): InputSelectOption