You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
4.0 KiB
111 lines
4.0 KiB
import React, { Component, useState } from 'react' |
|
import { View, Text, Button, Image } from '@tarojs/components' |
|
import Taro from '@tarojs/taro' |
|
|
|
import { useSelector, useDispatch } from 'react-redux' |
|
|
|
import './lobby.scss' |
|
import { navigateTo } from '@/utils/application' |
|
import { increment } from '@/store/index' |
|
import { fetchOpMap, fetchLobbyView } from '@/api/api' |
|
import Title from '@/components/title' |
|
import coin1 from '@/assets/coin-1.png' |
|
import tabQuestion from '@/assets/tab-question.svg' |
|
import tabX from '@/assets/tab-x.svg' |
|
|
|
function Lobby() { |
|
const count = useSelector((state) => state.counter.value) |
|
const user = useSelector((state) => state.user) |
|
console.log(user) |
|
const dispatch = useDispatch() |
|
fetchLobbyView() |
|
.then(res => { |
|
console.log('lobby', res) |
|
}) |
|
.catch(err => { |
|
console.error(err) |
|
}) |
|
|
|
const avatar = "https://img0.baidu.com/it/u=2477829979,2171947490&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"; |
|
|
|
const circleEle = [1,2,3,4,5,6,7]; |
|
const circleElePos = [{x:16,y:8},{x:70,y:-3},{x:110,y:28},{x:115,y:70},{x:80,y:105},{x:20,y:100},{x:-2,y:60}]; |
|
|
|
return ( |
|
<View> |
|
<Title title={"Lobby!!" + count} bgColor={true} /> |
|
<View className="celling"></View> |
|
<View className="tab"> |
|
<View className="tab-wrap"> |
|
<View className="circle-wrap"> |
|
<View className="circle-inner"><Image className="inner-coin" src={coin1} /></View> |
|
{ |
|
circleEle.map((_, idx) => ( |
|
<View key={idx} className="circle-item" style={{ |
|
position: 'absolute', |
|
left: Taro.pxTransform(circleElePos[idx].x), |
|
top: Taro.pxTransform(circleElePos[idx].y) |
|
}}> |
|
<Image className="circle-avatar" src={idx === 5 ? tabQuestion : idx === 6 ? tabX : avatar} /> |
|
</View> |
|
)) |
|
} |
|
</View> |
|
<View className="tab-no-wrap"> |
|
<View className="tab-no">#10013</View> |
|
<View className="tab-sc">5/7</View> |
|
</View> |
|
</View> |
|
|
|
<View className="tab-wrap"> |
|
<View className="circle-wrap"> |
|
<View className="circle-inner"><Image className="inner-coin" src={coin1} /></View> |
|
{ |
|
circleEle.map((_, idx) => ( |
|
<View key={idx} className="circle-item" style={{ |
|
position: 'absolute', |
|
left: Taro.pxTransform(circleElePos[idx].x), |
|
top: Taro.pxTransform(circleElePos[idx].y) |
|
}}> |
|
<Image className="circle-avatar" src={idx === 5 ? tabQuestion : idx === 6 ? tabX : avatar} /> |
|
</View> |
|
)) |
|
} |
|
</View> |
|
<View className="tab-no-wrap"> |
|
<View className="tab-no">#10013</View> |
|
<View className="tab-sc">5/7</View> |
|
</View> |
|
</View> |
|
|
|
<View className="tab-wrap"> |
|
<View className="circle-wrap"> |
|
<View className="circle-inner"><Image className="inner-coin" src={coin1} /></View> |
|
{ |
|
circleEle.map((_, idx) => ( |
|
<View key={idx} className="circle-item" style={{ |
|
position: 'absolute', |
|
left: Taro.pxTransform(circleElePos[idx].x), |
|
top: Taro.pxTransform(circleElePos[idx].y) |
|
}}> |
|
<Image className="circle-avatar" src={idx === 5 ? tabQuestion : idx === 6 ? tabX : avatar} /> |
|
</View> |
|
)) |
|
} |
|
</View> |
|
<View className="tab-no-wrap"> |
|
<View className="tab-no">#10013</View> |
|
<View className="tab-sc">5/7</View> |
|
</View> |
|
</View> |
|
|
|
<View className="tab-wrap"></View> |
|
</View> |
|
<View className="bottom-btn-wrap"> |
|
<Button className="bottom-btn" onClick={() => navigateTo({url: '/pages/new_table/new_table'})}>Create New Table</Button> |
|
</View> |
|
</View> |
|
) |
|
} |
|
|
|
export default Lobby
|
|
|