feat: 添加射箭声音
This commit is contained in:
492
src/App.vue
492
src/App.vue
@@ -1,256 +1,292 @@
|
||||
<script setup>
|
||||
import { watch } from "vue";
|
||||
import { onShow, onHide } from "@dcloudio/uni-app";
|
||||
import websocket from "@/websocket";
|
||||
import { getDeviceBatteryAPI } from "@/apis";
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
const store = useStore();
|
||||
const { user } = storeToRefs(store);
|
||||
const { updateUser, updateOnline } = store;
|
||||
import {
|
||||
watch
|
||||
} from "vue";
|
||||
import {
|
||||
onShow,
|
||||
onHide
|
||||
} from "@dcloudio/uni-app";
|
||||
import websocket from "@/websocket";
|
||||
import {
|
||||
getDeviceBatteryAPI
|
||||
} from "@/apis";
|
||||
import useStore from "@/store";
|
||||
import {
|
||||
storeToRefs
|
||||
} from "pinia";
|
||||
import audioManager from "./audioManager";
|
||||
const store = useStore();
|
||||
const {
|
||||
user
|
||||
} = storeToRefs(store);
|
||||
const {
|
||||
updateUser,
|
||||
updateOnline
|
||||
} = store;
|
||||
|
||||
watch(
|
||||
() => user.value.id,
|
||||
(newVal) => {
|
||||
const token = uni.getStorageSync(
|
||||
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
|
||||
);
|
||||
if (newVal && token) {
|
||||
websocket.createWebSocket(token, (content) => {
|
||||
uni.$emit("socket-inbox", content);
|
||||
});
|
||||
}
|
||||
if (!newVal) {
|
||||
websocket.closeWebSocket();
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false, // 如果 user 是一个对象或数组，建议开启
|
||||
immediate: false, // 若想在初始化时立即执行一次回调，可开启。
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => user.value.id,
|
||||
(newVal) => {
|
||||
const token = uni.getStorageSync(
|
||||
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
|
||||
);
|
||||
if (newVal && token) {
|
||||
websocket.createWebSocket(token, onShootWsMsg);
|
||||
}
|
||||
if (!newVal) {
|
||||
websocket.closeWebSocket();
|
||||
}
|
||||
}, {
|
||||
deep: false, // 如果 user 是一个对象或数组，建议开启
|
||||
immediate: false, // 若想在初始化时立即执行一次回调，可开启。
|
||||
}
|
||||
);
|
||||
|
||||
function emitUpdateUser(value) {
|
||||
updateUser(value);
|
||||
}
|
||||
function emitUpdateUser(value) {
|
||||
updateUser(value);
|
||||
}
|
||||
|
||||
async function emitUpdateOnline() {
|
||||
const data = await getDeviceBatteryAPI();
|
||||
updateOnline(data.online);
|
||||
}
|
||||
async function emitUpdateOnline() {
|
||||
const data = await getDeviceBatteryAPI();
|
||||
updateOnline(data.online);
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
uni.$on("update-user", emitUpdateUser);
|
||||
uni.$on("update-online", emitUpdateOnline);
|
||||
const token = uni.getStorageSync(
|
||||
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
|
||||
);
|
||||
if (user.value.id && token) {
|
||||
console.log("回到前台，重新连接 websocket");
|
||||
websocket.createWebSocket(token, (content) => {
|
||||
uni.$emit("socket-inbox", content);
|
||||
});
|
||||
}
|
||||
});
|
||||
function onDeviceShoot() {
|
||||
audioManager.play("射箭声音")
|
||||
}
|
||||
|
||||
onHide(() => {
|
||||
uni.$off("update-user", emitUpdateUser);
|
||||
uni.$off("update-online", emitUpdateOnline);
|
||||
websocket.closeWebSocket();
|
||||
});
|
||||
function onShootWsMsg(content) {
|
||||
if(content.type === 'shoot-trigger'){
|
||||
onDeviceShoot()
|
||||
}
|
||||
uni.$emit("socket-inbox", content);
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
uni.$on("update-user", emitUpdateUser);
|
||||
uni.$on("update-online", emitUpdateOnline);
|
||||
const token = uni.getStorageSync(
|
||||
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
|
||||
);
|
||||
if (user.value.id && token) {
|
||||
console.log("回到前台，重新连接 websocket");
|
||||
websocket.createWebSocket(token, onShootWsMsg);
|
||||
}
|
||||
});
|
||||
|
||||
onHide(() => {
|
||||
uni.$off("update-user", emitUpdateUser);
|
||||
uni.$off("update-online", emitUpdateOnline);
|
||||
websocket.closeWebSocket();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
background-color: #000;
|
||||
}
|
||||
page {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
line-height: 1;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
line-height: 1;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
view::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
}
|
||||
view::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.guide-tips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.guide-tips > text:first-child {
|
||||
color: #fed847;
|
||||
}
|
||||
.guide-tips > text:nth-child(2) {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.guide-tips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
@keyframes fadeInOut {
|
||||
0% {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
30% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.guide-tips>text:first-child {
|
||||
color: #fed847;
|
||||
}
|
||||
|
||||
.fade-in-out {
|
||||
animation: fadeInOut 1.2s ease forwards;
|
||||
}
|
||||
.guide-tips>text:nth-child(2) {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes fadeInOut {
|
||||
0% {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
animation: fadeOut 0.3s ease forwards;
|
||||
}
|
||||
30% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.scale-in {
|
||||
animation: scaleIn 0.3s ease-out forwards;
|
||||
transform-origin: center center;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleOut {
|
||||
from {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.fade-in-out {
|
||||
animation: fadeInOut 1.2s ease forwards;
|
||||
}
|
||||
|
||||
.scale-out {
|
||||
animation: scaleOut 0.3s ease-out forwards;
|
||||
transform-origin: center center;
|
||||
}
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
to {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pumpIn {
|
||||
from {
|
||||
transform: scale(2);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.fade-out {
|
||||
animation: fadeOut 0.3s ease forwards;
|
||||
}
|
||||
|
||||
.pump-in {
|
||||
animation: pumpIn 0.3s ease-out forwards;
|
||||
transform-origin: center center;
|
||||
}
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.share-canvas {
|
||||
width: 300px;
|
||||
height: 530px;
|
||||
position: absolute;
|
||||
top: -1000px;
|
||||
left: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.truncate {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.scale-in {
|
||||
animation: scaleIn 0.3s ease-out forwards;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.user-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
padding-top: 7px;
|
||||
position: relative;
|
||||
}
|
||||
.half-time-tip {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.half-time-tip > text:last-child {
|
||||
margin-top: 20px;
|
||||
color: #fff9;
|
||||
}
|
||||
.see-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.see-more > text {
|
||||
color: #39a8ff;
|
||||
font-size: 13px;
|
||||
}
|
||||
.see-more > image {
|
||||
width: 15px;
|
||||
}
|
||||
@keyframes scaleOut {
|
||||
from {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "DINCondensed";
|
||||
src: url("https://static.shelingxingqiu.com/font/DIN-Condensed-Bold-2.ttf")
|
||||
format("truetype");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
</style>
|
||||
to {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.scale-out {
|
||||
animation: scaleOut 0.3s ease-out forwards;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pumpIn {
|
||||
from {
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.pump-in {
|
||||
animation: pumpIn 0.3s ease-out forwards;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.share-canvas {
|
||||
width: 300px;
|
||||
height: 530px;
|
||||
position: absolute;
|
||||
top: -1000px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.modal {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.user-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
padding-top: 7px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.half-time-tip {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.half-time-tip>text:last-child {
|
||||
margin-top: 20px;
|
||||
color: #fff9;
|
||||
}
|
||||
|
||||
.see-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.see-more>text {
|
||||
color: #39a8ff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.see-more>image {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "DINCondensed";
|
||||
src: url("https://static.shelingxingqiu.com/font/DIN-Condensed-Bold-2.ttf") format("truetype");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user