Skip to content

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

feat: 提交

parent 4a6831ac
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 406 additions and 205 deletions
backend/src/protocols/socket_io.rs
View file @ 3053be55
This diff is collapsed.
frontend-h5/src/pages/game1/views/PlayingView.vue
View file @ 3053be55
......@@ -23,7 +23,7 @@ defineEmits<{
</Transition>
<div class="img-logo"></div>
<div class="play-content">
<div>当前击鼓次数</div>
<div>当前击鼓积分</div>
<div>{{ tick }}</div>
<div>当前排名: &nbsp;第&nbsp;<label>{{ rank }}</label>&nbsp;名</div>
</div>
......
frontend-h5/src/pages/game1/views/ScoreView.vue
View file @ 3053be55
......@@ -31,7 +31,7 @@ onMounted(() => {
<div class="score-content">
<div>{{ nickname }}</div>
<div>您的成绩</div>
<div>击鼓次数(次)</div>
<div>击鼓积分</div>
<div>{{ tick }}</div>
<div>最终排名</div>
<div>第<label>{{ rank }}</label>名</div>
......
frontend-h5/src/pages/game6/views/ScoreView.vue
View file @ 3053be55
......@@ -25,7 +25,7 @@ onMounted(() => {
<div class="h5-page game-stage">
<div class="img-logo"></div>
<div class="bg-bottom"></div>
<div class="img-score">
<!-- <div class="img-score">
<div class="score-avatar"
:style="`background: url(${avatar});border-radius:66px;width:132px;height:132px;`"></div>
<div class="score-content">
......@@ -40,7 +40,7 @@ onMounted(() => {
<div class="btn-group">
<div class="btn-replay" @click="$emit('replay')"></div>
<div class="btn-back" @click="$emit('back')"></div>
</div>
</div> -->
</div>
</template>
......@@ -58,7 +58,7 @@ onMounted(() => {
left: var(--stage-viewport-left, 0);
width: var(--stage-viewport-width, 750px);
height: 479px;
background: v-bind('imageUrls.bg2') center/cover;
background: v-bind('imageUrls.bg') center/cover;
opacity: 0.6;
}
......@@ -72,96 +72,4 @@ onMounted(() => {
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;
}
.btn-group {
position: absolute;
top: 1320px;
left: 50%;
display: flex;
gap: 40px;
transform: translateX(-50%);
}
.btn-replay,
.btn-back {
width: 315px;
height: 100px;
}
.btn-replay {
background: v-bind('imageUrls.replay') center/cover;
}
.btn-back {
background: v-bind('imageUrls.back') center/cover;
}
</style>
frontend-large/index.html
View file @ 3053be55
......@@ -5,7 +5,6 @@
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小游戏-大屏</title>
<style>body{background: #FA6047;}</style>
</head>
<body>
<div id="app"></div>
......
frontend-large/src/components/DesignStage.vue
View file @ 3053be55
......@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<{
width: 1920,
height: 1080,
mode: 'contain',
background: '#FA6047',
// background: '#FA6047',
})
const scale = ref(1)
......
frontend-large/src/pages/Login.vue
View file @ 3053be55
......@@ -2,8 +2,12 @@
import { $save } from '@/commons/utils.ts';
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import DesignStage from '@/components/DesignStage.vue'
import { playGame1Music } from '@/commons/music'
// import { playGame1Music } from '@/commons/music'
const emit = defineEmits<{
loginSuccess: []
}>()
const router = useRouter()
const username = ref('')
const password = ref('')
......@@ -28,7 +32,7 @@ async function login() {
}
const loginHandler = async () => {
playGame1Music()
// playGame1Music()
const { state, msg, data } = await login()
if (state === 0) {
......@@ -38,45 +42,148 @@ const loginHandler = async () => {
for (let i in data) {
$save(i, data[i]);
}
await router.replace('/game1')
emit('loginSuccess');
}
onMounted(() => {
playGame1Music()
// playGame1Music()
})
</script>
<template>
<DesignStage>
<form>
<table>
<tbody>
<tr>
<td>用户名</td>
<td><input v-model="username" type="text" /></td>
</tr>
<tr>
<td>密码</td>
<td><input v-model="password" type="password" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="登录" @click="loginHandler" />
</td>
</tr>
</tbody>
</table>
<div class="login-page">
<form class="login-panel" @submit.prevent="loginHandler">
<div class="panel-header">
<h1>管理登录</h1>
</div>
<label class="field">
<span>用户名</span>
<input v-model="username" type="text" autocomplete="username" placeholder="请输入用户名" />
</label>
<label class="field">
<span>密码</span>
<input v-model="password" type="password" autocomplete="current-password" placeholder="请输入密码" />
</label>
<button class="login-button" type="submit">登录</button>
</form>
</DesignStage>
</div>
</template>
<style scoped>
table {
.login-page {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
transform: scale(3);
z-index: 1;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: rgba(0, 0, 0, 0.8);
}
.login-panel {
box-sizing: border-box;
width: 420px;
padding: 42px 44px 38px;
position: relative;
z-index: 1;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;
background: rgba(0, 0, 0, 0.42);
backdrop-filter: blur(8px);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
color: #fff;
}
.panel-header {
margin-bottom: 34px;
text-align: center;
}
h1 {
margin: 0;
font-size: 34px;
line-height: 1.2;
font-weight: 800;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}
.field {
display: block;
margin-bottom: 20px;
}
.field span {
display: block;
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.88);
font-size: 15px;
font-weight: 700;
}
.field input {
box-sizing: border-box;
width: 100%;
height: 52px;
padding: 0 16px;
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: 12px;
outline: none;
background: rgba(255, 255, 255, 0.84);
color: #17304f;
font-size: 16px;
font-weight: 600;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.field input::placeholder {
color: rgba(23, 48, 79, 0.48);
}
.field input:focus {
border-color: rgba(255, 223, 158, 0.95);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 0 0 4px rgba(255, 223, 158, 0.22);
}
.login-button {
width: 100%;
height: 54px;
margin-top: 10px;
border: 0;
border-radius: 12px;
cursor: pointer;
background: #ffdf9e;
color: #7d1f00;
font-size: 18px;
font-weight: 800;
box-shadow: 0 12px 28px rgba(125, 31, 0, 0.24);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.login-button:hover {
transform: translateY(-2px);
background: #ffe8b8;
box-shadow: 0 16px 34px rgba(125, 31, 0, 0.3);
}
.login-button:active {
transform: translateY(0);
}
@media (max-width: 520px) {
.login-panel {
width: calc(100% - 32px);
padding: 34px 24px 30px;
}
h1 {
font-size: 30px;
}
}
</style>
frontend-large/src/pages/Main.vue
View file @ 3053be55
<script setup lang="ts">
import { cssAssetUrl } from '@/commons/assets.ts';
import { $read } from '@/commons/utils';
import router from '@/router';
import { ref } from 'vue';
import Login from './Login.vue';
const imageUrls = {
bg1: cssAssetUrl('main-bg1.png'),
logo: cssAssetUrl('game1/logo.png'),
title1: cssAssetUrl('main-title.png'),
}
const list = ref(['击鼓齐福', '聚宝接福',
'马上有福', '策马迎福', '圈彩纳福', '福运当头'
])
const show_login = ref(false);
const item_index = ref(0);
const gameHandler = async (index: number) => {
item_index.value = index;
let token = $read('token', '')
if (!token) {
//需要登录
show_login.value = true;
return;
}
await router.replace(`/game${index + 1}`);
}
const loginSuccessHandler = () => {
show_login.value = false;
gameHandler(item_index.value);
}
</script>
<template>
<Login v-if="show_login" @loginSuccess="loginSuccessHandler" />
<div class="bg">
<div class="img-logo"></div>
<div class="img-title1"></div>
<div class="rule-container">
<div class="rule-title">游戏规则</div>
<div class="rule-text">
扫码即玩，大屏实时同步。每局结束大屏公布前10名。主持人邀请获奖用户，凭获奖界面作为凭证，上台领奖。，核对后发放实物奖品。奖品不折现、不替换，逾期作废。
<div>
<div class="rule-title">游戏规则</div>
<div class="rule-text">
扫码即玩，大屏实时同步。每局结束大屏公布前10名。主持人邀请获奖用户，凭获奖界面作为凭证，上台领奖。，核对后发放实物奖品。奖品不折现、不替换，逾期作废。
</div>
</div>
</div>
<div class="game-container">
<div v-for="item, index in list" @click="gameHandler(index)">
<div class="card">
<div class="img">
<div></div>
</div>
<div class="btn">{{ item }}</div>
</div>
</div>
</div>
</div>
......@@ -30,62 +67,119 @@ const imageUrls = {
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-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') center / cover no-repeat;
width: 1024px;
height: 143px;
margin: 0 auto;
position: relative;
top: 50px;
}
.img-title1 {
background: v-bind('imageUrls.title1') center / cover no-repeat;
width: 1024px;
height: 143px;
margin: 0 auto;
position: relative;
top: 50px;
}
.rule-container {
box-sizing: border-box;
width: 638px;
min-height: 162px;
border-radius: 12px;
background:
linear-gradient(90deg, rgba(124, 77, 28, 0.74), rgba(136, 122, 76, 0.72)),
rgba(124, 91, 48, 0.52);
backdrop-filter: blur(18px) saturate(0.9);
-webkit-backdrop-filter: blur(18px) saturate(0.9);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.08);
color: white;
padding: 27px 34px 24px;
position: absolute;
left: 0;
top: 0;
font-weight: 700;
text-shadow:
0 2px 0 rgba(0, 0, 0, 0.65),
1px 0 0 rgba(0, 0, 0, 0.45),
-1px 0 0 rgba(0, 0, 0, 0.45),
0 -1px 0 rgba(0, 0, 0, 0.45);
}
.rule-container {
box-sizing: border-box;
width: 638px;
min-height: 162px;
border-radius: 12px;
color: white;
position: absolute;
left: 50%;
top: 341px;
transform: translateX(-50%);
font-weight: 700;
.rule-title {
margin-bottom: 12px;
font-size: 22px;
line-height: 1.2;
text-align: center;
}
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
>div {
padding: 27px 34px 24px;
background: rgba(0, 0, 0, 0.15);
border-radius: 12px;
}
.rule-title {
margin-bottom: 12px;
font-size: 22px;
line-height: 1.2;
text-align: center;
}
.rule-text {
font-size: 16px;
line-height: 1.58;
}
}
.game-container {
display: flex;
justify-content: space-between;
flex-direction: row;
width: 1220px;
height: 250px;
position: absolute;
left: 50%;
bottom: 250px;
transform: translateX(-50%);
.card {
padding: 10px;
cursor: pointer;
.img {
width: 150px;
height: 150px;
background: white;
border-radius: 20px;
position: relative;
transition: transform 0.2s ease 0.1s;
>div {
width: calc(100% - 20px);
height: calc(100% - 20px);
border: 1px solid red;
border-radius: 20px;
position: absolute;
left: 10px;
top: 10px;
}
}
.btn {
width: 150px;
height: 56px;
line-height: 56px;
background: #FFDF9E;
text-align: center;
color: #7D1F00;
font-weight: bold;
border-radius: 15px;
margin-top: 20px;
}
&:hover .img {
transform: scale(1.1);
}
}
}
.rule-text {
font-size: 16px;
line-height: 1.58;
}
</style>
frontend-large/src/pages/game1/Game.vue
View file @ 3053be55
......@@ -148,6 +148,7 @@ const { startGame, createRoom, backRoom } = useAdminGameSocket({
onRelogin: async () => {
$remove_socket_storage();
await router.replace('/')
debugger
}
})
......
frontend-large/src/router/index.ts
View file @ 3053be55
import { createRouter, createWebHashHistory } from 'vue-router'
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'
......@@ -19,11 +18,6 @@ const router = createRouter({
component: Main,
},
{
path: '/login',
name: 'Login',
component: Login,
},
{
path: '/game1',
name: 'Game1',
component: Game1,
......@@ -58,7 +52,7 @@ router.beforeEach((to) => {
const token = $read('token', '')
if (to.meta.requiresAuth && !token) {
return '/login'
return '/'
}
return true
......
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