Skip to content

E
eslotsys-game-nuxt
Commit 786ea93e authored by 毛线's avatar 毛线
Browse files
Options

save

parent d8f0011a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 803 additions and 42 deletions
.eslintignore
View file @ 786ea93e
webrtc.js webrtc.js
\ No newline at end of file WebRTCPlayer.vue
\ No newline at end of file
assets/images/temp/bg/fish/background.png 0 → 100644
View file @ 786ea93e
This diff is collapsed.
assets/images/temp/game/CREDIT-IN.gif 0 → 100644
View file @ 786ea93e
This diff is collapsed.
assets/styles/app.scss
View file @ 786ea93e
...@@ -41,6 +41,11 @@ html { ...@@ -41,6 +41,11 @@ html {
*:after { *:after {
} }
* {
user-select: none;
-webkit-user-drag: none;
}
a, a,
a:focus, a:focus,
a:hover { a:hover {
......
components/common/bg/index.vue 0 → 100644
View file @ 786ea93e
<template>
<div class="bg">
<img src="@/assets/images/temp/bg/fish/background.png" alt="" class="bg-img">
<!-- 背景 -->
</div>
</template>
<style lang="scss" scoped>
.bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1px;
.bg-img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
</style>
components/common/footer.vue 0 → 100644
View file @ 786ea93e
<template>
<div/>
</template>
components/common/header/index.vue 0 → 100644
View file @ 786ea93e
<template>
<div class="header">
<div class="left-block">
<img src="./static/logo.png" alt="" class="logo">
<div class="data">
{{ time | filterData }}
</div>
<div class="time">
{{ time | filterTime }}
</div>
</div>
<div class="bar">
<div class="input-box">
<div class="input-img">
<img src="./static/gold-coin.png" alt="">
</div>
<div class="value">
{{ userInfo.goldCredit }}
</div>
</div>
<div class="input-box">
<div class="input-img" style="width: 54px; top: -12px; left: -8px">
<img src="./static/red-coin.png" alt="">
</div>
<div class="value">
{{ userInfo.redCredit }}
</div>
</div>
<div class="center-bg"/>
<div class="profile">
<img src="./static/profile/profile-pic.png" alt="" class="profile-img">
<img src="./static/profile/card.png" alt="" class="card-img">
</div>
</div>
<div class="right-block">
<div 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="">
</div>
</div>
</div>
</template>
<script>
import dayjs from 'dayjs'
import screenfull from 'screenfull'
import { mapState } from 'vuex'
export default {
filters: {
filterData(time) {
return dayjs(time).format('dddd,DD,MMMM,YYYY')
},
filterTime(time) {
return dayjs(time).format('HH:mm:ss')
},
},
data() {
return {
time: new Date(),
}
},
computed: {
...mapState([
'userInfo',
]),
},
created() {
this.initTime()
},
methods: {
initTime() {
this.time = new Date()
setTimeout(() => {
this.initTime()
}, 1000)
},
click() {
return {
quit: () => {
const { name } = this.$route
switch (name) {
case 'index-game-id': // 如果是游戏页面
this.quitGame()
break
}
},
fullScreen: () => {
console.log('全屏')
// 如果不允许进入全屏，发出不允许提示
if (!screenfull.enabled) {
this.$message('您的浏览器不能全屏')
return false
}
if (!screenfull.isFullscreen) {
screenfull.toggle()
} else {
screenfull.exit()
}
},
}
},
quitGame() {
const { id } = this.$route.params
const params = {
deviceId: id,
}
this.$request({
url: '/api/app/device/quitDevice',
method: 'get',
params,
}).then(({ data }) => {
this.$router.go(-1)
})
},
},
}
</script>
<style lang="scss" scoped>
.header {
height: 80px;
position: relative;
z-index: 1;
}
.left-block {
position: absolute;
left: 0;
top: 0;
width: 170px;
height: 140px;
background-image: url(./static/left-block-bg.png);
background-size: 100%;
z-index: 1;
.logo {
width: 136px;
margin: 8px 0 0;
}
.data {
color: white;
font-size: 12px;
font-weight: 100;
padding-left: 30px;
text-transform: uppercase;
zoom: 0.7;
}
.time{
color: white;
font-size: 25px;
margin: 4px 14px;
font-weight: bolder;
}
}
.right-block {
position: absolute;
right: 0;
top: 0;
width: 110px;
height: 108px;
background-image: url(./static/right-block-bg.png);
background-size: 100% 100%;
box-sizing: border-box;
z-index: 999;
.btn {
box-sizing: border-box;
opacity: 0.8;
&:hover{
opacity: 1;
}
&.exit {
padding-top: 16px;
padding-left: 50px;
padding-bottom: 4px;
height: 50px;
}
&.full-screen {
padding-top: 4px;
padding-left: 46px;
height: 50px;
}
img {
height: 30px;
/* display: none; */
}
}
}
.bar {
padding-left: 170px;
display: flex;
height: 80px;
background-image: url(./static/bar-background.png);
background-size: auto 100%;
background-position: center;
position: absolute;
top: 0;
left: 0;
right: 0;
.input-box {
padding-left: 28px;
position: relative;
margin-top: 20px;
margin-left: 16px;
.input-img {
position: absolute;
left: 0;
top: -8px;
width: 44px;
height: 44px;
img {
width: 100%;
}
}
.value {
height: 28px;
width: 90px;
background-image: url(./static/value-bg.png);
background-size: 100% 100%;
padding: 6px;
font-size: 14px;
padding-right: 8px;
text-align: right;
color: white;
box-sizing: border-box;
}
}
.center-bg {
background-image: url(./static/bar-content-bg.png);
background-size: 100% 100%;
width: 310px;
height: 76px;
margin-left: 10px;
}
.profile {
margin-left: 8px;
width: 180px;
height: 80px;
background-image: url(./static/profile/bg.png);
background-size: 100% 100%;
position: relative;
.profile-img {
width: 55px;
height: 58px;
position: absolute;
left: 14px;
top: 6px;
}
.card-img{
width: 92px;
height: 58px;
position: absolute;
left: 72px;
top: 7px;
}
}
}
</style>
layouts/default.vue
View file @ 786ea93e
<template> <template>
<div class="root"> <div class="root">
<nuxt /> <div :style="style" class="sceen">
<nuxt />
</div>
</div> </div>
</template> </template>
...@@ -8,15 +10,35 @@ ...@@ -8,15 +10,35 @@
import { mapActions } from 'vuex' import { mapActions } from 'vuex'
export default { export default {
data() { data() {
return {} return {
zoom: 1,
}
},
computed: {
style() {
const style = {}
const { zoom } = this
style.zoom = zoom
return style
},
}, },
created() { created() {
// this.GetConfig() // this.GetConfig()
this.init()
}, },
methods: { methods: {
...mapActions({ ...mapActions({
GetConfig: 'GetConfig', GetConfig: 'GetConfig',
}), }),
init() {
window.onresize = () => {
console.log('window.innerWidth', window.innerWidth)
console.log('window.innerHeight', window.innerHeight)
let zoom = 1
zoom = window.innerWidth / 1080
// this.zoom = zoom
}
},
}, },
} }
</script> </script>
...@@ -29,5 +51,14 @@ export default { ...@@ -29,5 +51,14 @@ export default {
height: 100%; height: 100%;
min-width: 900px; min-width: 900px;
position: fixed; position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
background: black;
}
.sceen {
width: 1080px;
height: 608px;
position: relative;
} }
</style> </style>
nuxt.config.js
View file @ 786ea93e
...@@ -12,13 +12,14 @@ export default { ...@@ -12,13 +12,14 @@ export default {
title: process.env.project_name || '', title: process.env.project_name || '',
meta: [ meta: [
{ charset: 'utf-8' }, { charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }, // { name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.project_description || '' } { hid: 'description', name: 'description', content: process.env.project_description || '' }
], ],
link: [ link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
], ],
script: [ script: [
{ src: `http://magic-hand.cy-dev.com/jswebrtc.min.js`, ssr: false },
], ],
}, },
env: process.env, env: process.env,
......
package-lock.json
View file @ 786ea93e
...@@ -11858,6 +11858,11 @@ ...@@ -11858,6 +11858,11 @@
} }
} }
}, },
"screenfull": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/screenfull/-/screenfull-4.2.1.tgz",
"integrity": "sha512-PLSp6f5XdhvjCCCO8OjavRfzkSGL3Qmdm7P82bxyU8HDDDBhDV3UckRaYcRa/NDNTYt8YBpzjoLWHUAejmOjLg=="
},
"script-loader": { "script-loader": {
"version": "0.7.2", "version": "0.7.2",
"resolved": "https://registry.npmjs.org/script-loader/-/script-loader-0.7.2.tgz", "resolved": "https://registry.npmjs.org/script-loader/-/script-loader-0.7.2.tgz",
......
pages/index.vue
View file @ 786ea93e
<template> <template>
<div> <div class="main-content">
<nuxt-child <Header/>
class="main-content" <div>
/> <nuxt-child
/>
</div>
<Footer/>
</div> </div>
</template> </template>
<script>
import Header from '@/components/common/header/index'
import Footer from '@/components/common/footer'
import { mapActions, mapMutations, } from 'vuex'
export default {
components: {
Header,
Footer,
},
data() {
return {}
},
mounted() {
this.GetBaseInfo()
this.GetDeviceList()
},
methods: {
...mapActions([
'GetBaseInfo',
'GetDeviceList',
]),
},
}
</script>
<style lang="scss" scoped>
.main-content {
height: 100%;
overflow: auto;
}
</style>
pages/index/game/_id.vue
View file @ 786ea93e
This diff is collapsed.
pages/index/game/components/WebRTCPlayer.vue 0 → 100644
View file @ 786ea93e
<template>
<video id="jswebrtc" ref="jswebrtc" style="width: 100%;height: 100%;object-fit: fill"/>
</template>
<script>
export default {
name: "WebRTCPlayer",
props: {
videoSrc: {
type: String,
default: ''
}
},
data() {
return {
player: null
}
},
mounted() {
this.$watch('videoSrc', () => {
if (this.videoSrc) {
this.initVideo(this.videoSrc)
}
}, {
immediate: true
})
},
beforeDestroy() {
// 播放器存在清除播放器
if (this.player) {
this.player.destroy()
}
},
methods: {
/**
* 初始化播放器并播放
* 两种调用方式
* 一种通过 watch监听 props 传过来的 src 进行播放
* 一种通过 引用组件上的 ref 直接调用 initVideo 如 this.$refs.webrtc.initVideo('src')
* */
initVideo(url) {
// 播放器存在 清空重置
if (this.player) {
this.player.destroy()
this.player = null
}
// 获取承载元素dom
const videoDom = document.getElementById('jswebrtc')
// 初始化播放器
this.player = new JSWebrtc.Player(url, {
video: videoDom,
autoplay: true,
onPlay: (obj) => {
// 监听video元素状态，可播放时进行播放 。 某些情况下 autoplay 会失效
// mdn https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/canplay_event
// 菜鸟 https://www.runoob.com/tags/av-event-canplay.html
videoDom.addEventListener('canplay', function(e) {
videoDom.play()
})
console.log(obj, '播放器开始播放！')
}
})
}
},
}
</script>
pages/index/index.vue
View file @ 786ea93e
<template> <template>
<div> <div style="overflow: auto;">
<div v-for="(item, index) in list" :key="index" class="box btn" @click="click().joinGasme(item)"> <div v-for="(item, index) in deviceList" :key="index" class="box btn" @click="click().joinGasme(item)">
<div> <div>
gameNameEn: {{ item.gameNameEn }} gameNameEn: {{ item.gameNameEn }}
</div> </div>
...@@ -15,17 +15,20 @@ ...@@ -15,17 +15,20 @@
</template> </template>
<script> <script>
import { mapState, mapActions } from 'vuex' import { mapState, mapActions, mapMutations } from 'vuex'
export default { export default {
data() { data() {
return { return {
list: [],
} }
}, },
computed: {
...mapState([
'deviceList',
]),
},
watch: { watch: {
}, },
created() { created() {
this.network().getData()
}, },
methods: { methods: {
click() { click() {
...@@ -48,10 +51,11 @@ export default { ...@@ -48,10 +51,11 @@ export default {
return { return {
getData: () => { getData: () => {
this.$request({ this.$request({
url: '/api/app/device/topDeviceList', url: '/api/app/device/list',
method: 'get', method: 'get',
}).then(({ data }) => { }).then(({ rows }) => {
this.list = data console.log('list', rows)
this.list = rows
}) })
}, },
} }
...@@ -65,5 +69,6 @@ export default { ...@@ -65,5 +69,6 @@ export default {
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
color: white;
} }
</style> </style>
store/index.js
View file @ 786ea93e
...@@ -24,12 +24,13 @@ import { setToken, removeToken, setUserData } from '@/utils/auth' // 验权 ...@@ -24,12 +24,13 @@ import { setToken, removeToken, setUserData } from '@/utils/auth' // 验权
export const state = () => ({ export const state = () => ({
relist: false, // 重新登录 relist: false, // 重新登录
userInfo: '', // 用户信息 userInfo: {}, // 用户信息
cacheNavList: [], // 导航栏缓存的菜单 cacheNavList: [], // 导航栏缓存的菜单
menuTree: [], // 菜单数据（树状结构） menuTree: [], // 菜单数据（树状结构）
menuList: [], // 菜单数据（列表结构） menuList: [], // 菜单数据（列表结构）
authBtnList: [], // 权限按钮列表 authBtnList: [], // 权限按钮列表
authBtnIdList: [], // 权限按钮id列表 authBtnIdList: [], // 权限按钮id列表
deviceList: [], // 设备列表
appConfig: { appConfig: {
project_name: '——', // 项目名称 project_name: '——', // 项目名称
img_domain: '', // 图片名称 img_domain: '', // 图片名称
...@@ -141,6 +142,10 @@ export const mutations = { ...@@ -141,6 +142,10 @@ export const mutations = {
state.appConfig = app state.appConfig = app
state.dictionary = dictionary state.dictionary = dictionary
}, },
set_device_list(state, data) {
state.deviceList = data
},
} }
export const actions = { export const actions = {
...@@ -199,5 +204,15 @@ export const actions = { ...@@ -199,5 +204,15 @@ export const actions = {
reject(error) reject(error)
}) })
}) })
},
GetDeviceList({ commit }) {
return new Promise((resolve, reject) => {
this.$request.get('/api/app/device/list').then(({ rows }) => {
commit('set_device_list', rows)
resolve(rows)
}).catch(error => {
reject(error)
})
})
} }
} }
utils/webrtc.js
View file @ 786ea93e
...@@ -108,7 +108,6 @@ export class WebRTCPlayer { ...@@ -108,7 +108,6 @@ export class WebRTCPlayer {
if (res.code) { if (res.code) {
throw '网络异常'; throw '网络异常';
} }
console.log('webrtc sdp', res.sdp)
this.pc.setRemoteDescription( this.pc.setRemoteDescription(
new RTCSessionDescription({type: 'answer', sdp: res.sdp}) new RTCSessionDescription({type: 'answer', sdp: res.sdp})
); );
......
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