For full instructions on how to use RLBrush, checkout the Instructions document
yarn install
yarn start
Once this is running, the dev server can be accessed via browser at:
http://localhost:3000/
This project was bootstrapped using create-react-app
. You can see the other readme for it at cra-README.md with more instructions.
Python files in this repo are all namespaced under the py/
subdirectory.
- Clone PCGRL Gym repo to a directory outside of this repo:
git clone https://github.com/amidos2006/gym-pcgrl
pip
install the gym-pcgrl package:
cd /path/to/gym-pcgrl
pip install -e .
-
Switch back to
py/
in this repo. -
Test your environment by running
test-env.py
.
- Make a branch from
master
and add your changes:
git checkout master # switch to master branch
git pull origin master # sync up with remote
git checkout -b your_branch_name # make your new branch
# make changes
git add -A . # add your changes
git commit -m "description of your changes"
git push origin your_branch_name
-
Using this branch, open a pull request on Github (Instructions here)
-
Make sure pull request status checks pass and the group gets a heads up.
-
Merge your pull request. Ideally, try to use the
Squash and Merge
feature to consolidate all your commits into 1 before merging.
The layout of the UI can be generally updated using the src/Layout/styles.css
file. This can be used to adjust the spacing between each section.
By uncommenting all the background colors, spacing issues can be more easily debugged:
Each component is located in the src/
directory and given its own folder. Each folder contains an index.tsx
and a styles.css
file to describe the TypeScript and CSS respectively.
All icon files are available in the src/Icons
directory but they are not all componentized. They are from a library available here:
To componentize an icon simply add a component for it in src/Icons/index.tsx
. Example:
// Define a unique constructor name starting with Icon
import { ReactComponent as IconFoo } from "./000-foo.svg";
// ...
function Icon(props: IconProps) {
const iconProps = {
// ...
};
switch (props.iconName) {
case "pencil":
return <IconPencil {...iconProps} />;
case "foo-unique-name": // give the icon a unique name
return <IconFoo {...iconProps} />; // return its component
default:
// This is basically an unsupported icon
return <div>{"UNSUPPORTED ICON: ${iconName}"}</div>;
}
}
Services are ways to encapsulate our utility classes in a convenient place. Example:
export class MyUtilityService {
public someMethodOfTheService() {
// ...
}
public static someStaticMethodOfTheService() {
// ...
}
}
The src/services/AppState
service scaffolds and manages the setup of the global application state.
The src/services/Numeric
service manages math operations, data structure creation etc.
TensorFlow operations live inside src/services/TensorFlow
as stateless functions in the TensorFlowService
class. This allows for separation of concerns and makes them easily usable anywhere else in the code without much boilerplate.