diff --git a/src/components/GameBodyView.ts b/src/components/GameBodyView.ts
index 24b12efc661286666834f1734a9c35a1be2ae1ee..fb83421304063eee84add9d66071992bc2d745ac 100644
--- a/src/components/GameBodyView.ts
+++ b/src/components/GameBodyView.ts
@@ -15,19 +15,23 @@ import StackView from "./StackView"
<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 opp="true" :card="this.gameData.left"></card-view>
- <card-view :card="this.gameData.right"></card-view>
+ <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">
diff --git a/src/components/GameHeaderView.ts b/src/components/GameHeaderView.ts
index 6457cb0a566bde09f7497172a24fd84aa20ec4a8..30e20a250c9855077fd313059a3ee013f98d0ab0 100644
--- a/src/components/GameHeaderView.ts
+++ b/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>
`
})
diff --git a/src/model/GameData.ts b/src/model/GameData.ts
index 5a67497574a22f076182aa98c933b959fbf18ee0..8361014b23872da312dada4929c12461b9fb354e 100644
--- a/src/model/GameData.ts
+++ b/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)
diff --git a/styles.css b/styles.css
index 5c0473a26ede6bd4cd8f2f6f386dc6a6363053ac..1f94df42c00bdc2a7694c65b93c345081616b842 100644
--- a/styles.css
+++ b/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 {