make MapPage translatable, translate MapPage into Polish and English
This commit is contained in:
parent
8dd4b1e1bf
commit
7bcd69b40e
|
@ -1,4 +1,4 @@
|
|||
export const DEFAULT_LANGUAGE = process.env.REACT_APP_DEFAULT_LANGUAGE ?? 'en';
|
||||
export const DEFAULT_LANGUAGE = process.env.REACT_APP_DEFAULT_LANGUAGE ?? 'pl';
|
||||
|
||||
export const NAME = 'TWHelp';
|
||||
|
||||
|
|
|
@ -6,6 +6,7 @@ export const NOT_FOUND_PAGE = 'not-found-page';
|
|||
export const SERVER_PAGE = {
|
||||
COMMON: 'server-page/common',
|
||||
INDEX_PAGE: 'server-page/index-page',
|
||||
MAP_PAGE: 'server-page/map-page',
|
||||
PLAYER_PAGE: {
|
||||
COMMON: 'server-page/player-page/common',
|
||||
INDEX_PAGE: 'server-page/player-page/index-page',
|
||||
|
|
|
@ -1,9 +1,12 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useApolloClient } from '@apollo/client';
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
import useTitle from '@libs/useTitle';
|
||||
import useServer from '../../libs/ServerContext/useServer';
|
||||
import useMarkers from './useMarkers';
|
||||
import { MAP_SERVICE } from '@config/app';
|
||||
import { SERVER_PAGE } from '@config/namespaces';
|
||||
import { PLAYERS, TRIBES } from './queries';
|
||||
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
|
@ -66,6 +69,8 @@ function MapPage() {
|
|||
const { key } = useServer();
|
||||
const classes = useStyles();
|
||||
const client = useApolloClient();
|
||||
const { t } = useTranslation(SERVER_PAGE.MAP_PAGE);
|
||||
useTitle(t('title', { key }));
|
||||
|
||||
const handleSettingsChange = (
|
||||
e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
|
||||
|
@ -178,11 +183,11 @@ function MapPage() {
|
|||
align="center"
|
||||
gutterBottom
|
||||
>
|
||||
Settings
|
||||
{t('sections.settings')}
|
||||
</Typography>
|
||||
<div className={classes.formGroup}>
|
||||
<TextField
|
||||
label="Zoom level"
|
||||
label={t('inputLabels.zoomLevel')}
|
||||
type="number"
|
||||
name="scale"
|
||||
value={settings.scale}
|
||||
|
@ -196,7 +201,7 @@ function MapPage() {
|
|||
}}
|
||||
/>
|
||||
<TextField
|
||||
label="Center X"
|
||||
label={t('inputLabels.centerX')}
|
||||
type="number"
|
||||
name="centerX"
|
||||
value={settings.centerX}
|
||||
|
@ -210,7 +215,7 @@ function MapPage() {
|
|||
}}
|
||||
/>
|
||||
<TextField
|
||||
label="Center Y"
|
||||
label={t('inputLabels.centerY')}
|
||||
type="number"
|
||||
name="centerY"
|
||||
value={settings.centerY}
|
||||
|
@ -224,7 +229,7 @@ function MapPage() {
|
|||
}}
|
||||
/>
|
||||
<TextField
|
||||
label="Background color"
|
||||
label={t('inputLabels.backgroundColor')}
|
||||
name="backgroundColor"
|
||||
onChange={callDebouncedHandleSettingsChange}
|
||||
fullWidth
|
||||
|
@ -232,8 +237,8 @@ function MapPage() {
|
|||
variant="standard"
|
||||
/>
|
||||
<TextField
|
||||
label="Grid line color"
|
||||
name="gridLineColor"
|
||||
label={t('inputLabels.gridLineColor')}
|
||||
onChange={callDebouncedHandleSettingsChange}
|
||||
defaultValue={settings.gridLineColor}
|
||||
fullWidth
|
||||
|
@ -241,8 +246,8 @@ function MapPage() {
|
|||
type="color"
|
||||
/>
|
||||
<TextField
|
||||
label="Continent number color"
|
||||
name="continentNumberColor"
|
||||
label={t('inputLabels.continentNumberColor')}
|
||||
onChange={callDebouncedHandleSettingsChange}
|
||||
defaultValue={settings.continentNumberColor}
|
||||
fullWidth
|
||||
|
@ -250,7 +255,7 @@ function MapPage() {
|
|||
type="color"
|
||||
/>
|
||||
<FormControlLabel
|
||||
label="Markers only"
|
||||
label={t('inputLabels.markersOnly')}
|
||||
control={
|
||||
<Checkbox
|
||||
name="markersOnly"
|
||||
|
@ -260,7 +265,7 @@ function MapPage() {
|
|||
}
|
||||
/>
|
||||
<FormControlLabel
|
||||
label="Show barbarian villages"
|
||||
label={t('inputLabels.showBarbarianVillages')}
|
||||
control={
|
||||
<Checkbox
|
||||
name="showBarbarian"
|
||||
|
@ -270,7 +275,7 @@ function MapPage() {
|
|||
}
|
||||
/>
|
||||
<FormControlLabel
|
||||
label="Larger markers"
|
||||
label={t('inputLabels.largerMarkers')}
|
||||
control={
|
||||
<Checkbox
|
||||
name="largerMarkers"
|
||||
|
@ -280,7 +285,7 @@ function MapPage() {
|
|||
}
|
||||
/>
|
||||
<FormControlLabel
|
||||
label="Continent grid"
|
||||
label={t('inputLabels.continentGrid')}
|
||||
control={
|
||||
<Checkbox
|
||||
name="showGrid"
|
||||
|
@ -290,7 +295,7 @@ function MapPage() {
|
|||
}
|
||||
/>
|
||||
<FormControlLabel
|
||||
label="Continent numbers"
|
||||
label={t('inputLabels.continentNumbers')}
|
||||
control={
|
||||
<Checkbox
|
||||
name="showContinentNumbers"
|
||||
|
@ -308,7 +313,7 @@ function MapPage() {
|
|||
align="center"
|
||||
gutterBottom
|
||||
>
|
||||
Tribe markers
|
||||
{t('sections.tribeMarkers')}
|
||||
</Typography>
|
||||
<div className={classes.formGroup}>
|
||||
{tribeMarkers.map(marker => {
|
||||
|
@ -320,6 +325,7 @@ function MapPage() {
|
|||
onChangeColor={createUpdateTribeMarkerColorHandler(
|
||||
marker.id
|
||||
)}
|
||||
loadingText={t('loading')}
|
||||
loadSuggestions={searchTribes}
|
||||
getOptionLabel={tribeGetOptionLabel}
|
||||
getOptionSelected={tribeGetOptionSelected}
|
||||
|
@ -333,7 +339,7 @@ function MapPage() {
|
|||
onClick={handleAddTribeMarker}
|
||||
disabled={tribeMarkers.length >= 100}
|
||||
>
|
||||
Add marker
|
||||
{t('buttons.addMarker')}
|
||||
</Button>
|
||||
</div>
|
||||
</Grid>
|
||||
|
@ -344,7 +350,7 @@ function MapPage() {
|
|||
align="center"
|
||||
gutterBottom
|
||||
>
|
||||
Player markers
|
||||
{t('sections.playerMarkers')}
|
||||
</Typography>
|
||||
<div className={classes.formGroup}>
|
||||
{playerMarkers.map(marker => {
|
||||
|
@ -369,7 +375,7 @@ function MapPage() {
|
|||
onClick={handleAddPlayerMarker}
|
||||
disabled={playerMarkers.length >= 100}
|
||||
>
|
||||
Add marker
|
||||
{t('buttons.addMarker')}
|
||||
</Button>
|
||||
</div>
|
||||
</Grid>
|
||||
|
@ -381,13 +387,15 @@ function MapPage() {
|
|||
color="secondary"
|
||||
variant="contained"
|
||||
>
|
||||
Generate new map
|
||||
{t('buttons.generateNewMap')}
|
||||
</Button>
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
{mapURL && <Map src={mapURL} alt={key} />}
|
||||
{mapURL && (
|
||||
<Map src={mapURL} alt={key} loadingInfo={t('infoWhileGenerating')} />
|
||||
)}
|
||||
</Container>
|
||||
</ServerPageLayout>
|
||||
);
|
||||
|
|
|
@ -9,9 +9,15 @@ export interface Props {
|
|||
src: string;
|
||||
alt: string;
|
||||
maxWidth?: number;
|
||||
loadingInfo?: string;
|
||||
}
|
||||
|
||||
function Map({ src = '', alt = 'Map', maxWidth = 1000 }: Props) {
|
||||
function Map({
|
||||
src = '',
|
||||
alt = 'Map',
|
||||
maxWidth = 1000,
|
||||
loadingInfo = 'It may take a while to generate a map!',
|
||||
}: Props) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const classes = useStyles();
|
||||
|
||||
|
@ -22,7 +28,7 @@ function Map({ src = '', alt = 'Map', maxWidth = 1000 }: Props) {
|
|||
return (
|
||||
<div className={classes.container}>
|
||||
{loading ? (
|
||||
<Alert severity="warning">It may take a while to generate a map!</Alert>
|
||||
<Alert severity="warning">{loadingInfo}</Alert>
|
||||
) : (
|
||||
<Alert severity="info">
|
||||
URL:{' '}
|
||||
|
|
|
@ -15,6 +15,7 @@ export interface Props<T> {
|
|||
getOptionLabel: (opt: T) => string;
|
||||
getOptionSelected: (opt: T, value: T) => boolean;
|
||||
loadSuggestions: (value: string) => Promise<T[]>;
|
||||
loadingText?: string;
|
||||
}
|
||||
|
||||
function MarkerField<T extends object>({
|
||||
|
@ -24,6 +25,7 @@ function MarkerField<T extends object>({
|
|||
onChangeColor,
|
||||
getOptionSelected,
|
||||
getOptionLabel,
|
||||
loadingText,
|
||||
}: Props<T>) {
|
||||
const [searchValue, setSearchValue] = useState<string>('');
|
||||
const [suggestions, setSuggestions] = useState<T[]>([]);
|
||||
|
@ -59,6 +61,7 @@ function MarkerField<T extends object>({
|
|||
loading={loading}
|
||||
getOptionSelected={getOptionSelected}
|
||||
onChange={onChange}
|
||||
loadingText={loadingText}
|
||||
renderInput={params => {
|
||||
return (
|
||||
<TextField
|
||||
|
|
|
@ -5,11 +5,13 @@ import playerPage from './player-page';
|
|||
import tribePage from './tribe-page';
|
||||
import villagePage from './village-page';
|
||||
import rankingPage from './ranking-page';
|
||||
import mapPage from './map-page';
|
||||
|
||||
const translations = {
|
||||
[NAMESPACES.SERVER_PAGE.COMMON]: common,
|
||||
[NAMESPACES.SERVER_PAGE.INDEX_PAGE]: indexPage,
|
||||
[NAMESPACES.SERVER_PAGE.VILLAGE_PAGE.INDEX_PAGE]: villagePage,
|
||||
[NAMESPACES.SERVER_PAGE.MAP_PAGE]: mapPage,
|
||||
...playerPage,
|
||||
...tribePage,
|
||||
...rankingPage,
|
||||
|
|
29
src/libs/i18n/en/server-page/map-page.ts
Normal file
29
src/libs/i18n/en/server-page/map-page.ts
Normal file
|
@ -0,0 +1,29 @@
|
|||
const translations = {
|
||||
title: 'Map tool - {{key}}',
|
||||
sections: {
|
||||
settings: 'Settings',
|
||||
tribeMarkers: 'Tribe markers',
|
||||
playerMarkers: 'Player markers',
|
||||
},
|
||||
inputLabels: {
|
||||
zoomLevel: 'Zoom level',
|
||||
centerX: 'Center X',
|
||||
centerY: 'Center Y',
|
||||
backgroundColor: 'Background color',
|
||||
gridLineColor: 'Grid line color',
|
||||
continentNumberColor: 'Continent number color',
|
||||
markersOnly: 'Markers only',
|
||||
showBarbarianVillages: 'Show barbarian villages',
|
||||
largerMarkers: 'Larger markers',
|
||||
continentGrid: 'Continent grid',
|
||||
continentNumbers: 'Continent numbers',
|
||||
},
|
||||
buttons: {
|
||||
addMarker: 'Add marker',
|
||||
generateNewMap: 'Generate new map',
|
||||
},
|
||||
loading: 'Loading',
|
||||
infoWhileGenerating: 'It may take a while to generate a map!',
|
||||
};
|
||||
|
||||
export default translations;
|
|
@ -5,11 +5,13 @@ import playerPage from './player-page';
|
|||
import tribePage from './tribe-page';
|
||||
import villagePage from './village-page';
|
||||
import rankingPage from './ranking-page';
|
||||
import mapPage from './map-page';
|
||||
|
||||
const translations = {
|
||||
[NAMESPACES.SERVER_PAGE.COMMON]: common,
|
||||
[NAMESPACES.SERVER_PAGE.INDEX_PAGE]: indexPage,
|
||||
[NAMESPACES.SERVER_PAGE.VILLAGE_PAGE.INDEX_PAGE]: villagePage,
|
||||
[NAMESPACES.SERVER_PAGE.MAP_PAGE]: mapPage,
|
||||
...playerPage,
|
||||
...tribePage,
|
||||
...rankingPage,
|
||||
|
|
29
src/libs/i18n/pl/server-page/map-page.ts
Normal file
29
src/libs/i18n/pl/server-page/map-page.ts
Normal file
|
@ -0,0 +1,29 @@
|
|||
const translations = {
|
||||
title: 'Narzędzie mapy - {{key}}',
|
||||
sections: {
|
||||
settings: 'Ustawienia',
|
||||
tribeMarkers: 'Oznaczenia plemion',
|
||||
playerMarkers: 'Oznaczenia graczy',
|
||||
},
|
||||
inputLabels: {
|
||||
zoomLevel: 'Poziom przybliżenia',
|
||||
centerX: 'Wyśrodkuj X',
|
||||
centerY: 'Wyśrodkuj Y',
|
||||
backgroundColor: 'Kolor tła',
|
||||
gridLineColor: 'Kolor linii',
|
||||
continentNumberColor: 'Kolor numeru kontynentu',
|
||||
markersOnly: 'Tylko oznaczenia',
|
||||
showBarbarianVillages: 'Pokaż opuszczone',
|
||||
largerMarkers: 'Większe znaczniki',
|
||||
continentGrid: 'Granice kontynentów',
|
||||
continentNumbers: 'Numery kontynentów',
|
||||
},
|
||||
buttons: {
|
||||
addMarker: 'Dodaj marker',
|
||||
generateNewMap: 'Wygeneruj mapę',
|
||||
},
|
||||
loading: 'Ładowanie',
|
||||
infoWhileGenerating: 'To może zająć chwilę!',
|
||||
};
|
||||
|
||||
export default translations;
|
Reference in New Issue
Block a user