# 紙牌遊戲 Beta test

### Feedback from Tim
### U1 第一張牌
* 最一開始希望能有個簡短的動畫，讓學生知道成果長得什麼樣子
* 建議可以把專案的 features/steps 先寫出來（就像是我們做 webinar 一樣）
* `這裡，我們用百分比的方式設定卡片大小。用到的是 flex 的捷徑語法，它一次可以控制三個屬性，依序分別是：` 這裡建議增加說明，讓學生知道這是指上面 CSS 當中 flex: 後面的三個參數
* `flex-basis` 這斷解說如果有圖示的話會更好
* `最後再加上卡片高度：.card { height: 8vw }` 這裡上架格式好像有誤

### U2 第一張牌

* 這一段的程式碼應該有誤，src 裡面應該不會再包 a tag?

const view = {
  // displayCards(){...},
  getCardElement(index) {
    return `<div class="card"><p>8</p><img src="<a href="https://image.flaticon.com/icons/svg/105/105219.svg" target="_blank">https://image.flaticon.com/icons/svg/105/105219.svg</a>"><p>8</p></div>`
  }
}

* `3.- keys() 回傳的是一個 iterator` 不確定我們有沒有教過 iterator
* 樣式校正 > 設定牌桌 這一段的程式碼上架格式錯誤

### U3 洗牌
* Fisher-Yates Shuffle 如果有中文的介紹文章會更好 :)

### U4 點擊與翻牌

* 問題：在這個遊戲之前，我們之前有教物件導向的寫法嗎？
* 問題：這裡開始拆分 view & controller 所負責的 function，需要特別多解釋一點這個概念嗎？

### U6 計分

* 在這個 unit 裡面還沒有定義 view.renderScore 這個 function，所以會出錯

 score () {
    view.renderScore((model.score += 10))
    view.pairCard(model.revealedCards[0])
    view.pairCard(model.revealedCards[1])
    model.clearRevealedCards()
    this.currentState = GAME_STATE.FirstCardAwaits
  }

### U7 優化遊戲體驗
* 最後面的程式碼不完全，並非最終的程式碼
* 遊戲結束的時候，沒有動畫出現。猜測是 controller 中的

showGameFinished() {
  const completeText = document.createElement('p')
  const header = document.querySelector('#header')
  const cards = document.querySelector('#cards')
  
  completeText.classList.add('complete')
  completeText.innerText = 'Complete!'
  
  header.insertBefore(completeText, document.querySelector('#header .score'))
  header.classList.add('completed')
  cards.classList.add('completed')
}

沒有被呼叫。應該要再 score 等於滿分的時候，呼叫出這個 function

### 總結
* 我大概花了 2~3 小時看過內容，複製貼上程式碼試跑。如果學生認真要學的話，可能要花至少 3 天的時間吧
* 學生如果沒有物件導向的概念，可能會稍微卡住
* 學生應該是一次遇到 scope 這麼大的專案，建議可以先把所有 functions 以及 model/view/controller 的分類＆roadmap 先寫出來讓學生有個最基本的 overview。我猜學生可能容易迷失在眾多的步驟與 function 當中，然後不知道自己在做什麼
* 建議 Model/View/Controller 的分類可以多說明一點
* 我猜測有些學生學完之後會自信心受挫。因為第一次接觸到較為大型的專案，學習的過程中可能就真的只能複製貼上，要到自己真的能夠從0開始刻的階段，可能會有一個 gap。建議在專案的最開始建立好期待，以及學習重點，譬如

    *  Stage 1 - 跟著教案一步一步完成
    *  Stage 2 - 充分了解物件導向寫法、MVC架構等
    *  Stage 3 - 能夠將複雜專案差解成細部的 functions
    *  ...

以上是我隨便寫的，總之我認為期待需要訂得非常清楚 ...
* 建議可以在過程中，可以引導學生回頭複習相關章節
* 對於程度優秀的學生來說應該蠻好玩的，但是對於程度中等，甚至是中上的學生來說，會覺得有點挑戰。不確定目前這個教材的難度設定為何

***
### 踩地雷作業

https://codepen.io/tsungtingdu-the-bold/pen/povzxgY

1. 基本版遊戲主架構大概花 3 hr 完成，剩下 2 hr 再修一些細節
2. 第一次打開 ac 提供的 codepen 範本的時候，其實有點不知道該如何下手，所以就馬上關掉。稍微思考一個晚上決定設計思路後，隔天才開始寫。寫的時候主要按照自己的想法來寫，並沒有完全按照 ac 提供的架構 or function 來寫，所以會有未使用的程式碼
3. 這份題目對我來說難易適中，雖然前面翻牌遊戲的內容提供了很好的設計想法，但我最一開始沒有辦法立即將翻牌遊戲的設計應用在踩地雷上，花了一點時間回頭消化翻牌遊戲的內容
4. 有參考外部資源，主要是 2D array 的使用以及 Timer 設計
5. 這個遊戲有蠻大的發揮空間，應該蠻好玩的，但是我想對於一些學生來說，要把翻牌遊戲的學習應用在踩地雷上面可能是一大挑戰。也許可以提供設計的思路，讓學生能夠一步一步慢慢做出東西