natty
/
misskey-awawa
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

enhance(frontend): リファクタリングなど

This commit is contained in:
syuilo 2024-01-21 20:26:52 +09:00
parent 3784b39a5f
commit 3ff229af6f
13 changed files with 64 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
locales/index.d.ts vendored
View File

@ -4824,6 +4824,9 @@ export interface Locale extends ILocale {
* タイトルへ
*/
"backToTitle": string;
/**
* お住まいの地域
*/
"hemisphere": string;
/**
* センシティブなファイルを含むノートを表示
@ -9422,8 +9425,17 @@ export interface Locale extends ILocale {
};
};
"_hemisphere": {
/**
* 北半球
*/
"N": string;
/**
* 南半球
*/
"S": string;
/**
* 一部のクライアント設定で、季節を判定するために使用します。
*/
"caption": string;
};
"_reversi": {

2
packages/frontend/src/components/MkLaunchPad.vue
View File

@ -138,7 +138,7 @@ function close() {
left: 32px;
color: var(--indicator);
font-size: 8px;
animation: blink 1s infinite;
animation: global-blink 1s infinite;
@media (max-width: 500px) {
top: 16px;

2
packages/frontend/src/components/MkMenu.vue
View File

@ -450,7 +450,7 @@ onBeforeUnmount(() => {
align-items: center;
color: var(--indicator);
font-size: 12px;
animation: blink 1s infinite;
animation: global-blink 1s infinite;
}
.divider {

6
packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
View File

@ -62,12 +62,12 @@ export default function(props: MfmProps, context: SetupContext<MfmEvents>) {
if (t == null) return null;
return t.match(/^[0-9.]+s$/) ? t : null;
};
const validColor = (c: string | null | undefined): string | null => {
if (c == null) return null;
return c.match(/^[0-9a-f]{3,6}$/i) ? c : null;
};
const useAnim = defaultStore.state.advancedMfm && defaultStore.state.animatedMfm;
/**
@ -118,7 +118,7 @@ export default function(props: MfmProps, context: SetupContext<MfmEvents>) {
case 'tada': {
const speed = validTime(token.props.args.speed) ?? '1s';
const delay = validTime(token.props.args.delay) ?? '0s';
style = 'font-size: 150%;' + (useAnim ? `animation: tada ${speed} linear infinite both; animation-delay: ${delay};` : '');
style = 'font-size: 150%;' + (useAnim ? `animation: global-tada ${speed} linear infinite both; animation-delay: ${delay};` : '');
break;
}
case 'jelly': {

2
packages/frontend/src/pages/reversi/game.board.vue
View File

@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<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: 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="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"/>

41
packages/frontend/src/pages/reversi/index.vue
View File

@ -34,12 +34,19 @@ 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" tabindex="-1" :to="`/reversi/g/${g.id}`">
<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">
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user1"/> vs <MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user2"/>
<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 :style="!g.isEnded ? 'color: var(--accent);' : ''">{{ g.isEnded ? i18n.ts._reversi.ended : i18n.ts._reversi.playing }}</span>
<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>
@ -53,12 +60,19 @@ 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" tabindex="-1" :to="`/reversi/g/${g.id}`">
<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">
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user1"/> vs <MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user2"/>
<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 :style="!g.isEnded ? 'color: var(--accent);' : ''">{{ g.isEnded ? i18n.ts._reversi.ended : i18n.ts._reversi.playing }}</span>
<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>
@ -229,6 +243,11 @@ definePageMetadata(computed(() => ({
</script>
<style lang="scss" module>
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.2; }
}
.invitation {
display: flex;
box-sizing: border-box;
@ -250,6 +269,10 @@ definePageMetadata(computed(() => ({
overflow: clip;
}
.gamePreviewActive {
box-shadow: inset 0 0 8px 0px var(--accent);
}
.gamePreviewPlayers {
text-align: center;
padding: 16px;
@ -277,6 +300,12 @@ definePageMetadata(computed(() => ({
font-size: 0.9em;
}
.gamePreviewStatusActive {
color: var(--accent);
font-weight: bold;
animation: blink 2s infinite;
}
.waitingScreen {
text-align: center;
}

8
packages/frontend/src/style.scss
View File

@ -425,13 +425,13 @@ rt {
transform: scale(0.9);
}
@keyframes blink {
@keyframes global-blink {
0% { opacity: 1; transform: scale(1); }
30% { opacity: 1; transform: scale(1); }
90% { opacity: 0; transform: scale(0.5); }
}
@keyframes tada {
@keyframes global-tada {
from {
transform: scale3d(1, 1, 1);
}
@ -461,7 +461,7 @@ rt {
._anime_bounce {
will-change: transform;
animation: bounce ease 0.7s;
animation: global-bounce ease 0.7s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
}
@ -473,7 +473,7 @@ rt {
transition: transform 0.1s ease;
}
@keyframes bounce {
@keyframes global-bounce {
0% {
transform: scaleX(0.90) scaleY(0.90) ;
}

2
packages/frontend/src/ui/_common_/navbar-for-mobile.vue
View File

@ -254,7 +254,7 @@ function more() {
left: 20px;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
animation: global-blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;

4
packages/frontend/src/ui/_common_/navbar.vue
View File

@ -313,7 +313,7 @@ function more(ev: MouseEvent) {
left: 20px;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
animation: global-blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
@ -483,7 +483,7 @@ function more(ev: MouseEvent) {
left: 24px;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
animation: global-blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;

2
packages/frontend/src/ui/classic.header.vue
View File

@ -141,7 +141,7 @@ onMounted(() => {
left: 0;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
animation: global-blink 1s infinite;
}
&:hover {

2
packages/frontend/src/ui/classic.sidebar.vue
View File

@ -220,7 +220,7 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
left: 0;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
animation: global-blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;

2
packages/frontend/src/ui/deck.vue
View File

@ -488,7 +488,7 @@ body {
left: 0;
color: var(--indicator);
font-size: 16px;
animation: blink 1s infinite;
animation: global-blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;

2
packages/frontend/src/ui/universal.vue
View File

@ -448,7 +448,7 @@ $widgets-hide-threshold: 1090px;
left: 0;
color: var(--indicator);
font-size: 16px;
animation: blink 1s infinite;
animation: global-blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;