Skip to content

Commit

Permalink
store
Browse files Browse the repository at this point in the history
  • Loading branch information
@hsyhhssyy
hsyhhssyy committed Jun 1, 2024
1 parent 08ce223 commit bbe0093
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 48 deletions.
17 changes: 14 additions & 3 deletions src/desktop/views/GameBase.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
<div class="player-panel">
<game-info-card class="game-info" :room-data="gameRoomData">
<template #buttons>
<icon-button :icon="Logout" type="error" @click="leaveRoom">退出房间</icon-button>
<icon-button :icon="Sport" type="warning" @click="endGame" v-if="isHost&&!isCompleted">放弃游戏</icon-button>
<icon-button :icon="Logout" type="error" @click="leaveRoom" v-if="!isHost||isCompleted">退出房间</icon-button>
</template>
</game-info-card>
<div class="chat-area">
Expand All @@ -32,9 +33,10 @@
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Logout } from '@icon-park/vue-next'
import { Logout,Sport } from '@icon-park/vue-next'
import type { SignalrResponse } from '@/api/signalr'
import { useGameHubStore } from '@/stores/gamehub'
import { useUserStore } from '@/stores/user'
import type { GameRoom } from '@/api/game'
import { getGame } from '@/api/game'
import type { ChatProps, Message } from '@/universal/components/ChatBoard.vue'
Expand All @@ -59,24 +61,32 @@ const props = defineProps<GameProps>()
const route = useRoute()
const router = useRouter()
const gameHub = useGameHubStore()
const user = useUserStore()
const roomId: string = Array.isArray(route.params.roomId) ? route.params.roomId.join(',') : route.params.roomId
const gameRoomData = ref<GameRoom>()
const isLoading = ref(true)
const chat = ref()
const isCompleted = ref(false)
const isHost = computed(() => gameRoomData.value?.creatorId == user.userInfo?.id)
async function leaveRoom() {
removeData('current-game-id')
gameHub.invokeGameHub('LeaveGame', roomId)
await router.push('/regular-home')
}
async function endGame(){
gameHub.invokeGameHub('CompleteGame', roomId)
}
function gameClosedListener(response: SignalrResponse) {
emits('onGameClosed', response)
}
function gameCompletedListener(response: SignalrResponse) {
isCompleted.value = true
emits('onGameCompleted', response)
}
Expand Down Expand Up @@ -114,11 +124,12 @@ watch(
onMounted(async () => {
gameRoomData.value = await getGame(roomId)
isCompleted.value = gameRoomData.value?.isCompleted || false
emits('onRoomData', gameRoomData.value as GameRoom)
})
onUnmounted(() => {
gameHub.removeGameHubListener('GameCompleted', gameClosedListener)
gameHub.removeGameHubListener('GameCompleted', gameCompletedListener)
gameHub.removeGameHubListener('GameClosed', gameClosedListener)
clearInterval(getGameInterval)
})
Expand Down
2 changes: 2 additions & 0 deletions src/desktop/views/game/SchulteGrid.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,6 +271,8 @@ function gameInfo(data: GameRoom) {
function gameCompleted(response: SignalrResponse) {
const answers = response.Payload.RemainingAnswers
remainingAnswerList.value = answers
clearInterval(timeRecordInterval)
amiyaFace.value = answers.length ? 'ye' : 'joy'
Expand Down
46 changes: 24 additions & 22 deletions src/mobile/views/GameBase.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
/>
<game-info-card class="game-info" :room-data="gameRoomData">
<template #buttons>
<icon-button :icon="Logout" type="error" @click="leaveRoom">退出房间</icon-button>
<icon-button :icon="Sport" type="warning" @click="endGame" v-if="isHost&&!isCompleted">放弃游戏</icon-button>
<icon-button :icon="Logout" type="error" @click="leaveRoom" v-if="!isHost||isCompleted">退出房间</icon-button>
</template>
</game-info-card>
</div>
Expand All @@ -33,9 +34,10 @@
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Logout } from '@icon-park/vue-next'
import { Logout,Sport } from '@icon-park/vue-next'
import type { SignalrResponse } from '@/api/signalr'
import { useGameHubStore } from '@/stores/gamehub'
import { useUserStore } from '@/stores/user'
import type { GameRoom } from '@/api/game'
import { getGame } from '@/api/game'
import type { ChatProps, Message } from '@/universal/components/ChatBoard.vue'
Expand All @@ -47,34 +49,38 @@ import { removeData } from '@/utils'
interface GameProps extends ChatProps {}
const emits = defineEmits<{
(e: 'onLoaded'): void;
(e: 'onGameClosed', response: SignalrResponse): void;
(e: 'onLoaded'): void
(e: 'onRoomData', data: GameRoom): void
(e: 'onGameClosed', response: SignalrResponse): void
(e: 'onGameCompleted', response: SignalrResponse): void
}>()
const props = defineProps<GameProps>()
const route = useRoute()
const router = useRouter()
const gameHub = useGameHubStore()
const user = useUserStore()
const roomId: string = Array.isArray(route.params.roomId) ? route.params.roomId.join(',') : route.params.roomId
const gameRoomData = ref<GameRoom>()
const isLoading = ref(true)
const chat = ref()
const debugDisplay = ref('1111')
const showPlayerList = ref(false)
// if ("virtualKeyboard" in navigator) {
// debugDisplay.value = "virtualKeyboard is supported";
// (navigator as any).virtualKeyboard.overlaysContent = true;
const isCompleted = ref(false)
const isHost = computed(() => gameRoomData.value?.creatorId == user.userInfo?.id)
// (navigator as any).virtualKeyboard.addEventListener("geometrychange", (event:any) => {
// const { x, y, width, height } = event.target.boundingRect;
// debugDisplay.value = `x: ${x}, y: ${y}, width: ${width}, height: ${height}`;
// });
// }
const showPlayerList = ref(false)
async function endGame(){
gameHub.invokeGameHub('CompleteGame', roomId)
}
function gameCompletedListener(response: SignalrResponse) {
isCompleted.value = true
emits('onGameCompleted', response)
}
async function gameClosedListener(response: SignalrResponse) {
emits('onGameClosed', response)
Expand Down Expand Up @@ -105,7 +111,7 @@ watch(
if (value) {
emits('onLoaded')
gameHub.addGameHubListener('GameCompleted', gameClosedListener)
gameHub.addGameHubListener('GameCompleted', gameCompletedListener)
gameHub.addGameHubListener('GameClosed', gameClosedListener)
gameHub.invokeGameHub('GetGame', roomId)
Expand All @@ -122,18 +128,14 @@ watch(
}
)
const handleResize = () => {
debugDisplay.value = `innerWidth: ${window.innerWidth}, innerHeight: ${window.innerHeight}`
}
onMounted(async () => {
gameRoomData.value = await getGame(roomId)
window.addEventListener('resize', handleResize)
isCompleted.value = gameRoomData.value?.isCompleted
emits('onRoomData', gameRoomData.value as GameRoom)
})
onUnmounted(() => {
gameHub.removeGameHubListener('GameCompleted', gameClosedListener)
gameHub.removeGameHubListener('GameCompleted', gameCompletedListener)
gameHub.removeGameHubListener('GameClosed', gameClosedListener)
clearInterval(getGameInterval)
})
Expand Down
83 changes: 60 additions & 23 deletions src/mobile/views/game/SchulteGrid.vue
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,14 @@
<template>
<game-base :room-id="roomId" :input-handler="sendMove" :players="players" @on-loaded="load" ref="base">
<game-base :room-id="roomId" :input-handler="sendMove" :players="players" @on-loaded="load" @on-room-data="gameInfo"
@on-game-completed="gameCompleted" ref="base">
<div style="height: 100%; ">
<div class="game-body">
<n-card embedded :bordered="false" style="width: fit-content">
<n-grid :x-gap="2" :y-gap="2" :cols="x" style="width: fit-content">
<n-grid-item v-for="(item, index) in expandedData" :key="index">
<n-button
size="small"
class="char"
:class="{ active: !item.recent && !item.fade }"
:dashed="item.fade"
:strong="!item.fade"
:disabled="item.fade"
:secondary="item.recent"
:type="colors(item)"
>
<n-button size="small" class="char" :class="{ active: !item.recent && !item.fade }"
:dashed="item.fade" :strong="!item.fade" :disabled="item.fade" :secondary="item.recent"
:type="colors(item)">
{{ item.char }}
</n-button>
</n-grid-item>
Expand All @@ -26,20 +20,16 @@
<div class="amiya-face" :style="amiyaFaceStyle"></div>
<n-card class="amiya-chat" embedded content-style="padding: 0;">{{ amiyaChat }}</n-card>
</div>

</div>
<template v-slot:players>
<template v-for="(items, name) in playersRanking" :key="name">
<template v-if="items.length">
<div class="rank-title">{{ playersRankingNames[name] }}</div>
<div class="play-item" v-for="(item, index) in items" :key="index">
<template v-if="name != 'others'">
<n-avatar
size="large"
round
:src="item.avatar"
:img-props="{ referrerpolicy: 'no-referrer' }"
/>
<n-avatar size="large" round :src="item.avatar"
:img-props="{ referrerpolicy: 'no-referrer' }" />
<div style="padding-left: 5px">
<div>{{ item.name }}</div>
<div class="score">得分: {{ item.score }}</div>
Expand All @@ -63,6 +53,7 @@ import { useRoute } from 'vue-router'
import { useGameHubStore } from '@/stores/gamehub'
import type { SignalrResponse } from '@/api/signalr'
import type { Player } from '@/def/players'
import type { GameRoom } from '@/api/game'
import GameBase from '@/mobile/views/GameBase.vue'
import type { HitType } from '@/desktop/components/effects/HitEffect.vue'
import HitEffect from '@/desktop/components/effects/HitEffect.vue'
Expand Down Expand Up @@ -104,10 +95,12 @@ const y = ref(2)
const font_factor = ref(10)
const players = ref<GamePlayer[]>([])
const expandedData = ref<ExpandedDataItem[]>([])
const RemainingAnswerPushed = ref(false)
const roomId = Array.isArray(route.params.roomId) ? route.params.roomId.join(',') : route.params.roomId
const base = ref()
const hit = ref()
const baseLoaded = ref(false)
const amiyaFace = ref('smile')
const amiyaChat = ref(
Expand Down Expand Up @@ -241,6 +234,46 @@ function receiveMoveListener(response: SignalrResponse) {
} as Message)
}
function gameInfo(data: GameRoom) {
baseLoaded.value = true
if (data.isClosed) {
amiyaFace.value = 'wuwu'
amiyaChat.value = '博士，游戏已经结束了……下次请早点来吧~'
}
}
function gameCompleted(response: SignalrResponse) {
const answers = response.Payload.RemainingAnswers
pushRemainingAnswers(answers)
}
function pushRemainingAnswers(answers : any){
if(RemainingAnswerPushed.value){
return
}
if(!base.value||!baseLoaded.value){
return
}
RemainingAnswerPushed.value = true
base.value.pushMessage({
userId: "",
content: "该局游戏已经结束了"+ (answers.length?"，剩余的答案如下：":"。" ),
style: "Correct",
nickname: '阿米娅',
avatar: '/amiya.jpg'
} as Message)
for (const answer of answers) {
base.value.pushMessage({
userId: "",
content: answer.CharacterName + " - " + answer.SkillName ,
style: "Correct",
nickname: '阿米娅',
avatar: '/amiya.jpg'
} as Message)
}
}
async function gameInfoListener(response: SignalrResponse) {
if (expandedData.value.length == 0) {
const grid = response.Payload.Grid
Expand Down Expand Up @@ -283,6 +316,10 @@ async function gameInfoListener(response: SignalrResponse) {
}
}
}
if(response.Game.IsCompleted){
pushRemainingAnswers(response.Payload.RemainingAnswers)
}
}
function load() {
Expand All @@ -302,7 +339,7 @@ onMounted(() => {
* 骚话环节！这里的判断有点多，要在有人说话和有人回答之间做判断（有人说话不一定有人回答）
*/
if (timeRecord >= 20) {
if (timeRecord >= 20) {
if (timeRecordChat < timeRecord) {
face = 'tea'
chat = '博士们在讨论什么呢？有没有想好答案了呀~'
Expand Down Expand Up @@ -341,8 +378,8 @@ $guideHeight: 0px;
position: relative;
.char {
width: calc( 10vw - 5px);
height: calc( 10vw - 5px);
width: calc(10vw - 5px);
height: calc(10vw - 5px);
font-size: 20px;
font-weight: bold;
padding: 0;
Expand Down Expand Up @@ -370,8 +407,8 @@ $guideHeight: 0px;
height: fit-content;
padding: 0px;
}
.amiya-chat-content{
.amiya-chat-content {
padding: 0px;
}
}
Expand Down

0 comments on commit bbe0093

Please sign in to comment.