Giter VIP home page Giter VIP logo

whosthatpokemon's Introduction

Who's That Pokémon?

See https://gearoid.me/pokemon/ for a live demo.

A browser-based game in which Pokémon silhouettes are shown to the user and they guess which Pokémon it is.

  • Silhouettes are generated dynamically in-browser using the canvas tag
  • Multiple difficulty settings, which choose the image source for generating the silhouette
  • User-facing stats including correct streaks and times taken

Development

You will need node and npm set up to get the code running locally. You will also need to download the Pokémon images and sounds, because they are not included in this repository. You can download them from https://gearoid.me/pokemon/downloads/pokemedia.zip. Unzip this and put images/ and sounds/ in the public directory.

Once you have done this, install the dependencies by running:

npm install

To run the site locally, you can then run:

npm run serve

To build the site to be deployed online, run:

npm run build

Testing

There is some basic testing set up using Playwright. It does a full playthrough of the game on default settings in Chrome, Firefox and Safari. To run these tests, run:

npm test

Licence

This code is licensed under a Creative Commons Attribution-ShareAlike 4.0 International.

All the Pokémon names, images and sounds are copyrighted by Nintendo.

Flag icons are from https://github.com/lipis/flag-icons

whosthatpokemon's People

Contributors

menardi avatar sora10pls avatar xzonn avatar d4rkonion avatar

Stargazers

 avatar  avatar  avatar Vivek Kumar avatar Sooraj avatar Guillaume MARTINEZ avatar Tije Vlam avatar  avatar  avatar Fynn avatar  avatar  avatar Wesley de Bruin avatar Borgen avatar  avatar  avatar Felipe López Pardo avatar Cristopher Paiz avatar  avatar Satya Narayan Goswami avatar Tercio França Santos avatar Keez Eden avatar  avatar Vukkum Sai Prakash avatar  avatar Stephano Vogel avatar  avatar Kesong Cao avatar  avatar Dave Kjell Marong avatar Anh Dung "dungi" Pham avatar Michael Bond avatar Terry Kirk avatar  avatar Kushtrim Sylejmani avatar Grant avatar Amadeusine avatar Joey avatar Miles Spoor avatar Susie avatar Lina avatar Igor Fernandes avatar Kensuke Sano avatar Egzon avatar  avatar ridhwaans avatar Muhammad Syawaludin avatar sze chan avatar NedEX avatar  avatar Nick LAM YEE MAN avatar  avatar Rene Rösch avatar Kevin Reber avatar Simon avatar Alex Safatli avatar Jérôme Pott avatar Konato Debug avatar  avatar Kaciano Ghelere avatar  avatar Ilyas Mohamed avatar Daniel Tovar avatar Raphael von der Grün avatar Jason Athanasoglou avatar albert avatar  avatar Cristianno Martins avatar Jonathan Zúñiga avatar Jonathan Coutiño avatar Fergus Leahy avatar Steve Geluso avatar Jayson Harshbarger avatar  avatar Kevin Wang avatar Marcus Heine avatar  avatar Andrés Hernández avatar Rob Hilgefort avatar Dylan Conway avatar A. Matías Quezada avatar Jerome Martinez avatar

Watchers

James Cloos avatar  avatar  avatar  avatar  avatar  avatar Susie avatar  avatar Chris avatar  avatar

whosthatpokemon's Issues

[Bug] Generation loops after completion

generationFinishedMessage is never shown to the user after all Pokémon in your selected generation have been guessed. Unsure of when exactly this quirk made its way into the project, but it might have been some time after Generation 9 support was added (my initial tests around SV launch didn't have this issue).

Example attached is of a run where only Generation 6 was selected, and after I went through all 72 species, it started over again.
image

Idea: add a timer

When you join the site you should get a timer before the pokemon shows up to give you time to click into the site and get ready to start typing it would help quite a bit for when you first load the site.

Generation swap not recognized between rounds

If you change the difficulty after guessing a pokémon (or giving up) and before the next round, it does so normally. However, the same doesn't apply to generations, where if you change them in that period, that change is ignored. This is fixed by changing to a third generation before giving up or guessing right (I said a "third" generation because it has to be different than the one you chose to swap to initially, otherwise it just gets ignored). Further changes made after guessing and before the following round are all ignored.

For example, if I swap to gen 7 from gen 1 during the aforementioned period, the generated pokémon will still be from gen 7. Changing to gen 6 before guessing fixes the problem, but changing to gen 6 and back to gen 1 in a single round (even before guessing) will still generate pokémon from gen 7.

I've left some examples below: Exploud found in gen 5 and Drampa in gen 1. You can see the changes were made before the round started because the "Your new settings will take effect for the next Pokémon" message is missing. This happens in every difficulty.

image
image

Nitpicking aside, the website is a lot of fun and I enjoy testing my memory in there from time to time. Great work!

Just an Idea

Here's an idea. This is my first day on GitHub so I apologise if I'm doing anything wrong. I've been wanting to memorize the index numbers of all the pokemon. Maybe a new mode can be added that just shows the index number and you have to type in which pokemon it is?

Idea: Add options where it is possible to change the time between appearance of Pokemon

Every time players guess the name of a Pokemon correctly, it is necessary to wait 3 seconds until the next Pokemon appears. It would be interesting if there were options to change this... like making pokemon appear instantly etc, and/or maybe even making the base time (3 seconds) gradually decrease with each hit, thus making players feel like they are improving in speed as they learn the names of Pokemon and hit the names faster and faster.

Gen 8 Pokemon not working

Whenever I write in the correct spelling of the pokemon, (on exact), they don't validate and I have to press I don't know to continue.

A way to pause the game without ending the streak or adding a statistical outlier to your stats.

Sometimes you just gotta walk away from your computer for whatever reason, and it'd be nice to be able to do that (especially when tackling longer challengers like a full run of all 9 generations) without losing your streak or the next Pokémon being recorded as taking you 92387203489273 seconds to guess.

Your only options now are to click "I don't know" when you get back, skipping that Pokémon and ending your streak (Edit: and also affecting your stats as of the latest update), or to just enter it when you get back, adding a huge spike to your time.

Maybe a keyboard shortcut that you can press as an alternative to "Enter" during the countdown, that instead pauses the game and doesn't show the next Pokémon until you come back and press "Enter" again?

Or whatever other idea you have for implementing something similar.

Type mode

Maybe add a toggle for a mode which also requires you to correctly input the Pokémon's type(s) as well?

Add a random pick without replacement mode

Add an option to have selected Pokémon excluded from subsequent selection pools, such that no repeats occur until you've gone through the entire catalog of Pokémon (in the selected generations).

Gen:9 Wrong Image

Some of the Generation 9 Pokémon will show an image that doesn’t match the correct answer. For example, the website would show an image of Frigibax, but when I click the “I don’t know” button, it will tell me the correct answer is “Toeadscruel”. The weird part is that it’s only happening for SOME
Generation 9 Pokémon, all other generations work just fine. It was also fine earlier this morning as well as yesterday. I tried closing and reopening the website (didn’t work) as well as closing my browser (also didn’t work). I’m trying to use the website to better memorize the Generation 9 Pokémon since this is my first time being an active Pokémon player when a new generation released, so if this could get fixed as soon as possible, that would be greatly appreciated. Thanks!
825E3563-DBB3-4812-92DA-B74EC286111D

does not display the correctness of the answer

It doesn't display anything when the guess made is wrong and also a little ambiguous for the users while submitting the answer .
I recommend adding a submit button and display if it's wrong answer for making it user friendly.

Track more stats

Just an idea I had. Add a stats page with charts or something. Was thinking along the lines of being able to see which pokemon you got wrong most frequently so you can focus on memorizing those.

Elite Mode issues

Meltan and Melmetal cries do not play, and when practicing with exclusively Gen 8 it stops after 42 cries played.

(also, I'm not sure if you're aware but the cries currently in are cut off)

Dragapult not working

I'm very sorry for all these errors but for some reason only dragapult isn't validating.

[Request] Update Pokémon Artwork

Now that official artwork has been released for all of the Scarlet/Violet DLC Pokémon, we can now update the project with this artwork, as opposed to using renders from Pokémon HOME.

The artwork can be downloaded here (will be deleted once pushed). Several have been updated to remove the white glow provided by official press releases, courtesy of Bulbapedia contributors.

Example:
image

no limit "no pokemon left!" on elite mode

I play who's that pokemon a ton in class and today, I found out that there may be a glitch where while playing with all generations enabled on ultra mode where the "no pokemon left!" screen is not shown, instead the pokedex being repeated several times (at least 4 times from what I've experienced from getting up to a 2023-pokemon streak)
image

Suggestion for a Custom Mode

Hi there,

First of all, I’d like to thank you for creating this amazing site and for making your code available on GitHub!

I would like to suggest the implementation of a "custom mode" on the site. Currently, it’s possible to choose between different Pokémon generations to guess the silhouettes, which is great. However, I believe that a custom mode, where the user could manually select specific Pokémon they want to include, would make the experience even richer and more personalized.

The idea is that the user could create a custom selection, choosing a specific set of Pokémon regardless of generation. For example, they could choose 34 specific Pokémon from the first generation, 12 from the second, 24 from the fifth, and 16 from the sixth. This would allow each person to create their own challenge, focusing on Pokémon they haven't mastered yet or a mix of favorites and more challenging ones.

I believe this feature would add more variety and a more personalized experience, while also catering to different difficulty levels and preferences.

Thank you so much for considering this suggestion. I’m happy to discuss any additional details or clarify anything!

Best regards

Problem in the french version

So I've had close to no problem while playing this game in its french version, but there's one pokemon that doesn't work. It's Litten, if you type in "Flamiaou" (which is its french name) into the box, it doesn't mark it as right. However if you click "I don't know", the answer is... "Flamiaou".

The nature of auto complete in forgiving

Love this game, I play it nearly every night to help get to sleep. My streak on All gens - Normal - Forgiving is 64 which I'm quite proud of.
I love the forgiving spelling setting (thought I swear its more strict on earlier gens than later), but I don't love that because it often auto-completes the name while I'm mid typing, I'll type extra letters on the end of the name because the text box is still live after the answer is correct. Would be great if the text field was locked when the correct name was entered, so it doesn't read 'Oddishsh' or 'Phantumpum' etc.

Ferroseed has an incorrect battle cry

I noticed a slight issue with Ferroseed’s entry. It seems that it has mistakenly taken Venipede’s cry. I just thought this might be an issue if Venipede’s cry shows up in the Elite Class and turns out to be Ferroseed, it could really mess up players’ streaks. So far, I have encountered this in the Normal, Ultra and Master classes.

Gen 9 pokemon

The images for gen 9 pokemon have now been released on offical pokemon website now, so now you can replace the ones being used right now with the correct ones.

Palafin and Finizen have the exact same silhouette

As the title says, Palafin and Finizen have a very similar design and the only way to differentiate the two is the heart on Palafin. Which is not visible in the silhouette. This is just slightly annoying because it makes it a complete 50/50 guess on which one is which. But, Palafin's hero form has a completely unique design and silhouette, which I would recommend using its silhouette rather than the base form just to make it easier to tell them apart.
Palafin-Hero

Alternate forms and regional forms

Will there ever be an option to turn on alternate forms and regional forms? It would be nice to mix in Alolan, Galarian, and Hisuian forms as well as identify other forms of Pokemon like Burmy's different cloaks and Keldeo Resolute.

Select Multiple Generations at Once

This is a feature that has been requested by a few people, and would certainly be nice to have.

Right now, only one generation can be chosen at a time to get Pokémon from. The randomisation of this is done by filling an array with numbers from the lowest number of that generation (e.g. 152 for Gen 2) to the highest (251 for Gen 2), then shuffling this. Adding support for multiple simultaneous generations should be a case of adding the numbers for all desired generations into this array and then shuffling it.

Mode suggestion

Just an idea I had. For those of us who really enjoy punishing ourselves, a "fun" challenge might be a mode using only menu/PC sprites. There's been a few versions of these over the years, and with the most recent games to actually have proper sprites in the menus/PCs not actually including all the Pokémon, the question of which sprites to use is there, but regardless, I think it'd be a "fun" time. 😅

Translation errors in the french version

Hey it's me again !

As I don't know anything about coding, I'll just list the problems (which are mostly translation based) in the french version of the game as you proposed and I'll let you do the changes, sorry for that !

For the HUD I'll go from left to right and top to bottom.

On the left :
Generations and difficulty are correct.
For the ''Spelling'', ''Exact'' translates to ''Exacte'' (missing an E as Orthographe is a female noun).
''Sound'' translates to ''Son'' in French.

In the middle :
''Who's that Pokemon ?'' translates to ''Quel est ce Pokémon?''.
''Also known as'' translates to ''Aussi connu sous le nom de'' (quite the lenghty translation but the most accurate one).
''Next Pokemon in...'' translates to ''Pokémon suivant dans...''

On the right :
''Streak'' translates to ''Consécutif'' (missing CU).
In the chrono section, ''Previous'' translates to ''Précédent'' (you have one E too much there).

Now for the last little things, it's kinda hard to explain as I don't know how code works.
You've probably realized that many french names of Pokemons have an accent on some vowels (é, è, etc.). For many of those, juste writing the vowel works (ie. for Charmander, if you write salameche, it will be correct even if the spelling is salamÈche).
This works for most of the Pokemons, except for one witch is Phantump. The french name is Brocélôme and if you write brocelome it's not considered correct. You have to at least write brocelôme to get it right, so e/é is alright but O is not considered the same as Ô.
Also there's a ç in French which is another character for c used before some vowels to change the sounding of the word. Just like for the o/ô, c is not recognised as ç, which is used for two Pokemons (Bergmite and Escavalier -> grelaçon and lançargot).
I don't know how the game recognizes E's as é, è or even ê, but if you could make it as the game recognizes o as ô and c as ç it would be awesome !

Voilà ! I think I've listed every little thing I've come across while playing the game !
If I ever find something else, I'll be sure to tell you about it, and if you implement the 8th generation in the game once the new games come out, I'll be sure to give you feedback if there's anything aswell !

Thank you again for your ealier modifications in the french version and the ones this post will make you do :p

Add a reset button

I would love if a reset button was added, so I can try to beat my best a lot more times than currently possible. A reset button would add more variety into the gameplay. Thanks and have a great day!

Forgiving Spelling mode problem

When using Forgiving Spelling mode, the program adds missing letters by itself and counts unfinished answer as the right one. I only typed "mewt" and it immediately popped out as "mewtwo", although I haven't finished typing yet. Maybe adding the Enter button for when typing is finished would be a decision?

less annoying "I don't know"

You click "I don't know".

The text box is deselected.

Enter to skip no longer works.

3 seconds later

Can't type because text box is still deselected.

AngerGIF

Gen VIII inclusion

I understand that all of the images required haven't been released on bulbapedia, which is where you source them from, but once they are, will you be updating the site to include the pokemon of Generation 8?

Some suggestions that can make the game better (in my opinion)

I love the game so much that I've even completed all 905 Pokémon in one streak a few days ago. Either way, I'd like to suggest some additions that can make long streaks better or just make the game even more enjoyable.

  1. A chance to get a shiny form of the Pokémon. This chance could be very low if you have no streak, but keep increasing as you continue in a streak. Also, it could be a top chance so if you're on a very high streak the chance doesn't keep increasing more.
  2. Another chance to get a Pokémon variation, such as Alola or Galar forms. There's no need to add new Pokémon, just to add a chance to get a variation if the Pokémon has one.
  3. A selector that lets the user change the time between another Pokémon appears. Sometimes it's a bit boring to wait 3s every time you want to get a new Pokémon.
    I could help if it's needed, even tho I'm a beginner.

Thanks for bringing out this awesome game <3.

Pokemon Dex No. 803-809 Missing

I downloaded the image repo from the website and Poipole, Naganadel, Blachepalon, Stakataka, Zeraora, Meltan, and Melmetal are missing. Would you be able to add the pokemon onto your live site, or at least your image repo. Thanks in advance!

Treasures of Ruin names formatted wrong

The names are currently as

Ting-lu
Chien-pao
Wo-chien
Chi-yu

Whereas they should be

Ting-Lu
Chien-Pao
Wo-Chien
Chi-Yu

The second part of the name is capitalized officially.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.