mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey synced 2024-05-28 06:10:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2024-01-19 20:49:17 +09:00
parent 353098f576
commit 8dc2f1f49d
13 changed files with 204 additions and 231 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
locales/index.d.ts vendored
View file

@ -2665,6 +2665,8 @@ export interface Locale extends ILocale {
"isLlotheo": string; "isLlotheo": string;
"loopedMap": string; "loopedMap": string;
"canPutEverywhere": string; "canPutEverywhere": string;
"freeMatch": string;
"lookingForPlayer": string;
}; };
} }
declare const locales: { declare const locales: {

2
locales/ja-JP.yml
View file

@ -2539,3 +2539,5 @@ _reversi:
isLlotheo: "石の少ない方が勝ち(ロセオ)" isLlotheo: "石の少ない方が勝ち(ロセオ)"
loopedMap: "ループマップ" loopedMap: "ループマップ"
canPutEverywhere: "どこでも置けるモード" canPutEverywhere: "どこでも置けるモード"
freeMatch: "フリーマッチ"
lookingForPlayer: "対戦相手を探しています"

1
packages/backend/src/core/GlobalEventService.ts
View file

@ -175,6 +175,7 @@ export interface ReversiGameEventTypes {
user2: boolean; user2: boolean;
}; };
updateSettings: { updateSettings: {
userId: MiUser['id'];
key: string; key: string;
value: any; value: any;
}; };

33
packages/backend/src/core/ReversiService.ts
View file

@ -101,6 +101,38 @@ export class ReversiService implements OnApplicationShutdown, OnModuleInit {
@bindThis @bindThis
public async matchAnyUser(me: MiUser): Promise<MiReversiGame | null> { public async matchAnyUser(me: MiUser): Promise<MiReversiGame | null> {
//#region まず自分宛ての招待を探す
const invitations = await this.redisClient.zrange(
`reversi:matchSpecific:${me.id}`,
Date.now() - MATCHING_TIMEOUT_MS,
'+inf',
'BYSCORE');
if (invitations.length > 0) {
const invitorId = invitations[Math.floor(Math.random() * invitations.length)];
await this.redisClient.zrem(`reversi:matchSpecific:${me.id}`, invitorId);
const game = await this.reversiGamesRepository.insert({
id: this.idService.gen(),
user1Id: invitorId,
user2Id: me.id,
user1Ready: false,
user2Ready: false,
isStarted: false,
isEnded: false,
logs: [],
map: Reversi.maps.eighteight.data,
bw: 'random',
isLlotheo: false,
}).then(x => this.reversiGamesRepository.findOneByOrFail(x.identifiers[0]));
const packed = await this.reversiGameEntityService.packDetail(game, { id: invitorId });
this.globalEventService.publishReversiStream(invitorId, 'matched', { game: packed });
return game;
}
//#endregion
const matchings = await this.redisClient.zrange( const matchings = await this.redisClient.zrange(
'reversi:matchAny', 'reversi:matchAny',
Date.now() - MATCHING_TIMEOUT_MS, Date.now() - MATCHING_TIMEOUT_MS,
@ -270,6 +302,7 @@ export class ReversiService implements OnApplicationShutdown, OnModuleInit {
}); });
this.globalEventService.publishReversiGameStream(game.id, 'updateSettings', { this.globalEventService.publishReversiGameStream(game.id, 'updateSettings', {
userId: user.id,
key: key, key: key,
value: value, value: value,
}); });

3
packages/frontend/src/components/MkRadios.vue
View file

@ -18,6 +18,9 @@ export default defineComponent({
watch(value, () => { watch(value, () => {
context.emit('update:modelValue', value.value); context.emit('update:modelValue', value.value);
}); });
watch(() => props.modelValue, v => {
value.value = v;
});
if (!context.slots.default) return null; if (!context.slots.default) return null;
let options = context.slots.default(); let options = context.slots.default();
const label = context.slots.label && context.slots.label(); const label = context.slots.label && context.slots.label();

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

@ -5,26 +5,26 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<MkSpacer :contentMax="600"> <MkSpacer :contentMax="600">
<div :class="$style.root"> <div :class="$style.root" class="_gaps">
<header><b><MkA :to="userPage(blackUser)"><MkUserName :user="blackUser"/></MkA></b>({{ i18n.ts._reversi.black }}) vs <b><MkA :to="userPage(whiteUser)"><MkUserName :user="whiteUser"/></MkA></b>({{ i18n.ts._reversi.white }})</header> <header><b><MkA :to="userPage(blackUser)"><MkUserName :user="blackUser"/></MkA></b>({{ i18n.ts._reversi.black }}) vs <b><MkA :to="userPage(whiteUser)"><MkUserName :user="whiteUser"/></MkA></b>({{ i18n.ts._reversi.white }})</header>
<div style="overflow: hidden; line-height: 28px;"> <div style="overflow: clip; line-height: 28px;">
<p v-if="!iAmPlayer && !game.isEnded" class="turn"> <div v-if="!iAmPlayer && !game.isEnded && turnUser" class="turn">
<Mfm :key="'turn:' + turnUser.name" :text="i18n.t('_reversi.turnOf', { name: turnUser.name })" :plain="true" :customEmojis="turnUser.emojis"/> <Mfm :key="'turn:' + turnUser.id" :text="i18n.t('_reversi.turnOf', { name: turnUser.name ?? turnUser.username })" :plain="true" :customEmojis="turnUser.emojis"/>
<MkEllipsis/> <MkEllipsis/>
</p> </div>
<p v-if="logPos != logs.length" class="turn"> <div v-if="(logPos !== logs.length) && turnUser" class="turn">
<Mfm :key="'past-turn-of:' + turnUser.name" :text="i18n.t('_reversi.pastTurnOf', { name: turnUser.name })" :plain="true" :customEmojis="turnUser.emojis"/> <Mfm :key="'past-turn-of:' + turnUser.id" :text="i18n.t('_reversi.pastTurnOf', { name: turnUser.name ?? turnUser.username })" :plain="true" :customEmojis="turnUser.emojis"/>
</p> </div>
<p v-if="iAmPlayer && !game.isEnded && !isMyTurn" class="turn1">{{ i18n.ts._reversi.opponentTurn }}<MkEllipsis/></p> <div v-if="iAmPlayer && !game.isEnded && !isMyTurn" class="turn1">{{ i18n.ts._reversi.opponentTurn }}<MkEllipsis/></div>
<p v-if="iAmPlayer && !game.isEnded && isMyTurn" class="turn2" style="animation: tada 1s linear infinite both;">{{ i18n.ts._reversi.myTurn }}</p> <div v-if="iAmPlayer && !game.isEnded && isMyTurn" class="turn2" style="animation: tada 1s linear infinite both;">{{ i18n.ts._reversi.myTurn }}</div>
<p v-if="game.isEnded && logPos == logs.length" class="result"> <div v-if="game.isEnded && logPos == logs.length" class="result">
<template v-if="game.winner"> <template v-if="game.winner">
<Mfm :key="'won'" :text="i18n.t('_reversi.won', { name: game.winner.name })" :plain="true" :customEmojis="game.winner.emojis"/> <Mfm :key="'won'" :text="i18n.t('_reversi.won', { name: game.winner.name ?? game.winner.username })" :plain="true" :customEmojis="game.winner.emojis"/>
<span v-if="game.surrendered != null"> ({{ i18n.ts._reversi.surrendered }})</span> <span v-if="game.surrendered != null"> ({{ i18n.ts._reversi.surrendered }})</span>
</template> </template>
<template v-else>{{ i18n.ts._reversi.drawn }}</template> <template v-else>{{ i18n.ts._reversi.drawn }}</template>
</p> </div>
</div> </div>
<div :class="$style.board"> <div :class="$style.board">
@ -62,28 +62,32 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
<p class="status"><b>{{ i18n.t('_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 }}</p> <div class="status"><b>{{ i18n.t('_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 v-if="!game.isEnded && iAmPlayer" class="_buttonsCenter"> <div v-if="!game.isEnded && iAmPlayer" class="_buttonsCenter">
<MkButton danger @click="surrender">{{ i18n.ts._reversi.surrender }}</MkButton> <MkButton danger @click="surrender">{{ i18n.ts._reversi.surrender }}</MkButton>
</div> </div>
<div v-if="game.isEnded" class="player"> <div v-if="game.isEnded" class="_panel _gaps_s" style="padding: 16px;">
<span>{{ logPos }} / {{ logs.length }}</span> <div>{{ logPos }} / {{ logs.length }}</div>
<div v-if="!autoplaying" class="buttons"> <div v-if="!autoplaying" class="_buttonsCenter">
<MkButton inline :disabled="logPos == 0" @click="logPos = 0"><i class="fas fa-angle-double-left"></i></MkButton> <MkButton :disabled="logPos === 0" @click="logPos = 0"><i class="ti ti-chevrons-left"></i></MkButton>
<MkButton inline :disabled="logPos == 0" @click="logPos--"><i class="fas fa-angle-left"></i></MkButton> <MkButton :disabled="logPos === 0" @click="logPos--"><i class="ti ti-chevron-left"></i></MkButton>
<MkButton inline :disabled="logPos == logs.length" @click="logPos++"><i class="fas fa-angle-right"></i></MkButton> <MkButton :disabled="logPos === logs.length" @click="logPos++"><i class="ti ti-chevron-right"></i></MkButton>
<MkButton inline :disabled="logPos == logs.length" @click="logPos = logs.length"><i class="fas fa-angle-double-right"></i></MkButton> <MkButton :disabled="logPos === logs.length" @click="logPos = logs.length"><i class="ti ti-chevrons-right"></i></MkButton>
</div> </div>
<MkButton :disabled="autoplaying" style="margin: var(--margin) auto 0 auto;" @click="autoplay()"><i class="fas fa-play"></i></MkButton> <MkButton style="margin: auto;" :disabled="autoplaying" @click="autoplay()"><i class="ti ti-player-play"></i></MkButton>
</div> </div>
<div class="info"> <div>
<p v-if="game.isLlotheo">{{ i18n.ts._reversi.isLlotheo }}</p> <p v-if="game.isLlotheo">{{ i18n.ts._reversi.isLlotheo }}</p>
<p v-if="game.loopedBoard">{{ i18n.ts._reversi.loopedMap }}</p> <p v-if="game.loopedBoard">{{ i18n.ts._reversi.loopedMap }}</p>
<p v-if="game.canPutEverywhere">{{ i18n.ts._reversi.canPutEverywhere }}</p> <p v-if="game.canPutEverywhere">{{ i18n.ts._reversi.canPutEverywhere }}</p>
</div> </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> </div>
</MkSpacer> </MkSpacer>
</template> </template>
@ -191,7 +195,7 @@ if (game.value.isStarted && !game.value.isEnded) {
props.connection.send('syncState', { props.connection.send('syncState', {
crc32: crc32, crc32: crc32,
}); });
}, 3000, { immediate: false, afterMounted: true }); }, 5000, { immediate: false, afterMounted: true });
} }
function putStone(pos) { function putStone(pos) {
@ -422,40 +426,3 @@ $gap: 4px;
} }
} }
</style> </style>
<style lang="scss" scoped>
@use "sass:math";
.xqnhankfuuilcwvhgsopeqncafzsquya {
> .status {
margin: 0;
padding: 16px 0;
}
> .actions {
padding-bottom: 16px;
}
> .player {
padding: 0 16px 32px 16px;
margin: 0 auto;
max-width: 500px;
> span {
display: inline-block;
margin: 0 8px;
min-width: 70px;
}
> .buttons {
display: flex;
> * {
flex: 1;
}
}
}
}
</style>

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

@ -6,10 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<MkSpacer :contentMax="600"> <MkSpacer :contentMax="600">
<header><b><MkUserName :user="game.user1"/></b> vs <b><MkUserName :user="game.user2"/></b></header> <div style="text-align: center;"><b><MkUserName :user="game.user1"/></b> vs <b><MkUserName :user="game.user2"/></b></div>
<div class="_gaps"> <div class="_gaps">
<p>{{ i18n.ts._reversi.gameSettings }}</p> <div style="font-size: 1.5em; text-align: center;">{{ i18n.ts._reversi.gameSettings }}</div>
<div class="_panel"> <div class="_panel">
<div style="display: flex; align-items: center; padding: 16px; border-bottom: solid 1px var(--divider);"> <div style="display: flex; align-items: center; padding: 16px; border-bottom: solid 1px var(--divider);">
@ -21,35 +21,33 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="game.map == null"><i class="ti ti-dice"></i></div> <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-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)"> <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; width: 100%; height: 100%;" :class="x === 'b' ? 'ti ti-circle-filled' : 'ti ti-circle'"></i> <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>
</div> </div>
</div> </div>
<div class="_panel" style="padding: 16px;"> <MkFolder :defaultOpen="true">
<header> <template #label>{{ i18n.ts._reversi.blackOrWhite }}</template>
<span>{{ i18n.ts._reversi.blackOrWhite }}</span>
</header>
<div> <MkRadios v-model="game.bw">
<MkRadio v-model="game.bw" value="random" @update:modelValue="updateSettings('bw')">{{ i18n.ts.random }}</MkRadio> <option value="random">{{ i18n.ts.random }}</option>
<MkRadio v-model="game.bw" :value="'1'" @update:modelValue="updateSettings('bw')"> <option :value="'1'">
<I18n :src="i18n.ts._reversi.blackIs" tag="span"> <I18n :src="i18n.ts._reversi.blackIs" tag="span">
<template #name> <template #name>
<b><MkUserName :user="game.user1"/></b> <b><MkUserName :user="game.user1"/></b>
</template> </template>
</I18n> </I18n>
</MkRadio> </option>
<MkRadio v-model="game.bw" :value="'2'" @update:modelValue="updateSettings('bw')"> <option :value="'2'">
<I18n :src="i18n.ts._reversi.blackIs" tag="span"> <I18n :src="i18n.ts._reversi.blackIs" tag="span">
<template #name> <template #name>
<b><MkUserName :user="game.user2"/></b> <b><MkUserName :user="game.user2"/></b>
</template> </template>
</I18n> </I18n>
</MkRadio> </option>
</div> </MkRadios>
</div> </MkFolder>
<MkFolder :defaultOpen="true"> <MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts._reversi.rules }}</template> <template #label>{{ i18n.ts._reversi.rules }}</template>
@ -86,14 +84,11 @@ SPDX-License-Identifier: AGPL-3.0-only
import { computed, watch, ref, onMounted, shallowRef, onUnmounted } from 'vue'; import { computed, watch, ref, onMounted, shallowRef, onUnmounted } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import * as Reversi from 'misskey-reversi'; import * as Reversi from 'misskey-reversi';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { useStream } from '@/stream.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { signinRequired } from '@/account.js'; import { signinRequired } from '@/account.js';
import { deepClone } from '@/scripts/clone.js'; import { deepClone } from '@/scripts/clone.js';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkSelect from '@/components/MkSelect.vue'; import MkRadios from '@/components/MkRadios.vue';
import MkRadio from '@/components/MkRadio.vue';
import MkSwitch from '@/components/MkSwitch.vue'; import MkSwitch from '@/components/MkSwitch.vue';
import MkFolder from '@/components/MkFolder.vue'; import MkFolder from '@/components/MkFolder.vue';
import * as os from '@/os.js'; import * as os from '@/os.js';
@ -126,15 +121,12 @@ const isOpReady = computed(() => {
return false; return false;
}); });
watch(() => game.value.bw, () => {
updateSettings('bw');
});
function chooseMap(ev: MouseEvent) { function chooseMap(ev: MouseEvent) {
const menu: MenuItem[] = [{ const menu: MenuItem[] = [];
text: i18n.ts.random,
icon: 'ti ti-dice',
action: () => {
game.value.map = null;
updateSettings('map');
},
}];
for (const c of mapCategories) { for (const c of mapCategories) {
const maps = Object.values(Reversi.maps).filter(x => x.category === c); const maps = Object.values(Reversi.maps).filter(x => x.category === c);
@ -183,7 +175,9 @@ function updateSettings(key: keyof Misskey.entities.ReversiGameDetailed) {
}); });
} }
function onUpdateSettings({ key, value }: { key: keyof Misskey.entities.ReversiGameDetailed; value: any; }) { 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; game.value[key] = value;
} }
@ -221,6 +215,8 @@ onUnmounted(() => {
} }
.boardCell { .boardCell {
display: grid;
place-items: center;
background: transparent; background: transparent;
border: solid 2px var(--divider); border: solid 2px var(--divider);
border-radius: 6px; border-radius: 6px;
@ -237,5 +233,4 @@ onUnmounted(() => {
background: var(--acrylicBg); background: var(--acrylicBg);
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--divider);
} }
</style> </style>

239
packages/frontend/src/pages/reversi/index.vue
View file

@ -4,23 +4,24 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkSpacer v-if="!matchingAny && !matchingUser" :contentMax="600" class="bgvwxkhb"> <MkSpacer v-if="!matchingAny && !matchingUser" :contentMax="600">
<h1>Misskey {{ i18n.ts._reversi.reversi }}</h1>
<div class="_gaps"> <div class="_gaps">
<div class="_buttonsCenter"> <div>
<MkButton primary rounded @click="matchAny">Match</MkButton> <img src="/client-assets/reversi/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
<MkButton primary rounded @click="matchUser">{{ i18n.ts.invite }}</MkButton>
</div> </div>
<MkFolder v-if="invitations.length > 0"> <div class="_buttonsCenter">
<template #header>{{ i18n.ts.invitations }}</template> <MkButton primary gradate rounded @click="matchAny">{{ i18n.ts._reversi.freeMatch }}</MkButton>
<div class="nfcacttm"> <MkButton primary gradate rounded @click="matchUser">{{ i18n.ts.invite }}</MkButton>
<button v-for="invitation in invitations" class="invitation _panel _button" tabindex="-1" @click="accept(invitation)"> </div>
<MkAvatar class="avatar" :user="invitation.parent" :showIndicator="true"/>
<span class="name"><b><MkUserName :user="invitation.parent"/></b></span> <MkFolder v-if="invitations.length > 0" :defaultOpen="true">
<span class="username">@{{ invitation.parent.username }}</span> <template #label>{{ i18n.ts.invitations }}</template>
<MkTime :time="invitation.createdAt" class="time"/> <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> </button>
</div> </div>
</MkFolder> </MkFolder>
@ -29,12 +30,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts._reversi.myGames }}</template> <template #label>{{ i18n.ts._reversi.myGames }}</template>
<MkPagination :pagination="myGamesPagination"> <MkPagination :pagination="myGamesPagination">
<template #default="{ items }"> <template #default="{ items }">
<div class="knextgwz"> <div :class="$style.gamePreviews">
<MkA v-for="g in items" :key="g.id" class="game _panel" tabindex="-1" :to="`/games/reversi/${g.id}`"> <MkA v-for="g in items" :key="g.id" v-panel :class="$style.gamePreview" tabindex="-1" :to="`/reversi/g/${g.id}`">
<div class="players"> <div :class="$style.gamePreviewPlayers">
<MkAvatar class="avatar" :user="g.user1"/><b><MkUserName :user="g.user1"/></b> vs <b><MkUserName :user="g.user2"/></b><MkAvatar class="avatar" :user="g.user2"/> <MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user1"/><b><MkUserName :user="g.user1"/></b> vs <b><MkUserName :user="g.user2"/></b><MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user2"/>
</div>
<div :class="$style.gamePreviewFooter">
<span :style="!g.isEnded ? 'color: var(--accent);' : ''">{{ g.isEnded ? i18n.ts._reversi.ended : i18n.ts._reversi.playing }}</span>
<MkTime style="margin-left: auto; opacity: 0.7;" :time="g.createdAt"/>
</div> </div>
<footer><span class="state" :class="{ playing: !g.isEnded }">{{ g.isEnded ? i18n.ts._reversi.ended : i18n.ts._reversi.playing }}</span><MkTime class="time" :time="g.createdAt"/></footer>
</MkA> </MkA>
</div> </div>
</template> </template>
@ -45,12 +49,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts._reversi.allGames }}</template> <template #label>{{ i18n.ts._reversi.allGames }}</template>
<MkPagination :pagination="gamesPagination"> <MkPagination :pagination="gamesPagination">
<template #default="{ items }"> <template #default="{ items }">
<div class="knextgwz"> <div :class="$style.gamePreviews">
<MkA v-for="g in items" :key="g.id" class="game _panel" tabindex="-1" :to="`/games/reversi/${g.id}`"> <MkA v-for="g in items" :key="g.id" v-panel :class="$style.gamePreview" tabindex="-1" :to="`/reversi/g/${g.id}`">
<div class="players"> <div :class="$style.gamePreviewPlayers">
<MkAvatar class="avatar" :user="g.user1"/><b><MkUserName :user="g.user1"/></b> vs <b><MkUserName :user="g.user2"/></b><MkAvatar class="avatar" :user="g.user2"/> <MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user1"/><b><MkUserName :user="g.user1"/></b> vs <b><MkUserName :user="g.user2"/></b><MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user2"/>
</div>
<div :class="$style.gamePreviewFooter">
<span :style="!g.isEnded ? 'color: var(--accent);' : ''">{{ g.isEnded ? i18n.ts._reversi.ended : i18n.ts._reversi.playing }}</span>
<MkTime style="margin-left: auto; opacity: 0.7;" :time="g.createdAt"/>
</div> </div>
<footer><span class="state" :class="{ playing: !g.isEnded }">{{ g.isEnded ? i18n.ts._reversi.ended : i18n.ts._reversi.playing }}</span><MkTime class="time" :time="g.createdAt"/></footer>
</MkA> </MkA>
</div> </div>
</template> </template>
@ -58,23 +65,24 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFolder> </MkFolder>
</div> </div>
</MkSpacer> </MkSpacer>
<div v-else class="sazhgisb"> <MkSpacer v-else :contentMax="600">
<h1 v-if="matchingUser"> <div :class="$style.waitingScreen">
<I18n :src="i18n.ts.waitingFor" tag="span"> <div v-if="matchingUser" :class="$style.waitingScreenTitle">
<template #x> <I18n :src="i18n.ts.waitingFor" tag="span">
<b><MkUserName :user="matchingUser"/></b> <template #x>
</template> <b><MkUserName :user="matchingUser"/></b>
</I18n> </template>
<MkEllipsis/> </I18n>
</h1> <MkEllipsis/>
<h1 v-else> </div>
Matching <div v-else :class="$style.waitingScreenTitle">
<MkEllipsis/> {{ i18n.ts._reversi.lookingForPlayer }}<MkEllipsis/>
</h1> </div>
<div class="cancel"> <div class="cancel">
<MkButton inline round @click="cancelMatching">{{ i18n.ts.cancel }}</MkButton> <MkButton inline rounded @click="cancelMatching">{{ i18n.ts.cancel }}</MkButton>
</div>
</div> </div>
</div> </MkSpacer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -114,8 +122,9 @@ if ($i) {
startGame(x.game); startGame(x.game);
}); });
connection.on('invited', invite => { connection.on('invited', invitation => {
invitations.value.unshift(invite); if (invitations.value.some(x => x.id === invitation.user.id)) return;
invitations.value.unshift(invitation.user);
}); });
onUnmounted(() => { onUnmounted(() => {
@ -178,9 +187,9 @@ function cancelMatching() {
} }
} }
async function accept(invitation) { async function accept(user) {
const game = await misskeyApi('reversi/match', { const game = await misskeyApi('reversi/match', {
userId: invitation.parent.id, userId: user.id,
}); });
if (game) { if (game) {
startGame(game); startGame(game);
@ -201,100 +210,62 @@ definePageMetadata(computed(() => ({
}))); })));
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.bgvwxkhb { .invitation {
> h1 { display: flex;
margin: 0; box-sizing: border-box;
padding: 24px; width: 100%;
text-align: center; padding: 16px;
font-size: 1.5em; line-height: 32px;
background: linear-gradient(0deg, #43c583, #438881); text-align: left;
color: #fff; }
}
> .play { .gamePreviews {
text-align: center; display: grid;
} grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: var(--margin);
}
.gamePreview {
font-size: 90%;
border-radius: 8px;
overflow: clip;
}
.gamePreviewPlayers {
text-align: center;
padding: 16px;
line-height: 32px;
}
.gamePreviewPlayersAvatar {
width: 32px;
height: 32px;
&:first-child {
margin-right: 8px;
} }
.sazhgisb { &:last-child {
text-align: center; margin-left: 8px;
} }
}
.nfcacttm { .gamePreviewFooter {
> .invitation { display: flex;
display: flex; align-items: baseline;
box-sizing: border-box; border-top: solid 0.5px var(--divider);
width: 100%; padding: 6px 10px;
padding: 16px; font-size: 0.9em;
line-height: 32px; }
text-align: left;
> .avatar { .waitingScreen {
width: 32px; text-align: center;
height: 32px; }
margin-right: 8px;
}
> .name { .waitingScreenTitle {
margin-right: 8px; font-size: 1.5em;
} margin-bottom: 16px;
margin-top: 32px;
> .username { }
margin-right: 8px; </style>
opacity: 0.7;
}
> .time {
margin-left: auto;
opacity: 0.7;
}
}
}
.knextgwz {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: var(--margin);
> .game {
> .players {
text-align: center;
padding: 16px;
line-height: 32px;
> .avatar {
width: 32px;
height: 32px;
&:first-child {
margin-right: 8px;
}
&:last-child {
margin-left: 8px;
}
}
}
> footer {
display: flex;
align-items: baseline;
border-top: solid 0.5px var(--divider);
padding: 6px 8px;
font-size: 0.9em;
> .state {
&.playing {
color: var(--accent);
}
}
> .time {
margin-left: auto;
opacity: 0.7;
}
}
}
}
</style>

2
packages/misskey-js/src/autogen/apiClientJSDoc.ts
View file

@ -1,6 +1,6 @@
/* /*
* version: 2023.12.2 * version: 2023.12.2
* generatedAt: 2024-01-19T08:51:50.618Z * generatedAt: 2024-01-19T11:00:07.160Z
*/ */
import type { SwitchCaseResponseType } from '../api.js'; import type { SwitchCaseResponseType } from '../api.js';

2
packages/misskey-js/src/autogen/endpoint.ts
View file

@ -1,6 +1,6 @@
/* /*
* version: 2023.12.2 * version: 2023.12.2
* generatedAt: 2024-01-19T08:51:50.615Z * generatedAt: 2024-01-19T11:00:07.158Z
*/ */
import type { import type {

2
packages/misskey-js/src/autogen/entities.ts
View file

@ -1,6 +1,6 @@
/* /*
* version: 2023.12.2 * version: 2023.12.2
* generatedAt: 2024-01-19T08:51:50.614Z * generatedAt: 2024-01-19T11:00:07.156Z
*/ */
import { operations } from './types.js'; import { operations } from './types.js';

2
packages/misskey-js/src/autogen/models.ts
View file

@ -1,6 +1,6 @@
/* /*
* version: 2023.12.2 * version: 2023.12.2
* generatedAt: 2024-01-19T08:51:50.613Z * generatedAt: 2024-01-19T11:00:07.155Z
*/ */
import { components } from './types.js'; import { components } from './types.js';

5
packages/misskey-js/src/autogen/types.ts
View file

@ -3,7 +3,7 @@
/* /*
* version: 2023.12.2 * version: 2023.12.2
* generatedAt: 2024-01-19T08:51:50.533Z * generatedAt: 2024-01-19T11:00:07.077Z
*/ */
/** /**
@ -4518,8 +4518,7 @@ export type components = {
canPutEverywhere: boolean; canPutEverywhere: boolean;
loopedBoard: boolean; loopedBoard: boolean;
logs: { logs: {
/** Format: date-time */ at: number;
at: string;
color: boolean; color: boolean;
pos: number; pos: number;
}[]; }[];