+
({{ i18n.ts._reversi.surrendered }})
@@ -69,12 +69,12 @@ SPDX-License-Identifier: AGPL-3.0-only
-
{{ logPos }} / {{ logs.length }}
+
{{ logPos }} / {{ game.logs.length }}
-
-
+
+
@@ -115,18 +115,15 @@ const props = defineProps<{
const showBoardLabels = true;
const autoplaying = ref
(false);
const game = ref(deepClone(props.game));
-const logs = ref(game.value.logs);
-const logPos = ref(logs.value.length);
-const engine = shallowRef(new Reversi.Game(game.value.map, {
+const logPos = ref(game.value.logs.length);
+const engine = shallowRef(Reversi.Serializer.restoreGame({
+ map: game.value.map,
isLlotheo: game.value.isLlotheo,
canPutEverywhere: game.value.canPutEverywhere,
loopedBoard: game.value.loopedBoard,
+ logs: game.value.logs,
}));
-for (const log of game.value.logs) {
- engine.value.put(log.color, log.pos);
-}
-
const iAmPlayer = computed(() => {
return game.value.user1Id === $i.id || game.value.user2Id === $i.id;
});
@@ -177,60 +174,76 @@ const cellsStyle = computed(() => {
watch(logPos, (v) => {
if (!game.value.isEnded) return;
- const _o = new Reversi.Game(game.value.map, {
+ engine.value = Reversi.Serializer.restoreGame({
+ map: game.value.map,
isLlotheo: game.value.isLlotheo,
canPutEverywhere: game.value.canPutEverywhere,
loopedBoard: game.value.loopedBoard,
+ logs: game.value.logs.slice(0, v),
});
- 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(''));
+ const crc32 = CRC32.str(JSON.stringify(game.value.logs)).toString();
+ if (_DEV_) console.log('crc32', crc32);
props.connection.send('syncState', {
crc32: crc32,
});
- }, 5000, { immediate: false, afterMounted: true });
+ }, 10000, { immediate: false, afterMounted: true });
}
+const appliedOps: string[] = [];
+
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);
+ engine.value.putStone(pos);
+
triggerRef(engine);
// サウンドを再生する
//sound.play(myColor.value ? 'reversiPutBlack' : 'reversiPutWhite');
+ const id = Math.random().toString(36).slice(2);
props.connection.send('putStone', {
pos: pos,
+ id,
});
+ appliedOps.push(id);
checkEnd();
}
-function onPutStone(x) {
- logs.value.push(x);
- logPos.value++;
- engine.value.put(x.color, x.pos);
- triggerRef(engine);
- checkEnd();
+function onStreamLog(log: Reversi.Serializer.Log & { id: string | null }) {
+ game.value.logs = Reversi.Serializer.serializeLogs([
+ ...Reversi.Serializer.deserializeLogs(game.value.logs),
+ log,
+ ]);
- // サウンドを再生する
- if (x.color !== myColor.value) {
- //sound.play(x.color ? 'reversiPutBlack' : 'reversiPutWhite');
+ logPos.value++;
+
+ if (log.id == null || !appliedOps.includes(log.id)) {
+ switch (log.operation) {
+ case 'put': {
+ engine.value.putStone(log.pos);
+ triggerRef(engine);
+ checkEnd();
+ //sound.play(x.color ? 'reversiPutBlack' : 'reversiPutWhite');
+ break;
+ }
+
+ default:
+ break;
+ }
}
}
-function onEnded(x) {
+function onStreamEnded(x) {
game.value = deepClone(x.game);
}
@@ -250,23 +263,20 @@ function checkEnd() {
}
}
-function onRescue(_game) {
+function onStreamRescue(_game) {
+ console.log('rescue');
+
game.value = deepClone(_game);
- engine.value = new Reversi.Game(game.value.map, {
+ engine.value = Reversi.Serializer.restoreGame({
+ map: game.value.map,
isLlotheo: game.value.isLlotheo,
canPutEverywhere: game.value.canPutEverywhere,
loopedBoard: game.value.loopedBoard,
+ logs: game.value.logs,
});
- for (const log of game.value.logs) {
- engine.value.put(log.color, log.pos);
- }
-
- triggerRef(engine);
-
- logs.value = game.value.logs;
- logPos.value = logs.value.length;
+ logPos.value = game.value.logs.length;
checkEnd();
}
@@ -280,21 +290,22 @@ function surrender() {
function autoplay() {
autoplaying.value = true;
logPos.value = 0;
+ const logs = Reversi.Serializer.deserializeLogs(game.value.logs);
window.setTimeout(() => {
logPos.value = 1;
let i = 1;
- let previousLog = game.value.logs[0];
+ let previousLog = logs[0];
const tick = () => {
- const log = game.value.logs[i];
- const time = new Date(log.at).getTime() - new Date(previousLog.at).getTime();
+ const log = logs[i];
+ const time = log.time - previousLog.time;
setTimeout(() => {
i++;
logPos.value++;
previousLog = log;
- if (i < game.value.logs.length) {
+ if (i < logs.length) {
tick();
} else {
autoplaying.value = false;
@@ -307,15 +318,15 @@ function autoplay() {
}
onMounted(() => {
- props.connection.on('putStone', onPutStone);
- props.connection.on('rescue', onRescue);
- props.connection.on('ended', onEnded);
+ props.connection.on('log', onStreamLog);
+ props.connection.on('rescue', onStreamRescue);
+ props.connection.on('ended', onStreamEnded);
});
onUnmounted(() => {
- props.connection.off('putStone', onPutStone);
- props.connection.off('rescue', onRescue);
- props.connection.off('ended', onEnded);
+ props.connection.off('log', onStreamLog);
+ props.connection.off('rescue', onStreamRescue);
+ props.connection.off('ended', onStreamEnded);
});
@@ -389,6 +400,7 @@ $gap: 4px;
background: transparent;
border-radius: 6px;
overflow: clip;
+ aspect-ratio: 1;
&.boardCell_empty {
border: solid 2px var(--divider);
diff --git a/packages/misskey-js/src/autogen/apiClientJSDoc.ts b/packages/misskey-js/src/autogen/apiClientJSDoc.ts
index e4e7d1366..e1d9d7517 100644
--- a/packages/misskey-js/src/autogen/apiClientJSDoc.ts
+++ b/packages/misskey-js/src/autogen/apiClientJSDoc.ts
@@ -1,6 +1,6 @@
/*
* version: 2023.12.2
- * generatedAt: 2024-01-19T11:00:07.160Z
+ * generatedAt: 2024-01-20T01:28:01.779Z
*/
import type { SwitchCaseResponseType } from '../api.js';
diff --git a/packages/misskey-js/src/autogen/endpoint.ts b/packages/misskey-js/src/autogen/endpoint.ts
index 671abd78c..61fc519c1 100644
--- a/packages/misskey-js/src/autogen/endpoint.ts
+++ b/packages/misskey-js/src/autogen/endpoint.ts
@@ -1,6 +1,6 @@
/*
* version: 2023.12.2
- * generatedAt: 2024-01-19T11:00:07.158Z
+ * generatedAt: 2024-01-20T01:28:01.777Z
*/
import type {
diff --git a/packages/misskey-js/src/autogen/entities.ts b/packages/misskey-js/src/autogen/entities.ts
index c14876c0e..79b5fb0ae 100644
--- a/packages/misskey-js/src/autogen/entities.ts
+++ b/packages/misskey-js/src/autogen/entities.ts
@@ -1,6 +1,6 @@
/*
* version: 2023.12.2
- * generatedAt: 2024-01-19T11:00:07.156Z
+ * generatedAt: 2024-01-20T01:28:01.775Z
*/
import { operations } from './types.js';
diff --git a/packages/misskey-js/src/autogen/models.ts b/packages/misskey-js/src/autogen/models.ts
index 78f14d225..fbd32f62d 100644
--- a/packages/misskey-js/src/autogen/models.ts
+++ b/packages/misskey-js/src/autogen/models.ts
@@ -1,6 +1,6 @@
/*
* version: 2023.12.2
- * generatedAt: 2024-01-19T11:00:07.155Z
+ * generatedAt: 2024-01-20T01:28:01.774Z
*/
import { components } from './types.js';
diff --git a/packages/misskey-js/src/autogen/types.ts b/packages/misskey-js/src/autogen/types.ts
index 36facf6e2..d59f51073 100644
--- a/packages/misskey-js/src/autogen/types.ts
+++ b/packages/misskey-js/src/autogen/types.ts
@@ -3,7 +3,7 @@
/*
* version: 2023.12.2
- * generatedAt: 2024-01-19T11:00:07.077Z
+ * generatedAt: 2024-01-20T01:28:01.695Z
*/
/**
@@ -4517,11 +4517,7 @@ export type components = {
isLlotheo: boolean;
canPutEverywhere: boolean;
loopedBoard: boolean;
- logs: {
- at: number;
- color: boolean;
- pos: number;
- }[];
+ logs: unknown[][];
map: string[];
};
};
diff --git a/packages/misskey-reversi/package.json b/packages/misskey-reversi/package.json
index 8d3ca3016..34b29f5b7 100644
--- a/packages/misskey-reversi/package.json
+++ b/packages/misskey-reversi/package.json
@@ -1,10 +1,22 @@
{
+ "type": "module",
"name": "misskey-reversi",
"version": "0.0.1",
- "main": "./built/index.js",
- "types": "./built/index.d.ts",
+ "exports": {
+ ".": {
+ "import": "./built/esm/index.js",
+ "types": "./built/dts/index.d.ts"
+ },
+ "./*": {
+ "import": "./built/esm/*",
+ "types": "./built/dts/*"
+ }
+ },
"scripts": {
- "build": "tsc",
+ "build": "npm run ts",
+ "ts": "npm run ts-esm && npm run ts-dts",
+ "ts-esm": "tsc --outDir built/esm",
+ "ts-dts": "tsc --outDir built/dts --declaration true --emitDeclarationOnly true --declarationMap true",
"watch": "nodemon -w src -e ts,js,cjs,mjs,json --exec \"pnpm run build\"",
"eslint": "eslint . --ext .js,.jsx,.ts,.tsx",
"typecheck": "tsc --noEmit",
@@ -16,6 +28,7 @@
"@typescript-eslint/eslint-plugin": "6.19.0",
"@typescript-eslint/parser": "6.19.0",
"eslint": "8.56.0",
+ "nodemon": "3.0.2",
"typescript": "5.3.3"
},
"files": [
diff --git a/packages/misskey-reversi/src/game.ts b/packages/misskey-reversi/src/game.ts
index 72aace7c0..f29b00144 100644
--- a/packages/misskey-reversi/src/game.ts
+++ b/packages/misskey-reversi/src/game.ts
@@ -46,7 +46,7 @@ export class Game {
constructor(map: string[], opts: Options) {
//#region binds
- this.put = this.put.bind(this);
+ this.putStone = this.putStone.bind(this);
//#endregion
//#region Options
@@ -88,7 +88,10 @@ export class Game {
return x + (y * this.mapWidth);
}
- public put(color: Color, pos: number) {
+ public putStone(pos: number) {
+ const color = this.turn;
+ if (color == null) return;
+
this.prevPos = pos;
this.prevColor = color;
diff --git a/packages/misskey-reversi/src/index.ts b/packages/misskey-reversi/src/index.ts
index 28964413b..883b16e3d 100644
--- a/packages/misskey-reversi/src/index.ts
+++ b/packages/misskey-reversi/src/index.ts
@@ -3,10 +3,6 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
-import { Game } from './game.js';
-
-export {
- Game,
-};
-
+export { Game } from './game.js';
+export * as Serializer from './serializer.js';
export * as maps from './maps.js';
diff --git a/packages/misskey-reversi/src/serializer.ts b/packages/misskey-reversi/src/serializer.ts
new file mode 100644
index 000000000..2e6e0475d
--- /dev/null
+++ b/packages/misskey-reversi/src/serializer.ts
@@ -0,0 +1,98 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Game } from './game.js';
+
+export type Log = {
+ time: number;
+ player: boolean;
+ operation: 'put';
+ pos: number;
+};
+
+export type SerializedLog = number[];
+
+export function serializeLogs(logs: Log[]) {
+ const _logs: number[][] = [];
+
+ for (let i = 0; i < logs.length; i++) {
+ const log = logs[i];
+ const timeDelta = i === 0 ? log.time : log.time - logs[i - 1].time;
+
+ switch (log.operation) {
+ case 'put':
+ _logs.push([timeDelta, log.player ? 1 : 0, 0, log.pos]);
+ break;
+ //case 'surrender':
+ // _logs.push([timeDelta, log.player, 1]);
+ // break;
+ }
+ }
+
+ return _logs;
+}
+
+export function deserializeLogs(logs: SerializedLog[]) {
+ const _logs: Log[] = [];
+
+ let time = 0;
+
+ for (const log of logs) {
+ const timeDelta = log[0];
+ time += timeDelta;
+
+ const player = log[1];
+ const operation = log[2];
+
+ switch (operation) {
+ case 0:
+ _logs.push({
+ time,
+ player: player === 1,
+ operation: 'put',
+ pos: log[3],
+ });
+ break;
+ //case 1:
+ // _logs.push({
+ // time,
+ // player: player === 1,
+ // operation: 'surrender',
+ // });
+ // break;
+ }
+ }
+
+ return _logs;
+}
+
+export function restoreGame(env: {
+ map: string[];
+ isLlotheo: boolean;
+ canPutEverywhere: boolean;
+ loopedBoard: boolean;
+ logs: SerializedLog[];
+}) {
+ const logs = deserializeLogs(env.logs);
+
+ const game = new Game(env.map, {
+ isLlotheo: env.isLlotheo,
+ canPutEverywhere: env.canPutEverywhere,
+ loopedBoard: env.loopedBoard,
+ });
+
+ for (const log of logs) {
+ switch (log.operation) {
+ case 'put':
+ game.putStone(log.pos);
+ break;
+ //case 'surrender':
+ // game.surrender(log.player);
+ // break;
+ }
+ }
+
+ return game;
+}