ssb-chess-mithril 2.0.9 → 2.1.1

package/css/chessground-examples/src/util.ts

@@ -1,46 +1,58 @@
-import { Api } from 'chessground/api';
+import { Api } from "chessground/api";
+import { Color, Key } from "chessground/types";
+import { ChessInstance, SQUARES } from "chess.js";
 
-export function toDests(chess: any) {
-  const dests = {};
-  chess.SQUARES.forEach(s => {
-    const ms = chess.moves({square: s, verbose: true});
-    if (ms.length) dests[s] = ms.map(m => m.to);
+export function toDests(chess: ChessInstance): Map<Key, Key[]> {
+  const dests = new Map();
+  SQUARES.forEach((s) => {
+    const ms = chess.moves({ square: s, verbose: true });
+    if (ms.length)
+      dests.set(
+        s,
+        ms.map((m) => m.to),
+      );
   });
   return dests;
 }
 
-export function toColor(chess: any) {
-  return (chess.turn() === 'w') ? 'white' : 'black';
-
+export function toColor(chess: ChessInstance): Color {
+  return chess.turn() === "w" ? "white" : "black";
 }
 
 export function playOtherSide(cg: Api, chess) {
   return (orig, dest) => {
-    chess.move({from: orig, to: dest});
+    chess.move({ from: orig, to: dest });
     cg.set({
       turnColor: toColor(chess),
       movable: {
         color: toColor(chess),
-        dests: toDests(chess)
-      }
+        dests: toDests(chess),
+      },
     });
   };
 }
 
-export function aiPlay(cg: Api, chess, delay: number, firstMove: boolean) {
+export function aiPlay(
+  cg: Api,
+  chess: ChessInstance,
+  delay: number,
+  firstMove: boolean,
+) {
   return (orig, dest) => {
-    chess.move({from: orig, to: dest});
+    chess.move({ from: orig, to: dest });
     setTimeout(() => {
-      const moves = chess.moves({verbose:true});
-      const move = firstMove ? moves[0] : moves[Math.floor(Math.random() * moves.length)];
+      const moves = chess.moves({ verbose: true });
+      const move = firstMove
+        ? moves[0]
+        : moves[Math.floor(Math.random() * moves.length)];
       chess.move(move.san);
       cg.move(move.from, move.to);
       cg.set({
         turnColor: toColor(chess),
         movable: {
           color: toColor(chess),
-          dests: toDests(chess)
-        }
+          dests: toDests(chess),
+        },
       });
       cg.playPremove();
     }, delay);

package/css/chessground-examples/tsconfig.json

@@ -1,9 +1,8 @@
 {
-  "include": [
-    "src/*.ts"
-  ],
+  "include": ["src/*.ts"],
   "compilerOptions": {
     "outDir": "./dist",
+    "rootDir": "./src",
     "noImplicitAny": false,
     "strictNullChecks": true,
     "noUnusedLocals": true,
@@ -12,6 +11,9 @@
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noUnusedParameters": true,
-    "target": "es6"
+    "moduleResolution": "node",
+    "target": "ES2018",
+    "module": "esnext",
+    "lib": ["ES2018", "DOM"]
   }
 }

package/css/miniboards.css

@@ -33,6 +33,7 @@
 .ssb-chess-miniboard-controls {
   display: flex;
   justify-content: center;
+  position: relative;
 }
 
 .ssb-chess-miniboard-control {

package/index.js

@@ -1,7 +1,6 @@
 const m = require('mithril');
-const onceTrue = require('mutant/once-true');
-
 const MainCtrl = require('ssb-chess');
+const util = require('util');
 
 const MiniboardListComponent = require('./ui/miniboard/miniboard_list');
 const NavigationBar = require('./ui/pageLayout/navigation');
@@ -15,66 +14,71 @@ const Notifier = require('./ui/notify/notifier');
 module.exports = (attachToElement, dataAccess, opts = {}) => {
   const { initialView } = opts;
 
-  const cssFiles = [
-    './css/global.css',
-    './css/chessground-examples/assets/chessground.css',
-    './css/chessground-examples/assets/theme.css',
-    './css/board-theme.css',
-    './css/miniboards.css',
-    './css/largeBoard.css',
-    './css/invites.css',
-    './css/loading.css',
-    './css/promote.css',
-    './css/game.css',
-    './css/historyArea.css',
-    './css/playerProfiles.css',
-    './css/actionButtons.css',
-    './css/activity.css',
-    './css/pgnExport.css',
-    './css/nextPrevious.css'
-  ];
-
-  // h4cky0 strikes again? mebbe there's a better way? ;x
-  function cssFilesToStyleTag(dom) {
+  // function cssFileElements() {
+  //   const styles = m('div', {}, cssPaths().map(file => m('link', { rel: 'stylesheet', href:  file })));
+  //   return styles
+  // }
+
+  function cssPaths() {
+    const cssFiles = [
+      './css/global.css',
+      './css/chessground-examples/assets/chessground.css',
+      './css/chessground-examples/assets/theme.css',
+      './css/board-theme.css',
+      './css/miniboards.css',
+      './css/largeBoard.css',
+      './css/invites.css',
+      './css/loading.css',
+      './css/promote.css',
+      './css/game.css',
+      './css/historyArea.css',
+      './css/playerProfiles.css',
+      './css/actionButtons.css',
+      './css/activity.css',
+      './css/pgnExport.css',
+      './css/nextPrevious.css'
+    ];
 
     const rootDir = `${__dirname}/`;
-
-    const styles = m('div', {}, cssFiles.map(file => m('link', { rel: 'stylesheet', href: rootDir + file })));
-
-    m.render(dom, styles);
+    return cssFiles.map(file => rootDir + file)
   }
 
-  function renderPageTop(parent, mainCtrl, settingsCtrl) {
-    const navBar = NavigationBar(mainCtrl, settingsCtrl);
+  function appendCss() {
 
-    const TopComponent = {
-      view: () => m('div', [
-        m(navBar),
-      ]),
-    };
+    cssPaths().forEach((filepath) => {
+      const link = document.createElement('link');
 
-    m.mount(parent, TopComponent);
+      link.setAttribute('rel', 'stylesheet');
+      link.setAttribute('href', filepath);
+      document.head.appendChild(link);
+    })
   }
 
-  function appRouter(mainBody, mainCtrl, settingsCtrl) {
+  async function appRouter(mountElement, mainCtrl, settingsCtrl) {
+    appendCss();
+
     const gamesInProgressObs = mainCtrl.getGameCtrl().getMyGamesInProgress();
     const gamesMyMoveObs = mainCtrl.getGameCtrl().getGamesWhereMyMove();
     const observableGamesObs = mainCtrl.getGameCtrl().getFriendsObservableGames();
     const userRecentActivity = mainCtrl.getRecentActivityCtrl().getRecentActivityForUserGames();
 
     // Hack: keep observables loaded with the latest value.
-    gamesInProgressObs(e => e);
-    gamesMyMoveObs(e => e);
-    observableGamesObs(e => e);
-    userRecentActivity(e => e);
+    const watches = [
+      gamesInProgressObs(e => e),
+      gamesMyMoveObs(),
+      observableGamesObs(e => e),
+      userRecentActivity(e => e)
+     ];
 
     const defaultView = initialView || '/my_games';
 
-    m.route.prefix('?');
+    m.route.prefix = '?';
+
+    const navigationBar = NavigationBar(mainCtrl, settingsCtrl)
 
-    m.route(mainBody, defaultView, {
-      '/my_games': MiniboardListComponent(mainCtrl, gamesInProgressObs, mainCtrl.getMyIdent()),
-      '/games_my_move': MiniboardListComponent(mainCtrl, gamesMyMoveObs, mainCtrl.getMyIdent()),
+    m.route(mountElement, defaultView, {
+      '/my_games': layoutTemplate(navigationBar, MiniboardListComponent(mainCtrl, gamesInProgressObs, mainCtrl.getMyIdent())),
+      '/games_my_move': layoutTemplate(navigationBar, MiniboardListComponent(mainCtrl, gamesMyMoveObs, mainCtrl.getMyIdent())),
       '/games/:gameId': {
         onmatch(args) {
           const gameId = atob(args.gameId);
@@ -86,67 +90,72 @@ module.exports = (attachToElement, dataAccess, opts = {}) => {
             observableGames: observableGamesObs
           }
 
-          // Only load the game page once we have the initial game situation state.
-          // The mithril router allows us to return a component in a promise.
-          return new Promise((resolve) => {
-            onceTrue(gameSituationObs, () => {
-              const gameComponent = GameComponent(dataAccess, mainCtrl, observables, settingsCtrl);
-              resolve(gameComponent);
-            });
-          });
+          return GameComponent(gameId, dataAccess, mainCtrl, observables, settingsCtrl).then((gameComponent) => {
+            return layoutTemplate(navigationBar, gameComponent);
+          })
+
         },
       },
-      '/invitations': InvitationsComponent(mainCtrl),
-      '/activity': RecentActivityComponent(mainCtrl, userRecentActivity),
-      '/observable': MiniboardListComponent(mainCtrl, observableGamesObs, mainCtrl.getMyIdent()),
-      '/player/:playerId': PlayerProfileComponent(mainCtrl),
+      '/invitations': layoutTemplate(navigationBar, InvitationsComponent(mainCtrl)),
+      '/activity': layoutTemplate(navigationBar, RecentActivityComponent(mainCtrl, userRecentActivity)),
+      '/observable': layoutTemplate(navigationBar, MiniboardListComponent(mainCtrl, observableGamesObs, mainCtrl.getMyIdent())),
+      '/player/:playerId': layoutTemplate(navigationBar, PlayerProfileComponent(mainCtrl)),
       '/games/:gameId/pgn': {
         onmatch(args) {
           const gameId = atob(args.gameId);
           return mainCtrl.getPgnCtrl()
             .getPgnExport(gameId)
-            .then(pgnText => PgnExportComponent(gameId, pgnText));
+            .then(pgnText => layoutTemplate(navigationBar, PgnExportComponent(gameId, pgnText)));
         },
       },
     });
 
+    return watches;
   }
 
-  dataAccess.whoAmI((err, ident) => {
-    const mainCtrl = MainCtrl(dataAccess, ident.id);
-
-    const settingsCtrl = mainCtrl.getSettingsCtrl();
-
-    const mainBody = document.createElement('div');
-    mainBody.className = 'ssb-chess-container'
-
-    attachToElement.appendChild(mainBody);
-
-    const navDiv = document.createElement('div');
-    navDiv.id = 'ssb-nav';
-    const bodyDiv = document.createElement('div');
+  function layoutTemplate(navigationBarComponent, component) {
+    
+    // TODO: the nav bar should accept observables by injection and we should give it
+    // the same instances on each render so there's not jitter on the numbers in the nav items
+    return {
+      view: function() {
+        return m('div', {className: 'ssb-chess-container'}, [
+          m(navigationBarComponent),
+          m('div', m(component))
+      ])
+        
+        
+      }
+    }
 
-    const cssDiv = document.createElement('div');
-    cssFilesToStyleTag(cssDiv);
+  }
 
-    mainBody.appendChild(cssDiv);
-    mainBody.appendChild(navDiv);
-    mainBody.appendChild(bodyDiv);
+  const whoAmIAsync = util.promisify(dataAccess.whoAmI.bind(dataAccess))
 
-    renderPageTop(navDiv, mainCtrl, settingsCtrl);
+  const globalWatches = whoAmIAsync().then((ident) => {
+    const mainCtrl = MainCtrl(dataAccess, ident.id);
+    const settingsCtrl = mainCtrl.getSettingsCtrl();
 
     // Display HTML5 notifications if the user is not viewing the chess app
     // and one of their games has an update.
     const notifier = Notifier(mainCtrl);
     notifier.startNotifying();
 
-    appRouter(bodyDiv, mainCtrl, settingsCtrl);
-  });
+    return appRouter(attachToElement, mainCtrl, settingsCtrl);
+  })
 
   return {
     goToGame: (gameId) => {
       const gameRoute = `/games/${btoa(gameId)}`;
       m.route.set(gameRoute);
     },
+    destroy: () => {
+      // unmount the app
+      m.route(attachToElement, null);
+      globalWatches.then((watches) => watches.forEach(w => w()))
+    }
   };
 };
+
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssb-chess-mithril",
-  "version": "2.0.9",
+  "version": "2.1.1",
   "description": "An ssb-chess client",
   "main": "index.js",
   "scripts": {
@@ -14,17 +14,17 @@
   "author": "Gordon Martin",
   "license": "GPL-3.0",
   "dependencies": {
-    "chessground": "7.6.8",
+    "@lichess-org/chessground": "^10.4.2",
     "howler": "^2.0.15",
     "human-time": "0.0.2",
     "hyperscript": "^2.0.2",
-    "mithril": "1.1.7",
+    "mithril": "2.3.6",
     "mutant": "3.29.0",
     "pubsub-js": "^1.7.0",
     "pull-scroll": "^1.0.9",
     "pull-stream": "^3.6.14",
     "ramda": "^0.25.0",
-    "ssb-chess": "4.0.5",
+    "ssb-chess": "4.0.7",
     "ssb-embedded-chat": "2.0.2"
   }
 }

package/ui/game/PieceGraveyard.js

@@ -1,7 +1,7 @@
 const m = require('mithril');
 const watchAll = require('mutant/watch-all');
 
-const { opposite } = require('chessground/util');
+const { opposite } = require('@lichess-org/chessground/util');
 
 const R = require('ramda');
 

package/ui/game/chat.js

@@ -0,0 +1,51 @@
+
+const m = require('mithril')
+const EmbeddedChat = require('ssb-embedded-chat');
+const pull = require('pull-stream');
+
+module.exports = function ChatBox(myIdent, dataAccess, originalSituation) {
+
+    return {
+        view: () => {
+            return m('div', {className: 'ssb-chess-chat'});
+        },
+        oncreate: function (vNode) {
+            this.embeddedChat = makeEmbeddedChat(myIdent, dataAccess, originalSituation);
+            vNode.dom.appendChild(this.embeddedChat.getChatboxElement());
+        },
+        onremove: function() {
+            this.embeddedChat.destroy();
+        }
+    }
+} 
+
+function makeEmbeddedChat(myIdent, dataAccess, situation) {
+      const config = {
+        rootMessageId: situation.gameId,
+        chatMessageType: 'chess_chat',
+        chatMessageField: 'msg',
+        chatboxEnabled: true,
+        previousChatId: situation.rematchFrom
+      };
+
+      if (situation.players[myIdent] != null) {
+        config.isPublic = false;
+        config.participants = Object.keys(situation.players);
+      } else {
+        config.isPublic = true;
+      }
+
+      config.publishPublic = dataAccess.publishPublicChessMessage.bind(dataAccess);
+      config.publishPrivate = dataAccess.publishPrivateChessMessage.bind(dataAccess);
+
+      config.getChatStream = (gameId, live) => 
+        pull(dataAccess.allGameMessages(gameId, live), pull.filter(msg => !msg.sync && msg.value && msg.value.content.type == "chess_chat"));
+
+      config.aboutSelfChangeStream = (since) => dataAccess.aboutSelfChangesUserIds(since);
+
+      config.getDisplayName = (id, cb) => dataAccess.getPlayerDisplayName(id, cb);
+
+      const chat = EmbeddedChat(config);
+
+      return chat;
+}

package/ui/game/gameHistory.js

@@ -7,7 +7,11 @@ const R = require('ramda');
 const UserLocationUtils = require('../viewer_perspective/user_location')();
 
 module.exports = (gameObservable) => {
-  let watchesToClear = [];
+  // TODO(hack): the router calls this function inside a 'onceTrue' which releases the observable once it exits the function body,
+  // at that point the observable would have no subscribers left and would have an initial value of null in the places it is used,
+  // so subscribing immediately stops that happening
+  const unwatch = gameObservable(e => e);
+  let watchesToClear = [unwatch];
 
   let moveNumberSelected = 'live';
   const moveSelectedObservable = Value(moveNumberSelected);