X-Git-Url: https://git.cworth.org/git?a=blobdiff_plain;ds=sidebyside;f=tictactoe%2Ftictactoe.jsx;h=dbfc5ef93e9ba41d21f026a14653e179828fbd4a;hb=7c01cc8d716fbc5fc1b21a4684e5268ef721eb1c;hp=eff7eff32f6df572437130d0ec2c0e8ecf8c2a7b;hpb=f0c30f7cd59ecfca24e6a7332910f87a6b2045e6;p=lmno.games
diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index eff7eff..dbfc5ef 100644
--- a/tictactoe/tictactoe.jsx
+++ b/tictactoe/tictactoe.jsx
@@ -1,16 +1,179 @@
+const Team = {
+ X: 0,
+ O: 1,
+ properties: {
+ 0: {name: "X"},
+ 1: {name: "O"}
+ }
+};
+
+function undisplay(element) {
+ element.style.display="none";
+}
+
+function add_message(severity, message) {
+ message = `
+×
+${message}
+
`;
+ const message_area = document.getElementById('message-area');
+ message_area.insertAdjacentHTML('beforeend', message);
+}
+
+/*********************************************************
+ * Handling server-sent event stream *
+ *********************************************************/
+
+const events = new EventSource("events");
+
+events.onerror = function(event) {
+ if (event.target.readyState === EventSource.CLOSED) {
+ add_message("danger", "Connection to server lost.");
+ }
+};
+
+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-enter", event => {
+ const info = JSON.parse(event.data);
+
+ window.game.set_other_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);
+ else
+ window.game.set_other_player_info(info);
+});
+
+events.addEventListener("move", event => {
+ const move = JSON.parse(event.data);
+
+ 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 TeamButton(props) {
+ return ;
+}
+
+function TeamChoices(props) {
+ let other_team;
+ if (props.player.team === "X")
+ other_team = "O";
+ else
+ other_team = "X";
+
+ if (props.player.team === "") {
+ if (props.first_move) {
+ return null;
+ } else {
+ return [
+ ,
+ " ",
+
+ ];
+ }
+ } else {
+ return ;
+ }
+}
+
+function PlayerInfo(props) {
+ if (! props.player.id)
+ return null;
+
+ const choices = ;
+
+ return (
+
+
Players
+ {props.player.name}
+ {props.player.team ? ` (${props.player.team})` : ""}
+ {props.first_move ? "" : " "}
+ {choices}
+ {props.other_players.map(other => (
+
+ {", "}
+ {other.name}
+ {other.team ? ` (${other.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 (
-