Moving towards play v computer

src/components/CardView.ts

@@ -5,15 +5,21 @@ import Card from "../model/Card"
 
 @Component({
     props: {
-        card: Object as () => Card
+        card: Object as () => Card,
+        opp: Boolean,
+        back: Boolean 
     },
     template: `
       <div>
-        <div v-if="!this.card" class="card-view empty" ></div>
-        <div v-if="this.card" class="card-view" v-on:click="$emit('card-click')" ><img :src="this.card.svg" /></div>
+        <div v-if="!this.card || this.back" v-bind:class="{ 'card-view': true, empty: !this.card, opp: this.opp, back: this.back && this.card }" ></div>
+        <div v-if="this.card && !this.back" v-bind:class="{ 'card-view': true, opp: this.opp }" v-on:click="$emit('card-click')" ><img :src="this.card.svg" /></div>
       </div>
     `
 })
 export default class CardView extends Vue {
 
+  opp!: boolean
+
+  back!: boolean
+    
 }
\ No newline at end of file

src/components/GameBodyView.ts

@@ -11,10 +11,24 @@ import StackView from "./StackView"
     },
     template: `
         <div class="game-header">
+          <div class="flop-view opp">
+            <card-view v-for="(item, index) in gameData.oppFlop" :card="item" opp="true" back="true">123</card-view>
+          </div>
           <div class="playing-area">
             <stack-view :stack="this.gameData.deck"></stack-view>        
-            <card-view :card="this.gameData.left"></card-view>
+            <card-view opp="true" :card="this.gameData.left"></card-view>
             <card-view :card="this.gameData.right"></card-view>
+
+            <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>
           <div class="flop-view">
             <card-view v-for="(item, index) in gameData.myFlop" :card="item" @card-click="play(index)" >123</card-view>
@@ -31,7 +45,7 @@ export default class GameBodyView extends Vue {
     gameData!: GameData
 
     play(i:number) {
-        this.gameData.play(i)
+        this.gameData.playerPlay(i) 
     }
     
     

src/model/Card.ts

@@ -4,6 +4,8 @@ export default interface Card {
 
     svg?: String
 
+    fgSnaps: Array<string>
+
 }
 
 

src/model/GameData.ts

@@ -3,52 +3,62 @@ import Card from "./Card"
 let cardList:Array<Card> = []
 for (let i = 1; i <= 9; i++) {
     cardList.push({
-        svg: `zip/cards/A${i}.svg`
+        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({
-        svg: `zip/cards/B${i}.svg`
+        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({
-        svg: `zip/cards/C${i}.svg`
+        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({
-        svg: `zip/cards/D${i}.svg`
+        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({
-        svg: `zip/cards/E${i}.svg`
+        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({
-        svg: `zip/cards/F${i}.svg`
+        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({
-        svg: `zip/cards/G${i}.svg`
+        svg: `zip/cards/G${i}.svg`,
+        fgSnaps: [ 'G' + (i + 6) ]
     } as Card)
 }
 for (let i = 1; i <= 6; i++) {
     cardList.push({
-        svg: `zip/cards/H${i}.svg`
+        svg: `zip/cards/H${i}.svg`,
+        fgSnaps: [ 'H1', 'H2', 'H3', 'H4', 'H5', 'H6 ']
     } as Card)
 }
-for (let i = 1; i <= 7; i++) {
+for (let i = 1; i <= 6; i++) {
     cardList.push({
-        svg: `zip/cards/IR${i}.png`
+        svg: `zip/cards/J${i}.svg`,
+        fgSnaps: [ 'J1', 'J2', 'J3', 'J4', 'J5', 'J6 ']
     } as Card)
 }
 
 
 
+
 class Message {
 
 }
@@ -66,11 +76,13 @@ export default class GameData {
 
     myFlop: Array<Card | undefined> = []
 
+    oppFlop: Array<Card | undefined> = []
+
     left?: Card
 
     right?: Card
 
-    myTurn: Boolean = false
+    myTurn: Boolean = true
 
     messages: Array<Message> = []
 
@@ -78,19 +90,23 @@ export default class GameData {
         this.deck = cardList.slice(0)
 
         for (let i = 0; i < 5; i++) {
-            this.draw(i)            
+            this.draw(i, this.myFlop)            
+        }
+
+        for (let i = 0; i < 5; i++) {
+            this.draw(i, this.oppFlop)            
         }
     }
       
 
-    draw(to:number) {
+    draw(to:number, dest:Array<Card | undefined>) {
         let idx = Math.floor(Math.random() * this.deck.length)
         let c = this.deck.splice(idx, 1)[0]
 
-        this.myFlop[to] = c
+        dest.splice(to, 1, c)        
     }
 
-    play(i:number) {
+    play(i:number, from:Array<Card | undefined>) {
         console.log("ping")
 
         if(this.myFlop[i]) {
@@ -100,10 +116,39 @@ export default class GameData {
             let self = this
             setTimeout(() => {
                 if (self.deck.length > 0) {
-                    self.draw(i)
+                    self.draw(i, this.myFlop)
                 }
             }, 200)                    
         }
     }
 
+
+    playerPlay(i:number) {
+        if (this.myTurn) {
+            this.myTurn = false
+            this.play(i, this.myFlop)
+
+            let self = this
+            setTimeout(() => {
+                this.opponentPlay()
+            }, 1000)         
+        }
+    }
+
+    opponentPlay() {
+        let validChoices = [0, 1, 2, 3, 4].filter((i) => this.oppFlop[i])
+        let num = Math.floor(Math.random() * validChoices.length)
+
+        this.left = this.oppFlop[num]  
+        this.oppFlop.splice(num, 1, undefined)          
+
+        let self = this
+        setTimeout(() => {
+            if (self.deck.length > 0) {
+                self.draw(num, this.oppFlop)
+                self.myTurn = true
+            }
+        }, 200)                    
+    }
+
 }
\ No newline at end of file

styles.css

@@ -45,6 +45,16 @@ body {
     transition: all 0.10s;
 }
 
+.card-view.opp {
+    border: 2px solid #AD73AD;
+}
+.card-view.empty.opp {
+    border: 2px dotted #AD73AD;    
+}
+.card-view.opp.back {
+    background: #AD73AD;
+}
+
 .card-view img {
     width: 100%;
     max-height: 100%;
@@ -58,6 +68,7 @@ body {
 
 .card-view.empty {
     border: 2px dotted #73AD21;
+    background: none;
 }