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

client ui

Browse Source
This commit is contained in:
wzdwc
2020-05-13 01:03:41 +08:00
parent ac0663622f
commit ec2b119172
31 changed files with 1630 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.vue
+70 -68
View File
@@ -1,68 +1,70 @@
<template>
<div id="app">
<router-view/>
</div>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator';
export default class App extends Vue {}
</script>
<style lang="less">
@import "assets/less/base";
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
*{
padding: 0;
margin: 0;
}
body{
box-sizing: border-box;
}
.container{
.input-bd{
line-height: 30px;
margin: 10px;
.input-name{
display: inline-block;
width: 100px;
text-align: right;
}
.input-text{
display: inline-block;
padding-left: 10px;
input{
height: 30px;
width: 180px;
padding:0 5px;
}
}
}
.btn {
margin-top: 15px;
span{
color: #fff;
background-color: #6796ff;
border-radius: 8px;
padding: 5px 20px;
display: inline-block;
margin: 10px;
}
b{
display: inline-block;
border: aliceblue;
border-radius: 8px;
padding: 5px 20px;
margin-left: 10px;
}
}
}
</style>
<template>
<div id="app">
<router-view/>
</div>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator';
export default class App extends Vue {}
</script>
<style lang="less">
@import "assets/less/base";
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
max-width: 640rem;
margin: auto;
}
*{
padding: 0;
margin: 0;
}
body{
box-sizing: border-box;
}
.container{
.input-bd{
line-height: 30px;
margin: 10px;
.input-name{
display: inline-block;
width: 100px;
text-align: right;
}
.input-text{
display: inline-block;
padding-left: 10px;
input{
height: 30px;
width: 180px;
padding:0 5px;
}
}
}
.btn {
margin-top: 15px;
span{
color: #fff;
background-color: #6796ff;
border-radius: 8px;
padding: 5px 20px;
display: inline-block;
margin: 10px;
}
b{
display: inline-block;
border: aliceblue;
border-radius: 8px;
padding: 5px 20px;
margin-left: 10px;
}
}
}
</style>
client/src/components/BuyIn.vue
+76
View File
@@ -0,0 +1,76 @@
<template>
<div class="buy-in" v-show="showBuyIn">
<div class="shadow" @click="closeBuyIn"></div>
<div class="buy-in-body">
<div class="input-bd">
<div class="input-name">buy in: {{buyInSize}}</div>
<range :max="1000" :min="200" @change="getBuyInSize"></range>
</div>
<div class="btn"><span @click="buyIn">buy in</span></div>
</div>
</div>
</template>
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import range from '../components/range.vue';
@Component({
components: {
range,
},
})
export default class BuyIn extends Vue {
@Prop() private showBuyIn!: boolean;
private buyInSize: number = 0;
private getBuyInSize(val: string) {
this.buyInSize = Number(val);
}
private closeBuyIn() {
this.$emit('update:showBuyIn', false);
}
private async buyIn() {
this.closeBuyIn();
this.$emit('buyIn', this.buyInSize)
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.buy-in {
position: fixed;
z-index: 99;
.shadow {
position: fixed;
z-index: 9;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
}
.buy-in-body {
z-index: 99;
position: fixed;
left: 50%;
top: 50%;
margin: -100px -150px;
width: 300px;
height: 150px;
border-radius: 12px;
box-sizing: border-box;
background: #fff;
padding: 20px;
}
.input-text {
input {
width: 100px;
}
}
}
</style>
client/src/components/SitList.vue
+74 -51
View File
@@ -1,4 +1,3 @@
y
<template>
<div class="sit-list-container">
<div class="sit-list">
@@ -20,7 +19,7 @@ y
<div class="counter" v-show="sit.player.counter">
{{ sit.player.counter }}
</div>
<div class="action-size" v-show="sit.player.actionSize">
<div class="action-size" v-show="sit.player.actionSize > 0">
{{ sit.player.actionSize }}
</div>
<div class="action-command" v-show="sit.player.actionCommand">
@@ -33,7 +32,7 @@ y
{{ sit.player.handCard }}
</div>
</div>
<div class="cards" v-show="sit.player.userId === currPlayer.userId">
<div class="cards" v-show="showHandCard(sit)">
<div class="hand-card">
<cardList :cardList="handCard"></cardList>
</div>
@@ -43,35 +42,57 @@ y
</div>
</div>
</div>
<BuyIn :show-buy-in.sync="showBuyIn" @buyIn = 'buyIn'></BuyIn>
</div>
</template>
<script lang="ts">
import {Component, Prop, Watch, Vue} from 'vue-property-decorator';
import {IUser} from '@/interface/user';
import {ILinkNode, Link} from '@/utils/Link';
import ISit from '@/interface/sit';
import {IPlayer} from '@/interface/IPlayer';
import {ILinkNode} from '@/utils/Link';
import ISit from '@/interface/ISit';
import cardList from './cardList.vue';
import BuyIn from '@/components/BuyIn.vue';
@Component({
components: {
cardList,
BuyIn
},
})
export default class SitList extends Vue {
@Prop() private msg!: string;
@Prop() private currPlayer: IUser | undefined;
@Prop() private sitLink: ILinkNode<ISit> | undefined;
@Prop() private handCard: string[] | undefined;
@Prop() private currPlayer!: IPlayer;
@Prop() private sitLink!: ILinkNode<ISit>;
@Prop() private handCard!: string[];
@Prop() private isPlay!:boolean;
private sitLinkNode: any = '';
private showBuyIn = false;
private currSit!: ISit;
@Watch('sitLink')
private getSit(val: ILinkNode<ISit>) {
this.sitLinkNode = val;
}
private buyIn(size: number) {
console.log('ccc');
this.showBuyIn = false
this.$emit('buyIn', size);
this.sitDown(this.currSit);
}
private showHandCard(sit: ISit) {
return sit.player?.userId === this.currPlayer?.userId;
}
private sitDown(sit: ISit) {
if (!sit.player) {
if (!sit.player && !this.isPlay) {
console.log('ccc', sit.position);
if (this.currPlayer.counter <= 0) {
this.showBuyIn = true;
this.currSit = sit;
return;
}
let sitNode = this.sitLinkNode;
for (let i = 0; i < 9; i++) {
if (sitNode) {
@@ -86,9 +107,10 @@ export default class SitList extends Vue {
if (sitNode) {
const next = sitNode.next;
if (sit.position === sitNode.node.position) {
sitNode.node.player = this.currPlayer as IUser;
sitNode.node.player = this.currPlayer as IPlayer;
this.$emit('update:sitLink', sitNode);
this.$emit('sit', sitNode);
break;
}
sitNode = next as ILinkNode<ISit>;
}
@@ -141,7 +163,7 @@ export default class SitList extends Vue {
.sit-list {
position: relative;
width: 100vw;
height: 620px;
height: 620 / 6.67vh;
padding: 10px;
margin: 0 15px;
box-sizing: border-box;
@@ -152,14 +174,14 @@ export default class SitList extends Vue {
.default {
i {
width: 45px;
height: 45px;
width: 45 / 3.75vw ;
height: 45 / 3.75vw;
border-radius: 50%;
border: 1px solid #bababa;
display: block;
font-style: normal;
font-size: 20px;
line-height: 45px;
line-height: 45 / 3.75vw;
color: #fff;
}
}
@@ -168,10 +190,10 @@ export default class SitList extends Vue {
position: relative;
.icon {
width: 45px;
height: 45px;
width: 45 / 3.75vw;
height: 45 / 3.75vw;
font-size: 45px;
line-height: 45px;
line-height: 45 / 3.75vw;
border-radius: 50%;
margin-bottom: 2px;
}
@@ -189,8 +211,8 @@ export default class SitList extends Vue {
}
.action-command {
top: 15px;
left: 45px;
top: 15 / 6.67vh;
left: 45 / 3.75vw;
padding: 1px 8px;
border-radius: 9px;
color: #ffffff;
@@ -204,12 +226,12 @@ export default class SitList extends Vue {
color: #2b2b2b;
border-radius: 50%;
padding: 2px;
width: 15px;
width: 15 / 3.75vw;
height: 15px;
line-height: 16px;
position: absolute;
top: 53px;
left: 38px;
top: 53 / 6.67vh;
left: 38 / 3.75vw;
font-size: 12px;
transform: scale(0.8);
}
@@ -220,30 +242,30 @@ export default class SitList extends Vue {
border-radius: 2px;
padding: 1px 4px 1px 12px;
text-align: center;
min-width: 35px;
min-width: 35 / 3.75vw;
color: #fff;
font-weight: 600;
position: absolute;
top: 35px;
left: 40px;
top: 35 / 6.67vh;
left: 40 / 3.75vw;
}
}
&:nth-child(1) {
left: 100px;
top: 460px;
left: 100 / 3.75vw;
top: 460 / 6.67vh;
.action-command {
left: -22px;
left: -22 / 3.75vw;
}
.type {
left: -16px;
left: -16 / 3.75vw;
}
.action-size {
top: -5px;
left: 57px;
top: -5 / 6.67vh;
left: 57 / 3.75vw;
padding-right: 15px;
text-align: right;
}
@@ -251,42 +273,42 @@ export default class SitList extends Vue {
&:nth-child(2) {
left: 0;
top: 330px;
top: 330 / 6.67vh;
}
&:nth-child(3) {
left: 0;
top: 210px;
top: 210 / 6.67vh;
}
&:nth-child(4) {
left: 0;
top: 100px;
top: 100 / 6.67vh;
}
&:nth-child(5) {
left: 75px;
left: 75 / 3.75vw;
top: 0;
}
&:nth-child(6) {
left: 240px;
left: 240 / 3.75vw;
top: 0;
}
&:nth-child(7) {
left: 296px;
top: 100px;
left: 296 / 3.75vw;
top: 100 / 6.67vh;
}
&:nth-child(8) {
left: 296px;
top: 210px;
left: 296 / 3.75vw;
top: 210 / 6.67vh;
}
&:nth-child(9) {
left: 296px;
top: 330px;
left: 296 / 3.75vw;
top: 330 / 6.67vh;
}
&:nth-child(6),
@@ -294,29 +316,30 @@ export default class SitList extends Vue {
&:nth-child(8),
&:nth-child(9) {
.action-command {
left: -22px;
left: -22 / 3.75vw;
}
.type {
left: -16px;
left: -16 / 3.75vw;
}
.action-size {
background-position: right;
left: -40px;
left: -40 / 3.75vw;
padding-left: 1px;
padding-right: 17px;
text-align: right;
text-align: right;
}
}
.cards {
position: absolute;
left: 52px;
top: 20px;
min-width: 60px;
min-height: 60px;
line-height: 60px;
left: 52 / 3.75vw;
top: 20 / 6.67vh;
min-width: 60 / 3.75vw;
min-height: 60 / 6.67vh;
line-height: 60 / 6.67vh;
.ready{
font-size: 14px;
display: inline-block;
client/src/components/cardList.vue
+3 -3
View File
@@ -101,7 +101,7 @@
line-height: 60px;
&.big{
left: 15px;
font-size: 40px;
font-size: 35px;
top:12px;
}
}
@@ -114,8 +114,8 @@
}
&.turn {
animation: turnA 2s forwards;
animation-delay: 2s;
animation: turnA 1s forwards;
animation-delay: 1s;
}
&:nth-child(1) {
client/src/components/range.vue
+71 -71
View File
@@ -1,71 +1,71 @@
<template>
<div class="slide-bar-container">
<!-- <div class="value">{{raiseSize}}</div>-->
<div class="range-body">
<input type="range" v-model="range":class="{horizontal: !!isHorizontal}">
</div>
</div>
</template>
<script lang="ts">
import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
@Component
export default class Range extends Vue {
@Prop({ type: Number, default: 1000 }) private max!: number;
@Prop({ type: Number, default: 100 }) private min!: number;
@Prop({ type: Boolean, default: false }) private isHorizontal!: boolean;
private range = 0;
@Watch('range')
private raiseSize(val:string) {
const valNum = Number(val);
const size = Number(val) === 0 ?
this.min : Math.floor(valNum / 100 * (this.max - this.min)) + this.min;
console.log('size', size)
this.$emit('change', size)
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.slide-bar-container {
background-color: #fff;
.range-body{
line-height: 10px;
}
.value{
margin-bottom: 10px;
}
input[type=range] {
-webkit-appearance: none;
width: 200px;
border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
vertical-align: middle;
display: inline-block;
&.horizontal{
transform: rotateZ(-90deg) translate3d(-50%,0,0);
transform-origin: center;
}
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 30px;
width: 30px;
margin-top: -12px; /*使滑块超出轨道部分的偏移量相等*/
background: #ffffff;
border-radius: 50%; /*外观设置为圆形*/
border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}
input[type=range]::-webkit-slider-runnable-track {
height: 6px;
border-radius: 10px; /*将轨道设为圆角的*/
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
}
}
</style>
<template>
<div class="slide-bar-container">
<!-- <div class="value">{{raiseSize}}</div>-->
<div class="range-body">
<input type="range" v-model="range":class="{horizontal: !!isHorizontal}">
</div>
</div>
</template>
<script lang="ts">
import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
@Component
export default class Range extends Vue {
@Prop({ type: Number, default: 1000 }) private max!: number;
@Prop({ type: Number, default: 100 }) private min!: number;
@Prop({ type: Boolean, default: false }) private isHorizontal!: boolean;
private range = 0;
@Watch('range')
private raiseSize(val:string) {
const valNum = Number(val);
const size = Number(val) === 0 ?
this.min : Math.floor(valNum / 100 * (this.max - this.min)) + this.min;
console.log('size', size)
this.$emit('change', size)
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.slide-bar-container {
background-color: #fff;
.range-body{
line-height: 10px;
}
.value{
margin-bottom: 10px;
}
input[type=range] {
-webkit-appearance: none;
width: 200px;
border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
vertical-align: middle;
display: inline-block;
&.horizontal{
transform: rotateZ(-90deg) translate3d(-50%,0,0);
transform-origin: center;
}
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 30px;
width: 30px;
margin-top: -12px; /*使滑块超出轨道部分的偏移量相等*/
background: #ffffff;
border-radius: 50%; /*外观设置为圆形*/
border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}
input[type=range]::-webkit-slider-runnable-track {
height: 6px;
border-radius: 10px; /*将轨道设为圆角的*/
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
}
}
</style>
client/src/interface/user.ts → client/src/interface/IPlayer.ts
+17 -10
View File
@@ -1,10 +1,17 @@
export interface IUser {
counter: number;
nickName: string;
actionSize: number;
actionCommand: string;
type: string;
userId?: number;
handCard?: string[];
buyIn: number;
}
enum PlayerType {
READY,
SIT_DOWN,
GAMING,
}
export interface IPlayer {
counter: number;
nickName: string;
actionSize: number;
actionCommand: string;
type: string;
userId?: number;
handCard?: string[];
buyIn: number;
status: number;
}
client/src/interface/ISit.ts
+6
View File
@@ -0,0 +1,6 @@
import { IPlayer } from '@/interface/IPlayer';
export default interface ISit {
player: IPlayer | null;
position: number;
}
client/src/interface/IUser.ts
+7
View File
@@ -0,0 +1,7 @@
export interface IUser {
nickName: string;
counter: number;
userId?: number;
buyIn: number;
account: string;
}
client/src/interface/sit.ts
-6
View File
@@ -1,6 +0,0 @@
import { IUser } from '@/interface/user';
export default interface ISit {
player: IUser | null;
position: number;
}
client/src/main.ts
+17 -16
View File
@@ -1,16 +1,17 @@
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import VConsole from 'vconsole';
Vue.config.productionTip = false;
// tslint:disable-next-line:no-unused-expression
new VConsole();
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import VConsole from 'vconsole';
import './utils/init';
Vue.config.productionTip = false;
// tslint:disable-next-line:no-unused-expression
new VConsole();
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
client/src/utils/init.ts
+13
View File
@@ -0,0 +1,13 @@
let setRem = () => {
let curWidth = document.documentElement.clientWidth || window.screen.width;
const basicWidth = 375;
const basicFontSize = 20;
let calcFontSize = 0;
curWidth = curWidth > 640 ? 640 : curWidth < 320 ? 320 : curWidth;
calcFontSize = (curWidth / basicWidth) * basicFontSize;
document.documentElement.style.fontSize = calcFontSize + 'px';
};
setRem();
window.addEventListener('resize', () => {
setRem();
});
client/src/views/Home.vue
+68 -68
View File
@@ -1,68 +1,68 @@
<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>
<range :is-horizontal="false"></range>
</div>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator';
import Component from 'vue-class-component';
import service from '../service';
import range from '@/components/range.vue';
@Component({
components: {
range,
},
})
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>
<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>
<range :is-horizontal="false"></range>
</div>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator';
import Component from 'vue-class-component';
import service from '../service';
import range from '@/components/range.vue';
@Component({
components: {
range,
},
})
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
+76 -101
View File
@@ -3,23 +3,24 @@
<sitList :sitLink.sync='sitLink'
:curr-player="currPlayer"
@sit="sitDown"
:hand-card="handCardString"
:userInfo.sync="userInfo"></sitList>
@buyIn="buyIn"
:isPlay = 'isPlay'
:hand-card="handCardString"></sitList>
<common-card :cardListString="commonCardString"></common-card>
<div class="game-body">
<div class="game-player-info">
<!-- <div class="users"-->
<!-- v-for="user in users">-->
<!-- <span> {{user.nickName}}: {{user.counter}}</span>-->
<!-- <span>buyIn: {{user.buyIn}}</span>-->
<!-- <span v-show="user.actionSize > 0"> actionSize:{{user.actionSize}} </span>-->
<!-- <span v-show="user.type"> type:{{user.type}} </span>-->
<!-- <span v-show="gameOver && user.handCard">handCard: {{mapCard(user.handCard)}}</span>-->
<!-- </div>-->
<div class="join">
{{joinMsg}}
</div>
</div>
<!-- <div class="game-player-info">-->
<!-- &lt;!&ndash; <div class="users"&ndash;&gt;-->
<!-- &lt;!&ndash; v-for="user in users">&ndash;&gt;-->
<!-- &lt;!&ndash; <span> {{user.nickName}}: {{user.counter}}</span>&ndash;&gt;-->
<!-- &lt;!&ndash; <span>buyIn: {{user.buyIn}}</span>&ndash;&gt;-->
<!-- &lt;!&ndash; <span v-show="user.actionSize > 0"> actionSize:{{user.actionSize}} </span>&ndash;&gt;-->
<!-- &lt;!&ndash; <span v-show="user.type"> type:{{user.type}} </span>&ndash;&gt;-->
<!-- &lt;!&ndash; <span v-show="gameOver && user.handCard">handCard: {{mapCard(user.handCard)}}</span>&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- <div class="join">-->
<!-- {{joinMsg}}-->
<!-- </div>-->
<!-- </div>-->
<div class="pot">pot: {{pot}}</div>
<!-- <div class="common-card">commonCard:{{commonCardString}}</div>-->
<!-- <div class="hand-card">handCard:{{handCardString}}</div>-->
@@ -39,8 +40,8 @@
<div class="raise-size">
<div class="not-allin"
v-show="showActionBtn('raise')">
<i @click="raise(pot / 3)">{{pot / 3}}</i>
<i @click="raise(pot / 2)">{{pot / 2}}</i>
<i @click="raise(Math.floor(pot / 3))">{{Math.floor(pot / 3)}}</i>
<i @click="raise(Math.floor(pot / 2))">{{Math.floor(pot / 2)}}</i>
<i @click="raise(pot)">{{pot}}</i>
<i @click="raise(pot * 2)">{{2*pot}}</i>
</div>
@@ -52,30 +53,21 @@
<i @click="showBuyInDialog()">buy in</i>
</div>
</div>
<div class="buy-in" v-show="showBuyIn">
<div class="shadow" @click="closeBuyIn"></div>
<div class="buy-in-body">
<div class="input-bd">
<div class="input-name">buy in: {{buyInSize}}</div>
<range :max="1000" :min="200" @change="getBuyInSize"></range>
</div>
<div class="btn"><span @click="buyIn">buy in</span></div>
</div>
</div>
<BuyIn :showBuyIn.sync = 'showBuyIn' @buyIn = 'buyIn'></BuyIn>
</div>
</template>
<script lang="ts">
import {Vue} from 'vue-property-decorator';
import {Vue, Watch} from 'vue-property-decorator';
import Component from 'vue-class-component';
import io from 'socket.io-client';
import cookie from 'js-cookie';
import sitList from '../components/SitList.vue';
import commonCard from '../components/CommonCard.vue';
import {IUser} from '@/interface/user';
import {IPlayer} from '@/interface/IPlayer';
import {ILinkNode, Link} from '@/utils/Link';
import ISit from '@/interface/sit';
import range from '../components/range.vue'
import ISit from '../interface/ISit';
import BuyIn from '../components/BuyIn.vue';
export enum ECommand {
CALL = 'call',
@@ -96,27 +88,37 @@
components: {
sitList,
commonCard,
range
BuyIn
},
})
export default class Game extends Vue {
public socket: any = null;
private users: IUser[] = [];
// in the room user
// have a sit user
private players: IPlayer[] = [];
private userInfo: any = {};
private joinMsg = '';
private handCard = [];
private commonCard = [];
private buyInSize = 0;
private pot = 0;
private prevSize = 0;
private isAction = false;
private isRaise = false;
private winner = [];
private showBuyIn = true;
private showBuyIn = false;
private showSetting = false;
private sitLink: any = '';
private sitList: ISit[] = [];
@Watch('players')
private playerChange(players: IPlayer[]) {
this.sitList = this.sitList.map((sit: ISit) => {
const player = players.find(p => p.userId === sit.player?.userId);
return Object.assign({}, {}, {player, position: sit.position}) as ISit;
});
this.initSitLink();
}
get isPlay() {
return this.pot !== 0 && this.currPlayer?.buyIn !== 0;
}
@@ -138,7 +140,7 @@
}
get currPlayer() {
return this.users.find((u: IUser) => this.userInfo.userId === u.userId);
return this.players.find((u: IPlayer) => this.userInfo.userId === u.userId);
}
get canActionSize() {
@@ -158,17 +160,11 @@
return this.mapCard(this.handCard);
}
private getBuyInSize(val:string) {
this.buyInSize = Number(val);
}
private init() {
this.users = [];
this.userInfo = {};
this.joinMsg = '';
this.handCard = [];
this.commonCard = [];
this.buyInSize = 0;
this.pot = 0;
this.prevSize = 0;
this.isAction = false;
@@ -216,7 +212,7 @@
if ('check' === type) {
return this.prevSize <= 0
|| (this.commonCard.length === 0
&& this.users.length === 2
&& this.players.length === 2
&& this.currPlayer?.type === 'dealer'
&& this.prevSize === 2)
|| (this.currPlayer?.type === 'big_blind' && this.prevSize === 2 &&
@@ -272,13 +268,18 @@
this.handCard = data.payload.handCard;
}
if (data.action === 'userInfo') {
this.userInfo = data.payload;
this.userInfo = data.payload.userInfo;
}
if (data.action === 'sitList') {
this.sitList = data.payload.sitList;
this.initSitLink();
}
if (data.action === 'gameInfo') {
const payload = data.payload;
this.users = payload.data.players;
this.players = payload.data.players;
this.pot = payload.data.pot;
this.prevSize = payload.data.prevSize;
this.commonCard = payload.data.commonCard;
console.log('msg.data.currPlayer.userId', msg.data);
this.isAction = !!(this.userInfo && this.userInfo.userId ===
payload.data.currPlayer.userId);
@@ -298,14 +299,14 @@
this.joinMsg = msg.data;
}
if (msg.action === 'players') {
this.users = msg.data.players;
this.players = msg.data.players;
}
if (msg.action === 'commonCard') {
this.commonCard = msg.data.commonCard;
console.log('users', msg.data);
console.log('players', msg.data);
}
if (msg.action === 'gameInfo') {
this.users = msg.data.players;
this.players = msg.data.players;
this.pot = msg.data.pot;
this.prevSize = msg.data.prevSize;
this.isAction = !!(this.userInfo && this.userInfo.userId === msg.data.currPlayer.userId);
@@ -316,10 +317,10 @@
console.log('gameOver', msg.data);
this.winner = msg.data.winner;
const allPlayers = msg.data.allPlayers;
allPlayers.forEach((w: IUser) => {
this.users.forEach((p) => {
if (w.userId === p.userId) {
p.handCard = w.handCard;
allPlayers.forEach((winner: IPlayer) => {
this.players.forEach((p) => {
if (winner.userId === p.userId) {
p.handCard = winner.handCard;
}
});
});
@@ -344,20 +345,22 @@
});
}
private async buyIn() {
private async buyIn(size: number) {
try {
this.emit('buyIn', {
buyInSize: this.buyInSize,
buyInSize: size,
});
this.closeBuyIn();
} catch (e) {
console.log(e);
}
}
private play() {
console.log('play');
this.emit('playGame');
if (this.players.length >= 2) {
this.emit('playGame');
} else {
console.log('no enough player');
}
}
private emit(eventType: string, data: any = {}) {
@@ -410,60 +413,31 @@
.game-container {
background: url("../assets/bg.png");
background-size: 100% 100%;
.game-body{
.game-body {
position: absolute;
top: 50%;
top: 38vh;
left: 50%;
transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%, -50%, 0);
z-index: 0;
}
.buy-in {
position: fixed;
.shadow {
position: fixed;
z-index: 9;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
}
.buy-in-body {
z-index: 99;
position: fixed;
left: 50%;
top: 50%;
margin: -100px -150px;
width: 300px;
height: 150px;
border-radius: 12px;
box-sizing: border-box;
background: #fff;
padding: 20px;
}
.input-text {
input {
width: 100px;
}
}
}
.action{
.action {
position: absolute;
color: #fff;
width: 300px;
top: 470px;
width: 80vw;
top: 65vh;
left: 50%;
transform: translateX(-50%);
.raise-size {
position: absolute;
top: -60px;
top: -7vh;
left: 50%;
margin-left: -100px;
margin-left: -26.4vw;
i {
padding: 2px;
width: 24px;
@@ -475,19 +449,20 @@
border-radius: 50%;
color: #fff;
border: 1px solid #fff;
background: rgba(0,0,0,.2);
background: rgba(0, 0, 0, .2);
margin: 10px;
vertical-align: middle;
}
}
.action-btn{
span{
.action-btn {
span {
border-radius: 50%;
width: 40px;
height: 40px;
padding: 2px;
text-align: center;
margin:0 10px;
margin: 0 10px;
line-height: 40px;
border: 1px solid #fff;
font-size: 14px;