/pokecardmaker.net

Pokécardmaker.net lets you create your own custom Pokémon cards in the modern Sword and Shield format, including Pokémon-V, V-Max and Full Art Trainers!

Primary LanguageTypeScript

Pokécardmaker.net

Pokécardmaker.net lets you create your own custom Pokémon cards in the modern Sword and Shield format, including Pokémon-V, V-Max and Full Art Trainers!

Use the tool on https://pokécardmaker.net


Screenshot of application

Setup

  • Run npm i
  • Copy .env.example into .env and fill in properties to your liking
    • It is recommended to not add a NEXT_PUBLIC_GTM_ID value during development, as this will only slow things down

Scripts

  • To start the dev server, run npm start or npm run dev
  • To validate TypeScript types, run npm run typecheck
  • To lint the code, run npm run lint
  • To fix possible lint errors in the code, run npm run lint:fix
  • To optimize all images in the assets folder, run npm run optimize:images

Adding new cards

In order to add new cards, set icons, rarity icons or rotation icons, a few steps are required. Here is an example of adding a new set icon:

  1. Add the set icon data to the data file and make sure to add it to the export array
    • .\src\features\cardEditor\cardOptions\setIcon\data.ts
  2. Add the set icon image (must be a PNG) to the set icons folder
    • .\public\assets\icons\sets
  3. Make sure the image name is the same as the slug you added at step 1

When adding new card types, there's more things to take care of:

  • When adding the card data, make sure to link it everywhere where needed.
    • For example, check out the type data. Here you can see that all types that are Pokémon types, like 'Grass', are linked with the pokemon supertype.
  • When adding the card image, make sure to put it in the correct folder structure. This is very important, because this is how the card creator finds the images automatically.
    • For example, check out the type image folder. This is where all different Pokémon types are stored. Within that folder, all subtype images can be found. The other folders, like /basic/rarity means that this is where all the rarity images that fall under the type basic are stored.
    • This might not make a lot of sense so feel free to poke around or create an issue on GitHub to ask any questions.
  • After adding new card images, run npm run create:data or restart your compiler to refresh the data