Merge pull request #295 from ml-research/display-opening-name

The name of the current opening that is being played is shown on screen (only works for normal chess and no other variants).

Author: LuisW04

package.json

@@ -6,7 +6,8 @@
   "license": "AGPL-3.0",
   "main": "./dist/electron/main.js",
   "scripts": {
-    "build": "node scripts/build.js && electron-builder",
+    "build:openings": "node tools/build-openings-json.mjs",
+    "build": "npm run build:openings && node scripts/build.js && electron-builder",
     "build:dir": "node scripts/build.js && electron-builder --dir",
     "build:clean": "cross-env BUILD_TARGET=clean node scripts/build.js",
     "build:web": "cross-env BUILD_TARGET=web node scripts/build.js",

src/renderer/components/GameBoards.vue

@@ -64,6 +64,12 @@
               :size="setFenSize()"
               @change="checkValidFEN"
             >
+            <div
+              v-if="opening"
+              class="opening-label"
+            >
+              {{ opening.eco }} – {{ opening.name }}
+            </div>
           </div>
           <div
             v-else
@@ -78,6 +84,12 @@
               :size="setFenSize()"
               @change="checkValidFEN"
             >
+            <div
+              v-if="opening"
+              class="opening-label"
+            >
+              {{ opening.eco }} – {{ opening.name }}
+            </div>
           </div>
           <div
             v-if="QuickTourIndex !== 5"
@@ -139,6 +151,7 @@ import PgnBrowser from './PgnBrowser.vue'
 import SettingsTab from './SettingsTab'
 import EvalPlotButton from './EvalPlotButton'
 import GameInfo from './GameInfo.vue'
+import { findBestOpeningForFen } from '../../shared/openingLookup'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -178,6 +191,12 @@ export default {
     fen () {
       return this.$store.getters.fen
     },
+    opening () {
+      if (!this.fen) return null
+      // only makes sense for standard chess
+      if (this.variant && this.variant !== 'chess') return null
+      return this.findOpeningProgressive()
+    },
     mainFirstMove () {
       return this.$store.getters.mainFirstMove
     },
@@ -347,6 +366,21 @@ export default {
     deselectPocketPieces () {
       this.$store.commit('selectPocketPiece', ['boardA', ''])
     },
+    findOpeningProgressive () {
+      let mov = this.currentMove
+      // check current position
+      const opening = findBestOpeningForFen(this.fen)
+      if (opening) return opening
+
+      // if no exact match, backtrack
+      while (mov && mov.prev) {
+        mov = mov.prev
+        const opening = findBestOpeningForFen(mov.fen)
+        if (opening) return opening
+      }
+
+      return null
+    },
     getBoardPos (event) {
       if (event.explicitOriginalTarget.className === 'cg-board' && this.selectedPockedPiece.boardA !== '') {
         // get click field
@@ -618,4 +652,21 @@ input {
   border-radius: 8px;
 }
 
+.opening-label {
+  margin-top: 4px;
+  font-size: 11pt;
+  color: var(--main-text-color);
+  opacity: 0.9;
+}
+
+.opening-label-qt {
+  margin-top: 4px;
+  font-size: 11pt;
+  color: var(--main-text-color);
+  opacity: 0.9;
+  border: 5px solid var(--quicktour-highlight);
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
 </style>

src/shared/openingLookup.js

@@ -0,0 +1,22 @@
+import openingsData from './openings.json'
+
+const byEpd = openingsData.byEpd || {}
+
+// FEN -> EPD (nur die ersten 4 Felder der FEN)
+export function fenToEpd (fen) {
+  const parts = fen.trim().split(/\s+/)
+  return parts.slice(0, 4).join(' ')
+}
+
+export function findOpeningsForFen (fen) {
+  const epd = fenToEpd(fen)
+  return byEpd[epd] || []
+}
+
+export function findBestOpeningForFen (fen) {
+  const candidates = findOpeningsForFen(fen)
+  if (!candidates.length) return null
+  return candidates.reduce((best, cur) =>
+    cur.pgn.split(' ').length > best.pgn.split(' ').length ? cur : best
+  )
+}