Skip to content

F
fc-minigame
Commit df306b30 authored by 董政锦's avatar 董政锦
Browse files
Options

Merge branch 'game4-0604' into 'main'

Game4 0604 See merge request !3
parents 4a6831ac 4b927c24
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 264 additions and 50 deletions
frontend-h5/env.d.ts
View file @ df306b30
......@@ -4,6 +4,7 @@ declare module 'crypto-js';
declare module 'crypto-js/sha256';
declare const __APP_DOMAIN__: string;
declare const __DEBUG__: boolean;
interface ImportMetaEnv {
readonly VITE_ASSET_BASE_URL?: string;
......
frontend-h5/package.json
View file @ df306b30
......@@ -15,12 +15,14 @@
"crypto-js": "^4.2.0",
"msgpack": "^1.0.3",
"socket.io-client": "^4.8.3",
"vconsole": "^3.15.1",
"vue": "^3.5.32",
"vue-router": "^4.6.4"
},
"devDependencies": {
"@tsconfig/node24": "^24.0.4",
"@types/node": "^24.12.2",
"@vitejs/plugin-basic-ssl": "^2.3.0",
"@vitejs/plugin-vue": "^6.0.6",
"@vue/tsconfig": "^0.9.1",
"npm-run-all2": "^8.0.4",
......
frontend-h5/pnpm-lock.yaml
View file @ df306b30
......@@ -20,6 +20,9 @@ importers:
socket.io-client:
specifier: ^4.8.3
version: 4.8.3
vconsole:
specifier: ^3.15.1
version: 3.15.1
vue:
specifier: ^3.5.32
version: 3.5.35(typescript@6.0.3)
......@@ -33,6 +36,9 @@ importers:
'@types/node':
specifier: ^24.12.2
version: 24.12.4
'@vitejs/plugin-basic-ssl':
specifier: ^2.3.0
version: 2.3.0(vite@8.0.16(@types/node@24.12.4))
'@vitejs/plugin-vue':
specifier: ^6.0.6
version: 6.0.7(vite@8.0.16(@types/node@24.12.4))(vue@3.5.35(typescript@6.0.3))
......@@ -185,6 +191,10 @@ packages:
peerDependencies:
'@babel/core': ^7.0.0-0
'@babel/runtime@7.29.7':
resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
engines: {node: '>=6.9.0'}
'@babel/template@7.29.7':
resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
engines: {node: '>=6.9.0'}
......@@ -348,6 +358,12 @@ packages:
'@types/node@24.12.4':
resolution: {integrity: sha512-GUUEShf+PBCGW2KaXwcIt3Yk+e3pkKwWKb9GSyM9WQVE+ep2jzmHdGsHzu4wgcZy5fN9FBdVzjpBQsYlpfpgLA==}
'@vitejs/plugin-basic-ssl@2.3.0':
resolution: {integrity: sha512-bdyo8rB3NnQbikdMpHaML9Z1OZPBu6fFOBo+OtxsBlvMJtysWskmBcnbIDhUqgC8tcxNv/a+BcV5U+2nQMm1OQ==}
engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
peerDependencies:
vite: ^6.0.0 || ^7.0.0 || ^8.0.0
'@vitejs/plugin-vue@6.0.7':
resolution: {integrity: sha512-km+p+XdSz9Sxm5rqUbqcSfZYaAniKxWBj1KURl+Jr7UaPvvX7BmaWMdP69I5rrFDeQGyxAG7NXdc57vz+snhWg==}
engines: {node: ^20.19.0 || >=22.12.0}
......@@ -474,6 +490,13 @@ packages:
convert-source-map@2.0.0:
resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
copy-text-to-clipboard@3.2.2:
resolution: {integrity: sha512-T6SqyLd1iLuqPA90J5N4cTalrtovCySh58iiZDGJ6FGznbclKh4UI+FGacQSgFzwKG77W7XT5gwbVEbd9cIH1A==}
engines: {node: '>=12'}
core-js@3.49.0:
resolution: {integrity: sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==}
cross-spawn@7.0.6:
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
engines: {node: '>= 8'}
......@@ -698,6 +721,9 @@ packages:
muggle-string@0.4.1:
resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
mutation-observer@1.0.3:
resolution: {integrity: sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==}
nan@2.27.0:
resolution: {integrity: sha512-hC+0LidcL3XE4rp1C4H54KujgXKzbfyTngZTwBByQxsOxCEKZT0MPQ4hOKUH2jU1OYstqdDH4onyHPDzcV0XdQ==}
......@@ -836,6 +862,9 @@ packages:
peerDependencies:
browserslist: '>= 4.21.0'
vconsole@3.15.1:
resolution: {integrity: sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==}
vite-dev-rpc@2.0.0:
resolution: {integrity: sha512-yKwbTwdHKSD2k/aGqyWpPHepo45OQc8lH3/6IfT4ZqeKE26ooKvi4WIEKzqWav8v+9Is8u1k8q54hvOmqASazA==}
peerDependencies:
......@@ -1135,6 +1164,8 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@babel/runtime@7.29.7': {}
'@babel/template@7.29.7':
dependencies:
'@babel/code-frame': 7.29.7
......@@ -1270,6 +1301,10 @@ snapshots:
dependencies:
undici-types: 7.16.0
'@vitejs/plugin-basic-ssl@2.3.0(vite@8.0.16(@types/node@24.12.4))':
dependencies:
vite: 8.0.16(@types/node@24.12.4)
'@vitejs/plugin-vue@6.0.7(vite@8.0.16(@types/node@24.12.4))(vue@3.5.35(typescript@6.0.3))':
dependencies:
'@rolldown/pluginutils': 1.0.1
......@@ -1431,6 +1466,10 @@ snapshots:
convert-source-map@2.0.0: {}
copy-text-to-clipboard@3.2.2: {}
core-js@3.49.0: {}
cross-spawn@7.0.6:
dependencies:
path-key: 3.1.1
......@@ -1586,6 +1625,8 @@ snapshots:
muggle-string@0.4.1: {}
mutation-observer@1.0.3: {}
nan@2.27.0: {}
nanoid@3.3.12: {}
......@@ -1729,6 +1770,13 @@ snapshots:
escalade: 3.2.0
picocolors: 1.1.1
vconsole@3.15.1:
dependencies:
'@babel/runtime': 7.29.7
copy-text-to-clipboard: 3.2.2
core-js: 3.49.0
mutation-observer: 1.0.3
vite-dev-rpc@2.0.0(vite@8.0.16(@types/node@24.12.4)):
dependencies:
birpc: 4.0.0
......
frontend-h5/src/assets/images/game4/h5-game4-join.svg deleted 100644 → 0
View file @ 4a6831ac
This source diff could not be displayed because it is too large. You can view the blob instead.
frontend-h5/src/assets/images/game4/logo.svg 0 → 100644
View file @ df306b30
This source diff could not be displayed because it is too large. You can view the blob instead.
frontend-h5/src/assets/images/game4/start-bg.svg 0 → 100644
View file @ df306b30
This diff is collapsed.
frontend-h5/src/assets/images/game4/user-bg.svg 0 → 100644
View file @ df306b30
<svg width="447" height="288" viewBox="0 0 447 288" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 9.99999C0 4.47715 4.47715 0 10 0H437C442.523 0 447 4.47715 447 10V287.5L224 234.5L0 287.5V9.99999Z" fill="url(#paint0_linear_99_884)"/>
<defs>
<linearGradient id="paint0_linear_99_884" x1="223.5" y1="0" x2="223.5" y2="287.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFE897"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
</defs>
</svg>
frontend-h5/src/commons/debug.ts 0 → 100644
View file @ df306b30
import SHA256 from 'crypto-js/sha256'
/**
* 是否开启 vconsole 调试面板
* - 开发模式(__DEBUG__=true)下自动开启
* - 生产模式下可通过 URL 参数 ?vc 或 ?debug 手动开启
*
* 关闭方式：将 vite.config.ts 中 __DEBUG__ 改为 false，且访问时不带 ?vc 参数
*/
function shouldEnableVConsole(): boolean {
if (__DEBUG__) return true
const params = new URLSearchParams(location.search)
return params.has('vc') || params.has('debug')
}
/**
* 是否使用模拟微信数据
* - 开发模式下如果 URL 没有真实 token 参数，自动启用模拟数据
* - 生产模式下可通过 URL 参数 ?mock 手动启用
*/
export function shouldMockWechat(): boolean {
const params = new URLSearchParams(location.search)
if (params.get('token')) return false // 有真实 token 就不 mock
if (__DEBUG__) return true
return params.has('mock')
}
/** 模拟的微信用户数据 */
export function getMockWechat() {
const mockToken = 'debug_mock_token_' + Date.now()
return {
token: SHA256(mockToken).toString(),
token_origin: mockToken,
nickname: '测试用户',
avatar: 'https://picsum.photos/200',
}
}
/**
* 初始化 vconsole（动态导入，生产环境未触发时不会打包）
*/
export async function initVConsole() {
if (!shouldEnableVConsole()) return
try {
const { default: VConsole } = await import('vconsole')
const vc = new VConsole()
console.log('[debug] vconsole 已启动')
return vc
} catch (e) {
console.warn('[debug] vconsole 加载失败:', e)
}
}
frontend-h5/src/commons/utils.ts
View file @ df306b30
......@@ -89,5 +89,17 @@ export function $getWechat(): any | null {
avatar: q[2],
};
}
// 调试模式：无真实微信参数时使用模拟数据
if (__DEBUG__) {
const mockToken = 'debug_mock_token_' + Date.now()
return {
token: SHA256(mockToken).toString(),
token_origin: mockToken,
nickname: '测试用户',
avatar: 'https://picsum.photos/200',
}
}
return null;
}
\ No newline at end of file
frontend-h5/src/components/MobileStage.vue
View file @ df306b30
......@@ -188,7 +188,7 @@ defineExpose({
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.6);
/* pointer-events: none; */
}
......
frontend-h5/src/main.ts
View file @ df306b30
......@@ -3,7 +3,9 @@ import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { initVConsole } from './commons/debug'
localStorage.setItem('domain', __APP_DOMAIN__)
initVConsole()
createApp(App).use(router).mount('#app')
frontend-h5/src/pages/game4/Game4.vue
View file @ df306b30
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { cssAssetUrl } from '@/commons/assets.ts'
import MobileStage from '@/components/MobileStage.vue'
import { useGameSocket, joinSharedRoom, sendGameMessage, userJoinStatus } from '@/composables/useGameSocket'
......@@ -14,11 +14,13 @@ const imageUrls = {
bg: cssAssetUrl('game4/h5-game4-bg.svg'),
bg2: cssAssetUrl('game1/bg2.png'),
playBg: cssAssetUrl('game4/h5-game4-bg2.svg'),
logo: cssAssetUrl('game1/logo.png'),
logo: cssAssetUrl('game4/logo.svg'),
time: cssAssetUrl('game4/h5-game4-clock.svg'),
title: cssAssetUrl('game4/h5-game4-title1.svg'),
title2: cssAssetUrl('game4/h5-game4-title2.svg'),
avatarBg: cssAssetUrl('game4/h5-game4-join.svg'),
// avatarBg: cssAssetUrl('game4/h5-game4-join.svg'),
userBg: cssAssetUrl('game4/user-bg.svg'),
startBg: cssAssetUrl('game4/start-bg.svg'),
gift: cssAssetUrl('game4/h5-game4-gift.svg'),
avatar: cssAssetUrl('game1/avatar.png'),
gu: cssAssetUrl('game4/h5-game4-horse.svg'),
......@@ -33,6 +35,13 @@ const imageUrls = {
const wechat = $getWechat()
const currentView = ref<GameView>('loading')
const stageBackground = computed(() => {
if (currentView.value === 'playing') {
return `${imageUrls.playBg} center/cover`
}
return `${imageUrls.bg} center/cover`
})
const countdownInterval = ref(60)
const isDivDescVisible = ref(false)
const tick = ref(0) // 点击次数/摇动次数
......@@ -216,7 +225,7 @@ onBeforeUnmount(() => {
<template>
<MobileStage v-if="token" :showGameRule="showGameRule" ref="mobileStageRef"
:background="`${imageUrls.bg} center/cover`">
:background="stageBackground">
<template #gameRule>
<div class="rule-container">
<div class="rule-txt-container">
......@@ -250,9 +259,10 @@ onBeforeUnmount(() => {
<style scoped>
.rule-container {
.rule-txt-container {
background: #FFF9E4;
width: 62vw;
margin: 0 40px;
border-radius: 5px;
background: #FFF9E4;
padding-top: 20px;
padding-bottom: 10px;
......
frontend-h5/src/pages/game4/views/LoadingView.vue
View file @ df306b30
<script setup lang="ts">
import { $getWechat } from '@/commons/utils.ts'
import { onMounted, ref } from 'vue';
defineProps<{
imageUrls: Record<string, string>
userJoinStatus: boolean
......@@ -7,6 +10,14 @@ defineProps<{
defineEmits<{
touchGameRule: []
}>()
const nickname = ref('');
const avatar = ref('');
onMounted(() => {
const wechat = $getWechat();
nickname.value = wechat.nickname;
avatar.value = wechat.avatar;
});
</script>
<template>
......@@ -16,8 +27,14 @@ defineEmits<{
<div class="img-title"></div>
<div class="img-title2"></div>
<div class="img-gift"></div>
<div class="img-avatar-bg"></div>
<div class="img-avatar"></div>
<div class="img-user-bg"></div>
<div class="img-avatar" :style="`background: url(${avatar});border-radius:66px;width:132px;height:132px;`"></div>
<div class="txt-nickname">{{ nickname }}</div>
<div class="txt-loading">
<label v-if="userJoinStatus">您已成功加入游戏等待主持人开始</label>
<label v-else>正在加入游戏...</label>
</div>
<div class="img-start-bg"></div>
</div>
</template>
......@@ -99,28 +116,24 @@ defineEmits<{
background: v-bind('imageUrls.gift') center/cover;
}
.img-avatar-bg {
.img-user-bg {
position: absolute;
top: 568px;
left: calc(50% + 12px);
width: 500px;
height: 821px;
background: v-bind('imageUrls.avatarBg') center/cover;
top: 634px;
left: 50%;
width: 447px;
height: 287.5px;
background: v-bind('imageUrls.userBg') center/cover no-repeat;
transform: translateX(-50%);
}
.img-avatar {
position: absolute;
top: 564px;
top: 524px;
left: 50%;
width: 156px;
height: 156px;
background: v-bind('imageUrls.avatar') center/cover;
transform: translateX(-50%);
}
.txt-nickname {
position: absolute;
top: 650px;
top: 668px;
left: 50%;
color: #E00000;
font-size: 25pt;
......@@ -130,7 +143,7 @@ defineEmits<{
.txt-loading {
position: absolute;
top: 710px;
top: 743px;
left: 50%;
width: 288px;
color: #E00000;
......@@ -140,6 +153,16 @@ defineEmits<{
transform: translateX(-50%);
}
.img-start-bg {
position: absolute;
bottom: 291px;
left: 50%;
width: 500px;
height: 90px;
background: v-bind('imageUrls.startBg') center/cover no-repeat;
transform: translateX(-50%);
}
.txt-loading label {
display: inline-block;
transform-origin: center;
......
frontend-h5/src/pages/game4/views/PlayingView.vue
View file @ df306b30
......@@ -2,7 +2,7 @@
import { onBeforeUnmount, onMounted } from 'vue'
import shakeSound from '@/assets/images/game4/yaoyiyao.mp3'
defineProps<{
const props = defineProps<{
imageUrls: Record<string, string>
countdownInterval: number
isDivDescVisible: boolean
......@@ -83,6 +83,13 @@ const handleDeviceMotion = (ev: DeviceMotionEvent) => {
lastShakeTime = now
playShakeSound()
// 摇晃时打印日志：输出将要通过 websocket 提交的数据
console.log('[摇一摇] 检测到摇晃，即将提交数据:', {
type: 'submit_score',
data: { score: props.tick + 1 },
})
emit('touch')
}
......
frontend-h5/src/pages/game4/views/ScoreView.vue
View file @ df306b30
<script setup lang="ts">
import { $getWechat } from '@/commons/utils.ts'
import { onMounted, ref } from 'vue';
defineProps<{
imageUrls: Record<string, string>
tick: number
......@@ -9,6 +12,14 @@ defineEmits<{
replay: []
back: []
}>()
const nickname = ref('');
const avatar = ref('');
onMounted(() => {
const wechat = $getWechat();
nickname.value = wechat.nickname;
avatar.value = wechat.avatar;
});
</script>
<template>
......@@ -16,20 +27,20 @@ defineEmits<{
<div class="img-logo"></div>
<!-- <div class="bg-bottom"></div> -->
<div class="img-score">
<div class="score-avatar"></div>
<div class="score-avatar" :style="`background: url(${avatar}) center/cover;border-radius:66px;width:78px;height:78px;`"></div>
<div class="score-content">
<div>张小明</div>
<div>{{ nickname }}</div>
<div>您的成绩</div>
<div>策马跑道</div>
<div></div>
<div>{{ tick }}</div>
<div>最终排名</div>
<div>第<label>{{ level }}</label>名</div>
</div>
</div>
<div class="btn-group">
<!-- <div class="btn-group">
<div class="btn-replay" @click="$emit('replay')"></div>
<div class="btn-back" @click="$emit('back')"></div>
</div>
</div> -->
</div>
</template>
......@@ -73,10 +84,10 @@ defineEmits<{
.score-avatar {
position: absolute;
top: -20px;
top: -35px;
left: 50%;
width: 60px;
height: 60px;
/* width: 60px;
height: 60px; */
background: v-bind('imageUrls.avatar') center/cover;
transform: translateX(-50%) scale(2);
}
......
frontend-h5/vite.config.ts
View file @ df306b30
import { fileURLToPath, URL } from 'node:url'
import { cpSync, existsSync, rmSync } from 'node:fs'
import { resolve } from 'node:path'
import basicSsl from '@vitejs/plugin-basic-ssl'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
......@@ -29,10 +29,12 @@ export default defineConfig(({ command }) => ({
base: command === 'build' ? '/cc/h5/' : '/',
define: {
__APP_DOMAIN__: JSON.stringify(command === 'build' ? buildDomain : ''),
__DEBUG__: JSON.stringify(command === 'serve'),
},
plugins: [
vue(),
vueDevTools(),
basicSsl(),
copyImageAssets(),
],
server: {
......
frontend-large/src/assets/images/game4/default-avator.svg 0 → 100644
View file @ df306b30
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_99_856" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="120" height="120">
<circle cx="60" cy="60" r="60" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_99_856)">
<path d="M22.0075 107.952C22.0075 108.807 22.7209 109.5 23.6009 109.5H96.8941C97.774 109.5 98.4875 108.807 98.4875 107.952V106.104C98.5241 105.547 98.5986 102.767 96.7662 99.6937C95.6107 97.7558 93.9337 96.0816 91.7816 94.7179C89.1782 93.0682 85.8664 91.8727 81.8606 91.153C81.831 91.1492 78.8608 90.7554 75.8179 89.9784C70.5191 88.6249 70.0559 87.4271 70.0528 87.4154C70.0216 87.297 69.9765 87.1833 69.9188 87.0764C69.8755 86.8529 69.7684 86.012 69.9731 83.7589C70.4929 78.0363 73.5626 74.6542 76.0291 71.9369C76.807 71.0799 77.5416 70.2704 78.1075 69.4766C80.548 66.0522 80.7745 62.1584 80.7848 61.917C80.7848 61.428 80.7286 61.026 80.6084 60.6533C80.3689 59.9076 79.9181 59.443 79.589 59.1038L79.5868 59.1014C79.5038 59.016 79.4255 58.9351 79.3615 58.8608C79.3371 58.8324 79.2723 58.7573 79.3313 58.3718C79.5479 56.9527 79.6779 55.7646 79.7404 54.6326C79.8515 52.6158 79.9382 49.5997 79.418 46.6643C79.3538 46.163 79.2435 45.6336 79.0718 45.0028C78.5222 42.9815 77.6392 41.2534 76.4124 39.8271C76.2014 39.5976 71.0719 34.1934 56.181 33.0846C54.1219 32.9313 52.0864 33.0138 50.0827 33.1163C49.5998 33.1401 48.9385 33.1729 48.3196 33.3333C46.7822 33.7315 46.3719 34.706 46.2642 35.2514C46.0856 36.1548 46.3995 36.8575 46.607 37.3226C46.6372 37.39 46.6745 37.4735 46.6094 37.6906C46.2638 38.2259 45.72 38.7085 45.1656 39.1658C45.0054 39.3019 41.2713 42.5216 41.066 46.7275C40.5124 49.9262 40.5543 54.91 41.2089 58.3545C41.247 58.5447 41.3032 58.8264 41.212 59.0166C40.508 59.6475 39.7099 60.3626 39.712 61.9943C39.7204 62.1584 39.9469 66.0522 42.3876 69.4766C42.9529 70.2698 43.6869 71.0786 44.4642 71.935L44.466 71.9369C46.9325 74.6542 50.002 78.0363 50.522 83.7587C50.7265 86.0118 50.6194 86.8529 50.5762 87.0762C50.5184 87.1831 50.4733 87.2968 50.4423 87.4152C50.4391 87.4269 49.9776 88.6209 44.7028 89.9715C41.6597 90.7508 38.6639 91.149 38.5745 91.1619C34.6817 91.819 31.3901 92.9846 28.7914 94.6257C26.6466 95.9804 24.9665 97.6575 23.7975 99.6107C21.9299 102.732 21.9804 105.574 22.0075 106.092V107.952Z" fill="#E2E2E2" stroke="#E2E2E2" stroke-width="3" stroke-linejoin="round"/>
</g>
</svg>
frontend-large/src/pages/game4/Game4.vue
View file @ df306b30
......@@ -64,14 +64,15 @@ offHorseBoost = onSocketMessage((evt, payload) => {
let hasBoost = false;
data.forEach((item: any) => {
const id = item.userid || item.wechat_id || "";
// WebSocket 数据无 userid/wechat_id，用 avatar 作为稳定标识
const id = item.userid || item.wechat_id || item.avatar || "";
if (!id) return;
// 尝试多种字段名: boost / acceleration / speed / progress
const raw = item.boost ?? item.acceleration ?? item.speed ?? item.progress;
// 尝试多种字段名: score / boost / acceleration / speed / progress
const raw = item.score ?? item.boost ?? item.acceleration ?? item.speed ?? item.progress;
if (raw === undefined || raw === null) return;
const val = Number(raw);
if (isNaN(val)) return;
// boost 范围 0~N，0 表示无加速（基准60秒跑完），>0 越快
// score/boost 范围 0~N，0 表示无加速，越大越快
boosts[id] = Math.max(0, val);
hasBoost = true;
});
......@@ -105,7 +106,19 @@ const updateRankPlayers = (data: any) => {
);
};
const gotoLoading = () => {
const gotoLoading = (reset = false) => {
if (reset) {
playerCount.value = 0;
loadingPlayers.value = Array.from(
{ length: PLAYER_LIMIT },
emptyLoadingPlayer,
);
rankPlayers.value = Array.from(
{ length: RANK_LIMIT },
(_, index) => emptyRankPlayer(index),
);
isPlayingStartAnimation = false;
}
screen.value = "loading";
};
......@@ -116,7 +129,7 @@ const gotoRank1WithIntro = async () => {
screen.value = "rank1";
await nextTick();
await rank1Ref.value?.startIntro();
screen.value = "rank2";
// 结果页已在 Rank1View 内部渲染，不需要切到 rank2
isPlayingStartAnimation = false;
};
......@@ -127,7 +140,7 @@ function handleRoomState(data: any) {
switch (data?.status) {
case 0:
gotoLoading();
gotoLoading(true);
createRoom(1);
break;
case 1:
......@@ -142,10 +155,9 @@ function handleRoomState(data: any) {
}
}
const { startGame, createRoom, requestRoomState } = useAdminGameSocket({
const { startGame, createRoom, backRoom, requestRoomState } = useAdminGameSocket({
gameId: "game4",
// loginRedirectPath: '/game4',
onGameStartRejected: gotoLoading,
onRoomState: handleRoomState,
onRoomJoin: (data) => {
renderPlayers(data);
......@@ -156,8 +168,9 @@ const { startGame, createRoom, requestRoomState } = useAdminGameSocket({
});
const nextRound = () => {
gotoLoading();
createRoom(1);
gotoLoading(true);
// 使用 backRoom 重置已有房间，而非 createRoom 重复创建
backRoom(1);
setTimeout(() => {
requestRoomState();
}, 200);
......@@ -186,7 +199,7 @@ onUnmounted(() => {
:rank-list="rankPlayers"
:horse-boosts="horseBoosts"
@start="startGame"
@next="screen = 'rank2'"
@next="nextRound"
/>
<Rank2 v-else-if="screen === 'rank2'" :rank-list="rankPlayers" @next="nextRound" />
<!-- <Rank2 v-else-if="screen === 'rank2'" :rank-list="rankPlayers" @next="nextRound" /> -->
</template>
frontend-large/src/pages/game4/views/Rank2View.vue
View file @ df306b30
......@@ -14,7 +14,7 @@ const emit = defineEmits<{
const FINAL_RANK_LIMIT = 10;
const imageUrls = {
bg: cssAssetUrl("game4/bg.png"),
bg: cssAssetUrl("game4/bg.svg"),
logo: cssAssetUrl("game1/logo.png"),
title: cssAssetUrl("game1/title3.png"),
title2: cssAssetUrl("game1/title4.png"),
......@@ -68,21 +68,30 @@ watch(
<div class="podium">
<div class="rank-no1">
<div class="gu-burst"></div>
<div class="avatar"></div>
<div
class="avatar"
:style="{ backgroundImage: `url(${list[0]?.avatar || imageUrls.avatar})` }"
></div>
<div class="nickname">{{ list[0]?.nickname }}</div>
<div class="guan"></div>
<div class="pai"></div>
</div>
<div class="rank-no2">
<div class="gu-burst"></div>
<div class="avatar"></div>
<div
class="avatar"
:style="{ backgroundImage: `url(${list[1]?.avatar || imageUrls.avatar})` }"
></div>
<div class="nickname">{{ list[1]?.nickname }}</div>
<div class="guan"></div>
<div class="pai"></div>
</div>
<div class="rank-no3">
<div class="gu-burst"></div>
<div class="avatar"></div>
<div
class="avatar"
:style="{ backgroundImage: `url(${list[2]?.avatar || imageUrls.avatar})` }"
></div>
<div class="nickname">{{ list[2]?.nickname }}</div>
<div class="guan"></div>
<div class="pai"></div>
......@@ -97,7 +106,10 @@ watch(
<div class="no-icon">{{ index + 4 }}</div>
<div>
<div class="img-avatar-container">
<div class="img-avatar"></div>
<div
class="img-avatar"
:style="{ backgroundImage: `url(${item.avatar || imageUrls.avatar})` }"
></div>
</div>
<div class="txt-nickname">{{ item.nickname }}</div>
</div>
......
frontend-large/src/router/index.ts
View file @ df306b30
......@@ -3,8 +3,8 @@ import { $read } from '@/commons/utils'
import Main from '@/pages/Main.vue'
import Login from '@/pages/Login.vue'
import Game1 from '@/pages/game1/Game.vue'
import Game6 from '@/pages/game6/Game.vue'
import Game4 from '@/pages/game4/Game4.vue'
import Game6 from '@/pages/game6/Game.vue'
const router = createRouter({
history: createWebHashHistory(),
......
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