Moves HistoryService to separate file

quaternionmedia · Feb 4, 2024 · 5ff9d28 · 5ff9d28
1 parent aead051
commit 5ff9d28
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 81 deletions.
diff --git a/src/App.ts b/src/App.ts
@@ -3,10 +3,7 @@ import { Chess } from 'chess.js'
 import { State } from './State'
 import { Game } from './Game.ts'
 import { Toolbar } from './meiosis.ts'
-import { toDests } from './utils'
-
-export const DEFAULT_POSITION =
-  'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'
+import { HistoryService } from './Services'
 
 export const state: State = JSON.parse(
   localStorage.getItem('launchchess') || '{}'
@@ -39,48 +36,7 @@ export const App: MeiosisViewComponent<State> = {
   },
 
   services: [
-    {
-      onchange: (state: State) => state.historyIndex,
-      run: cell => {
-        console.log('historyIndex', cell.state.historyIndex)
-        if (cell.state.historyIndex < 0) {
-          cell.update({ historyIndex: 0 })
-          return
-        }
-        if (cell.state.historyIndex > cell.state.history.length) {
-          cell.update({ historyIndex: cell.state.history.length })
-          return
-        }
-        // if (cell.state.historyIndex != cell.state.history.length) {
-        let move = cell.state.chess.history({ verbose: true })[
-          cell.state.historyIndex - 1
-        ]
-        window.ground?.set({
-          fen: move ? move.after : DEFAULT_POSITION,
-          lastMove: move ? [move.from, move.to] : undefined,
-          turnColor: move?.color == 'w' ? 'white' : 'black',
-        })
-        if (cell.state.historyIndex == cell.state.history.length) {
-          // Back to current game state. Set movable color to current turn
-          window.ground?.set({
-            turnColor: cell.state.chess.turn() == 'w' ? 'white' : 'black',
-            movable: {
-              color: cell.state.chess.turn() == 'w' ? 'white' : 'black',
-              dests: toDests(cell.state.chess),
-            },
-          })
-        } else {
-          // Disable moving pieces while viewing history
-          // TODO: Implement variation navigation
-          window.ground?.set({
-            movable: {
-              color: undefined,
-              dests: {},
-            },
-          })
-        }
-      },
-    },
+    HistoryService,
     // },
   ],
 

diff --git a/src/Board.ts b/src/Board.ts
@@ -28,6 +28,7 @@ export const Board = cell =>
           highlight: {
             check: true,
           },
+          check: cell.state.chess.inCheck(),
           events: {
             move: (orig, dest) => {
               let state = cell.getState()

diff --git a/src/Services.ts b/src/Services.ts
@@ -0,0 +1,50 @@
+import { State } from './State'
+import { toDests } from './utils'
+
+export const DEFAULT_POSITION =
+  'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'
+
+export const HistoryService = {
+  // Watch for changes to historyIndex and update the board
+  onchange: (state: State) => state.historyIndex,
+  run: cell => {
+    console.log('historyIndex', cell.state.historyIndex)
+    if (cell.state.historyIndex < 0) {
+      cell.update({ historyIndex: 0 })
+      return
+    }
+    if (cell.state.historyIndex > cell.state.history.length) {
+      cell.update({ historyIndex: cell.state.history.length })
+      return
+    }
+    let move = cell.state.chess.history({ verbose: true })[
+      cell.state.historyIndex - 1
+    ]
+    window.ground?.set({
+      fen: move ? move.after : DEFAULT_POSITION,
+      lastMove: move ? [move.from, move.to] : undefined,
+      turnColor: move?.color == 'w' ? 'white' : 'black',
+      check: cell.state.chess.inCheck(),
+    })
+    if (cell.state.historyIndex == cell.state.history.length) {
+      // Back to current game state. Set movable color to current turn
+      window.ground?.set({
+        turnColor: cell.state.chess.turn() == 'w' ? 'white' : 'black',
+        movable: {
+          color: cell.state.chess.turn() == 'w' ? 'white' : 'black',
+          dests: toDests(cell.state.chess),
+        },
+        check: cell.state.chess.inCheck(),
+      })
+    } else {
+      // Disable moving pieces while viewing history
+      // TODO: Implement variation navigation
+      window.ground?.set({
+        movable: {
+          color: undefined,
+          dests: {},
+        },
+      })
+    }
+  },
+}
diff --git a/src/index.ts b/src/index.ts
@@ -21,23 +21,26 @@ let cell = cells()
 // Handle left and right arrow key presses
 document.removeEventListener('keydown', cell.state.onkeydown)
 document.addEventListener('keydown', function (event) {
-  switch(event.key) {
+  switch (event.key) {
     case 'ArrowLeft':
       cell.update({ historyIndex: cell.getState().historyIndex - 1 })
+      event.preventDefault()
       break
     case 'ArrowRight':
       cell.update({ historyIndex: cell.getState().historyIndex + 1 })
+      event.preventDefault()
       break
     case 'ArrowUp':
       cell.update({ historyIndex: 0 })
+      event.preventDefault()
       break
     case 'ArrowDown':
       cell.update({ historyIndex: cell.getState().history.length })
+      event.preventDefault()
       break
   }
 })
 
-
 // Debug
 
 meiosisTracer({

diff --git a/src/meiosis.css b/src/meiosis.css
@@ -2,7 +2,7 @@
 :root {
     --primary: #7b00ff;
     --secondary: #6c757d;
-    --highlight: rgb(149, 149, 149);
+    --highlight: #adadad;
     --success: #28a745;
     --info: #17a2b8;
     --warning: #ffc107;

diff --git a/src/meiosis.ts b/src/meiosis.ts
@@ -8,10 +8,12 @@ import '../node_modules/chessground/assets/chessground.brown.css'
 import '../node_modules/chessground/assets/chessground.cburnett.css'
 
 import '@fortawesome/fontawesome-free/css/all.css'
-import { notify } from 'alertifyjs'
+import alertify, { notify } from 'alertifyjs'
 import 'alertifyjs/build/css/alertify.css'
-
-
+import 'alertifyjs/build/css/themes/semantic.css'
+alertify.defaults.transition = 'zoom'
+// alertify.defaults.theme.ok = 'ui positive button'
+// alertify.defaults.theme.cancel = 'ui black button'
 export const Toolbar = ({ state, update }) =>
   m('#toolbar.component', {}, [
     m('', {}, state.page),
@@ -24,36 +26,35 @@ export const Toolbar = ({ state, update }) =>
     ),
   ])
 
-
-  export const History = cell =>
-    m(
-      'table.history',
-      {},
-      Array.from(
-        { length: Math.ceil(cell.state.history?.length / 2) },
-        (_, i) => i
-      ).map(index =>
-        m('tr', {}, [
-          m('td.move-number', {}, index + 1),
-          m(
-            'td.move',
-            {
-              class:
-                2 * index + 1 === cell.state.historyIndex ? 'highlight' : '',
-            },
-            cell.state.history[2 * index]
-          ),
-          m(
-            'td.move',
-            {
-              class:
-                2 * index + 2 === cell.state.historyIndex ? 'highlight' : '',
-            },
-            cell.state.history[2 * index + 1]
-          ),
-        ])
-      )
+export const History = cell =>
+  m(
+    'table.history',
+    {},
+    Array.from(
+      { length: Math.ceil(cell.state.history?.length / 2) },
+      (_, i) => i
+    ).map(index =>
+      m('tr', {}, [
+        m('td.move-number', {}, index + 1),
+        m(
+          'td.move',
+          {
+            class: 2 * index + 1 === cell.state.historyIndex ? 'highlight' : '',
+            onclick: () => cell.update({ historyIndex: 2 * index + 1 }),
+          },
+          cell.state.history[2 * index]
+        ),
+        m(
+          'td.move',
+          {
+            class: 2 * index + 2 === cell.state.historyIndex ? 'highlight' : '',
+            onclick: () => cell.update({ historyIndex: 2 * index + 2 }),
+          },
+          cell.state.history[2 * index + 1]
+        ),
+      ])
     )
+  )
 
 export const Menu = cell =>
   m('#toolbar.component', {}, [