add favicon, update page title in index.html, delete unnecessary files created by CRA, add VersionSelector component
This commit is contained in:
parent
ebf9698423
commit
f61b1c56d5
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 668 B |
|
|
@ -2,12 +2,12 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
content="Statistic and tracking for the online browser game Tribal Wars."
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>TWHelp</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
|
|
@ -1,21 +1,11 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"short_name": "TWHelp",
|
||||
"name": "Tribal Wars Help",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"src": "favicon.png",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
|
|
|
|||
74
src/common/VersionSelector/VersionSelector.tsx
Normal file
74
src/common/VersionSelector/VersionSelector.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useQuery } from '@apollo/client';
|
||||
import { LANG_VERSIONS } from './queries';
|
||||
import { LangVersionList } from './types';
|
||||
import extractLangTagFromHostname from '@utils/extractLangTagFromHostname';
|
||||
|
||||
import useStyles from './styles';
|
||||
import { Button, Menu, MenuItem, Link } from '@material-ui/core';
|
||||
import { Language as LanguageIcon } from '@material-ui/icons';
|
||||
|
||||
function VersionSelector() {
|
||||
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
|
||||
const langTag = extractLangTagFromHostname(window.location.hostname);
|
||||
const classes = useStyles();
|
||||
const { data, loading } = useQuery<LangVersionList>(LANG_VERSIONS, {
|
||||
fetchPolicy: 'cache-first',
|
||||
variables: {
|
||||
filter: {
|
||||
sort: 'tag ASC',
|
||||
},
|
||||
},
|
||||
});
|
||||
const langVersions = data?.langVersions?.items ?? [];
|
||||
|
||||
const handleClick = (
|
||||
event: React.MouseEvent<HTMLButtonElement, MouseEvent>
|
||||
) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const buildLink = (tag: string) => {
|
||||
return `${window.location.protocol}//${window.location.host.replace(
|
||||
langTag,
|
||||
tag
|
||||
)}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
startIcon={<LanguageIcon />}
|
||||
onClick={loading ? undefined : handleClick}
|
||||
>
|
||||
{langTag}
|
||||
</Button>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
keepMounted
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleClose}
|
||||
>
|
||||
{langVersions.map(lv => {
|
||||
return (
|
||||
<MenuItem
|
||||
component={Link}
|
||||
href={buildLink(lv.tag)}
|
||||
className={classes.menuItem}
|
||||
underline="none"
|
||||
key={lv.tag}
|
||||
>
|
||||
{lv.tag}
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default VersionSelector;
|
||||
11
src/common/VersionSelector/queries.ts
Normal file
11
src/common/VersionSelector/queries.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { gql } from '@apollo/client';
|
||||
|
||||
export const LANG_VERSIONS = gql`
|
||||
query langVersions($filter: LangVersionFilter) {
|
||||
langVersions(filter: $filter) {
|
||||
items {
|
||||
tag
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
11
src/common/VersionSelector/styles.ts
Normal file
11
src/common/VersionSelector/styles.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { makeStyles } from '@material-ui/core/styles';
|
||||
|
||||
const useStyles = makeStyles(() => {
|
||||
return {
|
||||
menuItem: {
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
export default useStyles;
|
||||
9
src/common/VersionSelector/types.ts
Normal file
9
src/common/VersionSelector/types.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { List } from '@libs/graphql/types';
|
||||
|
||||
export type LangVersion = {
|
||||
tag: string;
|
||||
};
|
||||
|
||||
export type LangVersionList = {
|
||||
langVersions?: List<LangVersion[]>;
|
||||
};
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import { useQueryParams, StringParam, withDefault } from 'use-query-params';
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
import useLanguage from '@libs/i18n/useLanguage';
|
||||
|
||||
import {
|
||||
AppBar,
|
||||
|
|
@ -9,12 +8,9 @@ import {
|
|||
TextField,
|
||||
InputAdornment,
|
||||
Container,
|
||||
Button,
|
||||
} from '@material-ui/core';
|
||||
import {
|
||||
Search as SearchIcon,
|
||||
Language as LanguageIcon,
|
||||
} from '@material-ui/icons';
|
||||
import { Search as SearchIcon } from '@material-ui/icons';
|
||||
import VersionSelector from '@common/VersionSelector/VersionSelector';
|
||||
|
||||
export default function Header() {
|
||||
const [query, setQuery] = useQueryParams({
|
||||
|
|
@ -24,7 +20,6 @@ export default function Header() {
|
|||
value => setQuery({ q: value }),
|
||||
1000
|
||||
);
|
||||
const language = useLanguage();
|
||||
|
||||
return (
|
||||
<AppBar position="fixed">
|
||||
|
|
@ -51,7 +46,7 @@ export default function Header() {
|
|||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Button startIcon={<LanguageIcon />}>{language}</Button>
|
||||
<VersionSelector />
|
||||
</div>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -96,14 +96,11 @@ export default function ServerSelection() {
|
|||
}`}
|
||||
subheader={
|
||||
<span>
|
||||
Number of players:{' '}
|
||||
{server.numberOfPlayers.toLocaleString()}
|
||||
{server.numberOfPlayers.toLocaleString()} players
|
||||
<br />
|
||||
Number of tribes:{' '}
|
||||
{server.numberOfTribes.toLocaleString()}
|
||||
{server.numberOfTribes.toLocaleString()} tribes
|
||||
<br />
|
||||
Number of villages:{' '}
|
||||
{server.numberOfVillages.toLocaleString()}
|
||||
{server.numberOfVillages.toLocaleString()} villages
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
Reference in New Issue
Block a user