내가 찾은 풀 리퀘스트 만들기

이것은 Hactoberfest의 세 번째 블로그 게시물입니다. 저번 블로그 포스팅에서 언급했듯이 issue 에 새로운 리플레이 기능을 추가하면서 발견한 match-three-game 을 작업했습니다.

이issue는 코드를 수정한 후 새로운 기능을 테스트했을 때 발견되었습니다. 타이머가 끝나기 전에 다시 재생하기 위해 게임을 중지하기 위해 시작 버튼을 클릭했습니다. 그러나 완료되지 않고 새 타이머가 시작됩니다. 그래서 투 타이머가 돌아가며 표시되었습니다. 그 오류를 처음 만났을 때 웃겼습니다.

이슈를 생성한 후 메인 프로젝트 메인테이너를 언급하고 이 버그를 수정하기 위해 이 이슈를 나에게 할당해달라고 요청하는 댓글을 남겼습니다. 그리고 저는 이 문제에 대해 연구하기 시작했습니다.

이미 이 프로그램을 실행하기 위해 설정한 노하우가 있어서 버그 수정을 위한 프로젝트 설정이 쉬웠습니다. 하지만 버그를 해결하는 방법에 대해 조금 조사해야 합니다. 그리고 이 문제를 해결할 수 있는 많은 방법이 있었습니다. 하지만 새로운 중지 버튼을 만들어 기존 시작 버튼과 버튼 토글을 만들고 모든 시작, 중지 및 다시 시작 버튼을 동기화하기로 결정했습니다.

그런데 코드를 작성하기 전부터 문제가 있었습니다. 아이콘 목록에 정지버튼이 없었습니다.. 그래서 기존 시작버튼을 바탕으로 포토샵으로 정지버튼만 만들었습니다. 투 버튼은 같은 디자인을 기반으로 해야 하기 때문입니다.

이것은 기존 시작 버튼이었습니다.


그리고 이것은 제가 만든 중지 버튼입니다.


그런 다음 정적 시작 버튼을 중지 버튼이 있는 토글 버튼으로 만듭니다. 그리고 게임을 하는 동안 시작 버튼을 비활성화하여 시작 버튼을 다시 클릭하여 또 다른 새 타이머를 생성하는 것을 방지합니다.

//In HTML file
  <div id="startButton"></div>
  <div id="stopButton"></div>

//In JS file - while playing 
    stopButton.style.display = "block";
    startButton.style.display = "none";
    replay_popup.style.display = "none";
//In JS file - when game finished 
    stopButton.style.display = "none";
    startButton.style.display = "block";
    replay_popup.style.display = "block";

잘 동작하는지 확인한 후 코드를 좀 더 최적화 시켜보았습니다. 그래서 필요한 곳에 코드를 배치하는 대신 모든 버튼을 동기화하는 displayButton 함수를 만들었습니다. 그래서 모든 버튼을 변경하려면 버튼을 클릭했습니다.

//Switch display start and stop button
function displayButton(ClickedButton){
    if (ClickedButton == "start") {
      stopButton.style.display = "block";
      startButton.style.display = "none";
      replay_popup.style.display = "none";
    } else {
      stopButton.style.display = "none";
      startButton.style.display = "block";
      replay_popup.style.display = "block";
    }
//To call the function
displayButton("start");
  }

이 버그를 변경한 후 애플리케이션이 실행되는 방식입니다.

게임을 시작하기 위해 시작 버튼을 클릭할 때. 시작 버튼이 중지 버튼으로 변경되었습니다.

중지 버튼을 클릭하면 게임이 중지됩니다. 중지 버튼이 시작 버튼으로 변경되고 재생 프롬프트가 표시됩니다.

시작 버튼 또는 재생 버튼을 클릭하여 게임을 다시 시작할 때. 타이머가 재설정되고 사용자는 게임을 다시 플레이할 수 있습니다.

이 버그를 수정하고 생성한 후
Pull Request 메인 메인테이너가 내 풀 리퀘스트에 좋아하고 수고했다고 댓글을 남겼습니다. 그녀가 응용 프로그램의 버그를 수정한 내 코드를 좋아하는 것은 좋은 경험이었습니다.

이 프로젝트를 마친 후 새 버튼을 만들어야 한다는 점을 제외하면 모든 것이 매우 순조롭게 진행되고 있다고 느꼈습니다. 실제 오픈소스 프로젝트에 문제를 남기고 그 버그를 직접 수정한 것은 정말 좋은 경험이었습니다. 오픈 소스 프로젝트의 해결 문제가 흥미로워졌습니다.