fuzzyworld

dao-game / react-multiplayer / files / src / game / remote-game.ts

Branch react-multiplayer · default branch · all branches

remote-game.ts

Blame: the commit that last changed each line · file · history

c3c52daf 2022-03-18 Pavel Safronov1import Peer, { PeerJSOption } from 'peerjs';
1e41e9b4 2022-03-18 Pavel Safronov2import { LocalGame } from './local-game';
38c7e27c 2022-03-22 Pavel Safronov3import { showModal } from '../utils/modal';
4import { useSessionStorage } from '../utils/storage';
5import { showSnackbar } from "../utils/snackbar";
6import { Move, MoveResult } from './game';
7import { Coord } from './coord';
8import { generateHash } from '../utils/hashing';
9import { delay } from '../utils/delay';
10import { copyToClipboard } from '../utils/clipboard';
db09721d 2022-03-22 Pavel Safronov11import { detect } from 'detect-browser';
1e41e9b4 2022-03-18 Pavel Safronov12
13interface LocalData {
417dc266 2022-03-23 Pavel Safronov14 id?: string;
15 peerId?: string;
1e41e9b4 2022-03-18 Pavel Safronov16}
7e7f0490 2022-03-18 Pavel Safronov17interface Pos {
f2c94061 2022-03-21 Pavel Safronov18 x: number;
19 y: number;
7e7f0490 2022-03-18 Pavel Safronov20}
21interface PeerData {
f2c94061 2022-03-21 Pavel Safronov22 mousePos?: Pos;
23 move?: Move;
7e7f0490 2022-03-18 Pavel Safronov24}
5805825c 2022-03-21 Pavel Safronov25const peerOptions: PeerJSOption = { debug: 0 };
47dfe48a 2022-03-20 Pavel Safronov26const { getter: getData, setter: setData } = useSessionStorage<LocalData>('dao-game', { id: undefined, peerId: undefined });
417dc266 2022-03-23 Pavel Safronov27const otherMouseElement = document.getElementById('other-mouse')!;
28const shareContainer = document.getElementById('share-container')!;
29const shareLinkButton = document.getElementById('share-link')!;
47dfe48a 2022-03-20 Pavel Safronov30const minString = (a: string, b: string): string => (a < b ? a : b);
31const maxString = (a: string, b: string): string => (a > b ? a : b);
32const getFirstPlayerId = (playerId1: string, playerId2: string) => {
f2c94061 2022-03-21 Pavel Safronov33 const hash1 = generateHash(playerId1);
34 const hash2 = generateHash(playerId2);
35 const prod = hash1 * hash2;
36 const isEven = prod % 2 == 0;
37 const id = isEven ? minString(playerId1, playerId2) : maxString(playerId1, playerId2);
38 return id;
47dfe48a 2022-03-20 Pavel Safronov39};
5805825c 2022-03-21 Pavel Safronov40const dropFileExtension = (path: string) => {
41 const lastSlashIndex = path.lastIndexOf('/');
42 const dirName = path.substring(0, lastSlashIndex);
43 return dirName;
44}
417dc266 2022-03-23 Pavel Safronov45const showMessageAndLeave = async (title: string, text: string) => {
db09721d 2022-03-22 Pavel Safronov46 await showModal({ title, text, willBackgroundCancel: false });
47 sessionStorage.clear();
48 const { protocol, host, pathname } = location;
49 const dir = dropFileExtension(pathname);
50 const newUrl = `${protocol}//${host}${dir}`
51 document.location = newUrl;
52}
1e41e9b4 2022-03-18 Pavel Safronov53
54export class PeerGame extends LocalGame {
f2c94061 2022-03-21 Pavel Safronov55 public conn: Peer.DataConnection;
56 public selfId: string;
5805825c 2022-03-21 Pavel Safronov57 public constructor(player1Id: string, player1Name: string, player2Id: string, player2Name: string, selfId: string, conn: Peer.DataConnection) {
58 super(player1Id, player1Name, player2Id, player2Name);
f2c94061 2022-03-21 Pavel Safronov59 this.selfId = selfId;
60 this.conn = conn;
47dfe48a 2022-03-20 Pavel Safronov61 }
f2c94061 2022-03-21 Pavel Safronov62 public override setActiveUi(): void {
63 const { currentPlayerId, selfId } = this;
64
65 const isLocalTurn = currentPlayerId === selfId;
66 if (isLocalTurn) {
67 super.setActiveUi();
47dfe48a 2022-03-20 Pavel Safronov68 }
f2c94061 2022-03-21 Pavel Safronov69 }
70 public override makeMove(source: Coord, dest: Coord): Promise<MoveResult> {
71 const result = super.makeMove(source, dest);
72 const peerData: PeerData = { move: { source, dest, playerId: this.currentPlayerId } };
73 this.conn.send(JSON.stringify(peerData));
74 return result;
75 }
5805825c 2022-03-21 Pavel Safronov76 public override async handleMoveResult(result: MoveResult): Promise<void> {
b3c7b964 2022-03-22 Pavel Safronov77 const { isTerminal, message } = result;
db09721d 2022-03-22 Pavel Safronov78 if (isTerminal) {
417dc266 2022-03-23 Pavel Safronov79 await showMessageAndLeave('Game Over', message!);
5805825c 2022-03-21 Pavel Safronov80 } else {
81 this.resetUi();
82 this.setActiveUi();
83 }
84 }
47dfe48a 2022-03-20 Pavel Safronov85
f2c94061 2022-03-21 Pavel Safronov86 public static async createPeerGame(): Promise<PeerGame> {
87 let { id, peerId } = getData();
88 const main = document.getElementsByTagName('main')[0];
417dc266 2022-03-23 Pavel Safronov89 let game: PeerGame | undefined = undefined;
f2c94061 2022-03-21 Pavel Safronov90
c1cd0c65 2022-03-22 Pavel Safronov91 const handleConn = async (conn: Peer.DataConnection) => {
b3c7b964 2022-03-22 Pavel Safronov92 shareContainer.classList.add('invisible');
5805825c 2022-03-21 Pavel Safronov93
c1cd0c65 2022-03-22 Pavel Safronov94 await new Promise<void>((resolve) => {
95 conn.on('open', () => resolve());
96 });
97
f2c94061 2022-03-21 Pavel Safronov98 id = peer.id;
99 peerId = conn.peer;
100 setData({ id, peerId });
101
102 const isLocalP1 = getFirstPlayerId(id, peerId) === id;
5805825c 2022-03-21 Pavel Safronov103 game = isLocalP1 ?
104 new PeerGame(id, "Local", peerId, "Remote", id, conn) :
105 new PeerGame(peerId, "Remote", id, "Local", id, conn);
f2c94061 2022-03-21 Pavel Safronov106 game.resetUi();
107 game.setActiveUi();
108 main.classList.remove('invisible');
109
417dc266 2022-03-23 Pavel Safronov110 const table = document.getElementById('table')!;
5805825c 2022-03-21 Pavel Safronov111 table.addEventListener('mousemove', (ev: MouseEvent) => {
112 const xTable = ev.clientX - table.offsetLeft;
113 const yTable = ev.clientY - table.offsetTop;
114 const xRatio = xTable / table.clientWidth;
115 const yRatio = yTable / table.clientHeight;
116 const peerData: PeerData = { mousePos: { x: xRatio, y: yRatio } };
117 conn.send(JSON.stringify(peerData));
118 });
119 table.addEventListener('mouseleave', () => {
120 const peerData: PeerData = { mousePos: { x: -1, y: -1 } };
f2c94061 2022-03-21 Pavel Safronov121 conn.send(JSON.stringify(peerData));
122 });
123
417dc266 2022-03-23 Pavel Safronov124 let lastTimerId: NodeJS.Timeout | undefined = undefined;
f2c94061 2022-03-21 Pavel Safronov125 conn.on('data', (data: string) => {
417dc266 2022-03-23 Pavel Safronov126 if (!game) return;
127
f2c94061 2022-03-21 Pavel Safronov128 const peerData = JSON.parse(data) as PeerData;
129 const { mousePos, move } = peerData;
130
131 if (mousePos) {
5805825c 2022-03-21 Pavel Safronov132 const isValidPos = mousePos.x !== -1 && mousePos.y !== -1;
133 if (isValidPos) {
134 const xRatio = mousePos.x;
135 const yRatio = mousePos.y;
136 const xTable = xRatio * table.clientWidth;
137 const yTable = yRatio * table.clientHeight;
138 const x = table.offsetLeft + xTable;
139 const y = table.offsetTop + yTable;
140 const style = `left:${x - otherMouseElement.clientWidth / 2}px;top:${y}px;display:block;`;
141 otherMouseElement.setAttribute('style', style);
142 if (lastTimerId !== undefined) {
143 clearTimeout(lastTimerId);
144 }
145 lastTimerId = setTimeout(() => {
146 otherMouseElement.setAttribute('style', '');
147 lastTimerId = undefined;
148 }, 3000);
149 } else if (lastTimerId !== undefined) {
150 otherMouseElement.setAttribute('style', '');
151 }
f2c94061 2022-03-21 Pavel Safronov152 }
153
154 const isWaitingForRemoteMove = peerId === game.currentPlayerId;
155 if (isWaitingForRemoteMove && move) {
156 const isMoveLegal = game.getPiece(move.source) === game.currentPlayerId && game.getPiece(move.dest) === null;
157 if (isMoveLegal) {
158 game.makeMove(move.source, move.dest);
159 } else {
160 console.log({ isMoveLegal, move });
161 }
162 }
163 });
db09721d 2022-03-22 Pavel Safronov164 conn.on('error', (err) => {
165 showMessageAndLeave(`Connection error`, err);
166 });
167 conn.on('close', () => {
168 showMessageAndLeave(`Connection closed`, 'Connection closed for some reason')
169 });
f2c94061 2022-03-21 Pavel Safronov170 };
171
172 const { host, protocol, pathname, search } = location;
173 const queryParams = new URLSearchParams(search);
174
175 const peer = id === undefined ? new Peer(peerOptions) : new Peer(id, peerOptions);
176 window.onunload = () => peer.destroy();
177 peer.on('connection', (conn) => handleConn(conn));
e46456c2 2022-03-22 Pavel Safronov178 peer.on('error', async (err) => {
db09721d 2022-03-22 Pavel Safronov179 await showMessageAndLeave('Peer error encountered', err);
e46456c2 2022-03-22 Pavel Safronov180 });
f2c94061 2022-03-21 Pavel Safronov181 peer.on('open', (trueId) => {
182 id = trueId;
183 peerId = queryParams.get('peerId') ?? peerId;
184 setData({ id, peerId });
185
186 if (peerId) {
187 console.log(`${id} connecting to peer "${peerId}"`);
188 const conn = peer.connect(peerId);
189 handleConn(conn);
190 } else {
191 queryParams.set('peerId', id);
192 const newSearch = queryParams.toString();
b3c7b964 2022-03-22 Pavel Safronov193 const newUrl = `${protocol}//${host}${pathname}?${newSearch}`;
194 shareLinkButton.onclick = () => {
195 showSnackbar('Url copied to clipboard');
e46456c2 2022-03-22 Pavel Safronov196 copyToClipboard(newUrl);
b3c7b964 2022-03-22 Pavel Safronov197 };
198 shareContainer.classList.remove('invisible');
f2c94061 2022-03-21 Pavel Safronov199 }
200 });
db09721d 2022-03-22 Pavel Safronov201 peer.on('disconnected', async () => {
202 await showMessageAndLeave('Peer disconnected', 'For some reason')
203 });
f2c94061 2022-03-21 Pavel Safronov204 while (game === undefined) {
205 console.log('Waiting to connect to peer');
206 await delay(500);
1e41e9b4 2022-03-18 Pavel Safronov207 }
f2c94061 2022-03-21 Pavel Safronov208 return game;
47dfe48a 2022-03-20 Pavel Safronov209 }
7e7f0490 2022-03-18 Pavel Safronov210}
211
db09721d 2022-03-22 Pavel Safronov212const isBrowserSupported = () => {
213 const browser = detect();
214 switch (browser && browser.name) {
215 case 'chrome':
216 case 'firefox':
217 return true;
218 default:
219 return false;
220 }
221}
47dfe48a 2022-03-20 Pavel Safronov222export const playGame = async () => {
db09721d 2022-03-22 Pavel Safronov223 if (isBrowserSupported()) {
224 await PeerGame.createPeerGame();
225 } else {
226 showMessageAndLeave(
227 'Unsupported browser',
228 '<p>Your current browser is not yet supported.</p>' +
229 '<p>This PeerJs issue is tracking support in Microsoft Edge and Safari: </p>' +
230 '<p><a href="https://github.com/peers/peerjs/issues/899" target="_blank">https://github.com/peers/peerjs/issues/899</a></p>')
231 }
c3c52daf 2022-03-18 Pavel Safronov232};