This commit is contained in:
syuilo 2018-03-07 17:48:32 +09:00
parent 6c495268ae
commit 161fd4afab
37 changed files with 747 additions and 219 deletions

View file

@ -233,6 +233,26 @@ const endpoints: Endpoint[] = [
kind: 'notification-read' kind: 'notification-read'
}, },
{
name: 'othello/match',
withCredential: true
},
{
name: 'othello/match/cancel',
withCredential: true
},
{
name: 'othello/invitations',
withCredential: true
},
{
name: 'othello/games',
withCredential: true
},
{ {
name: 'mute/create', name: 'mute/create',
withCredential: true, withCredential: true,

View file

@ -0,0 +1,22 @@
import $ from 'cafy';
import Game, { pack } from '../../models/othello-game';
module.exports = (params, user) => new Promise(async (res, rej) => {
// Get 'my' parameter
const [my = false, myErr] = $(params.my).boolean().$;
if (myErr) return rej('invalid my param');
const q = my ? {
$or: [{
black_user_id: user._id
}, {
white_user_id: user._id
}]
} : {};
// Fetch games
const games = await Game.find(q);
// Reponse
res(Promise.all(games.map(async (g) => await pack(g, user))));
});

View file

@ -0,0 +1,11 @@
import Matching, { pack as packMatching } from '../../models/othello-matching';
module.exports = (params, user) => new Promise(async (res, rej) => {
// Find session
const invitations = await Matching.find({
child_id: user._id
});
// Reponse
res(Promise.all(invitations.map(async (i) => await packMatching(i, user))));
});

View file

@ -1,6 +1,6 @@
import $ from 'cafy'; import $ from 'cafy';
import Matching from '../../models/othello-matchig'; import Matching, { pack as packMatching } from '../../models/othello-matching';
import Game, { pack } from '../../models/othello-game'; import Game, { pack as packGame } from '../../models/othello-game';
import User from '../../models/user'; import User from '../../models/user';
import { publishOthelloStream } from '../../event'; import { publishOthelloStream } from '../../event';
@ -33,17 +33,14 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
created_at: new Date(), created_at: new Date(),
black_user_id: parentIsBlack ? exist.parent_id : user._id, black_user_id: parentIsBlack ? exist.parent_id : user._id,
white_user_id: parentIsBlack ? user._id : exist.parent_id, white_user_id: parentIsBlack ? user._id : exist.parent_id,
turn_user_id: parentIsBlack ? exist.parent_id : user._id,
logs: [] logs: []
}); });
const packedGame = await pack(game);
// Reponse // Reponse
res(packedGame); res(await packGame(game, user));
publishOthelloStream(exist.parent_id, 'matched', { publishOthelloStream(exist.parent_id, 'matched', await packGame(game, exist.parent_id));
game
});
} else { } else {
// Fetch child // Fetch child
const child = await User.findOne({ const child = await User.findOne({
@ -64,17 +61,16 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
}); });
// セッションを作成 // セッションを作成
await Matching.insert({ const matching = await Matching.insert({
created_at: new Date(),
parent_id: user._id, parent_id: user._id,
child_id: child._id child_id: child._id
}); });
// Reponse // Reponse
res(204); res();
// 招待 // 招待
publishOthelloStream(child._id, 'invited', { publishOthelloStream(child._id, 'invited', await packMatching(matching, child));
user_id: user._id
});
} }
}); });

View file

@ -0,0 +1,9 @@
import Matching from '../../../models/othello-matching';
module.exports = (params, user) => new Promise(async (res, rej) => {
await Matching.remove({
parent_id: user._id
});
res();
});

View file

@ -42,6 +42,10 @@ class MisskeyEvent {
this.publish(`othello-stream:${userId}`, type, typeof value === 'undefined' ? null : value); this.publish(`othello-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
} }
public publishOthelloGameStream(gameId: ID, type: string, value?: any): void {
this.publish(`othello-game-stream:${gameId}`, type, typeof value === 'undefined' ? null : value);
}
public publishChannelStream(channelId: ID, type: string, value?: any): void { public publishChannelStream(channelId: ID, type: string, value?: any): void {
this.publish(`channel-stream:${channelId}`, type, typeof value === 'undefined' ? null : value); this.publish(`channel-stream:${channelId}`, type, typeof value === 'undefined' ? null : value);
} }
@ -71,4 +75,6 @@ export const publishMessagingIndexStream = ev.publishMessagingIndexStream.bind(e
export const publishOthelloStream = ev.publishOthelloStream.bind(ev); export const publishOthelloStream = ev.publishOthelloStream.bind(ev);
export const publishOthelloGameStream = ev.publishOthelloGameStream.bind(ev);
export const publishChannelStream = ev.publishChannelStream.bind(ev); export const publishChannelStream = ev.publishChannelStream.bind(ev);

View file

@ -1,6 +1,7 @@
import * as mongo from 'mongodb'; import * as mongo from 'mongodb';
import deepcopy = require('deepcopy'); import deepcopy = require('deepcopy');
import db from '../../db/mongodb'; import db from '../../db/mongodb';
import { IUser, pack as packUser } from './user';
const Game = db.get<IGame>('othello_games'); const Game = db.get<IGame>('othello_games');
export default Game; export default Game;
@ -15,19 +16,30 @@ export interface IGame {
/** /**
* Pack an othello game for API response * Pack an othello game for API response
*
* @param {any} game
* @return {Promise<any>}
*/ */
export const pack = ( export const pack = (
game: any game: any,
me?: string | mongo.ObjectID | IUser
) => new Promise<any>(async (resolve, reject) => { ) => new Promise<any>(async (resolve, reject) => {
// Me
const meId: mongo.ObjectID = me
? mongo.ObjectID.prototype.isPrototypeOf(me)
? me as mongo.ObjectID
: typeof me === 'string'
? new mongo.ObjectID(me)
: (me as IUser)._id
: null;
const _game = deepcopy(game); const _game = deepcopy(game);
// Rename _id to id // Rename _id to id
_game.id = _game._id; _game.id = _game._id;
delete _game._id; delete _game._id;
// Populate user
_game.black_user = await packUser(_game.black_user_id, meId);
_game.white_user = await packUser(_game.white_user_id, meId);
resolve(_game); resolve(_game);
}); });

View file

@ -1,11 +1,42 @@
import * as mongo from 'mongodb'; import * as mongo from 'mongodb';
import deepcopy = require('deepcopy');
import db from '../../db/mongodb'; import db from '../../db/mongodb';
import { IUser, pack as packUser } from './user';
const Matching = db.get<IMatching>('othello_matchings'); const Matching = db.get<IMatching>('othello_matchings');
export default Matching; export default Matching;
export interface IMatching { export interface IMatching {
_id: mongo.ObjectID; _id: mongo.ObjectID;
created_at: Date;
parent_id: mongo.ObjectID; parent_id: mongo.ObjectID;
child_id: mongo.ObjectID; child_id: mongo.ObjectID;
} }
/**
* Pack an othello matching for API response
*/
export const pack = (
matching: any,
me?: string | mongo.ObjectID | IUser
) => new Promise<any>(async (resolve, reject) => {
// Me
const meId: mongo.ObjectID = me
? mongo.ObjectID.prototype.isPrototypeOf(me)
? me as mongo.ObjectID
: typeof me === 'string'
? new mongo.ObjectID(me)
: (me as IUser)._id
: null;
const _matching = deepcopy(matching);
delete _matching._id;
// Populate user
_matching.parent = await packUser(_matching.parent_id, meId);
_matching.child = await packUser(_matching.child_id, meId);
resolve(_matching);
});

View file

@ -1,12 +1,69 @@
import * as websocket from 'websocket'; import * as websocket from 'websocket';
import * as redis from 'redis'; import * as redis from 'redis';
import Game from '../models/othello-game';
import { publishOthelloGameStream } from '../event';
import Othello from '../../common/othello';
export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient): void { export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient, user: any): void {
const game = request.resourceURL.query.game; const gameId = request.resourceURL.query.game;
// Subscribe game stream // Subscribe game stream
subscriber.subscribe(`misskey:othello-game-stream:${game}`); subscriber.subscribe(`misskey:othello-game-stream:${gameId}`);
subscriber.on('message', (_, data) => { subscriber.on('message', (_, data) => {
connection.send(data); connection.send(data);
}); });
connection.on('message', async (data) => {
const msg = JSON.parse(data.utf8Data);
switch (msg.type) {
case 'set':
if (msg.pos == null) return;
const pos = msg.pos;
const game = await Game.findOne({ _id: gameId });
const o = new Othello();
game.logs.forEach(log => {
o.set(log.color, log.pos);
});
const myColor = game.black_user_id.equals(user._id) ? 'black' : 'white';
const opColor = myColor == 'black' ? 'white' : 'black';
if (!o.canReverse(myColor, pos)) return;
o.set(myColor, pos);
let turn;
if (o.getPattern(opColor).length > 0) {
turn = myColor == 'black' ? game.white_user_id : game.black_user_id;
} else {
turn = myColor == 'black' ? game.black_user_id : game.white_user_id;
}
const log = {
at: new Date(),
color: myColor,
pos
};
await Game.update({
_id: gameId
}, {
$set: {
turn_user_id: turn
},
$push: {
logs: log
}
});
publishOthelloGameStream(gameId, 'set', {
color: myColor,
pos
});
break;
}
});
} }

View file

@ -2,10 +2,8 @@ import * as websocket from 'websocket';
import * as redis from 'redis'; import * as redis from 'redis';
export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient, user: any): void { export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient, user: any): void {
const otherparty = request.resourceURL.query.otherparty; // Subscribe othello stream
subscriber.subscribe(`misskey:othello-stream:${user._id}`);
// Subscribe matching stream
subscriber.subscribe(`misskey:othello-matching:${user._id}-${otherparty}`);
subscriber.on('message', (_, data) => { subscriber.on('message', (_, data) => {
connection.send(data); connection.send(data);
}); });

View file

@ -11,7 +11,7 @@ import driveStream from './stream/drive';
import messagingStream from './stream/messaging'; import messagingStream from './stream/messaging';
import messagingIndexStream from './stream/messaging-index'; import messagingIndexStream from './stream/messaging-index';
import othelloGameStream from './stream/othello-game'; import othelloGameStream from './stream/othello-game';
import othelloMatchingStream from './stream/othello-matching'; import othelloStream from './stream/othello';
import serverStream from './stream/server'; import serverStream from './stream/server';
import requestsStream from './stream/requests'; import requestsStream from './stream/requests';
import channelStream from './stream/channel'; import channelStream from './stream/channel';
@ -65,7 +65,7 @@ module.exports = (server: http.Server) => {
request.resourceURL.pathname === '/messaging' ? messagingStream : request.resourceURL.pathname === '/messaging' ? messagingStream :
request.resourceURL.pathname === '/messaging-index' ? messagingIndexStream : request.resourceURL.pathname === '/messaging-index' ? messagingIndexStream :
request.resourceURL.pathname === '/othello-game' ? othelloGameStream : request.resourceURL.pathname === '/othello-game' ? othelloGameStream :
request.resourceURL.pathname === '/othello-matching' ? othelloMatchingStream : request.resourceURL.pathname === '/othello' ? othelloStream :
null; null;
if (channel !== null) { if (channel !== null) {

View file

@ -1,37 +1,38 @@
const BOARD_SIZE = 8; const BOARD_SIZE = 8;
export default class Othello { export default class Othello {
public board: Array<Array<'black' | 'white'>>; public board: Array<'black' | 'white'>;
/** /**
* *
*/ */
constructor() { constructor() {
this.board = [ this.board = [
[null, null, null, null, null, null, null, null], null, null, null, null, null, null, null, null,
[null, null, null, null, null, null, null, null], null, null, null, null, null, null, null, null,
[null, null, null, null, null, null, null, null], null, null, null, null, null, null, null, null,
[null, null, null, 'black', 'white', null, null, null], null, null, null, 'white', 'black', null, null, null,
[null, null, null, 'white', 'black', null, null, null], null, null, null, 'black', 'white', null, null, null,
[null, null, null, null, null, null, null, null], null, null, null, null, null, null, null, null,
[null, null, null, null, null, null, null, null], null, null, null, null, null, null, null, null,
[null, null, null, null, null, null, null, null] null, null, null, null, null, null, null, null
]; ];
} }
public setByNumber(color, n) { public setByNumber(color, n) {
const ps = this.getPattern(color); const ps = this.getPattern(color);
this.set(color, ps[n][0], ps[n][1]); this.set2(color, ps[n][0], ps[n][1]);
} }
private write(color, x, y) { private write(color, x, y) {
this.board[y][x] = color; const pos = x + (y * 8);
this.board[pos] = color;
} }
/** /**
* *
*/ */
public set(color, x, y) { public set2(color, x, y) {
this.write(color, x, y); this.write(color, x, y);
const reverses = this.getReverse(color, x, y); const reverses = this.getReverse(color, x, y);
@ -89,24 +90,42 @@ export default class Othello {
}); });
} }
public set(color, pos) {
const x = pos % BOARD_SIZE;
const y = Math.floor(pos / BOARD_SIZE);
this.set2(color, x, y);
}
public get(x, y) {
const pos = x + (y * 8);
return this.board[pos];
}
/** /**
* *
*/ */
public getPattern(myColor): number[][] { public getPattern(myColor): number[][] {
const result = []; const result = [];
this.board.forEach((stones, y) => stones.forEach((stone, x) => { this.board.forEach((stone, i) => {
if (stone != null) return; if (stone != null) return;
if (this.canReverse(myColor, x, y)) result.push([x, y]); const x = i % BOARD_SIZE;
})); const y = Math.floor(i / BOARD_SIZE);
if (this.canReverse2(myColor, x, y)) result.push([x, y]);
});
return result; return result;
} }
/** /**
* (1) * (1)
*/ */
public canReverse(myColor, targetx, targety): boolean { public canReverse2(myColor, targetx, targety): boolean {
return this.getReverse(myColor, targetx, targety) !== null; return this.getReverse(myColor, targetx, targety) !== null;
} }
public canReverse(myColor, pos): boolean {
const x = pos % BOARD_SIZE;
const y = Math.floor(pos / BOARD_SIZE);
return this.getReverse(myColor, x, y) !== null;
}
private getReverse(myColor, targetx, targety): number[] { private getReverse(myColor, targetx, targety): number[] {
const opponentColor = myColor == 'black' ? 'white' : 'black'; const opponentColor = myColor == 'black' ? 'white' : 'black';
@ -117,11 +136,11 @@ export default class Othello {
return (x, y): any => { return (x, y): any => {
if (breaked) { if (breaked) {
return; return;
} else if (this.board[y][x] == myColor && opponentStoneFound) { } else if (this.get(x, y) == myColor && opponentStoneFound) {
return true; return true;
} else if (this.board[y][x] == myColor && !opponentStoneFound) { } else if (this.get(x, y) == myColor && !opponentStoneFound) {
breaked = true; breaked = true;
} else if (this.board[y][x] == opponentColor) { } else if (this.get(x, y) == opponentColor) {
opponentStoneFound = true; opponentStoneFound = true;
} else { } else {
breaked = true; breaked = true;
@ -210,12 +229,13 @@ export default class Othello {
public toString(): string { public toString(): string {
//return this.board.map(row => row.map(state => state === 'black' ? '●' : state === 'white' ? '○' : '┼').join('')).join('\n'); //return this.board.map(row => row.map(state => state === 'black' ? '●' : state === 'white' ? '○' : '┼').join('')).join('\n');
return this.board.map(row => row.map(state => state === 'black' ? '⚫️' : state === 'white' ? '⚪️' : '🔹').join('')).join('\n'); //return this.board.map(row => row.map(state => state === 'black' ? '⚫️' : state === 'white' ? '⚪️' : '🔹').join('')).join('\n');
return 'wip';
} }
public toPatternString(color): string { public toPatternString(color): string {
//const num = ['', '', '', '', '', '', '', '', '', '']; //const num = ['', '', '', '', '', '', '', '', '', ''];
const num = ['0⃣', '1⃣', '2⃣', '3⃣', '4⃣', '5⃣', '6⃣', '7⃣', '8⃣', '9⃣', '🔟', '🍏', '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒', '🍑', '🍍']; /*const num = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '🔟', '🍏', '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒', '🍑', '🍍'];
const pattern = this.getPattern(color); const pattern = this.getPattern(color);
@ -223,7 +243,9 @@ export default class Othello {
const i = pattern.findIndex(p => p[0] == x && p[1] == y); const i = pattern.findIndex(p => p[0] == x && p[1] == y);
//return state === 'black' ? '●' : state === 'white' ? '○' : i != -1 ? num[i] : '┼'; //return state === 'black' ? '●' : state === 'white' ? '○' : i != -1 ? num[i] : '┼';
return state === 'black' ? '⚫️' : state === 'white' ? '⚪️' : i != -1 ? num[i] : '🔹'; return state === 'black' ? '⚫️' : state === 'white' ? '⚪️' : i != -1 ? num[i] : '🔹';
}).join('')).join('\n'); }).join('')).join('\n');*/
return 'wip';
} }
} }

View file

@ -4,11 +4,12 @@ import * as merge from 'object-assign-deep';
import { host, apiUrl, swPublickey, version, lang, googleMapsApiKey } from '../config'; import { host, apiUrl, swPublickey, version, lang, googleMapsApiKey } from '../config';
import Progress from './scripts/loading'; import Progress from './scripts/loading';
import HomeStreamManager from './scripts/streaming/home-stream-manager'; import { HomeStreamManager } from './scripts/streaming/home';
import DriveStreamManager from './scripts/streaming/drive-stream-manager'; import { DriveStreamManager } from './scripts/streaming/drive';
import ServerStreamManager from './scripts/streaming/server-stream-manager'; import { ServerStreamManager } from './scripts/streaming/server';
import RequestsStreamManager from './scripts/streaming/requests-stream-manager'; import { RequestsStreamManager } from './scripts/streaming/requests';
import MessagingIndexStreamManager from './scripts/streaming/messaging-index-stream-manager'; import { MessagingIndexStreamManager } from './scripts/streaming/messaging-index';
import { OthelloStreamManager } from './scripts/streaming/othello';
import Err from '../common/views/components/connect-failed.vue'; import Err from '../common/views/components/connect-failed.vue';
@ -117,11 +118,13 @@ export default class MiOS extends EventEmitter {
serverStream: ServerStreamManager; serverStream: ServerStreamManager;
requestsStream: RequestsStreamManager; requestsStream: RequestsStreamManager;
messagingIndexStream: MessagingIndexStreamManager; messagingIndexStream: MessagingIndexStreamManager;
othelloStream: OthelloStreamManager;
} = { } = {
driveStream: null, driveStream: null,
serverStream: null, serverStream: null,
requestsStream: null, requestsStream: null,
messagingIndexStream: null messagingIndexStream: null,
othelloStream: null
}; };
/** /**
@ -169,6 +172,7 @@ export default class MiOS extends EventEmitter {
// Init other stream manager // Init other stream manager
this.streams.driveStream = new DriveStreamManager(this.i); this.streams.driveStream = new DriveStreamManager(this.i);
this.streams.messagingIndexStream = new MessagingIndexStreamManager(this.i); this.streams.messagingIndexStream = new MessagingIndexStreamManager(this.i);
this.streams.othelloStream = new OthelloStreamManager(this.i);
}); });
if (this.debug) { if (this.debug) {

View file

@ -1,20 +0,0 @@
import StreamManager from './stream-manager';
import Connection from './drive-stream';
export default class DriveStreamManager extends StreamManager<Connection> {
private me;
constructor(me) {
super();
this.me = me;
}
public getConnection() {
if (this.connection == null) {
this.connection = new Connection(this.me);
}
return this.connection;
}
}

View file

@ -1,12 +0,0 @@
import Stream from './stream';
/**
* Drive stream connection
*/
export default class Connection extends Stream {
constructor(me) {
super('drive', {
i: me.token
});
}
}

View file

@ -0,0 +1,31 @@
import Stream from './stream';
import StreamManager from './stream-manager';
/**
* Drive stream connection
*/
export class DriveStream extends Stream {
constructor(me) {
super('drive', {
i: me.token
});
}
}
export class DriveStreamManager extends StreamManager<DriveStream> {
private me;
constructor(me) {
super();
this.me = me;
}
public getConnection() {
if (this.connection == null) {
this.connection = new DriveStream(this.me);
}
return this.connection;
}
}

View file

@ -1,23 +0,0 @@
import StreamManager from './stream-manager';
import Connection from './home-stream';
import MiOS from '../../mios';
export default class HomeStreamManager extends StreamManager<Connection> {
private me;
private os: MiOS;
constructor(os: MiOS, me) {
super();
this.me = me;
this.os = os;
}
public getConnection() {
if (this.connection == null) {
this.connection = new Connection(this.os, this.me);
}
return this.connection;
}
}

View file

@ -1,12 +1,13 @@
import * as merge from 'object-assign-deep'; import * as merge from 'object-assign-deep';
import Stream from './stream'; import Stream from './stream';
import StreamManager from './stream-manager';
import MiOS from '../../mios'; import MiOS from '../../mios';
/** /**
* Home stream connection * Home stream connection
*/ */
export default class Connection extends Stream { export class HomeStream extends Stream {
constructor(os: MiOS, me) { constructor(os: MiOS, me) {
super('', { super('', {
i: me.token i: me.token
@ -34,3 +35,23 @@ export default class Connection extends Stream {
}); });
} }
} }
export class HomeStreamManager extends StreamManager<HomeStream> {
private me;
private os: MiOS;
constructor(os: MiOS, me) {
super();
this.me = me;
this.os = os;
}
public getConnection() {
if (this.connection == null) {
this.connection = new HomeStream(this.os, this.me);
}
return this.connection;
}
}

View file

@ -1,20 +0,0 @@
import StreamManager from './stream-manager';
import Connection from './messaging-index-stream';
export default class MessagingIndexStreamManager extends StreamManager<Connection> {
private me;
constructor(me) {
super();
this.me = me;
}
public getConnection() {
if (this.connection == null) {
this.connection = new Connection(this.me);
}
return this.connection;
}
}

View file

@ -1,12 +0,0 @@
import Stream from './stream';
/**
* Messaging index stream connection
*/
export default class Connection extends Stream {
constructor(me) {
super('messaging-index', {
i: me.token
});
}
}

View file

@ -0,0 +1,31 @@
import Stream from './stream';
import StreamManager from './stream-manager';
/**
* Messaging index stream connection
*/
export class MessagingIndexStream extends Stream {
constructor(me) {
super('messaging-index', {
i: me.token
});
}
}
export class MessagingIndexStreamManager extends StreamManager<MessagingIndexStream> {
private me;
constructor(me) {
super();
this.me = me;
}
public getConnection() {
if (this.connection == null) {
this.connection = new MessagingIndexStream(this.me);
}
return this.connection;
}
}

View file

@ -3,7 +3,7 @@ import Stream from './stream';
/** /**
* Messaging stream connection * Messaging stream connection
*/ */
export default class Connection extends Stream { export class MessagingStream extends Stream {
constructor(me, otherparty) { constructor(me, otherparty) {
super('messaging', { super('messaging', {
i: me.token, i: me.token,

View file

@ -0,0 +1,10 @@
import Stream from './stream';
export class OthelloGameStream extends Stream {
constructor(me, game) {
super('othello-game', {
i: me.token,
game: game.id
});
}
}

View file

@ -0,0 +1,28 @@
import StreamManager from './stream-manager';
import Stream from './stream';
export class OthelloStream extends Stream {
constructor(me) {
super('othello', {
i: me.token
});
}
}
export class OthelloStreamManager extends StreamManager<OthelloStream> {
private me;
constructor(me) {
super();
this.me = me;
}
public getConnection() {
if (this.connection == null) {
this.connection = new OthelloStream(this.me);
}
return this.connection;
}
}

View file

@ -1,12 +0,0 @@
import StreamManager from './stream-manager';
import Connection from './requests-stream';
export default class RequestsStreamManager extends StreamManager<Connection> {
public getConnection() {
if (this.connection == null) {
this.connection = new Connection();
}
return this.connection;
}
}

View file

@ -1,10 +0,0 @@
import Stream from './stream';
/**
* Requests stream connection
*/
export default class Connection extends Stream {
constructor() {
super('requests');
}
}

View file

@ -0,0 +1,21 @@
import Stream from './stream';
import StreamManager from './stream-manager';
/**
* Requests stream connection
*/
export class RequestsStream extends Stream {
constructor() {
super('requests');
}
}
export class RequestsStreamManager extends StreamManager<RequestsStream> {
public getConnection() {
if (this.connection == null) {
this.connection = new RequestsStream();
}
return this.connection;
}
}

View file

@ -1,12 +0,0 @@
import StreamManager from './stream-manager';
import Connection from './server-stream';
export default class ServerStreamManager extends StreamManager<Connection> {
public getConnection() {
if (this.connection == null) {
this.connection = new Connection();
}
return this.connection;
}
}

View file

@ -1,10 +0,0 @@
import Stream from './stream';
/**
* Server stream connection
*/
export default class Connection extends Stream {
constructor() {
super('server');
}
}

View file

@ -0,0 +1,21 @@
import Stream from './stream';
import StreamManager from './stream-manager';
/**
* Server stream connection
*/
export class ServerStream extends Stream {
constructor() {
super('server');
}
}
export class ServerStreamManager extends StreamManager<ServerStream> {
public getConnection() {
if (this.connection == null) {
this.connection = new ServerStream();
}
return this.connection;
}
}

View file

@ -26,7 +26,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import MessagingStreamConnection from '../../scripts/streaming/messaging-stream'; import { MessagingStream } from '../../scripts/streaming/messaging';
import XMessage from './messaging-room.message.vue'; import XMessage from './messaging-room.message.vue';
import XForm from './messaging-room.form.vue'; import XForm from './messaging-room.form.vue';
import { url } from '../../../config'; import { url } from '../../../config';
@ -66,7 +66,7 @@ export default Vue.extend({
}, },
mounted() { mounted() {
this.connection = new MessagingStreamConnection((this as any).os.i, this.user.id); this.connection = new MessagingStream((this as any).os.i, this.user.id);
this.connection.on('message', this.onMessage); this.connection.on('message', this.onMessage);
this.connection.on('read', this.onRead); this.connection.on('read', this.onRead);

View file

@ -1,29 +1,131 @@
<template> <template>
<div> <div class="root">
<header>:{{ game.black_user.name }} :{{ game.white_user.name }}</header> <header><b>{{ game.black_user.name }}</b>() vs <b>{{ game.white_user.name }}</b>()</header>
<p class="turn">{{ turn ? 'あなたのターンです' : '相手のターンです' }}<mk-ellipsis v-if="!turn"/></p>
<div>
<div v-for="(stone, i) in o.board"
:class="{ empty: stone == null, myTurn: turn, can: o.canReverse(turn ? myColor : opColor, i) }"
@click="set(i)"
>
<img v-if="stone == 'black'" :src="`${game.black_user.avatar_url}?thumbnail&size=64`" alt="">
<img v-if="stone == 'white'" :src="`${game.white_user.avatar_url}?thumbnail&size=64`" alt="">
</div>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { OthelloGameStream } from '../../scripts/streaming/othello-game';
import Othello from '../../../../../common/othello';
export default Vue.extend({ export default Vue.extend({
props: ['game'], props: ['game'],
data() { data() {
return { return {
game: null, o: new Othello(),
connection: null, turn: null,
connectionId: null connection: null
}; };
}, },
mounted() { computed: {
this.connection = (this as any).os.streams.othelloGameStream.getConnection(); myColor(): string {
this.connectionId = (this as any).os.streams.othelloGameStream.use(); return this.game.black_user_id == (this as any).os.i.id ? 'black' : 'white';
},
opColor(): string {
return this.myColor == 'black' ? 'white' : 'black';
}
},
created() {
this.game.logs.forEach(log => {
this.o.set(log.color, log.pos);
});
this.turn = this.game.turn_user_id == (this as any).os.i.id;
},
mounted() {
this.connection = new OthelloGameStream((this as any).os.i, this.game);
this.connection.on('set', this.onSet); this.connection.on('set', this.onSet);
}, },
beforeDestroy() { beforeDestroy() {
this.connection.off('set', this.onSet); this.connection.off('set', this.onSet);
(this as any).streams.othelloGameStream.dispose(this.connectionId); this.connection.close();
}, },
methods: {
set(pos) {
if (!this.turn) return;
if (!this.o.canReverse(this.myColor, pos)) return;
this.o.set(this.myColor, pos);
if (this.o.getPattern(this.opColor).length > 0) {
this.turn = !this.turn;
}
this.connection.send({
type: 'set',
pos
});
this.$forceUpdate();
},
onSet(x) {
this.o.set(x.color, x.pos);
if (this.o.getPattern(this.myColor).length > 0) {
this.turn = true;
}
this.$forceUpdate();
}
}
}); });
</script> </script>
<style lang="stylus" scoped>
@import '~const.styl'
.root
text-align center
> header
padding 8px
border-bottom dashed 1px #c4cdd4
> div
display grid
grid-template-rows repeat(8, 1fr)
grid-template-columns repeat(8, 1fr)
grid-gap 4px
width 300px
height 300px
margin 0 auto
> div
background transparent
border-radius 6px
overflow hidden
*
pointer-events none
user-select none
&.empty
border solid 2px #f5f5f5
&.empty.can
background #f5f5f5
&.empty.myTurn
border-color #eee
&.can
background #eee
cursor pointer
&:hover
border-color darken($theme-color, 10%)
background $theme-color
&:active
background darken($theme-color, 10%)
> img
display block
width 100%
height 100%
</style>

View file

@ -1,21 +1,53 @@
<template> <template>
<div> <div class="mk-othello">
<div v-if="game"> <div v-if="game">
<x-game :game="game"/> <x-game :game="game"/>
</div> </div>
<div v-if="matching"> <div class="matching" v-else-if="matching">
<h1><b>{{ matching.name }}</b>を待っています<mk-ellipsis/></h1> <h1><b>{{ matching.name }}</b>を待っています<mk-ellipsis/></h1>
<div class="cancel">
<el-button round @click="cancel">キャンセル</el-button>
</div>
</div> </div>
<div v-else> <div class="index" v-else>
<h1>Misskey Othello</h1> <h1>Misskey %fa:circle%thell%fa:circle R%</h1>
<p>他のMisskeyユーザーとオセロで対戦しよう</p> <p>他のMisskeyユーザーとオセロで対戦しよう</p>
<button>フリーマッチ(準備中)</button> <div class="play">
<button @click="match">指名</button> <el-button round>フリーマッチ(準備中)</el-button>
<section> <el-button type="primary" round @click="match">指名</el-button>
<h2>対局の招待があります:</h2> <details>
<summary>遊び方</summary>
<div>
<p>オセロは相手と交互に石をボードに置いてゆき相手の石を挟んでひっくり返しながら最終的に残った石が多い方が勝ちというボードゲームです</p>
<dl>
<dt><b>フリーマッチ</b></dt>
<dd>ランダムなユーザーと対戦するモードです</dd>
<dt><b>指名</b></dt>
<dd>指定したユーザーと対戦するモードです</dd>
</dl>
</div>
</details>
</div>
<section v-if="invitations.length > 0">
<h2>対局の招待があります:</h2>
<div class="invitation" v-for="i in invitations" tabindex="-1" @click="accept(i)">
<img :src="`${i.parent.avatar_url}?thumbnail&size=32`" alt="">
<span class="name"><b>{{ i.parent.name }}</b></span>
<span class="username">@{{ i.parent.username }}</span>
<mk-time :time="i.created_at"/>
</div>
</section>
<section v-if="myGames.length > 0">
<h2>自分の対局</h2>
<div class="game" v-for="g in myGames" tabindex="-1" @click="game = g">
<img :src="`${g.black_user.avatar_url}?thumbnail&size=32`" alt="">
<img :src="`${g.white_user.avatar_url}?thumbnail&size=32`" alt="">
<span><b>{{ g.black_user.name }}</b> vs <b>{{ g.white_user.name }}</b></span>
<span class="state">{{ g.winner ? '終了' : '進行中' }}</span>
</div>
</section> </section>
<section> <section>
<h2>過去の対局</h2> <h2>みんなの対局</h2>
</section> </section>
</div> </div>
</div> </div>
@ -35,7 +67,8 @@ export default Vue.extend({
games: [], games: [],
gamesFetching: true, gamesFetching: true,
gamesMoreFetching: false, gamesMoreFetching: false,
matching: false, myGames: [],
matching: null,
invitations: [], invitations: [],
connection: null, connection: null,
connectionId: null connectionId: null
@ -45,9 +78,15 @@ export default Vue.extend({
this.connection = (this as any).os.streams.othelloStream.getConnection(); this.connection = (this as any).os.streams.othelloStream.getConnection();
this.connectionId = (this as any).os.streams.othelloStream.use(); this.connectionId = (this as any).os.streams.othelloStream.use();
this.connection.on('macthed', this.onMatched); this.connection.on('matched', this.onMatched);
this.connection.on('invited', this.onInvited); this.connection.on('invited', this.onInvited);
(this as any).api('othello/games', {
my: true
}).then(games => {
this.myGames = games;
});
(this as any).api('othello/games').then(games => { (this as any).api('othello/games').then(games => {
this.games = games; this.games = games;
this.gamesFetching = false; this.gamesFetching = false;
@ -58,9 +97,9 @@ export default Vue.extend({
}); });
}, },
beforeDestroy() { beforeDestroy() {
this.connection.off('macthed', this.onMatched); this.connection.off('matched', this.onMatched);
this.connection.off('invited', this.onInvited); this.connection.off('invited', this.onInvited);
(this as any).streams.othelloStream.dispose(this.connectionId); (this as any).os.streams.othelloStream.dispose(this.connectionId);
}, },
methods: { methods: {
match() { match() {
@ -82,6 +121,19 @@ export default Vue.extend({
}); });
}); });
}, },
cancel() {
this.matching = null;
(this as any).api('othello/match/cancel');
},
accept(invitation) {
(this as any).api('othello/match', {
user_id: invitation.parent.id
}).then(game => {
if (game) {
this.game = game;
}
});
},
onMatched(game) { onMatched(game) {
this.game = game; this.game = game;
}, },
@ -92,3 +144,126 @@ export default Vue.extend({
}); });
</script> </script>
<style lang="stylus" scoped>
@import '~const.styl'
.mk-othello
color #677f84
> .matching
> h1
margin 0
padding 24px
font-size 20px
text-align center
font-weight normal
> .cancel
margin 0 auto
padding 24px 0 0 0
max-width 200px
text-align center
border-top dashed 1px #c4cdd4
> .index
> h1
margin 0
padding 24px
font-size 24px
text-align center
font-weight normal
color #fff
background linear-gradient(to bottom, #8bca3e, #d6cf31)
& + p
margin 0
padding 12px
margin-bottom 12px
text-align center
font-size 14px
border-bottom solid 1px #d3d9dc
> .play
margin 0 auto
padding 0 16px
max-width 500px
text-align center
> details
margin 8px 0
> div
padding 16px
font-size 14px
text-align left
background #f5f5f5
border-radius 8px
> section
margin 0 auto
padding 0 16px 16px 16px
max-width 500px
border-top solid 1px #d3d9dc
> h2
margin 0
padding 16px 0 8px 0
font-size 16px
font-weight bold
.invitation
margin 8px 0
padding 8px
border solid 1px #e1e5e8
border-radius 6px
cursor pointer
*
pointer-events none
user-select none
&:focus
border-color $theme-color
&:hover
background #f5f5f5
&:active
background #eee
> img
vertical-align bottom
border-radius 100%
> span
margin 0 8px
line-height 32px
.game
margin 8px 0
padding 8px
border solid 1px #e1e5e8
border-radius 6px
cursor pointer
*
pointer-events none
user-select none
&:focus
border-color $theme-color
&:hover
background #f5f5f5
&:active
background #eee
> img
vertical-align bottom
border-radius 100%
> span
margin 0 8px
line-height 32px
</style>

View file

@ -0,0 +1,24 @@
<template>
<mk-window ref="window" width="500px" height="560px" @closed="$destroy">
<span slot="header" :class="$style.header">%fa:gamepad%オセロ</span>
<mk-othello :class="$style.content"/>
</mk-window>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
});
</script>
<style lang="stylus" module>
.header
> [data-fa]
margin-right 4px
.content
height 100%
overflow auto
</style>

View file

@ -15,6 +15,13 @@
<template v-if="hasUnreadMessagingMessages">%fa:circle%</template> <template v-if="hasUnreadMessagingMessages">%fa:circle%</template>
</a> </a>
</li> </li>
<li class="game">
<a @click="game">
%fa:gamepad%
<p>ゲーム</p>
<template v-if="hasGameInvitations">%fa:circle%</template>
</a>
</li>
</template> </template>
<li class="ch"> <li class="ch">
<a :href="chUrl" target="_blank"> <a :href="chUrl" target="_blank">
@ -22,12 +29,6 @@
<p>%i18n:desktop.tags.mk-ui-header-nav.ch%</p> <p>%i18n:desktop.tags.mk-ui-header-nav.ch%</p>
</a> </a>
</li> </li>
<li class="info">
<a href="https://twitter.com/misskey_xyz" target="_blank">
%fa:info%
<p>%i18n:desktop.tags.mk-ui-header-nav.info%</p>
</a>
</li>
</ul> </ul>
</div> </div>
</template> </template>
@ -36,11 +37,13 @@
import Vue from 'vue'; import Vue from 'vue';
import { chUrl } from '../../../config'; import { chUrl } from '../../../config';
import MkMessagingWindow from './messaging-window.vue'; import MkMessagingWindow from './messaging-window.vue';
import MkGameWindow from './game-window.vue';
export default Vue.extend({ export default Vue.extend({
data() { data() {
return { return {
hasUnreadMessagingMessages: false, hasUnreadMessagingMessages: false,
hasGameInvitations: false,
connection: null, connection: null,
connectionId: null, connectionId: null,
chUrl chUrl
@ -80,6 +83,10 @@ export default Vue.extend({
messaging() { messaging() {
(this as any).os.new(MkMessagingWindow); (this as any).os.new(MkMessagingWindow);
},
game() {
(this as any).os.new(MkGameWindow);
} }
} }
}); });

View file

@ -11,7 +11,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import ChannelStream from '../../../common/scripts/streaming/channel-stream'; import ChannelStream from '../../../common/scripts/streaming/channel';
import XForm from './channel.channel.form.vue'; import XForm from './channel.channel.form.vue';
import XPost from './channel.channel.post.vue'; import XPost from './channel.channel.post.vue';