Git Product home page Git Product logo

racp's Introduction

rAthena Control Panel

A web-based database GUI and control panel for rAthena.

Design goals

Minimal configuration

Just install and run. RACP will read all data from either the rAthena data files or mysql database.

Total abstraction

RACP contains no data. No fixtures, no enums, nothing. RACP will read all data from either the rAthena data files or mysql database and the RO client files.

Integration stability

Unit and E2E tests run on each commit and tests run against a real rathena instance.

Function over form

The UI prioritizes functionality over aesthetics. Does not support theming, keeps things simple.

Caveats

This is a pet project of mine, so it contains a lot of experimental code that I wrote for fun and practice and that would be inadvisable to use in a professional project.

Here's a list of what's experimental:

  • A custom frontend router (I just wanted to build one, the project really had no need for this)
  • A custom logger (Extremely pointless, I just wanted to code this. There's a million libraries that do exactly this)
  • A custom resource library (born out of necessity and inexperience with what's available off the shelf. I needed some abstraction around all the various static data formats rAthena provides)

Everything else however is pretty much industry standard.

Prerequisites

To run RACP you will need the following software installed on your machine:

Development

  • Clone this repository on a machine matching the prerequisites
  • Open a terminal and navigate to the project root
  • Run yarn install
  • Run yarn api:dev to start the api in dev mode.
  • Run yarn app:dev to start the app in dev mode.
  • Visit http://localhost:8080/ in your browser.
  • (Optional) Run yarn test:unit to run the unit tests (add --watch to keep the runner active).
  • (Optional) Run cypress open to run open the E2E test development tool.

Developing against a custom rAthena instance

  • Install rAthena on the same machine as RACP.
  • Create a new file .env.local in the project root folder
  • Add the following to the file, but substitute <path> with the absolute path to your rAthena folder:
rAthenaPath=<path>

Branching strategy

All development happens in branches. The main branch gets deployed to the demo site listed above. No branch is allowed to merge unless all tests pass.

Testing practices

All major features should be covered by E2E tests. As for unit tests, they are not required, but are encouraged for more complex units.

Deployment

This is a fairly standard React + Express.js application, so you can use the provided scripts to manually manage a production deployment if you have the technical experience to do so:

  • Clone this repository on a server matching the prerequisites
  • Create a .env.local file in the project root folder with your desired settings (see below)
  • Run yarn install to install latest dependencies
  • Run yarn db:deploy to deploy database migrations
  • Run yarn build to build both the API and app, or yarn (api|app):build to build one.
  • Run yarn serve to serve both the API and app, or yarn (api|app):serve to serve one.
  • (Optional but recommended): Instead of yarn serve you can use PM2 for better stability and monitoring: pm2 restart ecosystem.config.json

This .env.local configuration will work for most users:

NODE_ENV=production
reactRefresh=false
hostname=<your servers public hostname>
apiPort=<your desired port for the api>
apiBaseUrl="//<hostname>/<apiPort>"
appPort=<your desired port for the app>
rAthenaPath="<path to your rAthena folder>"
jwtSecret=<your secret>

You can see which configuration options are available:

  • For the Api: run yarn api:serve --help.
  • For the App: see the env variable in webpack.config.ts.

Assets

Once you have RACP running in production, you will need to populate it with data for the best user experience. If you do not do this things like item descriptions, monster and map images, etc. will not be available.

To do this, simply sign in to your admin account and go to the Assets page and use the asset uploader. Additional instructions are available on the page.

High level technical details

This information is intended for developers of RACP. None of this is relevant if you are simply forking/cloning RACP and running it for your server as-is.

  • All rAthena specific code is abstracted away and located in the rathena folder. All API services are agnostic to the underlying data source.
  • The rAthena version we integrate towards is a fixed commit hash in package.json.
  • The rAthena database is interfaced with using knex and an introspected type definition generated with yarn codegen:rathena. Use this command and commit the changes to keep the knex bindings up to date whenever bumping the rAthena version.
  • The RACP database is defined using a standard prisma setup.

racp's People

Contributors

kasper573 avatar

Stargazers

Sherif Awad avatar Rotsen Mark Acob avatar Spiceze avatar Albin Carlson avatar Sapito Sucio avatar

Watchers

 avatar

racp's Issues

type safe env vars

Use typesafe cli arguments that default to env variables of the same name

User roles + limit admin pages to admin role

Utilize rAthena user groups. Must update express middleware and rpc mechanism to support roles.

  • POC with admin pages.
  • Update app bar:
    • Remove admin title in user menu
    • Show user profile (username and avatar) instead of admin icon
    • Show user menu in app bar even when signed out (with sign in option when clicked)

Remove redux

After the move to tRPC in #72, redux is no longer used widely. The few uses can be replaced with regular react state. This will reduce the bundle size significantly.

Reduce entry point bundle size total to below 244KiB

Task is done when webpack production build no longer produces a warning.

Things to try:

  • Improving bundle tree shaking (likely already close to optimal, but worth trying).
  • Finding and removing unnecessary packages
  • Replacing large packages with smaller alternatives
  • (Last resort) Creating a minimal landing page that sweeps the issue under the rug (slow load will be postponed to first navigating into a heavy zone)

Item script parser and presentation

  • Improve parser to extract meta data properly instead of the current hacky way
  • Use the new parser to produce a pleasant presentation of item properties, rather than just displaying the raw script.

Admin edit mode

All entities should be editable. Make generic system. Should seamlessly edit all data sources, ie. itemInfo.lua and item_db.yml, etc. Admin menu should also expose a download function for any uploaded/changed files.

Use fixtures for rathena e2e test data

All rathena data e2e tests are currently based on the data that currently exist in the base rathena installation. This is flaky, since rathena could change their data.

Things to try:

  1. (Best idea) Inject fixture files into the given rathena instance as cypress starts.

rAthena supports custom imports for all data. So utilizing this would make our tests also confirm that RACP handles imported files. It also allows us to rely on our own fixture data instead of assuming what the data looks like in the rathena instance, which is the primary goal of this issue. But what's best is that it allows us to also keep sanity testing the rathena data, but without relying on it. If rAthena releases updates that breaks RACP, we will know.

  1. (Mediocre) Update rAthena drivers to allow specifying custom files outside of the rathena folder.

This is almost as good as 1, but less graceful. It allows us to rely on our own fixture data while we keep sanity testing rAthena, but it will not be confirming that we support the rAthena import flow.

  1. (Bad idea) Completely swap the rathena instance when e2e tests run. Create a new minimal rathena instance in cypress/fixtures.

This solves the primary goal of this issue, but it would make us blind to rAthena changes. They could release breaking changes and we would not be able to automatically know.

Admin system controls

ie. restart server or run in-game admin commands from the browser. Research possibilities before starting this task.

Refactor item meta into generic meta service

By generic meta service I mean a service that provides system wide meta data by reducing all item and monster data into the various meta data we need. This service will likely handle more entities in the future.

This new service will allow us to expose the monster meta data we need to be able to add all desired filters to the monster search page, ie. monster level ranges, monster sizes, etc. (Meaning this issue is a prerequisite to #6 )

Slow type definition resolution in ZodMatcher

TSC yields error "Type instantiation is excessively deep and possibly infinite" if not using assertion in the following code:

const ItemGrid = DataGrid.define<Item, ItemFilter, Item["Id"]>({
  // Without assertion typescript yields possibly infinite error
  query: useSearchItemsQuery as unknown as DataGridQueryFn<Item, ItemFilter>,
  id: (item) => item.Id,
  link: (id) => router.item().view({ id }),
  columns: {
    Name: "Name",
    Buy: "Buy",
    Sell: "Sell",
    Weight: "Weight",
    Attack: "Atk",
    MagicAttack: "MAtk",
    Defense: "Def",
    EquipLevelMin: "Min Level",
    EquipLevelMax: "Max Level",
    Slots: "Slots",
  },
});

Item script parser

This is to enable filtering in items affecting element, status, race, etc.

Build planner page

A tool that allows you to put together builds. A build consists of equipment and items of the users choice. For each build the tool can automatically generate an optimal farming guide: Which maps to go to, estimates on how many kills are required for the desired amount of drops.

  • Stage 1. Local storage. One build per device.
  • Stage 2. Local storage. Multiple builds per device (CRUD).
  • Stage 3. Remote storage. Multiple builds per account. If signed out, fall back to local storage.

Update matcher.ts to only have concrete types

Generate a matcher based on generic interface but produce concrete set of types for all desired permutations. The reason this is necessary is because the filter runtime doesn't handle intersecting types. The current matcher already avoids this by explicitly defining concrete types. Refactoring should produce some code that does this automatically so the developer doesn't have to think about this.

Shop service + pages

Make it possible to browse all npc shops from the game (Not to be confused with vendors, user based shops).

Deduplicate reused sprites

Monster and item images are currently duplicated for all entities sharing a sprite. This is bad for several reasons:

  • Unnecessary network requests in production.
  • Makes the admin tool slower to use due to extra file uploads
  • Makes the admin tool metrics misleading: false positives when counting missing images makes it hard to understand how (un)successful an asset import was.

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.