X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=blobdiff_plain;f=tictactoe%2Ftictactoe.jsx;h=46cee2a7f42e9f4bc3a7809e7d93b3855eb383ed;hp=934faa8e0cc63e37adc530c22beea642f7782fb7;hb=7b54e4a8c6a461c186125b5e36d4d312ee9b41b2;hpb=d1b224fb4410e5ae5a06a5a8edc707524f1c2b73
diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index 934faa8..46cee2a 100644
--- a/tictactoe/tictactoe.jsx
+++ b/tictactoe/tictactoe.jsx
@@ -1,3 +1,12 @@
+const Team = {
+ X: 0,
+ O: 1,
+ properties: {
+ 0: {name: "X"},
+ 1: {name: "O"}
+ }
+};
+
function undisplay(element) {
element.style.display="none";
}
@@ -11,6 +20,10 @@ ${message}
message_area.insertAdjacentHTML('beforeend', message);
}
+/*********************************************************
+ * Handling server-sent event stream *
+ *********************************************************/
+
const events = new EventSource("events");
events.onerror = function(event) {
@@ -19,25 +32,96 @@ events.onerror = function(event) {
}
};
+events.addEventListener("game-info", event => {
+ const info = JSON.parse(event.data);
+
+ window.game.set_game_info(info);
+});
+
+events.addEventListener("player-info", event => {
+ const info = JSON.parse(event.data);
+
+ window.game.set_player_info(info);
+});
+
+events.addEventListener("player-update", event => {
+ const info = JSON.parse(event.data);
+
+ if (info.id === window.game.state.player_info.id)
+ window.game.set_player_info(info);
+});
+
events.addEventListener("move", event => {
- const square = JSON.parse(event.data);
+ const move = JSON.parse(event.data);
- window.game.receiveMove(square);
+ window.game.receive_move(move);
});
+events.addEventListener("game-state", event => {
+ const state = JSON.parse(event.data);
+
+ window.game.reset_board();
+
+ for (let square of state.moves) {
+ window.game.receive_move(square);
+ }
+});
+
+/*********************************************************
+ * Game and supporting classes *
+ *********************************************************/
+
+function GameInfo(props) {
+ if (! props.id)
+ return null;
+
+ return (
+
+
{props.id}
+ Invite a friend to play by sending this URL: {props.url}
+
+ );
+}
+
+function PlayerInfo(props) {
+ if (! props.id)
+ return null;
+
+ return (
+
+
Player
+ {props.name}, ID: {props.id},
+ {props.team ? ` on team ${props.team}` : " not on a team"}
+
+ );
+}
+
function Square(props) {
+ let className = "square";
+
+ if (props.value) {
+ className += " occupied";
+ } else if (props.active) {
+ className += " open";
+ }
+
+ const onClick = props.active ? props.onClick : null;
+
return (
-