Skip to content

F
fc-minigame
Commit 1daec666 authored by 陈冲's avatar 陈冲
Browse files
Options

1

parent 94cab0cd
Show whitespace changes
Inline Side-by-side
Showing with 345 additions and 34 deletions
frontend-h5/src/components/MobileStage.vue
View file @ 1daec666
......@@ -162,11 +162,11 @@ defineExpose({
<slot name="gameRule"></slot>
</div>
</Transition>
<Transition name="game-rule-fade">
<!-- <Transition name="game-rule-fade">
<div v-if="!countdownVisible && showGameRank" class="modal-container">
<slot name="gameRank"></slot>
</div>
</Transition>
</Transition> -->
</main>
</template>
......
frontend-h5/src/composables/useGameSocket.ts
View file @ 1daec666
......@@ -57,7 +57,7 @@ const networkDisconnectToastDuration = 30 * 60 * 1000;
export function sendGameMessage(cmd: string, data: any = {}) {
const sent = sendSocketMessage(cmd, data)
if (!sent) {
if (!sent && cmd === 'submit_score_save') {
$toast('网络不好，分数无法提交', networkDisconnectToastDuration)
}
return sent
......@@ -105,7 +105,6 @@ export function useGameSocket(options: GameSocketOptions) {
// $toast('网络中断，尝试重新连接...')
isGameSocketConnected.value = false;
stopStatusPolling();
$toast('网络连接已断开，请检查网络后重新进入游戏', networkDisconnectToastDuration)
socket = null;
},
onError: (error: any) => {
......
frontend-h5/src/pages/game1/views/PlayingView.vue
View file @ 1daec666
......@@ -26,7 +26,7 @@ defineEmits<{
<div class="play-content">
<div>当前击鼓积分</div>
<div>{{ tick }}</div>
<div v-if="!userTop10RankStatus">当前排名: &nbsp;第&nbsp;<label>{{ rank }}</label>&nbsp;名</div>
<!-- <div v-if="!userTop10RankStatus">当前排名: &nbsp;第&nbsp;<label></label>&nbsp;名</div> -->
</div>
<div class="bg-bottom"></div>
<div class="play-gu" :style="{ backgroundPosition: `-${currentGuFrame * 400}px 0` }" @click="$emit('touch')"></div>
......
frontend-h5/src/pages/game2/views/PlayingView.vue
View file @ 1daec666
......@@ -135,14 +135,20 @@ onBeforeUnmount(stopInertia)
<!-- <div class="img-logo"></div>
<div class="img-hydt"></div> -->
<div class="rank-content">
<div class="txt-left">
<div>
实时得分
</div>
<div>
{{ tick }}
</div>
<!-- <div class="txt-left">
<div>排名</div>
<div class="txt-bold">{{ rank }}</div>
<div class="txt-bold"></div>
</div>
<div class="txt-right">
<div>实时得分</div>
<div class="txt-bold">{{ tick }}</div>
</div>
</div> -->
</div>
<div class="img-pointer"></div>
<div ref="coinRef" class="img-coin" :style="{ '--coin-rotation': `${coinRotation}deg` }"
......@@ -201,15 +207,18 @@ onBeforeUnmount(stopInertia)
.rank-content {
width: 600px;
height: 140px;
background: v-bind('imageUrls.rank') center/cover;
border: 1px solid #A10A06;
border-radius: 25px;
background: #F7DA81;
/* background: v-bind('imageUrls.rank') center/cover; */
position: absolute;
left: 50%;
top: 570px;
display: flex;
align-items: center;
justify-content: space-between;
/* align-items: center;
justify-content: space-between; */
transform: translate(-50%, -50%);
font-size: 24px;
font-size: 44px;
color: #A10A06;
.txt-bold {
......
frontend-h5/src/pages/game2/views/ScoreView.vue 0 → 100644
View file @ 1daec666
<script setup lang="ts">
import { $getWechat } from '@/commons/utils';
import { onMounted, ref } from 'vue';
defineProps<{
imageUrls: Record<string, string>
tick: number
rank: number
}>()
defineEmits<{
replay: []
back: []
}>()
const nickname = ref('');
const avatar = ref('');
onMounted(() => {
const wechat = $getWechat();
nickname.value = wechat.nickname;
avatar.value = wechat.avatar;
});
</script>
<template>
<div class="h5-page game-stage">
<div class="img-logo"></div>
<div class="bg-bottom"></div>
<div class="img-score">
<div class="score-avatar"
:style="`background: url(${avatar});border-radius:66px;width:132px;height:132px;`"></div>
<div class="score-content">
<div>{{ nickname }}</div>
<div>您的成绩</div>
<div>击鼓积分</div>
<div>{{ tick }}</div>
<div>最终排名</div>
<div v-if="rank>0">第<label>{{ rank }}</label>名</div>
<div v-else>未上榜</div>
</div>
</div>
</div>
</template>
<style scoped>
.game-stage {
position: absolute;
width: 750px;
height: 1624px;
padding: 0;
}
.bg-bottom {
position: absolute;
bottom: 0;
left: var(--stage-viewport-left, 0);
width: var(--stage-viewport-width, 750px);
height: 479px;
background: v-bind('imageUrls.bg2') center/cover;
opacity: 0.6;
}
.img-logo {
position: absolute;
top: 66px;
left: 50%;
width: 428px;
height: 77px;
background: v-bind('imageUrls.logo') center/cover;
transform: translateX(-50%);
}
.img-score {
position: absolute;
top: 450px;
left: 50%;
width: 465px;
height: 731px;
background: v-bind('imageUrls.scoreBg') center/cover;
transform: translateX(-50%) scale(1.2);
}
.score-avatar {
position: absolute;
top: -50px;
left: 50%;
width: 60px;
height: 60px;
background: v-bind('imageUrls.avatar') center/cover;
transform: translateX(-50%);
}
.score-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(100% - 100px);
font-size: 28pt;
text-align: center;
}
.score-content>div:nth-child(1) {
color: #E00000;
font-size: 32pt;
font-weight: bold;
}
.score-content>div:nth-child(2) {
margin-top: 20px;
font-size: 32pt;
}
.score-content>div:nth-child(3) {
margin-top: 40px;
}
.score-content>div:nth-child(4) {
margin-top: 30px;
color: #E00000;
font-size: 32pt;
/* font-weight: bold; */
transform: scale(1.5);
}
.score-content>div:nth-child(5) {
margin-top: 40px;
}
.score-content>div:nth-child(6) {
margin-top: 20px;
color: #E00000;
font-size: 32pt;
font-weight: bold;
}
.score-content>div:nth-child(6) label {
color: #E00000;
font-size: 42pt;
margin: 0 10px;
}
</style>
frontend-h5/src/pages/game3/Game3.vue
View file @ 1daec666
......@@ -464,7 +464,7 @@ const rankCloseHandler = () => {
</div>
</div>
<div class="row row-3">
<div class="col-1">{{ rank > 0 ? rank : '未上榜' }}</div>
<div class="col-1"></div>
<div class="col-2">
<div class="avatar" :style="{ backgroundImage: `url(${avatar})` }"></div>
<div>{{ nickname }}</div>
......
frontend-h5/src/pages/game4/views/PlayingView.vue
View file @ 1daec666
......@@ -235,7 +235,7 @@ const onTapHorse = async () => {
<div class="play-content">
<div>当前得分</div>
<div>{{ tick }}</div>
<div v-if="!userTop10RankStatus">当前排名: &nbsp;第&nbsp;<label>{{ rank }}</label>&nbsp;名</div>
<!-- <div v-if="!userTop10RankStatus">当前排名: &nbsp;第&nbsp;<label></label>&nbsp;名</div> -->
</div>
<!-- iOS 权限提示蒙层 -->
<Transition name="ios-hint-fade">
......
frontend-h5/src/pages/game5/Game5.vue
View file @ 1daec666
......@@ -411,7 +411,7 @@ const rankCloseHandler = () => {
:background="stageBackground">
<template #gameRank>
<div class="ranklist-container">
<div class="txt-title">排行</div>
<!-- <div class="txt-title">排行</div>
<div class="list-container">
<div class="row row-1">
<div class="col-1">排名</div>
......@@ -433,14 +433,14 @@ const rankCloseHandler = () => {
</div>
</div>
<div class="row row-3">
<div class="col-1">{{ rank > 0 ? rank : '未上榜' }}</div>
<div class="col-1"></div>
<div class="col-2">
<div class="avatar" :style="{ backgroundImage: `url(${avatar})`, top: '27px' }"></div>
<div>{{ nickname }}</div>
</div>
<div class="col-3">{{ tick }}</div>
</div>
</div>
</div> -->
<div class="img-close" @click="rankCloseHandler"></div>
</div>
</template>
......
frontend-h5/src/pages/game5/views/PlayingView.vue
View file @ 1daec666
......@@ -402,14 +402,20 @@ onBeforeUnmount(() => {
<div class="img-logo"></div>
<div class="img-center-title"></div>
<div class="rank-content">
<div class="txt-left">
<div>
实时得分
</div>
<div>
{{ tick }}
</div>
<!-- <div class="txt-left">
<div>排名</div>
<div class="txt-bold">{{ rank }}</div>
<div class="txt-bold"></div>
</div>
<div class="txt-right">
<div>实时积分</div>
<div class="txt-bold">{{ tick }}</div>
</div>
</div> -->
</div>
<div class="paodao-runway-container">
<div class="paodao-runway" :class="{ 'paodao-paused': !gameActive }"></div>
......@@ -554,15 +560,18 @@ onBeforeUnmount(() => {
.rank-content {
width: 600px;
height: 140px;
background: v-bind('imageUrls.rank') center/cover;
border: 1px solid #A10A06;
border-radius: 25px;
background: #F7DA81;
/* background: v-bind('imageUrls.rank') center/cover; */
position: absolute;
left: 50%;
top: 380px;
display: flex;
align-items: center;
justify-content: space-between;
/* align-items: center;
justify-content: space-between; */
transform: translate(-50%, -50%);
font-size: 24px;
font-size: 44px;
color: #A10A06;
z-index: 2;
......
frontend-h5/src/pages/game5/views/ScoreView.vue
View file @ 1daec666
......@@ -34,7 +34,8 @@ onMounted(() => {
<div>击鼓积分</div>
<div>{{ tick }}</div>
<div>最终排名</div>
<div>第<label>{{ rank }}</label>名</div>
<div v-if="rank>0">第<label>{{ rank }}</label>名</div>
<div v-else>未上榜</div>
</div>
</div>
</div>
......
frontend-h5/src/pages/game6/Game.vue
View file @ 1daec666
......@@ -429,7 +429,7 @@ const rankCloseHandler = () => {
</div>
</div>
<div class="row row-3">
<div class="col-1">{{ rank > 0 ? rank : '未上榜' }}</div>
<div class="col-1"></div>
<div class="col-2">
<div class="avatar" :style="{ backgroundImage: `url(${avatar})` }"></div>
<div>{{ nickname }}</div>
......
frontend-h5/src/pages/game6/views/PlayingView.vue
View file @ 1daec666
......@@ -192,14 +192,20 @@ onBeforeUnmount(() => {
<div class="img-logo"></div>
<div class="img-hydt"></div>
<div class="rank-content">
<div class="txt-left">
<div>
实时得分
</div>
<div>
{{ tick }}
</div>
<!-- <div class="txt-left">
<div>排名</div>
<div class="txt-bold">{{ rank }}</div>
<div class="txt-bold"></div>
</div>
<div class="txt-right">
<div>实时得分</div>
<div class="txt-bold">{{ tick }}</div>
</div>
</div> -->
</div>
<div ref="moleContainerRef" class="mole-container" @click="handleBoardTouch">
......@@ -216,7 +222,7 @@ onBeforeUnmount(() => {
<!-- <div class="play-content">
<div>当前击鼓次数</div>
<div>{{ tick }}</div>
<div>当前排名: &nbsp;第&nbsp;<label>{{ rank }}</label>&nbsp;名</div>
<div>当前排名: &nbsp;第&nbsp;<label></label>&nbsp;名</div>
</div> -->
<!-- <div class="bg-bottom"></div> -->
<!-- <div class="play-gu" :style="{ background: `${currentGu} center/cover` }" @click="$emit('touch')"></div> -->
......@@ -244,15 +250,18 @@ onBeforeUnmount(() => {
.rank-content {
width: 600px;
height: 140px;
background: v-bind('imageUrls.rank') center/cover;
border: 1px solid #A10A06;
border-radius: 25px;
background: #F7DA81;
/* background: v-bind('imageUrls.rank') center/cover; */
position: absolute;
left: 50%;
top: 480px;
display: flex;
align-items: center;
justify-content: space-between;
/* align-items: center;
justify-content: space-between; */
transform: translate(-50%, -50%);
font-size: 24px;
font-size: 44px;
color: #A10A06;
.txt-bold {
......
frontend-h5/src/pages/game6/views/ScoreView.vue 0 → 100644
View file @ 1daec666
<script setup lang="ts">
import { $getWechat } from '@/commons/utils';
import { onMounted, ref } from 'vue';
defineProps<{
imageUrls: Record<string, string>
tick: number
rank: number
}>()
defineEmits<{
replay: []
back: []
}>()
const nickname = ref('');
const avatar = ref('');
onMounted(() => {
const wechat = $getWechat();
nickname.value = wechat.nickname;
avatar.value = wechat.avatar;
});
</script>
<template>
<div class="h5-page game-stage">
<div class="img-logo"></div>
<div class="bg-bottom"></div>
<div class="img-score">
<div class="score-avatar"
:style="`background: url(${avatar});border-radius:66px;width:132px;height:132px;`"></div>
<div class="score-content">
<div>{{ nickname }}</div>
<div>您的成绩</div>
<div>击鼓积分</div>
<div>{{ tick }}</div>
<div>最终排名</div>
<div v-if="rank>0">第<label>{{ rank }}</label>名</div>
<div v-else>未上榜</div>
</div>
</div>
</div>
</template>
<style scoped>
.game-stage {
position: absolute;
width: 750px;
height: 1624px;
padding: 0;
}
.bg-bottom {
position: absolute;
bottom: 0;
left: var(--stage-viewport-left, 0);
width: var(--stage-viewport-width, 750px);
height: 479px;
background: v-bind('imageUrls.bg2') center/cover;
opacity: 0.6;
}
.img-logo {
position: absolute;
top: 66px;
left: 50%;
width: 428px;
height: 77px;
background: v-bind('imageUrls.logo') center/cover;
transform: translateX(-50%);
}
.img-score {
position: absolute;
top: 450px;
left: 50%;
width: 465px;
height: 731px;
background: v-bind('imageUrls.scoreBg') center/cover;
transform: translateX(-50%) scale(1.2);
}
.score-avatar {
position: absolute;
top: -50px;
left: 50%;
width: 60px;
height: 60px;
background: v-bind('imageUrls.avatar') center/cover;
transform: translateX(-50%);
}
.score-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(100% - 100px);
font-size: 28pt;
text-align: center;
}
.score-content>div:nth-child(1) {
color: #E00000;
font-size: 32pt;
font-weight: bold;
}
.score-content>div:nth-child(2) {
margin-top: 20px;
font-size: 32pt;
}
.score-content>div:nth-child(3) {
margin-top: 40px;
}
.score-content>div:nth-child(4) {
margin-top: 30px;
color: #E00000;
font-size: 32pt;
/* font-weight: bold; */
transform: scale(1.5);
}
.score-content>div:nth-child(5) {
margin-top: 40px;
}
.score-content>div:nth-child(6) {
margin-top: 20px;
color: #E00000;
font-size: 32pt;
font-weight: bold;
}
.score-content>div:nth-child(6) label {
color: #E00000;
font-size: 42pt;
margin: 0 10px;
}
</style>
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