Jason/pokertk
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity

Implemented background image color of Pokemon Card

Browse Source
This commit is contained in:
Jason Zhu 2023-03-23 21:21:46 +11:00
parent 751704a8c2
commit 3c91954e29
2 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/features/Pokedex/Pokemon/Pokemon.css
View File

@ -67,6 +67,7 @@ html {
margin-right: 15px; margin-right: 15px;
margin-top: -4px; margin-top: -4px;
font-size: 25px; font-size: 25px;
color: var(--info);
opacity: 0.5; opacity: 0.5;
} }
@ -99,7 +100,7 @@ h3 {
} }
.poke__name h3 { .poke__name h3 {
margin-top: 0px; margin-top: 0;
} }
.poke__type { .poke__type {

19
src/features/Pokedex/Pokemon/Pokemon.tsx
View File

@ -1,7 +1,9 @@
import React from 'react'; import React from 'react';
import './Pokemon.css';
import { Tooltip, Zoom } from '@mui/material'; import { Tooltip, Zoom } from '@mui/material';
import './Pokemon.css';
import * as pokeTypeAsset from './assets'; import * as pokeTypeAsset from './assets';
import { colorTypeGradients } from './utils';
export interface PokemonProps { export interface PokemonProps {
name: string; name: string;
@ -58,8 +60,21 @@ function findPokeTypeAsset(pokeType: string) {
} }
export default function Pokemon({ name, number, image, types }: PokemonProps) { export default function Pokemon({ name, number, image, types }: PokemonProps) {
let finalColor;
if (types.length === 2) {
finalColor = colorTypeGradients(types[0], types[1], types.length);
} else {
finalColor = colorTypeGradients(types[0], types[0], types.length);
}
return ( return (
<div className="thumbnail__container"> <div
className="thumbnail__container"
style={{
background: `linear-gradient(${finalColor[0]}, ${finalColor[1]})`,
}}
>
<div className="card__header"> <div className="card__header">
<div className="poke__number">{formatNumber(number)}</div> <div className="poke__number">{formatNumber(number)}</div>
<div className="info__icon"> <div className="info__icon">