45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import { formatDexNumber } from 'app/utils/formatter';
|
|
|
|
import * as styles from 'app/styles/Loading.scss';
|
|
|
|
export interface ILoadingProps {}
|
|
|
|
export class Loading extends React.Component<ILoadingProps> {
|
|
|
|
public render() {
|
|
|
|
const pokemonGroups = [
|
|
[1, 2, 3],
|
|
[4, 5, 6],
|
|
[7, 8, 9],
|
|
[172, 25, 26],
|
|
[144, 145, 146],
|
|
];
|
|
|
|
const pokemonIconCss = classNames(
|
|
'icon',
|
|
'pixel',
|
|
'sprite',
|
|
);
|
|
|
|
const groupIndex = Math.floor(Math.random() * pokemonGroups.length);
|
|
const pokemonIcons = pokemonGroups[groupIndex].map((dex) => {
|
|
const pokemonCss = classNames(
|
|
pokemonIconCss,
|
|
`pokemon-${ formatDexNumber(dex) }`,
|
|
);
|
|
return <div key={ dex } className={ pokemonCss } />;
|
|
});
|
|
|
|
return (
|
|
<div className={ styles.wrapper }>
|
|
{ pokemonIcons }
|
|
</div>
|
|
);
|
|
}
|
|
}
|