sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo
2024-01-19 18:35:53 +09:00
parent 4c43ee4b53
commit 353098f576
27 changed files with 872 additions and 822 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/backend/migration/1705654039457-reversi-2.js Normal file
View File

@@ -0,0 +1,18 @@
/*
* SPDX-FileCopyrightText: syuilo and other misskey contributors
* SPDX-License-Identifier: AGPL-3.0-only
*/
export class Reversi21705654039457 {
name = 'Reversi21705654039457'
async up(queryRunner) {
await queryRunner.query(`ALTER TABLE "reversi_game" RENAME COLUMN "user1Accepted" TO "user1Ready"`);
await queryRunner.query(`ALTER TABLE "reversi_game" RENAME COLUMN "user2Accepted" TO "user2Ready"`);
}
async down(queryRunner) {
await queryRunner.query(`ALTER TABLE "reversi_game" RENAME COLUMN "user1Ready" TO "user1Accepted"`);
await queryRunner.query(`ALTER TABLE "reversi_game" RENAME COLUMN "user2Ready" TO "user2Accepted"`);
}
}

6
packages/backend/src/core/GlobalEventService.ts
View File

@@ -170,9 +170,7 @@ export interface ReversiEventTypes {
}
export interface ReversiGameEventTypes {
accept: boolean;
cancelAccept: undefined;
changeAcceptingStates: {
changeReadyStates: {
user1: boolean;
user2: boolean;
};
@@ -181,7 +179,7 @@ export interface ReversiGameEventTypes {
value: any;
};
putStone: {
at: Date;
at: number;
color: boolean;
pos: number;
next: boolean;

80
packages/backend/src/core/ReversiService.ts
View File

@@ -5,7 +5,7 @@
import { Inject, Injectable } from '@nestjs/common';
import * as Redis from 'ioredis';
import * as CRC32 from 'crc-32';
import CRC32 from 'crc-32';
import { ModuleRef } from '@nestjs/core';
import * as Reversi from 'misskey-reversi';
import { IsNull } from 'typeorm';
@@ -28,7 +28,7 @@ import { NotificationService } from '@/core/NotificationService.js';
import { ReversiGameEntityService } from './entities/ReversiGameEntityService.js';
import type { OnApplicationShutdown, OnModuleInit } from '@nestjs/common';
const MATCHING_TIMEOUT_MS = 15 * 1000; // 15sec
const MATCHING_TIMEOUT_MS = 1000 * 15; // 15sec
@Injectable()
export class ReversiService implements OnApplicationShutdown, OnModuleInit {
@@ -61,7 +61,11 @@ export class ReversiService implements OnApplicationShutdown, OnModuleInit {
throw new Error('You cannot match yourself.');
}
const invitations = await this.redisClient.zrange(`reversi:matchSpecific:${me.id}`, Date.now() - MATCHING_TIMEOUT_MS, '+inf');
const invitations = await this.redisClient.zrange(
`reversi:matchSpecific:${me.id}`,
Date.now() - MATCHING_TIMEOUT_MS,
'+inf',
'BYSCORE');
if (invitations.includes(targetUser.id)) {
await this.redisClient.zrem(`reversi:matchSpecific:${me.id}`, targetUser.id);
@@ -70,8 +74,8 @@ export class ReversiService implements OnApplicationShutdown, OnModuleInit {
id: this.idService.gen(),
user1Id: targetUser.id,
user2Id: me.id,
user1Accepted: false,
user2Accepted: false,
user1Ready: false,
user2Ready: false,
isStarted: false,
isEnded: false,
logs: [],
@@ -97,21 +101,26 @@ export class ReversiService implements OnApplicationShutdown, OnModuleInit {
@bindThis
public async matchAnyUser(me: MiUser): Promise<MiReversiGame | null> {
const scanRes = await this.redisClient.scan(0, 'MATCH', 'reversi:matchAny:*', 'COUNT', 10);
const userIds = scanRes[1].map(key => key.split(':')[2]).filter(id => id !== me.id);
const matchings = await this.redisClient.zrange(
'reversi:matchAny',
Date.now() - MATCHING_TIMEOUT_MS,
'+inf',
'BYSCORE');
const userIds = matchings.filter(id => id !== me.id);
if (userIds.length > 0) {
// pick random
const matchedUserId = userIds[Math.floor(Math.random() * userIds.length)];
await this.redisClient.del(`reversi:matchAny:${matchedUserId}`);
await this.redisClient.zrem('reversi:matchAny', me.id, matchedUserId);
const game = await this.reversiGamesRepository.insert({
id: this.idService.gen(),
user1Id: matchedUserId,
user2Id: me.id,
user1Accepted: false,
user2Accepted: false,
user1Ready: false,
user2Ready: false,
isStarted: false,
isEnded: false,
logs: [],
@@ -125,7 +134,7 @@ export class ReversiService implements OnApplicationShutdown, OnModuleInit {
return game;
} else {
await this.redisClient.setex(`reversi:matchAny:${me.id}`, MATCHING_TIMEOUT_MS / 1000, '');
await this.redisClient.zadd('reversi:matchAny', Date.now(), me.id);
return null;
}
}
@@ -137,47 +146,47 @@ export class ReversiService implements OnApplicationShutdown, OnModuleInit {
@bindThis
public async matchAnyUserCancel(user: MiUser) {
await this.redisClient.del(`reversi:matchAny:${user.id}`);
await this.redisClient.zrem('reversi:matchAny', user.id);
}
@bindThis
public async matchAccept(game: MiReversiGame, user: MiUser, isAccepted: boolean) {
public async gameReady(game: MiReversiGame, user: MiUser, ready: boolean) {
if (game.isStarted) return;
let bothAccepted = false;
let isBothReady = false;
if (game.user1Id === user.id) {
await this.reversiGamesRepository.update(game.id, {
user1Accepted: isAccepted,
user1Ready: ready,
});
this.globalEventService.publishReversiGameStream(game.id, 'changeAcceptingStates', {
user1: isAccepted,
user2: game.user2Accepted,
this.globalEventService.publishReversiGameStream(game.id, 'changeReadyStates', {
user1: ready,
user2: game.user2Ready,
});
if (isAccepted && game.user2Accepted) bothAccepted = true;
if (ready && game.user2Ready) isBothReady = true;
} else if (game.user2Id === user.id) {
await this.reversiGamesRepository.update(game.id, {
user2Accepted: isAccepted,
user2Ready: ready,
});
this.globalEventService.publishReversiGameStream(game.id, 'changeAcceptingStates', {
user1: game.user1Accepted,
user2: isAccepted,
this.globalEventService.publishReversiGameStream(game.id, 'changeReadyStates', {
user1: game.user1Ready,
user2: ready,
});
if (isAccepted && game.user1Accepted) bothAccepted = true;
if (ready && game.user1Ready) isBothReady = true;
} else {
return;
}
if (bothAccepted) {
// 3秒後、まだacceptされていたらゲーム開始
if (isBothReady) {
// 3秒後、両者readyならゲーム開始
setTimeout(async () => {
const freshGame = await this.reversiGamesRepository.findOneBy({ id: game.id });
if (freshGame == null || freshGame.isStarted || freshGame.isEnded) return;
if (!freshGame.user1Accepted || !freshGame.user2Accepted) return;
if (!freshGame.user1Ready || !freshGame.user2Ready) return;
let bw: number;
if (freshGame.bw === 'random') {
@@ -239,7 +248,11 @@ export class ReversiService implements OnApplicationShutdown, OnModuleInit {
@bindThis
public async getInvitations(user: MiUser): Promise<MiUser['id'][]> {
const invitations = await this.redisClient.zrange(`reversi:matchSpecific:${user.id}`, Date.now() - MATCHING_TIMEOUT_MS, '+inf');
const invitations = await this.redisClient.zrange(
`reversi:matchSpecific:${user.id}`,
Date.now() - MATCHING_TIMEOUT_MS,
'+inf',
'BYSCORE');
return invitations;
}
@@ -247,8 +260,8 @@ export class ReversiService implements OnApplicationShutdown, OnModuleInit {
public async updateSettings(game: MiReversiGame, user: MiUser, key: string, value: any) {
if (game.isStarted) return;
if ((game.user1Id !== user.id) && (game.user2Id !== user.id)) return;
if ((game.user1Id === user.id) && game.user1Accepted) return;
if ((game.user2Id === user.id) && game.user2Accepted) return;
if ((game.user1Id === user.id) && game.user1Ready) return;
if ((game.user2Id === user.id) && game.user2Ready) return;
if (!['map', 'bw', 'isLlotheo', 'canPutEverywhere', 'loopedBoard'].includes(key)) return;
@@ -301,7 +314,7 @@ export class ReversiService implements OnApplicationShutdown, OnModuleInit {
}
const log = {
at: new Date(),
at: Date.now(),
color: myColor,
pos,
};
@@ -317,9 +330,10 @@ export class ReversiService implements OnApplicationShutdown, OnModuleInit {
logs: game.logs,
});
this.globalEventService.publishReversiGameStream(game.id, 'putStone', Object.assign(log, {
this.globalEventService.publishReversiGameStream(game.id, 'putStone', {
...log,
next: o.turn,
}));
});
if (o.isEnded) {
this.globalEventService.publishReversiGameStream(game.id, 'ended', {

10
packages/backend/src/core/entities/ReversiGameEntityService.ts
View File

@@ -41,8 +41,8 @@ export class ReversiGameEntityService {
isEnded: game.isEnded,
form1: game.form1,
form2: game.form2,
user1Accepted: game.user1Accepted,
user2Accepted: game.user2Accepted,
user1Ready: game.user1Ready,
user2Ready: game.user2Ready,
user1Id: game.user1Id,
user2Id: game.user2Id,
user1: this.userEntityService.pack(game.user1Id, me),
@@ -56,7 +56,7 @@ export class ReversiGameEntityService {
canPutEverywhere: game.canPutEverywhere,
loopedBoard: game.loopedBoard,
logs: game.logs.map(log => ({
at: log.at.toISOString(),
at: log.at,
color: log.color,
pos: log.pos,
})),
@@ -87,8 +87,8 @@ export class ReversiGameEntityService {
isEnded: game.isEnded,
form1: game.form1,
form2: game.form2,
user1Accepted: game.user1Accepted,
user2Accepted: game.user2Accepted,
user1Ready: game.user1Ready,
user2Ready: game.user2Ready,
user1Id: game.user1Id,
user2Id: game.user2Id,
user1: this.userEntityService.pack(game.user1Id, me),

6
packages/backend/src/models/ReversiGame.ts
View File

@@ -34,12 +34,12 @@ export class MiReversiGame {
@Column('boolean', {
default: false,
})
public user1Accepted: boolean;
public user1Ready: boolean;
@Column('boolean', {
default: false,
})
public user2Accepted: boolean;
public user2Ready: boolean;
/**
* どちらのプレイヤーが先行(黒)か
@@ -77,7 +77,7 @@ export class MiReversiGame {
default: [],
})
public logs: {
at: Date;
at: number;
color: boolean;
pos: number;
}[];

11
packages/backend/src/models/json-schema/reversi-game.ts
View File

@@ -37,11 +37,11 @@ export const packedReversiGameLiteSchema = {
type: 'any',
optional: false, nullable: true,
},
user1Accepted: {
user1Ready: {
type: 'boolean',
optional: false, nullable: false,
},
user2Accepted: {
user2Ready: {
type: 'boolean',
optional: false, nullable: false,
},
@@ -137,11 +137,11 @@ export const packedReversiGameDetailedSchema = {
type: 'any',
optional: false, nullable: true,
},
user1Accepted: {
user1Ready: {
type: 'boolean',
optional: false, nullable: false,
},
user2Accepted: {
user2Ready: {
type: 'boolean',
optional: false, nullable: false,
},
@@ -208,9 +208,8 @@ export const packedReversiGameDetailedSchema = {
optional: false, nullable: false,
properties: {
at: {
type: 'string',
type: 'number',
optional: false, nullable: false,
format: 'date-time',
},
color: {
type: 'boolean',

11
packages/backend/src/server/ServerModule.ts
View File

@@ -22,9 +22,13 @@ import { SigninApiService } from './api/SigninApiService.js';
import { SigninService } from './api/SigninService.js';
import { SignupApiService } from './api/SignupApiService.js';
import { StreamingApiServerService } from './api/StreamingApiServerService.js';
import { OpenApiServerService } from './api/openapi/OpenApiServerService.js';
import { ClientServerService } from './web/ClientServerService.js';
import { FeedService } from './web/FeedService.js';
import { UrlPreviewService } from './web/UrlPreviewService.js';
import { ClientLoggerService } from './web/ClientLoggerService.js';
import { OAuth2ProviderService } from './oauth/OAuth2ProviderService.js';
import { MainChannelService } from './api/stream/channels/main.js';
import { AdminChannelService } from './api/stream/channels/admin.js';
import { AntennaChannelService } from './api/stream/channels/antenna.js';
@@ -38,10 +42,9 @@ import { LocalTimelineChannelService } from './api/stream/channels/local-timelin
import { QueueStatsChannelService } from './api/stream/channels/queue-stats.js';
import { ServerStatsChannelService } from './api/stream/channels/server-stats.js';
import { UserListChannelService } from './api/stream/channels/user-list.js';
import { OpenApiServerService } from './api/openapi/OpenApiServerService.js';
import { ClientLoggerService } from './web/ClientLoggerService.js';
import { RoleTimelineChannelService } from './api/stream/channels/role-timeline.js';
import { OAuth2ProviderService } from './oauth/OAuth2ProviderService.js';
import { ReversiChannelService } from './api/stream/channels/reversi.js';
import { ReversiGameChannelService } from './api/stream/channels/reversi-game.js';
@Module({
imports: [
@@ -77,6 +80,8 @@ import { OAuth2ProviderService } from './oauth/OAuth2ProviderService.js';
GlobalTimelineChannelService,
HashtagChannelService,
RoleTimelineChannelService,
ReversiChannelService,
ReversiGameChannelService,
HomeTimelineChannelService,
HybridTimelineChannelService,
LocalTimelineChannelService,

7
packages/backend/src/server/api/stream/channels/reversi-game.ts
View File

@@ -43,8 +43,7 @@ class ReversiGameChannel extends Channel {
@bindThis
public onMessage(type: string, body: any) {
switch (type) {
case 'accept': this.accept(true); break;
case 'cancelAccept': this.accept(false); break;
case 'ready': this.ready(body); break;
case 'updateSettings': this.updateSettings(body.key, body.value); break;
case 'putStone': this.putStone(body.pos); break;
case 'syncState': this.syncState(body.crc32); break;
@@ -63,13 +62,13 @@ class ReversiGameChannel extends Channel {
}
@bindThis
private async accept(accept: boolean) {
private async ready(ready: boolean) {
if (this.user == null) return;
const game = await this.reversiGamesRepository.findOneBy({ id: this.gameId! });
if (game == null) throw new Error('game not found');
this.reversiService.matchAccept(game, this.user, accept);
this.reversiService.gameReady(game, this.user, ready);
}
@bindThis

BIN
packages/frontend/assets/reversi/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

1
packages/frontend/package.json
View File

@@ -41,6 +41,7 @@
"chartjs-plugin-zoom": "2.0.1",
"chromatic": "10.1.0",
"compare-versions": "6.1.0",
"crc-32": "^1.2.2",
"cropperjs": "2.0.0-beta.4",
"date-fns": "2.30.0",
"escape-regexp": "0.0.1",

4
packages/frontend/src/components/MkSelect.vue
View File

@@ -52,7 +52,7 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
(ev: 'change', _ev: KeyboardEvent): void;
(ev: 'changeByUser'): void;
(ev: 'update:modelValue', value: string | null): void;
}>();
@@ -77,7 +77,6 @@ const height =
const focus = () => inputEl.value.focus();
const onInput = (ev) => {
changed.value = true;
emit('change', ev);
};
const updated = () => {
@@ -136,6 +135,7 @@ function show(ev: MouseEvent) {
active: computed(() => v.value === option.props.value),
action: () => {
v.value = option.props.value;
emit('changeByUser', v.value);
},
});
};

12
packages/frontend/src/components/MkUserSelectDialog.vue
View File

@@ -85,7 +85,7 @@ const recentUsers = ref<Misskey.entities.UserDetailed[]>([]);
const selected = ref<Misskey.entities.UserDetailed | null>(null);
const dialogEl = ref();
const search = () => {
function search() {
if (username.value === '' && host.value === '') {
users.value = [];
return;
@@ -98,9 +98,9 @@ const search = () => {
}).then(_users => {
users.value = _users;
});
};
}
const ok = () => {
function ok() {
if (selected.value == null) return;
emit('ok', selected.value);
dialogEl.value.close();
@@ -110,12 +110,12 @@ const ok = () => {
recents = recents.filter(x => x !== selected.value.id);
recents.unshift(selected.value.id);
defaultStore.set('recentlyUsedUsers', recents.splice(0, 16));
};
}
const cancel = () => {
function cancel() {
emit('cancel');
dialogEl.value.close();
};
}
onMounted(() => {
misskeyApi('users/show', {

17
packages/frontend/src/global/router/definition.ts
View File

@@ -15,6 +15,7 @@ const page = (loader: AsyncComponentLoader<any>) => defineAsyncComponent({
loadingComponent: MkLoading,
errorComponent: MkError,
});
const routes = [{
path: '/@:initUser/pages/:initPageName/view-source',
component: page(() => import('@/pages/page-editor/page-editor.vue')),
@@ -523,18 +524,26 @@ const routes = [{
path: '/timeline/antenna/:antennaId',
component: page(() => import('@/pages/antenna-timeline.vue')),
loginRequired: true,
}, {
path: '/games',
component: page(() => import('@/pages/games.vue')),
loginRequired: true,
}, {
path: '/clicker',
component: page(() => import('@/pages/clicker.vue')),
loginRequired: true,
}, {
path: '/games',
component: page(() => import('@/pages/games.vue')),
loginRequired: false,
}, {
path: '/bubble-game',
component: page(() => import('@/pages/drop-and-fusion.vue')),
loginRequired: true,
}, {
path: '/reversi',
component: page(() => import('@/pages/reversi/index.vue')),
loginRequired: false,
}, {
path: '/reversi/g/:gameId',
component: page(() => import('@/pages/reversi/game.vue')),
loginRequired: false,
}, {
path: '/timeline',
component: page(() => import('@/pages/timeline.vue')),

2
packages/frontend/src/os.ts
View File

@@ -419,7 +419,7 @@ export function form(title, form) {
});
}
export async function selectUser(opts: { includeSelf?: boolean } = {}) {
export async function selectUser(opts: { includeSelf?: boolean } = {}): Promise<Misskey.entities.UserLite> {
return new Promise((resolve, reject) => {
popup(defineAsyncComponent(() => import('@/components/MkUserSelectDialog.vue')), {
includeSelf: opts.includeSelf,

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>

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

@@ -4,490 +4,430 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="xqnhankfuuilcwvhgsopeqncafzsquya">
<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>
<MkSpacer :contentMax="600">
<div :class="$style.root">
<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;">
<p v-if="!iAmPlayer && !game.isEnded" class="turn">
<Mfm :key="'turn:' + turnUser().name" :text="$t('_reversi.turnOf', { name: turnUser().name })" :plain="true" :customEmojis="turnUser().emojis"/>
<MkEllipsis/>
</p>
<p v-if="logPos != logs.length" class="turn">
<Mfm :key="'past-turn-of:' + turnUser().name" :text="$t('_reversi.pastTurnOf', { name: turnUser().name })" :plain="true" :customEmojis="turnUser().emojis"/>
</p>
<p v-if="iAmPlayer && !game.isEnded && !isMyTurn()" class="turn1">{{ i18n.ts._reversi.opponentTurn }}<MkEllipsis/></p>
<p v-if="iAmPlayer && !game.isEnded && isMyTurn()" class="turn2" style="animation: tada 1s linear infinite both;">{{ i18n.ts._reversi.myTurn }}</p>
<p v-if="game.isEnded && logPos == logs.length" class="result">
<template v-if="game.winner">
<Mfm :key="'won'" :text="$t('_reversi.won', { name: game.winner.name })" :plain="true" :customEmojis="game.winner.emojis"/>
<span v-if="game.surrendered != null"> ({{ i18n.ts._reversi.surrendered }})</span>
</template>
<template v-else>{{ i18n.ts._reversi.drawn }}</template>
</p>
</div>
<div class="board">
<div v-if="$store.state.gamesReversiShowBoardLabels" class="labels-x">
<span v-for="i in game.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
<div style="overflow: hidden; line-height: 28px;">
<p v-if="!iAmPlayer && !game.isEnded" class="turn">
<Mfm :key="'turn:' + turnUser.name" :text="i18n.t('_reversi.turnOf', { name: turnUser.name })" :plain="true" :customEmojis="turnUser.emojis"/>
<MkEllipsis/>
</p>
<p v-if="logPos != logs.length" class="turn">
<Mfm :key="'past-turn-of:' + turnUser.name" :text="i18n.t('_reversi.pastTurnOf', { name: turnUser.name })" :plain="true" :customEmojis="turnUser.emojis"/>
</p>
<p v-if="iAmPlayer && !game.isEnded && !isMyTurn" class="turn1">{{ i18n.ts._reversi.opponentTurn }}<MkEllipsis/></p>
<p v-if="iAmPlayer && !game.isEnded && isMyTurn" class="turn2" style="animation: tada 1s linear infinite both;">{{ i18n.ts._reversi.myTurn }}</p>
<p v-if="game.isEnded && logPos == logs.length" class="result">
<template v-if="game.winner">
<Mfm :key="'won'" :text="i18n.t('_reversi.won', { name: game.winner.name })" :plain="true" :customEmojis="game.winner.emojis"/>
<span v-if="game.surrendered != null"> ({{ i18n.ts._reversi.surrendered }})</span>
</template>
<template v-else>{{ i18n.ts._reversi.drawn }}</template>
</p>
</div>
<div class="flex">
<div v-if="$store.state.gamesReversiShowBoardLabels" class="labels-y">
<div v-for="i in game.map.length">{{ i }}</div>
<div :class="$style.board">
<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 class="cells" :style="cellsStyle">
<div
v-for="(stone, i) in o.board"
:class="{ empty: stone == null, none: o.map[i] == 'null', isEnded: game.isEnded, myTurn: !game.isEnded && isMyTurn(), can: turnUser() ? o.canPut(turnUser().id == blackUser.id, i) : null, prev: o.prevPos == i }"
:title="`${String.fromCharCode(65 + o.transformPosToXy(i)[0])}${o.transformPosToXy(i)[1] + 1}`"
@click="set(i)"
>
<template v-if="$store.state.gamesReversiUseAvatarStones || true">
<img v-if="stone === true" :src="blackUser.avatarUrl" alt="black">
<img v-if="stone === false" :src="whiteUser.avatarUrl" alt="white">
</template>
<template v-else>
<i v-if="stone === true" class="fas fa-circle"></i>
<i v-if="stone === false" class="far fa-circle"></i>
</template>
<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"
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)"
>
<img v-if="stone === true" style="pointer-events: none; user-select: none; display: block; width: 100%; height: 100%;" :src="blackUser.avatarUrl">
<img v-if="stone === false" style="pointer-events: none; user-select: none; display: block; width: 100%; height: 100%;" :src="whiteUser.avatarUrl">
</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="$store.state.gamesReversiShowBoardLabels" class="labels-y">
<div v-for="i in game.map.length">{{ i }}</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 v-if="$store.state.gamesReversiShowBoardLabels" class="labels-x">
<span v-for="i in game.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
<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 v-if="!game.isEnded && iAmPlayer" class="_buttonsCenter">
<MkButton danger @click="surrender">{{ i18n.ts._reversi.surrender }}</MkButton>
</div>
<div v-if="game.isEnded" class="player">
<span>{{ logPos }} / {{ logs.length }}</span>
<div v-if="!autoplaying" class="buttons">
<MkButton inline :disabled="logPos == 0" @click="logPos = 0"><i class="fas fa-angle-double-left"></i></MkButton>
<MkButton inline :disabled="logPos == 0" @click="logPos--"><i class="fas fa-angle-left"></i></MkButton>
<MkButton inline :disabled="logPos == logs.length" @click="logPos++"><i class="fas fa-angle-right"></i></MkButton>
<MkButton inline :disabled="logPos == logs.length" @click="logPos = logs.length"><i class="fas fa-angle-double-right"></i></MkButton>
</div>
<MkButton :disabled="autoplaying" style="margin: var(--margin) auto 0 auto;" @click="autoplay()"><i class="fas fa-play"></i></MkButton>
</div>
<div class="info">
<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>
<p class="status"><b>{{ $t('_reversi.turnCount', { count: logPos }) }}</b> {{ i18n.ts._reversi.black }}:{{ o.blackCount }} {{ i18n.ts._reversi.white }}:{{ o.whiteCount }} {{ i18n.ts._reversi.total }}:{{ o.blackCount + o.whiteCount }}</p>
<div v-if="!game.isEnded && iAmPlayer" class="actions">
<MkButton inline @click="surrender">{{ i18n.ts._reversi.surrender }}</MkButton>
</div>
<div v-if="game.isEnded" class="player">
<span>{{ logPos }} / {{ logs.length }}</span>
<div v-if="!autoplaying" class="buttons">
<MkButton inline :disabled="logPos == 0" @click="logPos = 0"><i class="fas fa-angle-double-left"></i></MkButton>
<MkButton inline :disabled="logPos == 0" @click="logPos--"><i class="fas fa-angle-left"></i></MkButton>
<MkButton inline :disabled="logPos == logs.length" @click="logPos++"><i class="fas fa-angle-right"></i></MkButton>
<MkButton inline :disabled="logPos == logs.length" @click="logPos = logs.length"><i class="fas fa-angle-double-right"></i></MkButton>
</div>
<MkButton :disabled="autoplaying" style="margin: var(--margin) auto 0 auto;" @click="autoplay()"><i class="fas fa-play"></i></MkButton>
</div>
<div class="info">
<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 class="watchers">
<MkAvatar v-for="user in watchers" :key="user.id" :user="user" class="avatar"/>
</div>
</div>
</MkSpacer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref, shallowRef, triggerRef, watch } from 'vue';
import * as CRC32 from 'crc-32';
import Reversi, { Color } from '@/scripts/games/reversi/core';
import { url } from '@/config';
import MkButton from '@/components/ui/button.vue';
import { userPage } from '@/filters/user';
import * as os from '@/os';
import * as sound from '@/scripts/sound';
import * as Misskey from 'misskey-js';
import * as Reversi from 'misskey-reversi';
import MkButton from '@/components/MkButton.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';
export default defineComponent({
components: {
MkButton,
},
const $i = signinRequired();
props: {
initGame: {
type: Object,
require: true,
},
connection: {
type: Object,
require: true,
},
},
const props = defineProps<{
game: Misskey.entities.ReversiGameDetailed;
connection: Misskey.ChannelConnection;
}>();
data() {
return {
game: JSON.parse(JSON.stringify(this.initGame)),
o: null as Reversi,
logs: [],
logPos: 0,
watchers: [],
pollingClock: null,
};
},
const showBoardLabels = true;
const autoplaying = ref<boolean>(false);
const game = ref<Misskey.entities.ReversiGameDetailed>(deepClone(props.game));
const logs = ref<Misskey.entities.ReversiLog[]>(game.value.logs);
const logPos = ref<number>(logs.value.length);
const engine = shallowRef<Reversi.Game>(new Reversi.Game(game.value.map, {
isLlotheo: game.value.isLlotheo,
canPutEverywhere: game.value.canPutEverywhere,
loopedBoard: game.value.loopedBoard,
}));
computed: {
iAmPlayer(): boolean {
if (!this.$i) return false;
return this.game.user1Id == this.$i.id || this.game.user2Id == this.$i.id;
},
for (const log of game.value.logs) {
engine.value.put(log.color, log.pos);
}
myColor(): Color {
if (!this.iAmPlayer) return null;
if (this.game.user1Id == this.$i.id && this.game.black == 1) return true;
if (this.game.user2Id == this.$i.id && this.game.black == 2) return true;
return false;
},
const iAmPlayer = computed(() => {
return game.value.user1Id === $i.id || game.value.user2Id === $i.id;
});
opColor(): Color {
if (!this.iAmPlayer) return null;
return this.myColor === true ? false : true;
},
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;
});
blackUser(): any {
return this.game.black == 1 ? this.game.user1 : this.game.user2;
},
const opColor = computed(() => {
if (!iAmPlayer.value) return null;
return !myColor.value;
});
whiteUser(): any {
return this.game.black == 1 ? this.game.user2 : this.game.user1;
},
const blackUser = computed(() => {
return game.value.black === 1 ? game.value.user1 : game.value.user2;
});
cellsStyle(): any {
return {
'grid-template-rows': `repeat(${this.game.map.length}, 1fr)`,
'grid-template-columns': `repeat(${this.game.map[0].length}, 1fr)`,
};
},
},
const whiteUser = computed(() => {
return game.value.black === 1 ? game.value.user2 : game.value.user1;
});
watch: {
logPos(v) {
if (!this.game.isEnded) return;
const o = new Reversi(this.game.map, {
isLlotheo: this.game.isLlotheo,
canPutEverywhere: this.game.canPutEverywhere,
loopedBoard: this.game.loopedBoard,
});
for (const log of this.logs.slice(0, v)) {
o.put(log.color, log.pos);
}
this.o = o;
//this.$forceUpdate();
},
},
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;
}
});
created() {
this.o = new Reversi(this.game.map, {
isLlotheo: this.game.isLlotheo,
canPutEverywhere: this.game.canPutEverywhere,
loopedBoard: this.game.loopedBoard,
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;
const _o = new Reversi.Game(game.value.map, {
isLlotheo: game.value.isLlotheo,
canPutEverywhere: game.value.canPutEverywhere,
loopedBoard: game.value.loopedBoard,
});
for (const log of logs.value.slice(0, v)) {
_o.put(log.color, log.pos);
}
engine.value = _o;
});
if (game.value.isStarted && !game.value.isEnded) {
useInterval(() => {
if (game.value.isEnded) return;
const crc32 = CRC32.str(logs.value.map(x => x.pos.toString()).join(''));
props.connection.send('syncState', {
crc32: crc32,
});
}, 3000, { immediate: false, afterMounted: true });
}
for (const log of this.game.logs) {
this.o.put(log.color, log.pos);
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.put(myColor.value!, pos);
triggerRef(engine);
// サウンドを再生する
//sound.play(myColor.value ? 'reversiPutBlack' : 'reversiPutWhite');
props.connection.send('putStone', {
pos: pos,
});
checkEnd();
}
function onPutStone(x) {
logs.value.push(x);
logPos.value++;
engine.value.put(x.color, x.pos);
triggerRef(engine);
checkEnd();
// サウンドを再生する
if (x.color !== myColor.value) {
//sound.play(x.color ? 'reversiPutBlack' : 'reversiPutWhite');
}
}
function onEnded(x) {
game.value = deepClone(x.game);
}
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;
}
}
}
this.logs = this.game.logs;
this.logPos = this.logs.length;
function onRescue(_game) {
game.value = deepClone(_game);
// 通信を取りこぼしてもいいように定期的にポーリングさせる
if (this.game.isStarted && !this.game.isEnded) {
this.pollingClock = setInterval(() => {
if (this.game.isEnded) return;
const crc32 = CRC32.str(this.logs.map(x => x.pos.toString()).join(''));
this.connection.send('check', {
crc32: crc32,
});
}, 3000);
}
},
engine.value = new Reversi.Game(game.value.map, {
isLlotheo: game.value.isLlotheo,
canPutEverywhere: game.value.canPutEverywhere,
loopedBoard: game.value.loopedBoard,
});
mounted() {
this.connection.on('set', this.onSet);
this.connection.on('rescue', this.onRescue);
this.connection.on('ended', this.onEnded);
this.connection.on('watchers', this.onWatchers);
},
for (const log of game.value.logs) {
engine.value.put(log.color, log.pos);
}
beforeUnmount() {
this.connection.off('set', this.onSet);
this.connection.off('rescue', this.onRescue);
this.connection.off('ended', this.onEnded);
this.connection.off('watchers', this.onWatchers);
triggerRef(engine);
clearInterval(this.pollingClock);
},
logs.value = game.value.logs;
logPos.value = logs.value.length;
methods: {
userPage,
checkEnd();
}
// this.o がリアクティブになった折にはcomputedにできる
turnUser(): any {
if (this.o.turn === true) {
return this.game.black == 1 ? this.game.user1 : this.game.user2;
} else if (this.o.turn === false) {
return this.game.black == 1 ? this.game.user2 : this.game.user1;
} else {
return null;
}
},
function surrender() {
misskeyApi('reversi/surrender', {
gameId: game.value.id,
});
}
// this.o がリアクティブになった折にはcomputedにできる
isMyTurn(): boolean {
if (!this.iAmPlayer) return false;
if (this.turnUser() == null) return false;
return this.turnUser().id == this.$i.id;
},
function autoplay() {
autoplaying.value = true;
logPos.value = 0;
set(pos) {
if (this.game.isEnded) return;
if (!this.iAmPlayer) return;
if (!this.isMyTurn()) return;
if (!this.o.canPut(this.myColor, pos)) return;
this.o.put(this.myColor, pos);
// サウンドを再生する
sound.play(this.myColor ? 'reversiPutBlack' : 'reversiPutWhite');
this.connection.send('set', {
pos: pos,
});
this.checkEnd();
this.$forceUpdate();
},
onSet(x) {
this.logs.push(x);
this.logPos++;
this.o.put(x.color, x.pos);
this.checkEnd();
this.$forceUpdate();
// サウンドを再生する
if (x.color !== this.myColor) {
sound.play(x.color ? 'reversiPutBlack' : 'reversiPutWhite');
}
},
onEnded(x) {
this.game = JSON.parse(JSON.stringify(x.game));
},
checkEnd() {
this.game.isEnded = this.o.isEnded;
if (this.game.isEnded) {
if (this.o.winner === true) {
this.game.winnerId = this.game.black == 1 ? this.game.user1Id : this.game.user2Id;
this.game.winner = this.game.black == 1 ? this.game.user1 : this.game.user2;
} else if (this.o.winner === false) {
this.game.winnerId = this.game.black == 1 ? this.game.user2Id : this.game.user1Id;
this.game.winner = this.game.black == 1 ? this.game.user2 : this.game.user1;
} else {
this.game.winnerId = null;
this.game.winner = null;
}
}
},
// 正しいゲーム情報が送られてきたとき
onRescue(game) {
this.game = JSON.parse(JSON.stringify(game));
this.o = new Reversi(this.game.map, {
isLlotheo: this.game.isLlotheo,
canPutEverywhere: this.game.canPutEverywhere,
loopedBoard: this.game.loopedBoard,
});
for (const log of this.game.logs) {
this.o.put(log.color, log.pos, true);
}
this.logs = this.game.logs;
this.logPos = this.logs.length;
this.checkEnd();
this.$forceUpdate();
},
onWatchers(users) {
this.watchers = users;
},
surrender() {
os.api('games/reversi/games/surrender', {
gameId: this.game.id,
});
},
autoplay() {
this.autoplaying = true;
this.logPos = 0;
window.setTimeout(() => {
logPos.value = 1;
let i = 1;
let previousLog = game.value.logs[0];
const tick = () => {
const log = game.value.logs[i];
const time = new Date(log.at).getTime() - new Date(previousLog.at).getTime();
setTimeout(() => {
this.logPos = 1;
i++;
logPos.value++;
previousLog = log;
let i = 1;
let previousLog = this.game.logs[0];
const tick = () => {
const log = this.game.logs[i];
const time = new Date(log.at).getTime() - new Date(previousLog.at).getTime();
setTimeout(() => {
i++;
this.logPos++;
previousLog = log;
if (i < game.value.logs.length) {
tick();
} else {
autoplaying.value = false;
}
}, time);
};
if (i < this.game.logs.length) {
tick();
} else {
this.autoplaying = false;
}
}, time);
};
tick();
}, 1000);
}
tick();
}, 1000);
},
},
onMounted(() => {
props.connection.on('putStone', onPutStone);
props.connection.on('rescue', onRescue);
props.connection.on('ended', onEnded);
});
onUnmounted(() => {
props.connection.off('putStone', onPutStone);
props.connection.off('rescue', onRescue);
props.connection.off('ended', onEnded);
});
</script>
<style lang="scss" module>
@use "sass:math";
$label-size: 16px;
$gap: 4px;
.root {
text-align: center;
}
.board {
width: calc(100% - 16px);
max-width: 500px;
margin: 0 auto;
}
.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: 6px;
overflow: clip;
&.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;
}
}
</style>
<style lang="scss" scoped>
@use "sass:math";
.xqnhankfuuilcwvhgsopeqncafzsquya {
text-align: center;
> .go-index {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 42px;
height :42px;
}
> header {
padding: 8px;
border-bottom: dashed 1px var(--divider);
}
> .board {
width: calc(100% - 16px);
max-width: 500px;
margin: 0 auto;
$label-size: 16px;
$gap: 4px;
> .labels-x {
height: $label-size;
padding: 0 $label-size;
display: flex;
> * {
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));
}
}
}
> .flex {
display: flex;
> .labels-y {
width: $label-size;
display: flex;
flex-direction: column;
> * {
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));
}
}
}
> .cells {
flex: 1;
display: grid;
grid-gap: $gap;
> div {
background: transparent;
border-radius: 6px;
overflow: hidden;
* {
pointer-events: none;
user-select: none;
}
&.empty {
border: solid 2px var(--divider);
}
&.empty.can {
border-color: var(--accent);
}
&.empty.myTurn {
border-color: var(--divider);
&.can {
border-color: var(--accent);
cursor: pointer;
&:hover {
background: var(--accent);
}
}
}
&.prev {
box-shadow: 0 0 0 4px var(--accent);
}
&.isEnded {
border-color: var(--divider);
}
&.none {
border-color: transparent !important;
}
> svg, > img {
display: block;
width: 100%;
height: 100%;
}
}
}
}
}
> .status {
margin: 0;
@@ -517,18 +457,5 @@ export default defineComponent({
}
}
}
> .watchers {
padding: 0 0 16px 0;
&:empty {
display: none;
}
> .avatar {
width: 32px;
height: 32px;
}
}
}
</style>

264
packages/frontend/src/pages/reversi/game.setting.vue
View File

@@ -4,86 +4,82 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="urbixznjwwuukfsckrwzwsqzsxornqij">
<header><b><MkUserName :user="game.user1"/></b> vs <b><MkUserName :user="game.user2"/></b></header>
<MkStickyContainer>
<MkSpacer :contentMax="600">
<header><b><MkUserName :user="game.user1"/></b> vs <b><MkUserName :user="game.user2"/></b></header>
<div>
<p>{{ i18n.ts._reversi.gameSettings }}</p>
<div class="_gaps">
<p>{{ i18n.ts._reversi.gameSettings }}</p>
<div class="card map _panel">
<header>
<select v-model="mapName" :placeholder="i18n.ts._reversi.chooseBoard" @change="onMapChange">
<option v-if="mapName == '-Custom-'" label="-Custom-" :value="mapName"/>
<option :label="i18n.ts.random" :value="null"/>
<optgroup v-for="c in mapCategories" :key="c" :label="c">
<option v-for="m in Object.values(Reversi.maps).filter(m => m.category == c)" :key="m.name" :label="m.name" :value="m.name">{{ m.name }}</option>
</optgroup>
</select>
</header>
<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>
<div v-if="game.map == null" class="random"><i class="ti ti-dice"></i></div>
<div v-else class="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="{ none: x == ' ' }" @click="onMapCellClick(i, x)">
<i v-if="x === 'b'" class="ti ti-circle-filled"></i>
<i v-if="x === 'w'" class="ti ti-circle"></i>
<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; width: 100%; height: 100%;" :class="x === 'b' ? 'ti ti-circle-filled' : 'ti ti-circle'"></i>
</div>
</div>
</div>
</div>
</div>
<div class="card _panel">
<header>
<span>{{ i18n.ts._reversi.blackOrWhite }}</span>
</header>
<div class="_panel" style="padding: 16px;">
<header>
<span>{{ i18n.ts._reversi.blackOrWhite }}</span>
</header>
<div>
<MkRadio v-model="game.bw" value="random" @update:modelValue="updateSettings('bw')">{{ i18n.ts.random }}</MkRadio>
<MkRadio v-model="game.bw" :value="'1'" @update:modelValue="updateSettings('bw')">
<I18n :src="i18n.ts._reversi.blackIs" tag="span">
<template #name>
<b><MkUserName :user="game.user1"/></b>
</template>
</I18n>
</MkRadio>
<MkRadio v-model="game.bw" :value="'2'" @update:modelValue="updateSettings('bw')">
<I18n :src="i18n.ts._reversi.blackIs" tag="span">
<template #name>
<b><MkUserName :user="game.user2"/></b>
</template>
</I18n>
</MkRadio>
<div>
<MkRadio v-model="game.bw" value="random" @update:modelValue="updateSettings('bw')">{{ i18n.ts.random }}</MkRadio>
<MkRadio v-model="game.bw" :value="'1'" @update:modelValue="updateSettings('bw')">
<I18n :src="i18n.ts._reversi.blackIs" tag="span">
<template #name>
<b><MkUserName :user="game.user1"/></b>
</template>
</I18n>
</MkRadio>
<MkRadio v-model="game.bw" :value="'2'" @update:modelValue="updateSettings('bw')">
<I18n :src="i18n.ts._reversi.blackIs" tag="span">
<template #name>
<b><MkUserName :user="game.user2"/></b>
</template>
</I18n>
</MkRadio>
</div>
</div>
<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 class="card _panel">
<header>
<span>{{ i18n.ts._reversi.rules }}</span>
</header>
<div>
<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>
</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="exit">{{ 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>
</div>
<footer class="_acrylic">
<p class="status">
<template v-if="isAccepted && isOpAccepted">{{ i18n.ts._reversi.thisGameIsStartedSoon }}<MkEllipsis/></template>
<template v-if="isAccepted && !isOpAccepted">{{ i18n.ts._reversi.waitingForOther }}<MkEllipsis/></template>
<template v-if="!isAccepted && isOpAccepted">{{ i18n.ts._reversi.waitingForMe }}</template>
<template v-if="!isAccepted && !isOpAccepted">{{ i18n.ts._reversi.waitingBoth }}<MkEllipsis/></template>
</p>
<div class="actions">
<MkButton inline @click="exit">{{ i18n.ts.cancel }}</MkButton>
<MkButton v-if="!isAccepted" inline primary @click="accept">{{ i18n.ts._reversi.ready }}</MkButton>
<MkButton v-if="isAccepted" inline primary @click="cancel">{{ i18n.ts._reversi.cancelReady }}</MkButton>
</div>
</footer>
</div>
</template>
</MkStickyContainer>
</template>
<script lang="ts" setup>
@@ -94,45 +90,90 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
import { useStream } from '@/stream.js';
import { i18n } from '@/i18n.js';
import { signinRequired } from '@/account.js';
import { deepClone } from '@/scripts/clone.js';
import MkButton from '@/components/MkButton.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkRadio from '@/components/MkRadio.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';
const $i = signinRequired();
const mapCategories = Array.from(new Set(Object.values(Reversi.maps).map(x => x.category)));
const props = defineProps<{
game: Misskey.entities.ReversiGameDetailed;
connection: Misskey.ChannelConnection;
}>();
game: Misskey.entities.ReversiGameDetailed;
connection: Misskey.ChannelConnection;
}>();
const game = ref<Misskey.entities.ReversiGameDetailed>(props.game);
const game = ref<Misskey.entities.ReversiGameDetailed>(deepClone(props.game));
const isLlotheo = ref<boolean>(false);
const mapName = ref<string>(Reversi.maps.eighteight.name!);
const isAccepted = computed(() => {
if (game.value.user1Id === $i.id && game.value.user1Accepted) return true;
if (game.value.user2Id === $i.id && game.value.user2Accepted) return true;
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 isOpAccepted = computed(() => {
if (game.value.user1Id !== $i.id && game.value.user1Accepted) return true;
if (game.value.user2Id !== $i.id && game.value.user2Accepted) return true;
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;
});
function chooseMap(ev: MouseEvent) {
const menu: MenuItem[] = [{
text: i18n.ts.random,
icon: 'ti ti-dice',
action: () => {
game.value.map = null;
updateSettings('map');
},
}];
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);
}
function exit() {
props.connection.send('exit', {});
}
function accept() {
props.connection.send('accept', {});
function ready() {
props.connection.send('ready', true);
}
function cancel() {
props.connection.send('cancelAccept', {});
function unready() {
props.connection.send('ready', false);
}
function onChangeAcceptingStates(acceptingStates) {
game.value.user1Accepted = acceptingStates.user1;
game.value.user2Accepted = acceptingStates.user2;
function onChangeReadyStates(states) {
game.value.user1Ready = states.user1;
game.value.user2Ready = states.user2;
}
function updateSettings(key: keyof Misskey.entities.ReversiGameDetailed) {
@@ -144,21 +185,6 @@ function updateSettings(key: keyof Misskey.entities.ReversiGameDetailed) {
function onUpdateSettings({ key, value }: { key: keyof Misskey.entities.ReversiGameDetailed; value: any; }) {
game.value[key] = value;
if (game.value.map == null) {
mapName.value = null;
} else {
const found = Object.values(Reversi.maps).find(x => x.data.join('') === game.value.map.join(''));
mapName.value = found ? found.name! : '-Custom-';
}
}
function onMapChange() {
if (mapName.value == null) {
game.value.map = null;
} else {
game.value.map = Object.values(Reversi.maps).find(x => x.name === mapName.value)!.data;
}
updateSettings('map');
}
function onMapCellClick(pos: number, pixel: string) {
@@ -175,11 +201,41 @@ function onMapCellClick(pos: number, pixel: string) {
updateSettings('map');
}
props.connection.on('changeAcceptingStates', onChangeAcceptingStates);
props.connection.on('changeReadyStates', onChangeReadyStates);
props.connection.on('updateSettings', onUpdateSettings);
onUnmounted(() => {
props.connection.off('changeAcceptingStates', onChangeAcceptingStates);
props.connection.off('changeReadyStates', onChangeReadyStates);
props.connection.off('updateSettings', onUpdateSettings);
});
</script>
<style lang="scss" module>
.board {
display: grid;
grid-gap: 4px;
width: 300px;
height: 300px;
margin: 0 auto;
color: var(--fg);
}
.boardCell {
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>

8
packages/frontend/src/pages/reversi/game.vue
View File

@@ -5,8 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div v-if="game == null || connection == null"><MkLoading/></div>
<GameSetting v-else-if="!game.isStarted" :initGame="game" :connection="connection"/>
<GameBoard v-else :initGame="game" :connection="connection"/>
<GameSetting v-else-if="!game.isStarted" :game="game" :connection="connection"/>
<GameBoard v-else :game="game" :connection="connection"/>
</template>
<script lang="ts" setup>
@@ -42,8 +42,8 @@ async function fetchGame() {
connection.value = useStream().useChannel('reversiGame', {
gameId: game.value.id,
});
connection.value.on('started', g => {
game.value = g;
connection.value.on('started', x => {
game.value = x.game;
});
}

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

@@ -4,14 +4,15 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div v-if="!matching" class="bgvwxkhb">
<MkSpacer v-if="!matchingAny && !matchingUser" :contentMax="600" class="bgvwxkhb">
<h1>Misskey {{ i18n.ts._reversi.reversi }}</h1>
<div class="play">
<MkButton primary round style="margin: var(--margin) auto 0 auto;" @click="match">{{ i18n.ts.invite }}</MkButton>
</div>
<div class="_gaps">
<div class="_buttonsCenter">
<MkButton primary rounded @click="matchAny">Match</MkButton>
<MkButton primary rounded @click="matchUser">{{ i18n.ts.invite }}</MkButton>
</div>
<div class="_section">
<MkFolder v-if="invitations.length > 0">
<template #header>{{ i18n.ts.invitations }}</template>
<div class="nfcacttm">
@@ -24,165 +25,180 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</MkFolder>
<MkFolder v-if="myGames.length > 0">
<template #header>{{ i18n.ts._reversi.myGames }}</template>
<div class="knextgwz">
<MkA v-for="g in myGames" :key="g.id" class="game _panel" tabindex="-1" :to="`/games/reversi/${g.id}`">
<div class="players">
<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"/>
<MkFolder v-if="$i" :defaultOpen="true">
<template #label>{{ i18n.ts._reversi.myGames }}</template>
<MkPagination :pagination="myGamesPagination">
<template #default="{ items }">
<div class="knextgwz">
<MkA v-for="g in items" :key="g.id" class="game _panel" tabindex="-1" :to="`/games/reversi/${g.id}`">
<div class="players">
<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"/>
</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>
</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>
</div>
</template>
</MkPagination>
</MkFolder>
<MkFolder v-if="games.length > 0">
<template #header>{{ i18n.ts._reversi.allGames }}</template>
<div class="knextgwz">
<MkA v-for="g in games" :key="g.id" class="game _panel" tabindex="-1" :to="`/games/reversi/${g.id}`">
<div class="players">
<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"/>
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts._reversi.allGames }}</template>
<MkPagination :pagination="gamesPagination">
<template #default="{ items }">
<div class="knextgwz">
<MkA v-for="g in items" :key="g.id" class="game _panel" tabindex="-1" :to="`/games/reversi/${g.id}`">
<div class="players">
<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"/>
</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>
</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>
</div>
</template>
</MkPagination>
</MkFolder>
</div>
</div>
</MkSpacer>
<div v-else class="sazhgisb">
<h1>
<h1 v-if="matchingUser">
<I18n :src="i18n.ts.waitingFor" tag="span">
<template #x>
<b><MkUserName :user="matching"/></b>
<b><MkUserName :user="matchingUser"/></b>
</template>
</I18n>
<MkEllipsis/>
</h1>
<h1 v-else>
Matching
<MkEllipsis/>
</h1>
<div class="cancel">
<MkButton inline round @click="cancel">{{ i18n.ts.cancel }}</MkButton>
<MkButton inline round @click="cancelMatching">{{ i18n.ts.cancel }}</MkButton>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, markRaw } from 'vue';
import * as os from '@/os';
import MkButton from '@/components/ui/button.vue';
import MkFolder from '@/components/ui/folder.vue';
import * as symbols from '@/symbols';
<script lang="ts" setup>
import { computed, 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';
export default defineComponent({
components: {
MkButton, MkFolder,
const myGamesPagination = {
endpoint: 'reversi/games' as const,
limit: 10,
params: {
my: true,
},
};
inject: ['navHook'],
const gamesPagination = {
endpoint: 'reversi/games' as const,
limit: 10,
};
data() {
return {
[symbols.PAGE_INFO]: {
title: this.i18n.ts._reversi.reversi,
icon: 'fas fa-gamepad',
},
games: [],
gamesFetching: true,
gamesMoreFetching: false,
myGames: [],
matching: null,
invitations: [],
connection: null,
pingClock: null,
};
},
const router = useRouter();
mounted() {
if (this.$i) {
this.connection = markRaw(os.stream.useChannel('gamesReversi'));
if ($i) {
const connection = useStream().useChannel('reversi');
this.connection.on('invited', this.onInvited);
connection.on('matched', x => {
startGame(x.game);
});
this.connection.on('matched', this.onMatched);
connection.on('invited', invite => {
invitations.value.unshift(invite);
});
this.pingClock = setInterval(() => {
if (this.matching) {
this.connection.send('ping', {
id: this.matching.id,
});
}
}, 3000);
onUnmounted(() => {
connection.dispose();
});
}
os.api('games/reversi/games', {
my: true,
}).then(games => {
this.myGames = games;
});
const invitations = ref<Misskey.entities.UserLite[]>([]);
const matchingUser = ref<Misskey.entities.UserLite | null>(null);
const matchingAny = ref<boolean>(false);
os.api('games/reversi/invitations').then(invitations => {
this.invitations = this.invitations.concat(invitations);
});
}
function startGame(game: Misskey.entities.ReversiGameDetailed) {
matchingUser.value = null;
matchingAny.value = false;
router.push(`/reversi/g/${game.id}`);
}
os.api('games/reversi/games').then(games => {
this.games = games;
this.gamesFetching = false;
async function matchHeatbeat() {
if (matchingUser.value) {
const res = await misskeyApi('reversi/match', {
userId: matchingUser.value.id,
});
},
beforeUnmount() {
if (this.connection) {
this.connection.dispose();
clearInterval(this.pingClock);
if (res != null) {
startGame(res);
}
},
} else if (matchingAny.value) {
const res = await misskeyApi('reversi/match', {
userId: null,
});
methods: {
go(game) {
const url = '/games/reversi/' + game.id;
if (this.navHook) {
this.navHook(url);
} else {
this.$router.push(url);
}
},
if (res != null) {
startGame(res);
}
}
}
async match() {
const user = await os.selectUser({ local: true });
if (user == null) return;
os.api('games/reversi/match', {
userId: user.id,
}).then(res => {
if (res == null) {
this.matching = user;
} else {
this.go(res);
}
});
},
async function matchUser() {
const user = await os.selectUser({ local: true });
if (user == null) return;
cancel() {
this.matching = null;
os.api('games/reversi/match/cancel');
},
matchingUser.value = user;
accept(invitation) {
os.api('games/reversi/match', {
userId: invitation.parent.id,
}).then(game => {
if (game) {
this.go(game);
}
});
},
matchHeatbeat();
}
onMatched(game) {
this.go(game);
},
async function matchAny() {
matchingAny.value = true;
onInvited(invite) {
this.invitations.unshift(invite);
},
},
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(invitation) {
const game = await misskeyApi('reversi/match', {
userId: invitation.parent.id,
});
if (game) {
startGame(game);
}
}
useInterval(matchHeatbeat, 1000 * 10, { immediate: false, afterMounted: true });
onMounted(() => {
misskeyApi('reversi/invitations').then(_invitations => {
invitations.value = _invitations;
});
});
definePageMetadata(computed(() => ({
title: 'Reversi',
icon: 'ti ti-device-gamepad',
})));
</script>
<style lang="scss" scoped>

4
packages/frontend/vite.config.ts
View File

@@ -103,7 +103,7 @@ export function getConfig(): UserConfig {
// https://vitejs.dev/guide/dep-pre-bundling.html#monorepos-and-linked-dependencies
optimizeDeps: {
include: ['misskey-js'],
include: ['misskey-js', 'misskey-reversi'],
},
build: {
@@ -135,7 +135,7 @@ export function getConfig(): UserConfig {
// https://vitejs.dev/guide/dep-pre-bundling.html#monorepos-and-linked-dependencies
commonjsOptions: {
include: [/misskey-js/, /node_modules/],
include: [/misskey-js/, /misskey-reversi/, /node_modules/],
},
},

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

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

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

@@ -1,6 +1,6 @@
/*
* version: 2023.12.2
* generatedAt: 2024-01-19T01:59:26.057Z
* generatedAt: 2024-01-19T08:51:50.615Z
*/
import type {

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

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

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

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

10
packages/misskey-js/src/autogen/types.ts
View File

@@ -3,7 +3,7 @@
/*
* version: 2023.12.2
* generatedAt: 2024-01-19T01:59:25.971Z
* generatedAt: 2024-01-19T08:51:50.533Z
*/
/**
@@ -4469,8 +4469,8 @@ export type components = {
isEnded: boolean;
form1: Record<string, never> | null;
form2: Record<string, never> | null;
user1Accepted: boolean;
user2Accepted: boolean;
user1Ready: boolean;
user2Ready: boolean;
/** Format: id */
user1Id: string;
/** Format: id */
@@ -4499,8 +4499,8 @@ export type components = {
isEnded: boolean;
form1: Record<string, never> | null;
form2: Record<string, never> | null;
user1Accepted: boolean;
user2Accepted: boolean;
user1Ready: boolean;
user2Ready: boolean;
/** Format: id */
user1Id: string;
/** Format: id */