Skip to content
Snippets Groups Projects
Commit 009c5917 authored by Will Billingsley's avatar Will Billingsley
Browse files

Can play a bit with the computer

parent b25388b8
No related branches found
No related tags found
No related merge requests found
...@@ -16,18 +16,22 @@ import StackView from "./StackView" ...@@ -16,18 +16,22 @@ import StackView from "./StackView"
</div> </div>
<div class="playing-area"> <div class="playing-area">
<stack-view :stack="this.gameData.deck"></stack-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 opp="true" :card="this.gameData.left"></card-view>
<card-view :card="this.gameData.right"></card-view> <card-view :card="this.gameData.right"></card-view>
</div>
<div class="scores"> <div class="scores">
<div class="score left"> <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.score[0] }}</span>
<span v-bind:class="{ turn: this.gameData.myTurn }">{{ this.gameData.names[0] }}</span>
</div> </div>
<div class="score right"> <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.score[1] }}</span>
<span v-bind:class="{ turn: !this.gameData.myTurn }">{{ this.gameData.names[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> </div>
</div> </div>
<div class="flop-view"> <div class="flop-view">
......
...@@ -9,18 +9,6 @@ import GameData from '../model/GameData'; ...@@ -9,18 +9,6 @@ import GameData from '../model/GameData';
template: ` template: `
<div class="game-header"> <div class="game-header">
Game code: {{ gameData.code }} 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> </div>
` `
}) })
......
...@@ -3,54 +3,63 @@ import Card from "./Card" ...@@ -3,54 +3,63 @@ import Card from "./Card"
let cardList:Array<Card> = [] let cardList:Array<Card> = []
for (let i = 1; i <= 9; i++) { for (let i = 1; i <= 9; i++) {
cardList.push({ cardList.push({
name: `A${i}`,
svg: `zip/cards/A${i}.svg`, svg: `zip/cards/A${i}.svg`,
fgSnaps: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'A9'] fgSnaps: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'A9']
} as Card) } as Card)
} }
for (let i = 1; i <= 8; i++) { for (let i = 1; i <= 8; i++) {
cardList.push({ cardList.push({
name: `B${i}`,
svg: `zip/cards/B${i}.svg`, svg: `zip/cards/B${i}.svg`,
fgSnaps: ['B1', 'B2', 'B3', 'B4', 'B5', 'B6', 'B7', 'B8'] fgSnaps: ['B1', 'B2', 'B3', 'B4', 'B5', 'B6', 'B7', 'B8']
} as Card) } as Card)
} }
for (let i = 1; i <= 7; i++) { for (let i = 1; i <= 7; i++) {
cardList.push({ cardList.push({
name: `C${i}`,
svg: `zip/cards/C${i}.svg`, svg: `zip/cards/C${i}.svg`,
fgSnaps: ['C1', 'C2', 'C3', 'C4', 'C5', 'C6', 'C7'] fgSnaps: ['C1', 'C2', 'C3', 'C4', 'C5', 'C6', 'C7']
} as Card) } as Card)
} }
for (let i = 1; i <= 8; i++) { for (let i = 1; i <= 8; i++) {
cardList.push({ cardList.push({
name: `D${i}`,
svg: `zip/cards/D${i}.svg`, svg: `zip/cards/D${i}.svg`,
fgSnaps: ['D1', 'D2', 'D3', 'D4', 'D5', 'D6', 'D7', 'D8'] fgSnaps: ['D1', 'D2', 'D3', 'D4', 'D5', 'D6', 'D7', 'D8']
} as Card) } as Card)
} }
for (let i = 1; i <= 7; i++) { for (let i = 1; i <= 7; i++) {
cardList.push({ cardList.push({
name: `E${i}`,
svg: `zip/cards/E${i}.svg`, svg: `zip/cards/E${i}.svg`,
fgSnaps: ['E1', 'E2', 'E3', 'E4', 'E5', 'E6', 'E7'] fgSnaps: ['E1', 'E2', 'E3', 'E4', 'E5', 'E6', 'E7']
} as Card) } as Card)
} }
for (let i = 1; i <= 9; i++) { for (let i = 1; i <= 9; i++) {
cardList.push({ cardList.push({
name: `F${i}`,
svg: `zip/cards/F${i}.svg`, svg: `zip/cards/F${i}.svg`,
fgSnaps: ['F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9'] fgSnaps: ['F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9']
} as Card) } as Card)
} }
for (let i = 1; i <= 6; i++) { for (let i = 1; i <= 6; i++) {
cardList.push({ cardList.push({
name: `G${i}`,
svg: `zip/cards/G${i}.svg`, svg: `zip/cards/G${i}.svg`,
fgSnaps: [ 'G' + (i + 6) ] fgSnaps: [ 'G' + (i + 6) ]
} as Card) } as Card)
} }
for (let i = 1; i <= 6; i++) { for (let i = 1; i <= 6; i++) {
cardList.push({ cardList.push({
name: `H${i}`,
svg: `zip/cards/H${i}.svg`, svg: `zip/cards/H${i}.svg`,
fgSnaps: [ 'H1', 'H2', 'H3', 'H4', 'H5', 'H6 '] fgSnaps: [ 'H1', 'H2', 'H3', 'H4', 'H5', 'H6 ']
} as Card) } as Card)
} }
for (let i = 1; i <= 6; i++) { for (let i = 1; i <= 6; i++) {
cardList.push({ cardList.push({
name: `J${i}`,
svg: `zip/cards/J${i}.svg`, svg: `zip/cards/J${i}.svg`,
fgSnaps: [ 'J1', 'J2', 'J3', 'J4', 'J5', 'J6 '] fgSnaps: [ 'J1', 'J2', 'J3', 'J4', 'J5', 'J6 ']
} as Card) } as Card)
...@@ -68,9 +77,9 @@ export default class GameData { ...@@ -68,9 +77,9 @@ export default class GameData {
code: string = "123abc" 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> = [] deck: Array<Card> = []
...@@ -82,10 +91,12 @@ export default class GameData { ...@@ -82,10 +91,12 @@ export default class GameData {
right?: Card right?: Card
myTurn: Boolean = true myTurn: boolean = true
messages: Array<Message> = [] messages: Array<Message> = []
snap: boolean = false
constructor() { constructor() {
this.deck = cardList.slice(0) this.deck = cardList.slice(0)
...@@ -125,10 +136,28 @@ export default class GameData { ...@@ -125,10 +136,28 @@ export default class GameData {
playerPlay(i:number) { playerPlay(i:number) {
if (this.myTurn) { if (this.myTurn) {
this.myTurn = false
this.play(i, this.myFlop) this.play(i, this.myFlop)
let self = this 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(() => { setTimeout(() => {
this.opponentPlay() this.opponentPlay()
}, 1000) }, 1000)
......
...@@ -22,6 +22,16 @@ body { ...@@ -22,6 +22,16 @@ body {
margin: 20px; margin: 20px;
} }
.play-wrap {
display: flex;
}
.play-wrap.snap {
display: flex;
border-radius: 15px;
background: yellow;
}
.flop-view { .flop-view {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -75,12 +85,14 @@ body { ...@@ -75,12 +85,14 @@ body {
.scores { .scores {
margin: 10px; margin: 10px;
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
} }
.score { .score {
display: flex; display: flex;
border: 1px solid #31490e; border: 1px solid #31490e;
justify-content: space-between;
} }
.score span { .score span {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment