add 2 new options to the MapPage (playerVillageColor, barbarianVillageColor)

This commit is contained in:
Dawid Wysokiński 2020-12-30 17:58:55 +01:00
parent 63e6a47e16
commit e8a9c53bc1
5 changed files with 52 additions and 26 deletions

View File

@ -47,6 +47,7 @@ const DEFAULT_COLORS: string[] = [
'#ff7fff',
'#fffa00',
'#fffb71',
'#808080',
'#fefefe',
'#ffffff',
];

View File

@ -52,6 +52,8 @@ function MapPage() {
backgroundColor: withDefault(ColorParam, '#000000'),
gridLineColor: withDefault(ColorParam, '#ffffff'),
continentNumberColor: withDefault(ColorParam, '#ffffff'),
playerVillageColor: withDefault(ColorParam, '#FF0000'),
barbarianVillageColor: withDefault(ColorParam, '#808080'),
});
const client = useApolloClient();
const { key } = useServer();
@ -258,32 +260,49 @@ function MapPage() {
step: '1',
}}
/>
<ColorInput
color={query.backgroundColor}
onChange={createSettingsChangeHandler('backgroundColor')}
fullWidth
variant="standard"
name="backgroundColor"
label={t('inputLabels.backgroundColor')}
/>
<ColorInput
color={query.gridLineColor}
onChange={createSettingsChangeHandler('gridLineColor')}
fullWidth
variant="standard"
name="gridLineColor"
label={t('inputLabels.gridLineColor')}
/>
<ColorInput
color={query.continentNumberColor}
onChange={createSettingsChangeHandler(
'continentNumberColor'
)}
fullWidth
variant="standard"
name="continentNumberColor"
label={t('inputLabels.continentNumberColor')}
/>
{[
{
name: 'backgroundColor',
color: query.backgroundColor,
onChange: createSettingsChangeHandler('backgroundColor'),
},
{
name: 'playerVillageColor',
color: query.playerVillageColor,
onChange: createSettingsChangeHandler(
'playerVillageColor'
),
},
{
name: 'barbarianVillageColor',
color: query.barbarianVillageColor,
onChange: createSettingsChangeHandler(
'barbarianVillageColor'
),
},
{
name: 'gridLineColor',
color: query.gridLineColor,
onChange: createSettingsChangeHandler('gridLineColor'),
},
{
name: 'continentNumberColor',
color: query.continentNumberColor,
onChange: createSettingsChangeHandler(
'continentNumberColor'
),
},
].map(({ color, name, onChange }) => (
<ColorInput
key={name}
color={color}
onChange={onChange}
fullWidth
variant="standard"
name={name}
label={t('inputLabels.' + name)}
/>
))}
{[
{
name: 'markersOnly',

View File

@ -36,6 +36,8 @@ export type Settings = Object & {
backgroundColor: string;
gridLineColor: string;
continentNumberColor: string;
playerVillageColor: string;
barbarianVillageColor: string;
};
export interface HasID {

View File

@ -17,6 +17,8 @@ const translations = {
largerMarkers: 'Larger markers',
showGrid: 'Continent grid',
showContinentNumbers: 'Continent numbers',
playerVillageColor: 'Player village color',
barbarianVillageColor: 'Barbarian village color',
},
buttons: {
addMarker: 'Add marker',

View File

@ -17,6 +17,8 @@ const translations = {
largerMarkers: 'Większe znaczniki',
showGrid: 'Granice kontynentów',
showContinentNumbers: 'Numery kontynentów',
playerVillageColor: 'Kolor wioski gracza',
barbarianVillageColor: 'Kolor wioski barbarzyńskiej',
},
buttons: {
addMarker: 'Dodaj marker',