해커데이 4주차

4주째이자 마지막 주였다.내가 지난주에 제출한 세 번째 PR은 심사를 받지 못했기 때문에 마지막 주에 나는 두 가지 다른 문제를 연구하기로 결정했다. 하나는 Angular로 작성한 레시피 응용 프로그램이고, 다른 하나는 Python으로 작성한 우주 침입자 게임이다.

Foodillo

The issue
The pull request

문제.

나는 이 문제가 매우 재미있다는 것을 발견했다. 왜냐하면 나도 이전에React로 메뉴 응용 프로그램을 개발한 적이 있기 때문이다.그러나 이 프로젝트는 Angular로 작성된 것이어서 나는 그다지 익숙하지 않다.이번 주에 나는 나 자신에게 도전하고 싶다. 그래서 나는 이것이 좋은 시작이라고 생각한다.
이 문제에 대해 주요한 문제는 등록 폼에 대해 폼을 제출하기 전에 비밀번호와 확인 비밀번호 필드에 일치하는 입력이 있어야 한다는 것이다.그러나 검증이 작동하지 않기 때문에 사용자는 서로 다른 비밀번호로 폼을 제출할 수 있다.

비밀 번호

프로그램은 입력이 같은지 아닌지를 비교하기 위해 명령을 사용한다.이전의 문제는validate () 함수에 올바르게 전달되지 않은 입력입니다.pull 요청에서 이 함수를 다시 썼습니다.

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;
  }
}

함수에 전달된 매개 변수control는 confirmPassword 필드를 가져오는 데 사용되고 control.root.get(this.appMustMatch)password 필드를 가져오는 데 사용됩니다. 왜냐하면 속성appMustMatch="password"을 confirmPassword 필드의 HTML 태그에 추가했기 때문입니다.솔직히 말하면 저는 Angular의 폼 검증에 대해 경험이 많지 않습니다. 이것은 제가 처음으로 명령을 사용한 것이기 때문에 tutorial는 이 문제를 어떻게 처리하는지 이해하는 데 큰 도움이 되었습니다.

답례하다

변경한 후에 비밀번호가 일치하지 않으면 폼에 오류가 표시되고 등록 단추가 비활성화됩니다.내가 이 요청을 제출한 후, 그것은 신속하게 받아들여지고 합병에 성공했다.

아달리 우주 침입자

The issue
The pull request

문제.

나는 이 문제를 연구하고 싶다. 왜냐하면 나는 이 프로젝트를 정말 좋아하기 때문이다. 그것도 파이톤으로 작성한 것이다. 나는 파이톤을 사용한 경험이 없지만 배우고 싶다.
문제는 게임의 기본 크기가 750x750 픽셀이지만 프로젝트 담당자는 전체 화면 모드로 게임을 실행할 수 있는 옵션을 추가하기를 원한다는 것이다.
이 프로젝트는pygame를 사용합니다. 게임을 만들기 위해 내장된 기능과 기능을 많이 제공합니다.

비밀 번호

우선 기본 모드와 전체 화면 모드 사이를 전환하는 기능이 있는 클래스를 만들었습니다. [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

화면에 다음 태그를 추가했습니다.

        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))

나에게 있어서 이 문제의 가장 어려운 부분은 게임의 종횡비는 정사각형이고 반드시 전체 화면 모드로 가운데를 차지해야 한다는 것이다.각 요소가 화면에 개별적으로 배치되므로 모든 요소를 재배치해야 합니다.이것은 화면 중간에 배경을 배치하는 방법입니다.

         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))

앞의 두 선은 창과 자신의 중심을 결정한다.rectBGimg.너비/2에 따라 배경의 절반 크기가 결정됩니다.시작 x 좌표를centerx-self로 설정합니다.rectBGimg.폭이 0이 아닌/2이므로 배경이 화면 중앙에 배치됩니다.나는 유사한 공식을 사용하여 모든 다른 요소를 화면에 놓았다.

답례하다

저장소 소유자는 나의 변경 사항에 대해 많은 피드백을 제공했다.

첫 번째는 마우스로 게임을 할 때 비행선이 화면을 떠나는 것이다.내 코드는 이 문제를 도입하지 않았지만 게임이 전체 화면 모드에 있을 때 이 문제는 매우 뚜렷해졌다. 게임의 양쪽에 공백이 있기 때문에 배가 경계를 벗어나면 픽셀이 끼기 때문이다.
그 다음으로 내가 전체 화면을 전환하는 방식은 위쪽 키 이벤트를 사용하는 것이다.그러나 리콜 소유자는 사용자가 제목 표시줄의 '최대화' 단추를 눌렀으면 한다.pygame를 어떻게 사용하는가에 대해 일치하지 않는 토론을 한 후에 우리는 이 변경의 범위가 기본 크기와 전체 화면 사이의 간단한 전환보다 크다는 결론을 얻었다. 그래서 나는 Hacktoberfest 이후에 새로운 문제를 만들고 이 방면의 작업을 계속하는 것에 동의한다.

결론

지난주에 두 가지 문제에 대한 업무가 좀 부담스러웠지만, 특히 내가 이전에 사용하지 않았던 언어를 사용했지만, 새로운 것을 시도하고 두 프로젝트에 기여하는 것은 좋은 경험이었고, 나는 매우 재미있었다.나는 내가 이렇게 많은 것을 완성할 수 있다는 것이 정말 놀랍고, 마지막 두 가지 요청으로 나의 해커 축제를 끝내는 것에 대해 매우 기쁘다.