jinios / swift-cardgameapp Goto Github PK

변경된 currentFrame으로 더 정확한 로직으로 판단하도록 변경하기

• 그림에서 보면 맞는 위치에 드래그 후 게임 룰에 맞게 뷰가 옮겨진 것을 알 수 있음 ( A♥️, 9♦️)
• 하지만 원래 위치에있던 카드모델이 제거되지 않았기때문에 뷰를 reload하면서 원래 위치에도 또 뷰가 그려짐
• 바뀐 위치에 있는 카드뷰는 movableView로 removeFromSuperView되어야 하는 대상임.
• 모델 업데이트하는 부분 수정하여 뷰와 싱크 맞추기
• CardGameManager.ruleCheck()

currentFrame: 드래그가 모두 완료되어 끝난 최종 포지션을 의미함

• CardStack 속성 Private으로 지정하고 Stack을 ViewController에서 사용할때 관리하는 객체 분담해보기

From JK:
- private 에서 다시 public으로 바뀐건가요? 여기에 접근하는 경우가 있다면 메소드를 만들어서 해결하는 방법을 고려해보세요.
- 여기서 사용하는 stacks 자체를 별도 객체로 만드는 건 어떨까요?
- 객체 역할과 책임에서 상위 객체에 있는 코드를 하위 객체에게 좀 더 위임해도 좋을 것 같습니다.

• 만약 A카드인 경우 왼쪽 상단의 비어있는 칸으로 UIImageView를 animate 시킨다.
  • 기존에 다른 A카드가 있으면 그 옆으로 이동한다.
• K카드인 경우 스택 중에서 좌측부터 빈 칸이 있으면 빈 칸으로 이동시킨다.
• 나머지 2이상 카드인 경우 왼쪽 상단에 같은 모양의 A가 있는 경우는 그 위로 이동시킨다.
• 상단으로 이동할 수 없는 경우, 스택 중에서 좌측부터 앞면으로 된 카드 중 가장 위에 있는 카드와 다음 조건을 확인하고 조건에 맞으면 그 위로 이동시킨다.
  • 숫자가 하나 큰 카드가 있는지 확인한다. ex) 터치한 카드가 2인 경우 3, 10인 경우 J
  • 모양의 색이 다른지 확인한다. ex) 터치한 카드가 ♠️♣️ 이면 ♥️♦️
• 스택에서 마지막 카드가 다른 곳으로 이동한 경우 다시 마지막 카드를 앞면으로 뒤집는다

ex)
CardDeckView - CardDeckManager프로토콜, CardDeckDelegate 클래스

더블탭은 앞면으로 뒤집혀 있는 카드만 처리한다. 뒷면인 카드는 무시한다.

• drag가 끝난지점부터 toPoint까지 animate시키는 부분에서 카드가 (0,0)위치로 animate됐다가 돌아오는 현상.
• 원인1 : FrameCalculator.availableFrame()에서 toPoint가 (0,0)으로 리턴
• 원인2 : ViewController의 toInfo()에서 MoveInfo의 index가 nil로 리턴

* toPoint: cardStack(or foundation)까지 카드가 옮겨질 딱 맞는 위치

• 문제상황: deckView에서 카드를 드래그했을때 앱이 종료됨
• 원인:
  • 드래그가 끝난 지점인 currentFrame을 rootView기준으로 변환하면 nil이 리턴됨
  • nil로 값이 할당된 toInfo: MoveInfo로 rule을 체크하려고 하면 에러발생
• 해결: rootView기준으로 origin을 변환할때 deckView에서 움직인 방향을 고려해서 변환하기

• 출발 - 도착 지점이 stack - stack인 경우 y포지션이PositionY.upper.value임
• 이때 움직이는 movableCards의 마지막카드기준으로 PositionY.upper.value가 도착지점이 되어버려서 카드스택자체가 위로 올라갔다가 다시 그려짐
• movableCards의 첫번째 카드 기준으로 y position 잡기
  

게임이 이미 진행된 상태에서 한 스택의 카드가 open된 상태의 카드가 여러장인데도
카드가 룰에의해서 다른 곳으로 옮겨지면 default상태의 스택으로 정렬되는 문제

• CardStack클래스의 pop()함수에서 무조건 arrangeStack() 호출하는 부분 수정

Step5 피드백 내용 정리

카드게임 앱 미션 Step4 주요 피드백

• 카드덱 모델이나 뷰가 업데이트되는 부분 체크하기
• openedDeck 뷰만 지워지는건지 card도 지워지는건지 체크

StackView들을 7개로 나누면서 Deck, Foundation, StacksView에서 카드 Frame의 origin을 계산하는 방법이 달라짐. (특히 x좌표)
특히 x좌표는 PositionX라는 enum으로 저장되어있고 모든 카드이미지의 크기또한 고정값이라 매번 CardMaker클래스에서 계산할 필요성이 없어보임.

• 카드크기또한 PositionX, PositionY처럼 고정된 값으로 놔두고 달라진 origin값만 각 뷰에서 부여하는 방식으로 CardFrame을 초기화하는 방법이 좋을 것 같다!

<관련 요구사항>

• Card 객체에 파일명을 매치해서 해당 카드 이미지를 return 하는 메소드를 추가한다.
• Card 객체가 앞면, 뒷면을 처리할 수 있도록 개선한다.

카드덱과 관련된 위치에 카드뷰가 드래그되면 카드뷰가 사라지는 문제

• 카드덱에 있던 카드뷰가 다른 스택, 혹은 파운데이션으로 으로 옮겨졌는데 rule에 맞지 않아 리턴되는 경우
• 스택에 있던 카드뷰가 카드덱으로 옮겨졌는데 다시 스택으로 돌아오는 경우
• 이때 카드모델은 그대로 존재하지만 카드뷰만 없어지는 현상임
• 드래그 제스쳐가 끝나거나 시작한 위치가 deck인 경우 서브뷰들을 모델대로 업데이트하는 로직이 없어서 발생하는듯

<이유>

• 카드게임이 진행되기위해서는 카드 52장이 있는 하나의 카드덱으로 stack과 deck을 구성해서 게임을해야한다.
• 지금처럼 DeckManageable(CardDeckDelegate)와 StackManageable(CardGameDelegate)을 에서 따로 cardDeck을 가지고있으면 한 게임에 두 카드덱이 존재하게된다.
• 또한 현재 DeckManageable이 가진 기능이 많지 않으므로 따로 관리할 필요성이 없어서 합쳐서 게임을 총괄적으로 진행하는 모델인 CardGameDelegate하나로만 게임을 관리하기로했다.

각 OneStack뷰들이 따로 나눠져있기때문에 7개의 OneStack뷰 모두 frame.origin은 (0,0)이며, PositionX enum으로 계산할 수 없다.
따라서 아래의 stackColumn() 메소드에서 column이 nil로 리턴되는 문제까지 연쇄적으로 일어난다.

// FrameCalculator.swift
    func stackColumn(originX: CGFloat) -> Int? {
        for x in PositionX.allValues {
            guard x.value == originX else { continue }
            return x.hashValue
        }
        return nil
    }

MoveInfo의 view가 Stack인경우, 드래그액션이 시작된 OneStack이 어떤 스택인지(origin.x값으로 알 수 있도록) 계산하는 로직을 추가한다.

• CardDeck 객체에서 랜덤으로 카드를 섞고, 출력 화면처럼 카드스택 형태로 보이도록 개선한다.
• 카드스택을 관리하는 모델 객체를 설계한다.
• 각 스택의 맨위의 카드만 앞카드로 뒤집는다.
• 앱에서 Shake 이벤트를 발생하면 랜덤 카드를 다시 섞고 처음 상태로 다시 그리도록 구현한다.

(CardDeckView와 CardDeckDelegate, DeckManageable과같은 관계의 뷰, 뷰모델, 프로토콜 만들기)

• StackManageable 프로토콜 수정
• CardStacksView에 StackManageable타입 객체 선언
• StackDelegate 클래스 만들고 StackManageable프로토콜 따르도록 구현

Q. 어차피 카드 이미지의 크기는 모두 똑같고, 계산해놓은 카드 이미지 사이즈을 알 수 있기 때문에 CardImageView에 속성을 지정해놓은것처럼 사이즈도 fix시키고, VC에서는 origin만 알려주고 생성하면 더 효율적이지 않을까?

<예상되는 문제점>

• 지금은 cardSize라는 computed property가 VC에 있기때문에, VC의 루트 뷰 frame 기준으로 카드의 가로, 세로 길이를 구한 것을 코드만 봐도 알 수 있다. 하지만 만약 이 값을 CardImageView내부에서 바로 상수로쓰면, 다른 사람은 이 값이 어떻게 구해진건지 알 수 없다.
• 또한 루트뷰에 추가되는 서브뷰이므로 사이즈를 계산하고 부여하는게 VC에서 바로 볼 수 있는게 더 자연스러울 수도 있다.
• 또한 만약 디바이스가 변경된다면 루트뷰의 frame이 달라지기때문에 상수로 선언한 카드사이즈가 다른 디바이스 뷰 상에서는 맞지 않을 수 있다.
• 매번 subView의 크기를 루트뷰의 frame에 따라 계산해야한다면, subView에서는 superView의 frame을 알아와서 계산하고, 계산한 값을 init()내부에서 size로 fix할 수 있는지? 만약 가능하다면 이 방법이 자연스러운건지?_?

해당 CGRect내부에 CGPoint가 있는지 확인하는 메소드 구현하기

• 해당 CGPoint가 어떤 뷰(CardDeck, Stacks, Foundation view중 1)인지 리턴

• 현재는 DeckView내부에서 모두처리하므로 view내에 로직도 들어있는 상태임
• 더블탭 처리flow처럼
  • DeckView에서 이벤트 받음 - CardGameDelegate에게 Notify - Deck담당 Model에게 로직실행 - 로직 실행으로 인해 변경된 상태 VC에 Notify - DeckView에게 redraw호출 로 변경할 것

• Deck, Foundation, StacksView, OneStack 클래스에서 모두 CardGameDelegate(CardGameManageable)가 필요함.
• 현재 상위모듈에서 하위모듈을 초기화할때 매번 객체를 넘겨주는 방식인데, 한 게임 당 하나의 CardGameDelegate가 필요하고 모든 뷰는 그 객체를 공유하면서 프로그램을 진행해야함
• 매번 서브뷰를 초기화할때마다 객체를 넘기는 것이 아니라 싱글톤으로 만드는 것이 더 효율적임

• 드래그 액션이 다 끝난 지점을 뜻하는 currentFrame
• currentFrame은 movableViews의 원래 superView기준으로 나온다 (OneStack or FoundationView)
• RootView의 origin기준으로 변환하여 isInside(point:)를 파악한다.

• ViewController 클래스에서 self.view 배경을 다음 이미지 패턴으로 지정한다. 이미지 파일은 Assets에 추가한다.
• ViewController 클래스에서 코드로 아래 출력 화면처럼 화면을 균등하게 7등분해서 7개 UIImageView를 추가하고 카드 뒷면을 보여준다.
• 카드 가로와 세로 비율은 1:1.27로 지정한다.

앱 내에서 사용하는 카드이미지의 크기는 모두 동일하므로, 계산하는 객체 만들고 서브뷰에서 접근 가능하도록 만들기

• CardDeck 인스턴스를 만들고 랜덤으로 카드를 섞고 출력 화면처럼 보이도록 개선한다.
• 화면 위쪽에 빈 공간을 표시하는 UIView를 4개 추가하고, 우측 상단에 UIImageView를 추가한다.
  • 상단 화면 요소의 y 좌표는 20pt를 기준으로 한다.
  • 7장의 카드 이미지 y 좌표는 100pt를 기준으로 한다.
• 앱에서 Shake 이벤트를 발생하면 랜덤 카드를 다시 섞고 다시 그리도록 구현한다.

• 카드스택에 표시한 카드를 제외하고 남은 카드를 우측 상단에 뒤집힌 상태로 쌓아놓는다.
• 맨위에 있는 카드를 터치하면 좌측에 카드 앞면을 표시하고, 다음 카드 뒷면을 표시한다.
• 만약 남은 카드가 없는 경우는 우측에도 빈 카드를 대신해서 반복할 수 있다는 이미지(refresh)를 표시한다.

(이미 사용자가 뷰 내에서 원하는 곳까지 드래그를 마친 상태. 뷰만 옮겨져있음)

.ended 일때의 로직 flow

• 카드위치 확인 - movableViews의 마지막 위치가 toFrame위치 내부에 진입했는지확인
  • (toFrame 값의 origin에서 오른쪽/하향 방향으로 카드 가로세로 위치 내부인지 확인)
• 모델에서 확인 - 해당 toFrame에 현재 movable cards들이 위치할 수 있는지
• 애니메이션적용 - 모델에서 확인한 값이 true이면 사용자가 드래그를 놓은 위치에서 카드스택의 맞는 위치까지 animation적용

현재 CardStacksView에서 한꺼번에 그리고있는 7개의 스택을 나눠서 각각의 View로 구현

뷰 컨트롤러의 속성으로 지정한 var cardDeck: CardImageView 에 addGestureRecognizer(UITapGestureRecognizer)적용했음에도 불구하고 터치가 작동하지 않는 문제

• shake gesture가 아닌 리프레시 버튼을 탭하여 deck다시 섞기
• (Closed Deck을 다 열어봐서 다시 Deck으로 섞고싶을때)

• .began과 .changed를 따로 구현하기 (지금은 같은 동작하도록 되어있음)
• .began하면서 movableview를 스택의 마지막 뷰로 가져오게 되어있는데 changed상태일때도 movableView를 가져오는게 동작하면서 연속적으로 딸려오는 것 같음.

• 애니메이션이나 드래그가 진행되는 동안 카드가 다른 카드들의 밑으로 지나가게 보이는 문제
• 드래그 액션이 시작된 뷰 deck, foundation, stacksview를 viewcontroller의 subViews hierarchy중 맨 앞으로 보내기
• movableViews의 superView로 찾을 수 있다.

dragging으로 인한 foundationView와 Model을 업데이트하는 로직에서 column활용하기

shake gesture로 opened cardDeck을 다시 덮고,
shuffle()한 후에 남아있는 카드로 새롭게 closedDeck을 만들고 다시 카드를 tap해서 열때 backside이미지가 표시됨.

전체 스택 테이블에서 각 스택을 담당하는 뷰의 상태를 하나씩 관리하기 위해 스택뷰 적용