Commit 65d63ec2 authored by 毛线's avatar 毛线

自动玩游戏逻辑,其他的一些优化

预加载,loading
parent 43ac9c1b
......@@ -30,24 +30,36 @@
<div class="profile">
<img v-if="userInfo.avatar" :src="userInfo.avatar | img" alt="" class="profile-img">
<img v-else src="./static/profile/profile-pic.png" alt="" class="profile-img">
<img src="./static/profile/card.png" alt="" class="card-img">
<template v-if="userInfo.id">
<img :src="cardImg[userInfo.playerLevelName]" alt="" class="card-img">
</template>
<img v-else src="./static/profile/card.png" alt="" class="card-img">
</div>
</div>
<div class="right-block">
<div class="btn exit" @click="click().quit()">
<div v-audio class="btn exit" @click="click().quit()">
<img src="./static/exit-button.png" alt="">
</div>
<div class="btn full-screen" @click="click().fullScreen()">
<img src="./static/full-screen-button.png" alt="">
<img v-audio src="./static/full-screen-button.png" alt="">
</div>
</div>
<Confirm ref="confirm" title="登出" message="您要登出当前账号吗?" @confirm="() => network().quitAccount()"/>
<Confirm
ref="outGame"
:tip="`Location No:${device ? device.assetNumber : ''} - Endless Treasur`"
title="退出游戏"
message="机器中所有剩余的积分将自动转回您的钱包。"
@confirm="() => quitGame()"/>
</div>
</template>
<script>
import dayjs from 'dayjs'
import screenfull from 'screenfull'
import { mapState } from 'vuex'
import Confirm from '@/components/dialog/confirm'
export default {
filters: {
filterData(time) {
......@@ -57,14 +69,26 @@ export default {
return dayjs(time).format('HH:mm:ss')
},
},
components: {
Confirm,
},
data() {
// 卡片
const cardImg = {
Red: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Red.png',
Gold: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Gold.png',
Silver: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Silver.png',
Diamond: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Diamond.png',
}
return {
time: new Date(),
cardImg,
}
},
computed: {
...mapState([
'userInfo',
'device',
]),
},
created() {
......@@ -84,10 +108,10 @@ export default {
console.log('quit', name)
switch (name) {
case 'index-game-id': // 如果是游戏页面
this.quitGame()
this.$refs.outGame.show()
break
case 'index':
this.network().quitAccount()
case 'index-device':
this.$refs.confirm.show()
break
}
},
......@@ -109,6 +133,7 @@ export default {
network() {
return {
quitAccount: () => {
console.log('退出登录接口')
this.$request({
url: '/api/player/logout',
method: 'post',
......@@ -129,7 +154,7 @@ export default {
params,
}).then(({ data }) => {
console.log('退出游戏页面')
this.$router.replace('/')
this.$router.replace('/device')
})
},
},
......
<template>
<Dialog
:visible.sync="visible"
:show-close="false"
top="300px"
custom-class="game-dialog"
title=""
width="542px"
append-to-body
modal-append-to-body
>
<div class="bg"/>
<div class="content">
<div class="title">{{ title }}</div>
<div class="message">{{ message }}</div>
<div class="dialog-footer">
<div v-audio class="btn" @click="visible = false">取 消</div>
<div v-audio class="btn" type="primary" @click="confirm">确 定</div>
</div>
<div class="footer-tip">
{{ tip }}
</div>
</div>
</Dialog>
</template>
<script>
import {
Dialog,
} from 'element-ui'
export default {
components: {
Dialog,
},
props: {
title: {
type: String,
default: '',
},
message: {
type: String,
default: '',
},
tip: {
type: String,
default: '',
},
},
data() {
return {
visible: false,
}
},
methods: {
confirm() {
this.$emit('confirm')
this.visible = false
},
show() {
console.log('show')
this.visible = true
},
},
}
</script>
<style lang="scss" scoped>
.bg {
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/tip/tip_bg_b.png);
background-size: 100% 100%;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
top: 0;
left: 0;
}
.content {
position: relative;
z-index: 2;
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
.title {
text-align: center;
font-size: 28px;
font-weight: bold;
color: #f5be5e;
margin-top: 30px;
}
.message {
text-align: center;
color: #f5be5e;
margin-top: 48px;
font-size: 18px;
flex: 1;
}
.dialog-footer {
padding-bottom: 20px;
display: flex;
justify-content: center;
.btn {
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/tip/tip_btn_b.png);
background-size: 100% 100%;
width: 150px;
height: 40px;
opacity: 0.80;
text-align: center;
line-height: 40px;
color: #5e4926;
font-size: 18px;
font-weight: bold;
margin: 0 36px;
&:hover {
opacity: 1;
};
}
}
.footer-tip {
height: 30px;
line-height: 30px;
text-align: right;
padding: 4px 16px;
font-size: 12px;
color: #bc9a6c;
}
}
/deep/ .game-dialog {
position: relative;
background: transparent;
height: 320px;
padding: 0;
.el-dialog__header {
padding: 0;
}
.el-dialog__body {
max-height: inherit;
padding: 0;
overflow: hidden;
height: 100%;
box-sizing: border-box;
}
}
</style>
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth' // 验权
const whiteList = ['/login', '/test'] // 不重定向白名单
const whiteList = ['/loading', '/login', '/test', '/index/test'] // 不重定向白名单
export default ({ app, redirect, route }) => {
const { fullPath, path } = route
......@@ -9,7 +9,7 @@ export default ({ app, redirect, route }) => {
const token = getToken()
if (fullPath === '/') { // 主页重定向到统计页面
// redirect(`/home/index`)
redirect(`/loading`)
}
if (!token || relist) {
if (whiteList.indexOf(path) === -1) { // 如果当前路由需要鉴权
......
......@@ -97,10 +97,16 @@ export default {
})
}
},
// axios: {
// // baseURL,
// proxy: true, // 表示开启代理
// prefix: process.env.NODE_ENV === 'development' ? '/api' : baseURL, // 表示给请求url加个前缀 /api
// credentials: true // 表示跨域请求时是否需要使用凭证
// },
axios: {
// baseURL,
proxy: true, // 表示开启代理
prefix: process.env.NODE_ENV === 'development' ? '/api' : baseURL, // 表示给请求url加个前缀 /api
prefix: baseURL, // 表示给请求url加个前缀 /api
credentials: true // 表示跨域请求时是否需要使用凭证
},
proxy: {
......
......@@ -12,7 +12,8 @@
<script>
import Header from '@/components/common/header/index'
import Footer from '@/components/common/footer'
import { mapActions, mapMutations, } from 'vuex'
import { mapActions, mapMutations, mapState, } from 'vuex'
import { Message } from 'element-ui'
export default {
components: {
Header,
......@@ -21,6 +22,16 @@ export default {
data() {
return {}
},
computed: {
...mapState([
'relist',
]),
},
watch: {
relist() {
this.$router.replace(`/login`)
},
},
mounted() {
this.GetBaseInfo()
this.GetDeviceList()
......
<template>
<div>
index
<div v-audio v-for="(item, index) in deviceList" :key="index" class="box btn" @click="click().joinGasme(item)">
<div>
gameNameEn: {{ item.gameNameEn }}
......
......@@ -2,6 +2,7 @@
<div>
<Background/>
<div class="live-play">
<div class="asset-number">EGM:{{ device ? device.assetNumber : '' }}</div>
<img src="@/assets/images/temp/game/video-play.png" alt="" class="bg">
<img v-if="isPlay" src="@/assets/images/temp/game/video-play-state.png" alt="" class="play-state">
<div class="box">
......@@ -47,11 +48,20 @@
</div>
<!-- play -->
<img v-audio src="@/assets/images/temp/game/play-button.png" alt="" class="play-btn btn" @click="network().button({ buttonValue: 2 })">
<img v-audio src="@/assets/images/temp/game/play-button.png" alt="" class="play-btn btn" @click="click().play()">
<!-- 自动下注 -->
<div v-audio class="auto">
<img v-show="!isAuto" src="@/assets/images/temp/game/auto-spin-button.png" alt="" class="auto-btn btn" @click="isAuto = !isAuto">
<img v-show="isAuto" src="@/assets/images/temp/game/auto-time-button.png" alt="" class="auto-btn btn" @click="isAuto = !isAuto">
<img v-show="!isAuto" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/ic_autoChinese.png" alt="" class="auto-btn btn" @click="showTime = !showTime;">
<img v-show="isAuto" src="@/assets/images/temp/game/auto-time-button.png" alt="" class="auto-btn btn down" @click="autoTime = 0">
<div v-if="isAuto" :style="autoTime === -1 ? 'font-size: 40px;' : ''" class="auto-time-text">
{{ autoTime | autoTimeFilter }}
</div>
<div class="auto-time-block">
<div :class="showTime ? 'show' : ''" class="auto-time">
<div class="auto-time-item btn" style="font-size: 24px" @click="click().setAutoPlay(-1)"></div>
<div v-for="time in autoTimeList" :key="time" class="auto-time-item btn" @click="click().setAutoPlay(time)">{{ time }}min</div>
</div>
</div>
</div>
<!-- bonus -->
<img src="@/assets/images/temp/game/bonus.png" alt="" class="btn bonus">
......@@ -64,9 +74,21 @@
<script>
import Background from '@/components/common/bg/index'
import { mapActions, mapState, } from 'vuex'
import { mapActions, mapState, mapMutations, } from 'vuex'
import WebRTCPlayer from './components/WebRTCPlayer'
export default {
filters: {
autoTimeFilter(value) {
let text = ''
if (value === -1) {
text = '∞'
} else {
text = value / 60
text = Math.floor(text) + 'm'
}
return text
},
},
components: {
WebRTCPlayer,
Background,
......@@ -74,11 +96,13 @@ export default {
data() {
return {
player: '',
isAuto: false,
isPlay: false, // 直播是否在播放
deviceButtonPanel: {},
creditInShow: false,
credistList: [50, 100, 200, 500, 1000],
autoTimeList: [30, 20, 15, 5],
showTime: false,
autoTime: 0, // 自动游戏时间,-1表示无穷
}
},
computed: {
......@@ -101,16 +125,27 @@ export default {
btnList2() {
return this.btnList.filter(i => i.buttonStatus === 1 && i.buttonValue <= 8)
},
// 当前设备
device() {
const { deviceList, id } = this
let device = ''
let device = {}
try {
device = deviceList.filter(i => i.id === id)[0]
} catch (e) {
console.log('error', e)
}
this.SetDevice(device)
return device
},
// 是否在自动玩游戏
isAuto() {
let isAuto = false
const { autoTime } = this
if (autoTime > 0 || autoTime === -1) {
isAuto = true
}
return isAuto
},
},
watch: {
device() {
......@@ -130,6 +165,9 @@ export default {
...mapActions([
'GetBaseInfo',
]),
...mapMutations([
'SetDevice',
]),
init() {
return {
play: () => {
......@@ -139,6 +177,25 @@ export default {
this.$refs.webrtc.initVideo(webrtc)
this.isPlay = true
},
// 自动玩游戏时间倒计时逻辑
autoTime: () => {
if (this.autoTime > 0) {
this.autoTime--
setTimeout(() => {
this.init().autoTime()
}, 1000)
}
},
// 自动玩游戏递归调用
autoPlay: () => {
const { autoTime } = this
if (autoTime > 0 || autoTime === -1) {
this.click().play()
setTimeout(() => {
this.init().autoPlay()
}, 2000)
}
},
}
},
network() {
......@@ -259,6 +316,20 @@ export default {
allIn: () => {
this.network().upPoint({ type: 2 })
},
play: () => {
this.network().button({ buttonValue: 2 })
},
// 设置自动play时间
setAutoPlay: (time) => {
if (time === -1) {
this.autoTime = -1
} else {
this.autoTime = time * 60
this.init().autoTime()
this.showTime = false
}
this.init().autoPlay()
},
}
},
},
......@@ -275,6 +346,15 @@ export default {
left: 200px;
top: 16px;
background: black;
.asset-number {
position: absolute;
left: 12px;
top: 4px;
z-index: 2;
color: #dbd5d0;
font-size: 18px;
font-weight: bold;
}
.bg {
width: 100%;
height: 100%;
......@@ -428,7 +508,6 @@ export default {
}
.auto {
width: 70px;
height: 700px;
position: absolute;
/* background: #ccc; */
bottom: 68px;
......@@ -437,8 +516,63 @@ export default {
position: absolute;
bottom: 0;
width: 72px;
z-index: 2;
&.down {
width: 78px;
height: 77px;
bottom: -4px;
left: -2px;
}
}
}
.auto-time-text {
position: absolute;
bottom: 25px;
right: 5px;
z-index: 3;
text-align: center;
color: #2f49e9;
font-weight: bold;
font-size: 20px;
width: 60px;
line-height: 20px;
}
.auto-time-block {
position: absolute;
bottom: 49px;
right: 5px;
overflow: hidden;
height: 164px;
width: 60px;
overflow: hidden;
.auto-time {
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_auto-01.png);
background-size: 100% 100%;
height: 164px;
width: 60px;
position: absolute;
bottom: -164px;
right: 0;
padding-top: 2px;
box-sizing: border-box;
&.show {
bottom: 0;
}
.auto-time-item {
height: 24px;
color: #17bac5;
line-height: 24px;
font-size: 12px;
text-align: center;
margin: 2px 2px;
&:hover {
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_auto-03.png);
background-size: 100% 100%;
}
}
}
}
.bonus {
position: absolute;
width: 34px;
......
[
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/sound/Awarding%20of%20Winners%20(Intro).mp3",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/sound/ui_click.mp3",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/sound/Innovation.mp3"
]
\ No newline at end of file
[
"https://app-main.eslotsys-ptn1.com/resource/assets/Textures/loading/Hide.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/CheckBox/checkbox_select_disabled.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/CheckBox/checkbox_select_down.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/CheckBox/checkbox_select_up.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/CheckBox/checkbox_unselect.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ItemRenderer/selected.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Panel/border.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Panel/header.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/RadioButton/radiobutton_select_disabled.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/RadioButton/radiobutton_select_down.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/RadioButton/radiobutton_select_up.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/RadioButton/radiobutton_unselect.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ScrollBar/roundthumb.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Slider/thumb.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Slider/track.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Slider/tracklight.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ToggleSwitch/handle.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ToggleSwitch/off.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ToggleSwitch/on.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Button/button_down.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Button/button_up.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ProgressBar/thumb_pb.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ProgressBar/track_pb.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ScrollBar/track_sb.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/-s-eye_glow_l01.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/-s-eye_glow_l02.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/-s-eye_glow_r01.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/-s-eye_glow_r02.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/1.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/7.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/tip/tip_bg_b.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/tip/tip_btn_b.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/ic_autoChinese.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Autospinning%20Count-Down.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_auto-01.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_auto-03.png"
]
<template>
<div class="page">
<div v-if="!showLoading" class="first-screen">
<img :src="logo" alt="" class="logo">
</div>
<div v-if="showLoading" class="loading" @click="toGame">
<div class="bg"/>
<div class="progress-block">
<img class="macot" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/loading/macot.png" alt="">
<div class="progress">
<img class="progress-box" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/loading/loading%20bar%20bg.png" alt="">
<div class="filled">
<img v-for="(item, index) in filled" :key="index" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/loading/filled.png" alt="">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getToken } from '@/utils/auth' // 验权
import _images from './data/images.json'
import _audio from './data/audio.json'
import { mapActions } from 'vuex'
export default {
data() {
const imagesSrcList = _images
const audioSrcList = _audio
return {
showLoading: false,
imagesSrcList,
audioSrcList,
downloadTotal: 100, // 需要预加载的资源总数
downloadImage: 0, // 完成加载的总数
downloadAudio: 0, // 完成加载的总数
logo: 'https://app-main.eslotsys-ptn1.com/resource/assets/Textures/loading/screen_logo.png',
}
},
computed: {
// 总共完成加载数量
completeDownload() {
const { downloadImage, downloadAudio } = this
return (downloadImage + downloadAudio)
},
// 加载进度
loadingProgress() {
const { downloadTotal, completeDownload } = this
let progress = 0
progress = completeDownload > 0 ? (completeDownload / downloadTotal) : 1
return progress
},
// 显示小格子的数量
filled() {
const max = 12 // 最多显示的数量
let filled = 0
const { loadingProgress } = this
console.log('loadingProgress', loadingProgress)
filled = 12 * loadingProgress
return Math.ceil(filled)
},
},
watch: {
downloadImage(value) {
// console.log('完成加图片载数量', value)
},
downloadAudio(value) {
// console.log('完成加载音频数量', value)
},
completeDownload(value) {
// console.log('完成加载数量', value)
},
loadingProgress(value) {
if (value === 1) { // 加载完成
this.toGame()
}
},
},
mounted() {
setTimeout(() => {
this.showLoading = true // logo显示1秒
this.loadResources()
}, 1000)
},
methods: {
...mapActions([
'GetBaseInfo',
]),
toGame() {
const token = getToken()
if (token) {
this.GetBaseInfo().then(() => {
this.$router.replace('/device')
}).catch(() => {
this.$router.replace('/login')
})
} else {
this.$router.replace('/login')
}
},
loadResources() {
const { imagesSrcList, audioSrcList } = this
const imagesLength = imagesSrcList.length
const audioLength = audioSrcList.length
this.downloadTotal = imagesLength + audioLength
imagesSrcList.forEach(src => {
const img = new Image()
img.src = src
if (img.complete) {
this.downloadImage++
} else {
img.onload = () => {
this.downloadImage++
}
}
})
audioSrcList.forEach(src => {
const audio = new Audio()
audio.src = src
audio.addEventListener('canplay', () => {
this.downloadAudio++
})
})
},
},
}
</script>
<style lang="scss" scoped>
.page {
height: 100%;
position: relative;
}
.first-screen {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
.logo {
width: 360px;
margin: auto;
}
}
.loading {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
.bg {
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/loading/loadBg.jpg);
background-repeat: round;
position: absolute;
height: 100%;
width: 100%;
z-index: 0;
}
.progress-block {
position: relative;
z-index: 1;
text-align: center;
.macot {
width: 300px;
margin: auto;
display: block;
}
.progress {
display: inline-block;
position: relative;
margin: auto;
margin-top: -200px;
margin-bottom: 35px;
.progress-box {
width: 304px;
margin: auto;
display: block;
}
.filled {
position: absolute;
left: 28px;
top: 14px;
width: 100%;
text-align: left;
img {
height: 37px;
}
}
}
}
}
</style>
......@@ -39,7 +39,7 @@ export default {
// })
this.Login(data).then((res) => {
this.GetBaseInfo().then(({ data }) => {
this.$router.replace({ path: '/' })
this.$router.replace({ path: '/device' })
this.loading = false
}).catch(() => {
this.loading = false
......
......@@ -31,6 +31,7 @@ export const state = () => ({
authBtnList: [], // 权限按钮列表
authBtnIdList: [], // 权限按钮id列表
deviceList: [], // 设备列表
device: {}, // 当前设备
appConfig: {
project_name: '——', // 项目名称
img_domain: '', // 图片名称
......@@ -143,9 +144,14 @@ export const mutations = {
state.dictionary = dictionary
},
set_device_list(state, data) {
SetDeviceList(state, data) {
state.deviceList = data
},
// 设置当前玩的游戏机
SetDevice(state, data) {
state.device = data
},
}
export const actions = {
......@@ -208,7 +214,7 @@ export const actions = {
GetDeviceList({ commit }) {
return new Promise((resolve, reject) => {
this.$request.get('/api/app/device/list').then(({ rows }) => {
commit('set_device_list', rows)
commit('SetDeviceList', rows)
resolve(rows)
}).catch(error => {
reject(error)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment