Can play a bit with the computer

src/components/GameBodyView.ts

@@ -16,18 +16,22 @@ import StackView from "./StackView"
           </div>
           <div class="playing-area">
             <stack-view :stack="this.gameData.deck"></stack-view> 
+            <div v-bind:class="{ 'play-wrap': true, 'snap': this.gameData.snap }">       
                 <card-view opp="true" :card="this.gameData.left"></card-view>
                 <card-view :card="this.gameData.right"></card-view>
+            </div>
 
             <div class="scores">
             <div class="score left">
-                <span v-bind:class="{ turn: this.gameData.myTurn }">{{ this.gameData.names[0] }}</span>
                 <span v-bind:class="{ turn: this.gameData.myTurn }">{{ this.gameData.score[0] }}</span>
+                <span v-bind:class="{ turn: this.gameData.myTurn }">{{ this.gameData.names[0] }}</span>
             </div>
             <div class="score right">
                 <span v-bind:class="{ turn: !this.gameData.myTurn }">{{ this.gameData.score[1] }}</span>
                 <span v-bind:class="{ turn: !this.gameData.myTurn }">{{ this.gameData.names[1] }}</span>
             </div>
+            <div class="subtitle" v-if=" this.gameData.myTurn" >{{ this.gameData.names[0] }} to play</div>
+            <div class="subtitle" v-if=" !this.gameData.myTurn" >{{ this.gameData.names[1] }} to play</div>  
           </div>
           </div>
           <div class="flop-view">

src/components/GameHeaderView.ts

@@ -9,18 +9,6 @@ import GameData from '../model/GameData';
     template: `
         <div class="game-header">        
         Game code: {{ gameData.code }}
-          <div class="scores">
-            <div class="score left">
-                <span v-bind:class="{ turn: this.gameData.myTurn }">{{ this.gameData.names[0] }}</span>
-                <span v-bind:class="{ turn: this.gameData.myTurn }">{{ this.gameData.score[0] }}</span>
-            </div>
-            <div class="score right">
-                <span v-bind:class="{ turn: !this.gameData.myTurn }">{{ this.gameData.score[1] }}</span>
-                <span v-bind:class="{ turn: !this.gameData.myTurn }">{{ this.gameData.names[1] }}</span>
-            </div>
-          </div>
-          <div class="subtitle" v-if=" this.gameData.myTurn" >{{ this.gameData.names[0] }} to play</div>
-          <div class="subtitle" v-if=" !this.gameData.myTurn" >{{ this.gameData.names[1] }} to play</div>
       </div>
     `
 })

src/model/GameData.ts

@@ -3,54 +3,63 @@ import Card from "./Card"
 let cardList:Array<Card> = []
 for (let i = 1; i <= 9; i++) {
     cardList.push({
+        name: `A${i}`,
         svg: `zip/cards/A${i}.svg`,
         fgSnaps: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'A9']
     } as Card)
 }
 for (let i = 1; i <= 8; i++) {
     cardList.push({
+        name: `B${i}`,
         svg: `zip/cards/B${i}.svg`,
         fgSnaps: ['B1', 'B2', 'B3', 'B4', 'B5', 'B6', 'B7', 'B8']
     } as Card)
 }
 for (let i = 1; i <= 7; i++) {
     cardList.push({
+        name: `C${i}`,
         svg: `zip/cards/C${i}.svg`,
         fgSnaps: ['C1', 'C2', 'C3', 'C4', 'C5', 'C6', 'C7']
     } as Card)
 }
 for (let i = 1; i <= 8; i++) {
     cardList.push({
+        name: `D${i}`,
         svg: `zip/cards/D${i}.svg`,
         fgSnaps: ['D1', 'D2', 'D3', 'D4', 'D5', 'D6', 'D7', 'D8']
     } as Card)
 }
 for (let i = 1; i <= 7; i++) {
     cardList.push({
+        name: `E${i}`,
         svg: `zip/cards/E${i}.svg`,
         fgSnaps: ['E1', 'E2', 'E3', 'E4', 'E5', 'E6', 'E7']
     } as Card)
 }
 for (let i = 1; i <= 9; i++) {
     cardList.push({
+        name: `F${i}`,
         svg: `zip/cards/F${i}.svg`,
         fgSnaps: ['F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9']
     } as Card)
 }
 for (let i = 1; i <= 6; i++) {
     cardList.push({
+        name: `G${i}`,
         svg: `zip/cards/G${i}.svg`,
         fgSnaps: [ 'G' + (i + 6) ]
     } as Card)
 }
 for (let i = 1; i <= 6; i++) {
     cardList.push({
+        name: `H${i}`,
         svg: `zip/cards/H${i}.svg`,
         fgSnaps: [ 'H1', 'H2', 'H3', 'H4', 'H5', 'H6 ']
     } as Card)
 }
 for (let i = 1; i <= 6; i++) {
     cardList.push({
+        name: `J${i}`,
         svg: `zip/cards/J${i}.svg`,
         fgSnaps: [ 'J1', 'J2', 'J3', 'J4', 'J5', 'J6 ']
     } as Card)
@@ -68,9 +77,9 @@ export default class GameData {
     
     code: string = "123abc"
 
-    names: Array<string> = ["Alice", "Bob"]
+    names: Array<string> = ["You", "CPU"]
 
-    score: Array<number> = [3, 5]
+    score: Array<number> = [0, 0]
 
     deck: Array<Card> = []
 
@@ -82,10 +91,12 @@ export default class GameData {
 
     right?: Card
 
-    myTurn: Boolean = true
+    myTurn: boolean = true
 
     messages: Array<Message> = []
 
+    snap: boolean = false
+
     constructor() {
         this.deck = cardList.slice(0)
 
@@ -125,10 +136,28 @@ export default class GameData {
 
     playerPlay(i:number) {
         if (this.myTurn) {
-            this.myTurn = false
             this.play(i, this.myFlop)
 
             let self = this
+            if (this.left && this.left.fgSnaps.filter((n) => self.right && n == self.right.name).length > 0) {
+
+                if (this.myTurn) {
+                    let s = this.score[0]
+                    this.score.splice(0, 1, s+1)
+                } else {
+                    let s = this.score[1]
+                    this.score.splice(1, 1, s+1)
+                }
+
+                self.snap = true
+                setTimeout(() => {
+                    self.snap = false
+                }, 200)         
+            }
+
+            this.myTurn = false
+
+            
             setTimeout(() => {
                 this.opponentPlay()
             }, 1000)         

styles.css

@@ -22,6 +22,16 @@ body {
     margin: 20px;
 }
 
+.play-wrap {
+    display: flex;
+}
+.play-wrap.snap {
+    display: flex;
+    border-radius: 15px;
+    background: yellow;
+}
+
+
 .flop-view {
     display: flex;
     flex-direction: row;  
@@ -75,12 +85,14 @@ body {
 .scores {
     margin: 10px;
     display: flex;
+    flex-direction: column;
     justify-content: center;
 }
 
 .score {
     display: flex;
     border: 1px solid #31490e;    
+    justify-content: space-between;
 }
 
 .score span {