Skip to content

Commit

Permalink
store
Browse files Browse the repository at this point in the history
  • Loading branch information
@hsyhhssyy
hsyhhssyy committed Jun 22, 2024
1 parent 202c8d3 commit 5ae7e3a
Show file tree
Hide file tree
Showing 9 changed files with 118 additions and 75 deletions.
13 changes: 0 additions & 13 deletions src/api/account.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,19 +36,6 @@ export async function verifyTokenApi(token: string) {

const user = await describeApi()
if (user) {
const userRole = user.roles ? user.roles[0] : null
if (userRole) {
setData('user-role', userRole)
}
const email = user.email ? user.email : ''
if (user.id) {
setData('email', email)
}
const userId = user.id
if (userId) {
setData('user-id', userId)
}

return true
}
return false
Expand Down
10 changes: 7 additions & 3 deletions src/desktop/views/Logout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,18 @@
import { onMounted } from 'vue'
import { removeData } from '@/utils'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user';
import { useGameHubStore } from '@/stores/gamehub';
const router = useRouter()
const user = useUserStore()
const gameHub = useGameHubStore()
onMounted(async () => {
removeData('jwt-token')
removeData('user-role')
removeData('user-id')
removeData('email')
user.reset()
gameHub.close()
// 给点延迟让大家看看可爱的兔兔！
setTimeout(async () => await router.push('/login'), 1500)
Expand Down
61 changes: 54 additions & 7 deletions src/mobile/components/ChatBoard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,34 @@
<n-input class="chat-input" :placeholder="props.placeholder || '输入干员名称...'" v-model:value="inputMessage"
@keydown.enter="sendMessage" />
<icon-button class="chat-button" :icon="SendOne" type="success" @click="sendMessage"></icon-button>
<n-badge :value="unreadMessage" :max="99">
<icon-button class="chat-button" :icon="Communication" type="info" @click="openChatLog"></icon-button>
</n-badge>
<n-popover trigger="manual" :show="currentMessage?.show" width="300px">
<template #trigger>
<n-badge :value="unreadMessage" :max="99">
<icon-button class="chat-button" :icon="Communication" type="info"
@click="openChatLog"></icon-button>
</n-badge>
</template>
<div class="instant-message-container">
<n-avatar :src="currentMessage.avatar" size="tiny" :img-props="{ referrerpolicy: 'no-referrer' }" />
<div class="instant-message">
{{ currentMessage.nickname }} : {{ currentMessage.content }}
</div>
</div>

</n-popover>
<icon-button class="chat-button" :icon="Peoples" type="warning" @click="openPlayerList"></icon-button>
</div>

<n-modal v-model:show="showChatLog" @on-after-enter="onModalShow" title="消息列表" preset="dialog">
<n-card role="dialog" aria-modal="true" class="message-window" embedded size="small">
<div style="height: 100%; overflow: auto;" ref="chatBoard">
<n-flex style="margin-bottom: 5px" v-for="(item, index) in messages"
:key="index" :wrap="false" :justify="userId === item.userId ? 'end' : 'start'">
<n-flex style="margin-bottom: 5px" v-for="(item, index) in messages" :key="index" :wrap="false"
:justify="userId === item.userId ? 'end' : 'start'">
<n-flex>
<n-avatar :src="item.avatar" size="large" v-if="userId !== item.userId"
:img-props="{ referrerpolicy: 'no-referrer' }" />
</n-flex>
<div class="message-card-with-name" >
<div class="message-card-with-name">
{{ item.nickname }}
<n-card class="message-content" size="small">
<component :is="item.content" v-if="item.isComponent" />
Expand Down Expand Up @@ -78,6 +90,13 @@ const inputMessage = ref('')
const chatBoard = ref()
const showChatLog = ref(false)
const unreadMessage = ref(0)
const currentMessage = ref({
userId: '',
nickname: '阿米娅',
avatar: '/avatar.webp',
content: '这是一条消息',
show: false
})
function openChatLog() {
unreadMessage.value = 0
Expand Down Expand Up @@ -121,14 +140,32 @@ async function chatListener(response: SignalrResponse) {
}
}
var lastMessagePopupCloseInterval: NodeJS.Timeout | null = null
function pushMessage(msg: Message) {
messages.value.push(msg)
if ( (user.userInfo?.id || '') !== msg.userId) {
if ((user.userInfo?.id || '') !== msg.userId) {
if (!showChatLog.value) {
unreadMessage.value++
}
}
currentMessage.value = {
userId: msg.userId,
nickname: msg.nickname,
avatar: msg.avatar,
content: msg.content,
show: true
}
if(lastMessagePopupCloseInterval) {
clearTimeout(lastMessagePopupCloseInterval)
}
lastMessagePopupCloseInterval = setTimeout(() => {
currentMessage.value.show = false
}, 5000)
}
defineExpose({ pushMessage })
Expand Down Expand Up @@ -171,7 +208,17 @@ onUnmounted(async () => {
}
}
.instant-message-container {
display: flex;
flex-direction: row;
.instant-message {
margin-left: 5px;
white-space: nowrap;
overflow: hidden;
max-width: 80%;
}
}
.message-window {
height: calc(80vh);
Expand Down
10 changes: 7 additions & 3 deletions src/mobile/views/Logout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,18 @@
import { onMounted } from 'vue'
import { removeData } from '@/utils'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user';
import { useGameHubStore } from '@/stores/gamehub';
const router = useRouter()
const user = useUserStore()
const gameHub = useGameHubStore()
onMounted(async () => {
removeData('jwt-token')
removeData('user-role')
removeData('user-id')
removeData('email')
user.reset()
gameHub.close()
// 给点延迟让大家看看可爱的兔兔！
setTimeout(async () => await router.push('/login'), 1500)
Expand Down
4 changes: 2 additions & 2 deletions src/mobile/views/game/CypherChallenge.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@
</div>
</div>
</div>
<div style="height: 0;">
<amiya-face @on-hit="onFaceHit" :v-show="false"></amiya-face>
<div style="display: hidden;">
<amiya-face @on-hit="onFaceHit"></amiya-face>
</div>
</div>
<template v-slot:players>
Expand Down
73 changes: 32 additions & 41 deletions src/mobile/views/game/SkinGuess.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,11 @@
<div>
<div class="game-panel">
<hit-effect ref="hit"></hit-effect>
<div class="question-prompt">
这是哪位干员立绘的一部分呢？
<div class="question-prompt" v-if="rallyReached && !settlementDialogShown">
这是哪位干员立绘的一部分呢 ({{ (currentQuestionIndex??0) + 1 }} / {{ game?.MaxQuestionCount }})?
</div>
<div class="question-prompt" v-if="settlementDialogShown">
这是哪位干员立绘的一部分呢 ({{ (currentQuestionIndex??0) }} / {{ game?.MaxQuestionCount }})?
</div>
<div class="hint-area">
<icon-button :icon="Tips" type="info" @click="handleRequestHint"
Expand All @@ -40,12 +43,18 @@
</div>
<div class="game-body">
<div class="question-display">
<div v-if="!rallyReached" v-html="rallyText"></div>
<div v-if="!rallyReached" style="min-width: 300px;">
<loading :room-id="roomId"
:value="(slicedImages?.size??0 )+ (slicedHintImages?.size??0)"
:maximum="loadMaximun" :players="players"
@on-loading-complete="imageLoadingCompleted"
></loading>
</div>
<canvas id="masked-image" class="masked-image" v-show="rallyReached"></canvas>
</div>
</div>
</div>
<div style="height: 0;">
<div style="display: none;">
<amiya-face @on-hit="onFaceHit"></amiya-face>
</div>
</div>
Expand Down Expand Up @@ -73,6 +82,7 @@ import NextQuestion from '@/universal/components/NextQuestion.vue'
import PlayerRanking from '@/mobile/components/PlayerRanking.vue'
import AmiyaFace from '@/desktop/components/AmiyaFace.vue'
import IconButton from '@/universal/components/IconButton.vue'
import Loading from '@/universal/components/Loading.vue'
const route = useRoute()
const gameHub = useGameHubStore()
Expand Down Expand Up @@ -110,6 +120,17 @@ const lastQuestion = computed<Question>(() => {
console.log('currentQuestionIndex:', currentQuestionIndex.value)
return game.value.QuestionList[currentQuestionIndex.value - 1]
})
const loadMaximun = computed(() => {
if(currentQuestionIndex.value == null){
return 6 // 三道题
}
if(game.value.MaxQuestionCount-currentQuestionIndex.value < 3){
return (game.value.MaxQuestionCount-currentQuestionIndex.value)*2
}
return 6
})
const game = ref<any>()
const questionList = computed(() => {
Expand Down Expand Up @@ -273,24 +294,13 @@ async function preprocessImages() {
slicedImages.value = new Map();
slicedHintImages.value = new Map();
//创建集结点
gameHub.invokeGameHub('RallyPointCreate', roomId, JSON.stringify({ Name: "ImageProcess" }));
gameHub.invokeGameHub('RallyPointStatus', roomId, JSON.stringify({ Name: "ImageProcess" }));
await generateMaskedImage(currentQuestionIndex.value!);
updateImage();
for (let i = 0; i < questionList.value.length-1; i++) {
for (let i = currentQuestionIndex.value!; i < game.value.MaxQuestionCount; i++) {
if (slicedImages.value.has(i)) {
continue;
}
console.log('preprocessImages:', i)
await generateMaskedImage(i);
updateImage();
//至少加载了本题和后面的三道题
if (i >= questionList.value.length - 1 || i >= currentQuestionIndex.value! + 3) {
gameHub.invokeGameHub('RallyPointReached', roomId, JSON.stringify({ Name: "ImageProcess" }));
}
}
}
Expand Down Expand Up @@ -320,6 +330,10 @@ const updateImage = function () {
}
}
function imageLoadingCompleted() {
rallyReached.value = true;
}
function onFaceHit(face: HitType, _: string) {
hit.value.hit(face)
}
Expand Down Expand Up @@ -440,31 +454,10 @@ var handleGiveUp = () => {
gameHub.invokeGameHub('GiveUp', roomId);
}
const rallyPointStatusListener = (response: any) => {
if (response.Name == "ImageProcess") {
rallyText.value = '正在加载题目....';
for (let i = 0; i < players.value.length; i++) {
if (response.Players.includes(players.value[i].id)) {
rallyText.value = rallyText.value + '<br/>' + players.value[i].name + ': 已加载';
} else {
rallyText.value = rallyText.value + '<br/>' + players.value[i].name + ': 加载中...';
}
}
}
}
const rallyPointReachedListener = (response: any) => {
if (response.Name == "ImageProcess") {
rallyReached.value = true;
}
}
function load(roomData: GameRoom, gameData: SignalrResponse) {
gameHub.addGameHubListener('ReceiveMove', receiveMoveListener)
gameHub.addGameHubListener('GameInfo', gameInfoListener)
gameHub.addGameHubListener('GameCompleted', gameCompletedListener)
gameHub.addGameHubListener('RallyPointStatus', rallyPointStatusListener);
gameHub.addGameHubListener('RallyPointReached', rallyPointReachedListener);
gameHub.addGameHubListener('Hint', hintListener)
gameHub.addGameHubListener('GiveUp', giveUpListener)
Expand All @@ -484,8 +477,6 @@ onUnmounted(() => {
gameHub.removeGameHubListener('ReceiveMove', receiveMoveListener)
gameHub.removeGameHubListener('GameInfo', gameInfoListener)
gameHub.removeGameHubListener('GameCompleted', gameCompletedListener)
gameHub.removeGameHubListener('RallyPointStatus', rallyPointStatusListener);
gameHub.removeGameHubListener('RallyPointReached', rallyPointReachedListener);
gameHub.removeGameHubListener('Hint', hintListener)
gameHub.removeGameHubListener('GiveUp', giveUpListener)
Expand Down Expand Up @@ -571,7 +562,7 @@ $guideHeight: 160px;
position: relative;
.question-prompt {
font-size: 24px;
font-size: 18px;
color: bisque;
text-shadow:
-1px -1px 0 #000,
Expand Down
2 changes: 1 addition & 1 deletion src/mobile/views/room/WaitingRoomBase.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ import type { Player } from '@/def/players'
import type { SignalrResponse } from '@/api/signalr'
import IconButton from '@/universal/components/IconButton.vue'
import Icon from '@/universal/components/Icon.vue'
import ChatBoard from '@/desktop/components/ChatBoard.vue' //注意这里是有意使用桌面端ChatBoard的
import ChatBoard from '@/mobile/components/ChatBoard.vue' //注意这里是有意使用桌面端ChatBoard的
import GameInfoCard from '@/universal/components/GameInfoCard.vue'
interface WaitingRoomProps {
Expand Down
7 changes: 6 additions & 1 deletion src/stores/gamehub.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ export const useGameHubStore = defineStore('gameHub', () => {

// 检查并更新 jwt-token
const currentToken = getData<string>('jwt-token') || ''
if(currentToken === ''){
router.push('/regular-home').then()
return
}
if (lastToken.value !== currentToken) {
lastToken.value = currentToken
await close()
Expand Down Expand Up @@ -194,7 +198,8 @@ export const useGameHubStore = defineStore('gameHub', () => {
invokeGameHub,
addGameHubListener,
removeGameHubListener,
connect
connect,
close
}
})

Expand Down
13 changes: 9 additions & 4 deletions src/stores/user.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,21 @@ export const useUserStore = defineStore('user', () => {

const currentRoomId = ref<string | null>(null)

function reset() {
userInfo.value = undefined
userName.value = ''
userAvatar.value = '/avatar.webp'
currentRoomId.value = null
}

async function init() {
const descRet = await describeApi()
if (!descRet) {
await router.push('/logout')
return
}

userInfo.value = undefined
userName.value = ''
userAvatar.value = '/avatar.webp'
reset()

userInfo.value = descRet
userName.value = descRet.nickname
Expand All @@ -34,7 +39,7 @@ export const useUserStore = defineStore('user', () => {

init().then()

return { userInfo, userName, userAvatar, currentRoomId, init }
return { userInfo, userName, userAvatar, currentRoomId, init , reset }
})

export function useUser() {
Expand Down

0 comments on commit 5ae7e3a

Please sign in to comment.