ssb-chess-mithril 2.1.0 → 2.1.2

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(e => e),
+      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.mount(attachToElement, null);
+      globalWatches.then((watches) => watches.forEach(w => w()))
+    }
   };
 };
+
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssb-chess-mithril",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "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

@@ -1,15 +1,15 @@
 
 const m = require('mithril')
 const EmbeddedChat = require('ssb-embedded-chat');
-const pull = require('pull-stream')
+const pull = require('pull-stream');
+
+module.exports = function ChatBox(myIdent, dataAccess, originalSituation) {
 
-module.exports = function ChatBox(myIdent, dataAccess, situationObservable) {
     return {
         view: () => {
             return m('div', {className: 'ssb-chess-chat'});
         },
         oncreate: function (vNode) {
-            const originalSituation = situationObservable();
             this.embeddedChat = makeEmbeddedChat(myIdent, dataAccess, originalSituation);
             vNode.dom.appendChild(this.embeddedChat.getChatboxElement());
         },

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);

package/ui/game/gameView.js

@@ -1,11 +1,12 @@
 const m = require('mithril');
-const { Chessground } = require('chessground');
+const { Chessground } = require('@lichess-org/chessground');
 const PubSub = require('pubsub-js');
 const Value = require('mutant/value');
 const watchAll = require('mutant/watch-all');
 const computed = require('mutant/computed');
 const when = require('mutant/when');
 const { Howl } = require('howler');
+const watch = require('mutant/watch');
 
 const ActionButtons = require('./gameActions');
 const GameHistory = require('./gameHistory');
@@ -15,10 +16,28 @@ const ChatBox = require('./chat')
 const PieceGraveyard = require('./PieceGraveyard');
 const NextPreviousButtons = require('./nextGameControl');
 
-module.exports = (dataAccess, gameCtrl, observables, settings) => {
-  const myIdent = gameCtrl.getMyIdent();
+function getInitialSituation(situationObservable) {
+  return new Promise((resolve, reject) => {
+      const w = watch(situationObservable, (situation) => {
+        if (situation) {
+          resolve(situation)
+
+          // hack: Keep the observable warm - the ssb-chess 'getSituationObservable' doesn't handle
+          // the observable having 0 listeners then 1 again - it aborts the underyling stream when it
+          // reaches 0 listeners but doesn't start it again if it reaches >= 1 again.
+          // TODO: fix this properly
+          setTimeout(w, 50000);
+        }
+      })
+  })
+
+}
+
+module.exports = async (gameId, dataAccess, gameCtrl, observables, settings) => {
 
+  const myIdent = gameCtrl.getMyIdent();
   const { situationObservable, gamesWhereMyMove, observableGames } = observables;
+  const originalSituation = await getInitialSituation(situationObservable);
 
   let chessGround = null;
   const chessGroundObservable = Value();
@@ -75,8 +94,8 @@ module.exports = (dataAccess, gameCtrl, observables, settings) => {
 
   function isPromotionMove(cg, dest) {
     return (dest[1] === '8' || dest[1] === '1')
-      && cg.state.pieces[dest]
-      && (cg.state.pieces[dest].role === 'pawn');
+      && cg.state.pieces.get(dest)
+      && (cg.state.pieces.get(dest).role === 'pawn');
   }
 
   function renderBoard(gameId) {
@@ -131,18 +150,21 @@ module.exports = (dataAccess, gameCtrl, observables, settings) => {
   }
 
   function situationToChessgroundConfig(situation, moveSelected, validMoves) {
+    const ended = ["mate", "draw", "resigned"].indexOf(situation.status.status) !== -1;
+
     const playerColour = situation.players[myIdent] ? situation.players[myIdent].colour : 'white';
 
     const colourToPlay = plyToColourToPlay(situation.ply);
 
     const config = {
+      viewOnly: ended,
       fen: situation.fen,
       orientation: playerColour,
       turnColor: colourToPlay,
       ply: situation.ply,
       check: situation.check,
       movable: {
-        dests: validMoves,
+        dests: new Map(Object.entries(validMoves)),
         free: false,
         color: situation.toMove === myIdent ? playerColour : null,
         events: {
@@ -225,12 +247,11 @@ module.exports = (dataAccess, gameCtrl, observables, settings) => {
     }
   }
 
-  const Chat = ChatBox(myIdent, dataAccess, situationObservable);
+  const Chat = ChatBox(myIdent, dataAccess, originalSituation);
 
   return {
 
     view(ctrl) {
-      const gameId = atob(ctrl.attrs.gameId);
 
       return m('div', {
         class: 'ssb-chess-board-background-blue3 merida ssb-chess-game-layout',
@@ -243,13 +264,11 @@ module.exports = (dataAccess, gameCtrl, observables, settings) => {
       ])]);
     },
     oncreate(vNode) {
-      const gameId = atob(vNode.attrs.gameId);
       const boardDom = document.getElementById(gameId);
 
-      const originalSituation = situationObservable();
-
       const config = situationToChessgroundConfig(originalSituation, 'live', {});
       chessGround = Chessground(boardDom, config);
+
       chessGroundObservable.set(chessGround);
 
       const validMovesObservable = gameCtrl.getMovesFinderCtrl()

package/ui/miniboard/miniboard.js

@@ -1,5 +1,5 @@
 const m = require('mithril');
-const { Chessground } = require('chessground');
+const { Chessground } = require('@lichess-org/chessground');
 const timeAgo = require('./timeAgo');
 
 module.exports = (gameSummaryObservable, summary, identPerspective, opts) => {
@@ -13,9 +13,10 @@ module.exports = (gameSummaryObservable, summary, identPerspective, opts) => {
     && summary.players[identPerspective].colour) ? summary.players[identPerspective].colour : 'white';
 
   function renderPlayerName(player) {
-    return m(`a[href=/player/${btoa(player.id)}]`, {
+    const link = `/player/${btoa(player.id)}`;
+    return m(m.route.Link, {
       class: 'ssb-chess-miniboard-name',
-      oncreate: m.route.link,
+      href: link,
     },
     player.name.substring(0, 10));
   }
@@ -48,14 +49,16 @@ module.exports = (gameSummaryObservable, summary, identPerspective, opts) => {
     const observing = Object.keys(summary.players).indexOf(identPerspective) === -1;
     const boardSizeClass = opts && opts.small ? 'ssb-chess-board-small' : 'ssb-chess-board-medium';
 
+    const link = `/games/${btoa(summary.gameId)}?observing=${observing}`;
+
     return m('div', {
       class: 'ssb-chess-miniboard ssb-chess-board-background-blue3 merida',
     }, [
-      m(`${'a[href=/games/'}${btoa(summary.gameId)}?observing=${observing}]`, {
+      m(m.route.Link, {
         class: `ssb-chessground-container cg-wrap ${boardSizeClass}`,
         title: summary.gameId,
         id: summary.gameId,
-        oncreate: m.route.link,
+        href: link,
       }), renderSummaryBottom(),
     ]);
   }

package/ui/pageLayout/navigation.js

@@ -2,7 +2,7 @@ const m = require('mithril');
 const SettingsDialog = require('../settings/settings-dialog');
 
 module.exports = (mainCtrl, settings) => {
-  m.route.prefix('?');
+  m.route.prefix = '?';
 
   const gamesInProgress = {
     name: 'Games',
@@ -45,8 +45,8 @@ module.exports = (mainCtrl, settings) => {
   function renderNavItem(navItem) {
     return m('span', {
       class: 'ssb-chess-nav-item',
-    }, m(`a[href=${navItem.link}]`, {
-      oncreate: m.route.link,
+    }, m(m.route.Link, {
+      href: navItem.link,
       title: navItem.countHoverText(),
     },
 
@@ -89,24 +89,28 @@ module.exports = (mainCtrl, settings) => {
   }
 
   function keepCountsUpdated() {
-    navItems.forEach((navItem) => {
+    const watches = navItems.map((navItem) => {
       if (navItem.countUpdateFn) {
-        navItem.countUpdateFn()((items) => {
+        return navItem.countUpdateFn()((items) => {
           const numItems = items.length;
           navItem.count = numItems;
           m.redraw();
         });
+      } else {
+        return () => {}
       }
     });
+
+    return watches;
   }
 
   return {
     view: () => renderNavigation(),
     oncreate: () => {
-      keepCountsUpdated();
+      this.watches = keepCountsUpdated();
     },
     onremove: () => {
-
+      this.watches.forEach(watch => watch());
     },
   };
 };

package/css/chessground-examples/gulpfile.js

@@ -1,52 +0,0 @@
-const gulp = require('gulp');
-const source = require('vinyl-source-stream');
-const buffer = require('vinyl-buffer');
-const colors = require('ansi-colors');
-const logger = require('fancy-log');
-const watchify = require('watchify');
-const browserify = require('browserify');
-const uglify = require('gulp-uglify');
-const tsify = require('tsify');
-
-const destination = gulp.dest('./dist');
-const fileBaseName = 'chessground-examples';
-
-const browserifyOpts = (debug) => ({
-  entries: ['src/main.ts'],
-  standalone: 'ChessgroundExamples',
-  debug: debug
-});
-
-const prod = () => browserify(browserifyOpts(false))
-  .plugin(tsify)
-  .bundle()
-  .pipe(source(`${fileBaseName}.min.js`))
-  .pipe(buffer())
-  .pipe(uglify())
-  .pipe(destination);
-
-const dev = () => browserify(browserifyOpts(true))
-  .plugin(tsify)
-  .bundle()
-  .pipe(source(`${fileBaseName}.js`))
-  .pipe(destination);
-
-const watch = () => {
-
-  const bundle = () => bundler
-    .bundle()
-    .on('error', error => logger.error(colors.red(error.message)))
-    .pipe(source(`${fileBaseName}.js`))
-    .pipe(destination);
-
-  const bundler = watchify(
-    browserify(Object.assign({}, watchify.args, browserifyOpts(true)))
-    .plugin(tsify)
-  ).on('update', bundle).on('log', logger.info);
-
-  return bundle();
-};
-
-gulp.task('prod', prod);
-gulp.task('dev', dev);
-gulp.task('default', watch);