Properly generate hands for each of the 3/4 player routes

client/web/pinochle/app/components/hand/index.hbs

@@ -4,7 +4,7 @@
   {{stack this.toggle}}
   {{resize this.adjust}}
 >
-  {{#each this.cards as |card|}}
+  {{#each @cards as |card|}}
     <PlayingCard
       id={{card.id}}
       @suit={{card.suit}}

client/web/pinochle/app/components/hand/index.ts

@@ -3,29 +3,28 @@ import { cached } from '@glimmer/tracking';
 import { getOwner } from '@ember/application';
 import { action } from '@ember/object';
 
-import { newDeck, sortHand, splitDeck } from 'pinochle/utils/deck';
 import { Meld } from 'pinochle/utils/game/meld';
 
 import { HandAnimation } from './-animation/hand';
 
-import type { Card, Hand } from 'pinochle/utils/deck';
+import type { Card } from 'pinochle/utils/deck';
 
 type Args = {
-  hand: Hand;
+  cards: Card[];
 };
 
 export default class HandComponent extends Component<Args> {
   @cached
   get hand() {
-    return new HandAnimation(getOwner(this), this.cards);
+    return new HandAnimation(getOwner(this), this.args.cards);
   }
 
   /**
    * Given the current cards, what are all the meld combinations and score?
    */
   @cached
   get meld() {
-    return new Meld([...(this.cards as Card[])]);
+    return new Meld([...(this.args.cards as Card[])]);
   }
 
   @action
@@ -42,14 +41,4 @@ export default class HandComponent extends Component<Args> {
   adjust() {
     this.hand.send('ADJUST');
   }
-
-  @cached
-  get cards() {
-    let deck = newDeck();
-    let dealt = splitDeck(deck, 4);
-    let hand = dealt.hands[0];
-    let sorted = sortHand(hand);
-
-    return sorted;
-  }
 }

client/web/pinochle/app/routes/four-player.ts

@@ -0,0 +1,19 @@
+import Route from '@ember/routing/route';
+
+import { newDeck, sortHand, splitDeck } from 'pinochle/utils/deck';
+
+const NUM_PLAYERS = 4;
+
+export default class FourPlayerRoute extends Route {
+  async model() {
+    let deck = newDeck();
+    let dealt = splitDeck(deck, NUM_PLAYERS);
+    let unsorted = dealt.hands[0];
+    let hand = sortHand(unsorted);
+
+    return {
+      numPlayers: NUM_PLAYERS,
+      hand,
+    };
+  }
+}

client/web/pinochle/app/routes/three-player.ts

@@ -0,0 +1,19 @@
+import Route from '@ember/routing/route';
+
+import { newDeck, sortHand, splitDeck } from 'pinochle/utils/deck';
+
+const NUM_PLAYERS = 3;
+
+export default class ThreePlayerRoute extends Route {
+  async model() {
+    let deck = newDeck();
+    let dealt = splitDeck(deck, NUM_PLAYERS);
+    let unsorted = dealt.hands[0];
+    let hand = sortHand(unsorted);
+
+    return {
+      numPlayers: NUM_PLAYERS,
+      hand,
+    };
+  }
+}

client/web/pinochle/app/templates/four-player.hbs

@@ -1 +1,3 @@
-{{outlet}}
+<div class='perspective'>
+  <Hand @cards={{@model.hand}} />
+</div>

client/web/pinochle/app/templates/three-player.hbs

@@ -1,3 +1,3 @@
 <div class='perspective'>
-  <Hand />
+  <Hand @cards={{@model.hand}} />
 </div>