lzh/TexasPokerGame
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

programing client

Browse Source
This commit is contained in:
wzdwc
2020-04-27 22:14:05 +08:00
parent 9aedbd3532
commit 2481f5f2d3
15 changed files with 1422 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/router/index.ts
+37 -37
View File
@@ -1,37 +1,37 @@
import Vue from 'vue';
import VueRouter, { RouteConfig } from 'vue-router';
import Home from '../views/Home.vue';
import Login from '../views/login.vue';
import Register from '../views/register.vue';
import Game from '../views/game.vue';
Vue.use(VueRouter);
const routes: RouteConfig[] = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/login',
name: 'login',
component: Login,
},
{
path: '/register',
name: 'register',
component: Register,
},
{
path: '/game/:roomNumber',
name: 'game',
component: Game,
},
];
const router = new VueRouter({
routes,
});
export default router;
import Vue from 'vue';
import VueRouter, { RouteConfig } from 'vue-router';
import Home from '../views/Home.vue';
import Login from '../views/login.vue';
import Register from '../views/register.vue';
import Game from '../views/game.vue';
Vue.use(VueRouter);
const routes: RouteConfig[] = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/login',
name: 'login',
component: Login,
},
{
path: '/register',
name: 'register',
component: Register,
},
{
path: '/game/:roomNumber/:isOwner?',
name: 'game',
component: Game,
},
];
const router = new VueRouter({
routes,
});
export default router;
client/src/utils/request.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import axios, {AxiosRequestConfig, Method} from 'axios';
import cookie from 'js-cookie';
const request = async ({method = 'post' as Method, url = '', body = {}, timeout = 8000}) => {
const origin = 'http://192.168.0.101:7001/node';
const origin = 'http://192.168.0.103:7001/node';
// const origin = 'http://172.22.72.70:7001/node';
if (!url) {
return Promise.reject('Request url is null!');
client/src/views/Home.vue
+62 -49
View File
@@ -1,49 +1,62 @@
<template>
<div class="home container">
<div class="create-room"
@click="createRoom">create room
</div>
<div class="join room"
@click="joinRoom">join room
</div>
<div class="room number">room number:</div>
</div>
</template>
<script lang="ts">
import {Vue} from 'vue-property-decorator';
import Component from 'vue-class-component';
import service from '../service';
@Component
export default class Home extends Vue {
public roomNumber: string = '';
private async createRoom() {
try {
const result = await service.createRoom();
const {roomNumber} = result.data;
console.log(result);
this.$router.replace({name: 'game', params: {roomNumber}});
} catch (e) {
console.log(e);
}
}
private joinRoom() {
console.log('');
}
}
</script>
<style lang="less">
.container{
.create-room{
padding: 10px;
background-color: #6796ff;
color: #fff;
border-radius: 8px;
width: 100px;
margin: auto;
}
}
</style>
<template>
<div class="home-container container">
<div class="room-btn" v-show="showBtn">
<div class="create-room btn"
@click="createRoom"><span>create room</span>
</div>
<div class="btn"
@click="joinRoom"> <span>join room</span>
</div>
</div>
<div class="room number" v-show="isJoin">
<div class="input-bd">
<div class="input-name">room number:</div>
<div class="input-text">
<input type="tel" maxlength="6"
v-model="roomNumber"/>
</div>
</div>
<div class="btn">
<span @click="go">go</span>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator';
import Component from 'vue-class-component';
import service from '../service';
@Component
export default class Home extends Vue {
public roomNumber: string = '';
private isJoin = false;
private showBtn = true;
private async createRoom() {
try {
const result = await service.createRoom();
const { roomNumber } = result.data;
console.log(result);
this.$router.replace({ name: 'game', params: { roomNumber, isOwner: '1' } });
} catch (e) {
console.log(e);
}
}
private joinRoom() {
this.isJoin = true;
this.showBtn = false;
}
private go() {
this.$router.replace({ name: 'game', params: { roomNumber: this.roomNumber } });
}
}
</script>
<style lang="less">
.home-container {
}
</style>
client/src/views/game.vue
+84 -24
View File
@@ -1,17 +1,18 @@
<template>
<div class="game-container container">
<div class="game-player-info">
<div class="users"
v-for="user in users">
<span> {{user.nickName}}: {{user.counter}}</span>
<span v-show="user.actionSize > 0"> actionSize:{{user.actionSize}} </span>
<span> type:{{user.type}} </span>
<div class="game-body" v-show="hasBuyIn">
<div class="game-player-info">
<div class="users"
v-for="user in users">
<span> {{user.nickName}}: {{user.counter}}</span>
<span v-show="user.actionSize > 0"> actionSize:{{user.actionSize}} </span>
<span> type:{{user.type}} </span>
<span v-show="gameOver && user.handCard">handCard: {{mapCard(user.handCard)}}</span>
</div>
<div class="join">
{{joinMsg}}
</div>
</div>
<div class="join">
{{joinMsg}}
</div>
</div>
<div class="game-body">
<div class="pot">pot: {{pot}}</div>
<div class="common-card">commonCard:{{commonCardString}}</div>
<div class="hand-card">handCard:{{handCardString}}</div>
@@ -39,9 +40,10 @@
<i @click="action('allin')">allin</i>
</div>
</div>
<div class="btn play"><span @click="play">play game</span></div>
<div class="btn play"
v-show="isOwner && !isPlay"><span @click="play">play game</span></div>
</div>
<div class="buy-in">
<div class="buy-in" v-show="showBuyIn">
<div class="input-bd">
<div class="input-name">buy in:</div>
<div class="input-text">
@@ -68,6 +70,7 @@
actionCommand: string;
type: string;
userId?: number;
handCard?: string[];
}
export enum ECommand {
@@ -98,11 +101,29 @@
private prevSize = 0;
private isAction = false;
private isRaise = false;
private winner = [];
private showBuyIn = true;
get isPlay() {
return this.pot !== 0 && this.currPlayer?.counter !== 0;
}
get hasBuyIn() {
return this.currPlayer?.counter !== 0;
}
get roomId() {
return this.$route.params.roomNumber;
}
get isOwner() {
return !!this.$route.params.isOwner;
}
get gameOver() {
return this.winner.length !== 0;
}
get currPlayer() {
return this.users.find((u: IUser) => this.userInfo.userId === u.userId);
}
@@ -112,19 +133,32 @@
}
get commonCardString() {
const cardNumber = [2, 3, 4, 5, 6, 7, 8, 9, 10, 'J', 'Q', 'K', 'A'];
const color = ['♦', '♣', '♥', '♠'];
return this.commonCard.map((c: string) => {
const cNumber = c.charCodeAt(0) - 97;
const cColor = Number(c[1]) - 1;
return `${cardNumber[cNumber]}${color[cColor]}`;
});
return this.mapCard(this.commonCard);
}
get handCardString() {
return this.mapCard(this.handCard);
}
private init() {
this.users = [];
this.userInfo = {};
this.joinMsg = '';
this.handCard = [];
this.commonCard = [];
this.buyInSize = 0;
this.pot = 0;
this.prevSize = 0;
this.isAction = false;
this.isRaise = false;
this.winner = [];
this.showBuyIn = true;
}
private mapCard(cards: string []) {
const cardNumber = [2, 3, 4, 5, 6, 7, 8, 9, 10, 'J', 'Q', 'K', 'A'];
const color = ['♦', '♣', '♥', '♠'];
return this.handCard.map((c: string) => {
return cards?.map((c: string) => {
const cNumber = c.charCodeAt(0) - 97;
const cColor = Number(c[1]) - 1;
return `${cardNumber[cNumber]}${color[cColor]}`;
@@ -134,7 +168,9 @@
private showActionBtn(type: string) {
// check
if ('check' === type) {
return this.prevSize === -1;
return this.prevSize <= 0
|| (this.currPlayer?.type === 'big_blind' && this.prevSize === 2 &&
this.commonCard.length === 0);
}
// raise
if ('raise' === type) {
@@ -142,7 +178,10 @@
}
// call
if ('call' === type) {
return this.canActionSize > this.prevSize;
return this.canActionSize > this.prevSize
&& this.prevSize > 0
&& !(this.currPlayer?.type === 'big_blind' && this.prevSize === 2 &&
this.commonCard.length === 0);
}
return true;
}
@@ -161,7 +200,7 @@
const token = cookie.get('token');
const log = console.log;
// const origin = 'http://172.22.72.70:7001';
const origin = 'http://192.168.0.101:7001';
const origin = 'http://192.168.0.103:7001';
this.socket = io(`${origin}/socket`, {
// 实际使用中可以在这里传递参数
query: {
@@ -185,6 +224,15 @@
if (data.action === 'userInfo') {
this.userInfo = data.payload;
}
if (data.action === 'gameInfo') {
const payload = data.payload;
this.users = payload.data.players;
this.pot = payload.data.pot;
this.prevSize = payload.data.prevSize;
console.log('msg.data.currPlayer.userId', msg.data);
this.isAction = !!(this.userInfo && this.userInfo.userId ===
payload.data.currPlayer.userId);
}
});
});
@@ -208,6 +256,17 @@
this.isAction = !!(this.userInfo && this.userInfo.userId === msg.data.currPlayer.userId);
console.log('gameInfo', msg.data);
}
if (msg.action === 'gameOver') {
console.log('gameOver', msg.data);
this.winner = msg.data.winner;
this.winner.forEach((w: IUser[]) => {
this.users = this.users.map((p) => {
const winner = w.find(wPlayer => wPlayer.userId === p.userId);
return Object.assign({}, p, { handCard: winner?.handCard });
});
});
}
});
// 系统事件
@@ -229,6 +288,7 @@
this.emit('buyIn', {
buyInSize: this.buyInSize,
});
this.showBuyIn = false;
} catch (e) {
console.log(e);
}