open
/
texas-poker-front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

create table 3 texas types

master
tangmingyou 4 years ago
parent
2c1d2ddaff
commit
da8bb13ddd
6 changed files with 1206 additions and 360 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1399
      src/api/proto.js
  2. 3
      src/api/wsapi.js
  3. 7
      src/app.scss
  4. 52
      src/pages/lobby/lobby.jsx
  5. 62
      src/pages/new_table/new_table.jsx
  6. 43
      src/pages/new_table/new_table.scss

1399
src/api/proto.js
View File

File diff suppressed because it is too large Load Diff

3
src/api/wsapi.js
Unescape View File

@ -3,6 +3,9 @@ import { api } from './proto'
export const aa = msg => sendPromise(msg) export const aa = msg => sendPromise(msg)
export const reqCreateTable = ({players, robots, texasType, bigBlind}) =>
sendPromise(api.ReqCreateTable.create({players, robots, texasType, bigBlind}));
// 大厅桌面预览 // 大厅桌面预览
export const reqLobbyView = () => sendPromise(api.ReqLobbyView.create()); export const reqLobbyView = () => sendPromise(api.ReqLobbyView.create());

7
src/app.scss
Unescape View File

@ -7,3 +7,10 @@ body {
margin: 0 auto; margin: 0 auto;
background: #F5F5F5; background: #F5F5F5;
} }
// NutUI-React
:root {
--nutui-brand-color: #1BCE7D;
--nutui-brand-color-start: #1BCE7D;
--nutui-brand-color-end: #1BCE7D;
}

52
src/pages/lobby/lobby.jsx
Unescape View File

@ -130,32 +130,32 @@ class Lobby extends Component {
// </View> // </View>
// ); // );
return ( // return (
<View className='container'> // <View className='container'>
{/* <Head title='Radio' /> */} // {/* <Head title='Radio' /> */}
<View className='page-body'> // <View className='page-body'>
<View className='page-section'> // <View className='page-section'>
<Text>默认样式</Text> // <Text>默认样式</Text>
<Radio value='选中' checked>选中</Radio> // <Radio value='选中' checked>选中</Radio>
<Radio style='margin-left: 20rpx' value='未选中'>未选中</Radio> // <Radio style='margin-left: 20rpx' value='未选中'>未选中</Radio>
</View> // </View>
<View className='page-section'> // <View className='page-section'>
<Text>推荐展示样式</Text> // <Text>推荐展示样式</Text>
<View className='radio-list'> // <View className='radio-list'>
<RadioGroup> // <RadioGroup>
{this.state.list.map((item, i) => { // {this.state.list.map((item, i) => {
return ( // return (
<Label className='radio-list__label' for={i} key={i}> // <Label className='radio-list__label' for={i} key={i}>
<Radio className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio> // <Radio className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
</Label> // </Label>
) // )
})} // })}
</RadioGroup> // </RadioGroup>
</View> // </View>
</View> // </View>
</View> // </View>
</View> // </View>
); // );
return ( return (
<View> <View>

62
src/pages/new_table/new_table.jsx
Unescape View File

@ -1,12 +1,13 @@
import React, { Component, useState } from 'react' import React, { Component, useState } from 'react'
import { View, Text, Image, Button } from '@tarojs/components' import { View, Text, Image, Button, Slider } from '@tarojs/components'
import { Popup, Picker } from '@nutui/nutui-react-taro'; import { Popup, Picker, Range, Radio } from '@nutui/nutui-react-taro';
import { useSelector } from 'react-redux' import { useSelector } from 'react-redux'
import Taro from '@tarojs/taro';
import { redirectTo } from '@/utils/application' import { redirectTo } from '@/utils/application'
import './new_table.scss' import './new_table.scss'
import Title from '@/components/title' import Title from '@/components/title'
import { sendPromise } from '@/api/websocket' import { reqCreateTable } from '@/api/wsapi'
import proto from '@/api/proto'; import proto from '@/api/proto';
import { showToast } from '@/utils/application' import { showToast } from '@/utils/application'
import userIcon from '@/assets/icon/user-2.svg' import userIcon from '@/assets/icon/user-2.svg'
@ -20,6 +21,8 @@ function NewTable() {
const {username, nickname, avatar} = useSelector(state => state.user); const {username, nickname, avatar} = useSelector(state => state.user);
const [submitLoading, setSubmitLoading] = useState(false); const [submitLoading, setSubmitLoading] = useState(false);
const [choosingPlace, setChoosingPlace] = useState(-1); const [choosingPlace, setChoosingPlace] = useState(-1);
const [texasType, setTexasType] = useState(1);
const [bigBlind, setBigBlind] = useState(2);
const [players, setPlayers] = useState([0,0,0,0,0,0]); // 0空位,1玩家,2机器人 const [players, setPlayers] = useState([0,0,0,0,0,0]); // 0空位,1玩家,2机器人
const playerRows = players.reduce((arr, item, idx) => { const playerRows = players.reduce((arr, item, idx) => {
@ -30,16 +33,22 @@ function NewTable() {
return arr; return arr;
}, []); }, []);
const choosePlayer = (playerPos) => {
players[playerPos] = 1;
setPlayers([...players])
// setPlayers
}
const createTable = async () => { const createTable = async () => {
if (submitLoading) { return } if (submitLoading) { return }
setSubmitLoading(true) setSubmitLoading(true)
const req = ReqCreateTable.create({
players: players.filter(type => type === 1).length,
robots: players.filter(type => type === 2).length
})
try { try {
const _ = await sendPromise(req) const _ = await reqCreateTable({
texasType, bigBlind,
players: players.filter(type => type === 1).length,
robots: players.filter(type => type === 2).length,
});
redirectTo({url: '/pages/table/table'}) redirectTo({url: '/pages/table/table'})
}catch(err) { }catch(err) {
showToast({title: err}) showToast({title: err})
@ -50,7 +59,33 @@ function NewTable() {
return ( return (
<View className="nt"> <View className="nt">
<Title title={"Create New Table"} /> <Title title={"Create New Table"} bgColor={true} />
<View className="game-props">
<View className="prop-wrap">
<View className="prop-k"><Text>牌局类型：</Text></View>
<View className="prop-v">
<Radio.RadioGroup value={texasType} direction="horizontal" onChange={setTexasType}>
<Radio value={1} iconSize={Taro.pxTransform(16)}>限注德州扑克</Radio>
<Radio value={2} iconSize={Taro.pxTransform(16)}>底池限制德州扑克</Radio>
<Radio value={3} iconSize={Taro.pxTransform(16)}>无限制德州扑克</Radio>
</Radio.RadioGroup>
</View>
</View>
<View className="prop-wrap">
<View className="prop-k"><Text>大盲注额：</Text></View>
<View className="prop-v">
<Range modelValue={bigBlind} min={2} max={200} step={2}
hiddenRange={true} hiddenTag={false}
activeColor="#1BCE7D" inactiveColor="#D8D8D8"
button={<View className="range-custom-button"><Text>{bigBlind}</Text></View>}
onChange={v => setBigBlind(v)}/>
</View>
</View>
<View className="prop-wrap">
<View className="prop-k"><Text>入场金额：</Text></View>
<View className="prop-v amount-in"><Text>{bigBlind * 100}</Text></View>
</View>
</View>
<View className="nt-wrap"> <View className="nt-wrap">
{ {
playerRows.map((row, i) => ( playerRows.map((row, i) => (
@ -58,10 +93,11 @@ function NewTable() {
{ {
row.map((player, j) => ( row.map((player, j) => (
player.item === 0 player.item === 0
? <View key={j} onClick={() => setChoosingPlace(player.index)} className='player empty-player'><Image className="empty-icon" src={addIcon} /></View> ? <View key={j} onClick={() => choosePlayer(player.index)} className='player empty-player'><Image className="empty-icon" src={addIcon} /></View>
: <View key={j} className="player-wrap"> : <View key={j} className="player-wrap">
<View className="player-icon"><Image className="player-icon-img" src={player.item === 1 ? userIcon : robotIcon} /></View> <View className="player-icon"><Image className="player-icon-img" src={player.item === 1 ? userIcon : robotIcon} /></View>
<View className="close-icon" onClick={() => { <View className="close-icon" onClick={(e) => {
e.stopPropagation();
players[player.index] = 0; players[player.index] = 0;
setPlayers([...players]); setPlayers([...players]);
}}><Image className="close-icon-img" src={closeIcon} /></View> }}><Image className="close-icon-img" src={closeIcon} /></View>
@ -86,7 +122,7 @@ function NewTable() {
</View> </View>
</View> </View>
<Picker {/* <Picker
title='' title=''
isVisible={choosingPlace > -1} isVisible={choosingPlace > -1}
listData={[{value: 1, text: 'Player'}, {value: 2, text: 'Robot'}]} listData={[{value: 1, text: 'Player'}, {value: 2, text: 'Robot'}]}
@ -95,7 +131,7 @@ function NewTable() {
setPlayers([...players]); setPlayers([...players]);
}} }}
onClose={() => setChoosingPlace(-1)} onClose={() => setChoosingPlace(-1)}
/> /> */}
</View> </View>
) )
} }

43
src/pages/new_table/new_table.scss
Unescape View File

@ -1,4 +1,45 @@
.nt { .nt {
.prop-wrap {
display: flex;
margin-top: 20px;
}
.prop-k {
font-size: 14px;
width: 120px;
text-align: right;
height: 20px;
line-height: 20px;
color: #3D3D3D;
font-weight: bold;
padding-right: 10px;
}
.prop-v {
width: 280px;
display: flex;
justify-content: center;
align-items: center;
}
.range-custom-button {
width: 30px;
height: 22px;
font-size: 12px;
line-height: 22px;
font-weight: bold;
color: #3D3D3D;
text-align: center;
border-radius: 50%;
background-color: #fff;
border: 2px solid #1BCE7D;
}
.amount-in {
text-align: left;
justify-content: flex-start;
line-height: 20px;
font-size: 16px;
color: #FF4400;
font-weight: bold;
}
.nt-wrap { .nt-wrap {
padding: 0 11px 0 11px; padding: 0 11px 0 11px;
} }
@ -8,7 +49,7 @@
// align-content: space-around; // align-content: space-around;
flex-flow: row wrap; flex-flow: row wrap;
width: 405px; width: 405px;
margin: 46px auto 0 auto; margin: 26px auto 0 auto;
} }
.player-wrap { .player-wrap {
// flex: 0 0 50%; // flex: 0 0 50%;

Write Preview
Loading…
Cancel
Save