저번 시간에 이 버튼에 대한 작업을 마쳤습니다
이제 드디어 게임 승리 조건을 확인해 보겠습니다
예를 들어 이 상황에는
기호 O의 플레이어가 이겼습니다
그리고 어떤 플레이어가 이겼는지 확인할
상황적 조건은 아주 많습니다
이 플레이어가 이겼는지
확인할 수 있는 가장 간단한 방법은
가능한 모든 우승 조건의 조합을
한데 모은 뒤
그 중에 일치하는 것이 있는지 확인하는 것입니다
이 작업은 매 차례마다 이루어져야 합니다
매 차례마다 게임이 끝날 수 있는 가능성이 있기 때문입니다
엄밀히 말하면 제일 처음 몇 차례 동안은 게임이 끝날 수 없지만
일단 조건을 간단하게 해서
매 차례마다 확인하는 것으로 하겠습니다
이 확인 요소는 어디에 추가하는 것이 좋을까요?
이 확인 과정은 어떻게 이루어져야 할까요?
앱 컴포넌트로 돌아가 보겠습니다
게임이 끝났을 때 그에 대한 화면을
게임판 위에 띄울 것이기 때문입니다
이 컴포넌트에서 필요한 정보는
게임이 끝났는지에 대한 정보입니다
그러므로 먼저 헬퍼(helper) 상수를
컴포넌트 함수 바깥에 작성하겠습니다
여기에는 우승 조건을 일일히
직접 작성하겠습니다
이 중첩 배열에서
우승할 수 있는 모든 조건을 설명하겠습니다
즉, 이 배열 속 배열이
각각의 우승 조건입니다
우승을 위한 조합은
세 개의 필드를 조합해야 합니다
예를 들어서
지금 이것이 우승 조건 중 하나입니다
1열 1행의 버튼이 선택되었고
1행 2열과 1행 3열도 마찬가지입니다
다르게 말하면 1열의 첫 필드와
2열의 첫 필드
그리고 3열의 첫 필드입니다
이것이 우승 조건을 설명할 수 있는
몇 가지 방식입니다
이것을 이 배열에 넣겠습니다
여기에 첫 번째 우승 조건을 작성하겠습니다
열과 행이 0인 첫 요소를 객체로서 더하겠습니다
이 의미는 첫 번째 행과
첫 번째 열이 선택되었다면
이 필드가 선택되었다는 의미입니다
여기에서 1행과 1열이 겹치기 때문입니다
그러므로 행과 열을 0으로 작성하면 됩니다
이것이 첫 번째 우승 조건의
첫 번째 요소였습니다
다음 요소는 1행에 있고
1행 혹은 열을 표현하기 위해 0을 쓰는 이유는
자바스크립트에서 인덱스(index)는 0부터 시작하기 떄문입니다
첫 번째 우승 조건의 다음 요소는
첫 번째 행이지만
두 번째 열, 즉 인덱스 1입니다
행은 이것으로 같지만 열이 여기입니다
즉 이 요소이고, 이것을 선택하고 나면
옆에 붙어 있는 요소가 두 개가 생겼습니다
이 시점에서는 다음으로 지정할 요소가
어디에 있을지 이미 짐작이 가능합니다
1행의 세 번째 요소입니다
이것이 두 번째 요소였고
마지막 요소는 1행이지만 마지막 열입니다
즉 3열입니다
이 게임은 우승 조건에는
아주 많은 조합이 있기 때문에
제가 combinations.js라는 파일을 따로 만들었습니다
첨부된 이 파일을 확인하시면
이렇게 반환된 배열이 있습니다
이것을 다운로드 받아서 사용하시거나
프로젝트에 만들어서 내용을
여러분의 우승 조합 파일(winning-combinations.js)에 붙여넣으시면
여기에 모든 우승 조합이 나열되어 있습니다
해당 파일을 추가하셨다면
다시 앱 파일(App.jsx)로 넘어와서
우승 조건을 모두 가져오면 됩니다
위치는 이런 식으로 ./winningcombinations.JS로 하면 됩니다