Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'misskey-dev/develop' into io

Browse source
This commit is contained in:
まっちゃとーにゅ 2024-01-23 04:10:51 +09:00
commit 8aa76868b3
No known key found for this signature in database
GPG key ID: 143DE582A97FE052
266 changed files with 20375 additions and 6619 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/frontend/src/pages/about.vue
View file

@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #key>Misskey</template>
<template #value>{{ version }}</template>
</MkKeyValue>
<div v-html="i18n.t('poweredByMisskeyDescription', { name: instance.name ?? host })">
<div v-html="i18n.tsx.poweredByMisskeyDescription({ name: instance.name ?? host })">
</div>
<FormLink to="/about-misskey">{{ i18n.ts.aboutMisskey }}</FormLink>
</div>

2
packages/frontend/src/pages/admin-file.vue
View file

@ -104,7 +104,7 @@ fetch();
async function del() {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('removeAreYouSure', { x: file.value.name }),
text: i18n.tsx.removeAreYouSure({ x: file.value.name }),
});
if (canceled) return;

8
packages/frontend/src/pages/admin-user.vue
View file

@ -183,9 +183,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkSelect>
</div>
<div class="charts">
<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div>
<div class="label">{{ i18n.tsx.recentNHours({ n: 90 }) }}</div>
<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ user, withoutAll: true }" :detailed="true"></MkChart>
<div class="label">{{ i18n.t('recentNDays', { n: 90 }) }}</div>
<div class="label">{{ i18n.tsx.recentNDays({ n: 90 }) }}</div>
<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ user, withoutAll: true }" :detailed="true"></MkChart>
</div>
</div>
@ -312,7 +312,7 @@ async function resetPassword() {
});
os.alert({
type: 'success',
text: i18n.t('newPasswordIs', { password }),
text: i18n.tsx.newPasswordIs({ password }),
});
}
}
@ -395,7 +395,7 @@ async function deleteAccount() {
if (confirm.canceled) return;
const typed = await os.inputText({
text: i18n.t('typeToConfirm', { x: user.value?.username }),
text: i18n.tsx.typeToConfirm({ x: user.value?.username }),
});
if (typed.canceled) return;

2
packages/frontend/src/pages/admin/ads.vue
View file

@ -161,7 +161,7 @@ function add() {
function remove(ad) {
os.confirm({
type: 'warning',
text: i18n.t('removeAreYouSure', { x: ad.url }),
text: i18n.tsx.removeAreYouSure({ x: ad.url }),
}).then(({ canceled }) => {
if (canceled) return;
ads.value = ads.value.filter(x => x !== ad);

4
packages/frontend/src/pages/admin/announcements.vue
View file

@ -76,7 +76,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="announcement.silence" :helpText="i18n.ts._announcement.silenceDescription">
{{ i18n.ts._announcement.silence }}
</MkSwitch>
<p v-if="announcement.reads">{{ i18n.t('nUsersRead', { n: announcement.reads }) }}</p>
<p v-if="announcement.reads">{{ i18n.tsx.nUsersRead({ n: announcement.reads }) }}</p>
<MkUserCardMini v-if="announcement.userId" :user="announcement.user" @click="editUser(announcement)"></MkUserCardMini>
<MkButton v-else class="button" inline primary @click="editUser(announcement)">{{ i18n.ts.specifyUser }}</MkButton>
<div class="buttons _buttons">
@ -159,7 +159,7 @@ function add() {
function del(announcement) {
os.confirm({
type: 'warning',
text: i18n.t('deleteAreYouSure', { x: announcement.title }),
text: i18n.tsx.deleteAreYouSure({ x: announcement.title }),
}).then(({ canceled }) => {
if (canceled) return;
announcements.value = announcements.value.filter(x => x !== announcement);

8
packages/frontend/src/pages/admin/branding.vue
View file

@ -19,10 +19,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts._serverSettings.iconUrl }} (App/192px)</template>
<template #caption>
<div>{{ i18n.t('_serverSettings.appIconDescription', { host: instance.name ?? host }) }}</div>
<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? host }) }}</div>
<div>({{ i18n.ts._serverSettings.appIconUsageExample }})</div>
<div>{{ i18n.ts._serverSettings.appIconStyleRecommendation }}</div>
<div><strong>{{ i18n.t('_serverSettings.appIconResolutionMustBe', { resolution: '192x192px' }) }}</strong></div>
<div><strong>{{ i18n.tsx._serverSettings.appIconResolutionMustBe({ resolution: '192x192px' }) }}</strong></div>
</template>
</MkInput>
@ -30,10 +30,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts._serverSettings.iconUrl }} (App/512px)</template>
<template #caption>
<div>{{ i18n.t('_serverSettings.appIconDescription', { host: instance.name ?? host }) }}</div>
<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? host }) }}</div>
<div>({{ i18n.ts._serverSettings.appIconUsageExample }})</div>
<div>{{ i18n.ts._serverSettings.appIconStyleRecommendation }}</div>
<div><strong>{{ i18n.t('_serverSettings.appIconResolutionMustBe', { resolution: '512x512px' }) }}</strong></div>
<div><strong>{{ i18n.tsx._serverSettings.appIconResolutionMustBe({ resolution: '512x512px' }) }}</strong></div>
</template>
</MkInput>

2
packages/frontend/src/pages/admin/relays.vue
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<i v-if="relay.status === 'accepted'" class="ti ti-check" :class="$style.icon" style="color: var(--success);"></i>
<i v-else-if="relay.status === 'rejected'" class="ti ti-ban" :class="$style.icon" style="color: var(--error);"></i>
<i v-else class="ti ti-clock" :class="$style.icon"></i>
<span>{{ i18n.t(`_relayStatus.${relay.status}`) }}</span>
<span>{{ i18n.ts._relayStatus[relay.status] }}</span>
</div>
<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
</div>

2
packages/frontend/src/pages/admin/roles.role.vue
View file

@ -104,7 +104,7 @@ function edit() {
async function del() {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('deleteAreYouSure', { x: role.name }),
text: i18n.tsx.deleteAreYouSure({ x: role.name }),
});
if (canceled) return;

18
packages/frontend/src/pages/admin/security.vue
View file

@ -71,27 +71,28 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps_m">
<span>{{ i18n.ts.activeEmailValidationDescription }}</span>
<MkSwitch v-model="enableActiveEmailValidation" @update:modelValue="save">
<MkSwitch v-model="enableActiveEmailValidation">
<template #label>Enable</template>
</MkSwitch>
<MkSwitch v-model="enableVerifymailApi" @update:modelValue="save">
<MkSwitch v-model="enableVerifymailApi">
<template #label>Use Verifymail.io API</template>
</MkSwitch>
<MkInput v-model="verifymailAuthKey" @update:modelValue="save">
<MkInput v-model="verifymailAuthKey">
<template #prefix><i class="ti ti-key"></i></template>
<template #label>Verifymail.io API Auth Key</template>
</MkInput>
<MkSwitch v-model="enableTruemailApi" @update:modelValue="save">
<MkSwitch v-model="enableTruemailApi">
<template #label>Use TrueMail API</template>
</MkSwitch>
<MkInput v-model="truemailInstance" @update:modelValue="save">
<MkInput v-model="truemailInstance">
<template #prefix><i class="ti ti-key"></i></template>
<template #label>TrueMail API Instance</template>
</MkInput>
<MkInput v-model="truemailAuthKey" @update:modelValue="save">
<MkInput v-model="truemailAuthKey">
<template #prefix><i class="ti ti-key"></i></template>
<template #label>TrueMail API Auth Key</template>
</MkInput>
<MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</div>
</MkFolder>
@ -192,7 +193,10 @@ async function init() {
enableActiveEmailValidation.value = meta.enableActiveEmailValidation;
enableVerifymailApi.value = meta.enableVerifymailApi;
verifymailAuthKey.value = meta.verifymailAuthKey;
bannedEmailDomains.value = meta.bannedEmailDomains.join('\n');
enableTruemailApi.value = meta.enableTruemailApi;
truemailInstance.value = meta.truemailInstance;
truemailAuthKey.value = meta.truemailAuthKey;
bannedEmailDomains.value = meta.bannedEmailDomains?.join('\n') || "";
}
function save() {

2
packages/frontend/src/pages/announcements.vue
View file

@ -80,7 +80,7 @@ async function read(announcement): Promise<void> {
const confirm = await os.confirm({
type: 'question',
title: i18n.ts._announcement.readConfirmTitle,
text: i18n.t('_announcement.readConfirmText', { title: announcement.title }),
text: i18n.tsx._announcement.readConfirmText({ title: announcement.title }),
});
if (confirm.canceled) return;
}

6
packages/frontend/src/pages/auth.form.vue
View file

@ -6,12 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<section>
<div v-if="app.permission.length > 0">
<p>{{ i18n.t('_auth.permission', { name }) }}</p>
<p>{{ i18n.tsx._auth.permission({ name }) }}</p>
<ul>
<li v-for="p in app.permission" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
<li v-for="p in app.permission" :key="p">{{ i18n.ts._permissions[p] }}</li>
</ul>
</div>
<div>{{ i18n.t('_auth.shareAccess', { name: `${name} (${app.id})` }) }}</div>
<div>{{ i18n.tsx._auth.shareAccess({ name: `${name} (${app.id})` }) }}</div>
<div :class="$style.buttons">
<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>

2
packages/frontend/src/pages/auth.vue
View file

@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<h1>{{ i18n.ts._auth.denied }}</h1>
</div>
<div v-if="state == 'accepted' && session">
<h1>{{ session.app.isAuthorized ? i18n.t('already-authorized') : i18n.ts.allowed }}</h1>
<h1>{{ session.app.isAuthorized ? i18n.ts['already-authorized'] : i18n.ts.allowed }}</h1>
<p v-if="session.app.callbackUrl">
{{ i18n.ts._auth.callback }}
<MkEllipsis/>

2
packages/frontend/src/pages/avatar-decorations.vue
View file

@ -60,7 +60,7 @@ function add() {
function del(avatarDecoration) {
os.confirm({
type: 'warning',
text: i18n.t('deleteAreYouSure', { x: avatarDecoration.name }),
text: i18n.tsx.deleteAreYouSure({ x: avatarDecoration.name }),
}).then(({ canceled }) => {
if (canceled) return;
avatarDecorations.value = avatarDecorations.value.filter(x => x !== avatarDecoration);

2
packages/frontend/src/pages/channel-editor.vue
View file

@ -174,7 +174,7 @@ function save() {
async function archive() {
const { canceled } = await os.confirm({
type: 'warning',
title: i18n.t('channelArchiveConfirmTitle', { name: name.value }),
title: i18n.tsx.channelArchiveConfirmTitle({ name: name.value }),
text: i18n.ts.channelArchiveConfirmDescription,
});

2
packages/frontend/src/pages/clip.vue
View file

@ -145,7 +145,7 @@ const headerActions = computed(() => clip.value && isOwned.value ? [{
handler: async (): Promise<void> => {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('deleteAreYouSure', { x: clip.value.name }),
text: i18n.tsx.deleteAreYouSure({ x: clip.value.name }),
});
if (canceled) return;

2
packages/frontend/src/pages/drive.file.info.vue
View file

@ -180,7 +180,7 @@ async function deleteFile() {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('driveFileDeleteConfirm', { name: file.value.name }),
text: i18n.tsx.driveFileDeleteConfirm({ name: file.value.name }),
});
if (canceled) return;

2
packages/frontend/src/pages/drop-and-fusion.game.vue
View file

@ -180,6 +180,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import { computed, onDeactivated, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
import * as Matter from 'matter-js';
import * as Misskey from 'misskey-js';
import { DropAndFusionGame, Mono } from 'misskey-bubble-game';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import MkRippleEffect from '@/components/MkRippleEffect.vue';
import * as os from '@/os.js';
@ -193,7 +194,6 @@ import { i18n } from '@/i18n.js';
import { useInterval } from '@/scripts/use-interval.js';
import { apiUrl } from '@/config.js';
import { $i } from '@/account.js';
import { DropAndFusionGame, Mono } from '@/scripts/drop-and-fusion-engine.js';
import * as sound from '@/scripts/sound.js';
import MkRange from '@/components/MkRange.vue';
import copyToClipboard from '@/scripts/copy-to-clipboard.js';

4
packages/frontend/src/pages/drop-and-fusion.vue
View file

@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.frame">
<div :class="$style.frameInner">
<div class="_gaps_s" style="padding: 16px;">
<div><b>{{ i18n.t('lastNDays', { n: 7 }) }} {{ i18n.ts.ranking }}</b> ({{ gameMode }})</div>
<div><b>{{ i18n.tsx.lastNDays({ n: 7 }) }} {{ i18n.ts.ranking }}</b> ({{ gameMode }})</div>
<div v-if="ranking" class="_gaps_s">
<div v-for="r in ranking" :key="r.id" :class="$style.rankingRecord">
<MkAvatar :link="true" style="width: 24px; height: 24px; margin-right: 4px;" :user="r.user"/>
@ -123,7 +123,7 @@ function onGameEnd() {
definePageMetadata({
title: i18n.ts.bubbleGame,
icon: 'ti ti-apple',
icon: 'ti ti-device-gamepad',
});
</script>

24
packages/frontend/src/pages/emoji-edit-dialog.vue
View file

@ -4,10 +4,12 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkModalWindow
ref="dialog"
:width="400"
@close="dialog.close()"
<MkWindow
ref="windowEl"
:initialWidth="400"
:initialHeight="500"
:canResize="false"
@close="windowEl.close()"
@closed="$emit('closed')"
>
<template v-if="emoji" #header>:{{ emoji.name }}:</template>
@ -90,13 +92,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton primary rounded style="margin: 0 auto;" @click="done"><i class="ti ti-check"></i> {{ props.emoji ? i18n.ts.update : i18n.ts.create }}</MkButton>
</div>
</div>
</MkModalWindow>
</MkWindow>
</template>
<script lang="ts" setup>
import { computed, watch, ref } from 'vue';
import * as Misskey from 'misskey-js';
import MkModalWindow from '@/components/MkModalWindow.vue';
import MkWindow from '@/components/MkWindow.vue';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
import MkTextarea from '@/components/MkTextarea.vue';
@ -114,7 +116,7 @@ const props = defineProps<{
emoji?: any,
}>();
const dialog = ref<InstanceType<typeof MkModalWindow> | null>(null);
const windowEl = ref<InstanceType<typeof MkWindow> | null>(null);
const name = ref<string>(props.emoji ? props.emoji.name : '');
const category = ref<string>(props.emoji ? props.emoji.category : '');
const aliases = ref<string>(props.emoji ? props.emoji.aliases.join(' ') : '');
@ -197,7 +199,7 @@ async function done() {
},
});
dialog.value.close();
windowEl.value.close();
} else {
const created = await os.apiWithDialog('admin/emoji/add', params);
@ -205,14 +207,14 @@ async function done() {
created: created,
});
dialog.value.close();
windowEl.value.close();
}
}
async function del() {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('removeAreYouSure', { x: name.value }),
text: i18n.tsx.removeAreYouSure({ x: name.value }),
});
if (canceled) return;
@ -222,7 +224,7 @@ async function del() {
emit('done', {
deleted: true,
});
dialog.value.close();
windowEl.value.close();
});
}
</script>

2
packages/frontend/src/pages/flash/flash-edit.vue
View file

@ -439,7 +439,7 @@ function show() {
async function del() {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('deleteAreYouSure', { x: flash.value.title }),
text: i18n.tsx.deleteAreYouSure({ x: flash.value.title }),
});
if (canceled) return;

2
packages/frontend/src/pages/follow.vue
View file

@ -20,7 +20,7 @@ import { mainRouter } from '@/global/router/main.js';
async function follow(user): Promise<void> {
const { canceled } = await os.confirm({
type: 'question',
text: i18n.t('followConfirm', { name: user.name || user.username }),
text: i18n.tsx.followConfirm({ name: user.name || user.username }),
});
if (canceled) {

15
packages/frontend/src/pages/games.vue
View file

@ -7,10 +7,17 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkStickyContainer>
<template #header><MkPageHeader/></template>
<MkSpacer :contentMax="800">
<div class="_panel">
<MkA to="/bubble-game">
<img src="/client-assets/drop-and-fusion/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
</MkA>
<div class="_gaps">
<div class="_panel">
<MkA to="/bubble-game">
<img src="/client-assets/drop-and-fusion/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
</MkA>
</div>
<div class="_panel">
<MkA to="/reversi">
<img src="/client-assets/reversi/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
</MkA>
</div>
</div>
</MkSpacer>
</MkStickyContainer>

0
packages/frontend/src/pages/install-extentions.vue → packages/frontend/src/pages/install-extensions.vue
View file

4
packages/frontend/src/pages/instance-info.vue
View file

@ -96,9 +96,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkSelect>
</div>
<div class="charts">
<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div>
<div class="label">{{ i18n.tsx.recentNHours({ n: 90 }) }}</div>
<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
<div class="label">{{ i18n.t('recentNDays', { n: 90 }) }}</div>
<div class="label">{{ i18n.tsx.recentNDays({ n: 90 }) }}</div>
<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
</div>
</div>

4
packages/frontend/src/pages/invite.vue
View file

@ -19,9 +19,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</MKSpacer>
<MkSpacer v-else :contentMax="800">
<div class="_gaps_m" style="text-align: center;">
<div v-if="resetCycle && inviteLimit">{{ i18n.t('inviteLimitResetCycle', { time: resetCycle, limit: inviteLimit }) }}</div>
<div v-if="resetCycle && inviteLimit">{{ i18n.tsx.inviteLimitResetCycle({ time: resetCycle, limit: inviteLimit }) }}</div>
<MkButton inline primary rounded :disabled="currentInviteLimit !== null && currentInviteLimit <= 0" @click="create"><i class="ti ti-user-plus"></i> {{ i18n.ts.createInviteCode }}</MkButton>
<div v-if="currentInviteLimit !== null">{{ i18n.t('createLimitRemaining', { limit: currentInviteLimit }) }}</div>
<div v-if="currentInviteLimit !== null">{{ i18n.tsx.createLimitRemaining({ limit: currentInviteLimit }) }}</div>
<MkPagination ref="pagingComponent" :pagination="pagination">
<template #default="{ items }">

6
packages/frontend/src/pages/miauth.vue
View file

@ -20,13 +20,13 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div v-else>
<div v-if="_permissions.length > 0">
<p v-if="name">{{ i18n.t('_auth.permission', { name }) }}</p>
<p v-if="name">{{ i18n.tsx._auth.permission({ name }) }}</p>
<p v-else>{{ i18n.ts._auth.permissionAsk }}</p>
<ul>
<li v-for="p in _permissions" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
<li v-for="p in _permissions" :key="p">{{ i18n.ts._permissions[p] }}</li>
</ul>
</div>
<div v-if="name">{{ i18n.t('_auth.shareAccess', { name }) }}</div>
<div v-if="name">{{ i18n.tsx._auth.shareAccess({ name }) }}</div>
<div v-else>{{ i18n.ts._auth.shareAccessAsk }}</div>
<div :class="$style.buttons">
<MkButton inline @click="deny">{{ i18n.ts.cancel }}</MkButton>

2
packages/frontend/src/pages/my-antennas/editor.vue
View file

@ -116,7 +116,7 @@ async function saveAntenna() {
async function deleteAntenna() {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('removeAreYouSure', { x: props.antenna.name }),
text: i18n.tsx.removeAreYouSure({ x: props.antenna.name }),
});
if (canceled) return;

2
packages/frontend/src/pages/my-lists/index.vue
View file

@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="items.length > 0" class="_gaps">
<MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/my/lists/${ list.id }`">
<div style="margin-bottom: 4px;">{{ list.name }} <span :class="$style.nUsers">({{ i18n.t('nUsers', { n: `${list.userIds.length}/${$i.policies['userEachUserListsLimit']}` }) }})</span></div>
<div style="margin-bottom: 4px;">{{ list.name }} <span :class="$style.nUsers">({{ i18n.tsx.nUsers({ n: `${list.userIds.length}/${$i.policies['userEachUserListsLimit']}` }) }})</span></div>
<MkAvatars :userIds="list.userIds" :limit="10"/>
</MkA>
</div>

4
packages/frontend/src/pages/my-lists/list.vue
View file

@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder defaultOpen>
<template #label>{{ i18n.ts.members }}</template>
<template #caption>{{ i18n.t('nUsers', { n: `${list.userIds.length}/${$i.policies['userEachUserListsLimit']}` }) }}</template>
<template #caption>{{ i18n.tsx.nUsers({ n: `${list.userIds.length}/${$i.policies['userEachUserListsLimit']}` }) }}</template>
<div class="_gaps_s">
<MkButton rounded primary style="margin: 0 auto;" @click="addUser()">{{ i18n.ts.addUser }}</MkButton>
@ -155,7 +155,7 @@ async function deleteList() {
if (!list.value) return;
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('removeAreYouSure', { x: list.value.name }),
text: i18n.tsx.removeAreYouSure({ x: list.value.name }),
});
if (canceled) return;

2
packages/frontend/src/pages/note.vue
View file

@ -147,7 +147,7 @@ definePageMetadata(computed(() => note.value ? {
avatar: note.value.user,
path: `/notes/${note.value.id}`,
share: {
title: i18n.t('noteOf', { user: note.value.user.name }),
title: i18n.tsx.noteOf({ user: note.value.user.name }),
text: note.value.text,
},
} : null));

2
packages/frontend/src/pages/notifications.vue
View file

@ -51,7 +51,7 @@ const directNotesPagination = {
function setFilter(ev) {
const typeItems = notificationTypes.map(t => ({
text: i18n.t(`_notification._types.${t}`),
text: i18n.ts._notification._types[t],
active: includeTypes.value && includeTypes.value.includes(t),
action: () => {
includeTypes.value = [t];

6
packages/frontend/src/pages/oauth.vue
View file

@ -9,13 +9,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSpacer :contentMax="800">
<div v-if="$i">
<div v-if="permissions.length > 0">
<p v-if="name">{{ i18n.t('_auth.permission', { name }) }}</p>
<p v-if="name">{{ i18n.tsx._auth.permission({ name }) }}</p>
<p v-else>{{ i18n.ts._auth.permissionAsk }}</p>
<ul>
<li v-for="p in permissions" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
<li v-for="p in permissions" :key="p">{{ i18n.ts._permissions[p] }}</li>
</ul>
</div>
<div v-if="name">{{ i18n.t('_auth.shareAccess', { name }) }}</div>
<div v-if="name">{{ i18n.tsx._auth.shareAccess({ name }) }}</div>
<div v-else>{{ i18n.ts._auth.shareAccessAsk }}</div>
<form :class="$style.buttons" action="/oauth/decision" accept-charset="utf-8" method="post">
<input name="login_token" type="hidden" :value="$i.token"/>

2
packages/frontend/src/pages/page-editor/page-editor.vue
View file

@ -175,7 +175,7 @@ function save() {
function del() {
os.confirm({
type: 'warning',
text: i18n.t('removeAreYouSure', { x: title.value.trim() }),
text: i18n.tsx.removeAreYouSure({ x: title.value.trim() }),
}).then(({ canceled }) => {
if (canceled) return;
misskeyApi('pages/delete', {

637
packages/frontend/src/pages/reversi/game.board.vue Normal file
View file

@ -0,0 +1,637 @@
<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="500">
<div :class="$style.root" class="_gaps">
<div style="display: flex; align-items: center; justify-content: center; gap: 10px;">
<span>({{ i18n.ts._reversi.black }})</span>
<MkAvatar style="width: 32px; height: 32px;" :user="blackUser" :showIndicator="true"/>
<span> vs </span>
<MkAvatar style="width: 32px; height: 32px;" :user="whiteUser" :showIndicator="true"/>
<span>({{ i18n.ts._reversi.white }})</span>
</div>
<div style="overflow: clip; line-height: 28px;">
<div v-if="!iAmPlayer && !game.isEnded && turnUser">
<Mfm :key="'turn:' + turnUser.id" :text="i18n.tsx._reversi.turnOf({ name: turnUser.name ?? turnUser.username })" :plain="true" :customEmojis="turnUser.emojis"/>
<MkEllipsis/>
</div>
<div v-if="(logPos !== game.logs.length) && turnUser">
<Mfm :key="'past-turn-of:' + turnUser.id" :text="i18n.tsx._reversi.pastTurnOf({ name: turnUser.name ?? turnUser.username })" :plain="true" :customEmojis="turnUser.emojis"/>
</div>
<div v-if="iAmPlayer && !game.isEnded && !isMyTurn">{{ i18n.ts._reversi.opponentTurn }}<MkEllipsis/><span style="margin-left: 1em; opacity: 0.7;">({{ i18n.tsx.remainingN({ n: opTurnTimerRmain }) }})</span></div>
<div v-if="iAmPlayer && !game.isEnded && isMyTurn"><span style="display: inline-block; font-weight: bold; animation: global-tada 1s linear infinite both;">{{ i18n.ts._reversi.myTurn }}</span><span style="margin-left: 1em; opacity: 0.7;">({{ i18n.tsx.remainingN({ n: myTurnTimerRmain }) }})</span></div>
<div v-if="game.isEnded && logPos == game.logs.length">
<template v-if="game.winner">
<Mfm :key="'won'" :text="i18n.tsx._reversi.won({ name: game.winner.name ?? game.winner.username })" :plain="true" :customEmojis="game.winner.emojis"/>
<span v-if="game.surrenderedUserId != null"> ({{ i18n.ts._reversi.surrendered }})</span>
<span v-if="game.timeoutUserId != null"> ({{ i18n.ts._reversi.timeout }})</span>
</template>
<template v-else>{{ i18n.ts._reversi.drawn }}</template>
</div>
</div>
<div :class="$style.board">
<div :class="$style.boardInner">
<div v-if="showBoardLabels" :class="$style.labelsX">
<span v-for="i in game.map[0].length" :class="$style.labelsXLabel">{{ String.fromCharCode(64 + i) }}</span>
</div>
<div style="display: flex;">
<div v-if="showBoardLabels" :class="$style.labelsY">
<div v-for="i in game.map.length" :class="$style.labelsYLabel">{{ i }}</div>
</div>
<div :class="$style.boardCells" :style="cellsStyle">
<div
v-for="(stone, i) in engine.board"
:key="i"
v-tooltip="`${String.fromCharCode(65 + engine.posToXy(i)[0])}${engine.posToXy(i)[1] + 1}`"
:class="[$style.boardCell, {
[$style.boardCell_empty]: stone == null,
[$style.boardCell_none]: engine.map[i] === 'null',
[$style.boardCell_isEnded]: game.isEnded,
[$style.boardCell_myTurn]: !game.isEnded && isMyTurn,
[$style.boardCell_can]: turnUser ? engine.canPut(turnUser.id === blackUser.id, i) : null,
[$style.boardCell_prev]: engine.prevPos === i
}]"
@click="putStone(i)"
>
<Transition
:enterActiveClass="$style.transition_flip_enterActive"
:leaveActiveClass="$style.transition_flip_leaveActive"
:enterFromClass="$style.transition_flip_enterFrom"
:leaveToClass="$style.transition_flip_leaveTo"
mode="default"
>
<template v-if="useAvatarAsStone">
<img v-if="stone === true" :class="$style.boardCellStone" :src="blackUser.avatarUrl"/>
<img v-else-if="stone === false" :class="$style.boardCellStone" :src="whiteUser.avatarUrl"/>
</template>
<template v-else>
<img v-if="stone === true" :class="$style.boardCellStone" src="/client-assets/reversi/stone_b.png"/>
<img v-else-if="stone === false" :class="$style.boardCellStone" src="/client-assets/reversi/stone_w.png"/>
</template>
</Transition>
</div>
</div>
<div v-if="showBoardLabels" :class="$style.labelsY">
<div v-for="i in game.map.length" :class="$style.labelsYLabel">{{ i }}</div>
</div>
</div>
<div v-if="showBoardLabels" :class="$style.labelsX">
<span v-for="i in game.map[0].length" :class="$style.labelsXLabel">{{ String.fromCharCode(64 + i) }}</span>
</div>
</div>
</div>
<div v-if="game.isEnded" class="_panel _gaps_s" style="padding: 16px;">
<div>{{ logPos }} / {{ game.logs.length }}</div>
<div v-if="!autoplaying" class="_buttonsCenter">
<MkButton :disabled="logPos === 0" @click="logPos = 0"><i class="ti ti-chevrons-left"></i></MkButton>
<MkButton :disabled="logPos === 0" @click="logPos--"><i class="ti ti-chevron-left"></i></MkButton>
<MkButton :disabled="logPos === game.logs.length" @click="logPos++"><i class="ti ti-chevron-right"></i></MkButton>
<MkButton :disabled="logPos === game.logs.length" @click="logPos = game.logs.length"><i class="ti ti-chevrons-right"></i></MkButton>
</div>
<MkButton style="margin: auto;" :disabled="autoplaying" @click="autoplay()"><i class="ti ti-player-play"></i></MkButton>
</div>
<div class="_panel" style="padding: 16px;">
<div>
<b>{{ i18n.tsx._reversi.turnCount({ count: logPos }) }}</b> {{ i18n.ts._reversi.black }}:{{ engine.blackCount }} {{ i18n.ts._reversi.white }}:{{ engine.whiteCount }} {{ i18n.ts._reversi.total }}:{{ engine.blackCount + engine.whiteCount }}
</div>
<div>
<div style="display: flex; align-items: center;">
<span style="margin-right: 8px;">({{ i18n.ts._reversi.black }})</span>
<MkAvatar style="width: 32px; height: 32px; margin-right: 8px;" :user="blackUser" :showIndicator="true"/>
<MkA :to="userPage(blackUser)"><MkUserName :user="blackUser"/></MkA>
</div>
<div> vs </div>
<div style="display: flex; align-items: center;">
<span style="margin-right: 8px;">({{ i18n.ts._reversi.white }})</span>
<MkAvatar style="width: 32px; height: 32px; margin-right: 8px;" :user="whiteUser" :showIndicator="true"/>
<MkA :to="userPage(whiteUser)"><MkUserName :user="whiteUser"/></MkA>
</div>
</div>
<div>
<p v-if="game.isLlotheo">{{ i18n.ts._reversi.isLlotheo }}</p>
<p v-if="game.loopedBoard">{{ i18n.ts._reversi.loopedMap }}</p>
<p v-if="game.canPutEverywhere">{{ i18n.ts._reversi.canPutEverywhere }}</p>
</div>
</div>
<MkFolder>
<template #label>{{ i18n.ts.options }}</template>
<div class="_gaps_s" style="text-align: left;">
<MkSwitch v-model="showBoardLabels">Show labels</MkSwitch>
<MkSwitch v-model="useAvatarAsStone">useAvatarAsStone</MkSwitch>
</div>
</MkFolder>
<div class="_buttonsCenter">
<MkButton v-if="!game.isEnded && iAmPlayer" danger @click="surrender">{{ i18n.ts._reversi.surrender }}</MkButton>
<MkButton @click="share">{{ i18n.ts.share }}</MkButton>
</div>
<MkA v-if="game.isEnded" :to="`/reversi`">
<img src="/client-assets/reversi/logo.png" style="display: block; max-width: 100%; width: 200px; margin: auto;"/>
</MkA>
</div>
</MkSpacer>
</template>
<script lang="ts" setup>
import { computed, onActivated, onDeactivated, onMounted, onUnmounted, ref, shallowRef, triggerRef, watch } from 'vue';
import * as CRC32 from 'crc-32';
import * as Misskey from 'misskey-js';
import * as Reversi from 'misskey-reversi';
import MkButton from '@/components/MkButton.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import { deepClone } from '@/scripts/clone.js';
import { useInterval } from '@/scripts/use-interval.js';
import { signinRequired } from '@/account.js';
import { i18n } from '@/i18n.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { userPage } from '@/filters/user.js';
import * as sound from '@/scripts/sound.js';
import * as os from '@/os.js';
import { confetti } from '@/scripts/confetti.js';
const $i = signinRequired();
const props = defineProps<{
game: Misskey.entities.ReversiGameDetailed;
connection?: Misskey.ChannelConnection | null;
}>();
const showBoardLabels = ref<boolean>(false);
const useAvatarAsStone = ref<boolean>(true);
const autoplaying = ref<boolean>(false);
const game = ref<Misskey.entities.ReversiGameDetailed>(deepClone(props.game));
const logPos = ref<number>(game.value.logs.length);
const engine = shallowRef<Reversi.Game>(Reversi.Serializer.restoreGame({
map: game.value.map,
isLlotheo: game.value.isLlotheo,
canPutEverywhere: game.value.canPutEverywhere,
loopedBoard: game.value.loopedBoard,
logs: game.value.logs,
}));
const iAmPlayer = computed(() => {
return game.value.user1Id === $i.id || game.value.user2Id === $i.id;
});
const myColor = computed(() => {
if (!iAmPlayer.value) return null;
if (game.value.user1Id === $i.id && game.value.black === 1) return true;
if (game.value.user2Id === $i.id && game.value.black === 2) return true;
return false;
});
const opColor = computed(() => {
if (!iAmPlayer.value) return null;
return !myColor.value;
});
const blackUser = computed(() => {
return game.value.black === 1 ? game.value.user1 : game.value.user2;
});
const whiteUser = computed(() => {
return game.value.black === 1 ? game.value.user2 : game.value.user1;
});
const turnUser = computed(() => {
if (engine.value.turn === true) {
return game.value.black === 1 ? game.value.user1 : game.value.user2;
} else if (engine.value.turn === false) {
return game.value.black === 1 ? game.value.user2 : game.value.user1;
} else {
return null;
}
});
const isMyTurn = computed(() => {
if (!iAmPlayer.value) return false;
const u = turnUser.value;
if (u == null) return false;
return u.id === $i.id;
});
const cellsStyle = computed(() => {
return {
'grid-template-rows': `repeat(${game.value.map.length}, 1fr)`,
'grid-template-columns': `repeat(${game.value.map[0].length}, 1fr)`,
};
});
watch(logPos, (v) => {
if (!game.value.isEnded) return;
engine.value = Reversi.Serializer.restoreGame({
map: game.value.map,
isLlotheo: game.value.isLlotheo,
canPutEverywhere: game.value.canPutEverywhere,
loopedBoard: game.value.loopedBoard,
logs: game.value.logs.slice(0, v),
});
});
if (game.value.isStarted && !game.value.isEnded) {
useInterval(() => {
if (game.value.isEnded || props.connection == null) return;
const crc32 = CRC32.str(JSON.stringify(game.value.logs)).toString();
if (_DEV_) console.log('crc32', crc32);
props.connection.send('resync', {
crc32: crc32,
});
}, 10000, { immediate: false, afterMounted: true });
}
const appliedOps: string[] = [];
function putStone(pos) {
if (game.value.isEnded) return;
if (!iAmPlayer.value) return;
if (!isMyTurn.value) return;
if (!engine.value.canPut(myColor.value!, pos)) return;
engine.value.putStone(pos);
triggerRef(engine);
sound.playUrl('/client-assets/reversi/put.mp3', {
volume: 1,
playbackRate: 1,
});
const id = Math.random().toString(36).slice(2);
props.connection!.send('putStone', {
pos: pos,
id,
});
appliedOps.push(id);
myTurnTimerRmain.value = game.value.timeLimitForEachTurn;
opTurnTimerRmain.value = game.value.timeLimitForEachTurn;
checkEnd();
}
const myTurnTimerRmain = ref<number>(game.value.timeLimitForEachTurn);
const opTurnTimerRmain = ref<number>(game.value.timeLimitForEachTurn);
const TIMER_INTERVAL_SEC = 3;
if (!props.game.isEnded) {
useInterval(() => {
if (myTurnTimerRmain.value > 0) {
myTurnTimerRmain.value = Math.max(0, myTurnTimerRmain.value - TIMER_INTERVAL_SEC);
}
if (opTurnTimerRmain.value > 0) {
opTurnTimerRmain.value = Math.max(0, opTurnTimerRmain.value - TIMER_INTERVAL_SEC);
}
if (iAmPlayer.value) {
if ((isMyTurn.value && myTurnTimerRmain.value === 0) || (!isMyTurn.value && opTurnTimerRmain.value === 0)) {
props.connection!.send('claimTimeIsUp', {});
}
}
}, TIMER_INTERVAL_SEC * 1000, { immediate: false, afterMounted: true });
}
async function onStreamLog(log: Reversi.Serializer.Log & { id: string | null }) {
game.value.logs = Reversi.Serializer.serializeLogs([
...Reversi.Serializer.deserializeLogs(game.value.logs),
log,
]);
logPos.value++;
if (log.id == null || !appliedOps.includes(log.id)) {
switch (log.operation) {
case 'put': {
sound.playUrl('/client-assets/reversi/put.mp3', {
volume: 1,
playbackRate: 1,
});
if (log.player !== engine.value.turn) { // = desyncが発生している
const _game = await misskeyApi('reversi/show-game', {
gameId: props.game.id,
});
restoreGame(_game);
return;
}
engine.value.putStone(log.pos);
triggerRef(engine);
myTurnTimerRmain.value = game.value.timeLimitForEachTurn;
opTurnTimerRmain.value = game.value.timeLimitForEachTurn;
checkEnd();
break;
}
default:
break;
}
}
}
function onStreamEnded(x) {
game.value = deepClone(x.game);
if (game.value.winnerId === $i.id) {
confetti({
duration: 1000 * 3,
});
sound.playUrl('/client-assets/reversi/win.mp3', {
volume: 1,
playbackRate: 1,
});
} else {
sound.playUrl('/client-assets/reversi/lose.mp3', {
volume: 1,
playbackRate: 1,
});
}
}
function checkEnd() {
game.value.isEnded = engine.value.isEnded;
if (game.value.isEnded) {
if (engine.value.winner === true) {
game.value.winnerId = game.value.black === 1 ? game.value.user1Id : game.value.user2Id;
game.value.winner = game.value.black === 1 ? game.value.user1 : game.value.user2;
} else if (engine.value.winner === false) {
game.value.winnerId = game.value.black === 1 ? game.value.user2Id : game.value.user1Id;
game.value.winner = game.value.black === 1 ? game.value.user2 : game.value.user1;
} else {
game.value.winnerId = null;
game.value.winner = null;
}
}
}
function restoreGame(_game) {
game.value = deepClone(_game);
engine.value = Reversi.Serializer.restoreGame({
map: game.value.map,
isLlotheo: game.value.isLlotheo,
canPutEverywhere: game.value.canPutEverywhere,
loopedBoard: game.value.loopedBoard,
logs: game.value.logs,
});
logPos.value = game.value.logs.length;
checkEnd();
}
function onStreamResynced(_game) {
console.log('resynced');
restoreGame(_game);
}
async function surrender() {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.ts.areYouSure,
});
if (canceled) return;
misskeyApi('reversi/surrender', {
gameId: game.value.id,
});
}
function autoplay() {
autoplaying.value = true;
logPos.value = 0;
const logs = Reversi.Serializer.deserializeLogs(game.value.logs);
window.setTimeout(() => {
logPos.value = 1;
let i = 1;
let previousLog = logs[0];
const tick = () => {
const log = logs[i];
const time = log.time - previousLog.time;
setTimeout(() => {
i++;
logPos.value++;
previousLog = log;
if (i < logs.length) {
tick();
} else {
autoplaying.value = false;
}
}, time);
};
tick();
}, 1000);
}
function share() {
os.post({
initialText: `#MisskeyReversi ${location.href}`,
instant: true,
});
}
onMounted(() => {
if (props.connection != null) {
props.connection.on('log', onStreamLog);
props.connection.on('resynced', onStreamResynced);
props.connection.on('ended', onStreamEnded);
}
});
onActivated(() => {
if (props.connection != null) {
props.connection.on('log', onStreamLog);
props.connection.on('resynced', onStreamResynced);
props.connection.on('ended', onStreamEnded);
}
});
onDeactivated(() => {
if (props.connection != null) {
props.connection.off('log', onStreamLog);
props.connection.off('resynced', onStreamResynced);
props.connection.off('ended', onStreamEnded);
}
});
onUnmounted(() => {
if (props.connection != null) {
props.connection.off('log', onStreamLog);
props.connection.off('resynced', onStreamResynced);
props.connection.off('ended', onStreamEnded);
}
});
</script>
<style lang="scss" module>
@use "sass:math";
.transition_flip_enterActive,
.transition_flip_leaveActive {
backface-visibility: hidden;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.transition_flip_enterFrom {
transform: rotateY(-180deg);
opacity: 0;
}
.transition_flip_leaveTo {
transform: rotateY(180deg);
opacity: 0;
}
$label-size: 16px;
$gap: 4px;
.root {
text-align: center;
}
.board {
width: 100%;
box-sizing: border-box;
margin: 0 auto;
padding: 7px;
background: #8C4F26;
box-shadow: 0 6px 16px #0007, 0 0 1px 1px #693410, inset 0 0 2px 1px #ce8a5c;
border-radius: 12px;
}
.boardInner {
padding: 32px;
background: var(--panel);
box-shadow: 0 0 2px 1px #ce8a5c, inset 0 0 1px 1px #693410;
border-radius: 8px;
}
@container (max-width: 400px) {
.boardInner {
padding: 16px;
}
}
.labelsX {
height: $label-size;
padding: 0 $label-size;
display: flex;
}
.labelsXLabel {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8em;
&:first-child {
margin-left: -(math.div($gap, 2));
}
&:last-child {
margin-right: -(math.div($gap, 2));
}
}
.labelsY {
width: $label-size;
display: flex;
flex-direction: column;
}
.labelsYLabel {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
&:first-child {
margin-top: -(math.div($gap, 2));
}
&:last-child {
margin-bottom: -(math.div($gap, 2));
}
}
.boardCells {
flex: 1;
display: grid;
grid-gap: $gap;
}
.boardCell {
background: transparent;
border-radius: 100%;
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);
}
&.boardCell_empty.boardCell_can {
border-color: var(--accent);
opacity: 0.5;
}
&.boardCell_empty.boardCell_myTurn {
border-color: var(--divider);
opacity: 1;
&.boardCell_can {
border-color: var(--accent);
cursor: pointer;
&:hover {
background: var(--accent);
}
}
}
&.boardCell_prev {
box-shadow: 0 0 0 4px var(--accent);
}
&.boardCell_isEnded {
border-color: var(--divider);
}
&.boardCell_none {
border-color: transparent !important;
}
}
.boardCellStone {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
user-select: none;
display: block;
width: 100%;
height: 100%;
border-radius: 100%;
}
</style>

278
packages/frontend/src/pages/reversi/game.setting.vue Normal file
View file

@ -0,0 +1,278 @@
<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<MkSpacer :contentMax="600">
<div style="text-align: center;"><b><MkUserName :user="game.user1"/></b> vs <b><MkUserName :user="game.user2"/></b></div>
<div :class="{ [$style.disallow]: isReady }">
<div class="_gaps" :class="{ [$style.disallowInner]: isReady }">
<div style="font-size: 1.5em; text-align: center;">{{ i18n.ts._reversi.gameSettings }}</div>
<div class="_panel">
<div style="display: flex; align-items: center; padding: 16px; border-bottom: solid 1px var(--divider);">
<div>{{ mapName }}</div>
<MkButton style="margin-left: auto;" @click="chooseMap">{{ i18n.ts._reversi.chooseBoard }}</MkButton>
</div>
<div style="padding: 16px;">
<div v-if="game.map == null"><i class="ti ti-dice"></i></div>
<div v-else :class="$style.board" :style="{ 'grid-template-rows': `repeat(${ game.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.map[0].length }, 1fr)` }">
<div v-for="(x, i) in game.map.join('')" :class="[$style.boardCell, { [$style.boardCellNone]: x == ' ' }]" @click="onMapCellClick(i, x)">
<i v-if="x === 'b' || x === 'w'" style="pointer-events: none; user-select: none;" :class="x === 'b' ? 'ti ti-circle-filled' : 'ti ti-circle'"></i>
</div>
</div>
</div>
</div>
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts._reversi.blackOrWhite }}</template>
<MkRadios v-model="game.bw">
<option value="random">{{ i18n.ts.random }}</option>
<option :value="'1'">
<I18n :src="i18n.ts._reversi.blackIs" tag="span">
<template #name>
<b><MkUserName :user="game.user1"/></b>
</template>
</I18n>
</option>
<option :value="'2'">
<I18n :src="i18n.ts._reversi.blackIs" tag="span">
<template #name>
<b><MkUserName :user="game.user2"/></b>
</template>
</I18n>
</option>
</MkRadios>
</MkFolder>
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts._reversi.timeLimitForEachTurn }}</template>
<template #suffix>{{ game.timeLimitForEachTurn }}{{ i18n.ts._time.second }}</template>
<MkRadios v-model="game.timeLimitForEachTurn">
<option :value="5">5{{ i18n.ts._time.second }}</option>
<option :value="10">10{{ i18n.ts._time.second }}</option>
<option :value="30">30{{ i18n.ts._time.second }}</option>
<option :value="60">60{{ i18n.ts._time.second }}</option>
<option :value="90">90{{ i18n.ts._time.second }}</option>
<option :value="120">120{{ i18n.ts._time.second }}</option>
<option :value="180">180{{ i18n.ts._time.second }}</option>
<option :value="3600">3600{{ i18n.ts._time.second }}</option>
</MkRadios>
</MkFolder>
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts._reversi.rules }}</template>
<div class="_gaps_s">
<MkSwitch v-model="game.isLlotheo" @update:modelValue="updateSettings('isLlotheo')">{{ i18n.ts._reversi.isLlotheo }}</MkSwitch>
<MkSwitch v-model="game.loopedBoard" @update:modelValue="updateSettings('loopedBoard')">{{ i18n.ts._reversi.loopedMap }}</MkSwitch>
<MkSwitch v-model="game.canPutEverywhere" @update:modelValue="updateSettings('canPutEverywhere')">{{ i18n.ts._reversi.canPutEverywhere }}</MkSwitch>
</div>
</MkFolder>
</div>
</div>
</MkSpacer>
<template #footer>
<div :class="$style.footer">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
<div style="text-align: center; margin-bottom: 10px;">
<template v-if="isReady && isOpReady">{{ i18n.ts._reversi.thisGameIsStartedSoon }}<MkEllipsis/></template>
<template v-if="isReady && !isOpReady">{{ i18n.ts._reversi.waitingForOther }}<MkEllipsis/></template>
<template v-if="!isReady && isOpReady">{{ i18n.ts._reversi.waitingForMe }}</template>
<template v-if="!isReady && !isOpReady">{{ i18n.ts._reversi.waitingBoth }}<MkEllipsis/></template>
</div>
<div class="_buttonsCenter">
<MkButton rounded danger @click="cancel">{{ i18n.ts.cancel }}</MkButton>
<MkButton v-if="!isReady" rounded primary @click="ready">{{ i18n.ts._reversi.ready }}</MkButton>
<MkButton v-if="isReady" rounded @click="unready">{{ i18n.ts._reversi.cancelReady }}</MkButton>
</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 Reversi from 'misskey-reversi';
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 mapCategories = Array.from(new Set(Object.values(Reversi.maps).map(x => x.category)));
const props = defineProps<{
game: Misskey.entities.ReversiGameDetailed;
connection: Misskey.ChannelConnection;
}>();
const game = ref<Misskey.entities.ReversiGameDetailed>(deepClone(props.game));
const mapName = computed(() => {
if (game.value.map == null) return 'Random';
const found = Object.values(Reversi.maps).find(x => x.data.join('') === game.value.map.join(''));
return found ? found.name! : '-Custom-';
});
const isReady = computed(() => {
if (game.value.user1Id === $i.id && game.value.user1Ready) return true;
if (game.value.user2Id === $i.id && game.value.user2Ready) return true;
return false;
});
const isOpReady = computed(() => {
if (game.value.user1Id !== $i.id && game.value.user1Ready) return true;
if (game.value.user2Id !== $i.id && game.value.user2Ready) return true;
return false;
});
watch(() => game.value.bw, () => {
updateSettings('bw');
});
watch(() => game.value.timeLimitForEachTurn, () => {
updateSettings('timeLimitForEachTurn');
});
function chooseMap(ev: MouseEvent) {
const menu: MenuItem[] = [];
for (const c of mapCategories) {
const maps = Object.values(Reversi.maps).filter(x => x.category === c);
if (maps.length === 0) continue;
if (c != null) {
menu.push({
type: 'label',
text: c,
});
}
for (const m of maps) {
menu.push({
text: m.name!,
action: () => {
game.value.map = m.data;
updateSettings('map');
},
});
}
}
os.popupMenu(menu, ev.currentTarget ?? ev.target);
}
async function cancel() {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.ts.areYouSure,
});
if (canceled) return;
props.connection.send('cancel', {});
router.push('/reversi');
}
function ready() {
props.connection.send('ready', true);
}
function unready() {
props.connection.send('ready', false);
}
function onChangeReadyStates(states) {
game.value.user1Ready = states.user1;
game.value.user2Ready = states.user2;
}
function updateSettings(key: keyof Misskey.entities.ReversiGameDetailed) {
props.connection.send('updateSettings', {
key: key,
value: game.value[key],
});
}
function onUpdateSettings({ userId, key, value }: { userId: string; key: keyof Misskey.entities.ReversiGameDetailed; value: any; }) {
if (userId === $i.id) return;
if (game.value[key] === value) return;
game.value[key] = value;
}
function onMapCellClick(pos: number, pixel: string) {
const x = pos % game.value.map[0].length;
const y = Math.floor(pos / game.value.map[0].length);
const newPixel =
pixel === ' ' ? '-' :
pixel === '-' ? 'b' :
pixel === 'b' ? 'w' :
' ';
const line = game.value.map[y].split('');
line[x] = newPixel;
game.value.map[y] = line.join('');
updateSettings('map');
}
props.connection.on('changeReadyStates', onChangeReadyStates);
props.connection.on('updateSettings', onUpdateSettings);
onUnmounted(() => {
props.connection.off('changeReadyStates', onChangeReadyStates);
props.connection.off('updateSettings', onUpdateSettings);
});
</script>
<style lang="scss" module>
.disallow {
cursor: not-allowed;
}
.disallowInner {
pointer-events: none;
user-select: none;
opacity: 0.7;
}
.board {
display: grid;
grid-gap: 4px;
width: 300px;
height: 300px;
margin: 0 auto;
color: var(--fg);
}
.boardCell {
display: grid;
place-items: center;
background: transparent;
border: solid 2px var(--divider);
border-radius: 6px;
overflow: clip;
cursor: pointer;
}
.boardCellNone {
border-color: transparent;
}
.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>

89
packages/frontend/src/pages/reversi/game.vue Normal file
View file

@ -0,0 +1,89 @@
<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div v-if="game == null || (!game.isEnded && connection == null)"><MkLoading/></div>
<GameSetting v-else-if="!game.isStarted" :game="game" :connection="connection!"/>
<GameBoard v-else :game="game" :connection="connection"/>
</template>
<script lang="ts" setup>
import { computed, watch, ref, onMounted, shallowRef, onUnmounted } from 'vue';
import * as Misskey from 'misskey-js';
import GameSetting from './game.setting.vue';
import GameBoard from './game.board.vue';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { useStream } from '@/stream.js';
import { signinRequired } from '@/account.js';
import { useRouter } from '@/global/router/supplier.js';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
const $i = signinRequired();
const router = useRouter();
const props = defineProps<{
gameId: string;
}>();
const game = shallowRef<Misskey.entities.ReversiGameDetailed | null>(null);
const connection = shallowRef<Misskey.ChannelConnection | null>(null);
watch(() => props.gameId, () => {
fetchGame();
});
async function fetchGame() {
const _game = await misskeyApi('reversi/show-game', {
gameId: props.gameId,
});
game.value = _game;
if (connection.value) {
connection.value.dispose();
}
if (!game.value.isEnded) {
connection.value = useStream().useChannel('reversiGame', {
gameId: game.value.id,
});
connection.value.on('started', x => {
game.value = x.game;
});
connection.value.on('canceled', x => {
connection.value?.dispose();
if (x.userId !== $i.id) {
os.alert({
type: 'warning',
text: i18n.ts._reversi.gameCanceled,
});
router.push('/reversi');
}
});
}
}
onMounted(() => {
fetchGame();
});
onUnmounted(() => {
if (connection.value) {
connection.value.dispose();
}
});
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(computed(() => ({
title: 'Reversi',
icon: 'ti ti-device-gamepad',
})));
</script>

318
packages/frontend/src/pages/reversi/index.vue Normal file
View file

@ -0,0 +1,318 @@
<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer v-if="!matchingAny && !matchingUser" :contentMax="600">
<div class="_gaps">
<div>
<img src="/client-assets/reversi/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
</div>
<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">
<template #label>{{ i18n.ts.invitations }}</template>
<div class="_gaps_s">
<button v-for="user in invitations" :key="user.id" v-panel :class="$style.invitation" class="_button" tabindex="-1" @click="accept(user)">
<MkAvatar style="width: 32px; height: 32px; margin-right: 8px;" :user="user" :showIndicator="true"/>
<span style="margin-right: 8px;"><b><MkUserName :user="user"/></b></span>
<span>@{{ user.username }}</span>
</button>
</div>
</MkFolder>
<MkFolder v-if="$i" :defaultOpen="true">
<template #label>{{ i18n.ts._reversi.myGames }}</template>
<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}`">
<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>
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user1"/>
<span style="margin: 0 1em;">vs</span>
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user2"/>
<span v-if="g.winnerId === g.user1Id" style="margin-left: 0.75em; visibility: hidden;"><i class="ti ti-x"></i></span>
<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-else>{{ i18n.ts._reversi.ended }}</span>
<MkTime style="margin-left: auto; opacity: 0.7;" :time="g.createdAt"/>
</div>
</MkA>
</div>
</template>
</MkPagination>
</MkFolder>
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts._reversi.allGames }}</template>
<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}`">
<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>
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user1"/>
<span style="margin: 0 1em;">vs</span>
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user2"/>
<span v-if="g.winnerId === g.user1Id" style="margin-left: 0.75em; visibility: hidden;"><i class="ti ti-x"></i></span>
<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-else>{{ i18n.ts._reversi.ended }}</span>
<MkTime style="margin-left: auto; opacity: 0.7;" :time="g.createdAt"/>
</div>
</MkA>
</div>
</template>
</MkPagination>
</MkFolder>
</div>
</MkSpacer>
<MkSpacer v-else :contentMax="600">
<div :class="$style.waitingScreen">
<div v-if="matchingUser" :class="$style.waitingScreenTitle">
<I18n :src="i18n.ts.waitingFor" tag="span">
<template #x>
<b><MkUserName :user="matchingUser"/></b>
</template>
</I18n>
<MkEllipsis/>
</div>
<div v-else :class="$style.waitingScreenTitle">
{{ i18n.ts._reversi.lookingForPlayer }}<MkEllipsis/>
</div>
<div class="cancel">
<MkButton inline rounded @click="cancelMatching">{{ i18n.ts.cancel }}</MkButton>
</div>
</div>
</MkSpacer>
</template>
<script lang="ts" setup>
import { computed, onDeactivated, onMounted, onUnmounted, ref } from 'vue';
import * as Misskey from 'misskey-js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { useStream } from '@/stream.js';
import MkButton from '@/components/MkButton.vue';
import MkFolder from '@/components/MkFolder.vue';
import { i18n } from '@/i18n.js';
import { $i } from '@/account.js';
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,
limit: 10,
params: {
my: true,
},
};
const gamesPagination = {
endpoint: 'reversi/games' as const,
limit: 10,
};
const router = useRouter();
if ($i) {
const connection = useStream().useChannel('reversi');
connection.on('matched', x => {
startGame(x.game);
});
connection.on('invited', invitation => {
if (invitations.value.some(x => x.id === invitation.user.id)) return;
invitations.value.unshift(invitation.user);
});
onUnmounted(() => {
connection.dispose();
});
}
const invitations = ref<Misskey.entities.UserLite[]>([]);
const matchingUser = ref<Misskey.entities.UserLite | null>(null);
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}`);
}
async function matchHeatbeat() {
if (matchingUser.value) {
const res = await misskeyApi('reversi/match', {
userId: matchingUser.value.id,
});
if (res != null) {
startGame(res);
}
} else if (matchingAny.value) {
const res = await misskeyApi('reversi/match', {
userId: null,
});
if (res != null) {
startGame(res);
}
}
}
async function matchUser() {
const user = await os.selectUser({ local: true });
if (user == null) return;
matchingUser.value = user;
matchHeatbeat();
}
async function matchAny() {
matchingAny.value = true;
matchHeatbeat();
}
function cancelMatching() {
if (matchingUser.value) {
misskeyApi('reversi/cancel-match', { userId: matchingUser.value.id });
matchingUser.value = null;
} else if (matchingAny.value) {
misskeyApi('reversi/cancel-match', { userId: null });
matchingAny.value = false;
}
}
async function accept(user) {
const game = await misskeyApi('reversi/match', {
userId: user.id,
});
if (game) {
startGame(game);
}
}
useInterval(matchHeatbeat, 1000 * 10, { immediate: false, afterMounted: true });
onMounted(() => {
misskeyApi('reversi/invitations').then(_invitations => {
invitations.value = _invitations;
});
});
onDeactivated(() => {
cancelMatching();
});
onUnmounted(() => {
cancelMatching();
});
definePageMetadata(computed(() => ({
title: 'Reversi',
icon: 'ti ti-device-gamepad',
})));
</script>
<style lang="scss" module>
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.2; }
}
.invitation {
display: flex;
box-sizing: border-box;
width: 100%;
padding: 16px;
line-height: 32px;
text-align: left;
}
.gamePreviews {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: var(--margin);
}
.gamePreview {
font-size: 90%;
border-radius: 8px;
overflow: clip;
}
.gamePreviewActive {
box-shadow: inset 0 0 8px 0px var(--accent);
}
.gamePreviewPlayers {
text-align: center;
padding: 16px;
line-height: 32px;
}
.gamePreviewPlayersAvatar {
width: 32px;
height: 32px;
&:first-child {
margin-right: 8px;
}
&:last-child {
margin-left: 8px;
}
}
.gamePreviewFooter {
display: flex;
align-items: baseline;
border-top: solid 0.5px var(--divider);
padding: 6px 10px;
font-size: 0.9em;
}
.gamePreviewStatusActive {
color: var(--accent);
font-weight: bold;
animation: blink 2s infinite;
}
.waitingScreen {
text-align: center;
}
.waitingScreenTitle {
font-size: 1.5em;
margin-bottom: 16px;
margin-top: 32px;
}
</style>

2
packages/frontend/src/pages/settings/2fa.vue
View file

@ -141,7 +141,7 @@ async function unregisterKey(key): Promise<void> {
const confirm = await os.confirm({
type: 'question',
title: i18n.ts._2fa.removeKey,
text: i18n.t('_2fa.removeKeyConfirm', { name: key.name }),
text: i18n.tsx._2fa.removeKeyConfirm({ name: key.name }),
});
if (confirm.canceled) return;

2
packages/frontend/src/pages/settings/apps.vue
View file

@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<details>
<summary>{{ i18n.ts.details }}</summary>
<ul>
<li v-for="p in token.permission" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
<li v-for="p in token.permission" :key="p">{{ i18n.ts._permissions[p] }}</li>
</ul>
</details>
<div>

2
packages/frontend/src/pages/settings/avatar-decoration.vue
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div>
<div v-if="!loading" class="_gaps">
<MkInfo>{{ i18n.t('_profile.avatarDecorationMax', { max: $i.policies.avatarDecorationLimit }) }} ({{ i18n.t('remainingN', { n: $i.policies.avatarDecorationLimit - $i.avatarDecorations.length }) }})</MkInfo>
<MkInfo>{{ i18n.tsx._profile.avatarDecorationMax({ max: $i.policies.avatarDecorationLimit }) }} ({{ i18n.tsx.remainingN({ n: $i.policies.avatarDecorationLimit - $i.avatarDecorations.length }) }})</MkInfo>
<MkAvatar :class="$style.avatar" :user="$i" forceShowDecoration/>

15
packages/frontend/src/pages/settings/general.vue
View file

@ -17,6 +17,13 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</MkSelect>
<MkRadios v-model="hemisphere">
<template #label>{{ i18n.ts.hemisphere }}</template>
<option value="N">{{ i18n.ts._hemisphere.N }}</option>
<option value="S">{{ i18n.ts._hemisphere.S }}</option>
<template #caption>{{ i18n.ts._hemisphere.caption }}</template>
</MkRadios>
<MkRadios v-model="overridedDeviceKind">
<template #label>{{ i18n.ts.overridedDeviceKind }}</template>
<option :value="null">{{ i18n.ts.auto }}</option>
@ -78,9 +85,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkRadios v-model="mediaListWithOneImageAppearance">
<template #label>{{ i18n.ts.mediaListWithOneImageAppearance }}</template>
<option value="expand">{{ i18n.ts.default }}</option>
<option value="16_9">{{ i18n.t('limitTo', { x: '16:9' }) }}</option>
<option value="1_1">{{ i18n.t('limitTo', { x: '1:1' }) }}</option>
<option value="2_3">{{ i18n.t('limitTo', { x: '2:3' }) }}</option>
<option value="16_9">{{ i18n.tsx.limitTo({ x: '16:9' }) }}</option>
<option value="1_1">{{ i18n.tsx.limitTo({ x: '1:1' }) }}</option>
<option value="2_3">{{ i18n.tsx.limitTo({ x: '2:3' }) }}</option>
</MkRadios>
</div>
</FormSection>
@ -261,6 +268,7 @@ async function reloadAsk() {
unisonReload();
}
const hemisphere = computed(defaultStore.makeGetterSetter('hemisphere'));
const overridedDeviceKind = computed(defaultStore.makeGetterSetter('overridedDeviceKind'));
const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior'));
const showNoteActionsOnlyHover = computed(defaultStore.makeGetterSetter('showNoteActionsOnlyHover'));
@ -324,6 +332,7 @@ watch(useSystemFont, () => {
});
watch([
hemisphere,
lang,
fontSize,
useSystemFont,

4
packages/frontend/src/pages/settings/migration.vue
View file

@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps">
<MkInput v-for="(_, i) in accountAliases" v-model="accountAliases[i]">
<template #prefix><i class="ti ti-plane-arrival"></i></template>
<template #label>{{ i18n.t('_accountMigration.moveFromLabel', { n: i + 1 }) }}</template>
<template #label>{{ i18n.tsx._accountMigration.moveFromLabel({ n: i + 1 }) }}</template>
</MkInput>
</div>
</div>
@ -97,7 +97,7 @@ async function move(): Promise<void> {
const account = moveToAccount.value;
const confirm = await os.confirm({
type: 'warning',
text: i18n.t('_accountMigration.migrationConfirm', { account }),
text: i18n.tsx._accountMigration.migrationConfirm({ account }),
});
if (confirm.canceled) return;
await os.apiWithDialog('i/move', {

2
packages/frontend/src/pages/settings/mute-block.word-mute.vue
View file

@ -58,7 +58,7 @@ async function save() {
os.alert({
type: 'error',
title: i18n.ts.regexpError,
text: i18n.t('regexpErrorDescription', { tab: 'word mute', line: i + 1 }) + '\n' + err.toString(),
text: i18n.tsx.regexpErrorDescription({ tab: 'word mute', line: i + 1 }) + '\n' + err.toString(),
});
// re-throw error so these invalid settings are not saved
throw err;

2
packages/frontend/src/pages/settings/notifications.vue
View file

@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts.notificationRecieveConfig }}</template>
<div class="_gaps_s">
<MkFolder v-for="type in notificationTypes.filter(x => !nonConfigurableNotificationTypes.includes(x))" :key="type">
<template #label>{{ i18n.t('_notification._types.' + type) }}</template>
<template #label>{{ i18n.ts._notification._types[type] }}</template>
<template #suffix>
{{
$i.notificationRecieveConfig[type]?.type === 'never' ? i18n.ts.none :

4
packages/frontend/src/pages/settings/profile.vue
View file

@ -206,7 +206,7 @@ function changeAvatar(ev) {
const { canceled } = await os.confirm({
type: 'question',
text: i18n.t('cropImageAsk'),
text: i18n.ts.cropImageAsk,
okText: i18n.ts.cropYes,
cancelText: i18n.ts.cropNo,
});
@ -232,7 +232,7 @@ function changeBanner(ev) {
const { canceled } = await os.confirm({
type: 'question',
text: i18n.t('cropImageAsk'),
text: i18n.ts.cropImageAsk,
okText: i18n.ts.cropYes,
cancelText: i18n.ts.cropNo,
});

4
packages/frontend/src/pages/settings/sounds.vue
View file

@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts.sounds }}</template>
<div class="_gaps_s">
<MkFolder v-for="type in operationTypes" :key="type">
<template #label>{{ i18n.t('_sfx.' + type) }}</template>
<template #label>{{ i18n.ts._sfx[type] }}</template>
<template #suffix>{{ getSoundTypeName(sounds[type].type) }}</template>
<XSound :type="sounds[type].type" :volume="sounds[type].volume" :fileId="sounds[type].fileId" :fileUrl="sounds[type].fileUrl" @update="(res) => updated(type, res)"/>
@ -33,9 +33,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { Ref, computed, ref } from 'vue';
import XSound from './sounds.sound.vue';
import type { SoundType, OperationType } from '@/scripts/sound.js';
import type { SoundStore } from '@/store.js';
import XSound from './sounds.sound.vue';
import MkRange from '@/components/MkRange.vue';
import MkButton from '@/components/MkButton.vue';
import FormSection from '@/components/form/section.vue';

2
packages/frontend/src/pages/settings/theme.install.vue
View file

@ -33,7 +33,7 @@ async function install(code: string): Promise<void> {
await installTheme(code);
os.alert({
type: 'success',
text: i18n.t('_theme.installed', { name: theme.name }),
text: i18n.tsx._theme.installed({ name: theme.name }),
});
} catch (err) {
switch (err.message.toLowerCase()) {

2
packages/frontend/src/pages/settings/webhook.edit.vue
View file

@ -99,7 +99,7 @@ async function save(): Promise<void> {
async function del(): Promise<void> {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('deleteAreYouSure', { x: webhook.name }),
text: i18n.tsx.deleteAreYouSure({ x: webhook.name }),
});
if (canceled) return;

2
packages/frontend/src/pages/signup-complete.vue
View file

@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ti ti-user-check"></i>
</div>
<div class="_gaps_m" style="padding: 32px;">
<div>{{ i18n.t('clickToFinishEmailVerification', { ok: i18n.ts.gotIt }) }}</div>
<div>{{ i18n.tsx.clickToFinishEmailVerification({ ok: i18n.ts.gotIt }) }}</div>
<div>
<MkButton gradate large rounded type="submit" :disabled="submitting" data-cy-admin-ok style="margin: 0 auto;">
{{ submitting ? i18n.ts.processing : i18n.ts.gotIt }}<MkEllipsis v-if="submitting"/>

2
packages/frontend/src/pages/theme-editor.vue
View file

@ -208,7 +208,7 @@ async function saveAs() {
changed.value = false;
os.alert({
type: 'success',
text: i18n.t('_theme.installed', { name: theme.value.name }),
text: i18n.tsx._theme.installed({ name: theme.value.name }),
});
}

85
packages/frontend/src/pages/timeline.vue
View file

@ -66,19 +66,49 @@ const rootEl = shallowRef<HTMLElement>();
const queue = ref(0);
const srcWhenNotSignin = ref(isLocalTimelineAvailable ? 'local' : 'global');
const src = computed({ get: () => ($i ? defaultStore.reactiveState.tl.value.src : srcWhenNotSignin.value), set: (x) => saveSrc(x) });
const withRenotes = ref(true);
const withReplies = ref($i ? defaultStore.state.tlWithReplies : false);
const onlyFiles = ref(false);
const src = computed({
get: () => ($i ? defaultStore.reactiveState.tl.value.src : srcWhenNotSignin.value),
set: (x) => saveSrc(x),
});
const withRenotes = computed({
get: () => defaultStore.reactiveState.tl.value.filter.withRenotes,
set: (x: boolean) => saveTlFilter('withRenotes', x),
});
const withReplies = computed({
get: () => {
if (!$i) return false;
if (['local', 'social'].includes(src.value) && onlyFiles.value) {
return false;
} else {
return defaultStore.reactiveState.tl.value.filter.withReplies;
}
},
set: (x: boolean) => saveTlFilter('withReplies', x),
});
const onlyFiles = computed({
get: () => {
if (['local', 'social'].includes(src.value) && withReplies.value) {
return false;
} else {
return defaultStore.reactiveState.tl.value.filter.onlyFiles;
}
},
set: (x: boolean) => saveTlFilter('onlyFiles', x),
});
const withSensitive = computed({
get: () => defaultStore.reactiveState.tl.value.filter.withSensitive,
set: (x: boolean) => {
saveTlFilter('withSensitive', x);
// これだけはクライアント側で完結する処理なので手動でリロード
tlComponent.value?.reloadTimeline();
},
});
watch(src, () => {
queue.value = 0;
});
watch(withReplies, (x) => {
if ($i) defaultStore.set('tlWithReplies', x);
});
function queueUpdated(q: number): void {
queue.value = q;
}
@ -154,18 +184,38 @@ async function chooseChannel(ev: MouseEvent): Promise<void> {
}
function saveSrc(newSrc: 'home' | 'local' | 'social' | 'global' | `list:${string}`): void {
let userList = null;
const out = {
...defaultStore.state.tl,
src: newSrc,
};
if (newSrc.startsWith('userList:')) {
const id = newSrc.substring('userList:'.length);
userList = defaultStore.reactiveState.pinnedUserLists.value.find(l => l.id === id);
out.userList = defaultStore.reactiveState.pinnedUserLists.value.find(l => l.id === id) ?? null;
}
defaultStore.set('tl', {
src: newSrc,
userList,
});
defaultStore.set('tl', out);
srcWhenNotSignin.value = newSrc;
}
function saveTlFilter(key: keyof typeof defaultStore.state.tl.filter, newValue: boolean) {
if (key !== 'withReplies' || $i) {
const out = { ...defaultStore.state.tl };
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (!out.filter) {
out.filter = {
withRenotes: true,
withReplies: true,
withSensitive: true,
onlyFiles: false,
};
}
out.filter[key] = newValue;
defaultStore.set('tl', out);
}
return newValue;
}
async function timetravel(): Promise<void> {
const { canceled, result: date } = await os.inputDate({
title: i18n.ts.date,
@ -202,6 +252,10 @@ const headerActions = computed(() => {
ref: withReplies,
disabled: onlyFiles,
} : undefined, {
type: 'switch',
text: i18n.ts.withSensitive,
ref: withSensitive,
}, {
type: 'switch',
text: i18n.ts.fileAttachedOnly,
ref: onlyFiles,
@ -215,8 +269,7 @@ const headerActions = computed(() => {
icon: 'ti ti-refresh',
text: i18n.ts.reload,
handler: (ev: Event) => {
console.log('called');
tlComponent.value.reloadTimeline();
tlComponent.value?.reloadTimeline();
},
});
}

2
packages/frontend/src/pages/user/home.vue
View file

@ -87,7 +87,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</dl>
<dl v-if="user.birthday" class="field">
<dt class="name"><i class="ti ti-cake ti-fw"></i> {{ i18n.ts.birthday }}</dt>
<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ i18n.t('yearsOld', { age }) }})</dd>
<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ i18n.tsx.yearsOld({ age }) }})</dd>
</dl>
<dl class="field">
<dt class="name"><i class="ti ti-calendar ti-fw"></i> {{ i18n.ts.registeredDate }}</dt>