From f7e06876223e3d9fa8275bad48d77601627d3711 Mon Sep 17 00:00:00 2001 From: Im-Rises Date: Thu, 21 Sep 2023 20:51:04 -0400 Subject: [PATCH 1/3] wip --- .../LazyLoadImage/LazyLoadImage.jsx | 31 +++++++++++++++ .../PokemonList/PokemonListElement.jsx | 37 +++++++----------- .../loading/pokeball-loading-150x150.gif | Bin 0 -> 5702 bytes ...loading.gif => pokeball-loading-50x50.gif} | Bin src/pages/PokemonList.jsx | 4 +- src/pages/PokemonList.scss | 16 ++++++++ 6 files changed, 64 insertions(+), 24 deletions(-) create mode 100644 src/components/LazyLoadImage/LazyLoadImage.jsx create mode 100644 src/images/loading/pokeball-loading-150x150.gif rename src/images/loading/{pokeball_loading.gif => pokeball-loading-50x50.gif} (100%) diff --git a/src/components/LazyLoadImage/LazyLoadImage.jsx b/src/components/LazyLoadImage/LazyLoadImage.jsx new file mode 100644 index 0000000..bc3e031 --- /dev/null +++ b/src/components/LazyLoadImage/LazyLoadImage.jsx @@ -0,0 +1,31 @@ +import {useEffect, useRef} from 'react'; +import PropTypes from 'prop-types'; +import React from 'react'; + +const LazyLoadImage = props => { + const imageRef = useRef(); + + useEffect(() => { + const observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // Charger l'image lorsque l'élément devient visible + imageRef.current.src = props.src; + observer.unobserve(imageRef.current); + } + }); + }); + + observer.observe(imageRef.current); + + return () => { + observer.disconnect(); + }; + }, [props.src]); + + return ; +}; + +LazyLoadImage.propTypes = { + src: PropTypes.string.isRequired, +}; diff --git a/src/components/PokemonList/PokemonListElement.jsx b/src/components/PokemonList/PokemonListElement.jsx index f2a20a4..a12f003 100644 --- a/src/components/PokemonList/PokemonListElement.jsx +++ b/src/components/PokemonList/PokemonListElement.jsx @@ -3,29 +3,24 @@ import {useEffect, useRef, useState} from 'react'; import {getAllFromPokemon, uppercaseFirstLetter} from '../../requests/index.js'; import React from 'react'; import {clementPokemonData, quentinPokemonData} from '../../constants/pokemon-data-fetch.js'; +import PokeballLoadingImage from '/src/images/loading/pokeball-loading-50x50.gif'; -const LazyLoadImage = props => { - const imageRef = useRef(); +const PokemonImageLogo = props => { + const [icon, setIcon] = useState(PokeballLoadingImage); useEffect(() => { - const observer = new IntersectionObserver(entries => { - entries.forEach(entry => { - if (entry.isIntersecting) { - // Charger l'image lorsque l'élément devient visible - imageRef.current.src = props.src; - observer.unobserve(imageRef.current); - } - }); - }); - - observer.observe(imageRef.current); - - return () => { - observer.disconnect(); - }; + // if props.src update + if (props.src) { + setIcon(props.src); + } }, [props.src]); - return ; + return {props.pokemonName}/; +}; + +PokemonImageLogo.propTypes = { + src: PropTypes.string.isRequired, + pokemonName: PropTypes.string.isRequired, }; export const PokemonListElement = props => { @@ -49,7 +44,8 @@ export const PokemonListElement = props => { }, [props.pokemonName]); return
- {icon && } + {/* {icon && } */} + {icon && } {uppercaseFirstLetter(props.pokemonName)}
; }; @@ -57,6 +53,3 @@ export const PokemonListElement = props => { PokemonListElement.propTypes = { pokemonName: PropTypes.string.isRequired, }; -LazyLoadImage.propTypes = { - src: PropTypes.string.isRequired, -}; diff --git a/src/images/loading/pokeball-loading-150x150.gif b/src/images/loading/pokeball-loading-150x150.gif new file mode 100644 index 0000000000000000000000000000000000000000..6373e3b0d001c2a86b36ef31e8d58053e9e424a5 GIT binary patch literal 5702 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 literal 0 HcmV?d00001 diff --git a/src/images/loading/pokeball_loading.gif b/src/images/loading/pokeball-loading-50x50.gif similarity index 100% rename from src/images/loading/pokeball_loading.gif rename to src/images/loading/pokeball-loading-50x50.gif diff --git a/src/pages/PokemonList.jsx b/src/pages/PokemonList.jsx index 0320d6d..f7ab1c3 100644 --- a/src/pages/PokemonList.jsx +++ b/src/pages/PokemonList.jsx @@ -1,7 +1,7 @@ import React, {useEffect, useState} from 'react'; import {getListOfPkmAvailable} from '../requests/pokedex-request.js'; import {MAX_PKM} from '../constants/pokedex-constant.js'; -import pokeballLoadingImage from '../images/loading/pokeball_loading.gif'; +import pokeballLoadingImage from '../images/loading/pokeball-loading-150x150.gif'; import './PokemonList.scss'; import {pipe, pluck, prop} from 'ramda'; import {getAllFromPokemon, uppercaseFirstLetter} from '../requests/index.js'; @@ -98,7 +98,7 @@ export const PokemonList = () => {
{pokemon.select ? uppercaseFirstLetter(pokemon.select) : 'Select a pokemon!'}
-
+
{pokemon.select ? {'official : <>}
{pokemon.select diff --git a/src/pages/PokemonList.scss b/src/pages/PokemonList.scss index b06621b..5ea8e0a 100644 --- a/src/pages/PokemonList.scss +++ b/src/pages/PokemonList.scss @@ -6,6 +6,22 @@ .left { width: 100%; + .pokemon-artwork-holder { + width: 100%; + height: auto; + object-fit: contain; + + // center the image + display: flex; + align-items: center; + justify-content: center; + + img { + width: 80%; + height: auto; + } + } + .pokemon-name { width: 80%; margin: auto; From 6b105afd28280323d5ec4de6b8bc1ec9f79c9589 Mon Sep 17 00:00:00 2001 From: Im-Rises Date: Thu, 21 Sep 2023 21:24:48 -0400 Subject: [PATCH 2/3] Added todo list --- README.md | 70 +++++++---------------------- src/constants/pokemon-data-fetch.js | 8 ++-- src/pages/PokemonList.jsx | 7 ++- src/pages/PokemonList.scss | 58 +++++++++++++----------- 4 files changed, 57 insertions(+), 86 deletions(-) diff --git a/README.md b/README.md index 4583a74..072324f 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,24 @@ Pokédex made in React using the Poképedia API. -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). - ## 🚀🚀[you can try the pokedex by clicking here](https://im-rises.github.io/pokedex-react/) 🚀🚀 +## To do list + +- [x] Create the main pages +- [ ] Improve css for all the pages +- [ ] Responsive design +- [ ] Correct search bar bugs +- [x] Add loading animations +- [ ] Correct pokemon not loading at the end of the list +- [ ] Correct web query bug (check console after clicking the pokemon pokeball intro menu) +- [ ] import and correct the intro menu pokedex (pokeball opening) +- [x] Add a pokemon search bar +- [ ] Add easteregg +- [ ] Add logo for pokemon types +- [ ] Change pokemon for clément from Snorlax to Muk +- [x] Change pokémon for Quentin from Arceus to Ultra Necrozma + - ## Documentations - [React](https://reactjs.org/docs/getting-started.html) @@ -72,39 +67,6 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo - gh-pages-publish: Publish to gh-pages branch - pages-build-deployment: Build and deploy to pages -## Organization - -it's based on the NATIONAL pokédex THE LAST VERSION - -it loads all photos IN ONCE but if it's lags too much, it will be updated step by step - -from a pokémon, we show only official artworks from pokémon (because they're cutty) - -- [x] create all the function requests - - [x] get all names C - - [x] get all icons C - - [x] get all numbers (National) Q => passed in pokémon description - - [x] from a pokemon - - [x] get his type Q - - [x] get his photo C - - [x] get all descriptions with pkm version Q - -### isolation website idea - -```mermaid -flowchart LR - client -->|HTTPS| SW - subgraph pokedex - subgraph github - SW[Site web] - end - subgraph cloud-provider - RM[Request Manager] - end - SW -->|HTTPS| RM -->|HTTPS| SW - end -``` - ## Authors - [@clementreiffers](https://www.github.com/clementreiffers) diff --git a/src/constants/pokemon-data-fetch.js b/src/constants/pokemon-data-fetch.js index 437dc7f..49e8efd 100644 --- a/src/constants/pokemon-data-fetch.js +++ b/src/constants/pokemon-data-fetch.js @@ -18,10 +18,10 @@ const clementPokemonData = { const quentinPokemonData = { pokemonName: 'quentin', - officialArtwork: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/493.png', - icon: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/493.png', - type: 'normal', - flavourEntries: 'It can freely recombine its own cellular structure to transform into other life-forms.', + officialArtwork: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/10157.png', + icon: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10157.png', + type: ['psychic', 'dragon'], + flavourEntries: 'This is its form when it has absorbed overwhelming light energy. It fires laser beams from all over its body.', }; export {pokemonDataModel, clementPokemonData, quentinPokemonData}; diff --git a/src/pages/PokemonList.jsx b/src/pages/PokemonList.jsx index f7ab1c3..dee4142 100644 --- a/src/pages/PokemonList.jsx +++ b/src/pages/PokemonList.jsx @@ -101,8 +101,11 @@ export const PokemonList = () => {
{pokemon.select ? {'official : <>}
- {pokemon.select - && } +
+ {pokemon.officialArtwork !== pokeballLoadingImage + && } +
Date: Thu, 21 Sep 2023 21:27:27 -0400 Subject: [PATCH 3/3] Updated website --- README.md | 5 +++-- src/constants/pokemon-data-fetch.js | 11 ++++++----- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 072324f..51e8295 100644 --- a/README.md +++ b/README.md @@ -15,11 +15,12 @@ Pokédex made in React using the Poképedia API. - [x] Add loading animations - [ ] Correct pokemon not loading at the end of the list - [ ] Correct web query bug (check console after clicking the pokemon pokeball intro menu) -- [ ] import and correct the intro menu pokedex (pokeball opening) +- [x] import and correct the intro menu pokedex (pokeball opening) - [x] Add a pokemon search bar - [ ] Add easteregg - [ ] Add logo for pokemon types -- [ ] Change pokemon for clément from Snorlax to Muk +- [x] Change pokemon for clément from Snorlax to Muk +- [x] Change pokemon for clément from Muk to Garbodor - [x] Change pokémon for Quentin from Arceus to Ultra Necrozma