1 function undisplay(element) {
2 element.style.display="none";
5 function add_message(severity, message) {
6 message = `<div class="message ${severity}" onclick="undisplay(this)">
7 <span class="hide-button" onclick="undisplay(this.parentElement)">×</span>
10 const message_area = document.getElementById('message-area');
11 message_area.insertAdjacentHTML('beforeend', message);
14 const events = new EventSource("events");
16 events.onerror = function(event) {
17 if (event.target.readyState === EventSource.CLOSED) {
18 add_message("danger", "Connection to server lost.");
22 events.addEventListener("move", event => {
23 const square = JSON.parse(event.data);
25 window.game.receiveMove(square);
28 function Square(props) {
30 <button className="square" onClick={props.onClick}>
36 class Board extends React.Component {
40 value={this.props.squares[i]}
41 onClick={() => this.props.onClick(i)}
49 <div className="board-row">
50 {this.renderSquare(0)}
51 {this.renderSquare(1)}
52 {this.renderSquare(2)}
54 <div className="board-row">
55 {this.renderSquare(3)}
56 {this.renderSquare(4)}
57 {this.renderSquare(5)}
59 <div className="board-row">
60 {this.renderSquare(6)}
61 {this.renderSquare(7)}
62 {this.renderSquare(8)}
69 function fetch_post_json(api = '', data = {}) {
70 const response = fetch(api, {
73 'Content-Type': 'application/json'
75 body: JSON.stringify(data)
80 class Game extends React.Component {
86 squares: Array(9).fill(null)
95 return fetch_post_json("move", { square: i });
99 const history = this.state.history.slice(0, this.state.stepNumber + 1);
100 const current = history[history.length - 1];
101 const squares = current.squares.slice();
102 if (calculateWinner(squares) || squares[i]) {
105 squares[i] = this.state.xIsNext ? "X" : "O";
107 history: history.concat([
112 stepNumber: history.length,
113 xIsNext: !this.state.xIsNext
117 async handleClick(i) {
118 const response = await this.sendMove(i);
119 if (response.status == 200) {
120 const legal = await response.json();
122 add_message("danger", `Illegal move.`);
124 add_message("danger", `Error occurred sending move`);
131 xIsNext: (step % 2) === 0
136 const history = this.state.history;
137 const current = history[this.state.stepNumber];
138 const winner = calculateWinner(current.squares);
142 status = "Winner: " + winner;
144 status = "Next player: " + (this.state.xIsNext ? "X" : "O");
148 <div className="game">
149 <div className="game-board">
151 squares={current.squares}
152 onClick={i => this.handleClick(i)}
155 <div className="game-info">
163 // ========================================
165 ReactDOM.render(<Game
166 ref={(me) => window.game = me}
167 />, document.getElementById("tictactoe"));
169 function calculateWinner(squares) {
180 for (let i = 0; i < lines.length; i++) {
181 const [a, b, c] = lines[i];
182 if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {