diff options
| -rw-r--r-- | packages/frontend/assets/reversi/matched.mp3 | bin | 0 -> 43884 bytes | |||
| -rw-r--r-- | packages/frontend/src/pages/reversi/game.board.vue | 1 | ||||
| -rw-r--r-- | packages/frontend/src/pages/reversi/index.vue | 10 |
3 files changed, 10 insertions, 1 deletions
diff --git a/packages/frontend/assets/reversi/matched.mp3 b/packages/frontend/assets/reversi/matched.mp3 Binary files differnew file mode 100644 index 0000000000..f26d07614e --- /dev/null +++ b/packages/frontend/assets/reversi/matched.mp3 diff --git a/packages/frontend/src/pages/reversi/game.board.vue b/packages/frontend/src/pages/reversi/game.board.vue index b787e301be..3a24777db8 100644 --- a/packages/frontend/src/pages/reversi/game.board.vue +++ b/packages/frontend/src/pages/reversi/game.board.vue @@ -487,6 +487,7 @@ $gap: 4px; aspect-ratio: 1; transform-style: preserve-3d; perspective: 150px; + transition: border 0.25s ease, opacity 0.25s ease; &.boardCell_empty { border: solid 2px var(--divider); diff --git a/packages/frontend/src/pages/reversi/index.vue b/packages/frontend/src/pages/reversi/index.vue index d33acc95a9..5fbbbef2c5 100644 --- a/packages/frontend/src/pages/reversi/index.vue +++ b/packages/frontend/src/pages/reversi/index.vue @@ -10,11 +10,12 @@ SPDX-License-Identifier: AGPL-3.0-only <img src="/client-assets/reversi/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/> </div> - <div class="_panel" style="padding: 16px;"> + <div class="_panel _gaps" style="padding: 16px;"> <div class="_buttonsCenter"> <MkButton primary gradate rounded @click="matchAny">{{ i18n.ts._reversi.freeMatch }}</MkButton> <MkButton primary gradate rounded @click="matchUser">{{ i18n.ts.invite }}</MkButton> </div> + <div style="font-size: 90%; opacity: 0.7; text-align: center;"><i class="ti ti-music"></i> {{ i18n.ts.soundWillBePlayed }}</div> </div> <MkFolder v-if="invitations.length > 0" :defaultOpen="true"> @@ -101,6 +102,7 @@ import MkPagination from '@/components/MkPagination.vue'; import { useRouter } from '@/global/router/supplier.js'; import * as os from '@/os.js'; import { useInterval } from '@/scripts/use-interval.js'; +import * as sound from '@/scripts/sound.js'; const myGamesPagination = { endpoint: 'reversi/games' as const, @@ -141,6 +143,12 @@ const matchingAny = ref<boolean>(false); function startGame(game: Misskey.entities.ReversiGameDetailed) { matchingUser.value = null; matchingAny.value = false; + + sound.playUrl('/client-assets/reversi/matched.mp3', { + volume: 1, + playbackRate: 1, + }); + router.push(`/reversi/g/${game.id}`); } |