From cc420c245f26cb574bcbee28553512d4eaf40920 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 24 Jan 2024 09:41:22 +0900
Subject: [PATCH] =?UTF-8?q?enhance(reversi):=20=E6=BA=96=E5=82=99=E4=B8=AD?=
=?UTF-8?q?=E3=81=AE=E8=87=AA=E5=88=86=E3=81=AE=E5=AF=BE=E5=B1=80=E3=82=82?=
=?UTF-8?q?=E4=B8=80=E8=A6=A7=E3=81=AB=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B?=
=?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/server/api/endpoints/reversi/games.ts | 3 ++-
packages/frontend/src/pages/reversi/index.vue | 20 +++++++++++++++----
2 files changed, 18 insertions(+), 5 deletions(-)
diff --git a/packages/backend/src/server/api/endpoints/reversi/games.ts b/packages/backend/src/server/api/endpoints/reversi/games.ts
index f28fe5d987..c1b2ff1702 100644
--- a/packages/backend/src/server/api/endpoints/reversi/games.ts
+++ b/packages/backend/src/server/api/endpoints/reversi/games.ts
@@ -43,7 +43,6 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
) {
super(meta, paramDef, async (ps, me) => {
const query = this.queryService.makePaginationQuery(this.reversiGamesRepository.createQueryBuilder('game'), ps.sinceId, ps.untilId)
- .andWhere('game.isStarted = TRUE')
.innerJoinAndSelect('game.user1', 'user1')
.innerJoinAndSelect('game.user2', 'user2');
@@ -53,6 +52,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
.where('game.user1Id = :userId', { userId: me.id })
.orWhere('game.user2Id = :userId', { userId: me.id });
}));
+ } else {
+ query.andWhere('game.isStarted = TRUE');
}
const games = await query.take(ps.limit).getMany();
diff --git a/packages/frontend/src/pages/reversi/index.vue b/packages/frontend/src/pages/reversi/index.vue
index 523418c99b..4c6c99ae51 100644
--- a/packages/frontend/src/pages/reversi/index.vue
+++ b/packages/frontend/src/pages/reversi/index.vue
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkPagination :pagination="myGamesPagination" :disableAutoLoad="true">
<template #default="{ items }">
<div :class="$style.gamePreviews">
- <MkA v-for="g in items" :key="g.id" v-panel :class="[$style.gamePreview, !g.isEnded && $style.gamePreviewActive]" tabindex="-1" :to="`/reversi/g/${g.id}`">
+ <MkA v-for="g in items" :key="g.id" v-panel :class="[$style.gamePreview, !g.isStarted && !g.isEnded && $style.gamePreviewWaiting, g.isStarted && !g.isEnded && $style.gamePreviewActive]" tabindex="-1" :to="`/reversi/g/${g.id}`">
<div :class="$style.gamePreviewPlayers">
<span v-if="g.winnerId === g.user1Id" style="margin-right: 0.75em; color: var(--accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-right: 0.75em; visibility: hidden;"><i class="ti ti-x"></i></span>
@@ -45,7 +45,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-if="g.winnerId === g.user2Id" style="margin-left: 0.75em; color: var(--accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
</div>
<div :class="$style.gamePreviewFooter">
- <span v-if="!g.isEnded" :class="$style.gamePreviewStatusActive">{{ i18n.ts._reversi.playing }}</span>
+ <span v-if="g.isStarted" :class="$style.gamePreviewStatusActive">{{ i18n.ts._reversi.playing }}</span>
+ <span v-else-if="!g.isEnded" :class="$style.gamePreviewStatusWaiting"><MkEllipsis/></span>
<span v-else>{{ i18n.ts._reversi.ended }}</span>
<MkTime style="margin-left: auto; opacity: 0.7;" :time="g.createdAt"/>
</div>
@@ -60,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkPagination :pagination="gamesPagination" :disableAutoLoad="true">
<template #default="{ items }">
<div :class="$style.gamePreviews">
- <MkA v-for="g in items" :key="g.id" v-panel :class="[$style.gamePreview, !g.isEnded && $style.gamePreviewActive]" tabindex="-1" :to="`/reversi/g/${g.id}`">
+ <MkA v-for="g in items" :key="g.id" v-panel :class="[$style.gamePreview, !g.isStarted && !g.isEnded && $style.gamePreviewWaiting, g.isStarted && !g.isEnded && $style.gamePreviewActive]" tabindex="-1" :to="`/reversi/g/${g.id}`">
<div :class="$style.gamePreviewPlayers">
<span v-if="g.winnerId === g.user1Id" style="margin-right: 0.75em; color: var(--accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-right: 0.75em; visibility: hidden;"><i class="ti ti-x"></i></span>
@@ -71,7 +72,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-if="g.winnerId === g.user2Id" style="margin-left: 0.75em; color: var(--accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
</div>
<div :class="$style.gamePreviewFooter">
- <span v-if="!g.isEnded" :class="$style.gamePreviewStatusActive">{{ i18n.ts._reversi.playing }}</span>
+ <span v-if="g.isStarted" :class="$style.gamePreviewStatusActive">{{ i18n.ts._reversi.playing }}</span>
+ <span v-else-if="!g.isEnded" :class="$style.gamePreviewStatusWaiting"><MkEllipsis/></span>
<span v-else>{{ i18n.ts._reversi.ended }}</span>
<MkTime style="margin-left: auto; opacity: 0.7;" :time="g.createdAt"/>
</div>
@@ -273,6 +275,10 @@ definePageMetadata(computed(() => ({
box-shadow: inset 0 0 8px 0px var(--accent);
}
+.gamePreviewWaiting {
+ box-shadow: inset 0 0 8px 0px var(--warn);
+}
+
.gamePreviewPlayers {
text-align: center;
padding: 16px;
@@ -306,6 +312,12 @@ definePageMetadata(computed(() => ({
animation: blink 2s infinite;
}
+.gamePreviewStatusWaiting {
+ color: var(--warn);
+ font-weight: bold;
+ animation: blink 2s infinite;
+}
+
.waitingScreen {
text-align: center;
}
--
GitLab