jinios / swift-cardgameapp Goto Github PK

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

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

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

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

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

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

.ended 일때의 로직 flow

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

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

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

Step5 피드백 내용 정리

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

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

<예상되는 문제점>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

각 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값으로 알 수 있도록) 계산하는 로직을 추가한다.

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

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

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

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

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

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

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

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

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

<관련 요구사항>

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

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

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

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

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

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

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

<이유>

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

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

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

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

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