merge: upstream (2)
This commit is contained in:
commit
9d3f34d88f
12 changed files with 50 additions and 21 deletions
|
@ -138,7 +138,7 @@ function close() {
|
||||||
left: 32px;
|
left: 32px;
|
||||||
color: var(--indicator);
|
color: var(--indicator);
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
animation: blink 1s infinite;
|
animation: global-blink 1s infinite;
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
@media (max-width: 500px) {
|
||||||
top: 16px;
|
top: 16px;
|
||||||
|
|
|
@ -450,7 +450,7 @@ onBeforeUnmount(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: var(--indicator);
|
color: var(--indicator);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
animation: blink 1s infinite;
|
animation: global-blink 1s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divider {
|
.divider {
|
||||||
|
|
|
@ -121,7 +121,7 @@ export default function(props: MfmProps, context: SetupContext<MfmEvents>) {
|
||||||
case 'tada': {
|
case 'tada': {
|
||||||
const speed = validTime(token.props.args.speed) ?? '1s';
|
const speed = validTime(token.props.args.speed) ?? '1s';
|
||||||
const delay = validTime(token.props.args.delay) ?? '0s';
|
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;
|
break;
|
||||||
}
|
}
|
||||||
case 'jelly': {
|
case 'jelly': {
|
||||||
|
|
|
@ -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"/>
|
<Mfm :key="'past-turn-of:' + turnUser.id" :text="i18n.tsx._reversi.pastTurnOf({ name: turnUser.name ?? turnUser.username })" :plain="true" :customEmojis="turnUser.emojis"/>
|
||||||
</div>
|
</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">{{ 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">
|
<div v-if="game.isEnded && logPos == game.logs.length">
|
||||||
<template v-if="game.winner">
|
<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"/>
|
<Mfm :key="'won'" :text="i18n.tsx._reversi.won({ name: game.winner.name ?? game.winner.username })" :plain="true" :customEmojis="game.winner.emojis"/>
|
||||||
|
|
|
@ -34,12 +34,19 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<MkPagination :pagination="myGamesPagination" :disableAutoLoad="true">
|
<MkPagination :pagination="myGamesPagination" :disableAutoLoad="true">
|
||||||
<template #default="{ items }">
|
<template #default="{ items }">
|
||||||
<div :class="$style.gamePreviews">
|
<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">
|
<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>
|
||||||
<div :class="$style.gamePreviewFooter">
|
<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"/>
|
<MkTime style="margin-left: auto; opacity: 0.7;" :time="g.createdAt"/>
|
||||||
</div>
|
</div>
|
||||||
</MkA>
|
</MkA>
|
||||||
|
@ -53,12 +60,19 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<MkPagination :pagination="gamesPagination" :disableAutoLoad="true">
|
<MkPagination :pagination="gamesPagination" :disableAutoLoad="true">
|
||||||
<template #default="{ items }">
|
<template #default="{ items }">
|
||||||
<div :class="$style.gamePreviews">
|
<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">
|
<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>
|
||||||
<div :class="$style.gamePreviewFooter">
|
<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"/>
|
<MkTime style="margin-left: auto; opacity: 0.7;" :time="g.createdAt"/>
|
||||||
</div>
|
</div>
|
||||||
</MkA>
|
</MkA>
|
||||||
|
@ -229,6 +243,11 @@ definePageMetadata(computed(() => ({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" module>
|
<style lang="scss" module>
|
||||||
|
@keyframes blink {
|
||||||
|
0% { opacity: 1; }
|
||||||
|
50% { opacity: 0.2; }
|
||||||
|
}
|
||||||
|
|
||||||
.invitation {
|
.invitation {
|
||||||
display: flex;
|
display: flex;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -250,6 +269,10 @@ definePageMetadata(computed(() => ({
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gamePreviewActive {
|
||||||
|
box-shadow: inset 0 0 8px 0px var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
.gamePreviewPlayers {
|
.gamePreviewPlayers {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
@ -277,6 +300,12 @@ definePageMetadata(computed(() => ({
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gamePreviewStatusActive {
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: bold;
|
||||||
|
animation: blink 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
.waitingScreen {
|
.waitingScreen {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
@ -455,13 +455,13 @@ rt {
|
||||||
transform: scale(0.9);
|
transform: scale(0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes blink {
|
@keyframes global-blink {
|
||||||
0% { opacity: 1; transform: scale(1); }
|
0% { opacity: 1; transform: scale(1); }
|
||||||
30% { opacity: 1; transform: scale(1); }
|
30% { opacity: 1; transform: scale(1); }
|
||||||
90% { opacity: 0; transform: scale(0.5); }
|
90% { opacity: 0; transform: scale(0.5); }
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes tada {
|
@keyframes global-tada {
|
||||||
from {
|
from {
|
||||||
transform: scale3d(1, 1, 1);
|
transform: scale3d(1, 1, 1);
|
||||||
}
|
}
|
||||||
|
@ -491,7 +491,7 @@ rt {
|
||||||
|
|
||||||
._anime_bounce {
|
._anime_bounce {
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
animation: bounce ease 0.7s;
|
animation: global-bounce ease 0.7s;
|
||||||
animation-iteration-count: 1;
|
animation-iteration-count: 1;
|
||||||
transform-origin: 50% 50%;
|
transform-origin: 50% 50%;
|
||||||
}
|
}
|
||||||
|
@ -503,7 +503,7 @@ rt {
|
||||||
transition: transform 0.1s ease;
|
transition: transform 0.1s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes bounce {
|
@keyframes global-bounce {
|
||||||
0% {
|
0% {
|
||||||
transform: scaleX(0.90) scaleY(0.90) ;
|
transform: scaleX(0.90) scaleY(0.90) ;
|
||||||
}
|
}
|
||||||
|
|
|
@ -254,7 +254,7 @@ function more() {
|
||||||
left: 20px;
|
left: 20px;
|
||||||
color: var(--navIndicator);
|
color: var(--navIndicator);
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
animation: blink 1s infinite;
|
animation: global-blink 1s infinite;
|
||||||
|
|
||||||
&:has(.itemIndicateValueIcon) {
|
&:has(.itemIndicateValueIcon) {
|
||||||
animation: none;
|
animation: none;
|
||||||
|
|
|
@ -313,7 +313,7 @@ function more(ev: MouseEvent) {
|
||||||
left: 20px;
|
left: 20px;
|
||||||
color: var(--navIndicator);
|
color: var(--navIndicator);
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
animation: blink 1s infinite;
|
animation: global-blink 1s infinite;
|
||||||
|
|
||||||
&:has(.itemIndicateValueIcon) {
|
&:has(.itemIndicateValueIcon) {
|
||||||
animation: none;
|
animation: none;
|
||||||
|
@ -483,7 +483,7 @@ function more(ev: MouseEvent) {
|
||||||
left: 24px;
|
left: 24px;
|
||||||
color: var(--navIndicator);
|
color: var(--navIndicator);
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
animation: blink 1s infinite;
|
animation: global-blink 1s infinite;
|
||||||
|
|
||||||
&:has(.itemIndicateValueIcon) {
|
&:has(.itemIndicateValueIcon) {
|
||||||
animation: none;
|
animation: none;
|
||||||
|
|
|
@ -141,7 +141,7 @@ onMounted(() => {
|
||||||
left: 0;
|
left: 0;
|
||||||
color: var(--navIndicator);
|
color: var(--navIndicator);
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
animation: blink 1s infinite;
|
animation: global-blink 1s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
@ -221,7 +221,7 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
|
||||||
left: 0;
|
left: 0;
|
||||||
color: var(--navIndicator);
|
color: var(--navIndicator);
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
animation: blink 1s infinite;
|
animation: global-blink 1s infinite;
|
||||||
|
|
||||||
&:has(.itemIndicateValueIcon) {
|
&:has(.itemIndicateValueIcon) {
|
||||||
animation: none;
|
animation: none;
|
||||||
|
|
|
@ -488,7 +488,7 @@ body {
|
||||||
left: 0;
|
left: 0;
|
||||||
color: var(--indicator);
|
color: var(--indicator);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
animation: blink 1s infinite;
|
animation: global-blink 1s infinite;
|
||||||
|
|
||||||
&:has(.itemIndicateValueIcon) {
|
&:has(.itemIndicateValueIcon) {
|
||||||
animation: none;
|
animation: none;
|
||||||
|
|
|
@ -448,7 +448,7 @@ $widgets-hide-threshold: 1090px;
|
||||||
left: 0;
|
left: 0;
|
||||||
color: var(--indicator);
|
color: var(--indicator);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
animation: blink 1s infinite;
|
animation: global-blink 1s infinite;
|
||||||
|
|
||||||
&:has(.itemIndicateValueIcon) {
|
&:has(.itemIndicateValueIcon) {
|
||||||
animation: none;
|
animation: none;
|
||||||
|
|
Loading…
Reference in a new issue