-
Notifications
You must be signed in to change notification settings - Fork 953
/
FlipperTicTacToe.tsx
105 lines (96 loc) · 2.99 KB
/
FlipperTicTacToe.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import {useState, useEffect, FC} from 'react';
import type {FlipperPluginConnection, FlipperClient} from 'js-flipper';
import './FlipperTicTacToe.css';
// DOCS_START_CLIENT_START
// We want to import and start flipper client only in development and test modes
let flipperClientPromise: Promise<FlipperClient> | undefined;
if (process.env.NODE_ENV !== 'production') {
flipperClientPromise = import('js-flipper').then(({flipperClient}) => {
flipperClient.start('React Tic-Tac-Toe');
return flipperClient;
});
}
// DOCS_START_CLIENT_END
interface GameState {
cells: string[];
turn: string;
winner: string;
}
const FlipperTicTacToe: FC = () => {
// DOCS_ADD_PLUGIN_START
// TicTacToe game status
const [status, setStatus] = useState('Waiting for Flipper Desktop Player...');
// TicTacToe game state
const [gameState, setGameState] = useState<GameState>({
cells: [],
turn: ' ',
winner: ' ',
});
// Flipper connection instance
const [connection, setConnection] = useState<FlipperPluginConnection>();
useEffect(() => {
flipperClientPromise?.then(flipperClient => {
flipperClient.addPlugin({
getId() {
// Name of the plugin
return 'ReactNativeTicTacToe';
},
onConnect(connection) {
// Once we connected, we display it to the user
setStatus('Desktop player present');
// And stash the connection object
setConnection(connection);
// We start listening to updates from Flipper Desktop
connection.receive('SetState', (gameState: GameState) => {
if (gameState.winner !== ' ') {
setStatus(
`Winner is ${gameState.winner}! Waiting for a new game...`,
);
} else {
setStatus(
gameState.turn === 'X'
? 'Your turn...'
: 'Awaiting desktop players turn...',
);
}
setGameState(gameState);
});
// We also request the initial state of the game from Flipper Desktop
connection.send('GetState');
},
onDisconnect() {
// When Flipper Desktop disconnects, we show it to the user
setConnection(undefined);
setStatus('Desktop player gone...');
},
});
});
}, []);
// DOCS_ADD_PLUGIN_END
return (
<div>
<p>{status}</p>
<div className="grid">
{gameState.cells.map((state, idx) => (
<button
key={idx}
disabled={!connection || gameState.turn !== 'X' || state !== ' '}
onClick={() => connection?.send('XMove', {move: idx})}
className="cell"
>
{state}
</button>
))}
</div>
</div>
);
};
export default FlipperTicTacToe;