mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-05 13:33:10 +02:00
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;
|
||||
color: var(--indicator);
|
||||
font-size: 8px;
|
||||
animation: blink 1s infinite;
|
||||
animation: global-blink 1s infinite;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
top: 16px;
|
||||
|
|
|
@ -450,7 +450,7 @@ onBeforeUnmount(() => {
|
|||
align-items: center;
|
||||
color: var(--indicator);
|
||||
font-size: 12px;
|
||||
animation: blink 1s infinite;
|
||||
animation: global-blink 1s infinite;
|
||||
}
|
||||
|
||||
.divider {
|
||||
|
|
|
@ -121,7 +121,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': {
|
||||
|
|
|
@ -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"/>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -455,13 +455,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);
|
||||
}
|
||||
|
@ -491,7 +491,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%;
|
||||
}
|
||||
|
@ -503,7 +503,7 @@ rt {
|
|||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
@keyframes global-bounce {
|
||||
0% {
|
||||
transform: scaleX(0.90) scaleY(0.90) ;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -141,7 +141,7 @@ onMounted(() => {
|
|||
left: 0;
|
||||
color: var(--navIndicator);
|
||||
font-size: 8px;
|
||||
animation: blink 1s infinite;
|
||||
animation: global-blink 1s infinite;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
@ -221,7 +221,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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue