Welcome to the NoNamePokemonGame github. This is a game that is based off of PokeIdle Extended (which in turn is based off of PokeIdle). This game is in extreme alpha stage so please do not expect much.

Developer Setup

You will need node installed, so that the npm command is available to use

Run npm ci to install the project dependencies

Run npm start to compile the sources in watch mode - any code changes will trigger a recompile and update the browser.

The local server will run on localhost:3000 by default, but should be configurable by passing a host or port value to the npm command, eg

npm start -- --host "0.0.0.0"
npm start -- --port 12345
npm start -- --host "::" --port 7777

You should be able to access the local server from other devices on your network (eg, a mobile connected to the same wifi) by hosting on "0.0.0.0"

You can run all Jest tests with the command npm run test

Releasing

This step should only need doing by the project maintainer.

The command npm run build:gh-pages can be run to compile all code in production mode,and output to the docs folder. Then commit the changes with git and push up to the master branch (or whatever branch gh-pages is set up to track).

Source Folder Structure

The following diagram is ordered by topic rather than alphabetically, to make finding what you want easier. Some .js files may now be .ts files as we are in the process of migrating to Typescript

src/
│
├── index.html        // Main html file
├── app.js            // js to attach Vue components to the html file
├── components/       // All Vue components
│   ├── App.vue       // Main component, attached to the html file
│   ├── *.vue         // Other components used in App.vue
│   ├── common/       // Generic components for use in many other components
│   └── modals/       // All modals, collected into /src/components/Modals.vue
│
├── index.scss                  // Main scss file, imports all other scss
├── styles/
│   ├── style.scss              // Styles for the main display
│   ├── bulma.custom.scss       // Imports for the specific Bulma features we want
│   └── bulma.overrides.scss    // Overrides for Bulma sass variables
│
├── resources/        // Files to be copied into the build output (mostly images)
│
├── index.ts          // Main js file, where the game starts
├── modules/          // Javscript modules
│   └── *.js          // Various parts of the game, hopefully descriptively named
│
└── store/            // Vuex stores for the game state
    ├── index.js      // Imports all stores into a single store for use in App.vue
    ├── actions.js    // Root store actions
    ├── mutations.js  // Root store mutations
    └── modules/      // Individual store modules

Other Folders

test/ All Jest tests

.config/ Configuration files for build tools

.github/workflows/ Github automation configuration

docs/ Autogenerated build files for github pages hosting

Frameworks and Development Tools

• Webpack (Build process)
• Vue 3 (HTML templating and update management)
• Vuex 4 (Vue state management)
• Eslint (Enforces consistent code style, catches some errors)
• Sass (Styling, compiles to css)
• Bulma (CSS framework, similar to bootstrap)
• FontAwesome (Icons)
• Typescript (Compile-time type-checking for javascript)
• Babel (Transpiles modern js for older browser support)
• Postcss + Autoprefix (Adds vendor prefixes to css, for older browser support)
• Jest (Testing Framework)