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 events.addEventListener("game-state", event => {
29 const state = JSON.parse(event.data);
31 window.game.resetState();
33 for (let square of state.moves) {
34 window.game.receiveMove(square);
38 function Square(props) {
40 <button className="square" onClick={props.onClick}>
46 class Board extends React.Component {
50 value={this.props.squares[i]}
51 onClick={() => this.props.onClick(i)}
59 <div className="board-row">
60 {this.renderSquare(0)}
61 {this.renderSquare(1)}
62 {this.renderSquare(2)}
64 <div className="board-row">
65 {this.renderSquare(3)}
66 {this.renderSquare(4)}
67 {this.renderSquare(5)}
69 <div className="board-row">
70 {this.renderSquare(6)}
71 {this.renderSquare(7)}
72 {this.renderSquare(8)}
79 function fetch_post_json(api = '', data = {}) {
80 const response = fetch(api, {
83 'Content-Type': 'application/json'
85 body: JSON.stringify(data)
90 class Game extends React.Component {
96 squares: Array(9).fill(null)
105 return fetch_post_json("move", { move: i });
112 squares: Array(9).fill(null)
121 const history = this.state.history.slice(0, this.state.stepNumber + 1);
122 const current = history[history.length - 1];
123 const squares = current.squares.slice();
124 if (calculateWinner(squares) || squares[i]) {
127 squares[i] = this.state.xIsNext ? "X" : "O";
129 history: history.concat([
134 stepNumber: history.length,
135 xIsNext: !this.state.xIsNext
139 async handleClick(i) {
140 const response = await this.sendMove(i);
141 if (response.status == 200) {
142 const legal = await response.json();
144 add_message("danger", `Illegal move.`);
146 add_message("danger", `Error occurred sending move`);
153 xIsNext: (step % 2) === 0
158 const history = this.state.history;
159 const current = history[this.state.stepNumber];
160 const winner = calculateWinner(current.squares);
164 status = "Winner: " + winner;
166 status = "Next player: " + (this.state.xIsNext ? "X" : "O");
170 <div className="game">
171 <div className="game-info">
174 <div className="game-board">
176 squares={current.squares}
177 onClick={i => this.handleClick(i)}
185 // ========================================
187 ReactDOM.render(<Game
188 ref={(me) => window.game = me}
189 />, document.getElementById("tictactoe"));
191 function calculateWinner(squares) {
202 for (let i = 0; i < lines.length; i++) {
203 const [a, b, c] = lines[i];
204 if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {