|
|
|
|
@ -1,12 +1,13 @@
|
|
|
|
|
import React, { Component, useState } from 'react' |
|
|
|
|
import { View, Text, Image, Button } from '@tarojs/components' |
|
|
|
|
import { Popup, Picker } from '@nutui/nutui-react-taro'; |
|
|
|
|
import { View, Text, Image, Button, Slider } from '@tarojs/components' |
|
|
|
|
import { Popup, Picker, Range, Radio } from '@nutui/nutui-react-taro'; |
|
|
|
|
import { useSelector } from 'react-redux' |
|
|
|
|
import Taro from '@tarojs/taro'; |
|
|
|
|
|
|
|
|
|
import { redirectTo } from '@/utils/application' |
|
|
|
|
import './new_table.scss' |
|
|
|
|
import Title from '@/components/title' |
|
|
|
|
import { sendPromise } from '@/api/websocket' |
|
|
|
|
import { reqCreateTable } from '@/api/wsapi' |
|
|
|
|
import proto from '@/api/proto'; |
|
|
|
|
import { showToast } from '@/utils/application' |
|
|
|
|
import userIcon from '@/assets/icon/user-2.svg' |
|
|
|
|
@ -20,6 +21,8 @@ function NewTable() {
|
|
|
|
|
const {username, nickname, avatar} = useSelector(state => state.user); |
|
|
|
|
const [submitLoading, setSubmitLoading] = useState(false); |
|
|
|
|
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 playerRows = players.reduce((arr, item, idx) => { |
|
|
|
|
@ -30,16 +33,22 @@ function NewTable() {
|
|
|
|
|
return arr; |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
const choosePlayer = (playerPos) => { |
|
|
|
|
players[playerPos] = 1; |
|
|
|
|
setPlayers([...players]) |
|
|
|
|
// setPlayers |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const createTable = async () => { |
|
|
|
|
if (submitLoading) { return } |
|
|
|
|
setSubmitLoading(true) |
|
|
|
|
|
|
|
|
|
const req = ReqCreateTable.create({ |
|
|
|
|
players: players.filter(type => type === 1).length, |
|
|
|
|
robots: players.filter(type => type === 2).length |
|
|
|
|
}) |
|
|
|
|
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'}) |
|
|
|
|
}catch(err) { |
|
|
|
|
showToast({title: err}) |
|
|
|
|
@ -50,7 +59,33 @@ function NewTable() {
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<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"> |
|
|
|
|
{ |
|
|
|
|
playerRows.map((row, i) => ( |
|
|
|
|
@ -58,10 +93,11 @@ function NewTable() {
|
|
|
|
|
{ |
|
|
|
|
row.map((player, j) => ( |
|
|
|
|
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 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; |
|
|
|
|
setPlayers([...players]); |
|
|
|
|
}}><Image className="close-icon-img" src={closeIcon} /></View> |
|
|
|
|
@ -86,7 +122,7 @@ function NewTable() {
|
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
<Picker |
|
|
|
|
{/* <Picker |
|
|
|
|
title='' |
|
|
|
|
isVisible={choosingPlace > -1} |
|
|
|
|
listData={[{value: 1, text: 'Player'}, {value: 2, text: 'Robot'}]} |
|
|
|
|
@ -95,7 +131,7 @@ function NewTable() {
|
|
|
|
|
setPlayers([...players]); |
|
|
|
|
}} |
|
|
|
|
onClose={() => setChoosingPlace(-1)} |
|
|
|
|
/> |
|
|
|
|
/> */} |
|
|
|
|
</View> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
tangmingyou
4 years ago