From df138962d61939eeeb0f0562919a0094be168487 Mon Sep 17 00:00:00 2001
From: DecentM <decentm@decentm.com>
Date: Mon, 2 Oct 2023 04:51:22 +0300
Subject: [PATCH] feat: remove afen sidebar, create new sidebar with move
 history

---
 apps/frontend/src/components/afen-info.vue    | 181 ------------------
 apps/frontend/src/components/chess-board.vue  | 134 ++++++-------
 apps/frontend/src/components/game-sidebar.vue |  79 ++++++++
 apps/frontend/src/css/app.scss                |  23 +++
 .../src/hooks/chess-rtc-connection.ts         |   2 +-
 apps/frontend/src/layouts/main-layout.vue     |  10 +-
 apps/frontend/src/pages/play/online-game.vue  |   3 -
 apps/frontend/src/pages/play/pen-pal-game.vue |  94 +++++----
 apps/frontend/src/pages/play/setup-game.vue   |   2 +-
 apps/frontend/src/router/routes.ts            |   2 +-
 packages/core/src/afen/index.ts               |   3 +
 packages/core/src/chess/board-memory.ts       |  30 +--
 packages/core/src/chess/board.ts              |  48 +++--
 packages/core/src/index.ts                    |   7 +-
 packages/core/src/notation/index.ts           |   4 +
 15 files changed, 292 insertions(+), 330 deletions(-)
 delete mode 100644 apps/frontend/src/components/afen-info.vue
 create mode 100644 apps/frontend/src/components/game-sidebar.vue
 create mode 100644 packages/core/src/afen/index.ts
 create mode 100644 packages/core/src/notation/index.ts

diff --git a/apps/frontend/src/components/afen-info.vue b/apps/frontend/src/components/afen-info.vue
deleted file mode 100644
index 0f15bf8..0000000
--- a/apps/frontend/src/components/afen-info.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { Board } from '@decentm/allegiance-chess-core'
-
-import ChessPiece from './chess-piece.vue'
-import { useQuasar } from 'quasar'
-
-const props = defineProps<{
-  modelValue: string
-}>()
-
-const board = computed(() => {
-  const result = new Board()
-
-  result.importAFEN(props.modelValue)
-
-  return result
-})
-
-const activeColour = computed(() => {
-  if (!board.value) {
-    return
-  }
-
-  return board.value.activeColour
-})
-
-const halfmoveClock = computed(() => {
-  if (!board.value) {
-    return
-  }
-
-  return board.value.halfmoveClock
-})
-
-const fullmoveNumber = computed(() => {
-  if (!board.value) {
-    return
-  }
-
-  return board.value.fullmoveNumber
-})
-
-const castlingRights = computed(() => {
-  if (!board.value) {
-    return
-  }
-
-  return board.value.castlingRights
-})
-
-const q = useQuasar()
-
-const handleAFENCopy = () => {
-  if (!board.value) {
-    return
-  }
-
-  try {
-    navigator.clipboard.writeText(props.modelValue)
-
-    q.notify({
-      position: 'bottom-right',
-      timeout: 4000,
-      message: 'AFEN copied to clipboard',
-      icon: 'content_copy',
-    })
-  } catch {
-    q.notify({
-      position: 'bottom-right',
-      timeout: 4000,
-      message: 'Could not write to clipboard',
-      icon: 'close',
-      iconColor: 'red',
-    })
-  }
-}
-</script>
-
-<template>
-  <q-list>
-    <q-item clickable v-ripple @click="handleAFENCopy">
-      <q-item-section class="q-mt-sm q-mb-sm">
-        <q-item-label>AFEN</q-item-label>
-        <q-item-label caption lines="2">{{ modelValue }}</q-item-label>
-      </q-item-section>
-
-      <q-item-section side>
-        <q-icon name="edit" />
-      </q-item-section>
-    </q-item>
-
-    <q-separator inset />
-
-    <q-item>
-      <q-item-section class="q-mt-sm q-mb-sm">
-        <q-item-label>Next move</q-item-label>
-        <q-item-label caption lines="2">{{ activeColour }}</q-item-label>
-      </q-item-section>
-
-      <q-item-section side>
-        <q-icon name="arrow_forward_ios" />
-      </q-item-section>
-    </q-item>
-
-    <q-separator inset />
-
-    <q-item>
-      <q-item-section class="q-mt-sm q-mb-sm">
-        <q-item-label>Halfmove clock</q-item-label>
-        <q-item-label caption lines="2">{{ halfmoveClock }}</q-item-label>
-      </q-item-section>
-
-      <q-item-section side>
-        <q-icon name="hourglass_bottom" />
-      </q-item-section>
-    </q-item>
-
-    <q-separator inset />
-
-    <q-item>
-      <q-item-section class="q-mt-sm q-mb-sm">
-        <q-item-label>Fullmove number</q-item-label>
-        <q-item-label caption lines="2">{{ fullmoveNumber }}</q-item-label>
-      </q-item-section>
-
-      <q-item-section side>
-        <q-icon name="update" />
-      </q-item-section>
-    </q-item>
-
-    <q-separator inset />
-
-    <q-item>
-      <q-item-section class="q-mt-sm q-mb-sm">
-        <q-item-label>Castling rights</q-item-label>
-        <q-item-label caption lines="2">
-          <div class="row">
-            <chess-piece
-              v-if="castlingRights?.white.includes('queen')"
-              :allegiance="3"
-              piece="Q"
-              :size="24"
-            />
-            <chess-piece
-              v-if="castlingRights?.white.includes('king')"
-              :allegiance="3"
-              piece="K"
-              :size="24"
-            />
-            <chess-piece
-              v-if="castlingRights?.black.includes('queen')"
-              :allegiance="0"
-              piece="Q"
-              :size="24"
-            />
-            <chess-piece
-              v-if="castlingRights?.black.includes('king')"
-              :allegiance="0"
-              piece="K"
-              :size="24"
-            />
-
-            <q-icon
-              v-if="
-                !castlingRights ||
-                (castlingRights.black.length === 0 &&
-                  castlingRights.white.length === 0)
-              "
-              name="close"
-            />
-          </div>
-        </q-item-label>
-      </q-item-section>
-
-      <q-item-section side>
-        <q-icon name="castle" />
-      </q-item-section>
-    </q-item>
-  </q-list>
-</template>
diff --git a/apps/frontend/src/components/chess-board.vue b/apps/frontend/src/components/chess-board.vue
index 446eaf0..a79a443 100644
--- a/apps/frontend/src/components/chess-board.vue
+++ b/apps/frontend/src/components/chess-board.vue
@@ -22,85 +22,91 @@ const sidebarWidth = computed(() => {
 </script>
 
 <template>
-  <div class="column">
-    <div class="row" :style="{ height: `${sidebarWidth}px` }">
-      <div :style="{ width: `${sidebarWidth}px` }"></div>
-      <q-card
-        v-for="(_, fileIndex) in 8"
-        :key="fileIndex"
-        class="col column full-height justify-center"
-        flat
-      >
-        <q-card-section class="text-center q-pa-none">
-          {{
-            fileToLetter(
-              (perspective === 'white'
-                ? 9 - (8 - fileIndex)
-                : 8 - fileIndex) as File
-            ).toUpperCase()
-          }}
-        </q-card-section>
-      </q-card>
-      <div :style="{ width: `${sidebarWidth}px` }"></div>
-    </div>
-
-    <div class="row">
-      <div class="column" :style="{ width: `${sidebarWidth}px` }">
+  <div :style="{ width: `${width}px` }">
+    <div class="column">
+      <div class="row" :style="{ height: `${sidebarWidth}px` }">
+        <div :style="{ width: `${sidebarWidth}px` }"></div>
         <q-card
-          v-for="(_, rankIndex) in 8"
-          :key="rankIndex"
-          class="col column full-height justify-center text-center"
+          v-for="(_, fileIndex) in 8"
+          :key="fileIndex"
+          class="col column full-height justify-center"
           flat
         >
-          <q-card-section class="q-pa-none">
-            {{ perspective === 'white' ? 8 - rankIndex : 9 - (8 - rankIndex) }}
+          <q-card-section class="text-center q-pa-none">
+            {{
+              fileToLetter(
+                (perspective === 'white'
+                  ? 9 - (8 - fileIndex)
+                  : 8 - fileIndex) as File
+              ).toUpperCase()
+            }}
           </q-card-section>
         </q-card>
+        <div :style="{ width: `${sidebarWidth}px` }"></div>
       </div>
 
-      <div class="col">
-        <board-table
-          @execute-node="(node) => emit('execute-node', node)"
-          :board="board"
-          :perspective="perspective"
-          :play-as="playAs"
-          :width="width - sidebarWidth"
-        />
+      <div class="row">
+        <div class="column" :style="{ width: `${sidebarWidth}px` }">
+          <q-card
+            v-for="(_, rankIndex) in 8"
+            :key="rankIndex"
+            class="col column full-height justify-center text-center"
+            flat
+          >
+            <q-card-section class="q-pa-none">
+              {{
+                perspective === 'white' ? 8 - rankIndex : 9 - (8 - rankIndex)
+              }}
+            </q-card-section>
+          </q-card>
+        </div>
+
+        <div class="col">
+          <board-table
+            @execute-node="(node) => emit('execute-node', node)"
+            :board="board"
+            :perspective="perspective"
+            :play-as="playAs"
+            :width="width - sidebarWidth * 2"
+          />
+        </div>
+
+        <div class="column" :style="{ width: `${sidebarWidth}px` }">
+          <q-card
+            v-for="(_, rankIndex) in 8"
+            :key="rankIndex"
+            class="col column full-height justify-center text-center"
+            flat
+          >
+            <q-card-section class="q-pa-none">
+              {{
+                perspective === 'white' ? 8 - rankIndex : 9 - (8 - rankIndex)
+              }}
+            </q-card-section>
+          </q-card>
+        </div>
       </div>
 
-      <div class="column" :style="{ width: `${sidebarWidth}px` }">
+      <div class="row" :style="{ height: `${sidebarWidth}px` }">
+        <div :style="{ width: `${sidebarWidth}px` }"></div>
         <q-card
-          v-for="(_, rankIndex) in 8"
-          :key="rankIndex"
-          class="col column full-height justify-center text-center"
+          v-for="(_, fileIndex) in 8"
+          :key="fileIndex"
+          class="col column full-height justify-center"
           flat
         >
-          <q-card-section class="q-pa-none">
-            {{ perspective === 'white' ? 8 - rankIndex : 9 - (8 - rankIndex) }}
+          <q-card-section class="text-center q-pa-none">
+            {{
+              fileToLetter(
+                (perspective === 'white'
+                  ? 9 - (8 - fileIndex)
+                  : 8 - fileIndex) as File
+              ).toUpperCase()
+            }}
           </q-card-section>
         </q-card>
+        <div :style="{ width: `${sidebarWidth}px` }"></div>
       </div>
     </div>
-
-    <div class="row" :style="{ height: `${sidebarWidth}px` }">
-      <div :style="{ width: `${sidebarWidth}px` }"></div>
-      <q-card
-        v-for="(_, fileIndex) in 8"
-        :key="fileIndex"
-        class="col column full-height justify-center"
-        flat
-      >
-        <q-card-section class="text-center q-pa-none">
-          {{
-            fileToLetter(
-              (perspective === 'white'
-                ? 9 - (8 - fileIndex)
-                : 8 - fileIndex) as File
-            ).toUpperCase()
-          }}
-        </q-card-section>
-      </q-card>
-      <div :style="{ width: `${sidebarWidth}px` }"></div>
-    </div>
   </div>
 </template>
diff --git a/apps/frontend/src/components/game-sidebar.vue b/apps/frontend/src/components/game-sidebar.vue
new file mode 100644
index 0000000..1f21bff
--- /dev/null
+++ b/apps/frontend/src/components/game-sidebar.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Notation } from '@decentm/allegiance-chess-core'
+
+const props = defineProps<{
+  moveHistory: Notation.RootNode
+  activeColour: 'white' | 'black'
+  ownColour: 'white' | 'black'
+}>()
+
+const rows = computed(() => {
+  const result: Notation.Node[][] = []
+
+  props.moveHistory.children.forEach((node) => {
+    const lastRow = result.at(-1)
+
+    if (!lastRow || lastRow.length !== 1) {
+      result.push([node])
+      return
+    }
+
+    lastRow.push(node)
+  })
+
+  return result
+})
+</script>
+
+<style lang="scss" scoped>
+.white-move {
+  background-color: $chess-white;
+  color: $chess-black;
+}
+
+.black-move {
+  background-color: $chess-black;
+  color: $chess-white;
+}
+</style>
+
+<template>
+  <q-card flat bordered class="q-ma-md">
+    <transition mode="out-in">
+      <q-card-section
+        class="bg-primary text-white q-mb-md"
+        v-if="activeColour === ownColour"
+      >
+        <div class="text-h6">Your turn!</div>
+      </q-card-section>
+
+      <q-card-section class="bg-grey text-black q-mb-md" v-else>
+        <div class="text-h6">Waiting for opponent...</div>
+      </q-card-section>
+    </transition>
+
+    <transition-group mode="out-in">
+      <q-card-section
+        v-for="(row, index) in rows"
+        :key="index"
+        horizontal
+        class="row q-py-none q-mx-md"
+      >
+        <div class="col" v-if="row[0]">
+          <q-chip class="white-move">
+            {{ Notation.writeNode(row[0]) }}
+          </q-chip>
+        </div>
+
+        <transition mode="out-in">
+          <div class="col" v-if="row[1]">
+            <q-chip class="black-move">
+              {{ Notation.writeNode(row[1]) }}
+            </q-chip>
+          </div>
+        </transition>
+      </q-card-section>
+    </transition-group>
+  </q-card>
+</template>
diff --git a/apps/frontend/src/css/app.scss b/apps/frontend/src/css/app.scss
index ecac98f..f162486 100644
--- a/apps/frontend/src/css/app.scss
+++ b/apps/frontend/src/css/app.scss
@@ -1 +1,24 @@
 // app global css in SCSS form
+
+.v- {
+  &enter-active,
+  &leave-active {
+    transition-property: transform, opacity, filter;
+    transition-duration: 0.2s;
+  }
+
+  &enter-active {
+    transition-timing-function: cubic-bezier(0.19, 0.84, 0.53, 1);
+  }
+
+  &leave-active {
+    transition-timing-function: cubic-bezier(0.58, 0.05, 0.91, 0.53);
+  }
+
+  &enter-from,
+  &leave-to {
+    opacity: 0;
+    transform: scale(0.95);
+    filter: grayscale(1);
+  }
+}
diff --git a/apps/frontend/src/hooks/chess-rtc-connection.ts b/apps/frontend/src/hooks/chess-rtc-connection.ts
index 7831057..9d3e4cb 100644
--- a/apps/frontend/src/hooks/chess-rtc-connection.ts
+++ b/apps/frontend/src/hooks/chess-rtc-connection.ts
@@ -24,8 +24,8 @@ export type ChessRtcConnection = {
   sendMessage: (message: ChessMessage) => void
   open: Ref<boolean>
   disconnect: () => void
-  serverSide: Ref<'white' | 'black' | null>
 
+  serverSide: Ref<'white' | 'black' | null>
   boardAFEN: Ref<string>
   moveHistory: Ref<Node[]>
 }
diff --git a/apps/frontend/src/layouts/main-layout.vue b/apps/frontend/src/layouts/main-layout.vue
index 8acb215..00a02b9 100644
--- a/apps/frontend/src/layouts/main-layout.vue
+++ b/apps/frontend/src/layouts/main-layout.vue
@@ -4,6 +4,10 @@ import { useRoute } from 'vue-router'
 import SidebarMenu from './main/sidebar-menu.vue'
 
 const route = useRoute()
+
+defineProps<{
+  fullwidth?: boolean
+}>()
 </script>
 
 <style lang="scss" scoped>
@@ -13,10 +17,6 @@ const route = useRoute()
 
 .main-layout {
   height: 100vh;
-
-  .layout-page {
-    max-width: 1400px;
-  }
 }
 </style>
 
@@ -38,7 +38,7 @@ const route = useRoute()
     </q-drawer>
 
     <q-page-container class="column items-center">
-      <q-page :class="{ 'q-pt-xl': route.meta.title }" class="layout-page">
+      <q-page :class="{ 'q-pt-xl': route.meta.title }" class="full-width">
         <router-view />
 
         <q-page-sticky
diff --git a/apps/frontend/src/pages/play/online-game.vue b/apps/frontend/src/pages/play/online-game.vue
index 88d0a0d..57f6e47 100644
--- a/apps/frontend/src/pages/play/online-game.vue
+++ b/apps/frontend/src/pages/play/online-game.vue
@@ -3,7 +3,6 @@ import { computed, onBeforeUnmount, ref } from 'vue'
 import { Board, Node } from '@decentm/allegiance-chess-core'
 
 import ChessBoard from '../../components/chess-board.vue'
-import AfenInfo from '../../components/afen-info.vue'
 
 import { ChessRtcConnection } from '../../hooks/chess-rtc-connection'
 import { useQuasar } from 'quasar'
@@ -82,8 +81,6 @@ const perspective = computed(() => {
           <q-card-section class="bg-primary q-mb-md">
             <q-item-label>Board information</q-item-label>
           </q-card-section>
-
-          <afen-info :model-value="connection.boardAFEN.value" />
         </q-card>
       </div>
     </q-card-section>
diff --git a/apps/frontend/src/pages/play/pen-pal-game.vue b/apps/frontend/src/pages/play/pen-pal-game.vue
index d5739ca..befd654 100644
--- a/apps/frontend/src/pages/play/pen-pal-game.vue
+++ b/apps/frontend/src/pages/play/pen-pal-game.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from 'vue-router'
-import { Board, Node } from '@decentm/allegiance-chess-core'
+import { Board, Notation } from '@decentm/allegiance-chess-core'
 
 import ChessBoard from '../../components/chess-board.vue'
-import AfenInfo from '../../components/afen-info.vue'
+import GameSidebar from '../../components/game-sidebar.vue'
 
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { Hex } from '../../lib/hex'
 import { FenPreset } from '../../lib/boards'
 import { useQuasar } from 'quasar'
@@ -25,15 +25,28 @@ const afen = computed(() => {
   return Hex.hexToUtf8(hex)
 })
 
+const moveHistory = computed(() => {
+  const hex = Array.isArray(route.params.history)
+    ? route.params.history[0]
+    : route.params.history
+
+  if (!hex) {
+    return ''
+  }
+
+  return Hex.hexToUtf8(hex)
+})
+
 const board = computed(() => {
-  const result = new Board()
+  const b = new Board()
 
-  result.importAFEN(afen.value)
+  b.importAFEN(afen.value)
+  b.importMoveHistory(moveHistory.value)
 
-  return result
+  return b
 })
 
-const handleExecuteNode = (node: Partial<Node>) => {
+const handleExecuteNode = (node: Partial<Notation.Node>) => {
   const index = board.value.findMoveIndex(node)
 
   if (index === -1) {
@@ -43,46 +56,55 @@ const handleExecuteNode = (node: Partial<Node>) => {
   board.value.executeMoveIndex(index)
 
   router.push({
-    path: `/play/pen-pal/${Hex.utf8ToHex(board.value.toAFEN())}`,
+    path: `/play/pen-pal/${Hex.utf8ToHex(board.value.toAFEN())}/${Hex.utf8ToHex(
+      board.value.getMoveHistory()
+    )}`,
   })
 }
 
-const size = ref(800)
-
 const q = useQuasar()
 
-const handleResize = (newSize: { height: number; width: number }) => {
+const size = computed(() => {
+  if (q.screen.gt.lg) {
+    return q.screen.sizes.lg
+  }
+
   if (q.screen.gt.md) {
-    size.value = Math.min(newSize.width - newSize.width / 8 - 200, 1200)
-    return
+    return q.screen.sizes.md
   }
 
-  size.value = newSize.width - newSize.width / 8
-}
+  if (q.screen.gt.sm) {
+    return q.screen.sizes.sm
+  }
+
+  if (q.screen.gt.xs) {
+    return q.screen.width / 2
+  }
+
+  return q.screen.width / 3
+})
 </script>
 
 <template>
-  <q-card flat>
-    <q-card-section class="row">
-      <q-resize-observer @resize="handleResize" />
-
-      <chess-board
-        @execute-node="handleExecuteNode"
-        :board="board"
-        :perspective="board.activeColour"
-        :play-as="['white', 'black']"
-        :width="size"
-      />
-
-      <div class="col-lg col-md-12 full-width">
-        <q-card flat bordered class="full-height">
-          <q-card-section class="bg-primary q-mb-md">
-            <q-item-label>Board information</q-item-label>
-          </q-card-section>
-
-          <afen-info :model-value="afen" />
-        </q-card>
-      </div>
+  <q-card flat class="full-width">
+    <q-card-section horizontal>
+      <q-card-section :style="{ width: `${size}px` }">
+        <chess-board
+          @execute-node="handleExecuteNode"
+          :board="board"
+          :perspective="board.activeColour"
+          :play-as="['white', 'black']"
+          :width="size"
+        />
+      </q-card-section>
+
+      <q-card-section class="q-mb-md full-width">
+        <game-sidebar
+          :move-history="board.getMoveHistoryAst()"
+          :active-colour="board.activeColour"
+          :own-colour="board.activeColour"
+        />
+      </q-card-section>
     </q-card-section>
   </q-card>
 </template>
diff --git a/apps/frontend/src/pages/play/setup-game.vue b/apps/frontend/src/pages/play/setup-game.vue
index 294a95a..0631643 100644
--- a/apps/frontend/src/pages/play/setup-game.vue
+++ b/apps/frontend/src/pages/play/setup-game.vue
@@ -104,7 +104,7 @@ onMounted(() => {
 </style>
 
 <template>
-  <q-card flat class="full-height">
+  <q-card flat>
     <q-card-section vertical>
       <div class="row items-center full-height space">
         <div class="col-12 text-center q-pa-md">
diff --git a/apps/frontend/src/router/routes.ts b/apps/frontend/src/router/routes.ts
index 02dc3fd..5d07457 100644
--- a/apps/frontend/src/router/routes.ts
+++ b/apps/frontend/src/router/routes.ts
@@ -38,7 +38,7 @@ const routes: RouteRecordRaw[] = [
             component: () => import('pages/play/online-game.vue'),
           },
           {
-            path: 'pen-pal/:state?',
+            path: 'pen-pal/:state?/:history?',
             component: () => import('pages/play/pen-pal-game.vue'),
             meta: {
               title: 'Pen-pal mode',
diff --git a/packages/core/src/afen/index.ts b/packages/core/src/afen/index.ts
new file mode 100644
index 0000000..4482312
--- /dev/null
+++ b/packages/core/src/afen/index.ts
@@ -0,0 +1,3 @@
+export * from './parser'
+export * from './tokenizer'
+export * from './writer'
diff --git a/packages/core/src/chess/board-memory.ts b/packages/core/src/chess/board-memory.ts
index e3900c6..bc6603e 100644
--- a/packages/core/src/chess/board-memory.ts
+++ b/packages/core/src/chess/board-memory.ts
@@ -1,8 +1,7 @@
 import { VError } from 'verror'
 import cloneDeep from 'lodash.clonedeep'
 
-import { File, Piece, Rank } from '../notation/declarations'
-import { Coordinates, Node } from '../notation/parser'
+import * as Notation from '../notation'
 
 import { fileToLetter } from '../lib/notation'
 import { allegianceSide } from '../lib/allegiance'
@@ -12,21 +11,21 @@ import { CastlingRightsNode, RootNode } from '../afen/parser'
 import { PieceAllegiance } from './board'
 
 export type BoardSquare = {
-  piece: Piece | null
+  piece: Notation.Piece | null
   allegiance: PieceAllegiance
 }
 
 // memory[rank][file] = BoardSquare
 type Memory = (BoardSquare | null)[][]
 
-type StandaloneBoardSquare = BoardSquare & Coordinates
+type StandaloneBoardSquare = BoardSquare & Notation.Coordinates
 
 export class BoardMemory {
   private memory: Memory = []
 
   public activeColour: 'black' | 'white'
 
-  public enPassantTarget: Coordinates | null
+  public enPassantTarget: Notation.Coordinates | null
 
   private _castlingRights: Array<{
     colour: 'white' | 'black'
@@ -37,7 +36,7 @@ export class BoardMemory {
 
   public fullmoveNumber: number
 
-  public moveHistory: Node[]
+  public moveHistory: Notation.RootNode
 
   public clone() {
     const memory = new BoardMemory()
@@ -81,7 +80,10 @@ export class BoardMemory {
     this._castlingRights = []
     this.halfmoveClock = 0
     this.fullmoveNumber = 0
-    this.moveHistory = []
+    this.moveHistory = {
+      kind: 'root',
+      children: [],
+    }
 
     for (let rank = 0; rank < 8; rank++) {
       this.memory[rank] = []
@@ -121,7 +123,7 @@ export class BoardMemory {
     }
 
     result += `  ${ranks[0]
-      .map((_, fileIndex) => fileToLetter((fileIndex + 1) as File))
+      .map((_, fileIndex) => fileToLetter((fileIndex + 1) as Notation.File))
       .join(' ')}`
 
     return result
@@ -140,8 +142,8 @@ export class BoardMemory {
         result.push({
           allegiance: square.allegiance,
           piece: square.piece,
-          file: (file + 1) as File,
-          rank: (rank + 1) as Rank,
+          file: (file + 1) as Notation.File,
+          rank: (rank + 1) as Notation.Rank,
         })
       })
     })
@@ -149,7 +151,7 @@ export class BoardMemory {
     return result
   }
 
-  public getSquare(coords: Coordinates) {
+  public getSquare(coords: Notation.Coordinates) {
     if (!coords) {
       throw new VError('Attempted to get square with no coordinates')
     }
@@ -157,7 +159,7 @@ export class BoardMemory {
     return this.memory[coords.rank - 1][coords.file - 1]
   }
 
-  public setSquare(coords: Coordinates, square: BoardSquare | null) {
+  public setSquare(coords: Notation.Coordinates, square: BoardSquare | null) {
     this.memory[coords.rank - 1][coords.file - 1] = square
   }
 
@@ -240,8 +242,8 @@ export class BoardMemory {
   public fromAFEN(afen: RootNode) {
     this.clear()
 
-    let rank: Rank = 8
-    let file: File = 1
+    let rank: Notation.Rank = 8
+    let file: Notation.File = 1
 
     afen.children.forEach((node) => {
       if (file > 8) {
diff --git a/packages/core/src/chess/board.ts b/packages/core/src/chess/board.ts
index 6192f99..cba6759 100644
--- a/packages/core/src/chess/board.ts
+++ b/packages/core/src/chess/board.ts
@@ -18,12 +18,10 @@ import { coordinatesEqual } from '../lib/coordinate'
 import { allegianceSide } from '../lib/allegiance'
 import { isPromotion } from '../lib/board'
 
-import { GameOutcome, Piece, Rank } from '../notation/declarations'
-import { tokenize } from '../afen/tokenizer'
-import { parse } from '../afen/parser'
+import * as Notation from '../notation'
+import * as Afen from '../afen'
 
 import { BoardMemory, BoardSquare } from './board-memory'
-import { write } from '../afen/writer'
 
 export const PieceAllegiance = {
   Black: 0,
@@ -43,7 +41,7 @@ type ExecuteMoveTypeInput<NodeType extends MoveNode<string | void>> = {
   toSide: 'white' | 'black'
 }
 
-export const PROMOTION_PIECES: Piece[] = ['B', 'N', 'Q', 'R']
+export const PROMOTION_PIECES: Notation.Piece[] = ['B', 'N', 'Q', 'R']
 
 export class Board {
   private memory: BoardMemory
@@ -61,11 +59,15 @@ export class Board {
   }
 
   public importAFEN(afen: string) {
-    this.memory.fromAFEN(parse(tokenize(afen)))
+    this.memory.fromAFEN(Afen.parse(Afen.tokenize(afen)))
+  }
+
+  public importMoveHistory(history: string) {
+    this.memory.moveHistory = Notation.parse(Notation.tokenize(history))
   }
 
   public toAFEN() {
-    return write(this.memory.toAFEN())
+    return Afen.write(this.memory.toAFEN())
   }
 
   public getSquares() {
@@ -95,7 +97,11 @@ export class Board {
     }
   }
 
-  public get moveHistory() {
+  public getMoveHistory() {
+    return Notation.write(this.memory.moveHistory)
+  }
+
+  public getMoveHistoryAst() {
     return this.memory.moveHistory
   }
 
@@ -135,7 +141,7 @@ export class Board {
     this.memory.setSquare(kingTo, king)
     this.memory.setSquare(kingFrom, null)
 
-    const rank: Rank = input.fromSide === 'white' ? 1 : 8
+    const rank: Notation.Rank = input.fromSide === 'white' ? 1 : 8
     const rookFrom: Coordinates =
       input.node.side === 'king' ? { file: 8, rank } : { file: 1, rank }
     const rookTo: Coordinates =
@@ -150,7 +156,7 @@ export class Board {
       {
         rank: (input.fromSide === 'white'
           ? input.node.to.rank - 1
-          : input.node.to.rank + 1) as Rank,
+          : input.node.to.rank + 1) as Notation.Rank,
         file: input.node.to.file,
       },
       null
@@ -180,7 +186,7 @@ export class Board {
         file: input.node.from.file,
         rank: (input.fromSide === 'white'
           ? input.node.from.rank + 1
-          : input.node.from.rank - 1) as Rank,
+          : input.node.from.rank - 1) as Notation.Rank,
       }
     }
   }
@@ -302,7 +308,7 @@ export class Board {
       }
     }
 
-    this.memory.moveHistory.push(node)
+    this.memory.moveHistory.children.push(node)
   }
 
   public executeMoveIndex(moveIndex: number) {
@@ -600,7 +606,7 @@ export class Board {
       this.activeColour === 'white' ? 'black' : 'white'
     )
 
-    const hasGameOver = this.memory.moveHistory.some(
+    const hasGameOver = this.memory.moveHistory.children.some(
       (move) => move.kind === 'game-over'
     )
 
@@ -609,19 +615,19 @@ export class Board {
         result.push(
           {
             kind: 'game-over',
-            outcome: GameOutcome.White,
+            outcome: Notation.GameOutcome.White,
           },
           {
             kind: 'game-over',
-            outcome: GameOutcome.Draw,
+            outcome: Notation.GameOutcome.Draw,
           },
           {
             kind: 'game-over',
-            outcome: GameOutcome.Forfeit,
+            outcome: Notation.GameOutcome.Forfeit,
           },
           {
             kind: 'game-over',
-            outcome: GameOutcome.ForfeitWhite,
+            outcome: Notation.GameOutcome.ForfeitWhite,
           }
         )
       }
@@ -630,19 +636,19 @@ export class Board {
         result.push(
           {
             kind: 'game-over',
-            outcome: GameOutcome.Black,
+            outcome: Notation.GameOutcome.Black,
           },
           {
             kind: 'game-over',
-            outcome: GameOutcome.Draw,
+            outcome: Notation.GameOutcome.Draw,
           },
           {
             kind: 'game-over',
-            outcome: GameOutcome.Forfeit,
+            outcome: Notation.GameOutcome.Forfeit,
           },
           {
             kind: 'game-over',
-            outcome: GameOutcome.ForfeitBlack,
+            outcome: Notation.GameOutcome.ForfeitBlack,
           }
         )
       }
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index ec844a1..10d93c7 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,10 +1,11 @@
 export { Board, PieceAllegiance } from './chess/board'
+
 export { allegianceSide } from './lib/allegiance'
 export { coordinatesEqual } from './lib/coordinate'
 export { fileToLetter } from './lib/notation'
 export { getCoordsForIndex, isPromotion } from './lib/board'
 
-export type { MoveNode } from './notation/parser'
 export type { BoardSquare } from './chess/board-memory'
-export type { Coordinates, Node } from './notation/parser'
-export type { Piece, Rank, File } from './notation/declarations'
+
+export * as Afen from './afen'
+export * as Notation from './notation'
diff --git a/packages/core/src/notation/index.ts b/packages/core/src/notation/index.ts
new file mode 100644
index 0000000..e1e1bda
--- /dev/null
+++ b/packages/core/src/notation/index.ts
@@ -0,0 +1,4 @@
+export * from './declarations'
+export * from './parser'
+export * from './tokenizer'
+export * from './writer'