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/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>