Second pull request for Hacktoberfest

Continuing from the last blog post My First Contribution in GitHub. I found a different project on GitHub with slightly more contributors and had an issue that peaked my interest.


Project:

The project I will be working on today is called saltyGacha. This project is a Gacha game. Gacha game are virtualize vending machine where you input something like a token and try to obtain rare items (cards, characters). The point of this project is to simulate Gacha games and provide the statistics of your chances of actually obtaining these rare items. The issue I will be working on is an enhancement to add GUI for the Gacha Simulator. saltyGacha is developed in Java allowing me to refine my skills in Java , and also has more contributors. (Only 3 contributors but is more active compared to my last pull request).


Issue:

The issue I took is adding GUI to saltyGacha. Opening up the project and running it I found that the project only used System.out.println which prints text to the Java console. Since all the output for Gacha Simulator was print out on the console, I had to figure out a way to move all the System.out.println onto a GUI system. On the issue I go into detail about how I will be implementing this change.

Developing the GUI:

First I need to know what I will be using to develop this GUI. The tool I decide to use is Java Swing. The maintainer of the project left details in the README.md file that this project was based off a website called Overhit Gacha Simulator by GameFever. Using this website as my GUI foundation, I begin coding the GUI.


The Java Swing library has many simple components that are easy to work with to create the GUI. The components are pretty self-explanatory I used components like JButton, JPanel, JLabel, and JTextArea. Positioning the GUI components and wiring theJButton to perform actions I created my first commit.

There was 4 main functions that provide an output I had to display on the GUI:

Clicking on the “Roll” button, display the list of characters you obtain and how many times you have rolled.
Clicking on the “Percentage of rarity characters founded” button, we are given the statistics of the percentage of rarity characters we obtain.
Clicking on the “Quantity of characters by rarity” button, we are given the statistics of how many characters by rarity we obtain.
Clicking on the “Quantity, Name and Rarity of all founded characters” button, we are given the statistics of the characters we obtained.

I was not happy with what I created, since it did not look like the website Overhit Gacha Simulator by GameFever I was basing the GUI on. What I wanted was to have ten portraits that would represent the characters when you rolled like Overhit Gacha Simulator by GameFever . The reason I could not create the GUI I wanted is because I had problems dealing with Java Swing layout system.


Fixing my problems:

After many google searching for ways to create a layout I wanted, I found that IntelliJ IDEA IDE has a visual editor for Java Swing . I tested out the visual editor for IntelliJ IDEA IDE and found that I also did not like how it handle the layouts even though it was easier than manually coding it in Eclipse. Finally I found a visual editor that seem to be simpler NetBeans IDE.

Using NetBeans IDE visual editor saved me a lot of time from manually coding Java Swing components. NetBeans IDE visual editor (drag and drop for GUI development) generated code for the layout I wanted, which let me focus on wiring the buttons. Wiring the buttons was not difficult, I just had to move the functions that were called before on the System.out.println onto the buttons. I did have to change some functions to return a string value for the GUI system to display.


Here is what my second commit looked like:

As you can see I added a tabbing, so I was able to separate the statistics and rolling unlike the first commit. I develop the design I wanted adding the 10 portraits, and used stars as temporary pictures which later can be replace for actual portraits.


The end result is me adding almost around 1000 lines of code. Note: Most of the code was automatically generated by NetBeans IDE visual editor, even though most of the code was generated It took me a couple of days to finally get the results that I wanted. If you would like to see more code, I go into a lot more detail in the issue/pull request .

3 files I added which handle the GUI components, and the other 2 files I had to edit to feed the output to the GUI.

Happy with my code I pushed my commit and start creating my pull request.

Pull Request:

I created my pull request and upload it to be reviewed. I went into a lot of details about what I had change on the pull request, because I had edited a good chuck of functions. Not only was I developing code for the GUI, I also had to change/remove functions, remove all the System.out.println and wire the GUI to work with the existing functions. I got approval from the maintainer after they looked it over for any problems and had my pull request merge into the master branch.


I found that I really like small scale projects with fewer contributors compared to bigger projects. I do want to at least gain the experience for participating in a bigger community managed project, but I have a bunch of other small projects on the back burner I liked to work on. I think I may try to contribute to a bigger project on my 4th/last pull request of Hacktoberfest.

Links:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s