Skip to content

Instantly share code, notes, and snippets.

@bapHyv

bapHyv/App.css

Created April 15, 2019 15:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bapHyv/d0abf3ca785b5093d6e7f4405b5eccaa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bapHyv/d0abf3ca785b5093d6e7f4405b5eccaa to your computer and use it in GitHub Desktop.
Download ZIP
Css
Raw
App.css
.App {
text-align: center;
}
.cardDisplay {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.buttonDisplay {
height: 80vh;
}
Raw
App.js
import React, { Component } from 'react';
import Card from './components/Card/Card';
import ButtonRandomHero from './components/Buttons/ButtonRandomHero';
import ButtonFight from './components/Buttons/ButtonFight';
import './App.css';
import { Spinner, Container, Row, Col } from 'reactstrap';
import ImgVS from './components/ImgVS/ImgVS';
class App extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
hero1: {
id: '202',
name: 'Darkhawk',
powerstats: { intelligence: '50', strength: '32', speed: '33', durability: '70', power: '74', combat: '64' },
biography: {
'full-name': 'Christopher Powell',
publisher: 'Marvel Comics',
alignment: 'good'
},
appearance: {
height: ["6'1", '185 cm'],
weight: ['180 lb', '81 kg']
},
image: { url: 'https://www.superherodb.com/pictures2/portraits/10/100/53.jpg' }
},
hero2: {
id: '644',
name: 'Superman',
powerstats: {
intelligence: '94',
strength: '100',
speed: '100',
durability: '100',
power: '100',
combat: '85'
},
biography: {
'full-name': 'Clark Kent',
publisher: 'Superman Prime One-Million',
alignment: 'good'
},
appearance: {
height: ["6'3", '191 cm'],
weight: ['225 lb', '101 kg']
},
image: { url: 'https://www.superherodb.com/pictures2/portraits/10/100/791.jpg' }
}
};
}
componentDidMount() {
this.getCaracter1();
this.getCaracter2();
}
getCaracter1() {
this.setState({ isLoading: true });
const getRandomInt1 = max => {
return Math.floor(Math.random() * Math.floor(max));
};
fetch(`https://superheroapi.com/api.php/2427014800851400/${getRandomInt1(720)}`)
.then(response => response.json())
.then(data => {
this.setState({
isLoading: false,
picture: data.image.url,
hero1: data
});
});
}
getCaracter2() {
this.setState({ isLoading: true });
const getRandomInt2 = max => {
return Math.floor(Math.random() * Math.floor(max));
};
fetch(`https://superheroapi.com/api.php/2427014800851400/${getRandomInt2(720)}`)
.then(response => response.json())
.then(data => {
this.setState({
isLoading: false,
picture2: data.image.url,
hero2: data
});
});
}
render() {
if (this.state.isLoading) {
return (
<div className='cardDisplay'>
<p>
<Spinner style={{ width: '5rem', height: '5rem' }} color='primary' />
</p>
<div className='buttonDisplay'>
<ImgVS urlImgVS='https://png2.kisspng.com/sh/c3bb16bcd5fdf9991c1d23fe39929022/L0KzQYm4UMI2N6V6gJH0aYP2gLBuTgZqbJZ0RdlqbXX2PcX2mb1qdqVqhJ9sb4LoPbq6TflvfJZxRdV4cnWweYa0UsUufqQyiNDwLUXldIO3hvQ3bJJrSKk5Lkm2QIWCUckzOWY5SKYEM0K6QImCVsgveJ9s/kisspng-video-games-toy-intel-core-i3-intel-core-i5-25-vs-png-5bd20fd6daf070.9304919215404932708968.png' />
<ButtonRandomHero
selectHero={() => {
this.getCaracter1();
this.getCaracter2();
}}
/>
<ButtonFight />
</div>
<p>
<Spinner style={{ width: '5rem', height: '5rem' }} color='primary' />
</p>
</div>
);
}
return (
<div className='cardDisplay'>
<Card {...this.state.hero1} />
<div className='buttonDisplay'>
<ImgVS urlImgVS='https://png2.kisspng.com/sh/c3bb16bcd5fdf9991c1d23fe39929022/L0KzQYm4UMI2N6V6gJH0aYP2gLBuTgZqbJZ0RdlqbXX2PcX2mb1qdqVqhJ9sb4LoPbq6TflvfJZxRdV4cnWweYa0UsUufqQyiNDwLUXldIO3hvQ3bJJrSKk5Lkm2QIWCUckzOWY5SKYEM0K6QImCVsgveJ9s/kisspng-video-games-toy-intel-core-i3-intel-core-i5-25-vs-png-5bd20fd6daf070.9304919215404932708968.png' />
<ButtonRandomHero
selectHero={() => {
this.getCaracter1();
this.getCaracter2();
}}
/>
<ButtonFight />
</div>
<Card {...this.state.hero2} />
</div>
);
}
}
export default App;
Raw
Background.css
.background_img {
height: 40rem;
width: 30rem;
border-radius: 1vw;
border: 2px solid black;
}
Raw
Background.jsx
import React, { Component } from 'react';
import './Background.css';
import { Spinner, Container, Row, Col } from 'reactstrap';
const Background = props => {
return <img className='background_img' src={props.image.url} alt='' />;
};
export default Background;
Raw
Button.css
.Button_fight {
display: flex;
justify-content: center;
}
Raw
ButtonFight.jsx
import React from 'react';
import { Button } from 'reactstrap';
import './Button.css';
const ButtonFight = ({ Fight }) => {
return (
<div className='Button_fight'>
<Button color='danger'>Fight !</Button>
</div>
);
};
export default ButtonFight;
Raw
ButtonRandomHero.css
.Button_Random {
display: flex;
justify-content: center;
}
Raw
ButtonRandomHero.jsx
import React from 'react';
import { Button } from 'reactstrap';
import './ButtonRandomHero.css';
const ButtonRandomHero = ({ selectHero }) => {
return (
<div className='Button_Random'>
<Button color='primary' onClick={selectHero}>
Get random hero
</Button>
</div>
);
};
export default ButtonRandomHero;
Raw
Card.css
.cardContainer {
margin-top: 5%;
display: flex;
flex-direction: column;
}
Raw
Card.jsx
import React, { Component } from 'react';
import Background from './Background/Background';
import CardLife from '../CardLife/CardLife';
import CardStats from '../CardStats/CardStats';
import CardName from '../CardName/CardName';
import './Card.css';
import { Spinner, Container, Row, Col } from 'reactstrap';
const Card = props => {
return (
<div className='cardContainer'>
<Background image={props.image} />
<CardName name={props.name} />
<CardStats {...props} />
</div>
);
};
export default Card;
Raw
CardLife.js
import React from 'react';
import styles from './CardLife.module.css';
import { Progress, Container, Row, Col } from 'reactstrap';
const CardLife = props => {
return (
<div>
<Progress color='success' value='100' className={styles.card_life} />
</div>
);
};
export default CardLife;
Raw
CardLife.module.css
.card_life {
position: relative;
/* width: 26.9rem;
margin-left: 0.75rem; */
min-height: 45px;
z-index: 0;
margin-top: -20px;
border: 3px solid black;
}
Raw
CardName.css
.card_Name {
width: 90%;
z-index: 1;
margin-top: -125%;
margin-left: 5%;
}
.card_Name_text {
z-index: 1;
font-size: 160%;
margin-top: -3%;
margin-left: 2%;
}
.Name_n_Stars {
display: flex;
flex-direction: row;
justify-content: space-between;
position: relative;
margin-top: -6%;
}
Raw
CardName.js
import React from 'react';
import './CardName.css';
import CardStars from '../CardStars/CardStars';
import CardLife from '../CardLife/CardLife';
const CardName = props => {
return (
<div className='card_Name'>
<CardLife />
<div className='Name_n_Stars'>
<p className='card_Name_text'>{props.name}</p>
<CardStars className='stars' />
</div>
</div>
);
};
export default CardName;
Raw
CardStars.css
/* img {
margin-top: -13%;
} */
.stars {
margin-top: -3%;
}
Raw
CardStars.js
import React, { Component } from 'react';
import './CardStars.css';
const CardStars = () => {
return (
<div className='stars'>
<img src='https://img.icons8.com/color/32/000000/filled-star.png' />
<img src='https://img.icons8.com/color/32/000000/filled-star.png' />
<img src='https://img.icons8.com/color/32/000000/filled-star.png' />
<img src='https://img.icons8.com/color/32/000000/star.png' />
<img src='https://img.icons8.com/color/32/000000/star.png' />
</div>
);
};
export default CardStars;
Raw
CardStats.css
.card_stats {
width: 90%;
margin-left: 5%;
margin-top: 74%;
background-color: #bbb;
opacity: 0.9;
border: 2px solid black;
border-radius: 1vw;
text-align: center;
}
Raw
CardStats.js
import React from 'react';
import { Table } from 'reactstrap';
import './CardStats.css';
const CardStats = props => {
return (
<div className='card_stats'>
<Table size='sm'>
<thead>
<tr>
<th>INT</th>
<th>STR</th>
<th>SPD</th>
<th>END</th>
<th>POW</th>
<th>CBT</th>
</tr>
</thead>
<tbody>
<tr>
<td>{props.powerstats.intelligence}</td>
<td>{props.powerstats.strength}</td>
<td>{props.powerstats.speed}</td>
<td>{props.powerstats.durability}</td>
<td>{props.powerstats.power}</td>
<td>{props.powerstats.combat}</td>
</tr>
</tbody>
</Table>
<div>
<div>Full-name: {props.name} </div>
<div>Alignement : {props.biography.alignment}</div>
<div>
Height : {props.appearance.height[1]} - Weigth: {props.appearance.weight[1]}
</div>
<div>Univers : {props.biography.publisher} </div>
</div>
</div>
);
};
export default CardStats;
Raw
ImgVS.css
.img_vs {
height: 50%;
}
Raw
ImgVS.jsx
import React, { Component } from 'react';
import './ImgVS.css';
const ImgVS = props => {
return <img className='img_vs' src={props.urlImgVS} alt='' />;
};
export default ImgVS;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment