puzzle racer WIP

package.json

@@ -60,6 +60,7 @@
     "ui/tree",
     "ui/msg",
     "ui/dgt",
+    "ui/puz",
     "ui/storm",
     "ui/@build/rollupProject",
     "ui/@types/lichess",

ui/build

@@ -14,8 +14,8 @@ ls -l node_modules node_modules/@* ui/node_modules ui/*/node_modules | grep /yar
 mkdir -p public/compiled
 
 apps1="common"
-apps2="chess ceval game tree chat nvui"
-apps3="site swiss msg chat cli challenge notify learn insight editor puzzle round analyse lobby tournament tournamentSchedule tournamentCalendar simul dasher speech palantir serviceWorker dgt storm"
+apps2="chess ceval game tree chat nvui puz"
+apps3="site swiss msg chat cli challenge notify learn insight editor puzzle round analyse lobby tournament tournamentSchedule tournamentCalendar simul dasher speech palantir serviceWorker dgt storm racer"
 site_plugins="tvEmbed puzzleEmbed analyseEmbed user modUser clas coordinate captcha expandText team forum account coachShow coachForm challengePage checkout login passwordComplexity tourForm teamBattleForm gameSearch userComplete infiniteScroll flatpickr teamAdmin appeal modGames"
 round_plugins="nvui keyboardMove"
 analyse_plugins="nvui studyTopicForm"

ui/puz/.gitignore

@@ -0,0 +1 @@
+dist

ui/puz/package.json

@@ -13,7 +13,9 @@
     "prod": "yarn run compile"
   },
   "dependencies": {
-    "snabbdom": "^0.7.4"
+    "snabbdom": "^0.7.4",
+    "chessground": "^7.11.0",
+    "common": "2.0.0"
   },
   "devDependencies": {
     "@types/cash": "8.0.0",

ui/puz/src/interfaces.ts

@@ -0,0 +1,10 @@
+export interface Prefs {
+  coords: 0 | 1 | 2;
+  is3d: boolean;
+  destination: boolean;
+  rookCastle: boolean;
+  moveEvent: number;
+  highlight: boolean;
+}
+
+export type UserMove = (orig: Key, dest: Key) => void;

ui/puz/src/view/chessground.ts

@@ -1,23 +1,11 @@
-import StormCtrl from '../ctrl';
 import changeColorHandle from 'common/coordsColor';
 import resizeHandle from 'common/resize';
-import { Chessground } from 'chessground';
 import { Config as CgConfig } from 'chessground/config';
 import { h } from 'snabbdom';
 import { VNode } from 'snabbdom/vnode';
+import { Prefs, UserMove } from '../interfaces';
 
-export default function (ctrl: StormCtrl): VNode {
-  return h('div.cg-wrap', {
-    hook: {
-      insert: vnode => ctrl.ground(Chessground(vnode.elm as HTMLElement, makeConfig(ctrl))),
-      destroy: _ => ctrl.withGround(g => g.destroy()),
-    },
-  });
-}
-
-function makeConfig(ctrl: StormCtrl): CgConfig {
-  const opts = ctrl.makeCgOpts();
-  const pref = ctrl.pref;
+export function makeConfig(opts: CgConfig, pref: Prefs, userMove: UserMove): CgConfig {
   return {
     fen: opts.fen,
     orientation: opts.orientation,
@@ -41,7 +29,7 @@ function makeConfig(ctrl: StormCtrl): CgConfig {
       enabled: pref.moveEvent !== 1,
     },
     events: {
-      move: ctrl.userMove,
+      move: userMove,
       insert(elements) {
         resizeHandle(elements, 1, 0, p => p == 0);
         if (pref.coords == 1) changeColorHandle();

ui/puz/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.base.json",
+  "include": ["src"]
+}

ui/storm/src/view/main.ts

@@ -1,4 +1,5 @@
-import chessground from './chessground';
+import { Chessground } from 'chessground';
+import { makeConfig as makeCgConfig } from 'puz/view/chessground';
 import config from '../config';
 import renderClock from './clock';
 import renderEnd from './end';
@@ -33,6 +34,14 @@ const playModifiers = (ctrl: StormCtrl) => {
   };
 };
 
+const chessground = (ctrl: StormCtrl): VNode =>
+  h('div.cg-wrap', {
+    hook: {
+      insert: vnode => ctrl.ground(Chessground(vnode.elm as HTMLElement, makeCgConfig(ctrl))),
+      destroy: _ => ctrl.withGround(g => g.destroy()),
+    },
+  });
+
 const renderPlay = (ctrl: StormCtrl): VNode[] => [
   h('div.storm__board.main-board', [chessground(ctrl), ctrl.promotion.view()]),
   h('div.storm__side', [