wavebeem / pkmn.help Goto Github PK
View Code? Open in Web Editor NEWpkmn.help remembers strengths/weaknesses of Pokémon for you
Home Page: https://pkmn.help
License: MIT License
pkmn.help remembers strengths/weaknesses of Pokémon for you
Home Page: https://pkmn.help
License: MIT License
The favicon looks really janky. I think I should just hand-draw it in 32px and 16px versions in Photoshop.
CSV import/export for forms in the offense coverage screen would be cool.
Both of these moves add a 2nd (or 3rd) type to Pokémon (grass or ghost)
It puts a # in the URL. Make it stop.
Go to the last page of the pokedex and tap the PREV button, see page jumps
I don't know if I necessarily want to pull in Tachyons itself, but using teeny tiny classes might be useful and might make the style payload smaller too.
Visitors get a completely blank screen if JS fails to load.
It should say something about how to contact me to report the issue.
A single spritesheet is too massive, and search makes it impossible to generate a sprite sheet for every page, plus this would be really complicated. Let's just use image preloading for the next page of images... eventually.
Also, measure the build size before and after!
Rather than a home-grown function, let's just use the npm package classnames.
Most images are 40px but some are larger. We should normalize the image sizes or do something so that they are all scaled by integer scale factors. Some of the new Pokemon have poorly scaled pixel art because of this.
The type selector is really laggy and slow and horrible on iOS because Safari can't handle scrolling a fixed position element :(
So I'm thinking we can just have an accordion in the page to select stuff anyway.
It might be kinda annoying to set up the resizing animation because you can't transition on height:auto but whatever I'll figure it out.
Hi,
I was just using this and I thought of a handy feature: when you search a pokemon in the Pokedex, it would be handy that when you click, the pokemon's types get loaded into either the attack or defence tab.
If you want I can create this feature and create a pull request, if you would rather do it yourself, please go ahead :)
Kind regards
The footer is annoyingly close to the content, let's make it stick to the bottom and have a larger top margin.
body: flex flex-column min-vh-100
#react-root: flex-auto
I am using your tool to pick a counter to Rocket leaders' Pokemon. E.g. Salamence with Fire attack.
I first look at the bottom of the "Offense" tab for Fire. This tells me that Rock/Fire/Water/Dragon would be a good type.
I then look at the top of the "Defense" tab which tells me that Ice would be the the best attack type to use.
So a really good candidate would be e.g. a Water Dragon with Ice Attack.
Seeing good defensive types next to good attack types would be very handy.
Third tab. Searchable Pokédex with vital information
I love your project it is truly amazing and helpful!
As an enhancement I would like to add multilingual support, I will be happy to assist if that's ok.
Thanks!
I'm faking WCAG AA contrast by using heavy drop shadows, but it's unclear if that's enough, and it doesn't look that good.
Explore alternative designs that convey color well without compromising contrast.
Maybe a border (all around) or a big stripe on the left could be used?
Main abilities list https://ikewise.neocities.org/typecalc.htm
Double check new gen7 abilities http://bulbapedia.bulbagarden.net/wiki/Category:Abilities_introduced_in_Generation_VII
Make sure these are in a radio button group (or dropdown...)
Using Vite with Preact seems like a great way to reduce bundle size and speed up development (HMR 👀)
Hide the clear x when there's no input
I made a translation based on the official site of Pokemon
Format is:
EN
JA
Normal
ノーマル
Poison
どく
Bug
むし
Fire
ほのお
Electric
でんき
Dragon
ドラゴン
Fighting
かくとう
Ground
じめん
Ghost
ゴースト
Water
みず
Psychic
エスパー
Dark
あく
Flying
ひこう
Rock
いわ
Steel
はがね
Grass
くさ
Ice
こおり
Fairy
フェアリー
HP
HP
Attack
こうげき
Defense
ぼうぎょ
Sp. Atk.
とくこう
Sp. Def.
とくぼう
Speed
すばやさ
Make it easier to debug or something
# parameters go in the query string so pages can be modified later
# use space (+ inside query string) to separate types
/offense?types=fighting+ground+fire+psychic
/offense?types=
/defense?types=normal
/defense?types=fairy+poison
# q is the search query
# page is the page number
/pokedex?q=&page=0
/pokedex?q=saur&page=0
/pokedex?q=sa&page=3
# no arguments here
/info
I think something like React Router's BrowserRouter
component would be good for this. Google Analaytics integration can come as part of a separate ticket.
The _redirects
file should have a rule like /* /index.html 200
so that all routes serve the basic HTML file that starts the single page app. Right now the _redirects
file is not being copied into the dist
folder though. It needs to be copied there during npm run build
so that Netlify will read it.
Also the devServer
section of webpack.config.js
will need historyApiFallback: true
to serve this HTML in development mode as well.
I should figure out how to make this a PWA so people can install it and use it offline
Since the update I can't find the button that previously was there to go to Defense tab of a pokemon from the pokedex search result?
We can cache better and have slightly more debuggable output with split bundles featuring a vendor.js + bundle.js instead of putting all 3rd party libs into the same JS blob.
Due to ... color blending, I guess. The text input on pkmn.help doesn't quite meet the 3:1 ratio. Buttons do, though.
Border colors should probably be like, proper non-alpha values, so it's easier to verify contrast requirements.
Pokedex text font size is inconsistent when resizing the width of browser
Touch targets should be 44x44 px minimum
When did minifying get so hard? Why are Uglify and Closure both barfing on my JS? I should figure it out because >1MB is too big for such a simple site 👎
The first time I visited this website, it was in light mode. I was recording a video and showing it on screen, and it being in light mode made it easy to see what i was doing in the video.
Now the site is in dark mode and I've found no option to turn it off. Dark mode is great at night, but during the day it makes me have a hard time seeing what's on the screen and also makes things less visible when i use it in my videos.
Could you add a way to at least switch between light and dark mode instead of always having dark mode turned on?
__
Nvm, solved. It was just my windows settings. Feel free to delete this issue, i dont think i cant do it myself
The contrast levels are a complete disaster on the site. I should fix them.
I can use national dex number to map PokeAPI to Bulbapedia https://bulbapedia.bulbagarden.net/wiki/List_of_Pok%C3%A9mon_by_National_Pok%C3%A9dex_number
A small handful of new Pokémon were added in these DLC (#891-#898), and it would be neat if they could be supported by the Pokédex feature.
The only thing to note is that there are 3 forms of Calyrex (#898) with different typings, otherwise your dex crawler should work fine with the other new Pokémon.
Mobile Chrome is a piece of trash, so let's add some cache buster query params to the JS/CSS somehow.
Either add alt="description"
or role="presentation"
onto all img tags.
The app should scroll automatically to relevant sections rather than the top
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.