feat/piece/button

[hayato0309]

Issue: #19

ほとんど実装できました（詳細は「目的」）が、以下の問題が解決できません。 https://gyazo.com/83aea3b1c67490fcaf3a25b53af262ff

• 問題

  • Player1のピースのフリップや回転を行うと、Player2のピースがレンダリングされたときに、Player1で行ったフリップや回転が反映されてしまう。
  • store-game.jsのstate.players[playerId].remainingPiecesの中の座標も同じになっている。

• 試したこと

  • PieceSelector.vueで作成しているcanvasのref（canvasId）にplayerIdも組み込んで、Player1と2のcanvasを識別できるようにした。
  • （例）Player1の最初のピースのcanvasは、"canvas-1-0"

• 結果

  • 上述の問題が引き続き発生しており、解決できていない。

目的

• フリップ・回転後のピースの状態保持
  • PieceSelector, PieceAlterの中で、フリップ・回転後の状態でピースが描画される
• フリップ・回転後の状態（座標）がstoreで保持される
• フリップが左右方向に限定（このプルリク前は上下方向でもフリップができていた）
• レイアウトの修正(canvasからピースが見切れないように)

達成条件

• 上記目的の実装
• 一番上に書いている問題の解消

実装の概要

• フリップや回転を、isFlipped = true, currentDegree = 90のようにコンポーネントで保持
• 上記データを元にstore-gameにて座標を再計算し、playerのremainingPiecesを更新

レビューしてほしいところ

• storeのmutationsに座標再計算のロジックを書いたが、ここでよかったのか（mutationsはなるべくstateの更新だけにして、計算ロジックはactionsや、コンポーネントのmethodsに書いた方がベター、とかあるのでしょうか？）

不安に思っていること

• 前述の問題

[tkwonn]

そうですね。。methodである程度のロジックを書いてmutationsではStateを変える処理だけできればやりたいです。 ですが、プレイヤー１のフリップや回転がプレイヤー２にも影響がいってしまうのは設計の問題かと思われます。 こちら僕もみてみます！明日のミーティングで解決しましょう！

[hayato0309]

PieceAlterの灰色のところをCSSでフォーカスさせる