Hacktoberfest Week 4

It's the fourth and last week of Hacktoberfest. My third PR that I submitted last week wasn't reviewed, so for this final week, I decided to work on two different issues, one of which was for a recipe app written using Angular and another which was a Space Invaders game written in Python.

Foodilo

The issue
The pull request

The Issue

I found this issue interesting because I have also worked on a recipe app in the past using React. However, this project was written using Angular, which I am not as familiar with. I wanted to challenge myself this week so I thought this would be a good place to start.

For this issue, the main problem was that for the Sign Up form, the password and confirm password fields should have matching inputs before the form can be submitted. However, the validation was not working and therefore, a user could submit the form with different passwords.

The Code

The program uses a Directive to compare whether or not the inputs are the same. The problem before was that the input was not being correctly passed to the validate() function, which I rewrote in my pull request:

export class MustMatchDirective implements Validator {
  @Input('appMustMatch') appMustMatch: string;

  constructor() {}

  validate(control: AbstractControl): ValidationErrors {
    let confirmPassword = control;

    let password = control.root.get(this.appMustMatch);

    // return null if controls haven't initialised yet
    if (!password.value || !confirmPassword.value) {
      return null;
    }

    // return null if another validator has already found an error on the matchingControl
    if (password.errors) {
      return null;
    }

    // set error on matchingControl if validation fails
    if (password.value && password.value != confirmPassword.value) {
      return { appMustMatch: false };
    }

    return null;
  }
}

The argument passed to the function, control is used to get the confirmPassword field and control.root.get(this.appMustMatch) is used to get the password field since I added the property appMustMatch="password" to the HTML tag for the confirmPassword field. To be honest, I don't have much experience with form validation in Angular and it was my first time using Directives, so this tutorial greatly helped me understand how to approach this issue.

Feedback

After the changes were made, you can see that if the passwords don't match, the form will show an error and the Sign Up button will be disabled. After I submitted this pull request, it was promptly accepted and successfully merged.

Atari Space Invaders

The issue
The pull request

The Issue

I wanted to work on this issue because I really liked the project and it is also written in Python which I have no experience with but want to learn.

The issue was that the game had a default size of 750x750 pixels, but the project owner wanted to add the option to run the game in full screen mode.

The project uses pygame, which provides a lot of built-in functions and features to create games.

The Code

First I created a class that has a function to toggle between default and full screen modes, which is triggered by pressing [f]:

class DisplayControls:
     def toggle_full_screen():
        screen = pygame.display.get_surface()
        if (screen.get_flags() & pygame.FULLSCREEN):
            pygame.display.set_mode((750, 750))
        else:
            info = pygame.display.Info()
            pygame.display.set_mode((info.current_w, info.current_h), pygame.FULLSCREEN)

display_cfg = DisplayControls

I also added the following label to the screen:

        sfx_label = control_font.render('Toggle Full Screen', 1, (0, 225, 0))
        CANVAS.blit(sfx_label, (starting_x + 125, 655))
        sfx_key_label = keys_font.render('[f]', 1, (240, 0, 0))
        CANVAS.blit(sfx_key_label, (starting_x + 470, 655))

The hardest part about this issue for me was that the aspect ratio of the game was a square and had to be centered in full screen mode. Because each element was placed on the screen individually, I had to reposition everything. This is the method I used to center the background in the middle of the screen:

         screen_rect = CANVAS.get_rect()
         centerx = screen_rect.centerx
         x = centerx - self.rectBGimg.width / 2
         CANVAS.blit(self.bgimage, (x, self.bgY1))
         CANVAS.blit(self.bgimage, (x, self.bgY2))

The first two lines determine the center of the window and self.rectBGimg.width / 2 determines half the size of the background. By setting the starting x coordinate to centerx - self.rectBGimg.width / 2 instead of 0, this centers the background in the middle of the screen. I used a similar formula to place all other elements onto the screen.

Feedback

The repository owner provided a lot of feedback on my changes.

The first was that when playing the game using a mouse, the ship would move off the screen. Although this problem wasn't introduced by my code, it became apparent once the game was in full screen mode because there was blank space on either side of the game and the pixels would get stuck once the ship moved out of bounds.

Second of all, the way I implemented the toggle full screen was using a key up event. However, the repo owner wanted the user to be able to click the maximize button in the title bar. After some discussion through Discord over how this can be achieved using pygame, we came to the conclusion that the scope of this change would be greater than a simple toggle between default size and full screen and so I agreed to create a new issue after Hacktoberfest to continue working on this.

Conclusion

Although it was a bit stressful working on two issues in the last week and particularly using a language I've never used before, it was such a great experience to try something new and contribute to two projects that I found really interesting. I was really surprised at how much I was able to accomplish and feel really happy about ending my Hacktoberfest with these last two pull requests.