Skip to content

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

feat: 更新打地鼠

parent 298716ce
Show whitespace changes
Inline Side-by-side
Showing with 1434 additions and 88 deletions
backend/src/protocols/socket_io.rs
View file @ b5e67f80
......@@ -55,7 +55,7 @@ struct RankingPlayer {
enum RoomStatus {
#[default]
Closed = 0, //关闭
Start, //开始
Start, //开始排队
Running, //进行
Submit, //提交结果
Ended, //结束
......@@ -65,6 +65,7 @@ enum RoomStatus {
struct RoomState {
status: RoomStatus,
players: HashMap<String, RoomPlayer>, // 玩家列表，key 是 userid
next_entry_order: usize,
}
impl RoomState {
......@@ -106,7 +107,7 @@ impl RoomState {
// 房间开始进入排行
fn entry_ranking(&self) -> Vec<RankingPlayer> {
let mut ranking: Vec<(&String, &RoomPlayer)> = self.players.iter().collect();
ranking.sort_by(|(_, a), (_, b)| a.entry_order.cmp(&b.entry_order));
ranking.sort_by(|(_, a), (_, b)| b.entry_order.cmp(&a.entry_order));
ranking
.into_iter()
.take(ROOM_ENTRY_LIMIT)
......@@ -159,20 +160,10 @@ impl RoomState {
// })
// }
fn set_player_online(&mut self, userid: &str, online: bool) -> bool {
let Some(player) = self.players.get_mut(userid) else {
return false;
};
if player.online == online {
return false;
}
player.online = online;
true
}
fn reset(&mut self) {
self.status = RoomStatus::Closed;
self.players.clear();
self.next_entry_order = 0;
}
}
......@@ -287,22 +278,74 @@ fn broadcast_room_rank(ranking: Vec<Value>) {
broadcast_msgpack_all_admin("room_rank_result", &ok_resp(Some(json!(ranking))));
}
async fn sleep_room_status(round_id: u64, secs: u64, expected_status: RoomStatus) -> bool {
for _ in 0..secs {
tokio::time::sleep(Duration::from_secs(1)).await;
if GAME_ROUND_ID.load(Ordering::SeqCst) != round_id {
return false;
}
if let Ok(state) = ROOM_STATE.lock() {
if state.status != expected_status {
return false;
}
}
}
true
}
fn spawn_game_timeout(round_id: u64, secs: u64) {
tokio::spawn(async move {
tokio::time::sleep(Duration::from_secs(secs)).await;
let start_countdown_secs = 3;
let result_wait_secs = 2;
let running_secs = secs.saturating_sub(start_countdown_secs + result_wait_secs);
if GAME_ROUND_ID.load(Ordering::SeqCst) != round_id {
if !sleep_room_status(round_id, start_countdown_secs, RoomStatus::Running).await {
return;
}
if !sleep_room_status(round_id, running_secs, RoomStatus::Running).await {
return;
}
if let Ok(mut state) = ROOM_STATE.lock() {
if state.status == RoomStatus::Running {
state.status = RoomStatus::Submit;
// dbg!("submit");
drop(state);
} else {
return;
}
}
if !sleep_room_status(round_id, result_wait_secs, RoomStatus::Submit).await {
return;
}
if let Ok(mut state) = ROOM_STATE.lock() {
if state.status == RoomStatus::Submit {
state.status = RoomStatus::Ended;
}
}
});
}
// fn spawn_game_timeout(round_id: u64, secs: u64) {
// tokio::spawn(async move {
// tokio::time::sleep(Duration::from_secs(secs)).await;
// if GAME_ROUND_ID.load(Ordering::SeqCst) != round_id {
// return;
// }
// if let Ok(mut state) = ROOM_STATE.lock() {
// state.status = RoomStatus::Submit;
// // dbg!("submit");
// drop(state);
// }
// });
// }
// fn current_room_snapshot() -> Value {
// if let Ok(state) = ROOM_STATE.lock() {
// let snapshot = state.snapshot();
......@@ -389,7 +432,8 @@ async fn handle_room_command(
);
return;
}
let entry_order = state.players.len();
let entry_order = state.next_entry_order;
state.next_entry_order += 1;
state
.players
......@@ -444,8 +488,8 @@ async fn handle_room_command(
// let snapshot = state.snapshot();
drop(state);
//通知所有玩家倒计时60秒,实际上还有3秒倒计时,所以是63
spawn_game_timeout(round_id, 63);
//通知所有玩家倒计时60秒,实际上还有3秒倒计时,以前2秒统计结果,所以是65
spawn_game_timeout(round_id, 65);
broadcast_msgpack_all_player(evt, &ok_resp(Some(json!(game_index))));
//通知管理员
emit_msgpack(&socket, evt, &ok_resp(Some(json!(game_index))));
......@@ -688,32 +732,27 @@ pub async fn on_connect(_io: SocketIo, socket: SocketRef, Data(data): Data<Value
// 前端页面刷新时房间状态丢失体验会不好
if CLIENT_ADMIN_MAP.is_empty() {
if let Ok(mut state) = ROOM_STATE.lock() {
state.reset();
state.reset(); // 如果管理员都退出了，就把房间状态重置。
drop(state);
}
// 如果管理员都退出了，就把房间状态重置。
}
} else {
CLIENT_PLAYER_MAP.remove(&userid);
let ranking = ROOM_STATE.lock().ok().and_then(|mut state| {
if state.set_player_online(&userid, false) {
Some(state.current_ranking_payload())
} else {
None
if let Ok(mut state) = ROOM_STATE.lock() {
if state.status != RoomStatus::Start {
return;
}
if state.players.remove(&userid).is_none() {
return;
}
let count = state.players.len();
let ranking = state.current_ranking_payload();
drop(state);
broadcast_msgpack_all_admin(
"room_join_result",
&ok_resp(Some(json!({"list":ranking,"count":count}))),
);
}
});
// // 有玩家退出时通知所有管理员。(暂时不管了)
// broadcast_msgpack_all_admin(
// evt,
// &ok_resp(Some(json!({"list":ranking,"count":count}))),
// )
// broadcast_msgpack_all_admin(
// "room_state_result",
// &ok_resp(Some(current_room_snapshot())),
// );
// if let Some(ranking) = ranking {
// broadcast_room_rank(ranking);
// }
}
}
}
......
frontend-h5/src/pages/game6/Game.vue
View file @ b5e67f80
......@@ -17,7 +17,7 @@ const imageUrls: Record<string, string> = {
loadingBg1: cssAssetUrl('game6/loadingbg1.png'),
loadingBg2: cssAssetUrl('game6/loadingbg2.png'),
close: cssAssetUrl('game1/close.png'),
clock: cssAssetUrl('game1/clock.png'),
bg2: cssAssetUrl('game6/bg2.png'),
hydt: cssAssetUrl('game6/hydt.png'),
rank: cssAssetUrl('game6/rank.png'),
......@@ -219,11 +219,17 @@ onBeforeUnmount(() => {
const showGameRuleHandler = () => {
showGameRule.value = !showGameRule.value;
}
const renderBG = () => {
if (currentView.value === 'loading') {
return `${imageUrls.bg} center/cover`;
}
return `${imageUrls.bg2} center/cover`
}
</script>
<template>
<MobileStage v-if="token" :showGameRule="showGameRule" ref="mobileStageRef"
:background="`${imageUrls.bg2} center/cover`">
<MobileStage v-if="token" :showGameRule="showGameRule" ref="mobileStageRef" :background="`${renderBG()}`">
<template #gameRule>
<div class="rule-container">
<div class="rule-txt-container">
......@@ -237,15 +243,12 @@ const showGameRuleHandler = () => {
</div>
</div>
</template>
<PlayingView :image-urls="imageUrls" :tick="score" :rank="rank" :countdown-interval="countdownInterval"
:is-div-desc-visible="isDivDescVisible" @touch="touchHandler" />
<!-- <LoadingView v-if="currentView === 'loading'" :image-urls="imageUrls" :user-join-status="userJoinStatus"
<LoadingView v-if="currentView === 'loading'" :image-urls="imageUrls" :user-join-status="userJoinStatus"
@touchGameRule="showGameRuleHandler" />
<PlayingView v-else-if="currentView === 'playing'" :image-urls="imageUrls" :tick="score" :rank="rank"
:current-gu="currentGu" :countdown-interval="countdownInterval" :is-div-desc-visible="isDivDescVisible"
@touch="touchHandler" />
:countdown-interval="countdownInterval" :is-div-desc-visible="isDivDescVisible" @touch="touchHandler" />
<ScoreView v-else :image-urls="imageUrls" :rank="rank" :tick="score" @replay="replayGame"
@back="backToWaiting" /> -->
@back="backToWaiting" />
</MobileStage>
<div v-else style="text-align: center; width: 100vw; height: 100vh; line-height: 30; font-size: 20px;">
请使用微信扫码进入游戏
......
frontend-h5/src/pages/game6/views/LoadingView.vue
View file @ b5e67f80
......@@ -69,13 +69,12 @@ onMounted(() => {
.txt-bottom {
position: absolute;
bottom: 100px;
bottom: 130px;
width: 100%;
line-height: 56px;
line-height: 40px;
color: white;
font-size: 36px;
font-size: 28px;
text-align: center;
animation: loading-text-scale 1.2s ease-in-out infinite;
}
.game-stage {
......@@ -168,24 +167,6 @@ onMounted(() => {
transform: translateX(-50%);
}
.txt-loading label {
display: inline-block;
transform-origin: center;
animation: loading-text-scale 1.2s ease-in-out infinite;
}
@keyframes loading-text-scale {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
.loading-gu {
position: absolute;
bottom: 100px;
......
frontend-large/src/commons/player.ts
View file @ b5e67f80
export default interface Player {
active?: boolean;
score?: number;
score?: number | string;
telephone?: string;
userid?: string;
wechat_id?: string;
......
frontend-large/src/composables/useAdminGameSocket.ts
View file @ b5e67f80
......@@ -15,7 +15,6 @@ type AdminGameSocketOptions = {
onRoomState?: (data: any) => void
onRoomJoin?: (data: any) => void
onGameStart?: (data: any) => void | Promise<void>
onGameStartRejected?: (data: any) => void
onRoomRank?: (data: any) => void
onRelogin?: () => void
}
......@@ -46,7 +45,7 @@ export function useAdminGameSocket(options: AdminGameSocketOptions) {
const { passphrase, token, socket_path, client_ns, domain } = $read_socket_storge()
initSocket({
socket_path: `${domain}${socket_path}`,
client_ns: "/ws",
client_ns,
auth: {
userid: token,
validuser: CryptoJS.AES.encrypt(token, passphrase).toString(),
......@@ -59,10 +58,9 @@ export function useAdminGameSocket(options: AdminGameSocketOptions) {
offSocketMessage = onSocketMessage(async (evt, payload: SocketPayload) => {
const { msg, state, data } = payload
if (state === 0) {
if (evt === 'game_start_result' && data === 1) {
options.onGameStartRejected?.(data)
return
}
// if (evt === 'game_start_result' && data === 1) {
// return
// }
if (evt == 'login_result') {
alert(msg)
options.onRelogin?.()
......
frontend-large/src/pages/game1/Game1.vue → frontend-large/src/pages/game1/Game.vue
View file @ b5e67f80
......@@ -17,7 +17,7 @@ const PLAYER_LIMIT = 20
const RANK_LIMIT = 10
const emptyLoadingPlayer = () => ({
score: 0,
score: '-',
telephone: '',
userid: '',
wechat_id: '',
......@@ -26,11 +26,10 @@ const emptyLoadingPlayer = () => ({
})
const emptyRankPlayer = (index: number): Player => ({
active: false,
wechat_id: `empty-${index}`,
nickname: '虚位以待',
avatar: '',
score: 0,
score: '-',
})
const screen = ref<GameScreen>('loading')
......@@ -64,13 +63,12 @@ const updateRankPlayers = (data: any) => {
}
const playerToRankPlayer = (player: any, index: number): Player => ({
active: player?.active ?? false,
telephone: player?.telephone ?? '',
userid: player?.userid ?? '',
wechat_id: player?.wechat_id || `empty-${index}`,
nickname: player?.nickname || '虚位以待',
avatar: player?.avatar || '',
score: Number(player?.score ?? 0),
score: player?.score ?? '-',
})
const seedRankPlayersFromLoading = () => {
......@@ -140,8 +138,6 @@ function handleRoomState(data: any) {
const { startGame, createRoom, backRoom } = useAdminGameSocket({
gameId: 'game1',
// loginRedirectPath: '/game1',
onGameStartRejected: gotoLoading,
onRoomState: handleRoomState,
onRoomJoin: (data) => {
renderPlayers(data)
......@@ -156,6 +152,10 @@ const { startGame, createRoom, backRoom } = useAdminGameSocket({
})
const startGameWithMusic = () => {
if (playerCount.value == 0) {
alert('房间中没有玩家')
return;
}
playGame1Music()
startGame()
}
......
frontend-large/src/pages/game1/views/LoadingView.vue
View file @ b5e67f80
......@@ -38,6 +38,13 @@ const pressStartButton = () => {
const releaseStartButton = () => {
isStartPressed.value = false;
};
const renderAvatar = (item: any | null) => {
if (item && item.avatar) {
return `background: url("${String(item.avatar).replace(/"/g, '\\"')}") center / cover no-repeat;`
}
return `background: ${imageUrls.avatar} center / cover no-repeat;`
}
</script>
<template>
......@@ -57,7 +64,7 @@ const releaseStartButton = () => {
<div v-for="(item, index) in players" :key="item.userid || item.wechat_id || `empty-${index}`">
<div>
<div class="img-avatar-container">
<div class="img-avatar" :style="`background:url('${item.avatar}') center / cover no-repeat;`"></div>
<div class="img-avatar" :style="`${renderAvatar(item.avatar)}`"></div>
</div>
<div class="txt-nickname">{{ $format_str(item.nickname, 12) }}</div>
</div>
......
frontend-large/src/pages/game6/Game.vue 0 → 100644
View file @ b5e67f80
<script setup lang="ts">
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import Loading from './views/LoadingView.vue'
import Rank1 from './views/Rank1View.vue'
import Rank2 from './views/Rank2View.vue'
import { useAdminGameSocket } from '@/composables/useAdminGameSocket'
import type Player from '@/commons/player.ts'
import { playGame1Music } from '@/commons/music'
import { $remove_socket_storage } from '@/commons/utils.ts'
const router = useRouter()
type GameScreen = 'loading' | 'rank1' | 'rank2'
const PLAYER_LIMIT = 20
const RANK_LIMIT = 10
const emptyLoadingPlayer = () => ({
score: '-',
telephone: '',
userid: '',
wechat_id: '',
nickname: '虚位以待',
avatar: '',
})
const emptyRankPlayer = (index: number): Player => ({
wechat_id: `empty-${index}`,
nickname: '虚位以待',
avatar: '',
score: '-',
})
const screen = ref<GameScreen>('loading')
const loadingPlayers = ref<any[]>(Array.from({ length: PLAYER_LIMIT }, emptyLoadingPlayer))
const playerCount = ref(0)
const rankPlayers = ref<Player[]>(Array.from({ length: RANK_LIMIT }, (_, index) => emptyRankPlayer(index)))
const rank1Ref = ref<InstanceType<typeof Rank1> | null>(null)
let isPlayingStartAnimation = false
const confirmRefresh = (event: BeforeUnloadEvent) => {
event.preventDefault()
event.returnValue = ''
}
const renderPlayers = (data: any) => {
const players = Array.isArray(data?.list) ? data.list : []
playerCount.value = Number(data?.count ?? players.length)
loadingPlayers.value = Array.from(
{ length: PLAYER_LIMIT },
(_, index) => players[index] ?? emptyLoadingPlayer(),
)
}
const updateRankPlayers = (data: any) => {
if (!Array.isArray(data)) return
rankPlayers.value = Array.from(
{ length: RANK_LIMIT },
(_, index) => data[index] ?? emptyRankPlayer(index),
)
}
const playerToRankPlayer = (player: any, index: number): Player => ({
telephone: player?.telephone ?? '',
userid: player?.userid ?? '',
wechat_id: player?.wechat_id || `empty-${index}`,
nickname: player?.nickname || '虚位以待',
avatar: player?.avatar || '',
score: player?.score ?? '-',
})
const seedRankPlayersFromLoading = () => {
rankPlayers.value = Array.from(
{ length: RANK_LIMIT },
(_, index) => {
const player = loadingPlayers.value[index]
if (!player?.userid && !player?.wechat_id) {
return emptyRankPlayer(index)
}
return playerToRankPlayer(player, index)
},
)
}
const resetRoundState = () => {
playerCount.value = 0
loadingPlayers.value = Array.from({ length: PLAYER_LIMIT }, emptyLoadingPlayer)
rankPlayers.value = Array.from({ length: RANK_LIMIT }, (_, index) => emptyRankPlayer(index))
isPlayingStartAnimation = false
}
const gotoLoading = (reset = false) => {
if (reset) {
resetRoundState()
}
screen.value = 'loading'
}
const gotoRank1WithIntro = async () => {
if (isPlayingStartAnimation) return
isPlayingStartAnimation = true
seedRankPlayersFromLoading()
screen.value = 'rank1'
await nextTick()
await rank1Ref.value?.startIntro()
screen.value = 'rank2'
isPlayingStartAnimation = false
}
function handleRoomState(data: any) {
if (Array.isArray(data?.list)) {
renderPlayers(data)
}
switch (data?.status) {
case 0:
gotoLoading(true)
createRoom(1)
break
case 1:
gotoLoading()
break
case 2:
seedRankPlayersFromLoading()
screen.value = 'rank1'
break
case 3:
screen.value = 'rank2'
break
}
}
const { startGame, createRoom, backRoom } = useAdminGameSocket({
gameId: 'game6',
onRoomState: handleRoomState,
onRoomJoin: (data) => {
renderPlayers(data)
gotoLoading()
},
onGameStart: gotoRank1WithIntro,
onRoomRank: updateRankPlayers,
onRelogin: async () => {
$remove_socket_storage();
await router.replace('/')
}
})
const startGameWithMusic = () => {
if (playerCount.value == 0) {
alert('房间中没有玩家')
return;
}
playGame1Music()
startGame()
}
const nextRound = () => {
gotoLoading(true)
//重开房间
backRoom(6)
}
const nextRoundWithMusic = () => {
playGame1Music()
nextRound()
}
onMounted(() => {
window.addEventListener('beforeunload', confirmRefresh)
playGame1Music()
})
onUnmounted(() => {
window.removeEventListener('beforeunload', confirmRefresh)
})
</script>
<template>
<Rank1 ref="rank1Ref" :rank-list="rankPlayers" @start="startGameWithMusic" />
<!-- <Loading v-if="screen === 'loading'" :players="loadingPlayers" :player-count="playerCount"
@start="startGameWithMusic" />
<Rank1 v-else-if="screen === 'rank1'" ref="rank1Ref" :rank-list="rankPlayers" @start="startGameWithMusic" />
<Rank2 v-else :rank-list="rankPlayers" @next="nextRoundWithMusic" /> -->
</template>
frontend-large/src/pages/game6/views/LoadingView.vue 0 → 100644
View file @ b5e67f80
<script setup lang="ts">
import { ref } from 'vue'
import { $format_str } from '@/commons/utils.ts';
import DesignStage from '@/components/DesignStage.vue'
import { assetUrl, cssAssetUrl } from '@/commons/assets.ts';
defineProps<{
players: any[];
playerCount: number;
}>();
const emit = defineEmits<{
start: [];
}>();
const imageUrls = {
bg: cssAssetUrl('game6/bg.png'),
logo: cssAssetUrl('game1/logo.png'),
title1: cssAssetUrl('game6/title.png'),
title2: cssAssetUrl('game1/title2.png'),
qrcode: assetUrl('game6/qrcode.png'),
gu: cssAssetUrl('game1/gu.png'),
// bg: cssAssetUrl('game1/bg.png'),
// logo: cssAssetUrl('game1/logo.png'),
// title1: cssAssetUrl('game1/title1.png'),
// title2: cssAssetUrl('game1/title2.png'),
// qrcode: assetUrl('game1/qrcode.png'),
// gu: cssAssetUrl('game1/gu.png'),
imgMole:cssAssetUrl('game6/mole.png'),
imgRabbit:cssAssetUrl('game6/rabbit.png'),
bottomLayers: cssAssetUrl('game1/bottom-layers.png'),
avatarAnimation: cssAssetUrl('avatar_animation.png'),
avatar: cssAssetUrl('avatar.png'),
line: cssAssetUrl('game1/line.png'),
start1: cssAssetUrl('game1/start-1.png'),
start2: cssAssetUrl('game1/start-2.png'),
};
const isStartPressed = ref(false);
const pressStartButton = () => {
isStartPressed.value = true;
emit('start');
};
const releaseStartButton = () => {
isStartPressed.value = false;
};
const renderAvatar = (item: any | null) => {
if (item && item.avatar) {
return `background: url("${String(item.avatar).replace(/"/g, '\\"')}") center / cover no-repeat;`
}
return `background: ${imageUrls.avatar} center / cover no-repeat;`
}
</script>
<template>
<DesignStage>
<div class="bg">
<div class="img-logo"></div>
<div class="img-title1"></div>
<!-- <div class="img-title2"></div> -->
<div class="img-qrcode-container">
<div class="img-qrcode"><img :src="imageUrls.qrcode" /></div>
<div class="txt-qrcode">微信扫码参与</div>
</div>
<div class="img-mole"></div>
<div class="img-rabbit"></div>
<div class="list-container">
<div class="txt-count">当前在线人数 <span>{{ playerCount }}</span></div>
<div class="list-container-left">
<div v-for="(item, index) in players" :key="item.userid || item.wechat_id || `empty-${index}`">
<div>
<div class="img-avatar-container">
<div class="img-avatar" :style="renderAvatar(item)"></div>
</div>
<div class="txt-nickname">{{ $format_str(item.nickname, 12) }}</div>
</div>
</div>
</div>
<div class="list-container-line"></div>
<div class="list-container-right">
<div
class="btn-start"
:class="{ pressed: isStartPressed }"
@pointerdown="pressStartButton"
@pointerup="releaseStartButton"
@pointerleave="releaseStartButton"
@pointercancel="releaseStartButton"
></div>
</div>
</div>
</div>
</DesignStage>
</template>
<style scoped>
.bg {
width: 1920px;
height: 1080px;
background: v-bind('imageUrls.bg') center / cover no-repeat;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.img-logo {
background: v-bind('imageUrls.logo');
background-size: cover;
width: 428px;
height: 77px;
position: absolute;
left: 37px;
top: 82px;
}
.img-title1 {
background: v-bind('imageUrls.title1');
width: 831px;
height: 314px;
margin: 0 auto;
position: relative;
top: 110px;
}
.img-title2 {
background: v-bind('imageUrls.title2');
width: 643px;
height: 140px;
margin: 0 auto;
position: relative;
top: 80px;
}
.img-qrcode-container {
width: 144px;
height: 177px;
position: absolute;
z-index: 1;
top: 40px;
right: 40px;
.img-qrcode {
width: 100%;
height: 144px;
border-radius: 10px;
}
.txt-qrcode {
font-size: 24px;
color: white;
}
}
.img-mole {
background: v-bind('imageUrls.imgMole') center / cover no-repeat;
width: 397px;
height: 301px;
position: absolute;
top: 315px;
left: 150px;
}
.img-rabbit {
background: v-bind('imageUrls.imgRabbit') center / cover no-repeat;
width: 475px;
height: 414px;
position: absolute;
top: 193px;
right: 150px;
}
.list-container {
background: v-bind('imageUrls.bottomLayers');
width: 1800px;
height: 397px;
position: absolute;
left: 60px;
bottom: 60px;
border:3px solid #AA0000;
border-radius: 10px;
.txt-count {
font-size: 36px;
margin-left: 30px;
margin-top: 20px;
color: #AA0000;
font-weight: bold;
>span {
margin-left: 20px;
font-size: 48px;
position: relative;
top: 5px;
}
}
.list-container-left {
float: left;
display: grid;
grid-template-columns: repeat(10, 1fr);
row-gap: 20px;
width: 73%;
margin-top: 30px;
height: 250px;
align-content: center;
.img-avatar-container {
position: relative;
margin: 0 auto;
width: 72px;
height: 72px;
border-radius: 36px;
}
.img-avatar-container::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: v-bind('imageUrls.avatarAnimation');
animation: avatar-rotate 10s linear infinite;
}
.img-avatar {
position: relative;
top: 6px;
z-index: 1;
margin: 0 auto;
width: 60px;
height: 60px;
border-radius: 30px;
/* background: v-bind('imageUrls.avatar'); */
}
.txt-nickname {
color: #666;
font-size: 20px;
text-align: center;
}
}
.list-container-line {
float: left;
width: 1px;
height: 281px;
margin-left: 50px;
background: v-bind('imageUrls.line') center no-repeat;
}
.list-container-right {
float: left;
.btn-start {
width: 316px;
height: 105px;
margin-left: 60px;
margin-top: 80px;
background: v-bind('imageUrls.start1');
cursor: pointer;
}
.btn-start.pressed {
background: v-bind('imageUrls.start2');
}
}
}
</style>
frontend-large/src/pages/game6/views/Rank1View.vue 0 → 100644
View file @ b5e67f80
<script setup lang="ts">
import { ref, watch } from 'vue'
import DesignStage from '../../../components/DesignStage.vue'
import type Player from '../../../commons/player.ts'
import { $is_run_local } from '@/commons/utils.ts';
import { assetUrl, cssAssetUrl } from '@/commons/assets.ts';
const props = defineProps<{
rankList: Player[];
}>();
const emit = defineEmits<{
start: [];
}>();
const RANK_LIMIT = 10;
const START_COUNTDOWN_SECONDS = 3;
const GU_FRAME_DURATION = 300;
const GU_LOOP_DELAY = 1000;
const designStage = ref<InstanceType<typeof DesignStage> | null>(null);
const rankEffects = ref<Record<string, "up" | "down" | "new">>({});
const guFrameIndex = ref(0);
const guBurstVisible = ref(false);
const guBurstKey = ref(0);
let guFramesReady: Promise<void> | undefined;
let guTimer: ReturnType<typeof setTimeout> | undefined;
let guBurstTimer: ReturnType<typeof setTimeout> | undefined;
const loadGuFrames = (dir: string) => Array.from(
{ length: 10 },
(_, index) => assetUrl(`${dir}/${String(index + 1).padStart(2, '0')}.png`),
);
const guFrames = [
loadGuFrames('game1/gu'),
loadGuFrames('game1/gu2'),
];
const imageUrls = {
bg: cssAssetUrl('game6/bg2.png'),
logo: cssAssetUrl('game1/logo.png'),
title: cssAssetUrl('game6/title2.png'),
fireworks: cssAssetUrl('game1/fireworks.png'),
// fireworks: cssAssetUrl('game1/fireworks.png'),
// titleRank: cssAssetUrl('game1/title-rank.png'),
rankNo4: cssAssetUrl('game6/no4.png'),
rankNo1: cssAssetUrl('game6/no1.png'),
rankNo2: cssAssetUrl('game6/no2.png'),
rankNo3: cssAssetUrl('game6/no3.png'),
// rankIcon: cssAssetUrl('game1/no-icon.png'),
// rankNo1Icon: cssAssetUrl('game1/no1-icon.png'),
// rankNo2Icon: cssAssetUrl('game1/no2-icon.png'),
// rankNo3Icon: cssAssetUrl('game1/no3-icon.png'),
avatar: assetUrl('avatar.png'),
mole2: cssAssetUrl('game6/mole2.png'),
rankContainer: cssAssetUrl('game6/rank-container.png'),
};
const emptyPlayer = (index: number): Player => ({
wechat_id: `empty-${index}`,
nickname: '-',
avatar: '',
score: 0,
});
const list = ref<Player[]>(Array.from({ length: RANK_LIMIT }, (_, index) => emptyPlayer(index)));
const playerKey = (player: Player, index = 0) => player.userid || player.wechat_id || `empty-${index}`;
const mockRankStep = ref(0);
const makeMockPlayer = (id: number, score: number): Player => ({
wechat_id: `mock-${id}`,
nickname: `Player ${id}`,
avatar: '',
score,
});
const mockRankRounds: Player[][] = [
[
makeMockPlayer(1, 980),
makeMockPlayer(2, 900),
makeMockPlayer(3, 860),
makeMockPlayer(4, 820),
makeMockPlayer(5, 780),
makeMockPlayer(6, 720),
makeMockPlayer(7, 680),
makeMockPlayer(8, 640),
makeMockPlayer(9, 600),
makeMockPlayer(10, 560),
],
[
makeMockPlayer(4, 1040),
makeMockPlayer(1, 1010),
makeMockPlayer(7, 960),
makeMockPlayer(2, 940),
makeMockPlayer(11, 880),
makeMockPlayer(3, 850),
makeMockPlayer(5, 830),
makeMockPlayer(8, 790),
makeMockPlayer(6, 760),
makeMockPlayer(10, 700),
],
[
makeMockPlayer(7, 1180),
makeMockPlayer(11, 1090),
makeMockPlayer(4, 1060),
makeMockPlayer(12, 1000),
makeMockPlayer(1, 980),
makeMockPlayer(8, 930),
makeMockPlayer(2, 890),
makeMockPlayer(5, 850),
makeMockPlayer(13, 810),
makeMockPlayer(3, 780),
],
];
const updateRankList = (rankList: Player[]) => {
const oldRanks = new Map(list.value.map((player, index) => [playerKey(player, index), index]));
const next = Array.from({ length: RANK_LIMIT }, (_, index) => rankList[index] ?? emptyPlayer(index));
const effects: Record<string, "up" | "down" | "new"> = {};
next.forEach((player, index) => {
const key = playerKey(player, index);
if (!key || key.startsWith("empty-")) return;
const oldIndex = oldRanks.get(key);
if (oldIndex === undefined) effects[key] = "new";
else if (oldIndex > index) effects[key] = "up";
else if (oldIndex < index) effects[key] = "down";
});
list.value = next;
rankEffects.value = {};
requestAnimationFrame(() => {
rankEffects.value = effects;
});
};
watch(
() => props.rankList,
(rankList) => updateRankList(rankList),
{ immediate: true, deep: true },
);
const playMockRankAnimation = () => {
if ($is_run_local()) {
updateRankList(mockRankRounds[mockRankStep.value] ?? mockRankRounds[0] ?? []);
mockRankStep.value = (mockRankStep.value + 1) % mockRankRounds.length;
}
};
const startGame = () => {
if ($is_run_local()) {
emit('start');
}
};
const stopPlayerGu = () => {
if (guTimer) {
clearTimeout(guTimer);
guTimer = undefined;
}
if (guBurstTimer) {
clearTimeout(guBurstTimer);
guBurstTimer = undefined;
}
guBurstVisible.value = false;
guFrameIndex.value = 0;
}
const preloadGuFrames = () => {
if (!guFramesReady) {
guFramesReady = Promise.all(guFrames.flat().map((src) => {
const img = new Image();
img.src = src;
return img.decode
? img.decode().catch(() => undefined)
: new Promise<void>((resolve) => {
img.onload = () => resolve();
img.onerror = () => resolve();
});
})).then(() => undefined);
}
return guFramesReady;
}
const playGuLoopDelayAnimation = () => {
if (guBurstTimer) {
clearTimeout(guBurstTimer);
guBurstTimer = undefined;
}
guBurstVisible.value = false;
requestAnimationFrame(() => {
guBurstKey.value += 1;
guBurstVisible.value = true;
guBurstTimer = setTimeout(() => {
guBurstVisible.value = false;
guBurstTimer = undefined;
}, GU_LOOP_DELAY);
});
}
const playerGu = async () => {
stopPlayerGu();
const frameCount = Math.min(...guFrames.map((frames) => frames.length));
if (frameCount <= 0) return;
await preloadGuFrames();
let frameIndex = 0;
const tick = () => {
guFrameIndex.value = frameIndex;
if (frameIndex >= frameCount - 1) {
frameIndex = 0;
playGuLoopDelayAnimation();
guTimer = setTimeout(tick, GU_LOOP_DELAY);
return;
}
frameIndex += 1;
guTimer = setTimeout(tick, GU_FRAME_DURATION);
}
tick();
}
const startIntro = async () => {
playerGu();
await designStage.value?.startCountdown(START_COUNTDOWN_SECONDS, 60);
stopPlayerGu();
};
defineExpose({
startIntro,
});
const avatarStyle = (item: Player) => {
const avatar = item.avatar || imageUrls.avatar
return {
backgroundImage: `url("${avatar}")`,
}
}
const rankIcon = (index: number) => {
const icons = [
imageUrls.rankNo1,
imageUrls.rankNo2,
imageUrls.rankNo3,
];
let w = 42;
let h = 47;
let l = -20;
let t = -20;
if (index <= 2) {
w = 65;
h = 48;
l = -30;
t = -20;
}
return {
background: `${icons[index] ?? imageUrls.rankNo4} center / cover no-repeat`,
width: w + 'px',
height: h + 'px',
left: l + 'px',
top: t + 'px'
};
}
</script>
<template>
<DesignStage ref="designStage">
<div class="bg">
<div class="img-logo"></div>
<div class="img-title"></div>
<div class="img-mole"></div>
<div class="rank-container">
<div v-for="(item, index) in list">
<div>
<div class="rank-icon" :style="rankIcon(index)"></div>
<div class="rank-item">{{ index }}</div>
</div>
</div>
</div>
</div>
</DesignStage>
</template>
<style scoped>
.bg {
width: 1920px;
height: 1080px;
background: v-bind('imageUrls.bg') center / cover no-repeat;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.img-logo {
background: v-bind('imageUrls.logo');
background-size: cover;
width: 428px;
height: 77px;
position: absolute;
left: 37px;
top: 82px;
}
.img-title {
background: v-bind('imageUrls.title') center / cover no-repeat;
width: 675px;
height: 281px;
margin: 0 auto;
margin-top: 37px;
}
.img-mole {
background: v-bind('imageUrls.mole2') center / cover no-repeat;
width: 189px;
height: 228px;
position: absolute;
left: 144px;
top: 141px;
}
.rank-container {
background: v-bind('imageUrls.rankContainer') center / cover no-repeat;
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
align-items: center;
column-gap: 42px;
box-sizing: border-box;
padding: 42px 42px;
width: 1832px;
height: 244px;
position: absolute;
left: 44px;
top: 348px;
>div {
box-sizing: border-box;
text-align: center;
width: 100%;
height: 100%;
>div {
box-sizing: border-box;
width: 100%;
height: 100%;
background: #A10A06;
border-radius: 5px;
position: relative;
.rank-icon {
position: absolute;
}
}
}
}
.img-gu-group {
.img-gu {
width: 400px;
height: 400px;
transform: scale(1.6);
position: absolute;
top: 400px;
}
.img-gu:nth-child(1) {
left: 200px;
}
.img-gu:nth-child(2) {
right: 200px;
}
.img-gu {
.gu-frame {
position: absolute;
inset: 0;
opacity: 0;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
will-change: opacity;
}
.gu-frame.active {
opacity: 1;
}
.gu-burst {
width: 200px;
height: 200px;
position: absolute;
right: 80px;
top: 30px;
opacity: 0;
transform: scale(0.6);
transform-origin: center center;
background: v-bind('imageUrls.fireworks') center / cover no-repeat;
pointer-events: none;
&.active {
animation: gu-burst-expand 1s ease-out both;
}
}
}
}
.rank-move {
transition: transform 0.45s ease;
}
.rank-enter-active,
.rank-leave-active {
transition: opacity 0.25s ease, transform 0.25s ease;
}
.rank-leave-active {
position: absolute;
left: 17px;
}
.rank-enter-from,
.rank-leave-to {
opacity: 0;
transform: translateY(90px);
}
.rank-item.up,
.rank-item.new {
animation: rank-up-flash 0.8s ease;
}
.rank-item.down {
animation: rank-down-flash 0.8s ease;
}
</style>
frontend-large/src/pages/game6/views/Rank2View.vue 0 → 100644
View file @ b5e67f80
<script setup lang="ts">
import { ref, watch } from 'vue'
import DesignStage from '../../../components/DesignStage.vue'
import type Player from '../../../commons/player.ts'
import { cssAssetUrl } from '@/commons/assets.ts';
const props = defineProps<{
rankList: Player[];
}>();
const emit = defineEmits<{
next: [];
}>();
const FINAL_RANK_LIMIT = 10;
const imageUrls = {
bg: cssAssetUrl('game1/bg.png'),
logo: cssAssetUrl('game1/logo.png'),
title: cssAssetUrl('game1/title3.png'),
title2: cssAssetUrl('game1/title4.png'),
podium: cssAssetUrl('game1/podium.png'),
fireworks: cssAssetUrl('game1/fireworks.png'),
avatar: cssAssetUrl('avatar.png'),
guan1: cssAssetUrl('game1/guan1.png'),
pai1: cssAssetUrl('game1/pai1.png'),
guan2: cssAssetUrl('game1/guan2.png'),
pai2: cssAssetUrl('game1/pai2.png'),
guan3: cssAssetUrl('game1/guan3.png'),
pai3: cssAssetUrl('game1/pai3.png'),
rankIcon: cssAssetUrl('game1/no-icon.png'),
avatarAnimation: cssAssetUrl('avatar_animation.png'),
next: cssAssetUrl('game1/next-1.png'),
};
const emptyPlayer = (index: number): Player => ({
active: false,
wechat_id: `empty-${index}`,
nickname: '虚位以待',
avatar: '',
score: 0,
});
const list = ref<Player[]>(Array.from({ length: FINAL_RANK_LIMIT }, (_, index) => emptyPlayer(index)));
const updateFinalRank = (rankList: Player[]) => {
list.value = Array.from(
{ length: FINAL_RANK_LIMIT },
(_, index) => rankList[index] ?? emptyPlayer(index),
);
};
watch(
() => props.rankList,
(rankList) => updateFinalRank(rankList),
{ immediate: true, deep: true },
);
const renderAvatar = (item: any | null) => {
if (item && item.avatar) {
return `background: url('${item.avatar}') center / cover no-repeat;`
}
return `background: v-bind('imageUrls.avatar') center / cover no-repeat;`
}
</script>
<template>
<DesignStage>
<div class="bg">
<div class="img-logo"></div>
<div class="img-title"></div>
<div class="img-title2"></div>
<div class="podium">
<div class="rank-no1">
<div class="gu-burst"></div>
<div class="avatar" :style="`${renderAvatar(list[0])}`">
</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" :style="`${renderAvatar(list[1])}`">
</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" :style="`${renderAvatar(list[2])}`">
</div>
<div class="nickname">{{ list[2]?.nickname }}</div>
<div class="guan"></div>
<div class="pai"></div>
</div>
</div>
<div class="rank-container">
<div v-for="(item, index) in list.slice(3)" :key="item.userid || item.wechat_id || `rank-${index}`">
<div class="no-icon">{{ index + 4 }}</div>
<div>
<div class="img-avatar-container">
<div class="img-avatar"></div>
</div>
<div class="txt-nickname">{{ item.nickname }}</div>
</div>
</div>
</div>
<div class="btn-next" @click="emit('next')"></div>
</div>
</DesignStage>
</template>
<style scoped>
.bg {
width: 1920px;
height: 1080px;
background: v-bind('imageUrls.bg') center / cover no-repeat;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.img-logo {
background: v-bind('imageUrls.logo');
background-size: cover;
width: 428px;
height: 77px;
position: absolute;
left: 37px;
top: 82px;
}
.img-title {
background: v-bind('imageUrls.title');
width: 967px;
height: 122px;
margin: 0 auto;
margin-top: 37px;
}
.img-title2 {
background: v-bind('imageUrls.title2') no-repeat center;
width: 457px;
height: 57px;
margin: 0 auto;
margin-top: 37px;
}
.podium {
background: v-bind('imageUrls.podium') no-repeat center;
width: 1347px;
height: 269px;
position: absolute;
top: 427px;
left: 287px;
.gu-burst {
width: 200px;
height: 200px;
position: absolute;
z-index: 1;
border-radius: 50%;
opacity: 1;
transform: scale(0.6);
transform-origin: center center;
background: v-bind('imageUrls.fireworks') center / cover no-repeat;
pointer-events: none;
animation: gu-burst-expand 1.2s ease-out infinite;
}
.rank-no1 {
position: relative;
.gu-burst {
left: 580px;
top: -200px;
}
.avatar {
/* background: v-bind('imageUrls.avatar') center / cover no-repeat; */
width: 120px;
height: 120px;
border-radius: 60px;
position: absolute;
left: 610px;
top: -136px;
}
.nickname {
width: 167px;
height: 46px;
background: #FFCF44;
color: white;
text-align: center;
line-height: 46px;
position: absolute;
left: 590px;
top: -25px;
z-index: 1;
border-radius: 23px;
}
.guan {
background: v-bind('imageUrls.guan1');
width: 64px;
height: 64px;
position: absolute;
left: 580px;
top: -153px
}
.pai {
background: v-bind('imageUrls.pai1');
width: 212px;
height: 200px;
position: absolute;
left: 570px;
top: 40px;
}
}
.rank-no2 {
position: relative;
.gu-burst {
left: 140px;
top: -170px;
}
.avatar {
background: v-bind('imageUrls.avatar') center / cover no-repeat;
width: 120px;
height: 120px;
border-radius: 60px;
position: absolute;
left: 180px;
top: -110px;
}
.nickname {
width: 167px;
height: 46px;
background: #CA9600;
color: white;
text-align: center;
line-height: 46px;
position: absolute;
left: 157px;
top: 2px;
z-index: 1;
border-radius: 23px;
}
.guan {
background: v-bind('imageUrls.guan2') no-repeat center;
width: 96px;
height: 96px;
position: absolute;
left: 134px;
top: -144px;
}
.pai {
background: v-bind('imageUrls.pai2') no-repeat center;
width: 212px;
height: 200px;
position: absolute;
left: 140px;
top: 50px;
}
}
.rank-no3 {
position: relative;
.gu-burst {
left: 1020px;
top: -170px;
}
.avatar {
background: v-bind('imageUrls.avatar') center / cover no-repeat;
width: 120px;
height: 120px;
border-radius: 60px;
position: absolute;
left: 1046px;
top: -110px;
}
.nickname {
width: 167px;
height: 46px;
background: #E2E2E2;
color: #AFAFAF;
text-align: center;
line-height: 46px;
position: absolute;
left: 1028px;
top: 2px;
z-index: 1;
border-radius: 23px;
}
.guan {
background: v-bind('imageUrls.guan3') no-repeat center;
width: 96px;
height: 96px;
position: absolute;
left: 1003px;
top: -146px;
}
.pai {
background: v-bind('imageUrls.pai3') no-repeat center;
width: 212px;
height: 200px;
position: absolute;
right: 130px;
top: 50px;
}
}
}
.rank-container {
display: flex;
align-items: center;
width: 1270px;
height: 115px;
position: absolute;
bottom: 243px;
left: 325px;
>div {
flex: 1;
display: grid;
width: 100px;
height: 100%;
.no-icon {
background: v-bind('imageUrls.rankIcon') no-repeat center;
width: 40px;
height: 40px;
position: absolute;
text-align: center;
line-height: 40px;
color: white;
font-weight: bold;
}
.img-avatar-container {
position: relative;
margin: 0 auto;
margin-top: 10px;
width: 72px;
height: 72px;
border-radius: 36px;
}
.img-avatar-container::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: v-bind('imageUrls.avatarAnimation');
animation: avatar-rotate 10s linear infinite;
}
.img-avatar {
position: relative;
top: 6px;
z-index: 1;
margin: 0 auto;
width: 60px;
height: 60px;
border-radius: 30px;
background: v-bind('imageUrls.avatar');
}
.txt-nickname {
color: white;
font-size: 20px;
text-align: center;
}
}
}
.btn-next {
position: absolute;
bottom: 100px;
left: 820px;
width: 316px;
height: 105px;
cursor: pointer;
background: v-bind('imageUrls.next') center / cover no-repeat;
}
</style>
frontend-large/src/router/index.ts
View file @ b5e67f80
import { createRouter, createWebHashHistory } from 'vue-router'
import { $read } from '@/commons/utils'
import Login from '@/pages/Login.vue'
import Game1 from '@/pages/game1/Game1.vue'
import Game1 from '@/pages/game1/Game.vue'
import Game6 from '@/pages/game6/Game.vue'
const router = createRouter({
history: createWebHashHistory(),
......@@ -23,6 +24,14 @@ const router = createRouter({
requiresAuth: true,
},
},
{
path: '/game6',
name: 'Game6',
component: Game6,
meta: {
requiresAuth: true,
},
},
// {
// path: '/:pathMatch(.*)*',
// redirect: '/',
......
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