diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2024-01-24 09:41:22 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2024-01-24 09:41:22 +0900 |
| commit | cc420c245f26cb574bcbee28553512d4eaf40920 (patch) | |
| tree | f2b2c34b766e2f748bbb415c6bbd2670e8ddc7c2 /packages/frontend/src/pages/reversi | |
| parent | Merge branch 'develop' of https://github.com/misskey-dev/misskey into develop (diff) | |
| download | misskey-cc420c245f26cb574bcbee28553512d4eaf40920.tar.gz misskey-cc420c245f26cb574bcbee28553512d4eaf40920.tar.bz2 misskey-cc420c245f26cb574bcbee28553512d4eaf40920.zip | |
enhance(reversi): 準備中の自分の対局も一覧に表示するように
Diffstat (limited to 'packages/frontend/src/pages/reversi')
| -rw-r--r-- | packages/frontend/src/pages/reversi/index.vue | 20 |
1 files changed, 16 insertions, 4 deletions
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; } |