129 lines
3.7 KiB
Vue
129 lines
3.7 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
-->
|
|
|
|
<template>
|
|
<MkStickyContainer>
|
|
<MkSpacer :contentMax="600">
|
|
<div class="_gaps">
|
|
<div class="_panel">
|
|
<MkAvatar v-if="room.user1" :user="room.user1" :class="$style.userAvatar"/>
|
|
<div v-else-if="room.user1Ai">AI</div>
|
|
<div v-if="room.user1Ready">OK</div>
|
|
</div>
|
|
<div class="_panel">
|
|
<MkAvatar v-if="room.user2" :user="room.user2" :class="$style.userAvatar"/>
|
|
<div v-else-if="room.user2Ai">AI</div>
|
|
<div v-if="room.user2Ready">OK</div>
|
|
</div>
|
|
<div class="_panel">
|
|
<MkAvatar v-if="room.user3" :user="room.user3" :class="$style.userAvatar"/>
|
|
<div v-else-if="room.user3Ai">AI</div>
|
|
<div v-if="room.user3Ready">OK</div>
|
|
</div>
|
|
<div class="_panel">
|
|
<MkAvatar v-if="room.user4" :user="room.user4" :class="$style.userAvatar"/>
|
|
<div v-else-if="room.user4Ai">AI</div>
|
|
<div v-if="room.user4Ready">OK</div>
|
|
</div>
|
|
</div>
|
|
</MkSpacer>
|
|
<template #footer>
|
|
<div :class="$style.footer">
|
|
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
|
|
<div style="text-align: center;" class="_gaps_s">
|
|
<div class="_buttonsCenter">
|
|
<MkButton rounded danger @click="leave">{{ i18n.ts._mahjong.leave }}</MkButton>
|
|
<MkButton v-if="!isReady" rounded primary @click="ready">{{ i18n.ts._mahjong.ready }}</MkButton>
|
|
<MkButton v-if="isReady" rounded @click="unready">{{ i18n.ts._mahjong.cancelReady }}</MkButton>
|
|
</div>
|
|
</div>
|
|
</MkSpacer>
|
|
</div>
|
|
</template>
|
|
</MkStickyContainer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, watch, ref, onMounted, shallowRef, onUnmounted } from 'vue';
|
|
import * as Misskey from 'misskey-js';
|
|
import * as Mahjong from 'misskey-mahjong';
|
|
import { i18n } from '@/i18n.js';
|
|
import { signinRequired } from '@/account.js';
|
|
import { deepClone } from '@/scripts/clone.js';
|
|
import MkButton from '@/components/MkButton.vue';
|
|
import MkRadios from '@/components/MkRadios.vue';
|
|
import MkSwitch from '@/components/MkSwitch.vue';
|
|
import MkFolder from '@/components/MkFolder.vue';
|
|
import * as os from '@/os.js';
|
|
import { MenuItem } from '@/types/menu.js';
|
|
import { useRouter } from '@/global/router/supplier.js';
|
|
|
|
const $i = signinRequired();
|
|
|
|
const router = useRouter();
|
|
|
|
const props = defineProps<{
|
|
room: Misskey.entities.MahjongRoomDetailed;
|
|
connection: Misskey.ChannelConnection;
|
|
}>();
|
|
|
|
const room = ref<Misskey.entities.MahjongRoomDetailed>(deepClone(props.room));
|
|
|
|
const isReady = computed(() => {
|
|
if (room.value.user1Id === $i.id && room.value.user1Ready) return true;
|
|
if (room.value.user2Id === $i.id && room.value.user2Ready) return true;
|
|
if (room.value.user3Id === $i.id && room.value.user3Ready) return true;
|
|
if (room.value.user4Id === $i.id && room.value.user4Ready) return true;
|
|
return false;
|
|
});
|
|
|
|
async function leave() {
|
|
const { canceled } = await os.confirm({
|
|
type: 'warning',
|
|
text: i18n.ts.areYouSure,
|
|
});
|
|
if (canceled) return;
|
|
|
|
props.connection.send('leave', {});
|
|
|
|
router.push('/mahjong');
|
|
}
|
|
|
|
function ready() {
|
|
props.connection.send('ready', true);
|
|
}
|
|
|
|
function unready() {
|
|
props.connection.send('ready', false);
|
|
}
|
|
|
|
function onChangeReadyStates(states) {
|
|
room.value.user1Ready = states.user1;
|
|
room.value.user2Ready = states.user2;
|
|
room.value.user3Ready = states.user3;
|
|
room.value.user4Ready = states.user4;
|
|
}
|
|
|
|
props.connection.on('changeReadyStates', onChangeReadyStates);
|
|
|
|
onUnmounted(() => {
|
|
props.connection.off('changeReadyStates', onChangeReadyStates);
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.userAvatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.footer {
|
|
-webkit-backdrop-filter: var(--blur, blur(15px));
|
|
backdrop-filter: var(--blur, blur(15px));
|
|
background: var(--acrylicBg);
|
|
border-top: solid 0.5px var(--divider);
|
|
}
|
|
</style>
|