Added InfoDialog feature (partially done)
parent
ff92db699d
commit
6acabeb91a
|
|
@ -0,0 +1,350 @@
|
|||
html {
|
||||
--pokename: #000;
|
||||
--cardborder: #fff;
|
||||
--pokenumber: hsl(228, 28%, 20%);
|
||||
--info: #fff;
|
||||
--bggradient: url('assets/bg.png');
|
||||
--bgcolor: none;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
--pokename: hsl(228, 28%, 20%);
|
||||
--cardborder: hsl(228, 28%, 20%);
|
||||
--pokenumber: hsl(228, 28%, 20%);
|
||||
--info: hsl(228, 28%, 20%);
|
||||
--bggradient: none;
|
||||
--bgcolor: #16171f;
|
||||
}
|
||||
|
||||
.info__container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.info__container__data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.info__container__img {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
border-radius: 1rem;
|
||||
background: #ffffff78;
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
.info__container__img img {
|
||||
width: 120px;
|
||||
height: 147px;
|
||||
padding: 1rem 1rem;
|
||||
margin: 0.3rem;
|
||||
border-radius: 1.2rem;
|
||||
}
|
||||
|
||||
.pokemon__name {
|
||||
font-size: 22px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.pokemon__id {
|
||||
color: var(--pokenumber);
|
||||
font-family: 'Teko', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.info__container__data__header {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.info__container__data__type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.info__container__data__type img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.info__container__headings {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 27px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info__container__data__abilities {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.info__container__data__data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
grid-gap: 0px 15px;
|
||||
gap: 0px 15px;
|
||||
align-items: center;
|
||||
margin: 0px 0;
|
||||
justify-content: space-between;
|
||||
background-color: #ffffff40;
|
||||
padding: 10px;
|
||||
border-radius: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.info__container__stat__columns {
|
||||
width: 135px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.MuiDialog-paperFullWidth {
|
||||
width: 63%;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 10px 20px rgba(175, 136, 136, 0.29),
|
||||
0 6px 6px rgba(0, 0, 0, 0.43);
|
||||
}
|
||||
|
||||
.MuiDialog-container {
|
||||
background-color: var(--bgcolor);
|
||||
background-image: var(--bggradient);
|
||||
}
|
||||
|
||||
.MuiBackdrop-root {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.info__container__data__dimensions {
|
||||
display: flex;
|
||||
gap: 0 30px;
|
||||
}
|
||||
|
||||
.info__container__stat__columns__name {
|
||||
text-transform: uppercase;
|
||||
color: crimson;
|
||||
}
|
||||
|
||||
.dialog__bg {
|
||||
background-image: url('assets/bg.png');
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
.dialog__content {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.pokemon__name {
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
}
|
||||
|
||||
.close__btn {
|
||||
width: 30px !important;
|
||||
}
|
||||
|
||||
.ability {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.right__box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: -webkit-fill-available;
|
||||
justify-content: space-evenly;
|
||||
gap: 3px 0px;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.evolution__box {
|
||||
display: flex;
|
||||
gap: 0 0px;
|
||||
}
|
||||
|
||||
.evolution__sub__box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.evolution__box .evo_img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* .evolution__img__div:hover {
|
||||
transform: scale(1.05);
|
||||
} */
|
||||
|
||||
.evolution__img__div {
|
||||
height: 113px;
|
||||
width: 113px;
|
||||
display: flex;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 5px 15px 4px rgb(0 0 0 / 30%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.35s;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
.evolution__poke__name {
|
||||
text-transform: capitalize;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.arrow__right {
|
||||
font-size: 1.75rem;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.MuiDialogContent-root:first-child {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.ability__list {
|
||||
display: flex;
|
||||
gap: 0 30px;
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
|
||||
.ability__list__bg {
|
||||
background-color: #ffffff40;
|
||||
padding: 5px;
|
||||
border-radius: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.MuiTooltip-tooltip {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
height: 80;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
rgb(77, 77, 77),
|
||||
rgb(77, 77, 77)
|
||||
);
|
||||
width: 1%;
|
||||
margin-left: 2vw;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.transparency__div {
|
||||
background: #ffffff40;
|
||||
height: 113px;
|
||||
width: 113px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.desc {
|
||||
background-color: #ffffff40;
|
||||
padding: 10px;
|
||||
border-radius: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.fa-mars {
|
||||
color: #7070ff;
|
||||
}
|
||||
|
||||
.fa-venus {
|
||||
color: rgb(224, 61, 88);
|
||||
}
|
||||
|
||||
.dimensions {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pokemon__genera {
|
||||
padding: 3px 10px;
|
||||
border-radius: 10px;
|
||||
margin-top: 1.5vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* phone */
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.MuiDialog-paperFullWidth {
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
}
|
||||
.info__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.info__container__img {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.info__container__data {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.right__box {
|
||||
margin-top: 20px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.info__container__data__data {
|
||||
justify-content: center;
|
||||
}
|
||||
.info__container__stat__columns__name,
|
||||
.info__container__stat__columns__val,
|
||||
.stats,
|
||||
.dimensions,
|
||||
.ability {
|
||||
text-align: center;
|
||||
}
|
||||
.info__container__data__abilities {
|
||||
margin-top: 20px;
|
||||
align-items: center;
|
||||
gap: 0px;
|
||||
}
|
||||
.right__box .desc {
|
||||
text-align: center;
|
||||
}
|
||||
.info__container__headings {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.evolution__box {
|
||||
flex-direction: column;
|
||||
}
|
||||
.evolution__sub__box {
|
||||
flex-direction: column;
|
||||
}
|
||||
.arrow__right {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.evolution__poke__name {
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import InfoDialog, { InfoDialogProps } from './InfoDialog';
|
||||
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
||||
|
||||
export default {
|
||||
title: 'Features/InfoDialog',
|
||||
component: InfoDialog,
|
||||
} as ComponentMeta<typeof InfoDialog>;
|
||||
|
||||
const Template: ComponentStory<typeof InfoDialog> = (args: InfoDialogProps) => (
|
||||
<InfoDialog {...args} />
|
||||
);
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
import { Dialog, DialogContent, Tooltip, Zoom } from '@mui/material';
|
||||
|
||||
import { findPokeTypeAsset } from 'components/PokemonTypes';
|
||||
import { colorTypeGradients } from 'components/PokemonCard/utils';
|
||||
import GenderRate from 'components/GenderRate';
|
||||
|
||||
export interface InfoDialogProps {
|
||||
open: boolean;
|
||||
cancel: boolean;
|
||||
id: number;
|
||||
name: string;
|
||||
genere: string;
|
||||
types: string[];
|
||||
height: number;
|
||||
weight: number;
|
||||
genderRatio: number;
|
||||
description: string;
|
||||
abilities: string[];
|
||||
stats: {
|
||||
hp: number;
|
||||
attack: number;
|
||||
defense: number;
|
||||
spAttack: number;
|
||||
spDefense: number;
|
||||
speed: number;
|
||||
};
|
||||
image: string;
|
||||
}
|
||||
|
||||
const InfoDialog = (props: InfoDialogProps) => {
|
||||
let finalColor;
|
||||
|
||||
if (props.types.length === 2) {
|
||||
finalColor = colorTypeGradients(
|
||||
props.types[0],
|
||||
props.types[1],
|
||||
props.types.length,
|
||||
);
|
||||
} else {
|
||||
finalColor = colorTypeGradients(
|
||||
props.types[0],
|
||||
props.types[0],
|
||||
props.types.length,
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dialog
|
||||
aria-labelledby="customized-dialog-title"
|
||||
open={props.open}
|
||||
fullWidth
|
||||
maxWidth="md"
|
||||
className="dialog__bg noselect"
|
||||
>
|
||||
<DialogContent
|
||||
style={{
|
||||
background: `linear-gradient(${finalColor[0]}, ${finalColor[1]})`,
|
||||
}}
|
||||
className="dialog__content"
|
||||
>
|
||||
<div className="info__container">
|
||||
<div className="info__container__img">
|
||||
<div className="pokemon__id">
|
||||
#{String(props.id).padStart(3, '0')}
|
||||
</div>
|
||||
<div className="pokemon__name">{props.name}</div>
|
||||
<div
|
||||
className="pokemon__genera"
|
||||
style={{ background: finalColor[0] }}
|
||||
>
|
||||
{props.genere}
|
||||
</div>
|
||||
<div>
|
||||
<img src={props.image} alt="poke-img" />
|
||||
</div>
|
||||
<div className="info__container__data__type">
|
||||
{props.types.map(type => (
|
||||
<Tooltip
|
||||
title={type}
|
||||
key={type}
|
||||
TransitionComponent={Zoom}
|
||||
arrow
|
||||
>
|
||||
<div className={`poke__type__bg ${type}`}>
|
||||
<img src={findPokeTypeAsset(type)} alt="poke-type" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
))}
|
||||
</div>
|
||||
<div className="dimensions">
|
||||
<p>
|
||||
<span
|
||||
className="info__container__headings"
|
||||
style={{ fontSize: '20px' }}
|
||||
>
|
||||
Height
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
className="info__container__headings"
|
||||
style={{ fontSize: '20px' }}
|
||||
>
|
||||
Weight
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="gender__container">
|
||||
{props.genderRatio === -1 ? (
|
||||
'Genderless'
|
||||
) : (
|
||||
<GenderRate genderRatio={props.genderRatio} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="info__container__data">
|
||||
<div className={'right__box'}>
|
||||
<div>
|
||||
<div className={'info__container__headings'}>About</div>
|
||||
<div className={'desc'}>{props.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InfoDialog;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export * from './InfoDialog';
|
||||
export { default } from './InfoDialog';
|
||||
Loading…
Reference in New Issue